feat: number-field component

apps/www/__registry__/index.tsx

@@ -291,6 +291,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "number-field": {
+      name: "number-field",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/ui/number-field")),
+      source: "",
+      files: ["registry/default/ui/number-field.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "pagination": {
       name: "pagination",
       type: "components:ui",
@@ -1369,6 +1380,61 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "number-field-demo": {
+      name: "number-field-demo",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/default/example/number-field-demo")),
+      source: "",
+      files: ["registry/default/example/number-field-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-controlled": {
+      name: "number-field-controlled",
+      type: "components:example",
+      registryDependencies: ["number-field","slider"],
+      component: React.lazy(() => import("@/registry/default/example/number-field-controlled")),
+      source: "",
+      files: ["registry/default/example/number-field-controlled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-disabled": {
+      name: "number-field-disabled",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/default/example/number-field-disabled")),
+      source: "",
+      files: ["registry/default/example/number-field-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-prefix-suffix": {
+      name: "number-field-prefix-suffix",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/default/example/number-field-prefix-suffix")),
+      source: "",
+      files: ["registry/default/example/number-field-prefix-suffix.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-increment-only": {
+      name: "number-field-increment-only",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/default/example/number-field-increment-only")),
+      source: "",
+      files: ["registry/default/example/number-field-increment-only.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "pagination-demo": {
       name: "pagination-demo",
       type: "components:example",
@@ -3603,6 +3669,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "number-field": {
+      name: "number-field",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/new-york/ui/number-field")),
+      source: "",
+      files: ["registry/new-york/ui/number-field.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "pagination": {
       name: "pagination",
       type: "components:ui",
@@ -4681,6 +4758,61 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "number-field-demo": {
+      name: "number-field-demo",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/new-york/example/number-field-demo")),
+      source: "",
+      files: ["registry/new-york/example/number-field-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-controlled": {
+      name: "number-field-controlled",
+      type: "components:example",
+      registryDependencies: ["number-field","slider"],
+      component: React.lazy(() => import("@/registry/new-york/example/number-field-controlled")),
+      source: "",
+      files: ["registry/new-york/example/number-field-controlled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-disabled": {
+      name: "number-field-disabled",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/new-york/example/number-field-disabled")),
+      source: "",
+      files: ["registry/new-york/example/number-field-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-prefix-suffix": {
+      name: "number-field-prefix-suffix",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/new-york/example/number-field-prefix-suffix")),
+      source: "",
+      files: ["registry/new-york/example/number-field-prefix-suffix.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "number-field-increment-only": {
+      name: "number-field-increment-only",
+      type: "components:example",
+      registryDependencies: ["number-field"],
+      component: React.lazy(() => import("@/registry/new-york/example/number-field-increment-only")),
+      source: "",
+      files: ["registry/new-york/example/number-field-increment-only.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "pagination-demo": {
       name: "pagination-demo",
       type: "components:example",

apps/www/app/(app)/examples/playground/components/model-selector.tsx

@@ -141,11 +141,10 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
         mutation.attributeName === "aria-selected" &&
         ref.current?.getAttribute("aria-selected") === "true"
       ) {
-        onPeek(model);
+        onPeek(model)
       }
-    });
-  });
-
+    })
+  })
 
   return (
     <CommandItem

apps/www/config/docs.ts

@@ -237,6 +237,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/navigation-menu",
           items: [],
         },
+        {
+          title: "Number Field",
+          href: "/docs/components/number-field",
+          items: [],
+        },
         {
           title: "Pagination",
           href: "/docs/components/pagination",

apps/www/content/docs/components/number-field.mdx

@@ -0,0 +1,103 @@
+---
+title: Number Field
+description: Displays a number field input with formatting.
+component: true
+links:
+  doc: https://s-yadav.github.io/react-number-format/docs/intro
+  api: https://s-yadav.github.io/react-number-format/docs/numeric_format
+---
+
+<ComponentPreview
+  name="number-field-demo"
+  description="A number field input component."
+/>
+
+## About
+
+The number field component is built using the [React Number Format](https://s-yadav.github.io/react-number-format/) library.
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add number-field
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="number-field" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { NumberFieldInput } from "@/components/ui/number-field"
+```
+
+```tsx
+<NumberFieldInput />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview
+  name="number-field-demo"
+  className="[&_input]:max-w-xs"
+  description="A form input component."
+/>
+
+### Controlled
+
+Use your own state, set min/max ranges, or [customize](https://s-yadav.github.io/react-number-format/docs/customization) formatting to your liking.
+
+<ComponentPreview
+  name="number-field-controlled"
+  className="[&_input]:max-w-xs"
+  description="A disabled input component."
+/>
+
+### Disabled
+
+<ComponentPreview
+  name="number-field-disabled"
+  className="[&_input]:max-w-xs"
+  description="A disabled input component."
+/>
+
+### With Prefix or Suffix
+
+<ComponentPreview
+  name="number-field-prefix-suffix"
+  className="[&_input]:max-w-xs"
+  description="An input component with a label."
+/>
+
+### With Increment Only
+
+<ComponentPreview
+  name="number-field-increment-only"
+  className="[&_input]:max-w-xs"
+  description="An input component with a button."
+/>