@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/splitter/splitter.recipe.mjs

@@ -0,0 +1,129 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/splitter/splitter.recipe.ts
+const splitterRecipe = sva({
+	slots: [
+		"root",
+		"panel",
+		"resizeTrigger",
+		"resizeTriggerIndicator"
+	],
+	base: {
+		root: {
+			display: "flex",
+			width: "fill",
+			color: "foreground.default",
+			"&[data-orientation=\"vertical\"]": { flexDirection: "column" }
+		},
+		panel: { overflow: "hidden" },
+		resizeTrigger: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			alignSelf: "stretch",
+			isolation: "isolate",
+			borderWidth: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"--splitter-line": "token(borderWidths.hairline)",
+			bg: "border.default",
+			"&[data-orientation=\"horizontal\"]": {
+				cursor: "col-resize",
+				minWidth: "var(--splitter-line)"
+			},
+			"&[data-orientation=\"vertical\"]": {
+				cursor: "row-resize",
+				minHeight: "var(--splitter-line)"
+			},
+			"&::before": {
+				content: "\"\"",
+				position: "absolute",
+				minWidth: "target.minimum",
+				minHeight: "target.minimum"
+			},
+			"&[data-orientation=\"horizontal\"]::before": {
+				insetBlock: "inset.none",
+				insetInline: "-inset.overlay"
+			},
+			"&[data-orientation=\"vertical\"]::before": {
+				insetInline: "inset.none",
+				insetBlock: "-inset.overlay"
+			},
+			"&:not([data-disabled]):hover > *": {
+				borderColor: "primary.default",
+				bg: "primary.default"
+			},
+			"&[data-dragging]": { bg: "primary.default" },
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: { cursor: "not-allowed" },
+			_highContrast: { bg: "system.canvasText" }
+		},
+		resizeTriggerIndicator: {
+			position: "absolute",
+			display: "inline-flex",
+			flexShrink: 0,
+			rounded: "pill",
+			borderStyle: "solid",
+			borderColor: "border.strong",
+			bg: "border.strong",
+			zIndex: "1",
+			pointerEvents: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&[data-orientation=\"horizontal\"]": {
+				borderInlineStartWidth: "emphasis",
+				borderInlineEndWidth: "hairline",
+				borderBlockWidth: "none"
+			},
+			"&[data-orientation=\"vertical\"]": {
+				borderBlockStartWidth: "emphasis",
+				borderBlockEndWidth: "hairline",
+				borderInlineWidth: "none"
+			},
+			"&[data-dragging]": {
+				borderColor: "primary.default",
+				bg: "primary.default"
+			},
+			_highContrast: {
+				bg: "system.canvasText",
+				borderColor: "system.canvasText"
+			}
+		}
+	},
+	variants: { size: {
+		xs: { resizeTriggerIndicator: {
+			"&[data-orientation=\"horizontal\"]": { height: "icon.md" },
+			"&[data-orientation=\"vertical\"]": { width: "icon.md" }
+		} },
+		sm: { resizeTriggerIndicator: {
+			"&[data-orientation=\"horizontal\"]": { height: "icon.lg" },
+			"&[data-orientation=\"vertical\"]": { width: "icon.lg" }
+		} },
+		md: { resizeTriggerIndicator: {
+			"&[data-orientation=\"horizontal\"]": { height: "icon.xl" },
+			"&[data-orientation=\"vertical\"]": { width: "icon.xl" }
+		} },
+		lg: { resizeTriggerIndicator: {
+			"&[data-orientation=\"horizontal\"]": { height: "control.lg" },
+			"&[data-orientation=\"vertical\"]": { width: "control.lg" }
+		} },
+		xl: { resizeTriggerIndicator: {
+			"&[data-orientation=\"horizontal\"]": { height: "control.xl" },
+			"&[data-orientation=\"vertical\"]": { width: "control.xl" }
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { splitterRecipe };
+
+//# sourceMappingURL=splitter.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.recipe.mjs","names":[],"sources":["../../../src/components/splitter/splitter.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const splitterRecipe = sva({\n  slots: ['root', 'panel', 'resizeTrigger', 'resizeTriggerIndicator'],\n  base: {\n    root: {\n      display: 'flex',\n      width: 'fill',\n      color: 'foreground.default',\n      '&[data-orientation=\"vertical\"]': { flexDirection: 'column' },\n    },\n    panel: {\n      overflow: 'hidden',\n    },\n    resizeTrigger: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      alignSelf: 'stretch',\n      isolation: 'isolate',\n      borderWidth: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      // 구분선은 translate한 ::after가 아니라 trigger 자체의 1px 배경입니다. transform은 픽셀 격자에\n      // 맞춰지지 않지만 grip 상자는 맞춰지므로, 둘을 따로 옮기면 백분율 분할의 소수점 오프셋만큼\n      // 어긋납니다. 같은 상자에서 맞춰 함께 움직이고, 대상 크기는 ::before가 맡습니다.\n      '--splitter-line': 'token(borderWidths.hairline)',\n      bg: 'border.default',\n      '&[data-orientation=\"horizontal\"]': {\n        cursor: 'col-resize',\n        minWidth: 'var(--splitter-line)',\n      },\n      '&[data-orientation=\"vertical\"]': {\n        cursor: 'row-resize',\n        minHeight: 'var(--splitter-line)',\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        minWidth: 'target.minimum',\n        minHeight: 'target.minimum',\n      },\n      '&[data-orientation=\"horizontal\"]::before': {\n        insetBlock: 'inset.none',\n        insetInline: '-inset.overlay',\n      },\n      '&[data-orientation=\"vertical\"]::before': {\n        insetInline: 'inset.none',\n        insetBlock: '-inset.overlay',\n      },\n      '&:not([data-disabled]):hover > *': { borderColor: 'primary.default', bg: 'primary.default' },\n      '&[data-dragging]': { bg: 'primary.default' },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: { cursor: 'not-allowed' },\n      _highContrast: { bg: 'system.canvasText' },\n    },\n    resizeTriggerIndicator: {\n      // trigger가 선 한 줄 너비로 남도록 흐름에서 빼되, trigger의 flex 가운데 정렬(정적 위치)로\n      // 놓아서 선 옆이 아니라 선과 함께 픽셀에 맞춰집니다.\n      position: 'absolute',\n      display: 'inline-flex',\n      flexShrink: 0,\n      rounded: 'pill',\n      borderStyle: 'solid',\n      borderColor: 'border.strong',\n      bg: 'border.strong',\n      zIndex: '1',\n      pointerEvents: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&[data-orientation=\"horizontal\"]': {\n        borderInlineStartWidth: 'emphasis',\n        borderInlineEndWidth: 'hairline',\n        borderBlockWidth: 'none',\n      },\n      '&[data-orientation=\"vertical\"]': {\n        borderBlockStartWidth: 'emphasis',\n        borderBlockEndWidth: 'hairline',\n        borderInlineWidth: 'none',\n      },\n      '&[data-dragging]': { borderColor: 'primary.default', bg: 'primary.default' },\n      _highContrast: { bg: 'system.canvasText', borderColor: 'system.canvasText' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        resizeTriggerIndicator: {\n          '&[data-orientation=\"horizontal\"]': { height: 'icon.md' },\n          '&[data-orientation=\"vertical\"]': { width: 'icon.md' },\n        },\n      },\n      sm: {\n        resizeTriggerIndicator: {\n          '&[data-orientation=\"horizontal\"]': { height: 'icon.lg' },\n          '&[data-orientation=\"vertical\"]': { width: 'icon.lg' },\n        },\n      },\n      md: {\n        resizeTriggerIndicator: {\n          '&[data-orientation=\"horizontal\"]': { height: 'icon.xl' },\n          '&[data-orientation=\"vertical\"]': { width: 'icon.xl' },\n        },\n      },\n      lg: {\n        resizeTriggerIndicator: {\n          '&[data-orientation=\"horizontal\"]': { height: 'control.lg' },\n          '&[data-orientation=\"vertical\"]': { width: 'control.lg' },\n        },\n      },\n      xl: {\n        resizeTriggerIndicator: {\n          '&[data-orientation=\"horizontal\"]': { height: 'control.xl' },\n          '&[data-orientation=\"vertical\"]': { width: 'control.xl' },\n        },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAiB;CAAwB;CAClE,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,OAAO;GACP,OAAO;GACP,oCAAkC,EAAE,eAAe,SAAS;EAC9D;EACA,OAAO,EACL,UAAU,SACZ;EACA,eAAe;GACb,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,WAAW;GACX,WAAW;GACX,aAAa;GACb,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GAId,mBAAmB;GACnB,IAAI;GACJ,sCAAoC;IAClC,QAAQ;IACR,UAAU;GACZ;GACA,oCAAkC;IAChC,QAAQ;IACR,WAAW;GACb;GACA,aAAa;IACX,SAAS;IACT,UAAU;IACV,UAAU;IACV,WAAW;GACb;GACA,8CAA4C;IAC1C,YAAY;IACZ,aAAa;GACf;GACA,4CAA0C;IACxC,aAAa;IACb,YAAY;GACd;GACA,oCAAoC;IAAE,aAAa;IAAmB,IAAI;GAAkB;GAC5F,oBAAoB,EAAE,IAAI,kBAAkB;GAC5C,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW,EAAE,QAAQ,cAAc;GACnC,eAAe,EAAE,IAAI,oBAAoB;EAC3C;EACA,wBAAwB;GAGtB,UAAU;GACV,SAAS;GACT,YAAY;GACZ,SAAS;GACT,aAAa;GACb,aAAa;GACb,IAAI;GACJ,QAAQ;GACR,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,sCAAoC;IAClC,wBAAwB;IACxB,sBAAsB;IACtB,kBAAkB;GACpB;GACA,oCAAkC;IAChC,uBAAuB;IACvB,qBAAqB;IACrB,mBAAmB;GACrB;GACA,oBAAoB;IAAE,aAAa;IAAmB,IAAI;GAAkB;GAC5E,eAAe;IAAE,IAAI;IAAqB,aAAa;GAAoB;EAC7E;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,wBAAwB;GACtB,sCAAoC,EAAE,QAAQ,UAAU;GACxD,oCAAkC,EAAE,OAAO,UAAU;EACvD,EACF;EACA,IAAI,EACF,wBAAwB;GACtB,sCAAoC,EAAE,QAAQ,UAAU;GACxD,oCAAkC,EAAE,OAAO,UAAU;EACvD,EACF;EACA,IAAI,EACF,wBAAwB;GACtB,sCAAoC,EAAE,QAAQ,UAAU;GACxD,oCAAkC,EAAE,OAAO,UAAU;EACvD,EACF;EACA,IAAI,EACF,wBAAwB;GACtB,sCAAoC,EAAE,QAAQ,aAAa;GAC3D,oCAAkC,EAAE,OAAO,aAAa;EAC1D,EACF;EACA,IAAI,EACF,wBAAwB;GACtB,sCAAoC,EAAE,QAAQ,aAAa;GAC3D,oCAAkC,EAAE,OAAO,aAAa;EAC1D,EACF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Steps, StepsInvalidDetails, StepsRootProps } from "./steps.mjs";
+export { Steps, type StepsInvalidDetails, type StepsRootProps };

package/dist/components/steps/index.mjs

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

package/dist/components/steps/steps.d.mts

@@ -0,0 +1,42 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/steps/steps.d.ts
+export interface StepsInvalidDetails {
+  readonly step: number;
+}
+export interface StepsRootProps {
+  /**
+   * 단계가 몇 개인지.
+   *
+   * 기본값을 두지 않고 필수로 둡니다. 기본값에 기대면 단계 수를 빠뜨린 흐름이 틀린 끝을 가진 채
+   * 조용히 렌더되기 때문입니다. machine의 `aria-valuemax`와 흐름의 끝을 지키는 가드가 모두 이
+   * 값에서 계산됩니다.
+   */
+  count: number;
+  /** 현재 단계이며 제어 모드입니다. machine의 인덱스와 마찬가지로 0부터 세요. */
+  value?: number;
+  /** 비제어 모드의 초기 단계. `value`를 주면 무시됩니다. */
+  defaultValue?: number;
+  /** 제어 여부와 무관하게 현재 단계가 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<number>) => void;
+  /** 단계를 순서대로 밟도록 요구합니다. */
+  linear?: boolean;
+  /** 어떤 단계를 유효하지 않은 채로 떠날 수 있는지 정합니다. `linear`에서는 전진을 막습니다. */
+  isStepValid?: (step: number) => boolean;
+  /** 어떤 단계를 다음/이전으로 건너뛸 수 있는지 정합니다. */
+  isStepSkippable?: (step: number) => boolean;
+  /** 단계가 유효하지 않아 이동이 거절됐을 때 호출됩니다. */
+  onStepInvalid?: (details: StepsInvalidDetails) => void;
+  /** 마지막 단계가 끝났을 때 한 번 호출됩니다. */
+  onStepComplete?: () => void;
+  /** 목록이 배치되는 축. 기본값은 `horizontal`입니다. */
+  orientation?: Orientation;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Steps: SynapseComponent<"content" | "indicator" | "item" | "list" | "nextTrigger" | "prevTrigger" | "progress" | "root" | "separator" | "trigger", "root", StepsRootProps, never>;
+//#endregion
+//# sourceMappingURL=steps.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"steps.d.mts","names":[],"sources":["../../../src/components/steps/steps.tsx"],"mappings":";;;;iBAciB;WACN;;iBAGM;;;;;;;;EAQf;;EAEA;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA,eAAe;;EAEf,mBAAmB;;EAEnB,iBAAiB,SAAS;;EAE1B;;EAEA,cAAc;;EAEd,OAAO;;EAEP;;qBAaW,OAAK,oJAAA"}

package/dist/components/steps/steps.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.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 { stepsRecipe } from "./steps.recipe.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as steps from "@zag-js/steps";
+//#region src/components/steps/steps.tsx
+const toMachineProps = (props) => ({
+	...props.value === void 0 ? {} : { step: props.value },
+	...props.defaultValue === void 0 ? {} : { defaultStep: props.defaultValue },
+	...props.onValueChange === void 0 ? {} : { onStepChange: (details) => props.onValueChange?.({ value: details.step }) }
+});
+const Steps = defineComponent()({
+	name: "Steps",
+	module: steps,
+	rootPart: "root",
+	elements: {
+		indicator: "span",
+		separator: "span"
+	},
+	defaultContent: { indicator: (api, t, args) => {
+		const index = typeof args["index"] === "number" ? args["index"] : 0;
+		return api.getItemState({ index }).completed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { icon: checkmark }), /* @__PURE__ */ jsx("span", {
+			style: visuallyHiddenStyle,
+			children: t("steps.indicator.completed")
+		})] }) : String(index + 1);
+	} },
+	amendBehaviorProps: {
+		indicator: (behaviorProps) => behaviorProps["data-complete"] === void 0 ? {} : { "aria-hidden": void 0 },
+		progress: (behaviorProps, _api, _args, translate) => ({ "aria-valuetext": translate("steps.progress.valueText", { percent: Number(behaviorProps["aria-valuenow"]) }) })
+	},
+	getterProps: {
+		item: ["index"],
+		trigger: ["index"],
+		content: ["index"],
+		indicator: ["index"],
+		separator: ["index"]
+	},
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"size"
+	],
+	useMachineProps: toMachineProps,
+	slots: (props) => {
+		const size = resolveSize(props.size, "Steps");
+		const raw = stepsRecipe.raw({ size });
+		return {
+			...stepsRecipe({ size }),
+			nextTrigger: buttonPartClass({
+				variant: "solid",
+				tone: "primary",
+				size
+			}, raw.nextTrigger),
+			prevTrigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, raw.prevTrigger)
+		};
+	}
+});
+//#endregion
+export { Steps };
+
+//# sourceMappingURL=steps.mjs.map

package/dist/components/steps/steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.mjs","names":[],"sources":["../../../src/components/steps/steps.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark } from '@neurocle/synapse-icons'\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport * as steps from '@zag-js/steps'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { stepsRecipe } from '#/components/steps/steps.recipe.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { Orientation } from '#/system/types.ts'\n\nexport interface StepsInvalidDetails {\n  readonly step: number\n}\n\nexport interface StepsRootProps {\n  /**\n   * 단계가 몇 개인지.\n   *\n   * 기본값을 두지 않고 필수로 둡니다. 기본값에 기대면 단계 수를 빠뜨린 흐름이 틀린 끝을 가진 채\n   * 조용히 렌더되기 때문입니다. machine의 `aria-valuemax`와 흐름의 끝을 지키는 가드가 모두 이\n   * 값에서 계산됩니다.\n   */\n  count: number\n  /** 현재 단계이며 제어 모드입니다. machine의 인덱스와 마찬가지로 0부터 세요. */\n  value?: number\n  /** 비제어 모드의 초기 단계. `value`를 주면 무시됩니다. */\n  defaultValue?: number\n  /** 제어 여부와 무관하게 현재 단계가 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<number>) => void\n  /** 단계를 순서대로 밟도록 요구합니다. */\n  linear?: boolean\n  /** 어떤 단계를 유효하지 않은 채로 떠날 수 있는지 정합니다. `linear`에서는 전진을 막습니다. */\n  isStepValid?: (step: number) => boolean\n  /** 어떤 단계를 다음/이전으로 건너뛸 수 있는지 정합니다. */\n  isStepSkippable?: (step: number) => boolean\n  /** 단계가 유효하지 않아 이동이 거절됐을 때 호출됩니다. */\n  onStepInvalid?: (details: StepsInvalidDetails) => void\n  /** 마지막 단계가 끝났을 때 한 번 호출됩니다. */\n  onStepComplete?: () => void\n  /** 목록이 배치되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: StepsRootProps): Record<string, unknown> => ({\n  ...(props.value === undefined ? {} : { step: props.value }),\n  ...(props.defaultValue === undefined ? {} : { defaultStep: props.defaultValue }),\n  ...(props.onValueChange === undefined\n    ? {}\n    : {\n        onStepChange: (details: { step: number }) => props.onValueChange?.({ value: details.step }),\n      }),\n})\n\nexport const Steps = defineComponent<StepsRootProps>()({\n  name: 'Steps',\n  module: steps,\n  rootPart: 'root',\n  elements: { indicator: 'span', separator: 'span' },\n  defaultContent: {\n    indicator: (api, t, args) => {\n      const index = typeof args['index'] === 'number' ? args['index'] : 0\n      return api.getItemState({ index }).completed ? (\n        <>\n          <Icon icon={checkmark} />\n          <span style={visuallyHiddenStyle}>{t('steps.indicator.completed')}</span>\n        </>\n      ) : (\n        String(index + 1)\n      )\n    },\n  },\n  amendBehaviorProps: {\n    indicator: (behaviorProps) =>\n      behaviorProps['data-complete'] === undefined ? {} : { 'aria-hidden': undefined },\n    progress: (behaviorProps, _api, _args, translate) => ({\n      'aria-valuetext': translate('steps.progress.valueText', {\n        percent: Number(behaviorProps['aria-valuenow']),\n      }),\n    }),\n  },\n  getterProps: {\n    item: ['index'],\n    trigger: ['index'],\n    content: ['index'],\n    indicator: ['index'],\n    separator: ['index'],\n  },\n  variantProps: ['value', 'defaultValue', 'onValueChange', 'size'],\n  useMachineProps: toMachineProps,\n  slots: (props: StepsRootProps) => {\n    const size = resolveSize(props.size, 'Steps')\n    const raw = stepsRecipe.raw({ size })\n    return {\n      ...stepsRecipe({ size }),\n      nextTrigger: buttonPartClass({ variant: 'solid', tone: 'primary', size }, raw.nextTrigger),\n      prevTrigger: buttonPartClass({ variant: 'outline', tone: 'neutral', size }, raw.prevTrigger),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,kBAAkB,WAAoD;CAC1E,GAAI,MAAM,UAAU,KAAA,IAAY,CAAC,IAAI,EAAE,MAAM,MAAM,MAAM;CACzD,GAAI,MAAM,iBAAiB,KAAA,IAAY,CAAC,IAAI,EAAE,aAAa,MAAM,aAAa;CAC9E,GAAI,MAAM,kBAAkB,KAAA,IACxB,CAAC,IACD,EACE,eAAe,YAA8B,MAAM,gBAAgB,EAAE,OAAO,QAAQ,KAAK,CAAC,EAC5F;AACN;AAEA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EAAE,WAAW;EAAQ,WAAW;CAAO;CACjD,gBAAgB,EACd,YAAY,KAAK,GAAG,SAAS;EAC3B,MAAM,QAAQ,OAAO,KAAK,aAAa,WAAW,KAAK,WAAW;EAClE,OAAO,IAAI,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,YACjC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA,GACxB,oBAAC,QAAD;GAAM,OAAO;GAAsB,UAAA,EAAE,2BAA2B;EAAQ,CAAA,CACxE,EAAA,CAAA,IAEF,OAAO,QAAQ,CAAC;CAEpB,EACF;CACA,oBAAoB;EAClB,YAAY,kBACV,cAAc,qBAAqB,KAAA,IAAY,CAAC,IAAI,EAAE,eAAe,KAAA,EAAU;EACjF,WAAW,eAAe,MAAM,OAAO,eAAe,EACpD,kBAAkB,UAAU,4BAA4B,EACtD,SAAS,OAAO,cAAc,gBAAgB,EAChD,CAAC,EACH;CACF;CACA,aAAa;EACX,MAAM,CAAC,OAAO;EACd,SAAS,CAAC,OAAO;EACjB,SAAS,CAAC,OAAO;EACjB,WAAW,CAAC,OAAO;EACnB,WAAW,CAAC,OAAO;CACrB;CACA,cAAc;EAAC;EAAS;EAAgB;EAAiB;CAAM;CAC/D,iBAAiB;CACjB,QAAQ,UAA0B;EAChC,MAAM,OAAO,YAAY,MAAM,MAAM,OAAO;EAC5C,MAAM,MAAM,YAAY,IAAI,EAAE,KAAK,CAAC;EACpC,OAAO;GACL,GAAG,YAAY,EAAE,KAAK,CAAC;GACvB,aAAa,gBAAgB;IAAE,SAAS;IAAS,MAAM;IAAW;GAAK,GAAG,IAAI,WAAW;GACzF,aAAa,gBAAgB;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAAG,IAAI,WAAW;EAC7F;CACF;AACF,CAAC"}

