@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/navigation-menu/navigation-menu.recipe.mjs

@@ -0,0 +1,271 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/navigation-menu/navigation-menu.recipe.ts
+const navigationMenuRecipe = sva({
+	slots: [
+		"root",
+		"viewportPositioner",
+		"viewport",
+		"trigger",
+		"content",
+		"list",
+		"item",
+		"link",
+		"indicator",
+		"itemIndicator",
+		"arrow"
+	],
+	base: {
+		root: {
+			"--navigation-menu-offset": "100%",
+			position: "relative",
+			display: "flex",
+			alignItems: "center"
+		},
+		viewportPositioner: {
+			position: "absolute",
+			insetBlockStart: "var(--navigation-menu-offset)",
+			left: "inset.none",
+			transform: "translateX(var(--viewport-x, 0))",
+			paddingBlockStart: "inset.compact",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))",
+			"--navigation-menu-motion": "transform",
+			"&:has([data-part=\"content\"][data-motion])": {
+				transitionProperty: "var(--navigation-menu-motion)",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction"
+			}
+		},
+		viewport: {
+			layerStyle: "reveal",
+			"--navigation-menu-viewport-motion": "opacity, transform, display, width, height",
+			transitionProperty: "var(--navigation-menu-viewport-motion)",
+			transformOrigin: "top center",
+			position: "relative",
+			width: "var(--viewport-width, auto)",
+			height: "var(--viewport-height, auto)",
+			overflow: "hidden",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "overlay"
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			rounded: "control",
+			textStyle: "label",
+			color: "foreground.muted",
+			cursor: "pointer",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			_open: {
+				bg: "secondary.default",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			minWidth: "surface.overlayMin",
+			paddingBlock: "inset.compact",
+			paddingInline: "inset.none",
+			color: "foreground.default"
+		},
+		list: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			margin: "inset.none",
+			padding: "inset.none",
+			listStyleType: "none",
+			"&[data-orientation=\"vertical\"]": {
+				flexDirection: "column",
+				alignItems: "stretch"
+			}
+		},
+		item: {
+			display: "flex",
+			alignItems: "center"
+		},
+		link: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			color: "foreground.default",
+			textDecoration: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not([data-current]):hover": {
+				bg: "secondary.default",
+				color: "foreground.default"
+			},
+			"&:not([data-current]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			"&[data-current]": {
+				bg: "primary.subtle",
+				color: "primary.onSurface",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		indicator: {
+			insetBlockStart: "var(--navigation-menu-offset)",
+			left: "inset.none",
+			transform: "translateX(var(--trigger-x, 0))",
+			width: "var(--trigger-width)",
+			"--navigation-menu-motion": "transform",
+			transitionProperty: "var(--navigation-menu-motion)",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			display: "flex",
+			alignItems: "flex-end",
+			justifyContent: "center",
+			overflow: "hidden",
+			color: "foreground.muted",
+			pointerEvents: "none"
+		},
+		itemIndicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "foreground.muted",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_open: { transform: "rotate(180deg)" }
+		},
+		arrow: {
+			"--arrow-size": "sizes.icon.xs",
+			"--arrow-background": "colors.surface.overlay"
+		}
+	},
+	variants: { size: {
+		xs: {
+			trigger: {
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "detail"
+			},
+			link: {
+				paddingBlock: "inset.none",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			trigger: {
+				minHeight: "control.sm",
+				paddingInline: "inset.control"
+			},
+			link: {
+				minHeight: "control.xs",
+				paddingBlock: "inset.none",
+				textStyle: "detail"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			trigger: {
+				minHeight: "control.md",
+				paddingInline: "inset.overlay"
+			},
+			link: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			trigger: {
+				minHeight: "control.lg",
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			link: {
+				minHeight: "control.md",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			trigger: {
+				minHeight: "control.xl",
+				paddingInline: "rhythm.normal",
+				textStyle: "subtitle"
+			},
+			link: {
+				minHeight: "control.lg",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { navigationMenuRecipe };
+
+//# sourceMappingURL=navigation-menu.recipe.mjs.map

package/dist/components/navigation-menu/navigation-menu.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.recipe.mjs","names":[],"sources":["../../../src/components/navigation-menu/navigation-menu.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const navigationMenuRecipe = sva({\n  slots: [\n    'root',\n    'viewportPositioner',\n    'viewport',\n    'trigger',\n    'content',\n    'list',\n    'item',\n    'link',\n    'indicator',\n    'itemIndicator',\n    'arrow',\n  ],\n  base: {\n    root: {\n      '--navigation-menu-offset': '100%',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    viewportPositioner: {\n      position: 'absolute',\n      insetBlockStart: 'var(--navigation-menu-offset)',\n      left: 'inset.none',\n      transform: 'translateX(var(--viewport-x, 0))',\n      paddingBlockStart: 'inset.compact',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n      '--navigation-menu-motion': 'transform',\n      '&:has([data-part=\"content\"][data-motion])': {\n        transitionProperty: 'var(--navigation-menu-motion)',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n      },\n    },\n    viewport: {\n      layerStyle: 'reveal',\n      '--navigation-menu-viewport-motion': 'opacity, transform, display, width, height',\n      transitionProperty: 'var(--navigation-menu-viewport-motion)',\n      transformOrigin: 'top center',\n      position: 'relative',\n      width: 'var(--viewport-width, auto)',\n      height: 'var(--viewport-height, auto)',\n      overflow: 'hidden',\n      rounded: 'overlay',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.overlay',\n      bg: 'surface.overlay',\n      color: 'foreground.default',\n      boxShadow: 'overlay',\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      rounded: 'control',\n      textStyle: 'label',\n      color: 'foreground.muted',\n      cursor: 'pointer',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      _open: { bg: 'secondary.default', color: 'foreground.default' },\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    content: {\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 'surface.overlayMin',\n      paddingBlock: 'inset.compact',\n      paddingInline: 'inset.none',\n      color: 'foreground.default',\n    },\n    list: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      margin: 'inset.none',\n      padding: 'inset.none',\n      listStyleType: 'none',\n      '&[data-orientation=\"vertical\"]': { flexDirection: 'column', alignItems: 'stretch' },\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    link: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      color: 'foreground.default',\n      textDecoration: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not([data-current]):hover': { bg: 'secondary.default', color: 'foreground.default' },\n      '&:not([data-current]):active': { bg: 'secondary.active', color: 'foreground.default' },\n      '&[data-current]': {\n        bg: 'primary.subtle',\n        color: 'primary.onSurface',\n        _highContrast: { bg: 'system.highlight', color: 'system.highlightText' },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: '-inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    indicator: {\n      insetBlockStart: 'var(--navigation-menu-offset)',\n      left: 'inset.none',\n      transform: 'translateX(var(--trigger-x, 0))',\n      width: 'var(--trigger-width)',\n      '--navigation-menu-motion': 'transform',\n      transitionProperty: 'var(--navigation-menu-motion)',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      display: 'flex',\n      alignItems: 'flex-end',\n      justifyContent: 'center',\n      overflow: 'hidden',\n      color: 'foreground.muted',\n      pointerEvents: 'none',\n    },\n    itemIndicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'foreground.muted',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _open: { transform: 'rotate(180deg)' },\n    },\n    arrow: {\n      '--arrow-size': 'sizes.icon.xs',\n      '--arrow-background': 'colors.surface.overlay',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        trigger: {\n          minHeight: 'control.xs',\n          paddingInline: 'inset.compact',\n          textStyle: 'detail',\n        },\n        link: { paddingBlock: 'inset.none', paddingInline: 'inset.compact', textStyle: 'caption' },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        trigger: {\n          minHeight: 'control.sm',\n          paddingInline: 'inset.control',\n        },\n        link: { minHeight: 'control.xs', paddingBlock: 'inset.none', textStyle: 'detail' },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        trigger: {\n          minHeight: 'control.md',\n          paddingInline: 'inset.overlay',\n        },\n        link: { minHeight: 'control.sm', textStyle: 'body' },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        trigger: {\n          minHeight: 'control.lg',\n          paddingInline: 'inset.surface',\n          textStyle: 'body',\n        },\n        link: { minHeight: 'control.md', paddingInline: 'inset.overlay', textStyle: 'body' },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        trigger: {\n          minHeight: 'control.xl',\n          paddingInline: 'rhythm.normal',\n          textStyle: 'subtitle',\n        },\n        link: { minHeight: 'control.lg', paddingInline: 'inset.surface', textStyle: 'subtitle' },\n        itemIndicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

package/dist/components/number-input/index.d.mts

@@ -0,0 +1,2 @@
+import { NumberFormatOptions, NumberInput, NumberInputRootProps, NumberInputValueChangeDetails } from "./number-input.mjs";
+export { type NumberFormatOptions, NumberInput, type NumberInputRootProps, type NumberInputValueChangeDetails };

package/dist/components/number-input/index.mjs

@@ -0,0 +1,2 @@
+import { NumberInput } from "./number-input.mjs";
+export { NumberInput };

package/dist/components/number-input/number-input.d.mts

@@ -0,0 +1,88 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/number-input/number-input.d.ts
+export interface NumberInputValueChangeDetails {
+  readonly value: string;
+  readonly valueAsNumber: number;
+}
+export interface NumberFormatOptions {
+  style?: 'decimal' | 'currency' | 'percent' | 'unit';
+  currency?: string;
+  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+  unit?: string;
+  unitDisplay?: 'short' | 'narrow' | 'long';
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+  minimumIntegerDigits?: number;
+  useGrouping?: boolean;
+  signDisplay?: 'auto' | 'never' | 'always' | 'exceptZero';
+}
+export interface NumberInputRootProps {
+  /** 제어되는 값이며 문자열입니다. 파싱된 숫자가 아니라 입력이 담고 있는 텍스트 그대로입니다. */
+  value?: string;
+  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */
+  defaultValue?: string;
+  /** 값을 바꾸는 모든 키 입력마다 호출됩니다. */
+  onValueChange?: (details: NumberInputValueChangeDetails) => void;
+  /** 값이 가라앉은 뒤 호출됩니다. 블러, Enter, 또는 길게 누르기가 끝나는 시점입니다. */
+  onValueCommit?: (details: NumberInputValueChangeDetails) => void;
+  /** `min`/`max` 바깥의 값이 입력됐을 때 호출됩니다. */
+  onValueInvalid?: (details: {
+    readonly value: string;
+  }) => void;
+  /** 받아들이는 가장 낮은 값. */
+  min?: number;
+  /** 받아들이는 가장 높은 값. */
+  max?: number;
+  /** 화살표 키와 스테퍼의 단위. 기본값은 1입니다. */
+  step?: number;
+  /** PageUp/PageDown의 단위. 기본값은 열 스텝입니다. */
+  largeStep?: number;
+  /** Shift+화살표의 단위. 기본값은 한 스텝의 10분의 1입니다. */
+  smallStep?: number;
+  /**
+   * 로케일이 정하는 것 너머로 숫자를 쓰는 방식입니다. 형태는 `Intl.NumberFormatOptions`와 같고,
+   * 주지 않으면 입력한 소수 자릿수를 모두 유지합니다.
+   */
+  formatOptions?: NumberFormatOptions;
+  /**
+   * 이 필드에만 provider의 로케일을 덮어씁니다.
+   *
+   * 한 화면에 정말로 둘 이상의 로케일이 함께 나오는 제품을 위한 것입니다. 이를테면 다른 언어로
+   * 된 텍스트 옆에 통화를 그 시장의 서식대로 입력받는 경우입니다. 그 밖의 모든 경우에는
+   * `SynapseProvider`에서 로케일을 한 번만 정해야 합니다.
+   */
+  locale?: string;
+  /** 블러 시 범위를 벗어난 값을 `min`..`max` 안으로 되돌립니다. 기본값은 true입니다. */
+  clampValueOnBlur?: boolean;
+  /** 값이 잘리기 전까지는 `min`/`max`를 넘겨 입력하는 것을 허용합니다. */
+  allowOverflow?: boolean;
+  /** 입력에 포커스가 있는 동안 스크롤 휠로 값을 올리고 내립니다. 기본값은 false입니다. */
+  allowMouseWheel?: boolean;
+  /** 스테퍼를 누르고 있는 동안 스텝을 반복합니다. 기본값은 true입니다. */
+  spinOnPress?: boolean;
+  /** 요청할 가상 키보드. 기본값은 `decimal`입니다. */
+  inputMode?: 'text' | 'tel' | 'numeric' | 'decimal' | 'search' | 'none';
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 입력을 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 NumberInput은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 NumberInput은 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다. */
+  required?: boolean;
+  /** 이 NumberInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const NumberInput: SynapseComponent<"control" | "decrementTrigger" | "incrementTrigger" | "input" | "label" | "root" | "scrubber" | "valueText", "root", NumberInputRootProps, never>;
+//#endregion
+//# sourceMappingURL=number-input.d.mts.map

package/dist/components/number-input/number-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.mts","names":[],"sources":["../../../src/components/number-input/number-input.tsx"],"mappings":";;;;iBAaiB;WACN;WACA;;iBAGM;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;iBAGe;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,iBAAiB,SAAS;;EAE1B,kBAAkB;aAAoB;;;EAEtC;;EAEA;;EAEA;;EAEA;;EAEA;;;;;EAKA,gBAAgB;;;;;;;;EAQhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAoBW,aAAW,sIAAA"}

package/dist/components/number-input/number-input.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { useLocale } from "../../provider/locale-context.mjs";
+import { chevronDown } from "../../icons/src/chevron-down.mjs";
+import { chevronUp } from "../../icons/src/chevron-up.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { numberInputRecipe } from "./number-input.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as numberInput from "@zag-js/number-input";
+//#region src/components/number-input/number-input.tsx
+const KEEP_EVERY_DIGIT = 20;
+function resolveFormatOptions(options) {
+	if (options === void 0) return { maximumFractionDigits: KEEP_EVERY_DIGIT };
+	if (options.style !== void 0 && options.style !== "decimal") return options;
+	if (options.maximumFractionDigits !== void 0) return options;
+	return {
+		...options,
+		maximumFractionDigits: KEEP_EVERY_DIGIT
+	};
+}
+const useNumberInputMachineProps = (props) => {
+	const provider = useLocale().locale;
+	return {
+		locale: props.locale ?? provider,
+		formatOptions: resolveFormatOptions(props.formatOptions)
+	};
+};
+const NumberInput = defineComponent()({
+	name: "NumberInput",
+	module: numberInput,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			input: field.control
+		}),
+		describe: ["input"]
+	},
+	elements: {
+		input: "input",
+		valueText: "span",
+		scrubber: "span"
+	},
+	defaultContent: {
+		valueText: (api) => api.value,
+		incrementTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronUp }),
+		decrementTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronDown })
+	},
+	machineTranslations: {
+		incrementLabel: "numberInput.incrementTrigger.label",
+		decrementLabel: "numberInput.decrementTrigger.label"
+	},
+	amendBehaviorProps: { input: (_behaviorProps, _api, _args, translate) => ({ "aria-roledescription": translate("numberInput.input.roleDescription") }) },
+	variantProps: ["size"],
+	useMachineProps: useNumberInputMachineProps,
+	slots: (props) => {
+		const size = resolveSize(props.size, "NumberInput");
+		return {
+			...numberInputRecipe({ size }),
+			control: inputPartClass(size, numberInputRecipe.raw({ size }).control)
+		};
+	}
+});
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=number-input.mjs.map

package/dist/components/number-input/number-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.mjs","names":[],"sources":["../../../src/components/number-input/number-input.tsx"],"sourcesContent":["'use client'\n\nimport { chevronDown, chevronUp } from '@neurocle/synapse-icons'\nimport * as numberInput from '@zag-js/number-input'\n\nimport { numberInputRecipe } from '#/components/number-input/number-input.recipe.ts'\nimport { useLocale } from '#/provider/locale-context.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface NumberInputValueChangeDetails {\n  readonly value: string\n  readonly valueAsNumber: number\n}\n\nexport interface NumberFormatOptions {\n  style?: 'decimal' | 'currency' | 'percent' | 'unit'\n  currency?: string\n  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name'\n  unit?: string\n  unitDisplay?: 'short' | 'narrow' | 'long'\n  minimumFractionDigits?: number\n  maximumFractionDigits?: number\n  minimumIntegerDigits?: number\n  useGrouping?: boolean\n  signDisplay?: 'auto' | 'never' | 'always' | 'exceptZero'\n}\n\nexport interface NumberInputRootProps {\n  /** 제어되는 값이며 문자열입니다. 파싱된 숫자가 아니라 입력이 담고 있는 텍스트 그대로입니다. */\n  value?: string\n  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */\n  defaultValue?: string\n  /** 값을 바꾸는 모든 키 입력마다 호출됩니다. */\n  onValueChange?: (details: NumberInputValueChangeDetails) => void\n  /** 값이 가라앉은 뒤 호출됩니다. 블러, Enter, 또는 길게 누르기가 끝나는 시점입니다. */\n  onValueCommit?: (details: NumberInputValueChangeDetails) => void\n  /** `min`/`max` 바깥의 값이 입력됐을 때 호출됩니다. */\n  onValueInvalid?: (details: { readonly value: string }) => void\n  /** 받아들이는 가장 낮은 값. */\n  min?: number\n  /** 받아들이는 가장 높은 값. */\n  max?: number\n  /** 화살표 키와 스테퍼의 단위. 기본값은 1입니다. */\n  step?: number\n  /** PageUp/PageDown의 단위. 기본값은 열 스텝입니다. */\n  largeStep?: number\n  /** Shift+화살표의 단위. 기본값은 한 스텝의 10분의 1입니다. */\n  smallStep?: number\n  /**\n   * 로케일이 정하는 것 너머로 숫자를 쓰는 방식입니다. 형태는 `Intl.NumberFormatOptions`와 같고,\n   * 주지 않으면 입력한 소수 자릿수를 모두 유지합니다.\n   */\n  formatOptions?: NumberFormatOptions\n  /**\n   * 이 필드에만 provider의 로케일을 덮어씁니다.\n   *\n   * 한 화면에 정말로 둘 이상의 로케일이 함께 나오는 제품을 위한 것입니다. 이를테면 다른 언어로\n   * 된 텍스트 옆에 통화를 그 시장의 서식대로 입력받는 경우입니다. 그 밖의 모든 경우에는\n   * `SynapseProvider`에서 로케일을 한 번만 정해야 합니다.\n   */\n  locale?: string\n  /** 블러 시 범위를 벗어난 값을 `min`..`max` 안으로 되돌립니다. 기본값은 true입니다. */\n  clampValueOnBlur?: boolean\n  /** 값이 잘리기 전까지는 `min`/`max`를 넘겨 입력하는 것을 허용합니다. */\n  allowOverflow?: boolean\n  /** 입력에 포커스가 있는 동안 스크롤 휠로 값을 올리고 내립니다. 기본값은 false입니다. */\n  allowMouseWheel?: boolean\n  /** 스테퍼를 누르고 있는 동안 스텝을 반복합니다. 기본값은 true입니다. */\n  spinOnPress?: boolean\n  /** 요청할 가상 키보드. 기본값은 `decimal`입니다. */\n  inputMode?: 'text' | 'tel' | 'numeric' | 'decimal' | 'search' | 'none'\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 입력을 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 NumberInput은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 NumberInput은 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다. */\n  required?: boolean\n  /** 이 NumberInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst KEEP_EVERY_DIGIT = 20\n\nfunction resolveFormatOptions(options: NumberFormatOptions | undefined): NumberFormatOptions {\n  if (options === undefined) return { maximumFractionDigits: KEEP_EVERY_DIGIT }\n  if (options.style !== undefined && options.style !== 'decimal') return options\n  if (options.maximumFractionDigits !== undefined) return options\n  return { ...options, maximumFractionDigits: KEEP_EVERY_DIGIT }\n}\n\nconst useNumberInputMachineProps = (props: NumberInputRootProps): Record<string, unknown> => {\n  const provider = useLocale().locale\n  return {\n    locale: props.locale ?? provider,\n    formatOptions: resolveFormatOptions(props.formatOptions),\n  }\n}\n\nexport const NumberInput = defineComponent<NumberInputRootProps>()({\n  name: 'NumberInput',\n  module: numberInput,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({ label: field.label, input: field.control }),\n    describe: ['input'],\n  },\n  elements: {\n    input: 'input',\n    valueText: 'span',\n    scrubber: 'span',\n  },\n  defaultContent: {\n    valueText: (api) => api.value,\n    incrementTrigger: () => <Icon icon={chevronUp} />,\n    decrementTrigger: () => <Icon icon={chevronDown} />,\n  },\n  machineTranslations: {\n    incrementLabel: 'numberInput.incrementTrigger.label',\n    decrementLabel: 'numberInput.decrementTrigger.label',\n  },\n  amendBehaviorProps: {\n    input: (_behaviorProps, _api, _args, translate) => ({\n      'aria-roledescription': translate('numberInput.input.roleDescription'),\n    }),\n  },\n  variantProps: ['size'],\n  useMachineProps: useNumberInputMachineProps,\n  slots: (props: NumberInputRootProps) => {\n    const size = resolveSize(props.size, 'NumberInput')\n    return {\n      ...numberInputRecipe({ size }),\n      control: inputPartClass(size, numberInputRecipe.raw({ size }).control),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AA+FA,MAAM,mBAAmB;AAEzB,SAAS,qBAAqB,SAA+D;CAC3F,IAAI,YAAY,KAAA,GAAW,OAAO,EAAE,uBAAuB,iBAAiB;CAC5E,IAAI,QAAQ,UAAU,KAAA,KAAa,QAAQ,UAAU,WAAW,OAAO;CACvE,IAAI,QAAQ,0BAA0B,KAAA,GAAW,OAAO;CACxD,OAAO;EAAE,GAAG;EAAS,uBAAuB;CAAiB;AAC/D;AAEA,MAAM,8BAA8B,UAAyD;CAC3F,MAAM,WAAW,UAAU,CAAC,CAAC;CAC7B,OAAO;EACL,QAAQ,MAAM,UAAU;EACxB,eAAe,qBAAqB,MAAM,aAAa;CACzD;AACF;AAEA,MAAa,cAAc,gBAAsC,CAAC,CAAC;CACjE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,OAAO;EACL,MAAM,WAAW;GAAE,OAAO,MAAM;GAAO,OAAO,MAAM;EAAQ;EAC5D,UAAU,CAAC,OAAO;CACpB;CACA,UAAU;EACR,OAAO;EACP,WAAW;EACX,UAAU;CACZ;CACA,gBAAgB;EACd,YAAY,QAAQ,IAAI;EACxB,wBAAwB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;EAChD,wBAAwB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA;CACpD;CACA,qBAAqB;EACnB,gBAAgB;EAChB,gBAAgB;CAClB;CACA,oBAAoB,EAClB,QAAQ,gBAAgB,MAAM,OAAO,eAAe,EAClD,wBAAwB,UAAU,mCAAmC,EACvE,GACF;CACA,cAAc,CAAC,MAAM;CACrB,iBAAiB;CACjB,QAAQ,UAAgC;EACtC,MAAM,OAAO,YAAY,MAAM,MAAM,aAAa;EAClD,OAAO;GACL,GAAG,kBAAkB,EAAE,KAAK,CAAC;GAC7B,SAAS,eAAe,MAAM,kBAAkB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO;EACvE;CACF;AACF,CAAC"}