@neurocle/synapse-react 0.0.0-bootstrap

package/dist/components/combobox/combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.mjs","names":[],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["'use client'\n\nimport { chevronsUpDown, close } from '@neurocle/synapse-icons'\nimport type { ListCollection } from '@zag-js/collection'\nimport * as combobox from '@zag-js/combobox'\nimport { createElement, type ReactNode } from 'react'\n\nimport {\n  pinnedRowProps,\n  positionProps,\n  rememberCollection,\n  windowedContent,\n} from '#/components/collection-window.tsx'\nimport { comboboxRecipe, comboboxStateSlots } from '#/components/combobox/combobox.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport type { SynapseCollection } from '#/shared/collection.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { createStateParts } from '#/shared/state-parts.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { DomAttributes, PartOwnProps } from '#/system/types.ts'\n\nexport interface ComboboxPositioning {\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n  gutter?: number\n  sameWidth?: boolean\n}\n\nexport interface ComboboxValueChangeDetails {\n  readonly value: readonly string[]\n}\n\nexport interface ComboboxInputValueChangeDetails {\n  readonly inputValue: string\n}\n\nexport interface ComboboxHighlightChangeDetails {\n  readonly highlightedValue: string | null\n}\n\nexport type ComboboxInputBehavior = 'none' | 'autohighlight' | 'autocomplete'\n\nexport type ComboboxSelectionBehavior = 'replace' | 'clear' | 'preserve'\n\nexport interface ComboboxRootProps<TItem> {\n  /**\n   * 제시할 컬렉션이며, `createCollection`으로 만듭니다.\n   *\n   * 필터링은 사용처의 몫입니다: 질의가 바뀌는 대로 컬렉션을 좁히고 — `withItems`는 새 컬렉션을\n   * 돌려주고 이것은 건드리지 않습니다 — 그 결과를 넘기면 됩니다. 컴포넌트는 사용처를 대신해\n   * 필터링하지 않는데, 일치가 \"~로 시작\"인지 \"~를 포함\"인지 \"퍼지\"인지 \"서버가 말한 대로\"인지\n   * 알 수 없기 때문입니다.\n   */\n  collection: SynapseCollection<TItem>\n  /** 제어되는 선택. */\n  value?: readonly string[]\n  /** 비제어 초기 선택. `value`가 주어지면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: ComboboxValueChangeDetails) => void\n  /** 제어되는 필드 안의 텍스트. 선택된 것을 뜻하는 `value`와는 별개입니다. */\n  inputValue?: string\n  /** 비제어 초기 필드 텍스트. */\n  defaultInputValue?: string\n  /** 텍스트가 바뀔 때 알림을 받습니다 — 사용처가 컬렉션을 다시 거르는 지점입니다. */\n  onInputValueChange?: (details: ComboboxInputValueChangeDetails) => void\n  /** 제어되는 하이라이트 아이템 — `aria-activedescendant`가 가리키는 대상입니다. */\n  highlightedValue?: string | null\n  /** 비제어 초기 하이라이트 아이템. */\n  defaultHighlightedValue?: string | null\n  /** 하이라이트가 움직일 때 알림을 받으며, 한 번도 렌더된 적 없는 아이템으로 갈 때도 받습니다. */\n  onHighlightChange?: (details: ComboboxHighlightChangeDetails) => void\n  /** 제어되는 목록의 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. */\n  defaultOpen?: boolean\n  /** 목록이 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: { open: boolean }) => void\n  /**\n   * 요청이 진행 중입니다.\n   *\n   * 이 컴포넌트가 스스로 답할 수 없는 유일한 상태 part 사실입니다. `Combobox.Loading`을\n   * 움직이며, `Combobox.Empty`보다 우선합니다 — 결과가 아직 도착하지 않아 비어 있는 컬렉션은\n   * 결과가 없는 컬렉션이 아닙니다.\n   */\n  loading?: boolean\n  /** 둘 이상을 선택할 수 있게 합니다. */\n  multiple?: boolean\n  /** 어떤 아이템과도 일치하지 않는 텍스트도 값으로 받아들입니다. */\n  allowCustomValue?: boolean\n  /** 선택하면 목록을 닫습니다. 단일 선택 Combobox에서는 기본값이 true입니다. */\n  closeOnSelect?: boolean\n  /** 필터링 말고도 타이핑이 무엇을 하는지. 기본값은 `none`입니다. */\n  inputBehavior?: ComboboxInputBehavior\n  /** 선택하면 필드의 텍스트가 어떻게 되는지. 기본값은 `replace`입니다. */\n  selectionBehavior?: ComboboxSelectionBehavior\n  /** 필드를 클릭하면 목록을 엽니다. */\n  openOnClick?: boolean\n  /** 텍스트가 바뀌는 즉시 목록을 엽니다. 기본값은 true입니다. */\n  openOnChange?: boolean\n  /** 키보드 이동이 양 끝을 넘어가면 반대편으로 이어집니다. */\n  loopFocus?: boolean\n  /** 필드의 placeholder 텍스트. */\n  placeholder?: string\n  /** 목록이 놓이는 위치. */\n  positioning?: ComboboxPositioning\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 Combobox를 id로 폼과 연결합니다. */\n  form?: string\n  /** 비활성화된 Combobox는 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 Combobox는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 무언가가 선택되어 있어야 합니다. */\n  required?: boolean\n  /** 마운트될 때 포커스를 필드 안으로 옮깁니다. */\n  autoFocus?: boolean\n  /** 이 Combobox에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\ntype ComboboxDefinitionProps = Omit<ComboboxRootProps<never>, 'collection'> & {\n  collection: ListCollection<unknown>\n}\n\nconst base = defineComponent<ComboboxDefinitionProps>()({\n  name: 'Combobox',\n  module: combobox,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({ label: field.label, input: field.control }),\n    describe: ['input'],\n  },\n  elements: {\n    itemText: 'span',\n    itemIndicator: 'span',\n    input: 'input',\n  },\n  defaultContent: {\n    trigger: () => <Icon icon={chevronsUpDown} />,\n    clearTrigger: () => <Icon icon={close} />,\n    list: windowedContent({\n      renderRow: (row, hidden, collection) => (\n        <base.Item\n          key={row.value}\n          item={row.item}\n          {...positionProps(row.position)}\n          {...pinnedRowProps(hidden)}\n        >\n          <base.ItemText item={row.item}>{collection.labelOf(row.value)}</base.ItemText>\n          <base.ItemIndicator item={row.item} />\n        </base.Item>\n      ),\n    }),\n  },\n  getterProps: {\n    item: ['item', 'persistFocus'],\n    itemText: ['item'],\n    itemIndicator: ['item'],\n    itemGroup: ['id'],\n    itemGroupLabel: ['htmlFor'],\n    trigger: ['focusable'],\n  },\n  machineTranslations: {\n    triggerLabel: 'combobox.trigger.label',\n    clearTriggerLabel: 'combobox.clearTrigger.label',\n  },\n  variantProps: ['size', 'loading'],\n  slots: (props: ComboboxDefinitionProps) => {\n    const size = resolveSize(props.size, 'Combobox')\n    return {\n      ...comboboxRecipe({ size }),\n      control: inputPartClass(size, comboboxRecipe.raw({ size }).control),\n    }\n  },\n})\n\nconst state = createStateParts<ComboboxDefinitionProps, 'empty' | 'loading'>({\n  component: 'Combobox',\n  when: {\n    empty: (props) => props.collection.size === 0,\n    loading: (props) => props.loading === true,\n  },\n  absent: {\n    error:\n      'A Combobox does not perform the request whose failure this would report. The consumer ' +\n      'fetches and filters, so the consumer is the only party that knows a request failed — and ' +\n      'the place to say so is beside the field, not inside a list the component opens and ' +\n      'closes on its own schedule.',\n  },\n  slots: () => comboboxStateSlots,\n})\n\nconst StatefulRoot = state.wrapRoot(base.Root)\n\nfunction ComboboxRoot<TItem>(\n  props: ComboboxRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes,\n): ReactNode {\n  const { collection, ...rest } = props\n  return createElement(StatefulRoot, { ...rest, collection: rememberCollection(collection) })\n}\nComboboxRoot.displayName = StatefulRoot.displayName\n\nexport const Combobox = {\n  ...base,\n  ...state.parts,\n  Root: ComboboxRoot,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqIA,MAAM,OAAO,gBAAyC,CAAC,CAAC;CACtD,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,UAAU;EACV,eAAe;EACf,OAAO;CACT;CACA,gBAAgB;EACd,eAAe,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;EAC5C,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,MAAM,gBAAgB,EACpB,YAAY,KAAK,QAAQ,eACvB,qBAAC,KAAK,MAAN;GAEE,MAAM,IAAI;GACV,GAAI,cAAc,IAAI,QAAQ;GAC9B,GAAI,eAAe,MAAM;GAJ3B,UAAA,CAME,oBAAC,KAAK,UAAN;IAAe,MAAM,IAAI;IAAO,UAAA,WAAW,QAAQ,IAAI,KAAK;GAAiB,CAAA,GAC7E,oBAAC,KAAK,eAAN,EAAoB,MAAM,IAAI,KAAO,CAAA,CAC5B;EAPJ,GAAA,IAAI,KAOA,EAEf,CAAC;CACH;CACA,aAAa;EACX,MAAM,CAAC,QAAQ,cAAc;EAC7B,UAAU,CAAC,MAAM;EACjB,eAAe,CAAC,MAAM;EACtB,WAAW,CAAC,IAAI;EAChB,gBAAgB,CAAC,SAAS;EAC1B,SAAS,CAAC,WAAW;CACvB;CACA,qBAAqB;EACnB,cAAc;EACd,mBAAmB;CACrB;CACA,cAAc,CAAC,QAAQ,SAAS;CAChC,QAAQ,UAAmC;EACzC,MAAM,OAAO,YAAY,MAAM,MAAM,UAAU;EAC/C,OAAO;GACL,GAAG,eAAe,EAAE,KAAK,CAAC;GAC1B,SAAS,eAAe,MAAM,eAAe,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO;EACpE;CACF;AACF,CAAC;AAED,MAAM,QAAQ,iBAA+D;CAC3E,WAAW;CACX,MAAM;EACJ,QAAQ,UAAU,MAAM,WAAW,SAAS;EAC5C,UAAU,UAAU,MAAM,YAAY;CACxC;CACA,QAAQ,EACN,OACE,gSAIJ;CACA,aAAa;AACf,CAAC;AAED,MAAM,eAAe,MAAM,SAAS,KAAK,IAAI;AAE7C,SAAS,aACP,OACW;CACX,MAAM,EAAE,YAAY,GAAG,SAAS;CAChC,OAAO,cAAc,cAAc;EAAE,GAAG;EAAM,YAAY,mBAAmB,UAAU;CAAE,CAAC;AAC5F;AACA,aAAa,cAAc,aAAa;AAExC,MAAa,WAAW;CACtB,GAAG;CACH,GAAG,MAAM;CACT,MAAM;AACR"}

