@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/tour/tour.mjs

@@ -0,0 +1,89 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { useTranslations } from "../../provider/locale-context.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 { buttonPartClass } from "../../shared/button-style.mjs";
+import { resolveMachineTranslations } from "../machine-translations.mjs";
+import { tourRecipe } from "./tour.recipe.mjs";
+import { createControllerHook, defineController } from "../../shared/controller.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as tour from "@zag-js/tour";
+//#region src/components/tour/tour.tsx
+const actionLabelOf = (value) => typeof value === "object" && value !== null && "label" in value && typeof value.label === "string" ? value.label : null;
+const MACHINE_STRINGS = {
+	nextStep: "tour.actionTrigger.next",
+	prevStep: "tour.actionTrigger.previous",
+	skip: "tour.actionTrigger.skip",
+	close: "tour.closeTrigger.label"
+};
+const tourController = defineController({
+	component: "Tour",
+	root: "Tour.Root",
+	hook: "useTour",
+	commands: [
+		"start",
+		"next",
+		"prev",
+		"setStep",
+		"setSteps",
+		"addStep",
+		"removeStep",
+		"updateStep"
+	]
+});
+const Tour = defineComponent()({
+	name: "Tour",
+	module: tour,
+	rootPart: null,
+	elements: {
+		title: "h2",
+		description: "p",
+		progressText: "span"
+	},
+	defaultContent: {
+		closeTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		actionTrigger: (_api, _t, args) => actionLabelOf(args["action"]),
+		progressText: (api) => api.getProgressText(),
+		title: (api) => api.step?.title ?? null,
+		description: (api) => api.step?.description ?? null
+	},
+	getterProps: { actionTrigger: ["action"] },
+	amendBehaviorProps: { actionTrigger: () => ({ "aria-label": void 0 }) },
+	machineTranslations: MACHINE_STRINGS,
+	variantProps: ["size"],
+	useMachineProps: (props) => {
+		const translate = useTranslations(props.translations);
+		return { translations: {
+			...resolveMachineTranslations(MACHINE_STRINGS, translate),
+			progressText: ({ current, total }) => translate("tour.progressText.position", {
+				current: Math.max(current, 0) + 1,
+				total
+			})
+		} };
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "Tour");
+		const own = tourRecipe.raw({ size });
+		return {
+			...tourRecipe({ size }),
+			actionTrigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, own.actionTrigger),
+			closeTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size: sizeBelow(size)
+			}, own.closeTrigger)
+		};
+	}
+});
+const useTour = createControllerHook(Tour, tourController);
+//#endregion
+export { Tour, useTour };
+
+//# sourceMappingURL=tour.mjs.map

