@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/toggle-group/toggle-group.recipe.mjs

@@ -0,0 +1,190 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/toggle-group/toggle-group.recipe.ts
+const toggleGroupRecipe = sva({
+	slots: ["root", "item"],
+	base: {
+		root: {
+			position: "relative",
+			display: "inline-flex",
+			alignSelf: "flex-start",
+			alignItems: "stretch",
+			gap: "inset.none",
+			minHeight: "target.minimum",
+			rounded: "control",
+			bg: "secondary.default",
+			_after: {
+				content: "\"\"",
+				position: "absolute",
+				inset: "inset.none",
+				rounded: "control",
+				borderWidth: "hairline",
+				borderStyle: "solid",
+				borderColor: "border.default",
+				pointerEvents: "none"
+			},
+			_vertical: {
+				flexDirection: "column",
+				alignItems: "stretch"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				bg: "background.muted",
+				_after: { borderColor: "border.muted" }
+			}
+		},
+		item: {
+			position: "relative",
+			"&[aria-label]:has(> svg)": { paddingInline: "inset.none" },
+			"& > svg": { flexShrink: 0 },
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			flexShrink: 0,
+			minHeight: "target.minimum",
+			minWidth: "target.minimum",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			bg: "surface.transparent",
+			color: "foreground.muted",
+			cursor: "pointer",
+			userSelect: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-state=on]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-state=on]):active": {
+				bg: "secondary.active",
+				color: "secondary.foreground"
+			},
+			"&[data-state=on]": {
+				zIndex: "1",
+				bg: "primary.subtle",
+				borderColor: "primary.default",
+				color: "primary.onSurface",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText",
+					borderColor: "system.highlight"
+				}
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				},
+				"&[data-state=on]": {
+					bg: "background.subtle",
+					borderColor: "border.muted",
+					color: "foreground.disabled"
+				}
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "caption" },
+			item: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.xs",
+					height: "control.xs"
+				},
+				"& > svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				},
+				minHeight: "control.xs",
+				paddingInline: "inset.control",
+				textStyle: "caption"
+			}
+		},
+		sm: {
+			root: { textStyle: "label" },
+			item: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.sm",
+					height: "control.sm"
+				},
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.sm",
+				paddingInline: "inset.control",
+				textStyle: "label"
+			}
+		},
+		md: {
+			root: { textStyle: "label" },
+			item: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.md",
+					height: "control.md"
+				},
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.md",
+				paddingInline: "inset.overlay",
+				textStyle: "label"
+			}
+		},
+		lg: {
+			root: { textStyle: "label" },
+			item: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.lg",
+					height: "control.lg"
+				},
+				"& > svg": {
+					width: "icon.md",
+					height: "icon.md"
+				},
+				minHeight: "control.lg",
+				paddingInline: "inset.surface",
+				textStyle: "label"
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			item: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.xl",
+					height: "control.xl"
+				},
+				"& > svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				},
+				minHeight: "control.xl",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { toggleGroupRecipe };
+
+//# sourceMappingURL=toggle-group.recipe.mjs.map