package/dist/components/combobox/combobox.recipe.mjs

@@ -0,0 +1,336 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/combobox/combobox.recipe.ts
+const comboboxRecipe = sva({
+	slots: [
+		"root",
+		"clearTrigger",
+		"content",
+		"control",
+		"input",
+		"item",
+		"itemGroup",
+		"itemGroupLabel",
+		"itemIndicator",
+		"itemText",
+		"label",
+		"list",
+		"positioner",
+		"trigger"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			position: "relative",
+			paddingInline: "inset.none",
+			paddingInlineEnd: "inset.compact"
+		},
+		input: {
+			flex: "1",
+			alignSelf: "stretch",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			bg: "surface.transparent",
+			color: "foreground.default",
+			borderWidth: "none",
+			outlineStyle: "none",
+			_placeholder: { color: "foreground.subtle" },
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "foreground.default",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&: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"
+			},
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		clearTrigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "foreground.muted",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&: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" }
+			}
+		},
+		positioner: { zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))" },
+		content: {
+			layerStyle: "reveal",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: "surface.overlayMin",
+			maxWidth: "surface.overlayMax",
+			maxHeight: "surface.overlayMax",
+			overflowY: "auto",
+			paddingBlock: "inset.compact",
+			paddingInline: "inset.none",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "overlay",
+			pointerEvents: "auto"
+		},
+		list: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column",
+			"&:not(:last-of-type)": {
+				paddingBlockEnd: "inset.compact",
+				marginBlockEnd: "inset.compact",
+				borderBlockEndWidth: "hairline",
+				borderBlockEndStyle: "solid",
+				borderColor: "border.muted"
+			}
+		},
+		itemGroupLabel: {
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			textStyle: "detail",
+			color: "foreground.subtle"
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			color: "foreground.default",
+			cursor: "default",
+			userSelect: "none",
+			"&[data-state=checked]": { color: "primary.onSurface" },
+			_highlighted: {
+				bg: "secondary.default",
+				color: "foreground.default",
+				"&[data-state=checked]": { color: "primary.onSurface" },
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		itemText: { overflowWrap: "anywhere" },
+		itemIndicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "primary.onSurface"
+		}
+	},
+	variants: { size: {
+		xs: {
+			control: { height: "control.xs" },
+			input: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			item: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			trigger: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			input: {
+				minHeight: "target.minimum",
+				textStyle: "body"
+			},
+			item: {
+				minHeight: "target.minimum",
+				textStyle: "detail"
+			},
+			trigger: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			input: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			item: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			trigger: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			input: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			item: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			trigger: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			input: {
+				minHeight: "control.lg",
+				textStyle: "subtitle"
+			},
+			item: {
+				minHeight: "control.lg",
+				textStyle: "body"
+			},
+			trigger: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxStateSlots = {
+	empty: css({
+		paddingInline: "inset.control",
+		paddingBlock: "inset.compact",
+		textStyle: "body",
+		color: "foreground.muted",
+		textAlign: "center"
+	}),
+	loading: css({
+		paddingInline: "inset.control",
+		paddingBlock: "inset.compact",
+		textStyle: "body",
+		color: "foreground.muted",
+		textAlign: "center"
+	})
+};
+//#endregion
+export { comboboxRecipe, comboboxStateSlots };
+
+//# sourceMappingURL=combobox.recipe.mjs.map

package/dist/components/combobox/combobox.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.recipe.mjs","names":[],"sources":["../../../src/components/combobox/combobox.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\n\nexport const comboboxRecipe = sva({\n  slots: [\n    'root',\n    'clearTrigger',\n    'content',\n    'control',\n    'input',\n    'item',\n    'itemGroup',\n    'itemGroupLabel',\n    'itemIndicator',\n    'itemText',\n    'label',\n    'list',\n    'positioner',\n    'trigger',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      position: 'relative',\n      paddingInline: 'inset.none',\n      paddingInlineEnd: 'inset.compact',\n    },\n    input: {\n      flex: '1',\n      alignSelf: 'stretch',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      bg: 'surface.transparent',\n      color: 'foreground.default',\n      borderWidth: 'none',\n      outlineStyle: 'none',\n      _placeholder: { color: 'foreground.subtle' },\n      _readOnly: { cursor: 'default' },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.default',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\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      _readOnly: { cursor: 'default' },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    clearTrigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.muted',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\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    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n    },\n    content: {\n      layerStyle: 'reveal',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 'surface.overlayMin',\n      maxWidth: 'surface.overlayMax',\n      maxHeight: 'surface.overlayMax',\n      overflowY: 'auto',\n      paddingBlock: 'inset.compact',\n      paddingInline: 'inset.none',\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      pointerEvents: 'auto',\n    },\n    list: {\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      '&:not(:last-of-type)': {\n        paddingBlockEnd: 'inset.compact',\n        marginBlockEnd: 'inset.compact',\n        borderBlockEndWidth: 'hairline',\n        borderBlockEndStyle: 'solid',\n        borderColor: 'border.muted',\n      },\n    },\n    itemGroupLabel: {\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      textStyle: 'detail',\n      color: 'foreground.subtle',\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      color: 'foreground.default',\n      cursor: 'default',\n      userSelect: 'none',\n      '&[data-state=checked]': { color: 'primary.onSurface' },\n      _highlighted: {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n        '&[data-state=checked]': { color: 'primary.onSurface' },\n        _highContrast: { bg: 'system.highlight', color: 'system.highlightText' },\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    itemText: {\n      overflowWrap: 'anywhere',\n    },\n    itemIndicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'primary.onSurface',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        control: {\n          // 대상 크기의 입력이나 버튼이 테두리 상자 안에 들어가면 다른 xs 컨트롤보다 테두리 두 개만큼\n          // 높아집니다. 상자가 행 높이를 잡고, 그 안에서 가운데 정렬됩니다.\n          height: 'control.xs',\n        },\n        input: { minHeight: 'control.xs', textStyle: 'detail' },\n        item: { minHeight: 'control.xs', textStyle: 'detail' },\n        trigger: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        clearTrigger: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        input: { minHeight: 'target.minimum', textStyle: 'body' },\n        item: { minHeight: 'target.minimum', textStyle: 'detail' },\n        trigger: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        clearTrigger: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        input: { minHeight: 'control.sm', textStyle: 'body' },\n        item: { minHeight: 'control.sm', textStyle: 'body' },\n        trigger: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        clearTrigger: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        input: { minHeight: 'control.md', textStyle: 'body' },\n        item: { minHeight: 'control.md', textStyle: 'body' },\n        trigger: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        clearTrigger: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        input: { minHeight: 'control.lg', textStyle: 'subtitle' },\n        item: { minHeight: 'control.lg', textStyle: 'body' },\n        trigger: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        clearTrigger: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        itemIndicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nexport const comboboxStateSlots: Readonly<Record<string, string>> = {\n  empty: css({\n    paddingInline: 'inset.control',\n    paddingBlock: 'inset.compact',\n    textStyle: 'body',\n    color: 'foreground.muted',\n    textAlign: 'center',\n  }),\n  loading: css({\n    paddingInline: 'inset.control',\n    paddingBlock: 'inset.compact',\n    textStyle: 'body',\n    color: 'foreground.muted',\n    textAlign: 'center',\n  }),\n}\n"],"mappings":"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"}

package/dist/components/combobox/index.d.mts

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxHighlightChangeDetails, ComboboxInputBehavior, ComboboxInputValueChangeDetails, ComboboxPositioning, ComboboxRootProps, ComboboxSelectionBehavior, ComboboxValueChangeDetails } from "./combobox.mjs";
+export { Combobox, type ComboboxHighlightChangeDetails, type ComboboxInputBehavior, type ComboboxInputValueChangeDetails, type ComboboxPositioning, type ComboboxRootProps, type ComboboxSelectionBehavior, type ComboboxValueChangeDetails };

package/dist/components/combobox/index.mjs

@@ -0,0 +1,2 @@
+import { Combobox } from "./combobox.mjs";
+export { Combobox };

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

@@ -0,0 +1,69 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/date-input/date-input.d.ts
+export interface DateInputValueChangeDetails {
+  readonly value: readonly string[];
+}
+export interface DateInputFocusChangeDetails {
+  readonly focusedValue: string | null;
+}
+export type DateInputSelectionMode = 'single' | 'range' | 'multiple';
+export type DateInputGranularity = 'day' | 'hour' | 'minute' | 'second';
+export interface DateInputRootProps {
+  /** 제어되는 값이며, ISO 날짜입니다 — `['2026-09-20']`. */
+  value?: readonly string[];
+  /** 비제어 초기 값. `value`가 주어지면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 값이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: DateInputValueChangeDetails) => void;
+  /** 키보드가 날짜 사이를 오갈 때 알림을 받습니다. */
+  onFocusChange?: (details: DateInputFocusChangeDetails) => void;
+  /** 받아들이는 가장 이른 날짜이며, ISO 날짜입니다. */
+  min?: string;
+  /** 받아들이는 가장 늦은 날짜이며, ISO 날짜입니다. */
+  max?: string;
+  /** 필드 전체를 비활성화하지 않고 특정 날짜만 거부합니다. */
+  isDateUnavailable?: (date: Date) => boolean;
+  /** 필드가 날짜를 몇 개나 쥐는지. 기본값은 `single`입니다. */
+  selectionMode?: DateInputSelectionMode;
+  /** 필드가 시점의 어디까지를 편집하는지. 기본값은 `day`입니다. */
+  granularity?: DateInputGranularity;
+  /** 12시간제인지 24시간제인지. 기본값은 로캘의 방식을 따릅니다. */
+  hourCycle?: 12 | 24;
+  /** 일과 월을 두 자리로 채웁니다. 기본값은 로캘의 관행을 따릅니다. */
+  shouldForceLeadingZeros?: boolean;
+  /** 날짜를 해석할 때 쓰는 시간대. */
+  timeZone?: string;
+  /** 정밀도에 시각이 포함될 때 시간대 세그먼트를 숨깁니다. */
+  hideTimeZone?: boolean;
+  /**
+   * 이 필드에 한해 provider의 로캘을 덮어씁니다.
+   *
+   * 한 페이지에 정말로 여러 로캘이 섞이는 드문 제품을 위한 것입니다. 설정하지 않고 두면
+   * 애플리케이션 전체가 `SynapseProvider`의 로캘을 따라서, 모든 필드가 같은 규칙으로 날짜를 쓰고
+   * 해석합니다.
+   */
+  locale?: string;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 DateInput을 id로 폼과 연결합니다. */
+  form?: string;
+  /** 비활성화된 DateInput은 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 DateInput은 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 날짜가 있어야 합니다. */
+  required?: boolean;
+  /** 이 DateInput에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const DateInput: SynapseComponent<"control" | "hiddenInput" | "label" | "root" | "segment" | "segmentGroup", "root", DateInputRootProps, never>;
+//#endregion
+//# sourceMappingURL=date-input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.d.mts","names":[],"sources":["../../../src/components/date-input/date-input.tsx"],"mappings":";;;;iBAciB;WACN;;iBAGM;WACN;;YAGC;YAEA;iBAEK;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,qBAAqB,MAAM;;EAE3B,gBAAgB;;EAEhB,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;;;;;;;EAQA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAyEW,WAAS,oGAAA"}

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

@@ -0,0 +1,106 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { useLocale } from "../../provider/locale-context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { dateInputRecipe } from "./date-input.recipe.mjs";
+import { createElement } from "react";
+import * as dateInput from "@zag-js/date-input";
+import { parse } from "@zag-js/date-input";
+//#region src/components/date-input/date-input.tsx
+const isoOf = (date) => String(date);
+const toMachineProps = (props) => ({
+	...props.value === void 0 ? {} : { value: parse([...props.value]) },
+	...props.defaultValue === void 0 ? {} : { defaultValue: parse([...props.defaultValue]) },
+	...props.min === void 0 ? {} : { min: parse(props.min) },
+	...props.max === void 0 ? {} : { max: parse(props.max) },
+	...props.onValueChange === void 0 ? {} : { onValueChange: (details) => props.onValueChange?.({ value: details.value.map(isoOf) }) },
+	...props.onFocusChange === void 0 ? {} : { onFocusChange: (details) => props.onFocusChange?.({ focusedValue: details.focusedValue === void 0 ? null : isoOf(details.focusedValue) }) }
+});
+const SEGMENT_LABELS = {
+	era: "dateInput.segment.era",
+	year: "dateInput.segment.year",
+	month: "dateInput.segment.month",
+	day: "dateInput.segment.day",
+	hour: "dateInput.segment.hour",
+	minute: "dateInput.segment.minute",
+	second: "dateInput.segment.second",
+	dayPeriod: "dateInput.segment.dayPeriod",
+	timeZoneName: "dateInput.segment.timeZoneName"
+};
+const segmentOf = (value) => typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && "text" in value && typeof value.text === "string" ? {
+	type: value.type,
+	text: value.text
+} : void 0;
+const segmentsOf = (api, _translate, getterArgs) => {
+	const index = typeof getterArgs["index"] === "number" ? getterArgs["index"] : 0;
+	return api.getSegments({ index }).map((segment, position) => createElement(DateInput.Segment, {
+		key: `${String(index)}-${String(position)}-${segment.type}`,
+		segment,
+		index
+	}));
+};
+const DateInput = defineComponent()({
+	name: "DateInput",
+	module: dateInput,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({ label: (index) => index === 0 ? field.label : `${field.label}:${String(index)}` }),
+		describe: ["segment"],
+		labelable: false
+	},
+	elements: {
+		segment: "span",
+		hiddenInput: "input"
+	},
+	defaultContent: {
+		segmentGroup: segmentsOf,
+		segment: (_api, _t, args) => segmentOf(args["segment"])?.text ?? null
+	},
+	amendBehaviorProps: {
+		segment: (_behaviorProps, _api, getterArgs, translate) => {
+			const type = segmentOf(getterArgs["segment"])?.type;
+			const key = type === void 0 ? void 0 : SEGMENT_LABELS[type];
+			return key === void 0 ? {} : { "aria-label": translate(key) };
+		},
+		hiddenInput: (_behaviorProps, api, getterArgs) => {
+			const index = typeof getterArgs["index"] === "number" ? getterArgs["index"] : 0;
+			const value = api.value[index];
+			return { value: value === void 0 ? "" : isoOf(value) };
+		}
+	},
+	getterProps: {
+		label: ["index"],
+		segmentGroup: ["index"],
+		segment: ["segment", "index"],
+		hiddenInput: ["index", "name"]
+	},
+	machineTranslations: null,
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"onFocusChange",
+		"min",
+		"max",
+		"size"
+	],
+	useMachineProps: (props) => {
+		const { locale } = useLocale();
+		return {
+			...toMachineProps(props),
+			locale: props.locale ?? locale
+		};
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "DateInput");
+		return {
+			...dateInputRecipe({ size }),
+			control: inputPartClass(size, dateInputRecipe.raw({ size }).control)
+		};
+	}
+});
+//#endregion
+export { DateInput };
+
+//# sourceMappingURL=date-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.mjs","names":[],"sources":["../../../src/components/date-input/date-input.tsx"],"sourcesContent":["'use client'\n\nimport * as dateInput from '@zag-js/date-input'\nimport { parse } from '@zag-js/date-input'\nimport { createElement } from 'react'\n\nimport { dateInputRecipe } from '#/components/date-input/date-input.recipe.ts'\nimport { useLocale } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { DefaultContent } from '#/system/types.ts'\n\nexport interface DateInputValueChangeDetails {\n  readonly value: readonly string[]\n}\n\nexport interface DateInputFocusChangeDetails {\n  readonly focusedValue: string | null\n}\n\nexport type DateInputSelectionMode = 'single' | 'range' | 'multiple'\n\nexport type DateInputGranularity = 'day' | 'hour' | 'minute' | 'second'\n\nexport interface DateInputRootProps {\n  /** 제어되는 값이며, ISO 날짜입니다 — `['2026-09-20']`. */\n  value?: readonly string[]\n  /** 비제어 초기 값. `value`가 주어지면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 값이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: DateInputValueChangeDetails) => void\n  /** 키보드가 날짜 사이를 오갈 때 알림을 받습니다. */\n  onFocusChange?: (details: DateInputFocusChangeDetails) => void\n  /** 받아들이는 가장 이른 날짜이며, ISO 날짜입니다. */\n  min?: string\n  /** 받아들이는 가장 늦은 날짜이며, ISO 날짜입니다. */\n  max?: string\n  /** 필드 전체를 비활성화하지 않고 특정 날짜만 거부합니다. */\n  isDateUnavailable?: (date: Date) => boolean\n  /** 필드가 날짜를 몇 개나 쥐는지. 기본값은 `single`입니다. */\n  selectionMode?: DateInputSelectionMode\n  /** 필드가 시점의 어디까지를 편집하는지. 기본값은 `day`입니다. */\n  granularity?: DateInputGranularity\n  /** 12시간제인지 24시간제인지. 기본값은 로캘의 방식을 따릅니다. */\n  hourCycle?: 12 | 24\n  /** 일과 월을 두 자리로 채웁니다. 기본값은 로캘의 관행을 따릅니다. */\n  shouldForceLeadingZeros?: boolean\n  /** 날짜를 해석할 때 쓰는 시간대. */\n  timeZone?: string\n  /** 정밀도에 시각이 포함될 때 시간대 세그먼트를 숨깁니다. */\n  hideTimeZone?: boolean\n  /**\n   * 이 필드에 한해 provider의 로캘을 덮어씁니다.\n   *\n   * 한 페이지에 정말로 여러 로캘이 섞이는 드문 제품을 위한 것입니다. 설정하지 않고 두면\n   * 애플리케이션 전체가 `SynapseProvider`의 로캘을 따라서, 모든 필드가 같은 규칙으로 날짜를 쓰고\n   * 해석합니다.\n   */\n  locale?: string\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 DateInput을 id로 폼과 연결합니다. */\n  form?: string\n  /** 비활성화된 DateInput은 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 DateInput은 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 날짜가 있어야 합니다. */\n  required?: boolean\n  /** 이 DateInput에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\ninterface MachineValueChange {\n  value: readonly unknown[]\n}\n\ninterface MachineFocusChange {\n  focusedValue: unknown\n}\n\nconst isoOf = (date: unknown): string => String(date)\n\nconst toMachineProps = (props: DateInputRootProps): Record<string, unknown> => ({\n  ...(props.value === undefined ? {} : { value: parse([...props.value]) }),\n  ...(props.defaultValue === undefined ? {} : { defaultValue: parse([...props.defaultValue]) }),\n  ...(props.min === undefined ? {} : { min: parse(props.min) }),\n  ...(props.max === undefined ? {} : { max: parse(props.max) }),\n  ...(props.onValueChange === undefined\n    ? {}\n    : {\n        onValueChange: (details: MachineValueChange) =>\n          props.onValueChange?.({ value: details.value.map(isoOf) }),\n      }),\n  ...(props.onFocusChange === undefined\n    ? {}\n    : {\n        onFocusChange: (details: MachineFocusChange) =>\n          props.onFocusChange?.({\n            focusedValue: details.focusedValue === undefined ? null : isoOf(details.focusedValue),\n          }),\n      }),\n})\n\nconst SEGMENT_LABELS: Readonly<Record<string, TranslationKey>> = {\n  era: 'dateInput.segment.era',\n  year: 'dateInput.segment.year',\n  month: 'dateInput.segment.month',\n  day: 'dateInput.segment.day',\n  hour: 'dateInput.segment.hour',\n  minute: 'dateInput.segment.minute',\n  second: 'dateInput.segment.second',\n  dayPeriod: 'dateInput.segment.dayPeriod',\n  timeZoneName: 'dateInput.segment.timeZoneName',\n}\n\ninterface SegmentLike {\n  type: string\n  text: string\n}\n\nconst segmentOf = (value: unknown): SegmentLike | undefined =>\n  typeof value === 'object' &&\n  value !== null &&\n  'type' in value &&\n  typeof value.type === 'string' &&\n  'text' in value &&\n  typeof value.text === 'string'\n    ? { type: value.type, text: value.text }\n    : undefined\n\nconst segmentsOf: DefaultContent<dateInput.Api> = (api, _translate, getterArgs) => {\n  const index = typeof getterArgs['index'] === 'number' ? getterArgs['index'] : 0\n  // literal 세그먼트(구분자)는 한 입력 안에서 반복되므로 type만으로는 key가 될 수 없습니다.\n  return api.getSegments({ index }).map((segment, position) =>\n    createElement(DateInput.Segment, {\n      key: `${String(index)}-${String(position)}-${segment.type}`,\n      segment,\n      index,\n    }),\n  )\n}\n\nexport const DateInput = defineComponent<DateInputRootProps>()({\n  name: 'DateInput',\n  module: dateInput,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({\n      label: (index: number) => (index === 0 ? field.label : `${field.label}:${String(index)}`),\n    }),\n    describe: ['segment'],\n    labelable: false,\n  },\n  elements: {\n    segment: 'span',\n    hiddenInput: 'input',\n  },\n  defaultContent: {\n    segmentGroup: segmentsOf,\n    segment: (_api, _t, args) => segmentOf(args['segment'])?.text ?? null,\n  },\n  amendBehaviorProps: {\n    segment: (_behaviorProps, _api, getterArgs, translate) => {\n      const type = segmentOf(getterArgs['segment'])?.type\n      const key = type === undefined ? undefined : SEGMENT_LABELS[type]\n      return key === undefined ? {} : { 'aria-label': translate(key) }\n    },\n    hiddenInput: (_behaviorProps, api, getterArgs) => {\n      const index = typeof getterArgs['index'] === 'number' ? getterArgs['index'] : 0\n      const value: unknown = api.value[index]\n      return { value: value === undefined ? '' : isoOf(value) }\n    },\n  },\n  getterProps: {\n    label: ['index'],\n    segmentGroup: ['index'],\n    segment: ['segment', 'index'],\n    hiddenInput: ['index', 'name'],\n  },\n  machineTranslations: null,\n  variantProps: ['value', 'defaultValue', 'onValueChange', 'onFocusChange', 'min', 'max', 'size'],\n  useMachineProps: (props: DateInputRootProps) => {\n    const { locale } = useLocale()\n    return {\n      ...toMachineProps(props),\n      locale: props.locale ?? locale,\n    }\n  },\n  slots: (props: DateInputRootProps) => {\n    const size = resolveSize(props.size, 'DateInput')\n    return {\n      ...dateInputRecipe({ size }),\n      control: inputPartClass(size, dateInputRecipe.raw({ size }).control),\n    }\n  },\n})\n"],"mappings":"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"}