fix(number-field): fixed blinking focus ring problems (#126)

.changeset/fast-swans-cry.md

@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+fix(number-field): fixed blinking focus ring problems (#126)

apps/docs/public/registry/ui/number-field.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "number-field.tsx",
-      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as NumberFieldPrimitive from \"@kobalte/core/number-field\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst NumberField = NumberFieldPrimitive.Root\n\ntype NumberFieldLabelProps<T extends ValidComponent = \"label\"> =\n  NumberFieldPrimitive.NumberFieldLabelProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldLabel = <T extends ValidComponent = \"label\">(\n  props: PolymorphicProps<T, NumberFieldLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldLabelProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Label\n      class={cn(\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldInputProps<T extends ValidComponent = \"input\"> =\n  NumberFieldPrimitive.NumberFieldInputProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldInput = <T extends ValidComponent = \"input\">(\n  props: PolymorphicProps<T, NumberFieldInputProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldInputProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Input\n      class={cn(\n        \"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldIncrementTriggerProps<T extends ValidComponent = \"button\"> =\n  NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NumberFieldIncrementTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldIncrementTriggerProps, [\n    \"class\",\n    \"children\"\n  ])\n  return (\n    <NumberFieldPrimitive.IncrementTrigger\n      class={cn(\n        \"absolute right-1 top-1 inline-flex size-4 items-center justify-center\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"size-4\"\n        >\n          <path d=\"M6 15l6 -6l6 6\" />\n        </svg>\n      )}\n    </NumberFieldPrimitive.IncrementTrigger>\n  )\n}\n\ntype NumberFieldDecrementTriggerProps<T extends ValidComponent = \"button\"> =\n  NumberFieldPrimitive.NumberFieldDecrementTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NumberFieldDecrementTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NumberFieldDecrementTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldDecrementTriggerProps, [\n    \"class\",\n    \"children\"\n  ])\n  return (\n    <NumberFieldPrimitive.DecrementTrigger\n      class={cn(\n        \"absolute bottom-1 right-1 inline-flex size-4 items-center justify-center\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"size-4\"\n        >\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      )}\n    </NumberFieldPrimitive.DecrementTrigger>\n  )\n}\n\ntype NumberFieldDescriptionProps<T extends ValidComponent = \"div\"> =\n  NumberFieldPrimitive.NumberFieldDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldDescription = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NumberFieldDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldDescriptionProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldErrorMessageProps<T extends ValidComponent = \"div\"> =\n  NumberFieldPrimitive.NumberFieldErrorMessageProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldErrorMessage = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NumberFieldErrorMessageProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldErrorMessageProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.ErrorMessage\n      class={cn(\"text-sm text-error-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldLabel,\n  NumberFieldInput,\n  NumberFieldIncrementTrigger,\n  NumberFieldDecrementTrigger,\n  NumberFieldDescription,\n  NumberFieldErrorMessage\n}\n"
+      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as NumberFieldPrimitive from \"@kobalte/core/number-field\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst NumberField = NumberFieldPrimitive.Root\n\nconst NumberFieldGroup: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\n        \"relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldLabelProps<T extends ValidComponent = \"label\"> =\n  NumberFieldPrimitive.NumberFieldLabelProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldLabel = <T extends ValidComponent = \"label\">(\n  props: PolymorphicProps<T, NumberFieldLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldLabelProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Label\n      class={cn(\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldInputProps<T extends ValidComponent = \"input\"> =\n  NumberFieldPrimitive.NumberFieldInputProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldInput = <T extends ValidComponent = \"input\">(\n  props: PolymorphicProps<T, NumberFieldInputProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldInputProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Input\n      class={cn(\n        \"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldIncrementTriggerProps<T extends ValidComponent = \"button\"> =\n  NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NumberFieldIncrementTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldIncrementTriggerProps, [\n    \"class\",\n    \"children\"\n  ])\n  return (\n    <NumberFieldPrimitive.IncrementTrigger\n      class={cn(\n        \"absolute right-1 top-1 inline-flex size-4 items-center justify-center\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"size-4\"\n        >\n          <path d=\"M6 15l6 -6l6 6\" />\n        </svg>\n      )}\n    </NumberFieldPrimitive.IncrementTrigger>\n  )\n}\n\ntype NumberFieldDecrementTriggerProps<T extends ValidComponent = \"button\"> =\n  NumberFieldPrimitive.NumberFieldDecrementTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NumberFieldDecrementTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NumberFieldDecrementTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldDecrementTriggerProps, [\n    \"class\",\n    \"children\"\n  ])\n  return (\n    <NumberFieldPrimitive.DecrementTrigger\n      class={cn(\n        \"absolute bottom-1 right-1 inline-flex size-4 items-center justify-center\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"size-4\"\n        >\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      )}\n    </NumberFieldPrimitive.DecrementTrigger>\n  )\n}\n\ntype NumberFieldDescriptionProps<T extends ValidComponent = \"div\"> =\n  NumberFieldPrimitive.NumberFieldDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldDescription = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NumberFieldDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldDescriptionProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype NumberFieldErrorMessageProps<T extends ValidComponent = \"div\"> =\n  NumberFieldPrimitive.NumberFieldErrorMessageProps<T> & {\n    class?: string | undefined\n  }\n\nconst NumberFieldErrorMessage = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NumberFieldErrorMessageProps<T>>\n) => {\n  const [local, others] = splitProps(props as NumberFieldErrorMessageProps, [\"class\"])\n  return (\n    <NumberFieldPrimitive.ErrorMessage\n      class={cn(\"text-sm text-error-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldLabel,\n  NumberFieldInput,\n  NumberFieldIncrementTrigger,\n  NumberFieldDecrementTrigger,\n  NumberFieldDescription,\n  NumberFieldErrorMessage\n}\n"
     }
   ],
   "type": "ui"

