@neurocle/synapse-react 0.0.0-bootstrap

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

@@ -0,0 +1,285 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/menu/menu.recipe.ts
+const menuRecipe = sva({
+	slots: [
+		"arrow",
+		"arrowTip",
+		"content",
+		"contextTrigger",
+		"indicator",
+		"item",
+		"itemGroup",
+		"itemGroupLabel",
+		"itemIndicator",
+		"itemText",
+		"positioner",
+		"separator",
+		"trigger",
+		"triggerItem"
+	],
+	base: {
+		arrow: {
+			"--arrow-size": "sizes.icon.xs",
+			"--arrow-background": "colors.surface.overlay"
+		},
+		arrowTip: {},
+		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: "var(--available-height)",
+			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",
+			outline: "none"
+		},
+		contextTrigger: {
+			display: "inline-flex",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum"
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "foreground.muted",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_open: { transform: "rotate(180deg)" }
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			color: "foreground.default",
+			cursor: "default",
+			userSelect: "none",
+			"& svg": { flexShrink: 0 },
+			_checked: { color: "primary.onSurface" },
+			_highlighted: {
+				bg: "secondary.default",
+				color: "foreground.default",
+				_checked: { color: "primary.onSurface" },
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		itemGroupLabel: {
+			paddingInline: "inset.control",
+			paddingBlockStart: "inset.control",
+			paddingBlockEnd: "inset.compact",
+			textStyle: "detail",
+			color: "foreground.subtle"
+		},
+		itemIndicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "primary.onSurface",
+			pointerEvents: "none"
+		},
+		itemText: {
+			flex: "1",
+			overflowWrap: "anywhere"
+		},
+		positioner: { zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))" },
+		separator: {
+			marginBlock: "inset.compact",
+			marginInline: "inset.none",
+			borderBlockStartWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.muted"
+		},
+		trigger: {},
+		triggerItem: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			color: "foreground.default",
+			cursor: "default",
+			userSelect: "none",
+			"& svg": { flexShrink: 0 },
+			_checked: { color: "primary.onSurface" },
+			_highlighted: {
+				bg: "secondary.default",
+				color: "foreground.default",
+				_checked: { color: "primary.onSurface" },
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			item: {
+				"& > svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				},
+				paddingBlock: "inset.none",
+				paddingInline: "inset.compact",
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			triggerItem: {
+				paddingBlock: "inset.none",
+				paddingInline: "inset.compact",
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			itemGroupLabel: {
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			item: {
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.xs",
+				paddingBlock: "inset.none",
+				textStyle: "detail"
+			},
+			triggerItem: {
+				minHeight: "control.xs",
+				paddingBlock: "inset.none",
+				textStyle: "detail"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			item: {
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			triggerItem: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			item: {
+				"& > svg": {
+					width: "icon.md",
+					height: "icon.md"
+				},
+				minHeight: "control.md",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			triggerItem: {
+				minHeight: "control.md",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			itemGroupLabel: { paddingInline: "inset.overlay" },
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			item: {
+				"& > svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				},
+				minHeight: "control.lg",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			triggerItem: {
+				minHeight: "control.lg",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			itemGroupLabel: {
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { menuRecipe };
+
+//# sourceMappingURL=menu.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.recipe.mjs","names":[],"sources":["../../../src/components/menu/menu.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const menuRecipe = sva({\n  slots: [\n    'arrow',\n    'arrowTip',\n    'content',\n    'contextTrigger',\n    'indicator',\n    'item',\n    'itemGroup',\n    'itemGroupLabel',\n    'itemIndicator',\n    'itemText',\n    'positioner',\n    'separator',\n    'trigger',\n    'triggerItem',\n  ],\n  base: {\n    arrow: {\n      '--arrow-size': 'sizes.icon.xs',\n      '--arrow-background': 'colors.surface.overlay',\n    },\n    arrowTip: {},\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: 'var(--available-height)',\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      outline: 'none',\n    },\n    contextTrigger: {\n      display: 'inline-flex',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'foreground.muted',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _open: { transform: 'rotate(180deg)' },\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      color: 'foreground.default',\n      cursor: 'default',\n      userSelect: 'none',\n      '& svg': { flexShrink: 0 },\n      _checked: { color: 'primary.onSurface' },\n      _highlighted: {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n        _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    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    itemGroupLabel: {\n      paddingInline: 'inset.control',\n      paddingBlockStart: 'inset.control',\n      paddingBlockEnd: 'inset.compact',\n      textStyle: 'detail',\n      color: 'foreground.subtle',\n    },\n    itemIndicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'primary.onSurface',\n      pointerEvents: 'none',\n    },\n    itemText: {\n      flex: '1',\n      overflowWrap: 'anywhere',\n    },\n    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n    },\n    separator: {\n      marginBlock: 'inset.compact',\n      marginInline: 'inset.none',\n      borderBlockStartWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.muted',\n    },\n    trigger: {},\n    triggerItem: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      color: 'foreground.default',\n      cursor: 'default',\n      userSelect: 'none',\n      '& svg': { flexShrink: 0 },\n      _checked: { color: 'primary.onSurface' },\n      _highlighted: {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n        _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  },\n  variants: {\n    size: {\n      xs: {\n        item: {\n          '& > svg': { width: 'icon.xs', height: 'icon.xs' },\n          paddingBlock: 'inset.none',\n          paddingInline: 'inset.compact',\n          gap: 'gap.inline',\n          textStyle: 'caption',\n        },\n        triggerItem: {\n          paddingBlock: 'inset.none',\n          paddingInline: 'inset.compact',\n          gap: 'gap.inline',\n          textStyle: 'caption',\n        },\n        itemGroupLabel: { paddingInline: 'inset.compact', textStyle: 'caption' },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        item: {\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.xs',\n          paddingBlock: 'inset.none',\n          textStyle: 'detail',\n        },\n        triggerItem: { minHeight: 'control.xs', paddingBlock: 'inset.none', textStyle: 'detail' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        item: {\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.sm',\n          textStyle: 'body',\n        },\n        triggerItem: { minHeight: 'control.sm', textStyle: 'body' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        item: {\n          '& > svg': { width: 'icon.md', height: 'icon.md' },\n          minHeight: 'control.md',\n          paddingInline: 'inset.overlay',\n          textStyle: 'body',\n        },\n        triggerItem: { minHeight: 'control.md', paddingInline: 'inset.overlay', textStyle: 'body' },\n        itemGroupLabel: { paddingInline: 'inset.overlay' },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        item: {\n          '& > svg': { width: 'icon.lg', height: 'icon.lg' },\n          minHeight: 'control.lg',\n          paddingInline: 'inset.surface',\n          textStyle: 'subtitle',\n        },\n        triggerItem: {\n          minHeight: 'control.lg',\n          paddingInline: 'inset.surface',\n          textStyle: 'subtitle',\n        },\n        itemGroupLabel: { paddingInline: 'inset.surface', textStyle: 'body' },\n        indicator: { '& 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"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { NavigationMenu, NavigationMenuRootProps } from "./navigation-menu.mjs";
+export { NavigationMenu, type NavigationMenuRootProps };

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

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

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

@@ -0,0 +1,42 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/navigation-menu/navigation-menu.d.ts
+export interface NavigationMenuRootProps {
+  /** 제어되는 열린 아이템. 내용이 보이는 아이템의 `value`이거나 null입니다. */
+  value?: string | null;
+  /** 비제어 모드에서 처음 열려 있는 아이템. `value`를 주면 무시됩니다. */
+  defaultValue?: string | null;
+  /** 제어 여부와 무관하게 열린 아이템이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<string | null>) => void;
+  /** 메뉴가 배치되는 축. 기본값은 `horizontal`입니다. */
+  orientation?: Orientation;
+  /** 포인터가 trigger 위에 머물러야 그 내용이 열리기까지의 시간(밀리초). */
+  openDelay?: number;
+  /** 포인터가 벗어난 뒤 내용이 닫히기까지의 시간(밀리초). */
+  closeDelay?: number;
+  /** trigger의 클릭을 사용처에 맡깁니다. trigger가 링크를 겸할 때 씁니다. */
+  disableClickTrigger?: boolean;
+  /** hover가 아니라 클릭으로만 내용을 엽니다. */
+  disableHoverTrigger?: boolean;
+  /** 포인터가 내용을 벗어나도 계속 열어 둡니다. */
+  disablePointerLeaveClose?: boolean;
+  /**
+   * 내비게이션 랜드마크의 접근성 이름입니다.
+   *
+   * machine prop이 아니라 `nav` 요소에 붙는 DOM 속성입니다. machine 자체의 `rootLabel`은 기본값이
+   * `undefined`라 덮어쓸 것도, 번역할 것도 없습니다. 한 페이지에 내비게이션 랜드마크가 둘 있는
+   * 제품은 둘을 구별하기 위해 이 값이 필요합니다.
+   */
+  'aria-label'?: string;
+  /** 이 NavigationMenu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const NavigationMenu: SynapseComponent<"arrow" | "content" | "indicator" | "item" | "itemIndicator" | "link" | "list" | "root" | "trigger" | "viewport" | "viewportPositioner", "root", NavigationMenuRootProps, never>;
+//#endregion
+//# sourceMappingURL=navigation-menu.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.mts","names":[],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"mappings":";;;;;iBAaiB;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;EAQA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,gBAAc,kKAAA"}

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

@@ -0,0 +1,47 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.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 { navigationMenuRecipe } from "./navigation-menu.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as navigationMenu from "@zag-js/navigation-menu";
+//#region src/components/navigation-menu/navigation-menu.tsx
+const NavigationMenu = defineComponent()({
+	name: "NavigationMenu",
+	module: navigationMenu,
+	rootPart: "root",
+	rootElement: "nav",
+	elements: {
+		list: "ul",
+		item: "li",
+		link: "a",
+		indicator: "span",
+		itemIndicator: "span"
+	},
+	defaultContent: { itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronDown }) },
+	getterProps: {
+		trigger: ["value"],
+		content: ["value"],
+		item: ["value", "disabled"],
+		link: [
+			"value",
+			"current",
+			"onSelect",
+			"closeOnClick"
+		],
+		itemIndicator: ["value"],
+		arrow: ["value"],
+		viewport: ["align"]
+	},
+	amendBehaviorProps: { itemIndicator: () => ({ hidden: false }) },
+	unrenderedGetters: ["getTriggerProxyProps", "getViewportProxyProps"],
+	machineTranslations: null,
+	variantProps: ["size"],
+	slots: (props) => navigationMenuRecipe({ size: resolveSize(props.size, "NavigationMenu") })
+});
+//#endregion
+export { NavigationMenu };
+
+//# sourceMappingURL=navigation-menu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.mjs","names":[],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport { chevronDown } from '@neurocle/synapse-icons'\nimport * as navigationMenu from '@zag-js/navigation-menu'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { navigationMenuRecipe } from '#/components/navigation-menu/navigation-menu.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { Orientation } from '#/system/types.ts'\n\nexport interface NavigationMenuRootProps {\n  /** 제어되는 열린 아이템. 내용이 보이는 아이템의 `value`이거나 null입니다. */\n  value?: string | null\n  /** 비제어 모드에서 처음 열려 있는 아이템. `value`를 주면 무시됩니다. */\n  defaultValue?: string | null\n  /** 제어 여부와 무관하게 열린 아이템이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<string | null>) => void\n  /** 메뉴가 배치되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /** 포인터가 trigger 위에 머물러야 그 내용이 열리기까지의 시간(밀리초). */\n  openDelay?: number\n  /** 포인터가 벗어난 뒤 내용이 닫히기까지의 시간(밀리초). */\n  closeDelay?: number\n  /** trigger의 클릭을 사용처에 맡깁니다. trigger가 링크를 겸할 때 씁니다. */\n  disableClickTrigger?: boolean\n  /** hover가 아니라 클릭으로만 내용을 엽니다. */\n  disableHoverTrigger?: boolean\n  /** 포인터가 내용을 벗어나도 계속 열어 둡니다. */\n  disablePointerLeaveClose?: boolean\n  /**\n   * 내비게이션 랜드마크의 접근성 이름입니다.\n   *\n   * machine prop이 아니라 `nav` 요소에 붙는 DOM 속성입니다. machine 자체의 `rootLabel`은 기본값이\n   * `undefined`라 덮어쓸 것도, 번역할 것도 없습니다. 한 페이지에 내비게이션 랜드마크가 둘 있는\n   * 제품은 둘을 구별하기 위해 이 값이 필요합니다.\n   */\n  'aria-label'?: string\n  /** 이 NavigationMenu에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const NavigationMenu = defineComponent<NavigationMenuRootProps>()({\n  name: 'NavigationMenu',\n  module: navigationMenu,\n  rootPart: 'root',\n  rootElement: 'nav',\n  elements: {\n    list: 'ul',\n    item: 'li',\n    link: 'a',\n    indicator: 'span',\n    itemIndicator: 'span',\n  },\n  defaultContent: {\n    itemIndicator: () => <Icon icon={chevronDown} />,\n  },\n  getterProps: {\n    trigger: ['value'],\n    content: ['value'],\n    item: ['value', 'disabled'],\n    link: ['value', 'current', 'onSelect', 'closeOnClick'],\n    itemIndicator: ['value'],\n    arrow: ['value'],\n    viewport: ['align'],\n  },\n  amendBehaviorProps: {\n    itemIndicator: () => ({ hidden: false }),\n  },\n  unrenderedGetters: ['getTriggerProxyProps', 'getViewportProxyProps'],\n  machineTranslations: null,\n  variantProps: ['size'],\n  slots: (props: NavigationMenuRootProps) =>\n    navigationMenuRecipe({ size: resolveSize(props.size, 'NavigationMenu') }),\n})\n"],"mappings":";;;;;;;;;;AAgDA,MAAa,iBAAiB,gBAAyC,CAAC,CAAC;CACvE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,aAAa;CACb,UAAU;EACR,MAAM;EACN,MAAM;EACN,MAAM;EACN,WAAW;EACX,eAAe;CACjB;CACA,gBAAgB,EACd,qBAAqB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA,EACjD;CACA,aAAa;EACX,SAAS,CAAC,OAAO;EACjB,SAAS,CAAC,OAAO;EACjB,MAAM,CAAC,SAAS,UAAU;EAC1B,MAAM;GAAC;GAAS;GAAW;GAAY;EAAc;EACrD,eAAe,CAAC,OAAO;EACvB,OAAO,CAAC,OAAO;EACf,UAAU,CAAC,OAAO;CACpB;CACA,oBAAoB,EAClB,sBAAsB,EAAE,QAAQ,MAAM,GACxC;CACA,mBAAmB,CAAC,wBAAwB,uBAAuB;CACnE,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,qBAAqB,EAAE,MAAM,YAAY,MAAM,MAAM,gBAAgB,EAAE,CAAC;AAC5E,CAAC"}