package/dist/components/tour/tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.mjs","names":[],"sources":["../../../src/components/tour/tour.tsx"],"sourcesContent":["'use client'\n\nimport { close } from '@neurocle/synapse-icons'\nimport * as tour from '@zag-js/tour'\nimport type { ReactNode } from 'react'\n\nimport { resolveMachineTranslations } from '#/components/machine-translations.ts'\nimport { tourRecipe } from '#/components/tour/tour.recipe.ts'\nimport { useTranslations } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { createControllerHook, defineController } from '#/shared/controller.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, sizeBelow, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type TourStepType = 'tooltip' | 'dialog' | 'wait' | 'floating'\n\nexport type TourStepPlacement =\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  | 'center'\n\nexport type TourActionType = 'next' | 'prev' | 'dismiss' | 'skip'\n\nexport interface TourAction {\n  label: string\n  action?: TourActionType\n}\n\nexport interface TourStep {\n  id: string\n  type?: TourStepType\n  target?: () => HTMLElement | null\n  title: ReactNode\n  description: ReactNode\n  placement?: TourStepPlacement\n  offset?: { mainAxis?: number; crossAxis?: number }\n  backdrop?: boolean\n  arrow?: boolean\n  actions?: readonly TourAction[]\n  meta?: Record<string, unknown>\n}\n\nexport type TourStatus = 'idle' | 'started' | 'skipped' | 'completed' | 'dismissed' | 'not-found'\n\nexport interface TourStatusChangeDetails {\n  readonly status: TourStatus\n  readonly stepId: string | null\n  readonly stepIndex: number\n}\n\nexport interface TourStepChangeDetails {\n  readonly stepId: string | null\n  readonly stepIndex: number\n  readonly totalSteps: number\n  readonly complete: boolean\n  readonly progress: number\n}\n\nexport interface TourStepsChangeDetails {\n  readonly steps: readonly TourStep[]\n}\n\nexport interface TourRootProps {\n  /** 단계들을 순서대로 담습니다. */\n  steps?: readonly TourStep[]\n  /** 지금 보이는 단계의 id. 투어가 돌고 있지 않은 동안에는 `null`입니다. */\n  stepId?: string | null\n  /** 투어가 다른 단계로 옮겨 갈 때마다 호출됩니다. */\n  onStepChange?: (details: TourStepChangeDetails) => void\n  /** 단계 목록 자체가 바뀔 때마다 호출됩니다. */\n  onStepsChange?: (details: TourStepsChangeDetails) => void\n  /** 투어가 시작되거나, 끝나거나, 건너뛰어지거나, 닫힐 때 호출됩니다. */\n  onStatusChange?: (details: TourStatusChangeDetails) => void\n  /** 화살표 키로 단계 사이를 오갑니다. 기본값은 true입니다. */\n  keyboardNavigation?: boolean\n  /** 투어 뒤 페이지와의 상호작용을 막습니다. */\n  preventInteraction?: boolean\n  /** 대상과 스포트라이트 가장자리 사이의 여백(픽셀). */\n  spotlightOffset?: { x?: number; y?: number }\n  /** 스포트라이트 모서리의 반지름(픽셀). */\n  spotlightRadius?: number\n  /** Escape로 닫습니다. 기본값은 true입니다. */\n  closeOnEscape?: boolean\n  /** 바깥에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */\n  closeOnInteractOutside?: boolean\n  /** 이 Tour에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst actionLabelOf = (value: unknown): string | null =>\n  typeof value === 'object' && value !== null && 'label' in value && typeof value.label === 'string'\n    ? value.label\n    : null\n\nconst MACHINE_STRINGS: Readonly<Record<string, TranslationKey>> = {\n  nextStep: 'tour.actionTrigger.next',\n  prevStep: 'tour.actionTrigger.previous',\n  skip: 'tour.actionTrigger.skip',\n  close: 'tour.closeTrigger.label',\n}\n\ninterface TourCommands {\n  start: (stepId?: string) => void\n  next: () => void\n  prev: () => void\n  setStep: (stepId: string) => void\n  setSteps: (steps: readonly TourStep[]) => void\n  addStep: (step: TourStep) => void\n  removeStep: (stepId: string) => void\n  updateStep: (stepId: string, step: Partial<TourStep>) => void\n}\n\nconst tourController = defineController<TourCommands, keyof TourCommands>({\n  component: 'Tour',\n  root: 'Tour.Root',\n  hook: 'useTour',\n  commands: ['start', 'next', 'prev', 'setStep', 'setSteps', 'addStep', 'removeStep', 'updateStep'],\n})\n\nexport const Tour = defineComponent<TourRootProps>()({\n  name: 'Tour',\n  module: tour,\n  rootPart: null,\n  elements: {\n    title: 'h2',\n    description: 'p',\n    progressText: 'span',\n  },\n  defaultContent: {\n    closeTrigger: () => <Icon icon={close} />,\n    actionTrigger: (_api, _t, args) => actionLabelOf(args['action']),\n    progressText: (api) => api.getProgressText(),\n    title: (api) => api.step?.title ?? null,\n    description: (api) => api.step?.description ?? null,\n  },\n  getterProps: {\n    actionTrigger: ['action'],\n  },\n  amendBehaviorProps: {\n    actionTrigger: () => ({ 'aria-label': undefined }),\n  },\n  machineTranslations: MACHINE_STRINGS,\n  variantProps: ['size'],\n  useMachineProps: (props: TourRootProps) => {\n    const translate = useTranslations(props.translations)\n    return {\n      translations: {\n        ...resolveMachineTranslations(MACHINE_STRINGS, translate),\n        progressText: ({ current, total }: { current: number; total: number }) =>\n          translate('tour.progressText.position', { current: Math.max(current, 0) + 1, total }),\n      },\n    }\n  },\n  slots: (props: TourRootProps) => {\n    const size = resolveSize(props.size, 'Tour')\n    const own = tourRecipe.raw({ size })\n    return {\n      ...tourRecipe({ size }),\n      actionTrigger: buttonPartClass(\n        { variant: 'outline', tone: 'neutral', size },\n        own.actionTrigger,\n      ),\n      closeTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) },\n        own.closeTrigger,\n      ),\n    }\n  },\n})\n\nexport const useTour = createControllerHook(Tour, tourController)\n"],"mappings":";;;;;;;;;;;;;;AAyGA,MAAM,iBAAiB,UACrB,OAAO,UAAU,YAAY,UAAU,QAAQ,WAAW,SAAS,OAAO,MAAM,UAAU,WACtF,MAAM,QACN;AAEN,MAAM,kBAA4D;CAChE,UAAU;CACV,UAAU;CACV,MAAM;CACN,OAAO;AACT;AAaA,MAAM,iBAAiB,iBAAmD;CACxE,WAAW;CACX,MAAM;CACN,MAAM;CACN,UAAU;EAAC;EAAS;EAAQ;EAAQ;EAAW;EAAY;EAAW;EAAc;CAAY;AAClG,CAAC;AAED,MAAa,OAAO,gBAA+B,CAAC,CAAC;CACnD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,OAAO;EACP,aAAa;EACb,cAAc;CAChB;CACA,gBAAgB;EACd,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,gBAAgB,MAAM,IAAI,SAAS,cAAc,KAAK,SAAS;EAC/D,eAAe,QAAQ,IAAI,gBAAgB;EAC3C,QAAQ,QAAQ,IAAI,MAAM,SAAS;EACnC,cAAc,QAAQ,IAAI,MAAM,eAAe;CACjD;CACA,aAAa,EACX,eAAe,CAAC,QAAQ,EAC1B;CACA,oBAAoB,EAClB,sBAAsB,EAAE,cAAc,KAAA,EAAU,GAClD;CACA,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,kBAAkB,UAAyB;EACzC,MAAM,YAAY,gBAAgB,MAAM,YAAY;EACpD,OAAO,EACL,cAAc;GACZ,GAAG,2BAA2B,iBAAiB,SAAS;GACxD,eAAe,EAAE,SAAS,YACxB,UAAU,8BAA8B;IAAE,SAAS,KAAK,IAAI,SAAS,CAAC,IAAI;IAAG;GAAM,CAAC;EACxF,EACF;CACF;CACA,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,eAAe,gBACb;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAC5C,IAAI,aACN;GACA,cAAc,gBACZ;IAAE,SAAS;IAAS,MAAM;IAAW,MAAM,UAAU,IAAI;GAAE,GAC3D,IAAI,YACN;EACF;CACF;AACF,CAAC;AAED,MAAa,UAAU,qBAAqB,MAAM,cAAc"}

package/dist/components/tour/tour.recipe.mjs