apps/docs/src/registry/example/number-field-demo.tsx

@@ -4,6 +4,7 @@ import {
   NumberField,
   NumberFieldDecrementTrigger,
   NumberFieldErrorMessage,
+  NumberFieldGroup,
   NumberFieldIncrementTrigger,
   NumberFieldInput
 } from "~/registry/ui/number-field"
@@ -17,11 +18,11 @@ export default function NumberFieldDemo() {
       onRawValueChange={setRawValue}
       validationState={rawValue() !== 40 ? "invalid" : "valid"}
     >
-      <div class="relative">
+      <NumberFieldGroup>
         <NumberFieldInput />
         <NumberFieldIncrementTrigger />
         <NumberFieldDecrementTrigger />
-      </div>
+      </NumberFieldGroup>
       <NumberFieldErrorMessage>Hmm, I prefer 40.</NumberFieldErrorMessage>
     </NumberField>
   )

apps/docs/src/registry/ui/number-field.tsx

@@ -1,4 +1,4 @@
-import type { JSX, ValidComponent } from "solid-js"
+import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
 import { splitProps } from "solid-js"
 
 import * as NumberFieldPrimitive from "@kobalte/core/number-field"
@@ -8,6 +8,19 @@ import { cn } from "~/lib/utils"
 
 const NumberField = NumberFieldPrimitive.Root
 
+const NumberFieldGroup: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"])
+  return (
+    <div
+      class={cn(
+        "relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
 type NumberFieldLabelProps<T extends ValidComponent = "label"> =
   NumberFieldPrimitive.NumberFieldLabelProps<T> & {
     class?: string | undefined
@@ -40,7 +53,7 @@ const NumberFieldInput = <T extends ValidComponent = "input">(
   return (
     <NumberFieldPrimitive.Input
       class={cn(
-        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground",
+        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground",
         local.class
       )}
       {...others}
@@ -162,6 +175,7 @@ const NumberFieldErrorMessage = <T extends ValidComponent = "div">(
 
 export {
   NumberField,
+  NumberFieldGroup,
   NumberFieldLabel,
   NumberFieldInput,
   NumberFieldIncrementTrigger,

apps/docs/src/routes/docs/components/number-field.mdx

@@ -47,18 +47,19 @@ npm install @kobalte/core
 import {
   NumberField,
   NumberFieldDecrementTrigger,
+  NumberFieldGroup,
   NumberFieldIncrementTrigger,
   NumberFieldInput
 } from "~/registry/ui/number-field"
 
 export default function NumberFieldDemo() {
   return (
     <NumberField class="w-36" defaultValue={40}>
-      <div class="relative">
+      <NumberFieldGroup>
         <NumberFieldInput />
         <NumberFieldIncrementTrigger />
         <NumberFieldDecrementTrigger />
-      </div>
+      </NumberFieldGroup>
     </NumberField>
   )
 }