@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/snackbar/snackbar.recipe.mjs

@@ -0,0 +1,217 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/snackbar/snackbar.recipe.ts
+const snackbarRecipe = sva({
+	slots: [
+		"group",
+		"root",
+		"title",
+		"description",
+		"actionTrigger",
+		"closeTrigger"
+	],
+	base: {
+		group: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + 1000)",
+			width: "notification.snackbarMax",
+			"--snackbar-group-max-width": "calc(100vw - var(--viewport-offset-left) - var(--viewport-offset-right))",
+			maxWidth: "var(--snackbar-group-max-width)",
+			listStyle: "none",
+			margin: "inset.none",
+			padding: "inset.none",
+			"&[data-align=\"center\"]": { marginInline: "auto" }
+		},
+		root: {
+			translate: "var(--x) var(--y)",
+			scale: "var(--scale, 1)",
+			height: "var(--height)",
+			opacity: "var(--opacity)",
+			"--snackbar-motion-properties": "translate, scale, opacity, height, box-shadow",
+			transitionProperty: "var(--snackbar-motion-properties)",
+			transitionDuration: "reveal",
+			transitionTimingFunction: "enter",
+			_closed: {
+				transitionDuration: "interaction",
+				transitionTimingFunction: "exit"
+			},
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "inset.compact",
+			width: "fill",
+			minWidth: "notification.snackbarMin",
+			"--snackbar-row": "token(sizes.control.sm)",
+			paddingBlock: "inset.control",
+			paddingInlineEnd: "inset.overlay",
+			"--snackbar-bar-padding": "calc(token(spacing.inset.overlay) + token(sizes.notification.statusBar))",
+			"--snackbar-edge-inset": "calc(-1 * token(borderWidths.hairline))",
+			paddingInlineStart: "var(--snackbar-bar-padding)",
+			rounded: "overlay",
+			outlineStyle: "solid",
+			outlineWidth: "hairline",
+			outlineOffset: "var(--snackbar-edge-inset)",
+			outlineColor: "border.default",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "notification",
+			_focusVisible: {
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_before: {
+				content: "\"\"",
+				position: "absolute",
+				insetBlock: "inset.none",
+				insetInlineStart: "inset.none",
+				width: "notification.statusBar",
+				borderStartStartRadius: "overlay",
+				borderEndStartRadius: "overlay",
+				bg: "info.onSurface"
+			},
+			"&[data-type=\"success\"]::before": { bg: "success.onSurface" },
+			"&[data-type=\"error\"]::before": { bg: "error.onSurface" },
+			"&[data-type=\"warning\"]::before": { bg: "warning.onSurface" },
+			"&[data-type=\"success\"] [data-part=\"title\"] svg": { color: "success.onSurface" },
+			"&[data-type=\"error\"] [data-part=\"title\"] svg": { color: "error.onSurface" },
+			"&[data-type=\"warning\"] [data-part=\"title\"] svg": { color: "warning.onSurface" },
+			"&[data-type=\"info\"] [data-part=\"title\"] svg": { color: "info.onSurface" },
+			"&[data-type=\"error\"] [data-part=\"title\"] svg > :first-child": { fill: "error.onSurface" },
+			"&[data-type=\"error\"] [data-part=\"title\"] svg > :not(:first-child)": { stroke: "surface.overlay" },
+			"& > *": {
+				"--snackbar-content-motion": "opacity",
+				transitionProperty: "var(--snackbar-content-motion)",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction"
+			},
+			"&[data-overlap][data-sibling] > *": { opacity: 0 },
+			"&[data-overlap]:nth-child(n + 6)": { opacity: 0 },
+			"& > [data-snackbar-separator]": {
+				display: "block",
+				alignSelf: "stretch",
+				marginInline: "inset.compact",
+				borderInlineStartWidth: "hairline",
+				borderStyle: "solid",
+				borderColor: "border.default"
+			},
+			"& > [data-part=\"title\"] + [data-snackbar-separator]": { marginInlineStart: "inset.control" }
+		},
+		title: {
+			flex: "1",
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "gap.related",
+			"--snackbar-icon-nudge": "calc((1lh - token(sizes.icon.sm)) / 2)",
+			"--snackbar-title-inset": "max(token(spacing.inset.none), calc((var(--snackbar-row) - 1lh) / 2))",
+			paddingBlock: "var(--snackbar-title-inset)",
+			"& svg": {
+				width: "icon.sm",
+				height: "icon.sm",
+				flexShrink: 0,
+				marginBlockStart: "var(--snackbar-icon-nudge)"
+			},
+			textStyle: "label",
+			color: "foreground.default",
+			margin: "inset.none",
+			overflowWrap: "anywhere"
+		},
+		description: {},
+		actionTrigger: {
+			minWidth: "target.minimum",
+			alignSelf: "flex-start",
+			marginInlineStart: "inset.control"
+		},
+		closeTrigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			alignSelf: "flex-start",
+			minWidth: "control.sm",
+			minHeight: "control.sm",
+			rounded: "control",
+			color: "foreground.muted",
+			cursor: "pointer",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			},
+			"&:not(:disabled, [data-disabled]):hover": {
+				bg: "secondary.default",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled]):active": {
+				bg: "secondary.default",
+				color: "foreground.default",
+				transform: "scale(0.96)"
+			},
+			_focusVisible: {
+				outlineWidth: "focus",
+				outlineStyle: "solid",
+				outlineColor: "border.focus",
+				outlineOffset: "inset.compact"
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				"--snackbar-row": "token(sizes.control.xs)",
+				paddingBlock: "inset.compact"
+			},
+			title: { textStyle: "detail" },
+			closeTrigger: {
+				minWidth: "control.xs",
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		sm: {
+			title: { textStyle: "detail" },
+			closeTrigger: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		md: {},
+		lg: {
+			root: {
+				"--snackbar-row": "token(sizes.control.md)",
+				paddingBlock: "inset.overlay"
+			},
+			title: { textStyle: "body" },
+			closeTrigger: {
+				minWidth: "control.md",
+				minHeight: "control.md"
+			}
+		},
+		xl: {
+			root: {
+				"--snackbar-row": "token(sizes.control.lg)",
+				paddingBlock: "inset.surface"
+			},
+			title: { textStyle: "subtitle" },
+			closeTrigger: {
+				minWidth: "control.lg",
+				minHeight: "control.lg",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { snackbarRecipe };
+
+//# sourceMappingURL=snackbar.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.recipe.mjs","names":[],"sources":["../../../src/components/snackbar/snackbar.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const snackbarRecipe = sva({\n  slots: ['group', 'root', 'title', 'description', 'actionTrigger', 'closeTrigger'],\n  base: {\n    group: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + 1000)',\n      width: 'notification.snackbarMax',\n      '--snackbar-group-max-width':\n        'calc(100vw - var(--viewport-offset-left) - var(--viewport-offset-right))',\n      maxWidth: 'var(--snackbar-group-max-width)',\n      listStyle: 'none',\n      margin: 'inset.none',\n      padding: 'inset.none',\n      '&[data-align=\"center\"]': { marginInline: 'auto' },\n    },\n    root: {\n      translate: 'var(--x) var(--y)',\n      scale: 'var(--scale, 1)',\n      height: 'var(--height)',\n      opacity: 'var(--opacity)',\n      '--snackbar-motion-properties': 'translate, scale, opacity, height, box-shadow',\n      transitionProperty: 'var(--snackbar-motion-properties)',\n      transitionDuration: 'reveal',\n      transitionTimingFunction: 'enter',\n      _closed: {\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'exit',\n      },\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: 'inset.compact',\n      width: 'fill',\n      minWidth: 'notification.snackbarMin',\n      '--snackbar-row': 'token(sizes.control.sm)',\n      paddingBlock: 'inset.control',\n      paddingInlineEnd: 'inset.overlay',\n      '--snackbar-bar-padding':\n        'calc(token(spacing.inset.overlay) + token(sizes.notification.statusBar))',\n      '--snackbar-edge-inset': 'calc(-1 * token(borderWidths.hairline))',\n      paddingInlineStart: 'var(--snackbar-bar-padding)',\n      rounded: 'overlay',\n      outlineStyle: 'solid',\n      outlineWidth: 'hairline',\n      outlineOffset: 'var(--snackbar-edge-inset)',\n      outlineColor: 'border.default',\n      bg: 'surface.overlay',\n      color: 'foreground.default',\n      boxShadow: 'notification',\n      _focusVisible: {\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        insetBlock: 'inset.none',\n        insetInlineStart: 'inset.none',\n        width: 'notification.statusBar',\n        borderStartStartRadius: 'overlay',\n        borderEndStartRadius: 'overlay',\n        bg: 'info.onSurface',\n      },\n      '&[data-type=\"success\"]::before': { bg: 'success.onSurface' },\n      '&[data-type=\"error\"]::before': { bg: 'error.onSurface' },\n      '&[data-type=\"warning\"]::before': { bg: 'warning.onSurface' },\n      '&[data-type=\"success\"] [data-part=\"title\"] svg': { color: 'success.onSurface' },\n      '&[data-type=\"error\"] [data-part=\"title\"] svg': { color: 'error.onSurface' },\n      '&[data-type=\"warning\"] [data-part=\"title\"] svg': { color: 'warning.onSurface' },\n      '&[data-type=\"info\"] [data-part=\"title\"] svg': { color: 'info.onSurface' },\n      '&[data-type=\"error\"] [data-part=\"title\"] svg > :first-child': { fill: 'error.onSurface' },\n      '&[data-type=\"error\"] [data-part=\"title\"] svg > :not(:first-child)': {\n        stroke: 'surface.overlay',\n      },\n      '& > *': {\n        '--snackbar-content-motion': 'opacity',\n        transitionProperty: 'var(--snackbar-content-motion)',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n      },\n      '&[data-overlap][data-sibling] > *': { opacity: 0 },\n      '&[data-overlap]:nth-child(n + 6)': { opacity: 0 },\n      '& > [data-snackbar-separator]': {\n        display: 'block',\n        alignSelf: 'stretch',\n        marginInline: 'inset.compact',\n        borderInlineStartWidth: 'hairline',\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      },\n      '& > [data-part=\"title\"] + [data-snackbar-separator]': {\n        marginInlineStart: 'inset.control',\n      },\n    },\n    title: {\n      flex: '1',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: 'gap.related',\n      '--snackbar-icon-nudge': 'calc((1lh - token(sizes.icon.sm)) / 2)',\n      '--snackbar-title-inset':\n        'max(token(spacing.inset.none), calc((var(--snackbar-row) - 1lh) / 2))',\n      paddingBlock: 'var(--snackbar-title-inset)',\n      '& svg': {\n        width: 'icon.sm',\n        height: 'icon.sm',\n        flexShrink: 0,\n        marginBlockStart: 'var(--snackbar-icon-nudge)',\n      },\n      textStyle: 'label',\n      color: 'foreground.default',\n      margin: 'inset.none',\n      overflowWrap: 'anywhere',\n    },\n    description: {},\n    actionTrigger: {\n      minWidth: 'target.minimum',\n      alignSelf: 'flex-start',\n      marginInlineStart: 'inset.control',\n    },\n    closeTrigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      alignSelf: 'flex-start',\n      minWidth: 'control.sm',\n      minHeight: 'control.sm',\n      rounded: 'control',\n      color: 'foreground.muted',\n      cursor: 'pointer',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '& svg': { width: 'icon.sm', height: 'icon.sm' },\n      '&:not(:disabled, [data-disabled]):hover': {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled]):active': {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n        transform: 'scale(0.96)',\n      },\n      _focusVisible: {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'border.focus',\n        outlineOffset: 'inset.compact',\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { '--snackbar-row': 'token(sizes.control.xs)', paddingBlock: 'inset.compact' },\n        title: { textStyle: 'detail' },\n        closeTrigger: {\n          minWidth: 'control.xs',\n          minHeight: 'control.xs',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n      },\n      sm: {\n        title: { textStyle: 'detail' },\n        closeTrigger: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      md: {},\n      lg: {\n        root: { '--snackbar-row': 'token(sizes.control.md)', paddingBlock: 'inset.overlay' },\n        title: { textStyle: 'body' },\n        closeTrigger: { minWidth: 'control.md', minHeight: 'control.md' },\n      },\n      xl: {\n        root: { '--snackbar-row': 'token(sizes.control.lg)', paddingBlock: 'inset.surface' },\n        title: { textStyle: 'subtitle' },\n        closeTrigger: {\n          minWidth: 'control.lg',\n          minHeight: 'control.lg',\n          '& svg': { width: 'icon.md', height: 'icon.md' },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerRootProps } from "./spinner.mjs";
+export { Spinner, type SpinnerRootProps };

package/dist/components/spinner/index.mjs

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

package/dist/components/spinner/spinner.anatomy.mjs

@@ -0,0 +1,8 @@
+import { createAnatomy } from "@zag-js/anatomy";
+//#region src/components/spinner/spinner.anatomy.ts
+const anatomy = createAnatomy("spinner").parts("root", "indicator", "label");
+const parts = anatomy.build();
+//#endregion
+export { anatomy, parts };
+
+//# sourceMappingURL=spinner.anatomy.mjs.map

package/dist/components/spinner/spinner.anatomy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.anatomy.mjs","names":[],"sources":["../../../src/components/spinner/spinner.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('spinner').parts('root', 'indicator', 'label')\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,SAAS,CAAC,CAAC,MAAM,QAAQ,aAAa,OAAO;AAElF,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/spinner/spinner.connect.mjs

@@ -0,0 +1,27 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./spinner.anatomy.mjs";
+//#region src/components/spinner/spinner.connect.ts
+var spinner_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = ["id"];
+function connect() {
+	return {
+		getRootProps: () => ({
+			...parts.root.attrs,
+			role: "status"
+		}),
+		getIndicatorProps: () => ({
+			...parts.indicator.attrs,
+			"aria-hidden": true
+		}),
+		getLabelProps: () => ({ ...parts.label.attrs })
+	};
+}
+//#endregion
+export { anatomy, connect, props, spinner_connect_exports };
+
+//# sourceMappingURL=spinner.connect.mjs.map

package/dist/components/spinner/spinner.connect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.connect.mjs","names":[],"sources":["../../../src/components/spinner/spinner.connect.ts"],"sourcesContent":["import { parts } from '#/components/spinner/spinner.anatomy.ts'\n\nexport { anatomy } from '#/components/spinner/spinner.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = ['id']\n\nexport interface SpinnerApi {\n  getRootProps: () => Record<string, unknown>\n  getIndicatorProps: () => Record<string, unknown>\n  getLabelProps: () => Record<string, unknown>\n}\n\nexport function connect(): SpinnerApi {\n  return {\n    getRootProps: () => ({ ...parts.root.attrs, role: 'status' }),\n    getIndicatorProps: () => ({ ...parts.indicator.attrs, 'aria-hidden': true }),\n    getLabelProps: () => ({ ...parts.label.attrs }),\n  }\n}\n"],"mappings":";;;;;;;;;AAMA,MAAa,QAA2B,CAAC,IAAI;AAQ7C,SAAgB,UAAsB;CACpC,OAAO;EACL,qBAAqB;GAAE,GAAG,MAAM,KAAK;GAAO,MAAM;EAAS;EAC3D,0BAA0B;GAAE,GAAG,MAAM,UAAU;GAAO,eAAe;EAAK;EAC1E,sBAAsB,EAAE,GAAG,MAAM,MAAM,MAAM;CAC/C;AACF"}

package/dist/components/spinner/spinner.d.mts

@@ -0,0 +1,10 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/spinner/spinner.d.ts
+export interface SpinnerRootProps {
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+}
+export declare const Spinner: SynapseComponent<"indicator" | "label" | "root", "root", SpinnerRootProps, never>;
+//#endregion
+//# sourceMappingURL=spinner.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.mts","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"mappings":";;;iBAUiB;;EAEf,OAAO;;qBAQI,SAAO,yDAAA"}

package/dist/components/spinner/spinner.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { spinner_connect_exports } from "./spinner.connect.mjs";
+import { spinnerRecipe } from "./spinner.recipe.mjs";
+import { createElement } from "react";
+//#region src/components/spinner/spinner.tsx
+const defaultParts = (_api, translate) => [createElement(Spinner.Indicator, { key: "indicator" }), createElement(Spinner.Label, { key: "label" }, translate("spinner.label.text"))];
+const Spinner = defineComponent()({
+	name: "Spinner",
+	module: spinner_connect_exports,
+	rootPart: "root",
+	rootElement: "span",
+	elements: {
+		indicator: "span",
+		label: "span"
+	},
+	defaultContent: { root: defaultParts },
+	variantProps: ["size"],
+	slots: (props) => spinnerRecipe({ size: resolveSize(props.size, "Spinner") })
+});
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.mjs.map

package/dist/components/spinner/spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.mjs","names":["spinner"],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type ReactNode } from 'react'\n\nimport * as spinner from '#/components/spinner/spinner.connect.ts'\nimport { spinnerRecipe } from '#/components/spinner/spinner.recipe.ts'\nimport type { Translator } from '#/provider/translations.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface SpinnerRootProps {\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n}\n\nconst defaultParts = (_api: spinner.SpinnerApi, translate: Translator): ReactNode => [\n  createElement(Spinner.Indicator, { key: 'indicator' }),\n  createElement(Spinner.Label, { key: 'label' }, translate('spinner.label.text')),\n]\n\nexport const Spinner = defineComponent<SpinnerRootProps>()({\n  name: 'Spinner',\n  module: spinner,\n  rootPart: 'root',\n  rootElement: 'span',\n  elements: { indicator: 'span', label: 'span' },\n  defaultContent: { root: defaultParts },\n  variantProps: ['size'],\n  slots: (props: SpinnerRootProps) => spinnerRecipe({ size: resolveSize(props.size, 'Spinner') }),\n})\n"],"mappings":";;;;;;;AAeA,MAAM,gBAAgB,MAA0B,cAAqC,CACnF,cAAc,QAAQ,WAAW,EAAE,KAAK,YAAY,CAAC,GACrD,cAAc,QAAQ,OAAO,EAAE,KAAK,QAAQ,GAAG,UAAU,oBAAoB,CAAC,CAChF;AAEA,MAAa,UAAU,gBAAkC,CAAC,CAAC;CACzD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EAAE,WAAW;EAAQ,OAAO;CAAO;CAC7C,gBAAgB,EAAE,MAAM,aAAa;CACrC,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA4B,cAAc,EAAE,MAAM,YAAY,MAAM,MAAM,SAAS,EAAE,CAAC;AAChG,CAAC"}

package/dist/components/spinner/spinner.recipe.mjs

@@ -0,0 +1,70 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/spinner/spinner.recipe.ts
+const spinnerRecipe = sva({
+	slots: [
+		"root",
+		"indicator",
+		"label"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
+		},
+		indicator: {
+			display: "block",
+			flexShrink: 0,
+			rounded: "full",
+			borderStyle: "solid",
+			borderColor: "primary.default",
+			borderBlockStartColor: "surface.transparent",
+			"--spinner-turn": "calc(token(durations.expand) * 3)",
+			animationName: "progressSpin",
+			animationDuration: "var(--spinner-turn)",
+			animationIterationCount: "infinite",
+			_motionReduce: {
+				animationName: "pulse",
+				animationDirection: "alternate"
+			},
+			_highContrast: {
+				borderColor: "system.canvasText",
+				borderBlockStartColor: "surface.transparent"
+			}
+		},
+		label: { srOnly: true }
+	},
+	variants: { size: {
+		xs: { indicator: {
+			width: "icon.xs",
+			height: "icon.xs",
+			borderWidth: "hairline"
+		} },
+		sm: { indicator: {
+			width: "icon.sm",
+			height: "icon.sm",
+			borderWidth: "hairline"
+		} },
+		md: { indicator: {
+			width: "icon.md",
+			height: "icon.md",
+			borderWidth: "emphasis"
+		} },
+		lg: { indicator: {
+			width: "icon.lg",
+			height: "icon.lg",
+			borderWidth: "emphasis"
+		} },
+		xl: { indicator: {
+			width: "icon.xl",
+			height: "icon.xl",
+			borderWidth: "emphasis"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { spinnerRecipe };
+
+//# sourceMappingURL=spinner.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.recipe.mjs","names":[],"sources":["../../../src/components/spinner/spinner.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const spinnerRecipe = sva({\n  slots: ['root', 'indicator', 'label'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    },\n    indicator: {\n      display: 'block',\n      flexShrink: 0,\n      rounded: 'full',\n      borderStyle: 'solid',\n      borderColor: 'primary.default',\n      borderBlockStartColor: 'surface.transparent',\n      '--spinner-turn': 'calc(token(durations.expand) * 3)',\n      animationName: 'progressSpin',\n      animationDuration: 'var(--spinner-turn)',\n      animationIterationCount: 'infinite',\n      _motionReduce: {\n        animationName: 'pulse',\n        animationDirection: 'alternate',\n      },\n      _highContrast: {\n        borderColor: 'system.canvasText',\n        borderBlockStartColor: 'surface.transparent',\n      },\n    },\n    label: {\n      srOnly: true,\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        indicator: { width: 'icon.xs', height: 'icon.xs', borderWidth: 'hairline' },\n      },\n      sm: {\n        indicator: { width: 'icon.sm', height: 'icon.sm', borderWidth: 'hairline' },\n      },\n      md: {\n        indicator: { width: 'icon.md', height: 'icon.md', borderWidth: 'emphasis' },\n      },\n      lg: {\n        indicator: { width: 'icon.lg', height: 'icon.lg', borderWidth: 'emphasis' },\n      },\n      xl: {\n        indicator: { width: 'icon.xl', height: 'icon.xl', borderWidth: 'emphasis' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,gBAAgB,IAAI;CAC/B,OAAO;EAAC;EAAQ;EAAa;CAAO;CACpC,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,SAAS;GACT,aAAa;GACb,aAAa;GACb,uBAAuB;GACvB,kBAAkB;GAClB,eAAe;GACf,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;IACb,eAAe;IACf,oBAAoB;GACtB;GACA,eAAe;IACb,aAAa;IACb,uBAAuB;GACzB;EACF;EACA,OAAO,EACL,QAAQ,KACV;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,WAAW;GAAE,OAAO;GAAW,QAAQ;GAAW,aAAa;EAAW,EAC5E;EACA,IAAI,EACF,WAAW;GAAE,OAAO;GAAW,QAAQ;GAAW,aAAa;EAAW,EAC5E;EACA,IAAI,EACF,WAAW;GAAE,OAAO;GAAW,QAAQ;GAAW,aAAa;EAAW,EAC5E;EACA,IAAI,EACF,WAAW;GAAE,OAAO;GAAW,QAAQ;GAAW,aAAa;EAAW,EAC5E;EACA,IAAI,EACF,WAAW;GAAE,OAAO;GAAW,QAAQ;GAAW,aAAa;EAAW,EAC5E;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Splitter, SplitterPanel, SplitterPanelResizeBehavior, SplitterPanelSize, SplitterPanelStateDetails, SplitterResizeDetails, SplitterRootProps } from "./splitter.mjs";
+export { Splitter, type SplitterPanel, type SplitterPanelResizeBehavior, type SplitterPanelSize, type SplitterPanelStateDetails, type SplitterResizeDetails, type SplitterRootProps };

package/dist/components/splitter/index.mjs

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

package/dist/components/splitter/splitter.d.mts

@@ -0,0 +1,57 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/splitter/splitter.d.ts
+export type SplitterPanelSize = number | string;
+export type SplitterPanelResizeBehavior = 'fixed' | 'flex';
+export interface SplitterPanel {
+  id: string;
+  order?: number;
+  minSize?: SplitterPanelSize;
+  maxSize?: SplitterPanelSize;
+  collapsible?: boolean;
+  collapsedSize?: SplitterPanelSize;
+  resizeBehavior?: SplitterPanelResizeBehavior;
+}
+export interface SplitterResizeDetails {
+  readonly size: readonly number[];
+}
+export interface SplitterPanelStateDetails {
+  readonly panelId: string;
+}
+export interface SplitterRootProps {
+  /**
+   * 창들과 그 제약입니다.
+   *
+   * 필수입니다. 패널이 없는 스플리터는 나눌 것이 없고, machine은 패널 수와 리사이즈 trigger id, 모든
+   * `aria-controls`를 이 목록에서 도출합니다.
+   */
+  panels: readonly SplitterPanel[];
+  /**
+   * 제어되는 패널 크기이며, `panels`와 같은 순서입니다. Synapse에서 `size`는 공유 크기 척도를
+   * 뜻하므로, machine의 `size`를 무엇의 크기인지 드러나는 `panelSizes`라는 이름으로 받습니다.
+   */
+  panelSizes?: readonly SplitterPanelSize[];
+  /** 비제어 모드의 초기 패널 크기. `panelSizes`를 주면 무시됩니다. */
+  defaultPanelSizes?: readonly SplitterPanelSize[];
+  /** 창을 끄는 동안 계속 호출됩니다. */
+  onResize?: (details: SplitterResizeDetails) => void;
+  /** 드래그가 시작될 때 한 번 호출됩니다. */
+  onResizeStart?: () => void;
+  /** 드래그가 끝났을 때 한 번 호출됩니다. */
+  onResizeEnd?: (details: SplitterResizeDetails) => void;
+  /** 접을 수 있는 패널이 접혔을 때 호출됩니다. */
+  onCollapse?: (details: SplitterPanelStateDetails) => void;
+  /** 접혀 있던 패널이 다시 펼쳐졌을 때 호출됩니다. */
+  onExpand?: (details: SplitterPanelStateDetails) => void;
+  /** 창들이 배치되는 축. 기본값은 `horizontal`입니다. */
+  orientation?: Orientation;
+  /** 화살표 키를 한 번 눌렀을 때 창의 크기가 바뀌는 정도(픽셀). */
+  keyboardResizeBy?: number | null;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Splitter: SynapseComponent<"panel" | "resizeTrigger" | "resizeTriggerIndicator" | "root", "root", SplitterRootProps, never>;
+//#endregion
+//# sourceMappingURL=splitter.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.d.mts","names":[],"sources":["../../../src/components/splitter/splitter.tsx"],"mappings":";;;YASY;YAEA;iBAEK;EACf;EACA;EACA,UAAU;EACV,UAAU;EACV;EACA,gBAAgB;EAChB,iBAAiB;;iBAGF;WACN;;iBAGM;WACN;;iBAGM;;;;;;;EAOf,iBAAiB;;;;;EAKjB,sBAAsB;;EAEtB,6BAA6B;;EAE7B,YAAY,SAAS;;EAErB;;EAEA,eAAe,SAAS;;EAExB,cAAc,SAAS;;EAEvB,YAAY,SAAS;;EAErB,cAAc;;EAEd;;EAEA,OAAO;;EAEP;;qBAQW,UAAQ,wFAAA"}

package/dist/components/splitter/splitter.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { splitterRecipe } from "./splitter.recipe.mjs";
+import * as splitter from "@zag-js/splitter";
+//#region src/components/splitter/splitter.tsx
+const toMachineProps = (props) => ({
+	...props.panelSizes === void 0 ? {} : { size: props.panelSizes },
+	...props.defaultPanelSizes === void 0 ? {} : { defaultSize: props.defaultPanelSizes }
+});
+const Splitter = defineComponent()({
+	name: "Splitter",
+	module: splitter,
+	rootPart: "root",
+	elements: { resizeTriggerIndicator: "span" },
+	getterNames: { resizeTriggerIndicator: "getResizeTriggerIndicator" },
+	getterProps: {
+		panel: ["id"],
+		resizeTrigger: ["id", "disabled"],
+		resizeTriggerIndicator: ["id", "disabled"]
+	},
+	amendBehaviorProps: { resizeTrigger: (_behaviorProps, _api, args, translate) => {
+		const [before = "", after = ""] = String(args["id"]).split(":");
+		return { "aria-label": translate("splitter.resizeTrigger.label", {
+			before,
+			after
+		}) };
+	} },
+	variantProps: [
+		"size",
+		"panelSizes",
+		"defaultPanelSizes"
+	],
+	useMachineProps: toMachineProps,
+	slots: (props) => splitterRecipe({ size: resolveSize(props.size, "Splitter") })
+});
+//#endregion
+export { Splitter };
+
+//# sourceMappingURL=splitter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.mjs","names":[],"sources":["../../../src/components/splitter/splitter.tsx"],"sourcesContent":["'use client'\n\nimport * as splitter from '@zag-js/splitter'\n\nimport { splitterRecipe } from '#/components/splitter/splitter.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 type SplitterPanelSize = number | string\n\nexport type SplitterPanelResizeBehavior = 'fixed' | 'flex'\n\nexport interface SplitterPanel {\n  id: string\n  order?: number\n  minSize?: SplitterPanelSize\n  maxSize?: SplitterPanelSize\n  collapsible?: boolean\n  collapsedSize?: SplitterPanelSize\n  resizeBehavior?: SplitterPanelResizeBehavior\n}\n\nexport interface SplitterResizeDetails {\n  readonly size: readonly number[]\n}\n\nexport interface SplitterPanelStateDetails {\n  readonly panelId: string\n}\n\nexport interface SplitterRootProps {\n  /**\n   * 창들과 그 제약입니다.\n   *\n   * 필수입니다. 패널이 없는 스플리터는 나눌 것이 없고, machine은 패널 수와 리사이즈 trigger id, 모든\n   * `aria-controls`를 이 목록에서 도출합니다.\n   */\n  panels: readonly SplitterPanel[]\n  /**\n   * 제어되는 패널 크기이며, `panels`와 같은 순서입니다. Synapse에서 `size`는 공유 크기 척도를\n   * 뜻하므로, machine의 `size`를 무엇의 크기인지 드러나는 `panelSizes`라는 이름으로 받습니다.\n   */\n  panelSizes?: readonly SplitterPanelSize[]\n  /** 비제어 모드의 초기 패널 크기. `panelSizes`를 주면 무시됩니다. */\n  defaultPanelSizes?: readonly SplitterPanelSize[]\n  /** 창을 끄는 동안 계속 호출됩니다. */\n  onResize?: (details: SplitterResizeDetails) => void\n  /** 드래그가 시작될 때 한 번 호출됩니다. */\n  onResizeStart?: () => void\n  /** 드래그가 끝났을 때 한 번 호출됩니다. */\n  onResizeEnd?: (details: SplitterResizeDetails) => void\n  /** 접을 수 있는 패널이 접혔을 때 호출됩니다. */\n  onCollapse?: (details: SplitterPanelStateDetails) => void\n  /** 접혀 있던 패널이 다시 펼쳐졌을 때 호출됩니다. */\n  onExpand?: (details: SplitterPanelStateDetails) => void\n  /** 창들이 배치되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /** 화살표 키를 한 번 눌렀을 때 창의 크기가 바뀌는 정도(픽셀). */\n  keyboardResizeBy?: number | null\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: SplitterRootProps): Record<string, unknown> => ({\n  ...(props.panelSizes === undefined ? {} : { size: props.panelSizes }),\n  ...(props.defaultPanelSizes === undefined ? {} : { defaultSize: props.defaultPanelSizes }),\n})\n\nexport const Splitter = defineComponent<SplitterRootProps>()({\n  name: 'Splitter',\n  module: splitter,\n  rootPart: 'root',\n  elements: { resizeTriggerIndicator: 'span' },\n  getterNames: { resizeTriggerIndicator: 'getResizeTriggerIndicator' },\n  getterProps: {\n    panel: ['id'],\n    resizeTrigger: ['id', 'disabled'],\n    resizeTriggerIndicator: ['id', 'disabled'],\n  },\n  amendBehaviorProps: {\n    resizeTrigger: (_behaviorProps, _api, args, translate) => {\n      const [before = '', after = ''] = String(args['id']).split(':')\n      return { 'aria-label': translate('splitter.resizeTrigger.label', { before, after }) }\n    },\n  },\n  variantProps: ['size', 'panelSizes', 'defaultPanelSizes'],\n  useMachineProps: toMachineProps,\n  slots: (props: SplitterRootProps) =>\n    splitterRecipe({ size: resolveSize(props.size, 'Splitter') }),\n})\n"],"mappings":";;;;;;AAkEA,MAAM,kBAAkB,WAAuD;CAC7E,GAAI,MAAM,eAAe,KAAA,IAAY,CAAC,IAAI,EAAE,MAAM,MAAM,WAAW;CACnE,GAAI,MAAM,sBAAsB,KAAA,IAAY,CAAC,IAAI,EAAE,aAAa,MAAM,kBAAkB;AAC1F;AAEA,MAAa,WAAW,gBAAmC,CAAC,CAAC;CAC3D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,wBAAwB,OAAO;CAC3C,aAAa,EAAE,wBAAwB,4BAA4B;CACnE,aAAa;EACX,OAAO,CAAC,IAAI;EACZ,eAAe,CAAC,MAAM,UAAU;EAChC,wBAAwB,CAAC,MAAM,UAAU;CAC3C;CACA,oBAAoB,EAClB,gBAAgB,gBAAgB,MAAM,MAAM,cAAc;EACxD,MAAM,CAAC,SAAS,IAAI,QAAQ,MAAM,OAAO,KAAK,KAAK,CAAC,CAAC,MAAM,GAAG;EAC9D,OAAO,EAAE,cAAc,UAAU,gCAAgC;GAAE;GAAQ;EAAM,CAAC,EAAE;CACtF,EACF;CACA,cAAc;EAAC;EAAQ;EAAc;CAAmB;CACxD,iBAAiB;CACjB,QAAQ,UACN,eAAe,EAAE,MAAM,YAAY,MAAM,MAAM,UAAU,EAAE,CAAC;AAChE,CAAC"}