@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/carousel/carousel.mjs

@@ -0,0 +1,123 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { useTranslations } from "../../provider/locale-context.mjs";
+import { chevronLeft } from "../../icons/src/chevron-left.mjs";
+import { chevronRight } from "../../icons/src/chevron-right.mjs";
+import { pause } from "../../icons/src/pause.mjs";
+import { play } from "../../icons/src/play.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 { prefersReducedMotion, useReducedMotion } from "../../shared/reduced-motion.mjs";
+import { resolveMachineTranslations } from "../machine-translations.mjs";
+import { carouselRecipe } from "./carousel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as carousel from "@zag-js/carousel";
+//#region src/components/carousel/carousel.tsx
+const scrollInstantlyUnderReducedMotion = (itemGroup) => {
+	if (itemGroup === null) return void 0;
+	const own = Object.getOwnPropertyDescriptor(itemGroup, "scrollTo");
+	const scrollTo = itemGroup.scrollTo.bind(itemGroup);
+	itemGroup.scrollTo = (options, y) => {
+		if (typeof options === "number") return scrollTo(options, y ?? 0);
+		return scrollTo(prefersReducedMotion() ? {
+			...options,
+			behavior: "instant"
+		} : options);
+	};
+	return () => {
+		if (own === void 0) Reflect.deleteProperty(itemGroup, "scrollTo");
+		else Object.defineProperty(itemGroup, "scrollTo", own);
+	};
+};
+const pausedByVisit = /* @__PURE__ */ new WeakSet();
+const pauseWhileVisited = (root, api) => {
+	if (!api.isPlaying) return;
+	pausedByVisit.add(root);
+	api.pause();
+};
+const resumeAfterVisit = (root, api, stillVisited) => {
+	if (!stillVisited && pausedByVisit.delete(root)) api.play();
+};
+const MACHINE_STRINGS = {
+	prevTrigger: "carousel.prevTrigger.label",
+	nextTrigger: "carousel.nextTrigger.label",
+	autoplayStart: "carousel.autoplayTrigger.start",
+	autoplayStop: "carousel.autoplayTrigger.stop"
+};
+const Carousel = defineComponent()({
+	name: "Carousel",
+	module: carousel,
+	rootPart: "root",
+	elements: { progressText: "span" },
+	defaultContent: {
+		prevTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronLeft }),
+		nextTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronRight }),
+		autoplayTrigger: (api) => api.isPlaying ? /* @__PURE__ */ jsx(Icon, { icon: pause }) : /* @__PURE__ */ jsx(Icon, { icon: play }),
+		progressText: (api) => api.getProgressText()
+	},
+	getterProps: {
+		item: ["index", "snapAlign"],
+		indicator: ["index", "readOnly"]
+	},
+	amendBehaviorProps: {
+		root: (_behaviorProps, api, _getterArgs, translate) => ({
+			"aria-roledescription": translate("carousel.root.roleDescription"),
+			onPointerEnter: (event) => pauseWhileVisited(event.currentTarget, api),
+			onFocus: (event) => pauseWhileVisited(event.currentTarget, api),
+			onPointerLeave: (event) => {
+				const root = event.currentTarget;
+				resumeAfterVisit(root, api, root.contains(root.ownerDocument.activeElement));
+			},
+			onBlur: (event) => {
+				const root = event.currentTarget;
+				if (root.contains(event.relatedTarget)) return;
+				resumeAfterVisit(root, api, root.matches(":hover"));
+			}
+		}),
+		item: (_behaviorProps, _api, _getterArgs, translate) => ({ "aria-roledescription": translate("carousel.item.roleDescription") }),
+		itemGroup: () => ({ ref: scrollInstantlyUnderReducedMotion }),
+		autoplayTrigger: (behaviorProps) => ({ onClick: (event) => {
+			const root = event.currentTarget.closest("[data-scope=\"carousel\"][data-part=\"root\"]");
+			if (root !== null) pausedByVisit.delete(root);
+			const handler = behaviorProps["onClick"];
+			if (typeof handler === "function") handler(event);
+		} })
+	},
+	machineTranslations: MACHINE_STRINGS,
+	variantProps: ["size"],
+	useMachineProps: (props) => {
+		const translate = useTranslations(props.translations);
+		return {
+			...useReducedMotion() ? { autoplay: false } : {},
+			translations: {
+				...resolveMachineTranslations(MACHINE_STRINGS, translate),
+				indicator: (index) => translate("carousel.indicator.label", { index: index + 1 }),
+				item: (index, count) => translate("carousel.item.label", {
+					index: index + 1,
+					count
+				})
+			}
+		};
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "Carousel");
+		const own = carouselRecipe.raw({ size });
+		const style = {
+			variant: "outline",
+			tone: "neutral",
+			size
+		};
+		return {
+			...carouselRecipe({ size }),
+			prevTrigger: buttonPartClass(style, own.prevTrigger),
+			nextTrigger: buttonPartClass(style, own.nextTrigger),
+			autoplayTrigger: buttonPartClass(style, own.autoplayTrigger)
+		};
+	}
+});
+//#endregion
+export { Carousel };
+
+//# sourceMappingURL=carousel.mjs.map