@@ -0,0 +1,164 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/tour/tour.recipe.ts
+const tourRecipe = sva({
+	slots: [
+		"content",
+		"actionTrigger",
+		"closeTrigger",
+		"progressText",
+		"title",
+		"description",
+		"positioner",
+		"arrow",
+		"arrowTip",
+		"backdrop",
+		"spotlight"
+	],
+	base: {
+		content: {
+			layerStyle: "reveal",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))",
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related",
+			minWidth: "surface.overlayMin",
+			maxWidth: "surface.overlayMax",
+			padding: "inset.surface",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "overlay",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		actionTrigger: { minWidth: "target.minimum" },
+		closeTrigger: {
+			position: "absolute",
+			insetBlockStart: "inset.overlay",
+			insetInlineEnd: "inset.overlay"
+		},
+		progressText: {
+			textStyle: "body",
+			fontVariantNumeric: "tabular-nums",
+			color: "foreground.subtle"
+		},
+		title: {
+			margin: "inset.none",
+			paddingInlineEnd: "rhythm.normal",
+			textStyle: "label",
+			textWrap: "balance",
+			color: "foreground.default"
+		},
+		description: {
+			margin: "inset.none",
+			textStyle: "body",
+			color: "foreground.muted"
+		},
+		positioner: {
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))",
+			"&[data-type=\"dialog\"]": {
+				position: "fixed",
+				insetBlock: "inset.none",
+				insetInline: "inset.none",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				padding: "inset.surface"
+			}
+		},
+		arrow: {
+			"--arrow-size": "sizes.icon.xs",
+			"--arrow-background": "colors.surface.overlay"
+		},
+		arrowTip: {
+			boxShadow: "overlay",
+			clipPath: "polygon(-100% -100%, 200% -100%, -100% 200%)"
+		},
+		backdrop: {
+			layerStyle: "scrim",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))",
+			position: "fixed",
+			insetBlock: "inset.none",
+			insetInline: "inset.none",
+			bg: "background.inverse"
+		},
+		spotlight: {
+			position: "absolute",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))",
+			rounded: "overlay",
+			borderWidth: "emphasis",
+			borderStyle: "solid",
+			borderColor: "primary.default",
+			pointerEvents: "none"
+		}
+	},
+	variants: { size: {
+		xs: {
+			content: {
+				padding: "inset.control",
+				gap: "inset.compact"
+			},
+			title: { textStyle: "detail" },
+			description: { textStyle: "caption" },
+			progressText: { textStyle: "caption" },
+			closeTrigger: {
+				insetBlockStart: "inset.compact",
+				insetInlineEnd: "inset.compact"
+			}
+		},
+		sm: {
+			content: {
+				padding: "inset.overlay",
+				gap: "gap.inline"
+			},
+			title: { textStyle: "label" },
+			description: { textStyle: "detail" },
+			progressText: { textStyle: "detail" },
+			closeTrigger: {
+				insetBlockStart: "inset.control",
+				insetInlineEnd: "inset.control"
+			}
+		},
+		md: { content: {
+			padding: "inset.surface",
+			gap: "gap.related"
+		} },
+		lg: {
+			content: {
+				padding: "rhythm.normal",
+				gap: "rhythm.tight"
+			},
+			title: { textStyle: "subtitle" },
+			closeTrigger: {
+				insetBlockStart: "inset.surface",
+				insetInlineEnd: "inset.surface"
+			}
+		},
+		xl: {
+			content: {
+				padding: "gap.section",
+				gap: "gap.distinct"
+			},
+			title: { textStyle: "title" },
+			description: { textStyle: "subtitle" },
+			progressText: { textStyle: "subtitle" },
+			closeTrigger: {
+				insetBlockStart: "rhythm.normal",
+				insetInlineEnd: "rhythm.normal"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tourRecipe };
+
+//# sourceMappingURL=tour.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tour.recipe.mjs","names":[],"sources":["../../../src/components/tour/tour.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const tourRecipe = sva({\n  slots: [\n    'content',\n    'actionTrigger',\n    'closeTrigger',\n    'progressText',\n    'title',\n    'description',\n    'positioner',\n    'arrow',\n    'arrowTip',\n    'backdrop',\n    'spotlight',\n  ],\n  base: {\n    content: {\n      layerStyle: 'reveal',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))',\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n      minWidth: 'surface.overlayMin',\n      maxWidth: 'surface.overlayMax',\n      padding: 'inset.surface',\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      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    actionTrigger: { minWidth: 'target.minimum' },\n    closeTrigger: {\n      position: 'absolute',\n      insetBlockStart: 'inset.overlay',\n      insetInlineEnd: 'inset.overlay',\n    },\n    progressText: {\n      textStyle: 'body',\n      fontVariantNumeric: 'tabular-nums',\n      color: 'foreground.subtle',\n    },\n\n    title: {\n      margin: 'inset.none',\n      paddingInlineEnd: 'rhythm.normal',\n      textStyle: 'label',\n      textWrap: 'balance',\n      color: 'foreground.default',\n    },\n\n    description: {\n      margin: 'inset.none',\n      textStyle: 'body',\n      color: 'foreground.muted',\n    },\n\n    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))',\n      '&[data-type=\"dialog\"]': {\n        position: 'fixed',\n        insetBlock: 'inset.none',\n        insetInline: 'inset.none',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: 'inset.surface',\n      },\n    },\n    arrow: {\n      '--arrow-size': 'sizes.icon.xs',\n      '--arrow-background': 'colors.surface.overlay',\n    },\n    arrowTip: {\n      boxShadow: 'overlay',\n      clipPath: 'polygon(-100% -100%, 200% -100%, -100% 200%)',\n    },\n\n    backdrop: {\n      layerStyle: 'scrim',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))',\n      position: 'fixed',\n      insetBlock: 'inset.none',\n      insetInline: 'inset.none',\n      bg: 'background.inverse',\n    },\n    spotlight: {\n      position: 'absolute',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--tour-layer, 0))',\n      rounded: 'overlay',\n      borderWidth: 'emphasis',\n      borderStyle: 'solid',\n      borderColor: 'primary.default',\n      pointerEvents: 'none',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        content: { padding: 'inset.control', gap: 'inset.compact' },\n        title: { textStyle: 'detail' },\n        description: { textStyle: 'caption' },\n        progressText: { textStyle: 'caption' },\n        closeTrigger: { insetBlockStart: 'inset.compact', insetInlineEnd: 'inset.compact' },\n      },\n      sm: {\n        content: { padding: 'inset.overlay', gap: 'gap.inline' },\n        title: { textStyle: 'label' },\n        description: { textStyle: 'detail' },\n        progressText: { textStyle: 'detail' },\n        closeTrigger: { insetBlockStart: 'inset.control', insetInlineEnd: 'inset.control' },\n      },\n      md: {\n        content: { padding: 'inset.surface', gap: 'gap.related' },\n      },\n      lg: {\n        content: { padding: 'rhythm.normal', gap: 'rhythm.tight' },\n        title: { textStyle: 'subtitle' },\n        closeTrigger: { insetBlockStart: 'inset.surface', insetInlineEnd: 'inset.surface' },\n      },\n      xl: {\n        content: { padding: 'gap.section', gap: 'gap.distinct' },\n        title: { textStyle: 'title' },\n        description: { textStyle: 'subtitle' },\n        progressText: { textStyle: 'subtitle' },\n        closeTrigger: { insetBlockStart: 'rhythm.normal', insetInlineEnd: 'rhythm.normal' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,aAAa,IAAI;CAC5B,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,UAAU;GACV,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;GACV,UAAU;GACV,SAAS;GACT,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,eAAe,EAAE,UAAU,iBAAiB;EAC5C,cAAc;GACZ,UAAU;GACV,iBAAiB;GACjB,gBAAgB;EAClB;EACA,cAAc;GACZ,WAAW;GACX,oBAAoB;GACpB,OAAO;EACT;EAEA,OAAO;GACL,QAAQ;GACR,kBAAkB;GAClB,WAAW;GACX,UAAU;GACV,OAAO;EACT;EAEA,aAAa;GACX,QAAQ;GACR,WAAW;GACX,OAAO;EACT;EAEA,YAAY;GACV,QAAQ;GACR,2BAAyB;IACvB,UAAU;IACV,YAAY;IACZ,aAAa;IACb,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,SAAS;GACX;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;EACA,UAAU;GACR,WAAW;GACX,UAAU;EACZ;EAEA,UAAU;GACR,YAAY;GACZ,QAAQ;GACR,UAAU;GACV,YAAY;GACZ,aAAa;GACb,IAAI;EACN;EACA,WAAW;GACT,UAAU;GACV,QAAQ;GACR,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,eAAe;EACjB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,SAAS;IAAE,SAAS;IAAiB,KAAK;GAAgB;GAC1D,OAAO,EAAE,WAAW,SAAS;GAC7B,aAAa,EAAE,WAAW,UAAU;GACpC,cAAc,EAAE,WAAW,UAAU;GACrC,cAAc;IAAE,iBAAiB;IAAiB,gBAAgB;GAAgB;EACpF;EACA,IAAI;GACF,SAAS;IAAE,SAAS;IAAiB,KAAK;GAAa;GACvD,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,SAAS;GACnC,cAAc,EAAE,WAAW,SAAS;GACpC,cAAc;IAAE,iBAAiB;IAAiB,gBAAgB;GAAgB;EACpF;EACA,IAAI,EACF,SAAS;GAAE,SAAS;GAAiB,KAAK;EAAc,EAC1D;EACA,IAAI;GACF,SAAS;IAAE,SAAS;IAAiB,KAAK;GAAe;GACzD,OAAO,EAAE,WAAW,WAAW;GAC/B,cAAc;IAAE,iBAAiB;IAAiB,gBAAgB;GAAgB;EACpF;EACA,IAAI;GACF,SAAS;IAAE,SAAS;IAAe,KAAK;GAAe;GACvD,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,WAAW;GACrC,cAAc,EAAE,WAAW,WAAW;GACtC,cAAc;IAAE,iBAAiB;IAAiB,gBAAgB;GAAgB;EACpF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/tree-view/index.d.mts

@@ -0,0 +1,2 @@
+import { TreeView, TreeViewCheckedValueChangeDetails, TreeViewFocusChangeDetails, TreeViewOpenChangeDetails, TreeViewRenameCompleteDetails, TreeViewRenameDetails, TreeViewRootProps, TreeViewSelectionMode, TreeViewValueChangeDetails } from "./tree-view.mjs";
+export { TreeView, type TreeViewCheckedValueChangeDetails, type TreeViewFocusChangeDetails, type TreeViewOpenChangeDetails, type TreeViewRenameCompleteDetails, type TreeViewRenameDetails, type TreeViewRootProps, type TreeViewSelectionMode, type TreeViewValueChangeDetails };

package/dist/components/tree-view/index.mjs

@@ -0,0 +1,2 @@
+import { TreeView } from "./tree-view.mjs";
+export { TreeView };

package/dist/components/tree-view/tree-view.d.mts

@@ -0,0 +1,108 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { DomAttributes, PartComponent, PartOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { SynapseTreeCollection } from "../../shared/collection.mjs";
+import { ReactNode } from "react";
+//#region src/components/tree-view/tree-view.d.ts
+export interface TreeViewValueChangeDetails {
+  readonly value: readonly string[];
+}
+export interface TreeViewOpenChangeDetails {
+  readonly open: readonly string[];
+}
+export interface TreeViewCheckedValueChangeDetails {
+  readonly checkedValue: readonly string[];
+}
+export interface TreeViewFocusChangeDetails {
+  readonly focusedValue: string | null;
+}
+export interface TreeViewRenameDetails {
+  readonly value: string;
+  readonly indexPath: readonly number[];
+}
+export interface TreeViewRenameCompleteDetails extends TreeViewRenameDetails {
+  readonly label: string;
+}
+export type TreeViewSelectionMode = 'single' | 'multiple';
+export interface TreeViewRootProps<TNode> {
+  /** `createTreeCollection`으로 만든 트리. 윈도잉은 이것을 바꾸지 않습니다. */
+  collection: SynapseTreeCollection<TNode>;
+  /**
+   * 제어되는 선택입니다.
+   *
+   * 두 선택 모드 어느 쪽에서든 배열입니다. 하나짜리 선택도 여전히 선택이기 때문입니다.
+   * `selectionMode`에 따라 타입이 달라지는 prop은 어떤 사용처도 타입을 맞춰 쓸 수 없는
+   * prop입니다.
+   */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: TreeViewValueChangeDetails) => void;
+  /** 펼쳐진 가지들이며 제어 모드입니다. */
+  open?: readonly string[];
+  /** 비제어 모드의 초기 펼침 상태. `open`을 주면 무시됩니다. */
+  defaultOpen?: readonly string[];
+  /** 가지가 펼쳐지거나 접힐 때마다 호출됩니다. */
+  onOpenChange?: (details: TreeViewOpenChangeDetails) => void;
+  /** 체크된 노드들이며 제어 모드입니다. `NodeCheckbox` part를 움직입니다. */
+  checkedValue?: readonly string[];
+  /** 비제어 모드의 초기 체크 집합. `checkedValue`를 주면 무시됩니다. */
+  defaultCheckedValue?: readonly string[];
+  /** 노드가 체크되거나 풀릴 때마다 호출됩니다. 가지의 3상태로 바뀌는 경우도 포함합니다. */
+  onCheckedValueChange?: (details: TreeViewCheckedValueChangeDetails) => void;
+  /** 제어되는 포커스 노드. 로빙 tabindex가 올라가 있는 대상입니다. */
+  focusedValue?: string | null;
+  /** 비제어 모드에서 처음 포커스되는 노드. 기본값은 처음 보이는 노드입니다. */
+  defaultFocusedValue?: string | null;
+  /** 포커스가 옮겨 갈 때 호출됩니다. 한 번도 렌더된 적 없는 노드로 갈 때도 포함합니다. */
+  onFocusChange?: (details: TreeViewFocusChangeDetails) => void;
+  /** 몇 개의 노드까지 선택할 수 있는지. 기본값은 `single`입니다. */
+  selectionMode?: TreeViewSelectionMode;
+  /** 가지의 컨트롤을 클릭하면 선택과 함께 펼치기도 합니다. 기본값은 true입니다. */
+  expandOnClick?: boolean;
+  /** 몇 글자를 입력해 해당 노드로 건너뜁니다. 기본값은 true입니다. */
+  typeahead?: boolean;
+  /**
+   * 노드의 이름을 제자리에서 바꿀 수 있는지 정하며, 이것이 `NodeRenameInput`에 닿을 수 있게
+   * 해 주는 조건입니다.
+   *
+   * 이 값이 없으면 machine은 F2를 아예 무시하므로, 이름 바꾸기 입력은 렌더되고도 영영 감춰진 채로
+   * 있습니다. 불리언이 아니라 술어인 이유는 "어느 노드인가"가 제품이 답할 몫이기 때문입니다. 파일
+   * 트리는 파일의 이름은 바꾸되 그 위의 읽기 전용 폴더는 바꾸지 않습니다.
+   */
+  canRename?: (node: TNode, indexPath: readonly number[]) => boolean;
+  /** 이름 바꾸기가 시작될 때 호출됩니다. 제품이 무엇을 고치는 중인지 기록할 수 있게 합니다. */
+  onRenameStart?: (details: TreeViewRenameDetails) => void;
+  /** 새 레이블을 거절하려면 false를 반환합니다. 이름 중복이나 허용되지 않는 문자 같은 경우입니다. */
+  onBeforeRename?: (details: TreeViewRenameCompleteDetails) => boolean;
+  /** 이름 바꾸기가 받아들여졌을 때 호출됩니다. 컬렉션을 갱신하는 것은 사용처의 몫입니다. */
+  onRenameComplete?: (details: TreeViewRenameCompleteDetails) => void;
+  /** 이 TreeView에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+declare function TreeViewRoot<TNode>(props: TreeViewRootProps<TNode> & PartOwnProps<HTMLElement> & DomAttributes): ReactNode;
+export declare const TreeView: {
+  meta: SynapseComponentMeta;
+  Root: typeof TreeViewRoot;
+  Branch: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchContent: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchControl: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchIndentGuide: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchIndicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchText: PartComponent<HTMLElement, Record<string, unknown>>;
+  BranchTrigger: 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>>;
+  NodeCheckbox: PartComponent<HTMLElement, Record<string, unknown>>;
+  NodeRenameInput: PartComponent<HTMLElement, Record<string, unknown>>;
+  Tree: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=tree-view.d.mts.map

package/dist/components/tree-view/tree-view.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.mts","names":[],"sources":["../../../src/components/tree-view/tree-view.tsx"],"mappings":";;;;;;iBAsBiB;WACN;;iBAGM;WACN;;iBAGM;WACN;;iBAGM;WACN;;iBAGM;WACN;WACA;;iBAGM,sCAAsC;WAC5C;;YAGC;iBAEK,kBAAkB;;EAEjC,YAAY,sBAAsB;;;;;;;;EAQlC;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA;;EAEA,wBAAwB,SAAS;;EAEjC;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,gBAAgB;;EAEhB;;EAEA;;;;;;;;;EASA,aAAa,MAAM,OAAO;;EAE1B,iBAAiB,SAAS;;EAE1B,kBAAkB,SAAS;;EAE3B,oBAAoB,SAAS;;EAE7B,eAAe;;EAEf,OAAO;;EAEP;;iBAoIO,aAAa,OACpB,OAAO,kBAAkB,SAAS,aAAa,eAAe,gBAC7D;qBAMU;QAAA"}

package/dist/components/tree-view/tree-view.mjs

@@ -0,0 +1,145 @@
+"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 "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { rememberTreeCollection, useWindowHandle, windowedTreeContent, withWindowHandle } from "../collection-window.mjs";
+import { rowProps } from "../../shared/collection.mjs";
+import { treeViewRecipe } from "./tree-view.recipe.mjs";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as treeView from "@zag-js/tree-view";
+//#region src/components/tree-view/tree-view.tsx
+function focusedValueOf(api) {
+	for (const visible of api.getVisibleNodes()) {
+		const state = api.getNodeState(visible);
+		if (state.focused) return state.value;
+	}
+	return null;
+}
+const bringNodeIntoView = (handle) => (details) => {
+	handle?.forceIndex(details.index);
+	details.getElement()?.scrollIntoView({ block: "nearest" });
+};
+const NODE_PROPS = ["node", "indexPath"];
+const base = defineComponent()({
+	name: "TreeView",
+	module: treeView,
+	rootPart: "root",
+	elements: {
+		branchText: "span",
+		branchTrigger: "span",
+		branchIndicator: "span",
+		itemText: "span",
+		itemIndicator: "span"
+	},
+	getterProps: {
+		branch: NODE_PROPS,
+		branchContent: NODE_PROPS,
+		branchControl: NODE_PROPS,
+		branchIndentGuide: NODE_PROPS,
+		branchIndicator: NODE_PROPS,
+		branchText: NODE_PROPS,
+		branchTrigger: NODE_PROPS,
+		item: NODE_PROPS,
+		itemIndicator: NODE_PROPS,
+		itemText: NODE_PROPS,
+		nodeCheckbox: NODE_PROPS,
+		nodeRenameInput: NODE_PROPS
+	},
+	defaultContent: {
+		branchIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronRight }),
+		itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }),
+		tree: windowedTreeContent({
+			activeValue: focusedValueOf,
+			renderRow: (row, _hidden, collection) => {
+				const node = row.item;
+				const indexPath = [...row.position.indexPath];
+				const label = collection.labelOf(row.value);
+				return row.position.branch ? /* @__PURE__ */ jsx(base.Branch, {
+					node,
+					indexPath,
+					...rowProps(row),
+					children: /* @__PURE__ */ jsxs(base.BranchControl, {
+						node,
+						indexPath,
+						children: [/* @__PURE__ */ jsx(base.BranchIndicator, {
+							node,
+							indexPath,
+							children: /* @__PURE__ */ jsx(Icon, { icon: chevronRight })
+						}), /* @__PURE__ */ jsx(base.BranchText, {
+							node,
+							indexPath,
+							children: label
+						})]
+					})
+				}, row.value) : /* @__PURE__ */ jsxs(base.Item, {
+					node,
+					indexPath,
+					...rowProps(row),
+					children: [/* @__PURE__ */ jsx(base.ItemText, {
+						node,
+						indexPath,
+						children: label
+					}), /* @__PURE__ */ jsx(base.ItemIndicator, {
+						node,
+						indexPath
+					})]
+				}, row.value);
+			}
+		})
+	},
+	amendBehaviorProps: { branchTrigger: () => ({
+		role: void 0,
+		disabled: void 0,
+		"aria-hidden": true
+	}) },
+	machineTranslations: {
+		treeLabel: "treeView.tree.label",
+		renameInputLabel: "treeView.nodeRenameInput.label"
+	},
+	variantProps: [
+		"size",
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"open",
+		"defaultOpen",
+		"onOpenChange",
+		"onCheckedValueChange"
+	],
+	useMachineProps: useTreeViewMachineProps,
+	slots: (props) => treeViewRecipe({ size: resolveSize(props.size, "TreeView") })
+});
+function useTreeViewMachineProps(props) {
+	const windowHandle = useWindowHandle();
+	return {
+		scrollToIndexFn: bringNodeIntoView(windowHandle),
+		expandedValue: props.open,
+		defaultExpandedValue: props.defaultOpen,
+		onExpandedChange: props.onOpenChange ? (details) => props.onOpenChange?.({ open: details.expandedValue }) : void 0,
+		selectedValue: props.value,
+		defaultSelectedValue: props.defaultValue,
+		onSelectionChange: props.onValueChange ? (details) => props.onValueChange?.({ value: details.selectedValue }) : void 0,
+		onCheckedChange: props.onCheckedValueChange ? (details) => props.onCheckedValueChange?.({ checkedValue: details.checkedValue }) : void 0
+	};
+}
+const WindowedRoot = withWindowHandle(base.Root);
+function TreeViewRoot(props) {
+	const { collection, ...rest } = props;
+	return createElement(WindowedRoot, {
+		...rest,
+		collection: rememberTreeCollection(collection)
+	});
+}
+TreeViewRoot.displayName = base.Root.displayName;
+const TreeView = {
+	...base,
+	Root: TreeViewRoot
+};
+//#endregion
+export { TreeView };
+
+//# sourceMappingURL=tree-view.mjs.map