package/dist/components/steps/steps.recipe.mjs

@@ -0,0 +1,291 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/steps/steps.recipe.ts
+const stepsRecipe = sva({
+	slots: [
+		"root",
+		"list",
+		"item",
+		"trigger",
+		"indicator",
+		"separator",
+		"content",
+		"nextTrigger",
+		"prevTrigger",
+		"progress"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related",
+			width: "fill",
+			color: "foreground.default"
+		},
+		list: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			"&[data-orientation=\"vertical\"]": {
+				flexDirection: "column",
+				alignItems: "stretch"
+			}
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			flex: "1",
+			position: "relative",
+			"&:last-child": { flex: "none" },
+			"&[data-orientation=\"vertical\"]": {
+				flexDirection: "column",
+				alignItems: "flex-start",
+				gap: "inset.none"
+			}
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			minWidth: "target.minimum",
+			rounded: "control",
+			color: "foreground.subtle",
+			textAlign: "start",
+			outlineColor: "border.focus",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&:not(:disabled, [data-disabled], [data-current]):hover": { color: "foreground.muted" },
+			_current: { color: "foreground.default" },
+			_complete: { color: "foreground.muted" },
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			rounded: "pill",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums",
+			pointerEvents: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_current: {
+				borderWidth: "emphasis",
+				borderColor: "primary.default",
+				color: "primary.onSurface",
+				_highContrast: {
+					borderColor: "system.highlight",
+					color: "system.highlight"
+				}
+			},
+			_complete: {
+				bg: "primary.default",
+				borderColor: "primary.default",
+				color: "primary.foreground",
+				_highContrast: {
+					bg: "system.highlight",
+					borderColor: "system.highlight",
+					color: "system.highlightText"
+				}
+			}
+		},
+		separator: {
+			flex: "1",
+			alignSelf: "center",
+			borderStyle: "solid",
+			borderWidth: "none",
+			borderColor: "border.muted",
+			pointerEvents: "none",
+			"&[data-orientation=\"horizontal\"]": { borderBlockStartWidth: "hairline" },
+			"&[data-orientation=\"vertical\"]": {
+				flex: "none",
+				alignSelf: "flex-start",
+				minHeight: "control.xs",
+				marginInlineStart: "var(--steps-rail)",
+				borderInlineStartWidth: "hairline"
+			},
+			_complete: {
+				borderColor: "primary.default",
+				_highContrast: { borderColor: "system.highlight" }
+			}
+		},
+		content: {
+			color: "foreground.default",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		nextTrigger: { alignSelf: "flex-start" },
+		prevTrigger: { alignSelf: "flex-start" },
+		progress: {
+			position: "relative",
+			display: "block",
+			width: "fill",
+			borderBlockStartWidth: "emphasis",
+			borderStyle: "solid",
+			borderColor: "secondary.default",
+			rounded: "pill",
+			pointerEvents: "none",
+			_before: {
+				content: "\"\"",
+				position: "absolute",
+				insetInlineStart: "inset.none",
+				insetBlockEnd: "inset.none",
+				width: "var(--percent, 0%)",
+				borderBlockStartWidth: "emphasis",
+				borderStyle: "solid",
+				borderColor: "primary.default",
+				rounded: "pill",
+				_highContrast: { borderColor: "system.highlight" }
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			trigger: {
+				minHeight: "control.xs",
+				paddingInline: "inset.none",
+				textStyle: "caption"
+			},
+			indicator: {
+				width: "icon.sm",
+				height: "icon.sm",
+				textStyle: "caption",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			separator: {
+				"&[data-orientation=\"horizontal\"]": { marginInline: "inset.compact" },
+				"&[data-orientation=\"vertical\"]": { "--steps-rail": "calc(token(sizes.icon.sm) / 2)" }
+			},
+			content: {
+				paddingBlock: "inset.compact",
+				textStyle: "caption"
+			}
+		},
+		sm: {
+			trigger: {
+				minHeight: "control.sm",
+				paddingInline: "inset.none",
+				textStyle: "detail"
+			},
+			indicator: {
+				width: "icon.md",
+				height: "icon.md",
+				textStyle: "caption",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			separator: {
+				"&[data-orientation=\"horizontal\"]": { marginInline: "inset.control" },
+				"&[data-orientation=\"vertical\"]": { "--steps-rail": "calc(token(sizes.icon.md) / 2)" }
+			},
+			content: {
+				paddingBlock: "inset.control",
+				textStyle: "detail"
+			}
+		},
+		md: {
+			trigger: {
+				minHeight: "control.md",
+				paddingInline: "inset.none",
+				textStyle: "body"
+			},
+			indicator: {
+				width: "icon.lg",
+				height: "icon.lg",
+				textStyle: "caption",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			separator: {
+				"&[data-orientation=\"horizontal\"]": { marginInline: "inset.overlay" },
+				"&[data-orientation=\"vertical\"]": { "--steps-rail": "calc(token(sizes.icon.lg) / 2)" }
+			},
+			content: {
+				paddingBlock: "inset.control",
+				textStyle: "body"
+			}
+		},
+		lg: {
+			trigger: {
+				minHeight: "control.lg",
+				paddingInline: "inset.none",
+				textStyle: "body"
+			},
+			indicator: {
+				width: "icon.xl",
+				height: "icon.xl",
+				textStyle: "label",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			separator: {
+				"&[data-orientation=\"horizontal\"]": { marginInline: "inset.surface" },
+				"&[data-orientation=\"vertical\"]": { "--steps-rail": "calc(token(sizes.icon.xl) / 2)" }
+			},
+			content: {
+				paddingBlock: "inset.surface",
+				textStyle: "body"
+			}
+		},
+		xl: {
+			trigger: {
+				minHeight: "control.xl",
+				paddingInline: "inset.none",
+				textStyle: "subtitle"
+			},
+			indicator: {
+				width: "control.sm",
+				height: "control.sm",
+				textStyle: "label",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			},
+			separator: {
+				"&[data-orientation=\"horizontal\"]": { marginInline: "gap.distinct" },
+				"&[data-orientation=\"vertical\"]": { "--steps-rail": "calc(token(sizes.control.sm) / 2)" }
+			},
+			content: {
+				paddingBlock: "inset.surface",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { stepsRecipe };
+
+//# sourceMappingURL=steps.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"steps.recipe.mjs","names":[],"sources":["../../../src/components/steps/steps.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const stepsRecipe = sva({\n  slots: [\n    'root',\n    'list',\n    'item',\n    'trigger',\n    'indicator',\n    'separator',\n    'content',\n    'nextTrigger',\n    'prevTrigger',\n    'progress',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n      width: 'fill',\n      color: 'foreground.default',\n    },\n    list: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      '&[data-orientation=\"vertical\"]': { flexDirection: 'column', alignItems: 'stretch' },\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      flex: '1',\n      position: 'relative',\n      '&:last-child': { flex: 'none' },\n      '&[data-orientation=\"vertical\"]': {\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        gap: 'inset.none',\n      },\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      minWidth: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.subtle',\n      textAlign: 'start',\n      outlineColor: 'border.focus',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&:not(:disabled, [data-disabled], [data-current]):hover': { color: 'foreground.muted' },\n      _current: { color: 'foreground.default' },\n      _complete: { color: 'foreground.muted' },\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' },\n      },\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      rounded: 'pill',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n      pointerEvents: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _current: {\n        borderWidth: 'emphasis',\n        borderColor: 'primary.default',\n        color: 'primary.onSurface',\n        _highContrast: { borderColor: 'system.highlight', color: 'system.highlight' },\n      },\n      _complete: {\n        bg: 'primary.default',\n        borderColor: 'primary.default',\n        color: 'primary.foreground',\n        _highContrast: {\n          bg: 'system.highlight',\n          borderColor: 'system.highlight',\n          color: 'system.highlightText',\n        },\n      },\n    },\n    separator: {\n      flex: '1',\n      alignSelf: 'center',\n      borderStyle: 'solid',\n      borderWidth: 'none',\n      borderColor: 'border.muted',\n      pointerEvents: 'none',\n      '&[data-orientation=\"horizontal\"]': { borderBlockStartWidth: 'hairline' },\n      '&[data-orientation=\"vertical\"]': {\n        flex: 'none',\n        alignSelf: 'flex-start',\n        minHeight: 'control.xs',\n        marginInlineStart: 'var(--steps-rail)',\n        borderInlineStartWidth: 'hairline',\n      },\n      _complete: {\n        borderColor: 'primary.default',\n        _highContrast: { borderColor: 'system.highlight' },\n      },\n    },\n    content: {\n      color: 'foreground.default',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    nextTrigger: { alignSelf: 'flex-start' },\n    prevTrigger: { alignSelf: 'flex-start' },\n    progress: {\n      position: 'relative',\n      display: 'block',\n      width: 'fill',\n      borderBlockStartWidth: 'emphasis',\n      borderStyle: 'solid',\n      borderColor: 'secondary.default',\n      rounded: 'pill',\n      pointerEvents: 'none',\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        insetInlineStart: 'inset.none',\n        insetBlockEnd: 'inset.none',\n        width: 'var(--percent, 0%)',\n        borderBlockStartWidth: 'emphasis',\n        borderStyle: 'solid',\n        borderColor: 'primary.default',\n        rounded: 'pill',\n        _highContrast: { borderColor: 'system.highlight' },\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        trigger: { minHeight: 'control.xs', paddingInline: 'inset.none', textStyle: 'caption' },\n        indicator: {\n          width: 'icon.sm',\n          height: 'icon.sm',\n          textStyle: 'caption',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        separator: {\n          '&[data-orientation=\"horizontal\"]': { marginInline: 'inset.compact' },\n          '&[data-orientation=\"vertical\"]': {\n            '--steps-rail': 'calc(token(sizes.icon.sm) / 2)',\n          },\n        },\n        content: { paddingBlock: 'inset.compact', textStyle: 'caption' },\n      },\n      sm: {\n        trigger: { minHeight: 'control.sm', paddingInline: 'inset.none', textStyle: 'detail' },\n        indicator: {\n          width: 'icon.md',\n          height: 'icon.md',\n          textStyle: 'caption',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        separator: {\n          '&[data-orientation=\"horizontal\"]': { marginInline: 'inset.control' },\n          '&[data-orientation=\"vertical\"]': {\n            '--steps-rail': 'calc(token(sizes.icon.md) / 2)',\n          },\n        },\n        content: { paddingBlock: 'inset.control', textStyle: 'detail' },\n      },\n      md: {\n        trigger: { minHeight: 'control.md', paddingInline: 'inset.none', textStyle: 'body' },\n        indicator: {\n          width: 'icon.lg',\n          height: 'icon.lg',\n          textStyle: 'caption',\n          '& svg': { width: 'icon.sm', height: 'icon.sm' },\n        },\n        separator: {\n          '&[data-orientation=\"horizontal\"]': { marginInline: 'inset.overlay' },\n          '&[data-orientation=\"vertical\"]': {\n            '--steps-rail': 'calc(token(sizes.icon.lg) / 2)',\n          },\n        },\n        content: { paddingBlock: 'inset.control', textStyle: 'body' },\n      },\n      lg: {\n        trigger: { minHeight: 'control.lg', paddingInline: 'inset.none', textStyle: 'body' },\n        indicator: {\n          width: 'icon.xl',\n          height: 'icon.xl',\n          textStyle: 'label',\n          '& svg': { width: 'icon.sm', height: 'icon.sm' },\n        },\n        separator: {\n          '&[data-orientation=\"horizontal\"]': { marginInline: 'inset.surface' },\n          '&[data-orientation=\"vertical\"]': {\n            '--steps-rail': 'calc(token(sizes.icon.xl) / 2)',\n          },\n        },\n        content: { paddingBlock: 'inset.surface', textStyle: 'body' },\n      },\n      xl: {\n        trigger: { minHeight: 'control.xl', paddingInline: 'inset.none', textStyle: 'subtitle' },\n        indicator: {\n          width: 'control.sm',\n          height: 'control.sm',\n          textStyle: 'label',\n          '& svg': { width: 'icon.md', height: 'icon.md' },\n        },\n        separator: {\n          '&[data-orientation=\"horizontal\"]': { marginInline: 'gap.distinct' },\n          '&[data-orientation=\"vertical\"]': {\n            '--steps-rail': 'calc(token(sizes.control.sm) / 2)',\n          },\n        },\n        content: { paddingBlock: 'inset.surface', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Switch, SwitchRootProps } from "./switch.mjs";
+export { Switch, type SwitchRootProps };

package/dist/components/switch/index.mjs

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

package/dist/components/switch/switch.d.mts

@@ -0,0 +1,36 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/switch/switch.d.ts
+export interface SwitchRootProps {
+  /** 제어되는 켜짐/꺼짐 상태. */
+  value?: boolean;
+  /** 비제어 모드의 초기 상태. `value`를 주면 무시됩니다. */
+  defaultValue?: boolean;
+  /** 제어 여부와 무관하게 상태가 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<boolean>) => void;
+  /**
+   * 스위치가 켜져 있을 때 `name` 아래로 제출되는 문자열입니다. 네이티브 체크박스가 그러하듯
+   * 기본값은 `"on"`입니다. 상태를 담는 `value`와는 다른 것입니다.
+   */
+  formValue?: string;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 Switch를 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 Switch는 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 Switch는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 스위치가 켜져 있어야 합니다. */
+  required?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Switch: SynapseComponent<"control" | "label" | "root" | "thumb", "root", SwitchRootProps, never>;
+//#endregion
+//# sourceMappingURL=switch.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/switch/switch.tsx"],"mappings":";;;;iBAUiB;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;;;;EAK1B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP;;qBAeW,QAAM,iEAAA"}