@neurocle/synapse-react 0.0.0-bootstrap → 0.0.0-stage

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

@@ -1 +0,0 @@
-{"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

@@ -1,336 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,2 +0,0 @@
-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

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

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

@@ -1,69 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,106 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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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"}