@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/switch/switch.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { switchRecipe } from "./switch.recipe.mjs";
+import { createElement } from "react";
+import * as switchMachine from "@zag-js/switch";
+//#region src/components/switch/switch.tsx
+const toMachineProps = (props) => ({
+	value: props.formValue,
+	...props.value === void 0 ? {} : { checked: props.value },
+	...props.defaultValue === void 0 ? {} : { defaultChecked: props.defaultValue },
+	...props.onValueChange === void 0 ? {} : { onCheckedChange: (details) => props.onValueChange?.({ value: details.checked }) }
+});
+const Switch = defineComponent()({
+	name: "Switch",
+	module: switchMachine,
+	rootPart: "root",
+	elements: {
+		label: "span",
+		control: "span",
+		thumb: "span"
+	},
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"formValue",
+		"size"
+	],
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			role: "switch",
+			"data-synapse-form-field": ""
+		})
+	}],
+	field: {
+		describe: [],
+		describeOwned: ["hiddenInput"],
+		labelable: false
+	},
+	useMachineProps: toMachineProps,
+	slots: (props) => switchRecipe({ size: resolveSize(props.size, "Switch") })
+});
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.mjs.map

package/dist/components/switch/switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as switchMachine from '@zag-js/switch'\nimport { createElement } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { switchRecipe } from '#/components/switch/switch.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface SwitchRootProps {\n  /** 제어되는 켜짐/꺼짐 상태. */\n  value?: boolean\n  /** 비제어 모드의 초기 상태. `value`를 주면 무시됩니다. */\n  defaultValue?: boolean\n  /** 제어 여부와 무관하게 상태가 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<boolean>) => void\n  /**\n   * 스위치가 켜져 있을 때 `name` 아래로 제출되는 문자열입니다. 네이티브 체크박스가 그러하듯\n   * 기본값은 `\"on\"`입니다. 상태를 담는 `value`와는 다른 것입니다.\n   */\n  formValue?: string\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 Switch를 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 Switch는 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 Switch는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 스위치가 켜져 있어야 합니다. */\n  required?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: SwitchRootProps): Record<string, unknown> => ({\n  value: props.formValue,\n  ...(props.value === undefined ? {} : { checked: props.value }),\n  ...(props.defaultValue === undefined ? {} : { defaultChecked: props.defaultValue }),\n  ...(props.onValueChange === undefined\n    ? {}\n    : {\n        onCheckedChange: (details: { checked: boolean }) =>\n          props.onValueChange?.({ value: details.checked }),\n      }),\n})\n\nexport const Switch = defineComponent<SwitchRootProps>()({\n  name: 'Switch',\n  module: switchMachine,\n  rootPart: 'root',\n  elements: {\n    label: 'span',\n    control: 'span',\n    thumb: 'span',\n  },\n  variantProps: ['value', 'defaultValue', 'onValueChange', 'formValue', 'size'],\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) =>\n        createElement('input', { ...props, role: 'switch', 'data-synapse-form-field': '' }),\n    },\n  ],\n  field: { describe: [], describeOwned: ['hiddenInput'], labelable: false },\n  useMachineProps: toMachineProps,\n  slots: (props: SwitchRootProps) => switchRecipe({ size: resolveSize(props.size, 'Switch') }),\n})\n"],"mappings":";;;;;;;AAwCA,MAAM,kBAAkB,WAAqD;CAC3E,OAAO,MAAM;CACb,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,EACE,kBAAkB,YAChB,MAAM,gBAAgB,EAAE,OAAO,QAAQ,QAAQ,CAAC,EACpD;AACN;AAEA,MAAa,SAAS,gBAAiC,CAAC,CAAC;CACvD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,OAAO;EACP,SAAS;EACT,OAAO;CACT;CACA,cAAc;EAAC;EAAS;EAAgB;EAAiB;EAAa;CAAM;CAC5E,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UACP,cAAc,SAAS;GAAE,GAAG;GAAO,MAAM;GAAU,2BAA2B;EAAG,CAAC;CACtF,CACF;CACA,OAAO;EAAE,UAAU,CAAC;EAAG,eAAe,CAAC,aAAa;EAAG,WAAW;CAAM;CACxE,iBAAiB;CACjB,QAAQ,UAA2B,aAAa,EAAE,MAAM,YAAY,MAAM,MAAM,QAAQ,EAAE,CAAC;AAC7F,CAAC"}

package/dist/components/switch/switch.recipe.mjs

