@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/toc/toc.recipe.mjs

@@ -0,0 +1,147 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/toc/toc.recipe.ts
+const tocRecipe = sva({
+	slots: [
+		"root",
+		"title",
+		"list",
+		"item",
+		"link",
+		"indicator"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "grid",
+			gridTemplateColumns: "minmax(0, 1fr)",
+			gridTemplateAreas: "\"title\" \"list\"",
+			color: "foreground.default"
+		},
+		title: {
+			gridArea: "title",
+			margin: "inset.none",
+			marginBlockEnd: "gap.related",
+			color: "foreground.subtle"
+		},
+		list: {
+			gridArea: "list",
+			display: "flex",
+			flexDirection: "column",
+			margin: "inset.none",
+			padding: "inset.none",
+			listStyleType: "none",
+			rowGap: "gap.related",
+			"--toc-bend-clearance": "spacing.inset.compact"
+		},
+		item: {
+			display: "flex",
+			"--toc-depth-step": "var(--toc-gap)",
+			"--toc-indent": "calc(max(var(--depth, 2) - 2, 0) * var(--toc-depth-step))",
+			paddingInlineStart: "var(--toc-indent)"
+		},
+		link: {
+			display: "flex",
+			alignItems: "center",
+			width: "fill",
+			paddingInlineStart: "var(--toc-gap)",
+			minHeight: "target.minimum",
+			minWidth: "target.minimum",
+			rounded: "control",
+			color: "foreground.muted",
+			textDecoration: "none",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&:not([data-disabled], [data-active]):hover": { color: "foreground.default" },
+			"&[data-active]": { color: "primary.onSurface" },
+			outlineColor: "border.focus",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		indicator: {
+			gridArea: "list",
+			position: "absolute",
+			inset: "inset.none",
+			pointerEvents: "none",
+			"& > svg": {
+				position: "absolute",
+				insetBlockStart: "inset.none",
+				left: "inset.none",
+				overflow: "visible",
+				strokeLinejoin: "round",
+				"& > path": { vectorEffect: "non-scaling-stroke" },
+				"&[data-hidden]": { display: "none" }
+			},
+			"& > [data-toc-path=rail]": {
+				stroke: "border.muted",
+				strokeWidth: "hairline",
+				_highContrast: { stroke: "system.canvasText" }
+			},
+			"& > [data-toc-path=active]": {
+				stroke: "primary.default",
+				strokeWidth: "emphasis",
+				clipPath: "inset(var(--toc-active-top) 0 calc(100% - var(--toc-active-top) - var(--toc-active-height)) 0)",
+				"--toc-active-motion": "clip-path",
+				transitionProperty: "var(--toc-active-motion)",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction",
+				_highContrast: { stroke: "system.highlight" }
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			title: { textStyle: "caption" },
+			root: { "--toc-gap": "calc(token(spacing.inset.control) + token(spacing.inset.compact))" },
+			link: {
+				paddingInlineEnd: "inset.control",
+				textStyle: "caption"
+			}
+		},
+		sm: {
+			title: { textStyle: "caption" },
+			root: { "--toc-gap": "calc(token(spacing.inset.control) + token(spacing.inset.compact))" },
+			link: {
+				minHeight: "control.xs",
+				paddingInlineEnd: "inset.control",
+				textStyle: "detail"
+			}
+		},
+		md: {
+			title: { textStyle: "detail" },
+			root: { "--toc-gap": "calc(token(spacing.inset.overlay) + token(spacing.inset.compact))" },
+			link: {
+				minHeight: "control.sm",
+				paddingInlineEnd: "inset.overlay",
+				textStyle: "body"
+			}
+		},
+		lg: {
+			title: { textStyle: "body" },
+			root: { "--toc-gap": "calc(token(spacing.inset.overlay) + token(spacing.inset.compact))" },
+			link: {
+				minHeight: "control.md",
+				paddingInlineEnd: "inset.overlay",
+				textStyle: "body"
+			}
+		},
+		xl: {
+			title: { textStyle: "body" },
+			root: { "--toc-gap": "calc(token(spacing.inset.surface) + token(spacing.inset.compact))" },
+			link: {
+				minHeight: "control.lg",
+				paddingInlineEnd: "inset.surface",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tocRecipe };
+
+//# sourceMappingURL=toc.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toc.recipe.mjs","names":[],"sources":["../../../src/components/toc/toc.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const tocRecipe = sva({\n  slots: ['root', 'title', 'list', 'item', 'link', 'indicator'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'grid',\n      gridTemplateColumns: 'minmax(0, 1fr)',\n      gridTemplateAreas: '\"title\" \"list\"',\n      color: 'foreground.default',\n    },\n    title: {\n      gridArea: 'title',\n      margin: 'inset.none',\n      marginBlockEnd: 'gap.related',\n      color: 'foreground.subtle',\n    },\n    list: {\n      gridArea: 'list',\n      display: 'flex',\n      flexDirection: 'column',\n      margin: 'inset.none',\n      padding: 'inset.none',\n      listStyleType: 'none',\n      rowGap: 'gap.related',\n      '--toc-bend-clearance': 'spacing.inset.compact',\n    },\n    item: {\n      display: 'flex',\n      '--toc-depth-step': 'var(--toc-gap)',\n      '--toc-indent': 'calc(max(var(--depth, 2) - 2, 0) * var(--toc-depth-step))',\n      paddingInlineStart: 'var(--toc-indent)',\n    },\n    link: {\n      display: 'flex',\n      alignItems: 'center',\n      width: 'fill',\n      paddingInlineStart: 'var(--toc-gap)',\n      minHeight: 'target.minimum',\n      minWidth: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.muted',\n      textDecoration: 'none',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&:not([data-disabled], [data-active]):hover': { color: 'foreground.default' },\n      '&[data-active]': { color: 'primary.onSurface' },\n      outlineColor: 'border.focus',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: '-inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    indicator: {\n      gridArea: 'list',\n      position: 'absolute',\n      inset: 'inset.none',\n      pointerEvents: 'none',\n      '& > svg': {\n        position: 'absolute',\n        insetBlockStart: 'inset.none',\n        left: 'inset.none',\n        overflow: 'visible',\n        strokeLinejoin: 'round',\n        '& > path': { vectorEffect: 'non-scaling-stroke' },\n        '&[data-hidden]': { display: 'none' },\n      },\n      '& > [data-toc-path=rail]': {\n        stroke: 'border.muted',\n        strokeWidth: 'hairline',\n        _highContrast: { stroke: 'system.canvasText' },\n      },\n      '& > [data-toc-path=active]': {\n        stroke: 'primary.default',\n        strokeWidth: 'emphasis',\n        clipPath:\n          'inset(var(--toc-active-top) 0 calc(100% - var(--toc-active-top) - var(--toc-active-height)) 0)',\n        '--toc-active-motion': 'clip-path',\n        transitionProperty: 'var(--toc-active-motion)',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n        _highContrast: { stroke: 'system.highlight' },\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        title: { textStyle: 'caption' },\n        root: { '--toc-gap': 'calc(token(spacing.inset.control) + token(spacing.inset.compact))' },\n        link: { paddingInlineEnd: 'inset.control', textStyle: 'caption' },\n      },\n      sm: {\n        title: { textStyle: 'caption' },\n        root: { '--toc-gap': 'calc(token(spacing.inset.control) + token(spacing.inset.compact))' },\n        link: { minHeight: 'control.xs', paddingInlineEnd: 'inset.control', textStyle: 'detail' },\n      },\n      md: {\n        title: { textStyle: 'detail' },\n        root: { '--toc-gap': 'calc(token(spacing.inset.overlay) + token(spacing.inset.compact))' },\n        link: { minHeight: 'control.sm', paddingInlineEnd: 'inset.overlay', textStyle: 'body' },\n      },\n      lg: {\n        title: { textStyle: 'body' },\n        root: { '--toc-gap': 'calc(token(spacing.inset.overlay) + token(spacing.inset.compact))' },\n        link: { minHeight: 'control.md', paddingInlineEnd: 'inset.overlay', textStyle: 'body' },\n      },\n      xl: {\n        title: { textStyle: 'body' },\n        root: { '--toc-gap': 'calc(token(spacing.inset.surface) + token(spacing.inset.compact))' },\n        link: { minHeight: 'control.lg', paddingInlineEnd: 'inset.surface', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,YAAY,IAAI;CAC3B,OAAO;EAAC;EAAQ;EAAS;EAAQ;EAAQ;EAAQ;CAAW;CAC5D,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,qBAAqB;GACrB,mBAAmB;GACnB,OAAO;EACT;EACA,OAAO;GACL,UAAU;GACV,QAAQ;GACR,gBAAgB;GAChB,OAAO;EACT;EACA,MAAM;GACJ,UAAU;GACV,SAAS;GACT,eAAe;GACf,QAAQ;GACR,SAAS;GACT,eAAe;GACf,QAAQ;GACR,wBAAwB;EAC1B;EACA,MAAM;GACJ,SAAS;GACT,oBAAoB;GACpB,gBAAgB;GAChB,oBAAoB;EACtB;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,OAAO;GACP,oBAAoB;GACpB,WAAW;GACX,UAAU;GACV,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,+CAA+C,EAAE,OAAO,qBAAqB;GAC7E,kBAAkB,EAAE,OAAO,oBAAoB;GAC/C,cAAc;GACd,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,WAAW;GACT,UAAU;GACV,UAAU;GACV,OAAO;GACP,eAAe;GACf,WAAW;IACT,UAAU;IACV,iBAAiB;IACjB,MAAM;IACN,UAAU;IACV,gBAAgB;IAChB,YAAY,EAAE,cAAc,qBAAqB;IACjD,kBAAkB,EAAE,SAAS,OAAO;GACtC;GACA,4BAA4B;IAC1B,QAAQ;IACR,aAAa;IACb,eAAe,EAAE,QAAQ,oBAAoB;GAC/C;GACA,8BAA8B;IAC5B,QAAQ;IACR,aAAa;IACb,UACE;IACF,uBAAuB;IACvB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,eAAe,EAAE,QAAQ,mBAAmB;GAC9C;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO,EAAE,WAAW,UAAU;GAC9B,MAAM,EAAE,aAAa,oEAAoE;GACzF,MAAM;IAAE,kBAAkB;IAAiB,WAAW;GAAU;EAClE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,UAAU;GAC9B,MAAM,EAAE,aAAa,oEAAoE;GACzF,MAAM;IAAE,WAAW;IAAc,kBAAkB;IAAiB,WAAW;GAAS;EAC1F;EACA,IAAI;GACF,OAAO,EAAE,WAAW,SAAS;GAC7B,MAAM,EAAE,aAAa,oEAAoE;GACzF,MAAM;IAAE,WAAW;IAAc,kBAAkB;IAAiB,WAAW;GAAO;EACxF;EACA,IAAI;GACF,OAAO,EAAE,WAAW,OAAO;GAC3B,MAAM,EAAE,aAAa,oEAAoE;GACzF,MAAM;IAAE,WAAW;IAAc,kBAAkB;IAAiB,WAAW;GAAO;EACxF;EACA,IAAI;GACF,OAAO,EAAE,WAAW,OAAO;GAC3B,MAAM,EAAE,aAAa,oEAAoE;GACzF,MAAM;IAAE,WAAW;IAAc,kBAAkB;IAAiB,WAAW;GAAW;EAC5F;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Toggle, ToggleRootProps } from "./toggle.mjs";
+export { Toggle, type ToggleRootProps };

package/dist/components/toggle/index.mjs

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

package/dist/components/toggle/toggle.d.mts

@@ -0,0 +1,21 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/toggle/toggle.d.ts
+export interface ToggleRootProps {
+  /** 제어되는 눌림 상태. */
+  value?: boolean;
+  /** 비제어 모드의 초기 눌림 상태. `value`를 주면 무시됩니다. */
+  defaultValue?: boolean;
+  /** 제어 여부와 무관하게 눌림 상태가 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<boolean>) => void;
+  /** 비활성화된 Toggle은 반응하지 않습니다. */
+  disabled?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 렌더된 버튼의 식별자. 이 machine은 식별자를 만들지 않아서, 버튼의 `id`는 여기서 준 값뿐입니다. */
+  id?: string;
+}
+export declare const Toggle: SynapseComponent<"indicator" | "root", "root", ToggleRootProps, never>;
+//#endregion
+//# sourceMappingURL=toggle.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.mts","names":[],"sources":["../../../src/components/toggle/toggle.tsx"],"mappings":";;;;iBAWiB;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA,OAAO;;EAEP;;qBAWW,QAAM,+CAAA"}

package/dist/components/toggle/toggle.mjs

@@ -0,0 +1,34 @@
+"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 { toggleRecipe } from "./toggle.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as toggle from "@zag-js/toggle";
+//#region src/components/toggle/toggle.tsx
+const toMachineProps = (props) => ({
+	...props.value === void 0 ? {} : { pressed: props.value },
+	...props.defaultValue === void 0 ? {} : { defaultPressed: props.defaultValue },
+	...props.onValueChange === void 0 ? {} : { onPressedChange: (pressed) => props.onValueChange?.({ value: pressed }) }
+});
+const Toggle = defineComponent()({
+	name: "Toggle",
+	module: toggle,
+	rootPart: "root",
+	elements: { indicator: "span" },
+	defaultContent: { indicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }) },
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"size"
+	],
+	useMachineProps: toMachineProps,
+	slots: (props) => toggleRecipe({ size: resolveSize(props.size, "Toggle") })
+});
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=toggle.mjs.map

package/dist/components/toggle/toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.mjs","names":[],"sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark } from '@neurocle/synapse-icons'\nimport * as toggle from '@zag-js/toggle'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { toggleRecipe } from '#/components/toggle/toggle.recipe.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface ToggleRootProps {\n  /** 제어되는 눌림 상태. */\n  value?: boolean\n  /** 비제어 모드의 초기 눌림 상태. `value`를 주면 무시됩니다. */\n  defaultValue?: boolean\n  /** 제어 여부와 무관하게 눌림 상태가 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<boolean>) => void\n  /** 비활성화된 Toggle은 반응하지 않습니다. */\n  disabled?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 렌더된 버튼의 식별자. 이 machine은 식별자를 만들지 않아서, 버튼의 `id`는 여기서 준 값뿐입니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: ToggleRootProps): Record<string, unknown> => ({\n  ...(props.value === undefined ? {} : { pressed: props.value }),\n  ...(props.defaultValue === undefined ? {} : { defaultPressed: props.defaultValue }),\n  ...(props.onValueChange === undefined\n    ? {}\n    : { onPressedChange: (pressed: boolean) => props.onValueChange?.({ value: pressed }) }),\n})\n\nexport const Toggle = defineComponent<ToggleRootProps>()({\n  name: 'Toggle',\n  module: toggle,\n  rootPart: 'root',\n  elements: { indicator: 'span' },\n  defaultContent: { indicator: () => <Icon icon={checkmark} /> },\n  variantProps: ['value', 'defaultValue', 'onValueChange', 'size'],\n  useMachineProps: toMachineProps,\n  slots: (props: ToggleRootProps) => toggleRecipe({ size: resolveSize(props.size, 'Toggle') }),\n})\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,kBAAkB,WAAqD;CAC3E,GAAI,MAAM,UAAU,KAAA,IAAY,CAAC,IAAI,EAAE,SAAS,MAAM,MAAM;CAC5D,GAAI,MAAM,iBAAiB,KAAA,IAAY,CAAC,IAAI,EAAE,gBAAgB,MAAM,aAAa;CACjF,GAAI,MAAM,kBAAkB,KAAA,IACxB,CAAC,IACD,EAAE,kBAAkB,YAAqB,MAAM,gBAAgB,EAAE,OAAO,QAAQ,CAAC,EAAE;AACzF;AAEA,MAAa,SAAS,gBAAiC,CAAC,CAAC;CACvD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,WAAW,OAAO;CAC9B,gBAAgB,EAAE,iBAAiB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA,EAAE;CAC7D,cAAc;EAAC;EAAS;EAAgB;EAAiB;CAAM;CAC/D,iBAAiB;CACjB,QAAQ,UAA2B,aAAa,EAAE,MAAM,YAAY,MAAM,MAAM,QAAQ,EAAE,CAAC;AAC7F,CAAC"}

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

@@ -0,0 +1,175 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/toggle/toggle.recipe.ts
+const toggleRecipe = sva({
+	slots: ["root", "indicator"],
+	base: {
+		root: {
+			"&[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: "border.default",
+			bg: "surface.raised",
+			color: "foreground.muted",
+			cursor: "pointer",
+			userSelect: "none",
+			transitionProperty: "common",
+			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]):active": { transform: "scale(0.96)" },
+			_pressed: {
+				bg: "primary.subtle",
+				color: "primary.onSurface",
+				borderColor: "primary.default",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText",
+					borderColor: "system.highlight"
+				}
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				bg: "background.subtle",
+				borderColor: "border.muted",
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				},
+				_pressed: {
+					bg: "background.muted",
+					color: "foreground.disabled"
+				}
+			}
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			pointerEvents: "none",
+			"&[data-state=off]": { display: "none" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				"&[aria-label]:has(> svg)": {
+					width: "control.xs",
+					height: "control.xs"
+				},
+				"& > svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				},
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			root: {
+				"&[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"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			root: {
+				"&[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"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			root: {
+				"&[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"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			root: {
+				"&[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"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { toggleRecipe };
+
+//# sourceMappingURL=toggle.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.recipe.mjs","names":[],"sources":["../../../src/components/toggle/toggle.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const toggleRecipe = sva({\n  slots: ['root', 'indicator'],\n  base: {\n    root: {\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: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.muted',\n      cursor: 'pointer',\n      userSelect: 'none',\n      transitionProperty: 'common',\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]):active': { transform: 'scale(0.96)' },\n      _pressed: {\n        bg: 'primary.subtle',\n        color: 'primary.onSurface',\n        borderColor: 'primary.default',\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        bg: 'background.subtle',\n        borderColor: 'border.muted',\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n        _pressed: { bg: 'background.muted', color: 'foreground.disabled' },\n      },\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      pointerEvents: 'none',\n      '&[data-state=off]': { display: 'none' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: {\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.compact',\n          textStyle: 'caption',\n        },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        root: {\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        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        root: {\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        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        root: {\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        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        root: {\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        indicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,eAAe,IAAI;CAC9B,OAAO,CAAC,QAAQ,WAAW;CAC3B,MAAM;EACJ,MAAM;GACJ,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,4CAA4C,EAAE,WAAW,cAAc;GACvE,UAAU;IACR,IAAI;IACJ,OAAO;IACP,aAAa;IACb,eAAe;KACb,IAAI;KACJ,OAAO;KACP,aAAa;IACf;GACF;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,IAAI;IACJ,aAAa;IACb,OAAO;IACP,QAAQ;IACR,eAAe;KAAE,OAAO;KAAmB,aAAa;IAAkB;IAC1E,UAAU;KAAE,IAAI;KAAoB,OAAO;IAAsB;GACnE;EACF;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,qBAAqB,EAAE,SAAS,OAAO;EACzC;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,MAAM;IACJ,4BAA4B;KAAE,OAAO;KAAc,QAAQ;IAAa;IACxE,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/toggle-group/index.d.mts

@@ -0,0 +1,2 @@
+import { ToggleGroup, ToggleGroupRootProps } from "./toggle-group.mjs";
+export { ToggleGroup, type ToggleGroupRootProps };

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

@@ -0,0 +1,2 @@
+import { ToggleGroup } from "./toggle-group.mjs";
+export { ToggleGroup };

package/dist/components/toggle-group/toggle-group.d.mts

@@ -0,0 +1,29 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/toggle-group/toggle-group.d.ts
+export interface ToggleGroupRootProps {
+  /** 제어되는 선택. `multiple`을 켜지 않았다면 항목이 하나입니다. */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void;
+  /** 한 번에 둘 이상의 아이템이 눌려 있도록 허용합니다. */
+  multiple?: boolean;
+  /** 눌린 아이템을 다시 누르면 해제됩니다. 기본값은 true이고, `multiple`일 때는 무시됩니다. */
+  deselectable?: boolean;
+  /** 화살표 키 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. 기본값은 true입니다. */
+  loopFocus?: boolean;
+  /** 그룹이 배치되는 축이자, 그 축을 따라 움직이는 화살표 키를 정합니다. */
+  orientation?: Orientation;
+  /** 비활성화된 ToggleGroup은 반응하지 않고, 그 안의 어떤 아이템도 반응하지 않습니다. */
+  disabled?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const ToggleGroup: SynapseComponent<"item" | "root", "root", ToggleGroupRootProps, never>;
+//#endregion
+//# sourceMappingURL=toggle-group.d.mts.map

package/dist/components/toggle-group/toggle-group.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.mts","names":[],"sources":["../../../src/components/toggle-group/toggle-group.tsx"],"mappings":";;;;iBAUiB;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA,OAAO;;EAEP;;qBAGW,aAAW,0CAAA"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { toggleGroupRecipe } from "./toggle-group.recipe.mjs";
+import * as toggleGroup from "@zag-js/toggle-group";
+//#region src/components/toggle-group/toggle-group.tsx
+const ToggleGroup = defineComponent()({
+	name: "ToggleGroup",
+	module: toggleGroup,
+	rootPart: "root",
+	getterProps: { item: ["value", "disabled"] },
+	variantProps: ["size"],
+	slots: (props) => toggleGroupRecipe({ size: resolveSize(props.size, "ToggleGroup") })
+});
+//#endregion
+export { ToggleGroup };
+
+//# sourceMappingURL=toggle-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.mjs","names":[],"sources":["../../../src/components/toggle-group/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as toggleGroup from '@zag-js/toggle-group'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { toggleGroupRecipe } from '#/components/toggle-group/toggle-group.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { Orientation } from '#/system/types.ts'\n\nexport interface ToggleGroupRootProps {\n  /** 제어되는 선택. `multiple`을 켜지 않았다면 항목이 하나입니다. */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void\n  /** 한 번에 둘 이상의 아이템이 눌려 있도록 허용합니다. */\n  multiple?: boolean\n  /** 눌린 아이템을 다시 누르면 해제됩니다. 기본값은 true이고, `multiple`일 때는 무시됩니다. */\n  deselectable?: boolean\n  /** 화살표 키 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. 기본값은 true입니다. */\n  loopFocus?: boolean\n  /** 그룹이 배치되는 축이자, 그 축을 따라 움직이는 화살표 키를 정합니다. */\n  orientation?: Orientation\n  /** 비활성화된 ToggleGroup은 반응하지 않고, 그 안의 어떤 아이템도 반응하지 않습니다. */\n  disabled?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const ToggleGroup = defineComponent<ToggleGroupRootProps>()({\n  name: 'ToggleGroup',\n  module: toggleGroup,\n  rootPart: 'root',\n  getterProps: { item: ['value', 'disabled'] },\n  variantProps: ['size'],\n  slots: (props: ToggleGroupRootProps) =>\n    toggleGroupRecipe({ size: resolveSize(props.size, 'ToggleGroup') }),\n})\n"],"mappings":";;;;;;AAiCA,MAAa,cAAc,gBAAsC,CAAC,CAAC;CACjE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,aAAa,EAAE,MAAM,CAAC,SAAS,UAAU,EAAE;CAC3C,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,kBAAkB,EAAE,MAAM,YAAY,MAAM,MAAM,aAAa,EAAE,CAAC;AACtE,CAAC"}