package/dist/components/tree-view/tree-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.mjs","names":[],"sources":["../../../src/components/tree-view/tree-view.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, chevronRight } from '@neurocle/synapse-icons'\nimport type { TreeCollection } from '@zag-js/collection'\nimport * as treeView from '@zag-js/tree-view'\nimport { createElement, type ReactNode } from 'react'\n\nimport {\n  rememberTreeCollection,\n  useWindowHandle,\n  windowedTreeContent,\n  withWindowHandle,\n  type WindowHandle,\n} from '#/components/collection-window.tsx'\nimport { treeViewRecipe } from '#/components/tree-view/tree-view.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { rowProps, type SynapseTreeCollection } from '#/shared/collection.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 { DomAttributes, PartOwnProps } from '#/system/types.ts'\n\nexport interface TreeViewValueChangeDetails {\n  readonly value: readonly string[]\n}\n\nexport interface TreeViewOpenChangeDetails {\n  readonly open: readonly string[]\n}\n\nexport interface TreeViewCheckedValueChangeDetails {\n  readonly checkedValue: readonly string[]\n}\n\nexport interface TreeViewFocusChangeDetails {\n  readonly focusedValue: string | null\n}\n\nexport interface TreeViewRenameDetails {\n  readonly value: string\n  readonly indexPath: readonly number[]\n}\n\nexport interface TreeViewRenameCompleteDetails extends TreeViewRenameDetails {\n  readonly label: string\n}\n\nexport type TreeViewSelectionMode = 'single' | 'multiple'\n\nexport interface TreeViewRootProps<TNode> {\n  /** `createTreeCollection`으로 만든 트리. 윈도잉은 이것을 바꾸지 않습니다. */\n  collection: SynapseTreeCollection<TNode>\n  /**\n   * 제어되는 선택입니다.\n   *\n   * 두 선택 모드 어느 쪽에서든 배열입니다. 하나짜리 선택도 여전히 선택이기 때문입니다.\n   * `selectionMode`에 따라 타입이 달라지는 prop은 어떤 사용처도 타입을 맞춰 쓸 수 없는\n   * prop입니다.\n   */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: TreeViewValueChangeDetails) => void\n  /** 펼쳐진 가지들이며 제어 모드입니다. */\n  open?: readonly string[]\n  /** 비제어 모드의 초기 펼침 상태. `open`을 주면 무시됩니다. */\n  defaultOpen?: readonly string[]\n  /** 가지가 펼쳐지거나 접힐 때마다 호출됩니다. */\n  onOpenChange?: (details: TreeViewOpenChangeDetails) => void\n  /** 체크된 노드들이며 제어 모드입니다. `NodeCheckbox` part를 움직입니다. */\n  checkedValue?: readonly string[]\n  /** 비제어 모드의 초기 체크 집합. `checkedValue`를 주면 무시됩니다. */\n  defaultCheckedValue?: readonly string[]\n  /** 노드가 체크되거나 풀릴 때마다 호출됩니다. 가지의 3상태로 바뀌는 경우도 포함합니다. */\n  onCheckedValueChange?: (details: TreeViewCheckedValueChangeDetails) => void\n  /** 제어되는 포커스 노드. 로빙 tabindex가 올라가 있는 대상입니다. */\n  focusedValue?: string | null\n  /** 비제어 모드에서 처음 포커스되는 노드. 기본값은 처음 보이는 노드입니다. */\n  defaultFocusedValue?: string | null\n  /** 포커스가 옮겨 갈 때 호출됩니다. 한 번도 렌더된 적 없는 노드로 갈 때도 포함합니다. */\n  onFocusChange?: (details: TreeViewFocusChangeDetails) => void\n  /** 몇 개의 노드까지 선택할 수 있는지. 기본값은 `single`입니다. */\n  selectionMode?: TreeViewSelectionMode\n  /** 가지의 컨트롤을 클릭하면 선택과 함께 펼치기도 합니다. 기본값은 true입니다. */\n  expandOnClick?: boolean\n  /** 몇 글자를 입력해 해당 노드로 건너뜁니다. 기본값은 true입니다. */\n  typeahead?: boolean\n  /**\n   * 노드의 이름을 제자리에서 바꿀 수 있는지 정하며, 이것이 `NodeRenameInput`에 닿을 수 있게\n   * 해 주는 조건입니다.\n   *\n   * 이 값이 없으면 machine은 F2를 아예 무시하므로, 이름 바꾸기 입력은 렌더되고도 영영 감춰진 채로\n   * 있습니다. 불리언이 아니라 술어인 이유는 \"어느 노드인가\"가 제품이 답할 몫이기 때문입니다. 파일\n   * 트리는 파일의 이름은 바꾸되 그 위의 읽기 전용 폴더는 바꾸지 않습니다.\n   */\n  canRename?: (node: TNode, indexPath: readonly number[]) => boolean\n  /** 이름 바꾸기가 시작될 때 호출됩니다. 제품이 무엇을 고치는 중인지 기록할 수 있게 합니다. */\n  onRenameStart?: (details: TreeViewRenameDetails) => void\n  /** 새 레이블을 거절하려면 false를 반환합니다. 이름 중복이나 허용되지 않는 문자 같은 경우입니다. */\n  onBeforeRename?: (details: TreeViewRenameCompleteDetails) => boolean\n  /** 이름 바꾸기가 받아들여졌을 때 호출됩니다. 컬렉션을 갱신하는 것은 사용처의 몫입니다. */\n  onRenameComplete?: (details: TreeViewRenameCompleteDetails) => void\n  /** 이 TreeView에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\ntype TreeViewDefinitionProps = Omit<TreeViewRootProps<never>, 'collection'> & {\n  collection: TreeCollection<unknown>\n}\n\nfunction focusedValueOf(api: treeView.Api): string | null {\n  for (const visible of api.getVisibleNodes()) {\n    const state = api.getNodeState(visible)\n    if (state.focused) return state.value\n  }\n  return null\n}\n\ninterface ScrollToIndexDetails {\n  index: number\n  getElement: () => HTMLElement | null\n}\n\nconst bringNodeIntoView =\n  (handle: WindowHandle | null) =>\n  (details: ScrollToIndexDetails): void => {\n    handle?.forceIndex(details.index)\n    details.getElement()?.scrollIntoView({ block: 'nearest' })\n  }\n\nconst NODE_PROPS: readonly string[] = ['node', 'indexPath']\n\nconst base = defineComponent<TreeViewDefinitionProps>()({\n  name: 'TreeView',\n  module: treeView,\n  rootPart: 'root',\n  elements: {\n    branchText: 'span',\n    branchTrigger: 'span',\n    branchIndicator: 'span',\n    itemText: 'span',\n    itemIndicator: 'span',\n  },\n  getterProps: {\n    branch: NODE_PROPS,\n    branchContent: NODE_PROPS,\n    branchControl: NODE_PROPS,\n    branchIndentGuide: NODE_PROPS,\n    branchIndicator: NODE_PROPS,\n    branchText: NODE_PROPS,\n    branchTrigger: NODE_PROPS,\n    item: NODE_PROPS,\n    itemIndicator: NODE_PROPS,\n    itemText: NODE_PROPS,\n    nodeCheckbox: NODE_PROPS,\n    nodeRenameInput: NODE_PROPS,\n  },\n  defaultContent: {\n    branchIndicator: () => <Icon icon={chevronRight} />,\n    itemIndicator: () => <Icon icon={checkmark} />,\n    tree: windowedTreeContent<treeView.Api>({\n      activeValue: focusedValueOf,\n      renderRow: (row, _hidden, collection) => {\n        const node = row.item\n        const indexPath = [...row.position.indexPath]\n        const label = collection.labelOf(row.value)\n        return row.position.branch ? (\n          <base.Branch key={row.value} node={node} indexPath={indexPath} {...rowProps(row)}>\n            <base.BranchControl node={node} indexPath={indexPath}>\n              <base.BranchIndicator node={node} indexPath={indexPath}>\n                <Icon icon={chevronRight} />\n              </base.BranchIndicator>\n              <base.BranchText node={node} indexPath={indexPath}>\n                {label}\n              </base.BranchText>\n            </base.BranchControl>\n          </base.Branch>\n        ) : (\n          <base.Item key={row.value} node={node} indexPath={indexPath} {...rowProps(row)}>\n            <base.ItemText node={node} indexPath={indexPath}>\n              {label}\n            </base.ItemText>\n            <base.ItemIndicator node={node} indexPath={indexPath} />\n          </base.Item>\n        )\n      },\n    }),\n  },\n  amendBehaviorProps: {\n    branchTrigger: () => ({ role: undefined, disabled: undefined, 'aria-hidden': true }),\n  },\n  machineTranslations: {\n    treeLabel: 'treeView.tree.label',\n    renameInputLabel: 'treeView.nodeRenameInput.label',\n  },\n  variantProps: [\n    'size',\n    'value',\n    'defaultValue',\n    'onValueChange',\n    'open',\n    'defaultOpen',\n    'onOpenChange',\n    'onCheckedValueChange',\n  ],\n  useMachineProps: useTreeViewMachineProps,\n  slots: (props: TreeViewDefinitionProps) =>\n    treeViewRecipe({ size: resolveSize(props.size, 'TreeView') }),\n})\n\nfunction useTreeViewMachineProps(props: TreeViewDefinitionProps): Record<string, unknown> {\n  const windowHandle = useWindowHandle()\n  return {\n    scrollToIndexFn: bringNodeIntoView(windowHandle),\n    expandedValue: props.open,\n    defaultExpandedValue: props.defaultOpen,\n    onExpandedChange: props.onOpenChange\n      ? (details: { expandedValue: string[] }): void =>\n          props.onOpenChange?.({ open: details.expandedValue })\n      : undefined,\n    selectedValue: props.value,\n    defaultSelectedValue: props.defaultValue,\n    onSelectionChange: props.onValueChange\n      ? (details: { selectedValue: string[] }): void =>\n          props.onValueChange?.({ value: details.selectedValue })\n      : undefined,\n    onCheckedChange: props.onCheckedValueChange\n      ? (details: { checkedValue: string[] }): void =>\n          props.onCheckedValueChange?.({ checkedValue: details.checkedValue })\n      : undefined,\n  }\n}\n\nconst WindowedRoot = withWindowHandle(base.Root)\n\nfunction TreeViewRoot<TNode>(\n  props: TreeViewRootProps<TNode> & PartOwnProps<HTMLElement> & DomAttributes,\n): ReactNode {\n  const { collection, ...rest } = props\n  return createElement(WindowedRoot, { ...rest, collection: rememberTreeCollection(collection) })\n}\nTreeViewRoot.displayName = base.Root.displayName\n\nexport const TreeView = {\n  ...base,\n  Root: TreeViewRoot,\n}\n"],"mappings":";;;;;;;;;;;;;;AAmHA,SAAS,eAAe,KAAkC;CACxD,KAAK,MAAM,WAAW,IAAI,gBAAgB,GAAG;EAC3C,MAAM,QAAQ,IAAI,aAAa,OAAO;EACtC,IAAI,MAAM,SAAS,OAAO,MAAM;CAClC;CACA,OAAO;AACT;AAOA,MAAM,qBACH,YACA,YAAwC;CACvC,QAAQ,WAAW,QAAQ,KAAK;CAChC,QAAQ,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;AAC3D;AAEF,MAAM,aAAgC,CAAC,QAAQ,WAAW;AAE1D,MAAM,OAAO,gBAAyC,CAAC,CAAC;CACtD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,YAAY;EACZ,eAAe;EACf,iBAAiB;EACjB,UAAU;EACV,eAAe;CACjB;CACA,aAAa;EACX,QAAQ;EACR,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,iBAAiB;EACjB,YAAY;EACZ,eAAe;EACf,MAAM;EACN,eAAe;EACf,UAAU;EACV,cAAc;EACd,iBAAiB;CACnB;CACA,gBAAgB;EACd,uBAAuB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA;EAClD,qBAAqB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;EAC7C,MAAM,oBAAkC;GACtC,aAAa;GACb,YAAY,KAAK,SAAS,eAAe;IACvC,MAAM,OAAO,IAAI;IACjB,MAAM,YAAY,CAAC,GAAG,IAAI,SAAS,SAAS;IAC5C,MAAM,QAAQ,WAAW,QAAQ,IAAI,KAAK;IAC1C,OAAO,IAAI,SAAS,SAClB,oBAAC,KAAK,QAAN;KAAmC;KAAiB;KAAW,GAAI,SAAS,GAAG;KAC7E,UAAA,qBAAC,KAAK,eAAN;MAA0B;MAAiB;MAA3C,UAAA,CACE,oBAAC,KAAK,iBAAN;OAA4B;OAAiB;OAC3C,UAAA,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA;MACP,CAAA,GACtB,oBAAC,KAAK,YAAN;OAAuB;OAAiB;OACrC,UAAA;MACc,CAAA,CACC;;IACT,GATK,IAAI,KAST,IAEb,qBAAC,KAAK,MAAN;KAAiC;KAAiB;KAAW,GAAI,SAAS,GAAG;KAA7E,UAAA,CACE,oBAAC,KAAK,UAAN;MAAqB;MAAiB;MACnC,UAAA;KACY,CAAA,GACf,oBAAC,KAAK,eAAN;MAA0B;MAAiB;KAAY,CAAA,CAC9C;IALK,GAAA,IAAI,KAKT;GAEf;EACF,CAAC;CACH;CACA,oBAAoB,EAClB,sBAAsB;EAAE,MAAM,KAAA;EAAW,UAAU,KAAA;EAAW,eAAe;CAAK,GACpF;CACA,qBAAqB;EACnB,WAAW;EACX,kBAAkB;CACpB;CACA,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,iBAAiB;CACjB,QAAQ,UACN,eAAe,EAAE,MAAM,YAAY,MAAM,MAAM,UAAU,EAAE,CAAC;AAChE,CAAC;AAED,SAAS,wBAAwB,OAAyD;CACxF,MAAM,eAAe,gBAAgB;CACrC,OAAO;EACL,iBAAiB,kBAAkB,YAAY;EAC/C,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,kBAAkB,MAAM,gBACnB,YACC,MAAM,eAAe,EAAE,MAAM,QAAQ,cAAc,CAAC,IACtD,KAAA;EACJ,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,mBAAmB,MAAM,iBACpB,YACC,MAAM,gBAAgB,EAAE,OAAO,QAAQ,cAAc,CAAC,IACxD,KAAA;EACJ,iBAAiB,MAAM,wBAClB,YACC,MAAM,uBAAuB,EAAE,cAAc,QAAQ,aAAa,CAAC,IACrE,KAAA;CACN;AACF;AAEA,MAAM,eAAe,iBAAiB,KAAK,IAAI;AAE/C,SAAS,aACP,OACW;CACX,MAAM,EAAE,YAAY,GAAG,SAAS;CAChC,OAAO,cAAc,cAAc;EAAE,GAAG;EAAM,YAAY,uBAAuB,UAAU;CAAE,CAAC;AAChG;AACA,aAAa,cAAc,KAAK,KAAK;AAErC,MAAa,WAAW;CACtB,GAAG;CACH,MAAM;AACR"}