@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/listbox/listbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.mjs","names":[],"sources":["../../../src/components/listbox/listbox.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark } from '@neurocle/synapse-icons'\nimport type { ListCollection } from '@zag-js/collection'\nimport * as listbox from '@zag-js/listbox'\nimport { createElement, type ReactNode } from 'react'\n\nimport {\n  pinnedRowProps,\n  positionProps,\n  rememberCollection,\n  windowedContent,\n} from '#/components/collection-window.tsx'\nimport { listboxRecipe } from '#/components/listbox/listbox.recipe.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 { defineComponent } from '#/system/create-component.ts'\nimport type { DomAttributes, Orientation, PartOwnProps } from '#/system/types.ts'\n\nexport interface ListboxValueChangeDetails {\n  readonly value: readonly string[]\n}\n\nexport interface ListboxHighlightChangeDetails {\n  readonly highlightedValue: string | null\n}\n\nexport type ListboxSelectionMode = 'single' | 'multiple' | 'extended' | 'none'\n\nexport interface ListboxRootProps<TItem> {\n  /** `createCollection`으로 만든 전체 컬렉션. 윈도잉은 이것을 바꾸지 않습니다. */\n  collection: SynapseCollection<TItem>\n  /**\n   * 제어되는 선택입니다.\n   *\n   * 어느 선택 모드에서든 배열입니다. 값이 곧 선택이고, 하나짜리 선택도 여전히 선택이기 때문입니다.\n   * Select와 같은 논리입니다. `selectionMode`에 따라 타입이 달라지는 prop은 어떤 사용처도 타입을\n   * 맞춰 쓸 수 없는 prop입니다.\n   */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ListboxValueChangeDetails) => void\n  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */\n  highlightedValue?: string | null\n  /** 비제어 모드에서 처음 하이라이트되는 아이템. */\n  defaultHighlightedValue?: string | null\n  /** 하이라이트가 옮겨 갈 때 호출됩니다. 한 번도 렌더된 적 없는 아이템으로 갈 때도 포함합니다. */\n  onHighlightChange?: (details: ListboxHighlightChangeDetails) => void\n  /** 몇 개까지 선택할 수 있는지. 기본값은 `single`입니다. */\n  selectionMode?: ListboxSelectionMode\n  /** 이미 선택된 아이템을 다시 선택하면 선택이 해제됩니다. */\n  deselectable?: boolean\n  /** 다중 선택에서 전체 선택 단축키를 내주지 않습니다. */\n  disallowSelectAll?: boolean\n  /** 선택이 하이라이트를 따라갑니다. 선택이 상세 패널을 움직이는 목록에 씁니다. */\n  selectOnHighlight?: boolean\n  /** 몇 글자를 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다. */\n  typeahead?: boolean\n  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */\n  loopFocus?: boolean\n  /** 아이템이 배치되는 축. 기본값은 `vertical`입니다. */\n  orientation?: Orientation\n  /** 비활성화된 Listbox는 반응하지 않습니다. */\n  disabled?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\ntype ListboxDefinitionProps = Omit<ListboxRootProps<never>, 'collection'> & {\n  collection: ListCollection<unknown>\n}\n\nconst base = defineComponent<ListboxDefinitionProps>()({\n  name: 'Listbox',\n  module: listbox,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n    itemText: 'span',\n    itemIndicator: 'span',\n    input: 'input',\n  },\n  defaultContent: {\n    itemIndicator: () => <Icon icon={checkmark} />,\n    valueText: (api) => api.valueAsString,\n    content: 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', 'highlightOnHover'],\n    itemText: ['item'],\n    itemIndicator: ['item'],\n    itemGroup: ['id'],\n    itemGroupLabel: ['htmlFor'],\n    input: ['autoHighlight', 'keyboardPriority'],\n  },\n  machineTranslations: null,\n  field: { ids: (field) => ({ label: field.label }), describe: ['content'], labelable: false },\n  amendBehaviorProps: {\n    content: (_behaviorProps, api) => ({\n      'aria-disabled': api.disabled ? true : undefined,\n      'data-disabled': api.disabled ? '' : undefined,\n    }),\n  },\n  variantProps: ['size'],\n  slots: (props: ListboxDefinitionProps) => {\n    const size = resolveSize(props.size, 'Listbox')\n    return {\n      ...listboxRecipe({ size }),\n      input: inputPartClass(size, listboxRecipe.raw({ size }).input),\n    }\n  },\n})\n\nfunction ListboxRoot<TItem>(\n  props: ListboxRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes,\n): ReactNode {\n  const { collection, ...rest } = props\n  return createElement(base.Root, { ...rest, collection: rememberCollection(collection) })\n}\nListboxRoot.displayName = base.Root.displayName\n\nexport const Listbox = {\n  ...base,\n  Root: ListboxRoot,\n}\n"],"mappings":";;;;;;;;;;;;;AA8EA,MAAM,OAAO,gBAAwC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,WAAW;EACX,UAAU;EACV,eAAe;EACf,OAAO;CACT;CACA,gBAAgB;EACd,qBAAqB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;EAC7C,YAAY,QAAQ,IAAI;EACxB,SAAS,gBAAgB,EACvB,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,kBAAkB;EACjC,UAAU,CAAC,MAAM;EACjB,eAAe,CAAC,MAAM;EACtB,WAAW,CAAC,IAAI;EAChB,gBAAgB,CAAC,SAAS;EAC1B,OAAO,CAAC,iBAAiB,kBAAkB;CAC7C;CACA,qBAAqB;CACrB,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EAAI,UAAU,CAAC,SAAS;EAAG,WAAW;CAAM;CAC3F,oBAAoB,EAClB,UAAU,gBAAgB,SAAS;EACjC,iBAAiB,IAAI,WAAW,OAAO,KAAA;EACvC,iBAAiB,IAAI,WAAW,KAAK,KAAA;CACvC,GACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAAkC;EACxC,MAAM,OAAO,YAAY,MAAM,MAAM,SAAS;EAC9C,OAAO;GACL,GAAG,cAAc,EAAE,KAAK,CAAC;GACzB,OAAO,eAAe,MAAM,cAAc,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK;EAC/D;CACF;AACF,CAAC;AAED,SAAS,YACP,OACW;CACX,MAAM,EAAE,YAAY,GAAG,SAAS;CAChC,OAAO,cAAc,KAAK,MAAM;EAAE,GAAG;EAAM,YAAY,mBAAmB,UAAU;CAAE,CAAC;AACzF;AACA,YAAY,cAAc,KAAK,KAAK;AAEpC,MAAa,UAAU;CACrB,GAAG;CACH,MAAM;AACR"}