package/dist/components/carousel/carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../src/components/carousel/carousel.tsx"],"sourcesContent":["'use client'\n\nimport { chevronLeft, chevronRight, pause, play } from '@neurocle/synapse-icons'\nimport * as carousel from '@zag-js/carousel'\nimport type { FocusEvent, SyntheticEvent } from 'react'\n\nimport { carouselRecipe } from '#/components/carousel/carousel.recipe.ts'\nimport { resolveMachineTranslations } from '#/components/machine-translations.ts'\nimport { useTranslations } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass, type ButtonStyle } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { prefersReducedMotion, useReducedMotion } from '#/shared/reduced-motion.ts'\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 CarouselPageChangeDetails {\n  readonly page: number\n}\n\nexport interface CarouselAutoplayStatusDetails {\n  readonly type: 'autoplay.start' | 'autoplay.stop'\n}\n\nexport interface CarouselDragStatusDetails {\n  readonly type: 'dragging.start' | 'dragging.end'\n  readonly page: number\n}\n\nexport type CarouselSnapType = 'proximity' | 'mandatory'\n\nexport interface CarouselRootProps {\n  /** 슬라이드가 몇 개인지. 컴포넌트는 슬라이드를 쥐지 않고 이 개수를 쥡니다. */\n  slideCount: number\n  /** 제어되는 현재 페이지이며, 0부터 세요. */\n  page?: number\n  /** 비제어 초기 페이지. `page`가 주어지면 무시됩니다. */\n  defaultPage?: number\n  /** 제어 여부와 무관하게 페이지가 바뀔 때마다 알림을 받습니다. */\n  onPageChange?: (details: CarouselPageChangeDetails) => void\n  /** 한 번에 보이는 슬라이드 수. 기본값은 1입니다. */\n  slidesPerPage?: number\n  /** 한 단계에 움직이는 슬라이드 수이며, `'auto'`는 한 페이지를 통째로 움직입니다. */\n  slidesPerMove?: number | 'auto'\n  /**\n   * 슬라이드 사이의 간격이며, CSS 길이입니다.\n   *\n   * 토큰이 아니라 길이인 이유는 machine이 이 값으로 스냅 지점을 계산하기 때문입니다.\n   * 제품 자신의 여백 척도에서 값을 가져와 넘기면 됩니다.\n   */\n  spacing?: string\n  /** 첫 슬라이드 앞과 마지막 슬라이드 뒤의 여백이며, CSS 길이입니다. */\n  padding?: string\n  /** 슬라이드가 스크롤되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /** 양 끝을 넘어가면 반대편으로 이어집니다. */\n  loop?: boolean\n  /** 자동으로 넘깁니다. 숫자를 주면 밀리초 단위의 지연 시간이 됩니다. */\n  autoplay?: boolean | { readonly delay: number }\n  /** 원인이 무엇이든 자동 넘김이 시작되거나 멈출 때 알림을 받습니다. */\n  onAutoplayStatusChange?: (details: CarouselAutoplayStatusDetails) => void\n  /** 터치에서 이미 되는 것처럼 마우스로도 드래그할 수 있게 합니다. */\n  allowMouseDrag?: boolean\n  /** 드래그가 시작되거나 끝날 때 알림을 받습니다. */\n  onDragStatusChange?: (details: CarouselDragStatusDetails) => void\n  /** 슬라이드가 보이는 것으로 치려면 얼마만큼 노출되어야 하는지. */\n  inViewThreshold?: number | number[]\n  /** 스크롤러가 얼마나 단단히 자리 잡는지. 기본값은 `mandatory`입니다. */\n  snapType?: CarouselSnapType\n  /** 각 슬라이드의 크기를 페이지가 아니라 자기 콘텐츠에 맞춥니다. */\n  autoSize?: boolean\n  /** 이 Carousel에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\ninterface CarouselProgressApi {\n  getProgressText: () => string\n  isPlaying: boolean\n  play: () => void\n  pause: () => void\n}\n\nconst scrollInstantlyUnderReducedMotion = (\n  itemGroup: HTMLElement | null,\n): (() => void) | undefined => {\n  if (itemGroup === null) return undefined\n  const own = Object.getOwnPropertyDescriptor(itemGroup, 'scrollTo')\n  const scrollTo = itemGroup.scrollTo.bind(itemGroup)\n  itemGroup.scrollTo = (options?: ScrollToOptions | number, y?: number) => {\n    if (typeof options === 'number') return scrollTo(options, y ?? 0)\n    return scrollTo(prefersReducedMotion() ? { ...options, behavior: 'instant' } : options)\n  }\n  return () => {\n    if (own === undefined) Reflect.deleteProperty(itemGroup, 'scrollTo')\n    else Object.defineProperty(itemGroup, 'scrollTo', own)\n  }\n}\n\nconst pausedByVisit = new WeakSet<HTMLElement>()\n\nconst pauseWhileVisited = (root: HTMLElement, api: CarouselProgressApi): void => {\n  if (!api.isPlaying) return\n  pausedByVisit.add(root)\n  api.pause()\n}\n\nconst resumeAfterVisit = (\n  root: HTMLElement,\n  api: CarouselProgressApi,\n  stillVisited: boolean,\n): void => {\n  if (!stillVisited && pausedByVisit.delete(root)) api.play()\n}\n\nconst MACHINE_STRINGS: Readonly<Record<string, TranslationKey>> = {\n  prevTrigger: 'carousel.prevTrigger.label',\n  nextTrigger: 'carousel.nextTrigger.label',\n  autoplayStart: 'carousel.autoplayTrigger.start',\n  autoplayStop: 'carousel.autoplayTrigger.stop',\n}\n\nexport const Carousel = defineComponent<CarouselRootProps>()({\n  name: 'Carousel',\n  module: carousel,\n  rootPart: 'root',\n  elements: { progressText: 'span' },\n  defaultContent: {\n    prevTrigger: () => <Icon icon={chevronLeft} />,\n    nextTrigger: () => <Icon icon={chevronRight} />,\n    autoplayTrigger: (api) => (api.isPlaying ? <Icon icon={pause} /> : <Icon icon={play} />),\n    progressText: (api) => api.getProgressText(),\n  },\n  getterProps: {\n    item: ['index', 'snapAlign'],\n    indicator: ['index', 'readOnly'],\n  },\n  amendBehaviorProps: {\n    root: (_behaviorProps, api, _getterArgs, translate) => ({\n      'aria-roledescription': translate('carousel.root.roleDescription'),\n      onPointerEnter: (event: SyntheticEvent<HTMLElement>) =>\n        pauseWhileVisited(event.currentTarget, api),\n      onFocus: (event: FocusEvent<HTMLElement>) => pauseWhileVisited(event.currentTarget, api),\n      onPointerLeave: (event: SyntheticEvent<HTMLElement>) => {\n        const root = event.currentTarget\n        resumeAfterVisit(root, api, root.contains(root.ownerDocument.activeElement))\n      },\n      onBlur: (event: FocusEvent<HTMLElement>) => {\n        const root = event.currentTarget\n        if (root.contains(event.relatedTarget)) return\n        resumeAfterVisit(root, api, root.matches(':hover'))\n      },\n    }),\n    item: (_behaviorProps, _api, _getterArgs, translate) => ({\n      'aria-roledescription': translate('carousel.item.roleDescription'),\n    }),\n    itemGroup: () => ({ ref: scrollInstantlyUnderReducedMotion }),\n    autoplayTrigger: (behaviorProps) => ({\n      onClick: (event: SyntheticEvent<HTMLElement>) => {\n        const root = event.currentTarget.closest<HTMLElement>(\n          '[data-scope=\"carousel\"][data-part=\"root\"]',\n        )\n        if (root !== null) pausedByVisit.delete(root)\n        const handler = behaviorProps['onClick']\n        if (typeof handler === 'function') handler(event)\n      },\n    }),\n  },\n  machineTranslations: MACHINE_STRINGS,\n  variantProps: ['size'],\n  useMachineProps: (props: CarouselRootProps) => {\n    const translate = useTranslations(props.translations)\n    const reducedMotion = useReducedMotion()\n    return {\n      ...(reducedMotion ? { autoplay: false } : {}),\n      translations: {\n        ...resolveMachineTranslations(MACHINE_STRINGS, translate),\n        indicator: (index: number) => translate('carousel.indicator.label', { index: index + 1 }),\n        item: (index: number, count: number) =>\n          translate('carousel.item.label', { index: index + 1, count }),\n      },\n    }\n  },\n  slots: (props: CarouselRootProps) => {\n    const size = resolveSize(props.size, 'Carousel')\n    const own = carouselRecipe.raw({ size })\n    const style: ButtonStyle = { variant: 'outline', tone: 'neutral', size }\n    return {\n      ...carouselRecipe({ size }),\n      prevTrigger: buttonPartClass(style, own.prevTrigger),\n      nextTrigger: buttonPartClass(style, own.nextTrigger),\n      autoplayTrigger: buttonPartClass(style, own.autoplayTrigger),\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/carousel/carousel.recipe.mjs

@@ -0,0 +1,131 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/carousel/carousel.recipe.ts
+const carouselRecipe = sva({
+	slots: [
+		"root",
+		"itemGroup",
+		"item",
+		"control",
+		"nextTrigger",
+		"prevTrigger",
+		"indicatorGroup",
+		"indicator",
+		"autoplayTrigger",
+		"progressText"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "rhythm.tight",
+			position: "relative"
+		},
+		itemGroup: {
+			rounded: "surface",
+			overflow: "hidden"
+		},
+		item: {
+			rounded: "surface",
+			overflow: "hidden",
+			minHeight: "target.minimum"
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			gap: "gap.related"
+		},
+		prevTrigger: {},
+		nextTrigger: {},
+		autoplayTrigger: {},
+		indicatorGroup: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "inset.none",
+			"[data-part=control] > &": {
+				marginInlineEnd: "auto",
+				justifyContent: "flex-start"
+			}
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "pill",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			_before: {
+				content: "\"\"",
+				display: "block",
+				padding: "inset.compact",
+				rounded: "pill",
+				bg: "border.strong",
+				transitionProperty: "common",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction",
+				_highContrast: { bg: "system.canvasText" }
+			},
+			cursor: "pointer",
+			_readOnly: { cursor: "default" },
+			"&:not([data-current], [data-readonly]):hover::before": { bg: "foreground.default" },
+			_current: { _before: {
+				bg: "primary.default",
+				paddingInline: "gap.related",
+				_highContrast: { bg: "system.highlight" }
+			} },
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		progressText: {
+			textStyle: "caption",
+			color: "foreground.subtle",
+			fontVariantNumeric: "tabular-nums"
+		}
+	},
+	variants: { size: {
+		xs: {
+			progressText: { textStyle: "caption" },
+			prevTrigger: { minWidth: "control.xs" },
+			nextTrigger: { minWidth: "control.xs" },
+			autoplayTrigger: { minWidth: "control.xs" }
+		},
+		sm: {
+			progressText: { textStyle: "caption" },
+			prevTrigger: { minWidth: "control.sm" },
+			nextTrigger: { minWidth: "control.sm" },
+			autoplayTrigger: { minWidth: "control.sm" }
+		},
+		md: {
+			progressText: { textStyle: "detail" },
+			prevTrigger: { minWidth: "control.md" },
+			nextTrigger: { minWidth: "control.md" },
+			autoplayTrigger: { minWidth: "control.md" }
+		},
+		lg: {
+			progressText: { textStyle: "body" },
+			prevTrigger: { minWidth: "control.lg" },
+			nextTrigger: { minWidth: "control.lg" },
+			autoplayTrigger: { minWidth: "control.lg" }
+		},
+		xl: {
+			progressText: { textStyle: "body" },
+			prevTrigger: { minWidth: "control.xl" },
+			nextTrigger: { minWidth: "control.xl" },
+			autoplayTrigger: { minWidth: "control.xl" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { carouselRecipe };
+
+//# sourceMappingURL=carousel.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.recipe.mjs","names":[],"sources":["../../../src/components/carousel/carousel.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const carouselRecipe = sva({\n  slots: [\n    'root',\n    'itemGroup',\n    'item',\n    'control',\n    'nextTrigger',\n    'prevTrigger',\n    'indicatorGroup',\n    'indicator',\n    'autoplayTrigger',\n    'progressText',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'rhythm.tight',\n      position: 'relative',\n    },\n    itemGroup: {\n      rounded: 'surface',\n      overflow: 'hidden',\n    },\n    item: {\n      rounded: 'surface',\n      overflow: 'hidden',\n      minHeight: 'target.minimum',\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      gap: 'gap.related',\n    },\n    prevTrigger: {},\n    nextTrigger: {},\n    autoplayTrigger: {},\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'inset.none',\n      '[data-part=control] > &': { marginInlineEnd: 'auto', justifyContent: 'flex-start' },\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'pill',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      _before: {\n        content: '\"\"',\n        display: 'block',\n        padding: 'inset.compact',\n        rounded: 'pill',\n        bg: 'border.strong',\n        transitionProperty: 'common',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n        _highContrast: { bg: 'system.canvasText' },\n      },\n      cursor: 'pointer',\n      _readOnly: { cursor: 'default' },\n      '&:not([data-current], [data-readonly]):hover::before': { bg: 'foreground.default' },\n      _current: {\n        _before: {\n          bg: 'primary.default',\n          paddingInline: 'gap.related',\n          _highContrast: { bg: 'system.highlight' },\n        },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    progressText: {\n      textStyle: 'caption',\n      color: 'foreground.subtle',\n      fontVariantNumeric: 'tabular-nums',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        progressText: { textStyle: 'caption' },\n        prevTrigger: { minWidth: 'control.xs' },\n        nextTrigger: { minWidth: 'control.xs' },\n        autoplayTrigger: { minWidth: 'control.xs' },\n      },\n      sm: {\n        progressText: { textStyle: 'caption' },\n        prevTrigger: { minWidth: 'control.sm' },\n        nextTrigger: { minWidth: 'control.sm' },\n        autoplayTrigger: { minWidth: 'control.sm' },\n      },\n      md: {\n        progressText: { textStyle: 'detail' },\n        prevTrigger: { minWidth: 'control.md' },\n        nextTrigger: { minWidth: 'control.md' },\n        autoplayTrigger: { minWidth: 'control.md' },\n      },\n      lg: {\n        progressText: { textStyle: 'body' },\n        prevTrigger: { minWidth: 'control.lg' },\n        nextTrigger: { minWidth: 'control.lg' },\n        autoplayTrigger: { minWidth: 'control.lg' },\n      },\n      xl: {\n        progressText: { textStyle: 'body' },\n        prevTrigger: { minWidth: 'control.xl' },\n        nextTrigger: { minWidth: 'control.xl' },\n        autoplayTrigger: { minWidth: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;EACZ;EACA,WAAW;GACT,SAAS;GACT,UAAU;EACZ;EACA,MAAM;GACJ,SAAS;GACT,UAAU;GACV,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;EACP;EACA,aAAa,CAAC;EACd,aAAa,CAAC;EACd,iBAAiB,CAAC;EAClB,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,2BAA2B;IAAE,iBAAiB;IAAQ,gBAAgB;GAAa;EACrF;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,WAAW;GACX,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,SAAS;IACP,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,IAAI;IACJ,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,eAAe,EAAE,IAAI,oBAAoB;GAC3C;GACA,QAAQ;GACR,WAAW,EAAE,QAAQ,UAAU;GAC/B,wDAAwD,EAAE,IAAI,qBAAqB;GACnF,UAAU,EACR,SAAS;IACP,IAAI;IACJ,eAAe;IACf,eAAe,EAAE,IAAI,mBAAmB;GAC1C,EACF;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,cAAc;GACZ,WAAW;GACX,OAAO;GACP,oBAAoB;EACtB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,cAAc,EAAE,WAAW,UAAU;GACrC,aAAa,EAAE,UAAU,aAAa;GACtC,aAAa,EAAE,UAAU,aAAa;GACtC,iBAAiB,EAAE,UAAU,aAAa;EAC5C;EACA,IAAI;GACF,cAAc,EAAE,WAAW,UAAU;GACrC,aAAa,EAAE,UAAU,aAAa;GACtC,aAAa,EAAE,UAAU,aAAa;GACtC,iBAAiB,EAAE,UAAU,aAAa;EAC5C;EACA,IAAI;GACF,cAAc,EAAE,WAAW,SAAS;GACpC,aAAa,EAAE,UAAU,aAAa;GACtC,aAAa,EAAE,UAAU,aAAa;GACtC,iBAAiB,EAAE,UAAU,aAAa;EAC5C;EACA,IAAI;GACF,cAAc,EAAE,WAAW,OAAO;GAClC,aAAa,EAAE,UAAU,aAAa;GACtC,aAAa,EAAE,UAAU,aAAa;GACtC,iBAAiB,EAAE,UAAU,aAAa;EAC5C;EACA,IAAI;GACF,cAAc,EAAE,WAAW,OAAO;GAClC,aAAa,EAAE,UAAU,aAAa;GACtC,aAAa,EAAE,UAAU,aAAa;GACtC,iBAAiB,EAAE,UAAU,aAAa;EAC5C;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Carousel, CarouselAutoplayStatusDetails, CarouselDragStatusDetails, CarouselPageChangeDetails, CarouselRootProps, CarouselSnapType } from "./carousel.mjs";
+export { Carousel, type CarouselAutoplayStatusDetails, type CarouselDragStatusDetails, type CarouselPageChangeDetails, type CarouselRootProps, type CarouselSnapType };

package/dist/components/carousel/index.mjs

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

package/dist/components/cascade-select/cascade-select.d.mts

@@ -0,0 +1,102 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { DomAttributes, PartComponent, PartOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { SynapseTreeCollection } from "../../shared/collection.mjs";
+import { ReactNode } from "react";
+//#region src/components/cascade-select/cascade-select.d.ts
+export interface CascadeSelectPositioning {
+  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+  gutter?: number;
+}
+export type CascadeSelectHighlightTrigger = 'click' | 'hover';
+export interface CascadeSelectValueChangeDetails {
+  readonly value: readonly (readonly string[])[];
+}
+export interface CascadeSelectHighlightChangeDetails {
+  readonly highlightedValue: readonly string[];
+}
+export interface CascadeSelectRootProps<TNode> {
+  /** `createTreeCollection`으로 만든 트리 전체. 윈도잉은 이것을 바꾸지 않습니다. */
+  collection: SynapseTreeCollection<TNode>;
+  /**
+   * 제어되는 선택이며, 선택된 노드마다 값 경로 하나입니다.
+   *
+   * 단일 선택 CascadeSelect라도 경로의 배열입니다. Select의 `value`가 값의 배열인 것과 같은
+   * 이유로, `multiple`에 따라 타입이 달라지는 prop에는 어떤 사용처도 타입을 붙일 수 없습니다.
+   */
+  value?: readonly (readonly string[])[];
+  /** 비제어 초기 선택. `value`가 주어지면 무시됩니다. */
+  defaultValue?: readonly (readonly string[])[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: CascadeSelectValueChangeDetails) => void;
+  /** 제어되는 하이라이트 경로 — 열린 열들이 따라가고, 보조 기술이 안내하는 대상입니다. */
+  highlightedValue?: readonly string[];
+  /** 비제어 초기 하이라이트 경로. */
+  defaultHighlightedValue?: readonly string[];
+  /** 하이라이트가 움직일 때 알림을 받으며, 한 번도 렌더된 적 없는 노드로 옮겨갈 때도 받습니다. */
+  onHighlightChange?: (details: CascadeSelectHighlightChangeDetails) => void;
+  /** 제어되는 패널의 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. */
+  defaultOpen?: boolean;
+  /** 패널이 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 둘 이상의 경로를 선택할 수 있게 합니다. */
+  multiple?: boolean;
+  /** 잎뿐 아니라 가지도 선택할 수 있게 합니다. */
+  allowParentSelection?: boolean;
+  /** 선택하면 패널을 닫습니다. 기본값은 true입니다. */
+  closeOnSelect?: boolean;
+  /** 아이템을 가리켜야 그 열이 열리는지, 클릭해야 열리는지. 기본값은 `hover`로, 다른 목록처럼 포인터가 강조를 옮깁니다. */
+  highlightTrigger?: CascadeSelectHighlightTrigger;
+  /** 키보드 이동이 열의 양 끝을 넘어가면 반대편으로 이어집니다. */
+  loopFocus?: boolean;
+  /**
+   * 선택이 trigger에서 어떻게 읽히는지를 정합니다.
+   *
+   * 기본 동작은 각 경로의 레이블을 이어 붙이는 것입니다. "Asia / India / Haryana"가 아니라
+   * "Haryana"를 원하거나, 여러 개가 선택되면 개수를 보이고 싶은 제품이 이 prop을 줍니다 —
+   * 컨트롤 안의 유일한 문구이며, 문구는 제품의 몫입니다.
+   */
+  formatValue?: (selected: readonly (readonly TNode[])[]) => string;
+  /** 패널이 놓이는 위치. */
+  positioning?: CascadeSelectPositioning;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 CascadeSelect를 id로 폼과 연결합니다. */
+  form?: string;
+  /** 비활성화된 CascadeSelect는 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 CascadeSelect는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 무언가가 선택되어 있어야 합니다. */
+  required?: boolean;
+  /** 이 CascadeSelect에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+declare function CascadeSelectRoot<TNode>(props: CascadeSelectRootProps<TNode> & PartOwnProps<HTMLElement> & DomAttributes): ReactNode;
+export declare const CascadeSelect: {
+  meta: SynapseComponentMeta;
+  Root: typeof CascadeSelectRoot;
+  ClearTrigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  Content: PartComponent<HTMLElement, Record<string, unknown>>;
+  Control: PartComponent<HTMLElement, Record<string, unknown>>;
+  Indicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  Item: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemIndicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemText: PartComponent<HTMLElement, Record<string, unknown>>;
+  Label: PartComponent<HTMLElement, Record<string, unknown>>;
+  List: PartComponent<HTMLElement, Record<string, unknown>>;
+  Positioner: PartComponent<HTMLElement, Record<string, unknown>>;
+  Trigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  ValueText: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=cascade-select.d.mts.map

package/dist/components/cascade-select/cascade-select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascade-select.d.mts","names":[],"sources":["../../../src/components/cascade-select/cascade-select.tsx"],"mappings":";;;;;;;iBAuBiB;EACf;EACA;;YAGU;iBAEK;WACN;;iBAGM;WACN;;iBAGM,uBAAuB;;EAEtC,YAAY,sBAAsB;;;;;;;EAOlC;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,qBAAqB,SAAS;;EAE9B;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA;;EAEA;;EAEA,mBAAmB;;EAEnB;;;;;;;;EAQA,eAAe,6BAA6B;;EAE5C,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;iBAkJO,kBAAkB,OACzB,OAAO,uBAAuB,SAAS,aAAa,eAAe,gBAClE;qBAMU;QAAA"}

package/dist/components/cascade-select/cascade-select.mjs

@@ -0,0 +1,169 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { chevronRight } from "../../icons/src/chevron-right.mjs";
+import { chevronsUpDown } from "../../icons/src/chevrons-up-down.mjs";
+import { close } from "../../icons/src/close.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { WindowedBranchRows, rememberTreeCollection, treeCollectionOf } from "../collection-window.mjs";
+import { cascadeSelectRecipe } from "./cascade-select.recipe.mjs";
+import { rowProps } from "../../shared/collection.mjs";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as cascadeSelect from "@zag-js/cascade-select";
+//#region src/components/cascade-select/cascade-select.tsx
+function columnArgs(collection, parentValue) {
+	if (parentValue === null) return {
+		item: collection.rootNode,
+		indexPath: [],
+		value: []
+	};
+	const position = collection.positionOf(parentValue);
+	return {
+		item: collection.nodeOf(parentValue),
+		indexPath: position?.indexPath ?? [],
+		value: position?.valuePath ?? [parentValue]
+	};
+}
+function bornWithText(value, collection, multiple) {
+	if (collection === null) return "";
+	const label = (v) => collection.labelOf(v) ?? v ?? "";
+	return value.map((path) => multiple ? label(path.at(-1)) : path.map(label).join(" / ")).join(", ");
+}
+function openBranches(collection, highlightedValue) {
+	const branches = [null];
+	for (const value of highlightedValue) {
+		if (!collection.isBranch(value)) break;
+		branches.push(value);
+	}
+	return branches;
+}
+const base = defineComponent()({
+	name: "CascadeSelect",
+	module: cascadeSelect,
+	rootPart: "root",
+	elements: {
+		valueText: "span",
+		indicator: "span",
+		itemText: "span",
+		itemIndicator: "span"
+	},
+	getterProps: {
+		list: [
+			"item",
+			"indexPath",
+			"value"
+		],
+		item: [
+			"item",
+			"indexPath",
+			"value"
+		],
+		itemText: [
+			"item",
+			"indexPath",
+			"value"
+		],
+		itemIndicator: [
+			"item",
+			"indexPath",
+			"value"
+		]
+	},
+	defaultContent: {
+		indicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronsUpDown }),
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }),
+		valueText: (api, t) => api.valueAsString || bornWithText(api.value, treeCollectionOf(api), api.multiple) || t("cascadeSelect.trigger.placeholder"),
+		content: (api) => {
+			const collection = treeCollectionOf(api);
+			if (collection === null) return null;
+			const { highlightedValue } = api;
+			return openBranches(collection, highlightedValue).map((parentValue, depth) => /* @__PURE__ */ jsx(base.List, {
+				...columnArgs(collection, parentValue),
+				children: /* @__PURE__ */ jsx(WindowedBranchRows, {
+					collection,
+					parentValue,
+					activeValue: highlightedValue[depth] ?? null,
+					renderRow: (row) => {
+						const args = {
+							item: row.item,
+							indexPath: row.position.indexPath,
+							value: row.position.valuePath
+						};
+						return /* @__PURE__ */ jsxs(base.Item, {
+							...args,
+							...rowProps(row),
+							children: [
+								/* @__PURE__ */ jsx(base.ItemText, {
+									...args,
+									children: collection.labelOf(row.value)
+								}),
+								/* @__PURE__ */ jsx(base.ItemIndicator, { ...args }),
+								collection.isBranch(row.value) ? /* @__PURE__ */ jsx(Icon, { icon: chevronRight }) : null
+							]
+						}, row.value);
+					}
+				})
+			}, parentValue ?? ""));
+		}
+	},
+	amendBehaviorProps: {
+		content: () => ({ role: "tree" }),
+		trigger: (behaviorProps) => ({
+			"aria-haspopup": "tree",
+			"aria-invalid": behaviorProps["data-invalid"] === void 0 ? void 0 : true
+		}),
+		clearTrigger: (_behaviorProps, _api, _args, translate) => ({ "aria-label": translate("cascadeSelect.clearTrigger.label") }),
+		list: () => ({ "aria-level": void 0 }),
+		item: (behaviorProps) => behaviorProps["data-type"] === "branch" ? { "aria-haspopup": void 0 } : {
+			"aria-haspopup": void 0,
+			"aria-expanded": void 0
+		}
+	},
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => /* @__PURE__ */ jsx("input", {
+			...props,
+			tabIndex: -1
+		})
+	}],
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			trigger: field.control
+		}),
+		describe: ["trigger"],
+		labelable: false
+	},
+	machineTranslations: null,
+	variantProps: ["size"],
+	useMachineProps: (props) => ({ highlightTrigger: props.highlightTrigger ?? "hover" }),
+	slots: (props) => {
+		const size = resolveSize(props.size, "CascadeSelect");
+		return {
+			...cascadeSelectRecipe({ size }),
+			trigger: inputPartClass(size, cascadeSelectRecipe.raw({ size }).trigger)
+		};
+	}
+});
+function CascadeSelectRoot(props) {
+	const { collection, ...rest } = props;
+	return createElement(base.Root, {
+		...rest,
+		collection: rememberTreeCollection(collection)
+	});
+}
+CascadeSelectRoot.displayName = base.Root.displayName;
+const CascadeSelect = {
+	...base,
+	Root: CascadeSelectRoot
+};
+//#endregion
+export { CascadeSelect };
+
+//# sourceMappingURL=cascade-select.mjs.map