package/dist/components/toggle-group/toggle-group.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.recipe.mjs","names":[],"sources":["../../../src/components/toggle-group/toggle-group.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const toggleGroupRecipe = sva({\n  slots: ['root', 'item'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignSelf: 'flex-start',\n      alignItems: 'stretch',\n      gap: 'inset.none',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      bg: 'secondary.default',\n      _after: {\n        content: '\"\"',\n        position: 'absolute',\n        inset: 'inset.none',\n        rounded: 'control',\n        borderWidth: 'hairline',\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n        pointerEvents: 'none',\n      },\n      _vertical: {\n        flexDirection: 'column',\n        alignItems: 'stretch',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: { bg: 'background.muted', _after: { borderColor: 'border.muted' } },\n    },\n    item: {\n      position: 'relative',\n      '&[aria-label]:has(> svg)': { paddingInline: 'inset.none' },\n      '& > svg': { flexShrink: 0 },\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      flexShrink: 0,\n      minHeight: 'target.minimum',\n      minWidth: 'target.minimum',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      bg: 'surface.transparent',\n      color: 'foreground.muted',\n      cursor: 'pointer',\n      userSelect: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-state=on]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-state=on]):active': {\n        bg: 'secondary.active',\n        color: 'secondary.foreground',\n      },\n      '&[data-state=on]': {\n        zIndex: '1',\n        bg: 'primary.subtle',\n        borderColor: 'primary.default',\n        color: 'primary.onSurface',\n        _highContrast: {\n          bg: 'system.highlight',\n          color: 'system.highlightText',\n          borderColor: 'system.highlight',\n        },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: '-inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n        '&[data-state=on]': {\n          bg: 'background.subtle',\n          borderColor: 'border.muted',\n          color: 'foreground.disabled',\n        },\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'caption' },\n        item: {\n          '&[aria-label]:has(> svg)': { width: 'control.xs', height: 'control.xs' },\n          '& > svg': { width: 'icon.xs', height: 'icon.xs' },\n          minHeight: 'control.xs',\n          paddingInline: 'inset.control',\n          textStyle: 'caption',\n        },\n      },\n      sm: {\n        root: { textStyle: 'label' },\n        item: {\n          '&[aria-label]:has(> svg)': { width: 'control.sm', height: 'control.sm' },\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.sm',\n          paddingInline: 'inset.control',\n          textStyle: 'label',\n        },\n      },\n      md: {\n        root: { textStyle: 'label' },\n        item: {\n          '&[aria-label]:has(> svg)': { width: 'control.md', height: 'control.md' },\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.md',\n          paddingInline: 'inset.overlay',\n          textStyle: 'label',\n        },\n      },\n      lg: {\n        root: { textStyle: 'label' },\n        item: {\n          '&[aria-label]:has(> svg)': { width: 'control.lg', height: 'control.lg' },\n          '& > svg': { width: 'icon.md', height: 'icon.md' },\n          minHeight: 'control.lg',\n          paddingInline: 'inset.surface',\n          textStyle: 'label',\n        },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        item: {\n          '&[aria-label]:has(> svg)': { width: 'control.xl', height: 'control.xl' },\n          '& > svg': { width: 'icon.lg', height: 'icon.lg' },\n          minHeight: 'control.xl',\n          paddingInline: 'inset.surface',\n          textStyle: 'subtitle',\n        },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,oBAAoB,IAAI;CACnC,OAAO,CAAC,QAAQ,MAAM;CACtB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,WAAW;GACX,YAAY;GACZ,KAAK;GACL,WAAW;GACX,SAAS;GACT,IAAI;GACJ,QAAQ;IACN,SAAS;IACT,UAAU;IACV,OAAO;IACP,SAAS;IACT,aAAa;IACb,aAAa;IACb,aAAa;IACb,eAAe;GACjB;GACA,WAAW;IACT,eAAe;IACf,YAAY;GACd;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IAAE,IAAI;IAAoB,QAAQ,EAAE,aAAa,eAAe;GAAE;EAC/E;EACA,MAAM;GACJ,UAAU;GACV,4BAA4B,EAAE,eAAe,aAAa;GAC1D,WAAW,EAAE,YAAY,EAAE;GAC3B,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,WAAW;GACX,UAAU;GACV,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,4DAA4D;IAC1D,IAAI;IACJ,OAAO;GACT;GACA,6DAA6D;IAC3D,IAAI;IACJ,OAAO;GACT;GACA,oBAAoB;IAClB,QAAQ;IACR,IAAI;IACJ,aAAa;IACb,OAAO;IACP,eAAe;KACb,IAAI;KACJ,OAAO;KACP,aAAa;IACf;GACF;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe;KAAE,OAAO;KAAmB,aAAa;IAAkB;IAC1E,oBAAoB;KAClB,IAAI;KACJ,aAAa;KACb,OAAO;IACT;GACF;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EAAE,WAAW,UAAU;GAC7B,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,QAAQ;GAC3B,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,QAAQ;GAC3B,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,QAAQ;GAC3B,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,WAAW;GAC9B,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;EACF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipPlacement, TooltipPositioning, TooltipRootProps, TooltipTriggerValueChangeDetails } from "./tooltip.mjs";
+export { Tooltip, type TooltipPlacement, type TooltipPositioning, type TooltipRootProps, type TooltipTriggerValueChangeDetails };

package/dist/components/tooltip/index.mjs

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

package/dist/components/tooltip/tooltip.d.mts