@@ -0,0 +1,171 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/switch/switch.recipe.ts
+const switchRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"control",
+		"thumb"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			color: "foreground.default",
+			cursor: "pointer",
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			}
+		},
+		label: { userSelect: "none" },
+		control: {
+			display: "inline-flex",
+			alignItems: "center",
+			flexShrink: 0,
+			rounded: "pill",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			bg: "border.strong",
+			paddingInline: "var(--switch-inset)",
+			"--switch-inset": "calc((var(--switch-height) - var(--switch-thumb)) / 2 - token(borderWidths.hairline))",
+			"--switch-travel": "calc(var(--switch-width) - var(--switch-thumb) - 2 * var(--switch-inset) - 2 * token(borderWidths.hairline))",
+			width: "var(--switch-width)",
+			height: "var(--switch-height)",
+			outlineColor: "border.focus",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&:is(:hover, [data-hover]):not([data-disabled], [data-readonly], [data-state=checked])": { bg: "foreground.subtle" },
+			"&:is(:hover, [data-hover])[data-state=checked]:not([data-disabled], [data-readonly])": { bg: "primary.hover" },
+			_checked: {
+				bg: "primary.default",
+				_highContrast: {
+					bg: "system.highlight",
+					borderColor: "system.highlight"
+				},
+				_disabled: { bg: "primary.disabled" }
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_invalid: {
+				borderColor: "error.default",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "error.default",
+				_focusVisible: {
+					outlineWidth: "focus",
+					outlineOffset: "inset.compact",
+					outlineColor: "border.focus"
+				}
+			},
+			_readOnly: {
+				bg: "background.subtle",
+				borderStyle: "dashed",
+				borderColor: "border.strong",
+				_checked: {
+					bg: "primary.subtle",
+					borderColor: "primary.default",
+					_highContrast: { borderColor: "system.highlight" }
+				}
+			},
+			_disabled: {
+				bg: "background.muted",
+				_highContrast: { borderColor: "system.grayText" }
+			}
+		},
+		thumb: {
+			flexShrink: 0,
+			width: "var(--switch-thumb)",
+			height: "var(--switch-thumb)",
+			rounded: "pill",
+			bg: "surface.raised",
+			boxShadow: "raised",
+			pointerEvents: "none",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_highContrast: { bg: "system.canvasText" },
+			_checked: {
+				transform: "translateX(var(--switch-travel))",
+				_highContrast: { bg: "system.highlightText" }
+			},
+			_rtl: { _checked: { transform: "translateX(calc(var(--switch-travel) * -1))" } },
+			_readOnly: {
+				bg: "border.strong",
+				boxShadow: "flat",
+				_highContrast: { bg: "system.canvasText" },
+				_checked: {
+					bg: "primary.default",
+					_highContrast: { bg: "system.highlight" }
+				}
+			},
+			_disabled: {
+				boxShadow: "flat",
+				_highContrast: { bg: "system.grayText" }
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			control: {
+				"--switch-width": "{sizes.icon.md}",
+				"--switch-height": "{sizes.icon.xs}",
+				"--switch-thumb": "calc({sizes.icon.xs} - {spacing.inset.compact})"
+			}
+		},
+		sm: {
+			root: {
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			control: {
+				"--switch-width": "{sizes.control.sm}",
+				"--switch-height": "{sizes.icon.sm}",
+				"--switch-thumb": "calc({sizes.icon.sm} - {spacing.inset.compact})"
+			}
+		},
+		md: {
+			root: { textStyle: "body" },
+			control: {
+				"--switch-width": "{sizes.control.md}",
+				"--switch-height": "{sizes.icon.md}",
+				"--switch-thumb": "calc({sizes.icon.md} - {spacing.inset.compact})"
+			}
+		},
+		lg: {
+			root: { textStyle: "body" },
+			control: {
+				"--switch-width": "{sizes.control.lg}",
+				"--switch-height": "{sizes.icon.lg}",
+				"--switch-thumb": "calc({sizes.icon.lg} - {spacing.inset.compact})"
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			control: {
+				"--switch-width": "{sizes.control.xl}",
+				"--switch-height": "{sizes.icon.xl}",
+				"--switch-thumb": "calc({sizes.icon.xl} - {spacing.inset.compact})"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { switchRecipe };
+
+//# sourceMappingURL=switch.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.recipe.mjs","names":[],"sources":["../../../src/components/switch/switch.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const switchRecipe = sva({\n  slots: ['root', 'label', 'control', 'thumb'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      color: 'foreground.default',\n      cursor: 'pointer',\n      _readOnly: { cursor: 'default' },\n      _disabled: { color: 'foreground.disabled', cursor: 'not-allowed' },\n    },\n    label: {\n      userSelect: 'none',\n    },\n    control: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      rounded: 'pill',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      bg: 'border.strong',\n      paddingInline: 'var(--switch-inset)',\n      '--switch-inset':\n        'calc((var(--switch-height) - var(--switch-thumb)) / 2 - token(borderWidths.hairline))',\n      '--switch-travel':\n        'calc(var(--switch-width) - var(--switch-thumb) - 2 * var(--switch-inset) - 2 * token(borderWidths.hairline))',\n      width: 'var(--switch-width)',\n      height: 'var(--switch-height)',\n      outlineColor: 'border.focus',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&:is(:hover, [data-hover]):not([data-disabled], [data-readonly], [data-state=checked])': {\n        bg: 'foreground.subtle',\n      },\n      '&:is(:hover, [data-hover])[data-state=checked]:not([data-disabled], [data-readonly])': {\n        bg: 'primary.hover',\n      },\n      _checked: {\n        bg: 'primary.default',\n        _highContrast: { bg: 'system.highlight', borderColor: 'system.highlight' },\n        _disabled: { bg: 'primary.disabled' },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _invalid: {\n        borderColor: 'error.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'error.default',\n        _focusVisible: {\n          outlineWidth: 'focus',\n          outlineOffset: 'inset.compact',\n          outlineColor: 'border.focus',\n        },\n      },\n      _readOnly: {\n        bg: 'background.subtle',\n        borderStyle: 'dashed',\n        borderColor: 'border.strong',\n        _checked: {\n          bg: 'primary.subtle',\n          borderColor: 'primary.default',\n          _highContrast: { borderColor: 'system.highlight' },\n        },\n      },\n      _disabled: {\n        bg: 'background.muted',\n        _highContrast: { borderColor: 'system.grayText' },\n      },\n    },\n    thumb: {\n      flexShrink: 0,\n      width: 'var(--switch-thumb)',\n      height: 'var(--switch-thumb)',\n      rounded: 'pill',\n      bg: 'surface.raised',\n      boxShadow: 'raised',\n      pointerEvents: 'none',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _highContrast: { bg: 'system.canvasText' },\n      _checked: {\n        transform: 'translateX(var(--switch-travel))',\n        _highContrast: { bg: 'system.highlightText' },\n      },\n      _rtl: { _checked: { transform: 'translateX(calc(var(--switch-travel) * -1))' } },\n      _readOnly: {\n        bg: 'border.strong',\n        boxShadow: 'flat',\n        _highContrast: { bg: 'system.canvasText' },\n        _checked: { bg: 'primary.default', _highContrast: { bg: 'system.highlight' } },\n      },\n      _disabled: { boxShadow: 'flat', _highContrast: { bg: 'system.grayText' } },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { gap: 'gap.inline', textStyle: 'caption' },\n        control: {\n          '--switch-width': '{sizes.icon.md}',\n          '--switch-height': '{sizes.icon.xs}',\n          '--switch-thumb': 'calc({sizes.icon.xs} - {spacing.inset.compact})',\n        },\n      },\n      sm: {\n        root: { gap: 'gap.inline', textStyle: 'caption' },\n        control: {\n          '--switch-width': '{sizes.control.sm}',\n          '--switch-height': '{sizes.icon.sm}',\n          '--switch-thumb': 'calc({sizes.icon.sm} - {spacing.inset.compact})',\n        },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        control: {\n          '--switch-width': '{sizes.control.md}',\n          '--switch-height': '{sizes.icon.md}',\n          '--switch-thumb': 'calc({sizes.icon.md} - {spacing.inset.compact})',\n        },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        control: {\n          '--switch-width': '{sizes.control.lg}',\n          '--switch-height': '{sizes.icon.lg}',\n          '--switch-thumb': 'calc({sizes.icon.lg} - {spacing.inset.compact})',\n        },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        control: {\n          '--switch-width': '{sizes.control.xl}',\n          '--switch-height': '{sizes.icon.xl}',\n          '--switch-thumb': 'calc({sizes.icon.xl} - {spacing.inset.compact})',\n        },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,eAAe,IAAI;CAC9B,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;GACX,OAAO;GACP,QAAQ;GACR,WAAW,EAAE,QAAQ,UAAU;GAC/B,WAAW;IAAE,OAAO;IAAuB,QAAQ;GAAc;EACnE;EACA,OAAO,EACL,YAAY,OACd;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,eAAe;GACf,kBACE;GACF,mBACE;GACF,OAAO;GACP,QAAQ;GACR,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,0FAA0F,EACxF,IAAI,oBACN;GACA,wFAAwF,EACtF,IAAI,gBACN;GACA,UAAU;IACR,IAAI;IACJ,eAAe;KAAE,IAAI;KAAoB,aAAa;IAAmB;IACzE,WAAW,EAAE,IAAI,mBAAmB;GACtC;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,UAAU;IACR,aAAa;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;IACd,eAAe;KACb,cAAc;KACd,eAAe;KACf,cAAc;IAChB;GACF;GACA,WAAW;IACT,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;KACR,IAAI;KACJ,aAAa;KACb,eAAe,EAAE,aAAa,mBAAmB;IACnD;GACF;GACA,WAAW;IACT,IAAI;IACJ,eAAe,EAAE,aAAa,kBAAkB;GAClD;EACF;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,IAAI;GACJ,WAAW;GACX,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe,EAAE,IAAI,oBAAoB;GACzC,UAAU;IACR,WAAW;IACX,eAAe,EAAE,IAAI,uBAAuB;GAC9C;GACA,MAAM,EAAE,UAAU,EAAE,WAAW,8CAA8C,EAAE;GAC/E,WAAW;IACT,IAAI;IACJ,WAAW;IACX,eAAe,EAAE,IAAI,oBAAoB;IACzC,UAAU;KAAE,IAAI;KAAmB,eAAe,EAAE,IAAI,mBAAmB;IAAE;GAC/E;GACA,WAAW;IAAE,WAAW;IAAQ,eAAe,EAAE,IAAI,kBAAkB;GAAE;EAC3E;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IAAE,KAAK;IAAc,WAAW;GAAU;GAChD,SAAS;IACP,kBAAkB;IAClB,mBAAmB;IACnB,kBAAkB;GACpB;EACF;EACA,IAAI;GACF,MAAM;IAAE,KAAK;IAAc,WAAW;GAAU;GAChD,SAAS;IACP,kBAAkB;IAClB,mBAAmB;IACnB,kBAAkB;GACpB;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,SAAS;IACP,kBAAkB;IAClB,mBAAmB;IACnB,kBAAkB;GACpB;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,SAAS;IACP,kBAAkB;IAClB,mBAAmB;IACnB,kBAAkB;GACpB;EACF;EACA,IAAI;GACF,MAAM,EAAE,WAAW,WAAW;GAC9B,SAAS;IACP,kBAAkB;IAClB,mBAAmB;IACnB,kBAAkB;GACpB;EACF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Table, TableRootProps } from "./table.mjs";
+export { Table, type TableRootProps };

package/dist/components/table/index.mjs

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

package/dist/components/table/table.anatomy.mjs

@@ -0,0 +1,8 @@
+import { createAnatomy } from "@zag-js/anatomy";
+//#region src/components/table/table.anatomy.ts
+const anatomy = createAnatomy("table").parts("root", "table", "caption", "header", "body", "footer", "row", "columnHeader", "rowHeader", "cell");
+const parts = anatomy.build();
+//#endregion
+export { anatomy, parts };
+
+//# sourceMappingURL=table.anatomy.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.anatomy.mjs","names":[],"sources":["../../../src/components/table/table.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('table').parts(\n  'root',\n  'table',\n  'caption',\n  'header',\n  'body',\n  'footer',\n  'row',\n  'columnHeader',\n  'rowHeader',\n  'cell',\n)\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,OAAO,CAAC,CAAC,MAC5C,QACA,SACA,WACA,UACA,QACA,UACA,OACA,gBACA,aACA,MACF;AAEA,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/table/table.connect.mjs

@@ -0,0 +1,50 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./table.anatomy.mjs";
+//#region src/components/table/table.connect.ts
+var table_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = ["viewportRef"];
+function connect(machineProps) {
+	const viewportRef = machineProps["viewportRef"];
+	return {
+		getRootProps: () => ({
+			...parts.root.attrs,
+			...typeof viewportRef === "function" ? { ref: viewportRef } : {}
+		}),
+		getTableProps: () => ({ ...parts.table.attrs }),
+		getCaptionProps: () => ({ ...parts.caption.attrs }),
+		getHeaderProps: () => ({ ...parts.header.attrs }),
+		getBodyProps: () => ({ ...parts.body.attrs }),
+		getFooterProps: () => ({ ...parts.footer.attrs }),
+		getRowProps: (params) => ({
+			...parts.row.attrs,
+			...params?.selected === true ? { "data-selected": "" } : {},
+			...params?.current === true ? {
+				"aria-current": "true",
+				"data-current": ""
+			} : {}
+		}),
+		getColumnHeaderProps: () => ({
+			...parts.columnHeader.attrs,
+			scope: "col"
+		}),
+		getRowHeaderProps: () => ({
+			...parts.rowHeader.attrs,
+			scope: "row"
+		}),
+		getCellProps: () => ({ ...parts.cell.attrs }),
+		getCurrentFrameProps: () => ({
+			"data-scope": "table",
+			"data-part": "current-frame",
+			"aria-hidden": true
+		})
+	};
+}
+//#endregion
+export { anatomy, connect, props, table_connect_exports };
+
+//# sourceMappingURL=table.connect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.connect.mjs","names":[],"sources":["../../../src/components/table/table.connect.ts"],"sourcesContent":["import { parts } from '#/components/table/table.anatomy.ts'\n\nexport { anatomy } from '#/components/table/table.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = ['viewportRef']\n\nexport interface TableRowParams {\n  selected?: boolean\n  current?: boolean\n}\n\nexport interface TableApi {\n  getRootProps: () => Record<string, unknown>\n  getTableProps: () => Record<string, unknown>\n  getCaptionProps: () => Record<string, unknown>\n  getHeaderProps: () => Record<string, unknown>\n  getBodyProps: () => Record<string, unknown>\n  getFooterProps: () => Record<string, unknown>\n  getRowProps: (params?: TableRowParams) => Record<string, unknown>\n  getColumnHeaderProps: () => Record<string, unknown>\n  getRowHeaderProps: () => Record<string, unknown>\n  getCellProps: () => Record<string, unknown>\n  getCurrentFrameProps: () => Record<string, unknown>\n}\n\nexport function connect(machineProps: Readonly<Record<string, unknown>>): TableApi {\n  const viewportRef = machineProps['viewportRef']\n  return {\n    getRootProps: () => ({\n      ...parts.root.attrs,\n      ...(typeof viewportRef === 'function' ? { ref: viewportRef } : {}),\n    }),\n    getTableProps: () => ({ ...parts.table.attrs }),\n    getCaptionProps: () => ({ ...parts.caption.attrs }),\n    getHeaderProps: () => ({ ...parts.header.attrs }),\n    getBodyProps: () => ({ ...parts.body.attrs }),\n    getFooterProps: () => ({ ...parts.footer.attrs }),\n    getRowProps: (params) => ({\n      ...parts.row.attrs,\n      ...(params?.selected === true ? { 'data-selected': '' } : {}),\n      ...(params?.current === true ? { 'aria-current': 'true', 'data-current': '' } : {}),\n    }),\n    getColumnHeaderProps: () => ({ ...parts.columnHeader.attrs, scope: 'col' }),\n    getRowHeaderProps: () => ({ ...parts.rowHeader.attrs, scope: 'row' }),\n    getCellProps: () => ({ ...parts.cell.attrs }),\n    getCurrentFrameProps: () => ({\n      'data-scope': 'table',\n      'data-part': 'current-frame',\n      'aria-hidden': true,\n    }),\n  }\n}\n"],"mappings":";;;;;;;;;AAMA,MAAa,QAA2B,CAAC,aAAa;AAqBtD,SAAgB,QAAQ,cAA2D;CACjF,MAAM,cAAc,aAAa;CACjC,OAAO;EACL,qBAAqB;GACnB,GAAG,MAAM,KAAK;GACd,GAAI,OAAO,gBAAgB,aAAa,EAAE,KAAK,YAAY,IAAI,CAAC;EAClE;EACA,sBAAsB,EAAE,GAAG,MAAM,MAAM,MAAM;EAC7C,wBAAwB,EAAE,GAAG,MAAM,QAAQ,MAAM;EACjD,uBAAuB,EAAE,GAAG,MAAM,OAAO,MAAM;EAC/C,qBAAqB,EAAE,GAAG,MAAM,KAAK,MAAM;EAC3C,uBAAuB,EAAE,GAAG,MAAM,OAAO,MAAM;EAC/C,cAAc,YAAY;GACxB,GAAG,MAAM,IAAI;GACb,GAAI,QAAQ,aAAa,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;GAC3D,GAAI,QAAQ,YAAY,OAAO;IAAE,gBAAgB;IAAQ,gBAAgB;GAAG,IAAI,CAAC;EACnF;EACA,6BAA6B;GAAE,GAAG,MAAM,aAAa;GAAO,OAAO;EAAM;EACzE,0BAA0B;GAAE,GAAG,MAAM,UAAU;GAAO,OAAO;EAAM;EACnE,qBAAqB,EAAE,GAAG,MAAM,KAAK,MAAM;EAC3C,6BAA6B;GAC3B,cAAc;GACd,aAAa;GACb,eAAe;EACjB;CACF;AACF"}

package/dist/components/table/table.d.mts

@@ -0,0 +1,10 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/table/table.d.ts
+export interface TableRootProps {
+  /** 셀의 여백과 글자 크기. 하나뿐인 공용 척도를 따르며 기본값은 `md`입니다. */
+  size?: Size;
+}
+export declare const Table: SynapseComponent<"body" | "caption" | "cell" | "columnHeader" | "footer" | "header" | "root" | "row" | "rowHeader" | "table", "root", TableRootProps, never>;
+//#endregion
+//# sourceMappingURL=table.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.mts","names":[],"sources":["../../../src/components/table/table.tsx"],"mappings":";;;iBAciB;;EAEf,OAAO;;qBAuDI,OAAK,sIAAA"}

package/dist/components/table/table.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { table_connect_exports } from "./table.connect.mjs";
+import { tableCurrentAnchorClass, tableCurrentOutlineClass, tableCurrentTrackClass, tableRecipe } from "./table.recipe.mjs";
+import { createElement, useCallback } from "react";
+//#region src/components/table/table.tsx
+const positionCurrent = (root) => {
+	const track = root.querySelector(":scope > [data-part=\"current-frame\"]");
+	const outline = track?.firstElementChild?.firstElementChild;
+	const grid = root.querySelector(":scope > table");
+	if (!(track instanceof HTMLElement) || !(outline instanceof HTMLElement)) return;
+	if (grid instanceof HTMLElement) track.style.width = `${String(grid.offsetWidth)}px`;
+	const row = root.querySelector(":scope > table > tbody > tr[data-current]");
+	if (!(row instanceof HTMLElement)) {
+		outline.hidden = true;
+		return;
+	}
+	const first = row.firstElementChild;
+	const overlap = first === null ? 0 : Number.parseFloat(getComputedStyle(first).borderBottomWidth) || 0;
+	const rowBox = row.getBoundingClientRect();
+	const trackBox = track.getBoundingClientRect();
+	outline.hidden = false;
+	outline.style.top = `${String(rowBox.top - trackBox.top - overlap)}px`;
+	outline.style.height = `${String(rowBox.height + overlap)}px`;
+	outline.style.width = `${String(root.clientWidth)}px`;
+};
+const followCurrent = (root) => {
+	const update = () => {
+		positionCurrent(root);
+	};
+	update();
+	const mutations = new MutationObserver(update);
+	mutations.observe(root, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: ["data-current"]
+	});
+	const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+	sizes?.observe(root);
+	const grid = root.querySelector(":scope > table");
+	if (grid !== null) sizes?.observe(grid);
+	return () => {
+		mutations.disconnect();
+		sizes?.disconnect();
+	};
+};
+function useCurrentFrame() {
+	return { viewportRef: useCallback((element) => {
+		if (element === null) return void 0;
+		return followCurrent(element);
+	}, []) };
+}
+const Table = defineComponent()({
+	name: "Table",
+	module: table_connect_exports,
+	rootPart: "root",
+	rootElement: "div",
+	elements: {
+		table: "table",
+		caption: "caption",
+		header: "thead",
+		body: "tbody",
+		footer: "tfoot",
+		row: "tr",
+		columnHeader: "th",
+		rowHeader: "th",
+		cell: "td"
+	},
+	getterProps: { row: ["selected", "current"] },
+	useMachineProps: useCurrentFrame,
+	rootOwnedGetters: [{
+		name: "currentFrame",
+		getter: "getCurrentFrameProps",
+		render: (props) => createElement("div", {
+			...props,
+			className: tableCurrentTrackClass
+		}, createElement("div", { className: tableCurrentAnchorClass }, createElement("div", {
+			className: tableCurrentOutlineClass,
+			hidden: true
+		})))
+	}],
+	variantProps: ["size"],
+	slots: (props) => tableRecipe({ size: resolveSize(props.size, "Table") })
+});
+//#endregion
+export { Table };
+
+//# sourceMappingURL=table.mjs.map

package/dist/components/table/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":["table"],"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, useCallback } from 'react'\n\nimport * as table from '#/components/table/table.connect.ts'\nimport {\n  tableCurrentAnchorClass,\n  tableCurrentOutlineClass,\n  tableCurrentTrackClass,\n  tableRecipe,\n} from '#/components/table/table.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface TableRootProps {\n  /** 셀의 여백과 글자 크기. 하나뿐인 공용 척도를 따르며 기본값은 `md`입니다. */\n  size?: Size\n}\n\nconst positionCurrent = (root: HTMLElement): void => {\n  const track = root.querySelector(':scope > [data-part=\"current-frame\"]')\n  const outline = track?.firstElementChild?.firstElementChild\n  const grid = root.querySelector(':scope > table')\n  if (!(track instanceof HTMLElement) || !(outline instanceof HTMLElement)) return\n  if (grid instanceof HTMLElement) track.style.width = `${String(grid.offsetWidth)}px`\n  const row = root.querySelector(':scope > table > tbody > tr[data-current]')\n  if (!(row instanceof HTMLElement)) {\n    outline.hidden = true\n    return\n  }\n  const first = row.firstElementChild\n  const overlap =\n    first === null ? 0 : Number.parseFloat(getComputedStyle(first).borderBottomWidth) || 0\n  const rowBox = row.getBoundingClientRect()\n  const trackBox = track.getBoundingClientRect()\n  outline.hidden = false\n  outline.style.top = `${String(rowBox.top - trackBox.top - overlap)}px`\n  outline.style.height = `${String(rowBox.height + overlap)}px`\n  outline.style.width = `${String(root.clientWidth)}px`\n}\n\nconst followCurrent = (root: HTMLElement): (() => void) => {\n  const update = (): void => {\n    positionCurrent(root)\n  }\n  update()\n  const mutations = new MutationObserver(update)\n  mutations.observe(root, {\n    subtree: true,\n    childList: true,\n    attributes: true,\n    attributeFilter: ['data-current'],\n  })\n  const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update)\n  sizes?.observe(root)\n  const grid = root.querySelector(':scope > table')\n  if (grid !== null) sizes?.observe(grid)\n  return () => {\n    mutations.disconnect()\n    sizes?.disconnect()\n  }\n}\n\nfunction useCurrentFrame(): Record<string, unknown> {\n  const viewportRef = useCallback((element: HTMLElement | null) => {\n    if (element === null) return undefined\n    return followCurrent(element)\n  }, [])\n  return { viewportRef }\n}\n\nexport const Table = defineComponent<TableRootProps>()({\n  name: 'Table',\n  module: table,\n  rootPart: 'root',\n  rootElement: 'div',\n  elements: {\n    table: 'table',\n    caption: 'caption',\n    header: 'thead',\n    body: 'tbody',\n    footer: 'tfoot',\n    row: 'tr',\n    columnHeader: 'th',\n    rowHeader: 'th',\n    cell: 'td',\n  },\n  getterProps: { row: ['selected', 'current'] },\n  useMachineProps: useCurrentFrame,\n  rootOwnedGetters: [\n    {\n      name: 'currentFrame',\n      getter: 'getCurrentFrameProps',\n      render: (props) =>\n        createElement(\n          'div',\n          { ...props, className: tableCurrentTrackClass },\n          createElement(\n            'div',\n            { className: tableCurrentAnchorClass },\n            createElement('div', { className: tableCurrentOutlineClass, hidden: true }),\n          ),\n        ),\n    },\n  ],\n  variantProps: ['size'],\n  slots: (props: TableRootProps) => tableRecipe({ size: resolveSize(props.size, 'Table') }),\n})\n"],"mappings":";;;;;;;AAmBA,MAAM,mBAAmB,SAA4B;CACnD,MAAM,QAAQ,KAAK,cAAc,wCAAsC;CACvE,MAAM,UAAU,OAAO,mBAAmB;CAC1C,MAAM,OAAO,KAAK,cAAc,gBAAgB;CAChD,IAAI,EAAE,iBAAiB,gBAAgB,EAAE,mBAAmB,cAAc;CAC1E,IAAI,gBAAgB,aAAa,MAAM,MAAM,QAAQ,GAAG,OAAO,KAAK,WAAW,EAAE;CACjF,MAAM,MAAM,KAAK,cAAc,2CAA2C;CAC1E,IAAI,EAAE,eAAe,cAAc;EACjC,QAAQ,SAAS;EACjB;CACF;CACA,MAAM,QAAQ,IAAI;CAClB,MAAM,UACJ,UAAU,OAAO,IAAI,OAAO,WAAW,iBAAiB,KAAK,CAAC,CAAC,iBAAiB,KAAK;CACvF,MAAM,SAAS,IAAI,sBAAsB;CACzC,MAAM,WAAW,MAAM,sBAAsB;CAC7C,QAAQ,SAAS;CACjB,QAAQ,MAAM,MAAM,GAAG,OAAO,OAAO,MAAM,SAAS,MAAM,OAAO,EAAE;CACnE,QAAQ,MAAM,SAAS,GAAG,OAAO,OAAO,SAAS,OAAO,EAAE;CAC1D,QAAQ,MAAM,QAAQ,GAAG,OAAO,KAAK,WAAW,EAAE;AACpD;AAEA,MAAM,iBAAiB,SAAoC;CACzD,MAAM,eAAqB;EACzB,gBAAgB,IAAI;CACtB;CACA,OAAO;CACP,MAAM,YAAY,IAAI,iBAAiB,MAAM;CAC7C,UAAU,QAAQ,MAAM;EACtB,SAAS;EACT,WAAW;EACX,YAAY;EACZ,iBAAiB,CAAC,cAAc;CAClC,CAAC;CACD,MAAM,QAAQ,OAAO,mBAAmB,cAAc,OAAO,IAAI,eAAe,MAAM;CACtF,OAAO,QAAQ,IAAI;CACnB,MAAM,OAAO,KAAK,cAAc,gBAAgB;CAChD,IAAI,SAAS,MAAM,OAAO,QAAQ,IAAI;CACtC,aAAa;EACX,UAAU,WAAW;EACrB,OAAO,WAAW;CACpB;AACF;AAEA,SAAS,kBAA2C;CAKlD,OAAO,EAAE,aAJW,aAAa,YAAgC;EAC/D,IAAI,YAAY,MAAM,OAAO,KAAA;EAC7B,OAAO,cAAc,OAAO;CAC9B,GAAG,CAAC,CACe,EAAE;AACvB;AAEA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EACR,OAAO;EACP,SAAS;EACT,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,KAAK;EACL,cAAc;EACd,WAAW;EACX,MAAM;CACR;CACA,aAAa,EAAE,KAAK,CAAC,YAAY,SAAS,EAAE;CAC5C,iBAAiB;CACjB,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UACP,cACE,OACA;GAAE,GAAG;GAAO,WAAW;EAAuB,GAC9C,cACE,OACA,EAAE,WAAW,wBAAwB,GACrC,cAAc,OAAO;GAAE,WAAW;GAA0B,QAAQ;EAAK,CAAC,CAC5E,CACF;CACJ,CACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA0B,YAAY,EAAE,MAAM,YAAY,MAAM,MAAM,OAAO,EAAE,CAAC;AAC1F,CAAC"}

package/dist/components/table/table.recipe.mjs

@@ -0,0 +1,186 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/table/table.recipe.ts
+const cellRule = {
+	borderBlockEndWidth: "hairline",
+	borderBlockEndStyle: "solid",
+	borderBlockEndColor: "var(--synapse-table-row-divider, token(colors.border.muted))",
+	borderInlineEndWidth: "hairline",
+	borderInlineEndStyle: "solid",
+	borderInlineEndColor: "var(--synapse-table-column-divider, token(colors.border.muted))",
+	"&:last-child": { borderInlineEndWidth: "0" },
+	"tbody > tr:last-child > &, tfoot > tr:last-child > &": { borderBlockEndWidth: "0" }
+};
+const tableCurrentTrackClass = css({
+	height: "0",
+	pointerEvents: "none"
+});
+const tableCurrentAnchorClass = css({
+	position: "sticky",
+	insetInlineStart: "inset.none",
+	zIndex: 3,
+	width: "0",
+	height: "0"
+});
+const tableCurrentOutlineClass = css({
+	position: "absolute",
+	insetInlineStart: "inset.none",
+	borderWidth: "focus",
+	borderStyle: "solid",
+	borderColor: "var(--synapse-table-row-current, token(colors.primary.default))",
+	pointerEvents: "none",
+	_hidden: { display: "none" }
+});
+const tableRecipe = sva({
+	slots: [
+		"root",
+		"table",
+		"caption",
+		"header",
+		"body",
+		"footer",
+		"row",
+		"columnHeader",
+		"rowHeader",
+		"cell"
+	],
+	base: {
+		root: {
+			width: "fill",
+			overflowX: "auto",
+			rounded: "surface",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised"
+		},
+		table: {
+			width: "fill",
+			borderCollapse: "separate",
+			borderSpacing: "0",
+			color: "foreground.default",
+			fontVariantNumeric: "tabular-nums"
+		},
+		caption: {
+			captionSide: "top",
+			textAlign: "start",
+			paddingInline: "inset.overlay",
+			paddingBlock: "inset.control",
+			textStyle: "label",
+			color: "foreground.default",
+			borderBlockEndWidth: "hairline",
+			borderBlockEndStyle: "solid",
+			borderBlockEndColor: "var(--synapse-table-row-divider, token(colors.border.muted))"
+		},
+		header: { bg: "background.subtle" },
+		body: {
+			"& > tr": { bg: "var(--synapse-table-row-background, token(colors.surface.raised))" },
+			"& > tr:nth-child(even)": { bg: "var(--synapse-table-row-stripe, token(colors.background.subtle))" },
+			"& > tr:hover": { bg: "var(--synapse-table-row-hover, token(colors.background.muted))" },
+			"& > tr[data-selected], & > tr[data-selected]:hover": { bg: "var(--synapse-table-row-selected, token(colors.primary.subtle))" }
+		},
+		footer: {
+			bg: "background.subtle",
+			fontWeight: "medium"
+		},
+		row: {},
+		columnHeader: {
+			...cellRule,
+			textAlign: "start",
+			fontWeight: "medium",
+			color: "foreground.muted",
+			whiteSpace: "nowrap"
+		},
+		rowHeader: {
+			...cellRule,
+			textAlign: "start",
+			fontWeight: "medium"
+		},
+		cell: {
+			...cellRule,
+			textAlign: "start"
+		}
+	},
+	variants: { size: {
+		xs: {
+			table: { textStyle: "caption" },
+			columnHeader: {
+				paddingInline: "inset.compact",
+				paddingBlock: "gap.inline"
+			},
+			rowHeader: {
+				paddingInline: "inset.compact",
+				paddingBlock: "gap.inline"
+			},
+			cell: {
+				paddingInline: "inset.compact",
+				paddingBlock: "gap.inline"
+			}
+		},
+		sm: {
+			table: { textStyle: "detail" },
+			columnHeader: {
+				paddingInline: "inset.control",
+				paddingBlock: "inset.compact"
+			},
+			rowHeader: {
+				paddingInline: "inset.control",
+				paddingBlock: "inset.compact"
+			},
+			cell: {
+				paddingInline: "inset.control",
+				paddingBlock: "inset.compact"
+			}
+		},
+		md: {
+			table: { textStyle: "body" },
+			columnHeader: {
+				paddingInline: "inset.overlay",
+				paddingBlock: "inset.control"
+			},
+			rowHeader: {
+				paddingInline: "inset.overlay",
+				paddingBlock: "inset.control"
+			},
+			cell: {
+				paddingInline: "inset.overlay",
+				paddingBlock: "inset.control"
+			}
+		},
+		lg: {
+			table: { textStyle: "body" },
+			columnHeader: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.control"
+			},
+			rowHeader: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.control"
+			},
+			cell: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.control"
+			}
+		},
+		xl: {
+			table: { textStyle: "subtitle" },
+			columnHeader: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.overlay"
+			},
+			rowHeader: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.overlay"
+			},
+			cell: {
+				paddingInline: "inset.surface",
+				paddingBlock: "inset.overlay"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tableCurrentAnchorClass, tableCurrentOutlineClass, tableCurrentTrackClass, tableRecipe };
+
+//# sourceMappingURL=table.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.recipe.mjs","names":[],"sources":["../../../src/components/table/table.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\nimport type { SystemStyleObject } from '#styled-system/types/index.js'\n\nconst cellRule: SystemStyleObject = {\n  borderBlockEndWidth: 'hairline',\n  borderBlockEndStyle: 'solid',\n  borderBlockEndColor: 'var(--synapse-table-row-divider, token(colors.border.muted))',\n  borderInlineEndWidth: 'hairline',\n  borderInlineEndStyle: 'solid',\n  borderInlineEndColor: 'var(--synapse-table-column-divider, token(colors.border.muted))',\n  '&:last-child': { borderInlineEndWidth: '0' },\n  'tbody > tr:last-child > &, tfoot > tr:last-child > &': { borderBlockEndWidth: '0' },\n}\n\nexport const tableCurrentTrackClass = css({\n  height: '0',\n  pointerEvents: 'none',\n})\n\nexport const tableCurrentAnchorClass = css({\n  position: 'sticky',\n  insetInlineStart: 'inset.none',\n  zIndex: 3,\n  width: '0',\n  height: '0',\n})\n\nexport const tableCurrentOutlineClass = css({\n  position: 'absolute',\n  insetInlineStart: 'inset.none',\n  borderWidth: 'focus',\n  borderStyle: 'solid',\n  borderColor: 'var(--synapse-table-row-current, token(colors.primary.default))',\n  pointerEvents: 'none',\n  _hidden: { display: 'none' },\n})\n\nexport const tableRecipe = sva({\n  slots: [\n    'root',\n    'table',\n    'caption',\n    'header',\n    'body',\n    'footer',\n    'row',\n    'columnHeader',\n    'rowHeader',\n    'cell',\n  ],\n  base: {\n    root: {\n      width: 'fill',\n      overflowX: 'auto',\n      rounded: 'surface',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n    },\n    table: {\n      width: 'fill',\n      borderCollapse: 'separate',\n      borderSpacing: '0',\n      color: 'foreground.default',\n      fontVariantNumeric: 'tabular-nums',\n    },\n    caption: {\n      captionSide: 'top',\n      textAlign: 'start',\n      paddingInline: 'inset.overlay',\n      paddingBlock: 'inset.control',\n      textStyle: 'label',\n      color: 'foreground.default',\n      // caption은 같은 프레임 안에서 격자의 제목이 됩니다. 아래에 선이 없으면 제목이 헤더 행에 바로\n      // 붙어 보이므로, 아래 행들과 같은 선을 그어 하나의 표로 읽히게 합니다.\n      borderBlockEndWidth: 'hairline',\n      borderBlockEndStyle: 'solid',\n      borderBlockEndColor: 'var(--synapse-table-row-divider, token(colors.border.muted))',\n    },\n    header: {\n      bg: 'background.subtle',\n    },\n    body: {\n      '& > tr': { bg: 'var(--synapse-table-row-background, token(colors.surface.raised))' },\n      '& > tr:nth-child(even)': {\n        bg: 'var(--synapse-table-row-stripe, token(colors.background.subtle))',\n      },\n      '& > tr:hover': { bg: 'var(--synapse-table-row-hover, token(colors.background.muted))' },\n      '& > tr[data-selected], & > tr[data-selected]:hover': {\n        bg: 'var(--synapse-table-row-selected, token(colors.primary.subtle))',\n      },\n    },\n    footer: {\n      bg: 'background.subtle',\n      fontWeight: 'medium',\n    },\n    row: {},\n    columnHeader: {\n      ...cellRule,\n      textAlign: 'start',\n      fontWeight: 'medium',\n      color: 'foreground.muted',\n      whiteSpace: 'nowrap',\n    },\n    rowHeader: {\n      ...cellRule,\n      textAlign: 'start',\n      fontWeight: 'medium',\n    },\n    cell: {\n      ...cellRule,\n      textAlign: 'start',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        table: { textStyle: 'caption' },\n        columnHeader: { paddingInline: 'inset.compact', paddingBlock: 'gap.inline' },\n        rowHeader: { paddingInline: 'inset.compact', paddingBlock: 'gap.inline' },\n        cell: { paddingInline: 'inset.compact', paddingBlock: 'gap.inline' },\n      },\n      sm: {\n        table: { textStyle: 'detail' },\n        columnHeader: { paddingInline: 'inset.control', paddingBlock: 'inset.compact' },\n        rowHeader: { paddingInline: 'inset.control', paddingBlock: 'inset.compact' },\n        cell: { paddingInline: 'inset.control', paddingBlock: 'inset.compact' },\n      },\n      md: {\n        table: { textStyle: 'body' },\n        columnHeader: { paddingInline: 'inset.overlay', paddingBlock: 'inset.control' },\n        rowHeader: { paddingInline: 'inset.overlay', paddingBlock: 'inset.control' },\n        cell: { paddingInline: 'inset.overlay', paddingBlock: 'inset.control' },\n      },\n      lg: {\n        table: { textStyle: 'body' },\n        columnHeader: { paddingInline: 'inset.surface', paddingBlock: 'inset.control' },\n        rowHeader: { paddingInline: 'inset.surface', paddingBlock: 'inset.control' },\n        cell: { paddingInline: 'inset.surface', paddingBlock: 'inset.control' },\n      },\n      xl: {\n        table: { textStyle: 'subtitle' },\n        columnHeader: { paddingInline: 'inset.surface', paddingBlock: 'inset.overlay' },\n        rowHeader: { paddingInline: 'inset.surface', paddingBlock: 'inset.overlay' },\n        cell: { paddingInline: 'inset.surface', paddingBlock: 'inset.overlay' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;;AAGA,MAAM,WAA8B;CAClC,qBAAqB;CACrB,qBAAqB;CACrB,qBAAqB;CACrB,sBAAsB;CACtB,sBAAsB;CACtB,sBAAsB;CACtB,gBAAgB,EAAE,sBAAsB,IAAI;CAC5C,wDAAwD,EAAE,qBAAqB,IAAI;AACrF;AAEA,MAAa,yBAAyB,IAAI;CACxC,QAAQ;CACR,eAAe;AACjB,CAAC;AAED,MAAa,0BAA0B,IAAI;CACzC,UAAU;CACV,kBAAkB;CAClB,QAAQ;CACR,OAAO;CACP,QAAQ;AACV,CAAC;AAED,MAAa,2BAA2B,IAAI;CAC1C,UAAU;CACV,kBAAkB;CAClB,aAAa;CACb,aAAa;CACb,aAAa;CACb,eAAe;CACf,SAAS,EAAE,SAAS,OAAO;AAC7B,CAAC;AAED,MAAa,cAAc,IAAI;CAC7B,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,WAAW;GACX,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;EACN;EACA,OAAO;GACL,OAAO;GACP,gBAAgB;GAChB,eAAe;GACf,OAAO;GACP,oBAAoB;EACtB;EACA,SAAS;GACP,aAAa;GACb,WAAW;GACX,eAAe;GACf,cAAc;GACd,WAAW;GACX,OAAO;GAGP,qBAAqB;GACrB,qBAAqB;GACrB,qBAAqB;EACvB;EACA,QAAQ,EACN,IAAI,oBACN;EACA,MAAM;GACJ,UAAU,EAAE,IAAI,oEAAoE;GACpF,0BAA0B,EACxB,IAAI,mEACN;GACA,gBAAgB,EAAE,IAAI,iEAAiE;GACvF,sDAAsD,EACpD,IAAI,kEACN;EACF;EACA,QAAQ;GACN,IAAI;GACJ,YAAY;EACd;EACA,KAAK,CAAC;EACN,cAAc;GACZ,GAAG;GACH,WAAW;GACX,YAAY;GACZ,OAAO;GACP,YAAY;EACd;EACA,WAAW;GACT,GAAG;GACH,WAAW;GACX,YAAY;EACd;EACA,MAAM;GACJ,GAAG;GACH,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO,EAAE,WAAW,UAAU;GAC9B,cAAc;IAAE,eAAe;IAAiB,cAAc;GAAa;GAC3E,WAAW;IAAE,eAAe;IAAiB,cAAc;GAAa;GACxE,MAAM;IAAE,eAAe;IAAiB,cAAc;GAAa;EACrE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,SAAS;GAC7B,cAAc;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC9E,WAAW;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC3E,MAAM;IAAE,eAAe;IAAiB,cAAc;GAAgB;EACxE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,OAAO;GAC3B,cAAc;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC9E,WAAW;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC3E,MAAM;IAAE,eAAe;IAAiB,cAAc;GAAgB;EACxE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,OAAO;GAC3B,cAAc;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC9E,WAAW;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC3E,MAAM;IAAE,eAAe;IAAiB,cAAc;GAAgB;EACxE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,WAAW;GAC/B,cAAc;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC9E,WAAW;IAAE,eAAe;IAAiB,cAAc;GAAgB;GAC3E,MAAM;IAAE,eAAe;IAAiB,cAAc;GAAgB;EACxE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Tabs, TabsActivationMode, TabsFocusChangeDetails, TabsRootProps } from "./tabs.mjs";
+export { Tabs, type TabsActivationMode, type TabsFocusChangeDetails, type TabsRootProps };