package/dist/components/cascade-select/cascade-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascade-select.mjs","names":[],"sources":["../../../src/components/cascade-select/cascade-select.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, chevronRight, chevronsUpDown, close } from '@neurocle/synapse-icons'\nimport * as cascadeSelect from '@zag-js/cascade-select'\nimport type { TreeCollection } from '@zag-js/collection'\nimport { createElement, type ReactNode } from 'react'\n\nimport { cascadeSelectRecipe } from '#/components/cascade-select/cascade-select.recipe.ts'\nimport {\n  rememberTreeCollection,\n  type TreeSource,\n  treeCollectionOf,\n  WindowedBranchRows,\n} from '#/components/collection-window.tsx'\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { rowProps, type SynapseTreeCollection } 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, PartOwnProps } from '#/system/types.ts'\n\nexport interface CascadeSelectPositioning {\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n  gutter?: number\n}\n\nexport type CascadeSelectHighlightTrigger = 'click' | 'hover'\n\nexport interface CascadeSelectValueChangeDetails {\n  readonly value: readonly (readonly string[])[]\n}\n\nexport interface CascadeSelectHighlightChangeDetails {\n  readonly highlightedValue: readonly string[]\n}\n\nexport interface CascadeSelectRootProps<TNode> {\n  /** `createTreeCollection`으로 만든 트리 전체. 윈도잉은 이것을 바꾸지 않습니다. */\n  collection: SynapseTreeCollection<TNode>\n  /**\n   * 제어되는 선택이며, 선택된 노드마다 값 경로 하나입니다.\n   *\n   * 단일 선택 CascadeSelect라도 경로의 배열입니다. Select의 `value`가 값의 배열인 것과 같은\n   * 이유로, `multiple`에 따라 타입이 달라지는 prop에는 어떤 사용처도 타입을 붙일 수 없습니다.\n   */\n  value?: readonly (readonly string[])[]\n  /** 비제어 초기 선택. `value`가 주어지면 무시됩니다. */\n  defaultValue?: readonly (readonly string[])[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: CascadeSelectValueChangeDetails) => void\n  /** 제어되는 하이라이트 경로 — 열린 열들이 따라가고, 보조 기술이 안내하는 대상입니다. */\n  highlightedValue?: readonly string[]\n  /** 비제어 초기 하이라이트 경로. */\n  defaultHighlightedValue?: readonly string[]\n  /** 하이라이트가 움직일 때 알림을 받으며, 한 번도 렌더된 적 없는 노드로 옮겨갈 때도 받습니다. */\n  onHighlightChange?: (details: CascadeSelectHighlightChangeDetails) => void\n  /** 제어되는 패널의 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. */\n  defaultOpen?: boolean\n  /** 패널이 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 둘 이상의 경로를 선택할 수 있게 합니다. */\n  multiple?: boolean\n  /** 잎뿐 아니라 가지도 선택할 수 있게 합니다. */\n  allowParentSelection?: boolean\n  /** 선택하면 패널을 닫습니다. 기본값은 true입니다. */\n  closeOnSelect?: boolean\n  /** 아이템을 가리켜야 그 열이 열리는지, 클릭해야 열리는지. 기본값은 `hover`로, 다른 목록처럼 포인터가 강조를 옮깁니다. */\n  highlightTrigger?: CascadeSelectHighlightTrigger\n  /** 키보드 이동이 열의 양 끝을 넘어가면 반대편으로 이어집니다. */\n  loopFocus?: boolean\n  /**\n   * 선택이 trigger에서 어떻게 읽히는지를 정합니다.\n   *\n   * 기본 동작은 각 경로의 레이블을 이어 붙이는 것입니다. \"Asia / India / Haryana\"가 아니라\n   * \"Haryana\"를 원하거나, 여러 개가 선택되면 개수를 보이고 싶은 제품이 이 prop을 줍니다 —\n   * 컨트롤 안의 유일한 문구이며, 문구는 제품의 몫입니다.\n   */\n  formatValue?: (selected: readonly (readonly TNode[])[]) => string\n  /** 패널이 놓이는 위치. */\n  positioning?: CascadeSelectPositioning\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 CascadeSelect를 id로 폼과 연결합니다. */\n  form?: string\n  /** 비활성화된 CascadeSelect는 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 CascadeSelect는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 무언가가 선택되어 있어야 합니다. */\n  required?: boolean\n  /** 이 CascadeSelect에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\ntype CascadeSelectDefinitionProps = Omit<CascadeSelectRootProps<never>, 'collection'> & {\n  collection: TreeCollection<unknown>\n}\n\ninterface NodeArgs {\n  item: unknown\n  indexPath: readonly number[]\n  value: readonly string[]\n}\n\nfunction columnArgs(collection: TreeSource, parentValue: string | null): NodeArgs {\n  if (parentValue === null) {\n    return { item: collection.rootNode, indexPath: [], value: [] }\n  }\n  const position = collection.positionOf(parentValue)\n  return {\n    item: collection.nodeOf(parentValue),\n    indexPath: position?.indexPath ?? [],\n    value: position?.valuePath ?? [parentValue],\n  }\n}\n\nfunction bornWithText(\n  value: readonly (readonly string[])[],\n  collection: TreeSource | null,\n  multiple: boolean,\n): string {\n  if (collection === null) return ''\n  const label = (v: string | undefined): string => collection.labelOf(v) ?? v ?? ''\n  return value\n    .map((path) => (multiple ? label(path.at(-1)) : path.map(label).join(' / ')))\n    .join(', ')\n}\n\nfunction openBranches(\n  collection: TreeSource,\n  highlightedValue: readonly string[],\n): (string | null)[] {\n  const branches: (string | null)[] = [null]\n  for (const value of highlightedValue) {\n    if (!collection.isBranch(value)) break\n    branches.push(value)\n  }\n  return branches\n}\n\nconst base = defineComponent<CascadeSelectDefinitionProps>()({\n  name: 'CascadeSelect',\n  module: cascadeSelect,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n    indicator: 'span',\n    itemText: 'span',\n    itemIndicator: 'span',\n  },\n  getterProps: {\n    list: ['item', 'indexPath', 'value'],\n    item: ['item', 'indexPath', 'value'],\n    itemText: ['item', 'indexPath', 'value'],\n    itemIndicator: ['item', 'indexPath', 'value'],\n  },\n  defaultContent: {\n    indicator: () => <Icon icon={chevronsUpDown} />,\n    clearTrigger: () => <Icon icon={close} />,\n    itemIndicator: () => <Icon icon={checkmark} />,\n    // upstream의 valueAsString은 change 이벤트가 있어야 채워져서, 초기 선택도 읽히도록 경로에서\n    // 직접 레이블을 만듭니다(Select와 같은 이유).\n    valueText: (api, t) =>\n      api.valueAsString ||\n      bornWithText(api.value, treeCollectionOf(api), api.multiple) ||\n      t('cascadeSelect.trigger.placeholder'),\n    content: (api) => {\n      const collection = treeCollectionOf(api)\n      if (collection === null) return null\n      const { highlightedValue } = api\n\n      return openBranches(collection, highlightedValue).map((parentValue, depth) => (\n        <base.List key={parentValue ?? ''} {...columnArgs(collection, parentValue)}>\n          <WindowedBranchRows\n            collection={collection}\n            parentValue={parentValue}\n            activeValue={highlightedValue[depth] ?? null}\n            renderRow={(row) => {\n              const args: NodeArgs = {\n                item: row.item,\n                indexPath: row.position.indexPath,\n                value: row.position.valuePath,\n              }\n              return (\n                <base.Item key={row.value} {...args} {...rowProps(row)}>\n                  <base.ItemText {...args}>{collection.labelOf(row.value)}</base.ItemText>\n                  <base.ItemIndicator {...args} />\n                  {collection.isBranch(row.value) ? <Icon icon={chevronRight} /> : null}\n                </base.Item>\n              )\n            }}\n          />\n        </base.List>\n      ))\n    },\n  },\n  amendBehaviorProps: {\n    content: () => ({ role: 'tree' }),\n    trigger: (behaviorProps) => ({\n      'aria-haspopup': 'tree',\n      'aria-invalid': behaviorProps['data-invalid'] === undefined ? undefined : true,\n    }),\n    clearTrigger: (_behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('cascadeSelect.clearTrigger.label'),\n    }),\n    list: () => ({ 'aria-level': undefined }),\n    item: (behaviorProps) =>\n      behaviorProps['data-type'] === 'branch'\n        ? { 'aria-haspopup': undefined }\n        : { 'aria-haspopup': undefined, 'aria-expanded': undefined },\n  },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => <input {...props} tabIndex={-1} />,\n    },\n  ],\n  field: {\n    ids: (field) => ({ label: field.label, trigger: field.control }),\n    describe: ['trigger'],\n    labelable: false,\n  },\n  machineTranslations: null,\n  variantProps: ['size'],\n  useMachineProps: (props: CascadeSelectDefinitionProps) => ({\n    highlightTrigger: props.highlightTrigger ?? 'hover',\n  }),\n  slots: (props: CascadeSelectDefinitionProps) => {\n    const size = resolveSize(props.size, 'CascadeSelect')\n    return {\n      ...cascadeSelectRecipe({ size }),\n      trigger: inputPartClass(size, cascadeSelectRecipe.raw({ size }).trigger),\n    }\n  },\n})\n\nfunction CascadeSelectRoot<TNode>(\n  props: CascadeSelectRootProps<TNode> & PartOwnProps<HTMLElement> & DomAttributes,\n): ReactNode {\n  const { collection, ...rest } = props\n  return createElement(base.Root, { ...rest, collection: rememberTreeCollection(collection) })\n}\nCascadeSelectRoot.displayName = base.Root.displayName\n\nexport const CascadeSelect = {\n  ...base,\n  Root: CascadeSelectRoot,\n}\n"],"mappings":"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"}