@@ -0,0 +1,66 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/tooltip/tooltip.d.ts
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface TooltipPositioning {
+  placement?: TooltipPlacement;
+  gutter?: number;
+  flip?: boolean;
+}
+export interface TooltipTriggerValueChangeDetails {
+  readonly value: string | null;
+}
+export interface TooltipRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 툴팁이 열리거나 닫힐 때마다 호출됩니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /**
+   * 여러 trigger 가운데 지금 툴팁을 차지한 것이 무엇인지 나타냅니다.
+   *
+   * Tooltip 하나가 여러 trigger를 함께 맡을 수 있습니다. 각 `Tooltip.Trigger`가 `value`를 받고,
+   * 이 값이 내용의 위치 기준이 되는 trigger입니다. trigger가 하나뿐인 Tooltip에는 필요 없습니다.
+   */
+  triggerValue?: string | null;
+  /** 비제어 모드에서 처음 툴팁을 차지하는 trigger. */
+  defaultTriggerValue?: string | null;
+  /** 툴팁을 차지한 trigger가 바뀔 때 호출됩니다. */
+  onTriggerValueChange?: (details: TooltipTriggerValueChangeDetails) => void;
+  /** 떠 있는 레이어가 놓이는 위치. */
+  positioning?: TooltipPositioning;
+  /** 포인터가 trigger 위에 머물러야 열리기까지의 시간(밀리초). */
+  openDelay?: number;
+  /** 포인터가 벗어난 뒤 닫히기까지의 시간(밀리초). */
+  closeDelay?: number;
+  /** 포인터가 내용 안에 있는 동안 툴팁을 계속 열어 둡니다. 기본값은 true입니다. */
+  interactive?: boolean;
+  /** 비활성화된 Tooltip은 열리지 않습니다. */
+  disabled?: boolean;
+  /** Escape로 닫습니다. 기본값은 true입니다. */
+  closeOnEscape?: boolean;
+  /** trigger를 클릭하면 닫습니다. 기본값은 true입니다. */
+  closeOnClick?: boolean;
+  /** trigger에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */
+  closeOnPointerDown?: boolean;
+  /** 페이지가 스크롤되면 닫습니다. */
+  closeOnScroll?: boolean;
+  /**
+   * 툴팁의 텍스트가 곧 trigger의 이름일 때, 그 trigger의 접근성 이름입니다.
+   *
+   * DOM 속성이 아니라 machine prop입니다. 어느 요소가 이 값을 지니는지는 machine이 정합니다.
+   */
+  'aria-label'?: string;
+  /** 이 Tooltip에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Tooltip: SynapseComponent<"arrow" | "arrowTip" | "content" | "positioner" | "trigger", null, TooltipRootProps, never>;
+//#endregion
+//# sourceMappingURL=tooltip.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;;YAaY;iBAcK;EACf,YAAY;EACZ;EACA;;iBAGe;WACN;;iBAGM;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;;;;;;EAOzB;;EAEA;;EAEA,wBAAwB,SAAS;;EAEjC,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EAMA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAgFW,SAAO,oFAAA"}

package/dist/components/tooltip/tooltip.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { rootContextOf } from "../../system/context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { tooltipRecipe } from "./tooltip.recipe.mjs";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as tooltip from "@zag-js/tooltip";
+//#region src/components/tooltip/tooltip.tsx
+const isLabelService = (value) => typeof value === "object" && value !== null && "prop" in value && typeof value.prop === "function";
+const isTriggerApi = (value) => typeof value === "object" && value !== null && "getTriggerProps" in value && typeof value.getTriggerProps === "function";
+const base = defineComponent()({
+	name: "Tooltip",
+	module: tooltip,
+	rootPart: null,
+	elements: { trigger: "button" },
+	getterProps: { trigger: ["value"] },
+	unstyledWhenAsChild: ["trigger"],
+	machineTranslations: null,
+	variantProps: ["size"],
+	useMachineProps: (props) => ({ interactive: props.interactive ?? true }),
+	slots: (props) => tooltipRecipe({ size: resolveSize(props.size, "Tooltip") })
+});
+const useTooltipRootValue = rootContextOf(base)?.useRootValue ?? (() => null);
+function TooltipLabel() {
+	const value = useTooltipRootValue();
+	if (value === null || !isLabelService(value.service) || !isTriggerApi(value.api)) return null;
+	const label = value.service.prop("aria-label");
+	if (typeof label !== "string" || label.trim() === "") return null;
+	const contentId = value.api.getTriggerProps()["aria-describedby"];
+	if (typeof contentId !== "string") return null;
+	return /* @__PURE__ */ jsx("span", {
+		id: contentId,
+		role: "tooltip",
+		style: visuallyHiddenStyle,
+		children: label
+	});
+}
+const BaseRoot = base.Root;
+function TooltipRoot(props) {
+	return /* @__PURE__ */ jsxs(BaseRoot, {
+		...props,
+		children: [props.children, /* @__PURE__ */ jsx(TooltipLabel, {})]
+	});
+}
+TooltipRoot.displayName = BaseRoot.displayName;
+const BaseTrigger = base.Trigger;
+function TooltipTrigger(props) {
+	return props.asChild !== true || isValidElement(props.children) && props.children.type === "button" ? /* @__PURE__ */ jsx(BaseTrigger, {
+		type: "button",
+		...props
+	}) : /* @__PURE__ */ jsx(BaseTrigger, { ...props });
+}
+TooltipTrigger.displayName = BaseTrigger.displayName;
+Object.assign(base, {
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger
+});
+const Tooltip = base;
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=tooltip.mjs.map

