feat: number field

examples/stackflow-spa/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@seed-design/css": "1.0.3",
     "@seed-design/react": "1.0.3",
+    "@seed-design/react-number-field": "workspace:*",
     "@seed-design/stackflow": "1.0.0",
     "@seed-design/stylesheet": "1.1.1",
     "@stackflow/compat-await-push": "^1.1.13",

examples/stackflow-spa/src/activities/ActivityHome.tsx

@@ -178,6 +178,10 @@ const ActivityHome: ActivityComponentType = () => {
             { title: "SwipeableTabs", onClick: () => push("ActivitySwipeableTabs", {}) },
           ],
         },
+        {
+          title: "Form Components",
+          items: [{ title: "NumberField", onClick: () => push("ActivityNumberField", {}) }],
+        },
         {
           title: "Other Components",
           items: [

examples/stackflow-spa/src/activities/ActivityNumberField.tsx

@@ -0,0 +1,86 @@
+import { VStack, Text } from "@seed-design/react";
+import type { ActivityComponentType } from "@stackflow/react";
+import * as React from "react";
+import { AppBar, AppBarBackButton, AppBarMain } from "../seed-design/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../seed-design/stackflow/AppScreen";
+import { NumberField } from "../seed-design/ui/number-field";
+import { ListHeader } from "../seed-design/ui/list-header";
+
+const ActivityNumberField: ActivityComponentType = () => {
+  const [basicValue, setBasicValue] = React.useState<number | undefined>(0);
+  const [rangeValue, setRangeValue] = React.useState<number | undefined>(50);
+  const [stepValue, setStepValue] = React.useState<number | undefined>(0);
+  const [decimalValue, setDecimalValue] = React.useState<number | undefined>(0);
+
+  return (
+    <AppScreen>
+      <AppBar>
+        <AppBarBackButton />
+        <AppBarMain title="NumberField" />
+      </AppBar>
+      <AppScreenContent>
+        <VStack gap="spacingY.componentDefault" padding="x4">
+          {/* Basic */}
+          <VStack gap="x2">
+            <ListHeader>Basic</ListHeader>
+            <NumberField value={basicValue} onValueChange={setBasicValue} min={0} max={120} />
+            <Text>Current value: {basicValue ?? "undefined"}</Text>
+          </VStack>
+
+          {/* Range with min/max */}
+          <VStack gap="x2">
+            <ListHeader>Range (0-100)</ListHeader>
+            <NumberField
+              value={rangeValue}
+              onValueChange={setRangeValue}
+              min={0}
+              max={100}
+              step={5}
+            />
+            <Text>Current value: {rangeValue ?? "undefined"}</Text>
+          </VStack>
+
+          {/* Custom step */}
+          <VStack gap="x2">
+            <ListHeader>Custom Step (10)</ListHeader>
+            <NumberField value={stepValue} onValueChange={setStepValue} step={10} min={0} />
+            <Text>Current value: {stepValue ?? "undefined"}</Text>
+          </VStack>
+
+          {/* Decimal */}
+          <VStack gap="x2">
+            <ListHeader>Decimal (0.1 step)</ListHeader>
+            <NumberField
+              value={decimalValue}
+              onValueChange={setDecimalValue}
+              step={0.1}
+              min={0}
+              formatOptions={{ minimumFractionDigits: 1, maximumFractionDigits: 2 }}
+            />
+            <Text>Current value: {decimalValue ?? "undefined"}</Text>
+          </VStack>
+
+          {/* Disabled */}
+          <VStack gap="x2">
+            <ListHeader>Disabled</ListHeader>
+            <NumberField disabled value={42} />
+          </VStack>
+
+          {/* ReadOnly */}
+          <VStack gap="x2">
+            <ListHeader>ReadOnly</ListHeader>
+            <NumberField readOnly value={99} />
+          </VStack>
+
+          {/* Locale formatting */}
+          <VStack gap="x2">
+            <ListHeader>Korean Locale</ListHeader>
+            <NumberField locale="ko-KR" min={0} />
+          </VStack>
+        </VStack>
+      </AppScreenContent>
+    </AppScreen>
+  );
+};
+
+export default ActivityNumberField;

examples/stackflow-spa/src/seed-design/ui/number-field.tsx

@@ -0,0 +1,25 @@
+import * as SeedNumberField from "@seed-design/react-number-field";
+import * as React from "react";
+
+export interface NumberFieldProps extends SeedNumberField.NumberFieldRootProps {}
+
+/**
+ * NumberField component for numeric input
+ * @see https://seed-design.io/react/components/number-field
+ */
+export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
+  ({ ...otherProps }, ref) => {
+    return (
+      <SeedNumberField.NumberFieldRoot {...otherProps}>
+        <SeedNumberField.NumberFieldInput ref={ref} />
+        <SeedNumberField.NumberFieldDecrementButton>-</SeedNumberField.NumberFieldDecrementButton>
+        <SeedNumberField.NumberFieldIncrementButton>+</SeedNumberField.NumberFieldIncrementButton>
+      </SeedNumberField.NumberFieldRoot>
+    );
+  },
+);
+NumberField.displayName = "NumberField";
+
+export const NumberFieldInput = SeedNumberField.NumberFieldInput;
+export const NumberFieldIncrementButton = SeedNumberField.NumberFieldIncrementButton;
+export const NumberFieldDecrementButton = SeedNumberField.NumberFieldDecrementButton;

examples/stackflow-spa/src/stackflow/Stack.tsx

@@ -46,6 +46,7 @@ const { Stack, useFlow, useStepFlow } = stackflow({
     ActivityListSwitchItem: React.lazy(() => import("../activities/ActivityListSwitchItem")),
     ActivityListCheckItem: React.lazy(() => import("../activities/ActivityListCheckItem")),
     ActivityListRadioItem: React.lazy(() => import("../activities/ActivityListRadioItem")),
+    ActivityNumberField: React.lazy(() => import("../activities/ActivityNumberField")),
     ActivityNotFound,
   },
   plugins: [
@@ -87,6 +88,7 @@ const { Stack, useFlow, useStepFlow } = stackflow({
         ActivityListSwitchItem: "/list-item-switch",
         ActivityListCheckItem: "/list-item-check",
         ActivityListRadioItem: "/list-item-radio",
+        ActivityNumberField: "/number-field",
         ActivityNotFound: "/404",
       },
     }),

packages/react-headless/number-field/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@seed-design/react-number-field",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/number-field"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
+

packages/react-headless/number-field/src/NumberField.namespace.ts

@@ -0,0 +1,17 @@
+export {
+  NumberFieldRoot as Root,
+  NumberFieldLabel as Label,
+  NumberFieldDescription as Description,
+  NumberFieldErrorMessage as ErrorMessage,
+  NumberFieldInput as Input,
+  NumberFieldIncrementButton as IncrementButton,
+  NumberFieldDecrementButton as DecrementButton,
+  type NumberFieldRootProps as RootProps,
+  type NumberFieldLabelProps as LabelProps,
+  type NumberFieldDescriptionProps as DescriptionProps,
+  type NumberFieldErrorMessageProps as ErrorMessageProps,
+  type NumberFieldInputProps as InputProps,
+  type NumberFieldIncrementButtonProps as IncrementButtonProps,
+  type NumberFieldDecrementButtonProps as DecrementButtonProps,
+} from "./NumberField";
+