package/dist/components/listbox/listbox.recipe.mjs

@@ -0,0 +1,169 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/listbox/listbox.recipe.ts
+const listboxRecipe = sva({
+	slots: [
+		"label",
+		"input",
+		"item",
+		"itemText",
+		"itemIndicator",
+		"itemGroup",
+		"itemGroupLabel",
+		"content",
+		"root",
+		"valueText"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		input: {},
+		valueText: {
+			textStyle: "detail",
+			color: "foreground.subtle",
+			overflowWrap: "anywhere"
+		},
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "surface.overlayMax",
+			overflowY: "auto",
+			paddingBlock: "inset.compact",
+			paddingInline: "inset.none",
+			rounded: "surface",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.default",
+			outline: "none",
+			"&:not([data-synapse-input=pointer] *):focus-visible": {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		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",
+				"&:not([data-synapse-input=pointer] *)": {
+					outlineStyle: "solid",
+					outlineWidth: "focus",
+					outlineOffset: "-inset.compact",
+					outlineColor: "border.focus"
+				},
+				"&[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: {
+			item: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			item: {
+				minHeight: "target.minimum",
+				textStyle: "detail"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			item: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			item: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			item: {
+				minHeight: "control.lg",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { listboxRecipe };
+
+//# sourceMappingURL=listbox.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.recipe.mjs","names":[],"sources":["../../../src/components/listbox/listbox.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const listboxRecipe = sva({\n  slots: [\n    'label',\n    'input',\n    'item',\n    'itemText',\n    'itemIndicator',\n    'itemGroup',\n    'itemGroupLabel',\n    'content',\n    'root',\n    'valueText',\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    input: {},\n    valueText: {\n      textStyle: 'detail',\n      color: 'foreground.subtle',\n      overflowWrap: 'anywhere',\n    },\n    content: {\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: 'surface.overlayMax',\n      overflowY: 'auto',\n      paddingBlock: 'inset.compact',\n      paddingInline: 'inset.none',\n      rounded: 'surface',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n      outline: 'none',\n      '&:not([data-synapse-input=pointer] *):focus-visible': {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\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        '&:not([data-synapse-input=pointer] *)': {\n          outlineStyle: 'solid',\n          outlineWidth: 'focus',\n          outlineOffset: '-inset.compact',\n          outlineColor: 'border.focus',\n        },\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        item: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        item: { minHeight: 'target.minimum', textStyle: 'detail' },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        item: { minHeight: 'control.sm', textStyle: 'body' },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        item: { minHeight: 'control.md', textStyle: 'body' },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        item: { minHeight: 'control.lg', textStyle: 'body' },\n        itemIndicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,gBAAgB,IAAI;CAC/B,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,WAAW;GACX,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,OAAO,CAAC;EACR,WAAW;GACT,WAAW;GACX,OAAO;GACP,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,WAAW;GACX,WAAW;GACX,cAAc;GACd,eAAe;GACf,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,SAAS;GACT,uDAAuD;IACrD,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,WAAW;GACT,SAAS;GACT,eAAe;GACf,wBAAwB;IACtB,iBAAiB;IACjB,gBAAgB;IAChB,qBAAqB;IACrB,qBAAqB;IACrB,aAAa;GACf;EACF;EACA,gBAAgB;GACd,eAAe;GACf,cAAc;GACd,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,WAAW;GACX,eAAe;GACf,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,yBAAyB,EAAE,OAAO,oBAAoB;GACtD,cAAc;IACZ,IAAI;IACJ,OAAO;IACP,yCAAyC;KACvC,cAAc;KACd,cAAc;KACd,eAAe;KACf,cAAc;IAChB;IACA,yBAAyB,EAAE,OAAO,oBAAoB;IACtD,eAAe;KAAE,IAAI;KAAoB,OAAO;IAAuB;GACzE;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe,EAAE,OAAO,kBAAkB;GAC5C;EACF;EACA,UAAU,EACR,cAAc,WAChB;EACA,eAAe;GACb,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,OAAO;EACT;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IAAE,WAAW;IAAc,WAAW;GAAS;GACrD,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,MAAM;IAAE,WAAW;IAAkB,WAAW;GAAS;GACzD,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,MAAM;IAAE,WAAW;IAAc,WAAW;GAAO;GACnD,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,MAAM;IAAE,WAAW;IAAc,WAAW;GAAO;GACnD,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,MAAM;IAAE,WAAW;IAAc,WAAW;GAAO;GACnD,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/machine-translations.mjs

@@ -0,0 +1,8 @@
+//#region src/components/machine-translations.ts
+function resolveMachineTranslations(map, translate) {
+	return Object.fromEntries(Object.entries(map).map(([key, value]) => [key, translate(value)]));
+}
+//#endregion
+export { resolveMachineTranslations };
+
+//# sourceMappingURL=machine-translations.mjs.map

package/dist/components/machine-translations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"machine-translations.mjs","names":[],"sources":["../../src/components/machine-translations.ts"],"sourcesContent":["import type { TranslationKey, Translator } from '#/provider/translations.ts'\n\nexport function resolveMachineTranslations(\n  map: Readonly<Record<string, TranslationKey>>,\n  translate: Translator,\n): Record<string, string> {\n  return Object.fromEntries(Object.entries(map).map(([key, value]) => [key, translate(value)]))\n}\n"],"mappings":";AAEA,SAAgB,2BACd,KACA,WACwB;CACxB,OAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC,CAAC;AAC9F"}

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

@@ -0,0 +1,2 @@
+import { Marquee, MarqueeLoopCompleteDetails, MarqueePauseChangeDetails, MarqueeRootProps, MarqueeSide } from "./marquee.mjs";
+export { Marquee, type MarqueeLoopCompleteDetails, type MarqueePauseChangeDetails, type MarqueeRootProps, type MarqueeSide };

package/dist/components/marquee/index.mjs

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

package/dist/components/marquee/marquee.d.mts

@@ -0,0 +1,53 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/marquee/marquee.d.ts
+export type MarqueeSide = 'start' | 'end' | 'top' | 'bottom';
+export interface MarqueePauseChangeDetails {
+  readonly paused: boolean;
+}
+export interface MarqueeLoopCompleteDetails {
+  readonly loopCount: number;
+}
+export interface MarqueeRootProps {
+  /**
+   * 마퀴가 멈춰 있는지 여부이며 제어 모드입니다.
+   *
+   * `open`이 아닙니다. 드러나는 것이 아무것도 없으므로, 어휘의 공개 3종 세트를 쓰면 다른 개념에
+   * 이름만 빌려 오는 꼴이 됩니다. `paused`는 machine이 부르는 이름이자 이 상태 그 자체입니다.
+   */
+  paused?: boolean;
+  /** 비제어 모드의 초기 멈춤 상태. `paused`를 주면 무시됩니다. */
+  defaultPaused?: boolean;
+  /** 제어 여부와 무관하게 마퀴가 멈추거나 다시 움직일 때마다 호출됩니다. */
+  onPauseChange?: (details: MarqueePauseChangeDetails) => void;
+  /** 포인터가 마퀴 위에 있거나 자식에 포커스가 있는 동안 멈춥니다. 기본값은 `true`입니다. */
+  pauseOnInteraction?: boolean;
+  /** 내용이 흘러가는 방향. 기본값은 `start`입니다. */
+  side?: MarqueeSide;
+  /**
+   * 초당 움직이는 픽셀 수이며, 기본값은 50입니다. 한 바퀴의 지속 시간이 아니라서 내용이 길어져도
+   * 흐르는 속도는 같습니다.
+   */
+  speed?: number;
+  /** 첫 루프가 시작되기까지의 시간(초). */
+  delay?: number;
+  /** 몇 번 돌지. 기본값인 `0`은 끝없이 돕니다. */
+  loopCount?: number;
+  /** `side`를 바꾸지 않은 채 진행 방향만 뒤집습니다. */
+  reverse?: boolean;
+  /** 뷰포트가 찰 때까지 내용을 복제해, 루프에 빈틈이 생기지 않게 합니다. */
+  autoFill?: boolean;
+  /** 아이템 사이의 간격이며 CSS 길이입니다. */
+  spacing?: string;
+  /** 루프가 한 번 끝날 때마다 호출됩니다. */
+  onLoopComplete?: (details: MarqueeLoopCompleteDetails) => void;
+  /** `loopCount`만큼 돌았을 때 한 번 호출됩니다. */
+  onComplete?: () => void;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Marquee: SynapseComponent<"content" | "edge" | "item" | "root" | "viewport", "root", MarqueeRootProps, never>;
+//#endregion
+//# sourceMappingURL=marquee.d.mts.map

package/dist/components/marquee/marquee.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.mts","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"mappings":";;;YAQY;iBAEK;WACN;;iBAGM;WACN;;iBAGM;;;;;;;EAOf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA,OAAO;;;;;EAKP;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,kBAAkB,SAAS;;EAE3B;;EAEA,OAAO;;EAEP;;qBAGW,SAAO,4EAAA"}

package/dist/components/marquee/marquee.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { marqueeRecipe } from "./marquee.recipe.mjs";
+import * as marquee from "@zag-js/marquee";
+//#region src/components/marquee/marquee.tsx
+const Marquee = defineComponent()({
+	name: "Marquee",
+	module: marquee,
+	rootPart: "root",
+	elements: {
+		viewport: "div",
+		content: "div",
+		edge: "div",
+		item: "div"
+	},
+	getterProps: {
+		content: ["index"],
+		edge: ["side"]
+	},
+	machineTranslations: { root: "marquee.root.label" },
+	amendBehaviorProps: { root: (_behaviorProps, _api, _getterArgs, translate) => ({ "aria-roledescription": translate("marquee.root.roleDescription") }) },
+	variantProps: ["size"],
+	useMachineProps: (props) => ({ pauseOnInteraction: props.pauseOnInteraction ?? true }),
+	slots: (props) => marqueeRecipe({ size: resolveSize(props.size, "Marquee") })
+});
+//#endregion
+export { Marquee };
+
+//# sourceMappingURL=marquee.mjs.map

package/dist/components/marquee/marquee.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.mjs","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"sourcesContent":["'use client'\n\nimport * as marquee from '@zag-js/marquee'\n\nimport { marqueeRecipe } from '#/components/marquee/marquee.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type MarqueeSide = 'start' | 'end' | 'top' | 'bottom'\n\nexport interface MarqueePauseChangeDetails {\n  readonly paused: boolean\n}\n\nexport interface MarqueeLoopCompleteDetails {\n  readonly loopCount: number\n}\n\nexport interface MarqueeRootProps {\n  /**\n   * 마퀴가 멈춰 있는지 여부이며 제어 모드입니다.\n   *\n   * `open`이 아닙니다. 드러나는 것이 아무것도 없으므로, 어휘의 공개 3종 세트를 쓰면 다른 개념에\n   * 이름만 빌려 오는 꼴이 됩니다. `paused`는 machine이 부르는 이름이자 이 상태 그 자체입니다.\n   */\n  paused?: boolean\n  /** 비제어 모드의 초기 멈춤 상태. `paused`를 주면 무시됩니다. */\n  defaultPaused?: boolean\n  /** 제어 여부와 무관하게 마퀴가 멈추거나 다시 움직일 때마다 호출됩니다. */\n  onPauseChange?: (details: MarqueePauseChangeDetails) => void\n  /** 포인터가 마퀴 위에 있거나 자식에 포커스가 있는 동안 멈춥니다. 기본값은 `true`입니다. */\n  pauseOnInteraction?: boolean\n  /** 내용이 흘러가는 방향. 기본값은 `start`입니다. */\n  side?: MarqueeSide\n  /**\n   * 초당 움직이는 픽셀 수이며, 기본값은 50입니다. 한 바퀴의 지속 시간이 아니라서 내용이 길어져도\n   * 흐르는 속도는 같습니다.\n   */\n  speed?: number\n  /** 첫 루프가 시작되기까지의 시간(초). */\n  delay?: number\n  /** 몇 번 돌지. 기본값인 `0`은 끝없이 돕니다. */\n  loopCount?: number\n  /** `side`를 바꾸지 않은 채 진행 방향만 뒤집습니다. */\n  reverse?: boolean\n  /** 뷰포트가 찰 때까지 내용을 복제해, 루프에 빈틈이 생기지 않게 합니다. */\n  autoFill?: boolean\n  /** 아이템 사이의 간격이며 CSS 길이입니다. */\n  spacing?: string\n  /** 루프가 한 번 끝날 때마다 호출됩니다. */\n  onLoopComplete?: (details: MarqueeLoopCompleteDetails) => void\n  /** `loopCount`만큼 돌았을 때 한 번 호출됩니다. */\n  onComplete?: () => void\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Marquee = defineComponent<MarqueeRootProps>()({\n  name: 'Marquee',\n  module: marquee,\n  rootPart: 'root',\n  elements: { viewport: 'div', content: 'div', edge: 'div', item: 'div' },\n  getterProps: {\n    content: ['index'],\n    edge: ['side'],\n  },\n  machineTranslations: {\n    root: 'marquee.root.label',\n  },\n  amendBehaviorProps: {\n    root: (_behaviorProps, _api, _getterArgs, translate) => ({\n      'aria-roledescription': translate('marquee.root.roleDescription'),\n    }),\n  },\n  variantProps: ['size'],\n  useMachineProps: (props: MarqueeRootProps) => ({\n    pauseOnInteraction: props.pauseOnInteraction ?? true,\n  }),\n  slots: (props: MarqueeRootProps) => marqueeRecipe({ size: resolveSize(props.size, 'Marquee') }),\n})\n"],"mappings":";;;;;;AA2DA,MAAa,UAAU,gBAAkC,CAAC,CAAC;CACzD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EAAE,UAAU;EAAO,SAAS;EAAO,MAAM;EAAO,MAAM;CAAM;CACtE,aAAa;EACX,SAAS,CAAC,OAAO;EACjB,MAAM,CAAC,MAAM;CACf;CACA,qBAAqB,EACnB,MAAM,qBACR;CACA,oBAAoB,EAClB,OAAO,gBAAgB,MAAM,aAAa,eAAe,EACvD,wBAAwB,UAAU,8BAA8B,EAClE,GACF;CACA,cAAc,CAAC,MAAM;CACrB,kBAAkB,WAA6B,EAC7C,oBAAoB,MAAM,sBAAsB,KAClD;CACA,QAAQ,UAA4B,cAAc,EAAE,MAAM,YAAY,MAAM,MAAM,SAAS,EAAE,CAAC;AAChG,CAAC"}

package/dist/components/marquee/marquee.recipe.mjs

@@ -0,0 +1,123 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/marquee/marquee.recipe.ts
+const marqueeRecipe = sva({
+	slots: [
+		"root",
+		"viewport",
+		"content",
+		"edge",
+		"item"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			overflow: "hidden",
+			width: "fill",
+			minWidth: "0",
+			color: "foreground.muted"
+		},
+		viewport: {
+			display: "flex",
+			overflow: "hidden",
+			width: "fill"
+		},
+		content: {
+			display: "flex",
+			alignItems: "center",
+			flexShrink: 0,
+			animationName: "marqueeX",
+			animationDuration: "var(--marquee-duration)",
+			animationTimingFunction: "linear",
+			animationDelay: "var(--marquee-delay)",
+			animationIterationCount: "var(--marquee-loop-count)",
+			"&[data-orientation=\"vertical\"]": { animationName: "marqueeY" },
+			"&[data-reverse]": { animationDirection: "reverse" },
+			"[data-paused] &": { animationPlayState: "paused" },
+			_motionReduce: { animationPlayState: "paused" }
+		},
+		edge: {
+			position: "absolute",
+			zIndex: 1,
+			pointerEvents: "none",
+			gradientFrom: "background.canvas",
+			gradientTo: "surface.transparent",
+			"&[data-side=start]": {
+				bgGradient: "to-r",
+				_rtl: { bgGradient: "to-l" }
+			},
+			"&[data-side=end]": {
+				bgGradient: "to-l",
+				_rtl: { bgGradient: "to-r" }
+			},
+			"&[data-side=top]": { bgGradient: "to-b" },
+			"&[data-side=bottom]": { bgGradient: "to-t" }
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			whiteSpace: "nowrap"
+		}
+	},
+	variants: { size: {
+		xs: {
+			item: {
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			edge: {
+				width: "control.xs",
+				height: "control.xs"
+			}
+		},
+		sm: {
+			item: {
+				paddingInline: "inset.control",
+				textStyle: "label"
+			},
+			edge: {
+				width: "control.sm",
+				height: "control.sm"
+			}
+		},
+		md: {
+			item: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			edge: {
+				width: "control.md",
+				height: "control.md"
+			}
+		},
+		lg: {
+			item: {
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			edge: {
+				width: "control.lg",
+				height: "control.lg"
+			}
+		},
+		xl: {
+			item: {
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			edge: {
+				width: "control.xl",
+				height: "control.xl"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { marqueeRecipe };
+
+//# sourceMappingURL=marquee.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.recipe.mjs","names":[],"sources":["../../../src/components/marquee/marquee.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const marqueeRecipe = sva({\n  slots: ['root', 'viewport', 'content', 'edge', 'item'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'flex',\n      overflow: 'hidden',\n      width: 'fill',\n      // flex 아이템의 min-width 기본값은 콘텐츠 크기인데, Marquee의 콘텐츠는 루프 전체라 그대로 두면\n      // 옆의 다른 요소를 밀어냅니다. 주어진 자리만 차지하고 그 안에서 흘러가도록 0으로 지정합니다.\n      minWidth: '0',\n      color: 'foreground.muted',\n    },\n    viewport: {\n      display: 'flex',\n      overflow: 'hidden',\n      width: 'fill',\n    },\n    content: {\n      display: 'flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      animationName: 'marqueeX',\n      animationDuration: 'var(--marquee-duration)',\n      // machine이 콘텐츠 길이로 duration을 정해 모든 Marquee가 `speed` px/s로 흐르게 하는데,\n      // linear가 아닌 곡선은 루프마다 속도가 달라지며 이를 깨뜨립니다.\n      animationTimingFunction: 'linear',\n      animationDelay: 'var(--marquee-delay)',\n      animationIterationCount: 'var(--marquee-loop-count)',\n      '&[data-orientation=\"vertical\"]': { animationName: 'marqueeY' },\n      '&[data-reverse]': { animationDirection: 'reverse' },\n      '[data-paused] &': { animationPlayState: 'paused' },\n      _motionReduce: { animationPlayState: 'paused' },\n    },\n    edge: {\n      position: 'absolute',\n      zIndex: 1,\n      pointerEvents: 'none',\n      gradientFrom: 'background.canvas',\n      gradientTo: 'surface.transparent',\n      '&[data-side=start]': { bgGradient: 'to-r', _rtl: { bgGradient: 'to-l' } },\n      '&[data-side=end]': { bgGradient: 'to-l', _rtl: { bgGradient: 'to-r' } },\n      '&[data-side=top]': { bgGradient: 'to-b' },\n      '&[data-side=bottom]': { bgGradient: 'to-t' },\n    },\n    item: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      whiteSpace: 'nowrap',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        item: { paddingInline: 'inset.compact', textStyle: 'caption' },\n        edge: { width: 'control.xs', height: 'control.xs' },\n      },\n      sm: {\n        item: { paddingInline: 'inset.control', textStyle: 'label' },\n        edge: { width: 'control.sm', height: 'control.sm' },\n      },\n      md: {\n        item: { paddingInline: 'inset.control', textStyle: 'body' },\n        edge: { width: 'control.md', height: 'control.md' },\n      },\n      lg: {\n        item: { paddingInline: 'inset.overlay', textStyle: 'body' },\n        edge: { width: 'control.lg', height: 'control.lg' },\n      },\n      xl: {\n        item: { paddingInline: 'inset.surface', textStyle: 'body' },\n        edge: { width: 'control.xl', height: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,gBAAgB,IAAI;CAC/B,OAAO;EAAC;EAAQ;EAAY;EAAW;EAAQ;CAAM;CACrD,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,UAAU;GACV,OAAO;GAGP,UAAU;GACV,OAAO;EACT;EACA,UAAU;GACR,SAAS;GACT,UAAU;GACV,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,eAAe;GACf,mBAAmB;GAGnB,yBAAyB;GACzB,gBAAgB;GAChB,yBAAyB;GACzB,oCAAkC,EAAE,eAAe,WAAW;GAC9D,mBAAmB,EAAE,oBAAoB,UAAU;GACnD,mBAAmB,EAAE,oBAAoB,SAAS;GAClD,eAAe,EAAE,oBAAoB,SAAS;EAChD;EACA,MAAM;GACJ,UAAU;GACV,QAAQ;GACR,eAAe;GACf,cAAc;GACd,YAAY;GACZ,sBAAsB;IAAE,YAAY;IAAQ,MAAM,EAAE,YAAY,OAAO;GAAE;GACzE,oBAAoB;IAAE,YAAY;IAAQ,MAAM,EAAE,YAAY,OAAO;GAAE;GACvE,oBAAoB,EAAE,YAAY,OAAO;GACzC,uBAAuB,EAAE,YAAY,OAAO;EAC9C;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,UAAU;GACV,WAAW;GACX,YAAY;EACd;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IAAE,eAAe;IAAiB,WAAW;GAAU;GAC7D,MAAM;IAAE,OAAO;IAAc,QAAQ;GAAa;EACpD;EACA,IAAI;GACF,MAAM;IAAE,eAAe;IAAiB,WAAW;GAAQ;GAC3D,MAAM;IAAE,OAAO;IAAc,QAAQ;GAAa;EACpD;EACA,IAAI;GACF,MAAM;IAAE,eAAe;IAAiB,WAAW;GAAO;GAC1D,MAAM;IAAE,OAAO;IAAc,QAAQ;GAAa;EACpD;EACA,IAAI;GACF,MAAM;IAAE,eAAe;IAAiB,WAAW;GAAO;GAC1D,MAAM;IAAE,OAAO;IAAc,QAAQ;GAAa;EACpD;EACA,IAAI;GACF,MAAM;IAAE,eAAe;IAAiB,WAAW;GAAO;GAC1D,MAAM;IAAE,OAAO;IAAc,QAAQ;GAAa;EACpD;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Menu, MenuAnchorPoint, MenuHighlightChangeDetails, MenuPlacement, MenuPositioning, MenuRootProps } from "./menu.mjs";
+export { Menu, type MenuAnchorPoint, type MenuHighlightChangeDetails, type MenuPlacement, type MenuPositioning, type MenuRootProps };

package/dist/components/menu/index.mjs

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

package/dist/components/menu/menu.d.mts

@@ -0,0 +1,66 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails, ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/menu/menu.d.ts
+export type MenuPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface MenuPositioning {
+  placement?: MenuPlacement;
+  gutter?: number;
+  flip?: boolean;
+}
+export interface MenuAnchorPoint {
+  x: number;
+  y: number;
+}
+export interface MenuHighlightChangeDetails {
+  readonly highlightedValue: string | null;
+}
+export interface MenuRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 메뉴가 열리거나 닫힐 때마다 호출됩니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /**
+   * 아이템이 선택됐을 때 그 아이템의 `value`와 함께 호출됩니다.
+   *
+   * machine은 이 prop을 `onSelect`라 부르는데, 어휘는 그것을 단 하나뿐인 변경 콜백의 경쟁 표기로
+   * 보고 거부합니다(`COMPETING_NAMES`). 변환은 이음매의 machine 쪽인 `useMachineProps`에서
+   * 일어나므로, 사용처는 이름 하나만 익히면 됩니다.
+   */
+  onValueChange?: (details: ValueChangeDetails<string>) => void;
+  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */
+  highlightedValue?: string | null;
+  /** 비제어 모드에서 처음 하이라이트되는 아이템. */
+  defaultHighlightedValue?: string | null;
+  /** 하이라이트가 옮겨 갈 때 호출됩니다. */
+  onHighlightChange?: (details: MenuHighlightChangeDetails) => void;
+  /** 아이템이 선택되면 메뉴를 닫습니다. 기본값은 true입니다. */
+  closeOnSelect?: boolean;
+  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */
+  loopFocus?: boolean;
+  /** 레이블을 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다. */
+  typeahead?: boolean;
+  /**
+   * 내용을 아이템이 복합 자식인 `menu`로 알립니다. 기본값은 true입니다. 복합이 아닌 메뉴는
+   * `dialog`로 알려지며, 임의의 내용을 담은 메뉴에 씁니다.
+   */
+  composite?: boolean;
+  /** 메뉴가 trigger를 기준으로 놓이는 위치. */
+  positioning?: MenuPositioning;
+  /** trigger가 아니라 한 지점에 메뉴를 붙입니다. 컨텍스트 메뉴는 이렇게 자리를 잡습니다. */
+  anchorPoint?: MenuAnchorPoint;
+  /** 어떤 trigger도 이름을 주지 않을 때 쓰는 메뉴의 접근성 이름. */
+  'aria-label'?: string;
+  /** 이 Menu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Menu: SynapseComponent<"arrow" | "arrowTip" | "content" | "contextTrigger" | "indicator" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "positioner" | "separator" | "trigger" | "triggerItem", null, MenuRootProps, never>;
+//#endregion
+//# sourceMappingURL=menu.d.mts.map

package/dist/components/menu/menu.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.mts","names":[],"sources":["../../../src/components/menu/menu.tsx"],"mappings":";;;;;YAaY;iBAcK;EACf,YAAY;EACZ;EACA;;iBAGe;EACf;EACA;;iBAGe;WACN;;iBAGM;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;;;;;;;EAQzB,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,qBAAqB,SAAS;;EAE9B;;EAEA;;EAEA;;;;;EAKA;;EAEA,cAAc;;EAEd,cAAc;;EAEd;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,MAAI,4NAAA"}

package/dist/components/menu/menu.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { chevronDown } from "../../icons/src/chevron-down.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { menuRecipe } from "./menu.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as menu from "@zag-js/menu";
+//#region src/components/menu/menu.tsx
+const Menu = defineComponent()({
+	name: "Menu",
+	module: menu,
+	rootPart: null,
+	elements: {
+		indicator: "span",
+		itemText: "span",
+		itemIndicator: "span"
+	},
+	defaultContent: {
+		indicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronDown }),
+		itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark })
+	},
+	getterProps: {
+		item: [
+			"value",
+			"disabled",
+			"closeOnSelect",
+			"valueText"
+		],
+		itemText: [
+			"value",
+			"disabled",
+			"closeOnSelect",
+			"valueText"
+		],
+		itemIndicator: [
+			"value",
+			"disabled",
+			"closeOnSelect",
+			"valueText"
+		],
+		itemGroup: ["id"],
+		itemGroupLabel: ["htmlFor"]
+	},
+	unrenderedGetters: ["getOptionItemProps"],
+	machineTranslations: null,
+	variantProps: ["size", "onValueChange"],
+	useMachineProps: (props) => props.onValueChange === void 0 ? {} : { onSelect: props.onValueChange },
+	slots: (props) => {
+		const size = resolveSize(props.size, "Menu");
+		const own = menuRecipe.raw({ size });
+		return {
+			...menuRecipe({ size }),
+			trigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, own.trigger)
+		};
+	}
+});
+//#endregion
+export { Menu };
+
+//# sourceMappingURL=menu.mjs.map

package/dist/components/menu/menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.mjs","names":[],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, chevronDown } from '@neurocle/synapse-icons'\nimport * as menu from '@zag-js/menu'\n\nimport type { OpenChangeDetails, ValueChangeDetails } from '#/components/details.ts'\nimport { menuRecipe } from '#/components/menu/menu.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type MenuPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\nexport interface MenuPositioning {\n  placement?: MenuPlacement\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface MenuAnchorPoint {\n  x: number\n  y: number\n}\n\nexport interface MenuHighlightChangeDetails {\n  readonly highlightedValue: string | null\n}\n\nexport interface MenuRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 메뉴가 열리거나 닫힐 때마다 호출됩니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /**\n   * 아이템이 선택됐을 때 그 아이템의 `value`와 함께 호출됩니다.\n   *\n   * machine은 이 prop을 `onSelect`라 부르는데, 어휘는 그것을 단 하나뿐인 변경 콜백의 경쟁 표기로\n   * 보고 거부합니다(`COMPETING_NAMES`). 변환은 이음매의 machine 쪽인 `useMachineProps`에서\n   * 일어나므로, 사용처는 이름 하나만 익히면 됩니다.\n   */\n  onValueChange?: (details: ValueChangeDetails<string>) => void\n  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */\n  highlightedValue?: string | null\n  /** 비제어 모드에서 처음 하이라이트되는 아이템. */\n  defaultHighlightedValue?: string | null\n  /** 하이라이트가 옮겨 갈 때 호출됩니다. */\n  onHighlightChange?: (details: MenuHighlightChangeDetails) => void\n  /** 아이템이 선택되면 메뉴를 닫습니다. 기본값은 true입니다. */\n  closeOnSelect?: boolean\n  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */\n  loopFocus?: boolean\n  /** 레이블을 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다. */\n  typeahead?: boolean\n  /**\n   * 내용을 아이템이 복합 자식인 `menu`로 알립니다. 기본값은 true입니다. 복합이 아닌 메뉴는\n   * `dialog`로 알려지며, 임의의 내용을 담은 메뉴에 씁니다.\n   */\n  composite?: boolean\n  /** 메뉴가 trigger를 기준으로 놓이는 위치. */\n  positioning?: MenuPositioning\n  /** trigger가 아니라 한 지점에 메뉴를 붙입니다. 컨텍스트 메뉴는 이렇게 자리를 잡습니다. */\n  anchorPoint?: MenuAnchorPoint\n  /** 어떤 trigger도 이름을 주지 않을 때 쓰는 메뉴의 접근성 이름. */\n  'aria-label'?: string\n  /** 이 Menu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Menu = defineComponent<MenuRootProps>()({\n  name: 'Menu',\n  module: menu,\n  rootPart: null,\n  elements: {\n    indicator: 'span',\n    itemText: 'span',\n    itemIndicator: 'span',\n  },\n  defaultContent: {\n    indicator: () => <Icon icon={chevronDown} />,\n    itemIndicator: () => <Icon icon={checkmark} />,\n  },\n  getterProps: {\n    item: ['value', 'disabled', 'closeOnSelect', 'valueText'],\n    itemText: ['value', 'disabled', 'closeOnSelect', 'valueText'],\n    itemIndicator: ['value', 'disabled', 'closeOnSelect', 'valueText'],\n    itemGroup: ['id'],\n    itemGroupLabel: ['htmlFor'],\n  },\n  unrenderedGetters: ['getOptionItemProps'],\n  machineTranslations: null,\n  variantProps: ['size', 'onValueChange'],\n  useMachineProps: (props: MenuRootProps) =>\n    props.onValueChange === undefined ? {} : { onSelect: props.onValueChange },\n  slots: (props: MenuRootProps) => {\n    const size = resolveSize(props.size, 'Menu')\n    const own = menuRecipe.raw({ size })\n    return {\n      ...menuRecipe({ size }),\n      trigger: buttonPartClass({ variant: 'outline', tone: 'neutral', size }, own.trigger),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;AAwFA,MAAa,OAAO,gBAA+B,CAAC,CAAC;CACnD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,WAAW;EACX,UAAU;EACV,eAAe;CACjB;CACA,gBAAgB;EACd,iBAAiB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA;EAC3C,qBAAqB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;CAC/C;CACA,aAAa;EACX,MAAM;GAAC;GAAS;GAAY;GAAiB;EAAW;EACxD,UAAU;GAAC;GAAS;GAAY;GAAiB;EAAW;EAC5D,eAAe;GAAC;GAAS;GAAY;GAAiB;EAAW;EACjE,WAAW,CAAC,IAAI;EAChB,gBAAgB,CAAC,SAAS;CAC5B;CACA,mBAAmB,CAAC,oBAAoB;CACxC,qBAAqB;CACrB,cAAc,CAAC,QAAQ,eAAe;CACtC,kBAAkB,UAChB,MAAM,kBAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,MAAM,cAAc;CAC3E,QAAQ,UAAyB;EAC/B,MAAM,OAAO,YAAY,MAAM,MAAM,MAAM;EAC3C,MAAM,MAAM,WAAW,IAAI,EAAE,KAAK,CAAC;EACnC,OAAO;GACL,GAAG,WAAW,EAAE,KAAK,CAAC;GACtB,SAAS,gBAAgB;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAAG,IAAI,OAAO;EACrF;CACF;AACF,CAAC"}