package/dist/components/tooltip/tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.mjs","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport * as tooltip from '@zag-js/tooltip'\nimport { isValidElement, type ReactNode } from 'react'\n\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { tooltipRecipe } from '#/components/tooltip/tooltip.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { rootContextOf } from '#/system/context.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type TooltipPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\nexport interface TooltipPositioning {\n  placement?: TooltipPlacement\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface TooltipTriggerValueChangeDetails {\n  readonly value: string | null\n}\n\nexport interface TooltipRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 툴팁이 열리거나 닫힐 때마다 호출됩니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /**\n   * 여러 trigger 가운데 지금 툴팁을 차지한 것이 무엇인지 나타냅니다.\n   *\n   * Tooltip 하나가 여러 trigger를 함께 맡을 수 있습니다. 각 `Tooltip.Trigger`가 `value`를 받고,\n   * 이 값이 내용의 위치 기준이 되는 trigger입니다. trigger가 하나뿐인 Tooltip에는 필요 없습니다.\n   */\n  triggerValue?: string | null\n  /** 비제어 모드에서 처음 툴팁을 차지하는 trigger. */\n  defaultTriggerValue?: string | null\n  /** 툴팁을 차지한 trigger가 바뀔 때 호출됩니다. */\n  onTriggerValueChange?: (details: TooltipTriggerValueChangeDetails) => void\n  /** 떠 있는 레이어가 놓이는 위치. */\n  positioning?: TooltipPositioning\n  /** 포인터가 trigger 위에 머물러야 열리기까지의 시간(밀리초). */\n  openDelay?: number\n  /** 포인터가 벗어난 뒤 닫히기까지의 시간(밀리초). */\n  closeDelay?: number\n  /** 포인터가 내용 안에 있는 동안 툴팁을 계속 열어 둡니다. 기본값은 true입니다. */\n  interactive?: boolean\n  /** 비활성화된 Tooltip은 열리지 않습니다. */\n  disabled?: boolean\n  /** Escape로 닫습니다. 기본값은 true입니다. */\n  closeOnEscape?: boolean\n  /** trigger를 클릭하면 닫습니다. 기본값은 true입니다. */\n  closeOnClick?: boolean\n  /** trigger에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */\n  closeOnPointerDown?: boolean\n  /** 페이지가 스크롤되면 닫습니다. */\n  closeOnScroll?: boolean\n  /**\n   * 툴팁의 텍스트가 곧 trigger의 이름일 때, 그 trigger의 접근성 이름입니다.\n   *\n   * DOM 속성이 아니라 machine prop입니다. 어느 요소가 이 값을 지니는지는 machine이 정합니다.\n   */\n  'aria-label'?: string\n  /** 이 Tooltip에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\ninterface TooltipLabelService {\n  prop: (key: 'aria-label') => unknown\n}\n\ninterface TooltipTriggerApi {\n  getTriggerProps: () => Record<string, unknown>\n}\n\nconst isLabelService = (value: unknown): value is TooltipLabelService =>\n  typeof value === 'object' && value !== null && 'prop' in value && typeof value.prop === 'function'\n\nconst isTriggerApi = (value: unknown): value is TooltipTriggerApi =>\n  typeof value === 'object' &&\n  value !== null &&\n  'getTriggerProps' in value &&\n  typeof value.getTriggerProps === 'function'\n\nconst base = defineComponent<TooltipRootProps>()({\n  name: 'Tooltip',\n  module: tooltip,\n  rootPart: null,\n  elements: {\n    trigger: 'button',\n  },\n  getterProps: {\n    trigger: ['value'],\n  },\n  // NOTE: asChild trigger는 사용처의 요소가 모양을 소유합니다. 감싼 텍스트·아이콘·행에 버튼 모양을 입히지 않습니다.\n  unstyledWhenAsChild: ['trigger'],\n  machineTranslations: null,\n  variantProps: ['size'],\n  useMachineProps: (props: TooltipRootProps) => ({ interactive: props.interactive ?? true }),\n  slots: (props: TooltipRootProps) => tooltipRecipe({ size: resolveSize(props.size, 'Tooltip') }),\n})\n\nconst useTooltipRootValue = rootContextOf(base)?.useRootValue ?? (() => null)\n\nfunction TooltipLabel(): ReactNode {\n  const value = useTooltipRootValue()\n  if (value === null || !isLabelService(value.service) || !isTriggerApi(value.api)) return null\n  const label = value.service.prop('aria-label')\n  if (typeof label !== 'string' || label.trim() === '') return null\n  const contentId = value.api.getTriggerProps()['aria-describedby']\n  if (typeof contentId !== 'string') return null\n  return (\n    <span id={contentId} role=\"tooltip\" style={visuallyHiddenStyle}>\n      {label}\n    </span>\n  )\n}\n\nconst BaseRoot = base.Root\n\nfunction TooltipRoot(props: Parameters<typeof BaseRoot>[0]): ReactNode {\n  return (\n    <BaseRoot {...props}>\n      {props.children}\n      <TooltipLabel />\n    </BaseRoot>\n  )\n}\nTooltipRoot.displayName = BaseRoot.displayName\n\nconst BaseTrigger = base.Trigger\n\nfunction TooltipTrigger(props: Parameters<typeof BaseTrigger>[0]): ReactNode {\n  const rendersButton =\n    props.asChild !== true || (isValidElement(props.children) && props.children.type === 'button')\n  return rendersButton ? <BaseTrigger type=\"button\" {...props} /> : <BaseTrigger {...props} />\n}\nTooltipTrigger.displayName = BaseTrigger.displayName\n\nObject.assign(base, {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n})\n\nexport const Tooltip = base\n"],"mappings":";;;;;;;;;;AA+FA,MAAM,kBAAkB,UACtB,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,SAAS,OAAO,MAAM,SAAS;AAE1F,MAAM,gBAAgB,UACpB,OAAO,UAAU,YACjB,UAAU,QACV,qBAAqB,SACrB,OAAO,MAAM,oBAAoB;AAEnC,MAAM,OAAO,gBAAkC,CAAC,CAAC;CAC/C,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EACR,SAAS,SACX;CACA,aAAa,EACX,SAAS,CAAC,OAAO,EACnB;CAEA,qBAAqB,CAAC,SAAS;CAC/B,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,kBAAkB,WAA6B,EAAE,aAAa,MAAM,eAAe,KAAK;CACxF,QAAQ,UAA4B,cAAc,EAAE,MAAM,YAAY,MAAM,MAAM,SAAS,EAAE,CAAC;AAChG,CAAC;AAED,MAAM,sBAAsB,cAAc,IAAI,CAAC,EAAE,uBAAuB;AAExE,SAAS,eAA0B;CACjC,MAAM,QAAQ,oBAAoB;CAClC,IAAI,UAAU,QAAQ,CAAC,eAAe,MAAM,OAAO,KAAK,CAAC,aAAa,MAAM,GAAG,GAAG,OAAO;CACzF,MAAM,QAAQ,MAAM,QAAQ,KAAK,YAAY;CAC7C,IAAI,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,IAAI,OAAO;CAC7D,MAAM,YAAY,MAAM,IAAI,gBAAgB,CAAC,CAAC;CAC9C,IAAI,OAAO,cAAc,UAAU,OAAO;CAC1C,OACE,oBAAC,QAAD;EAAM,IAAI;EAAW,MAAK;EAAU,OAAO;EACxC,UAAA;CACG,CAAA;AAEV;AAEA,MAAM,WAAW,KAAK;AAEtB,SAAS,YAAY,OAAkD;CACrE,OACE,qBAAC,UAAD;EAAU,GAAI;EAAd,UAAA,CACG,MAAM,UACP,oBAAC,cAAD,CAAe,CAAA,CACP;;AAEd;AACA,YAAY,cAAc,SAAS;AAEnC,MAAM,cAAc,KAAK;AAEzB,SAAS,eAAe,OAAqD;CAG3E,OADE,MAAM,YAAY,QAAS,eAAe,MAAM,QAAQ,KAAK,MAAM,SAAS,SAAS,WAChE,oBAAC,aAAD;EAAa,MAAK;EAAS,GAAI;CAAQ,CAAA,IAAI,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA;AAC7F;AACA,eAAe,cAAc,YAAY;AAEzC,OAAO,OAAO,MAAM;CAClB,MAAM;CACN,SAAS;AACX,CAAC;AAED,MAAa,UAAU"}

package/dist/components/tooltip/tooltip.recipe.mjs

@@ -0,0 +1,149 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/tooltip/tooltip.recipe.ts
+const tooltipRecipe = sva({
+	slots: [
+		"trigger",
+		"arrow",
+		"arrowTip",
+		"positioner",
+		"content"
+	],
+	base: {
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.muted",
+			textStyle: "label",
+			cursor: "pointer",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default",
+				transform: "scale(0.96)"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				}
+			}
+		},
+		arrow: {
+			"--arrow-size": "sizes.icon.xs",
+			"--arrow-background": "colors.background.inverse"
+		},
+		arrowTip: {
+			boxShadow: "overlay",
+			clipPath: "polygon(-100% -100%, 200% -100%, -100% 200%)"
+		},
+		positioner: { zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))" },
+		content: {
+			layerStyle: "reveal",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))",
+			maxWidth: "surface.overlayMax",
+			paddingBlock: "inset.control",
+			paddingInline: "inset.overlay",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "background.inverse",
+			color: "foreground.onEmphasis",
+			boxShadow: "overlay",
+			textStyle: "detail"
+		}
+	},
+	variants: { size: {
+		xs: {
+			trigger: {
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "detail"
+			},
+			content: {
+				paddingBlock: "inset.none",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		sm: {
+			trigger: {
+				minHeight: "control.sm",
+				paddingInline: "inset.control"
+			},
+			content: {
+				paddingBlock: "inset.compact",
+				paddingInline: "inset.control",
+				textStyle: "caption"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		md: {
+			trigger: {
+				minHeight: "control.md",
+				paddingInline: "inset.overlay"
+			},
+			content: {
+				paddingBlock: "inset.control",
+				paddingInline: "inset.overlay",
+				textStyle: "detail"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		lg: {
+			trigger: {
+				minHeight: "control.lg",
+				paddingInline: "inset.surface"
+			},
+			content: {
+				paddingBlock: "inset.control",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			arrow: { "--arrow-size": "sizes.icon.sm" }
+		},
+		xl: {
+			trigger: {
+				minHeight: "control.xl",
+				paddingInline: "rhythm.normal",
+				textStyle: "subtitle"
+			},
+			content: {
+				paddingBlock: "inset.overlay",
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			arrow: { "--arrow-size": "sizes.icon.sm" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tooltipRecipe };
+
+//# sourceMappingURL=tooltip.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.recipe.mjs","names":[],"sources":["../../../src/components/tooltip/tooltip.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const tooltipRecipe = sva({\n  slots: ['trigger', 'arrow', 'arrowTip', 'positioner', 'content'],\n  base: {\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.muted',\n      textStyle: 'label',\n      cursor: 'pointer',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n        transform: 'scale(0.96)',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n      },\n    },\n    arrow: {\n      '--arrow-size': 'sizes.icon.xs',\n      '--arrow-background': 'colors.background.inverse',\n    },\n    arrowTip: {\n      boxShadow: 'overlay',\n      clipPath: 'polygon(-100% -100%, 200% -100%, -100% 200%)',\n    },\n    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n    },\n    content: {\n      layerStyle: 'reveal',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n      maxWidth: 'surface.overlayMax',\n      paddingBlock: 'inset.control',\n      paddingInline: 'inset.overlay',\n      rounded: 'overlay',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.overlay',\n      bg: 'background.inverse',\n      color: 'foreground.onEmphasis',\n      boxShadow: 'overlay',\n      textStyle: 'detail',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        trigger: { minHeight: 'control.xs', paddingInline: 'inset.compact', textStyle: 'detail' },\n        content: {\n          paddingBlock: 'inset.none',\n          paddingInline: 'inset.compact',\n          textStyle: 'caption',\n        },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      sm: {\n        trigger: { minHeight: 'control.sm', paddingInline: 'inset.control' },\n        content: {\n          paddingBlock: 'inset.compact',\n          paddingInline: 'inset.control',\n          textStyle: 'caption',\n        },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      md: {\n        trigger: { minHeight: 'control.md', paddingInline: 'inset.overlay' },\n        content: {\n          paddingBlock: 'inset.control',\n          paddingInline: 'inset.overlay',\n          textStyle: 'detail',\n        },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      lg: {\n        trigger: { minHeight: 'control.lg', paddingInline: 'inset.surface' },\n        content: {\n          paddingBlock: 'inset.control',\n          paddingInline: 'inset.overlay',\n          textStyle: 'body',\n        },\n        arrow: { '--arrow-size': 'sizes.icon.sm' },\n      },\n      xl: {\n        trigger: { minHeight: 'control.xl', paddingInline: 'rhythm.normal', textStyle: 'subtitle' },\n        content: {\n          paddingBlock: 'inset.overlay',\n          paddingInline: 'inset.surface',\n          textStyle: 'body',\n        },\n        arrow: { '--arrow-size': 'sizes.icon.sm' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,gBAAgB,IAAI;CAC/B,OAAO;EAAC;EAAW;EAAS;EAAY;EAAc;CAAS;CAC/D,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,UAAU;GACV,WAAW;GACX,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,4DAA4D;IAC1D,IAAI;IACJ,OAAO;GACT;GACA,6DAA6D;IAC3D,IAAI;IACJ,OAAO;IACP,WAAW;GACb;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe;KAAE,OAAO;KAAmB,aAAa;IAAkB;GAC5E;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;EACA,UAAU;GACR,WAAW;GACX,UAAU;EACZ;EACA,YAAY,EACV,QAAQ,gEACV;EACA,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,UAAU;GACV,cAAc;GACd,eAAe;GACf,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAS;GACxF,SAAS;IACP,cAAc;IACd,eAAe;IACf,WAAW;GACb;GACA,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;GAAgB;GACnE,SAAS;IACP,cAAc;IACd,eAAe;IACf,WAAW;GACb;GACA,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;GAAgB;GACnE,SAAS;IACP,cAAc;IACd,eAAe;IACf,WAAW;GACb;GACA,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;GAAgB;GACnE,SAAS;IACP,cAAc;IACd,eAAe;IACf,WAAW;GACb;GACA,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAW;GAC1F,SAAS;IACP,cAAc;IACd,eAAe;IACf,WAAW;GACb;GACA,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Tour, TourAction, TourActionType, TourRootProps, TourStatus, TourStatusChangeDetails, TourStep, TourStepChangeDetails, TourStepPlacement, TourStepType, TourStepsChangeDetails, useTour } from "./tour.mjs";
+export { Tour, type TourAction, type TourActionType, type TourRootProps, type TourStatus, type TourStatusChangeDetails, type TourStep, type TourStepChangeDetails, type TourStepPlacement, type TourStepType, type TourStepsChangeDetails, useTour };

package/dist/components/tour/index.mjs

@@ -0,0 +1,2 @@
+import { Tour, useTour } from "./tour.mjs";
+export { Tour, useTour };

package/dist/components/tour/tour.d.mts

@@ -0,0 +1,92 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { Controller } from "../../shared/controller.mjs";
+import { ReactNode } from "react";
+//#region src/components/tour/tour.d.ts
+export type TourStepType = 'tooltip' | 'dialog' | 'wait' | 'floating';
+export type TourStepPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'center';
+export type TourActionType = 'next' | 'prev' | 'dismiss' | 'skip';
+export interface TourAction {
+  label: string;
+  action?: TourActionType;
+}
+export interface TourStep {
+  id: string;
+  type?: TourStepType;
+  target?: () => HTMLElement | null;
+  title: ReactNode;
+  description: ReactNode;
+  placement?: TourStepPlacement;
+  offset?: {
+    mainAxis?: number;
+    crossAxis?: number;
+  };
+  backdrop?: boolean;
+  arrow?: boolean;
+  actions?: readonly TourAction[];
+  meta?: Record<string, unknown>;
+}
+export type TourStatus = 'idle' | 'started' | 'skipped' | 'completed' | 'dismissed' | 'not-found';
+export interface TourStatusChangeDetails {
+  readonly status: TourStatus;
+  readonly stepId: string | null;
+  readonly stepIndex: number;
+}
+export interface TourStepChangeDetails {
+  readonly stepId: string | null;
+  readonly stepIndex: number;
+  readonly totalSteps: number;
+  readonly complete: boolean;
+  readonly progress: number;
+}
+export interface TourStepsChangeDetails {
+  readonly steps: readonly TourStep[];
+}
+export interface TourRootProps {
+  /** 단계들을 순서대로 담습니다. */
+  steps?: readonly TourStep[];
+  /** 지금 보이는 단계의 id. 투어가 돌고 있지 않은 동안에는 `null`입니다. */
+  stepId?: string | null;
+  /** 투어가 다른 단계로 옮겨 갈 때마다 호출됩니다. */
+  onStepChange?: (details: TourStepChangeDetails) => void;
+  /** 단계 목록 자체가 바뀔 때마다 호출됩니다. */
+  onStepsChange?: (details: TourStepsChangeDetails) => void;
+  /** 투어가 시작되거나, 끝나거나, 건너뛰어지거나, 닫힐 때 호출됩니다. */
+  onStatusChange?: (details: TourStatusChangeDetails) => void;
+  /** 화살표 키로 단계 사이를 오갑니다. 기본값은 true입니다. */
+  keyboardNavigation?: boolean;
+  /** 투어 뒤 페이지와의 상호작용을 막습니다. */
+  preventInteraction?: boolean;
+  /** 대상과 스포트라이트 가장자리 사이의 여백(픽셀). */
+  spotlightOffset?: {
+    x?: number;
+    y?: number;
+  };
+  /** 스포트라이트 모서리의 반지름(픽셀). */
+  spotlightRadius?: number;
+  /** Escape로 닫습니다. 기본값은 true입니다. */
+  closeOnEscape?: boolean;
+  /** 바깥에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */
+  closeOnInteractOutside?: boolean;
+  /** 이 Tour에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+interface TourCommands {
+  start: (stepId?: string) => void;
+  next: () => void;
+  prev: () => void;
+  setStep: (stepId: string) => void;
+  setSteps: (steps: readonly TourStep[]) => void;
+  addStep: (step: TourStep) => void;
+  removeStep: (stepId: string) => void;
+  updateStep: (stepId: string, step: Partial<TourStep>) => void;
+}
+export declare const Tour: SynapseComponent<"actionTrigger" | "arrow" | "arrowTip" | "backdrop" | "closeTrigger" | "content" | "description" | "positioner" | "progressText" | "spotlight" | "title", null, TourRootProps, never>;
+export declare const useTour: () => Controller<TourCommands, keyof TourCommands>;
+//#endregion
+//# sourceMappingURL=tour.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tour.d.mts","names":[],"sources":["../../../src/components/tour/tour.tsx"],"mappings":";;;;;;YAgBY;YAEA;YAeA;iBAEK;EACf;EACA,SAAS;;iBAGM;EACf;EACA,OAAO;EACP,eAAe;EACf,OAAO;EACP,aAAa;EACb,YAAY;EACZ;IAAW;IAAmB;;EAC9B;EACA;EACA,mBAAmB;EACnB,OAAO;;YAGG;iBAEK;WACN,QAAQ;WACR;WACA;;iBAGM;WACN;WACA;WACA;WACA;WACA;;iBAGM;WACN,gBAAgB;;iBAGV;;EAEf,iBAAiB;;EAEjB;;EAEA,gBAAgB,SAAS;;EAEzB,iBAAiB,SAAS;;EAE1B,kBAAkB,SAAS;;EAE3B;;EAEA;;EAEA;IAAoB;IAAY;;;EAEhC;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;UAeQ;EACR,QAAQ;EACR;EACA;EACA,UAAU;EACV,WAAW,gBAAgB;EAC3B,UAAU,MAAM;EAChB,aAAa;EACb,aAAa,gBAAgB,MAAM,QAAQ;;qBAUhC,MAAI,iLAAA;qBAmDJ,eAAO,WAAA,oBAAA"}