@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/qr-code/qr-code.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.recipe.mjs","names":[],"sources":["../../../src/components/qr-code/qr-code.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const qrCodeRecipe = sva({\n  slots: ['root', 'frame', 'pattern', 'overlay', 'downloadTrigger'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: 'gap.related',\n      color: 'foreground.default',\n    },\n    frame: {\n      display: 'block',\n      width: 'var(--qr-size)',\n      height: 'var(--qr-size)',\n      flexShrink: 0,\n      rounded: 'inset',\n      bg: 'surface.raised',\n    },\n    pattern: {\n      fill: 'foreground.default',\n    },\n    overlay: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      overflow: 'hidden',\n      rounded: 'inset',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.raised',\n      bg: 'surface.raised',\n      pointerEvents: 'none',\n    },\n    downloadTrigger: {\n      minWidth: 'target.minimum',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        frame: { '--qr-size': '{sizes.control.xl}', padding: 'inset.compact' },\n      },\n      sm: {\n        frame: { '--qr-size': 'calc(token(sizes.control.xl) * 1.5)', padding: 'inset.compact' },\n      },\n      md: {\n        frame: { '--qr-size': 'calc(token(sizes.control.xl) * 2)', padding: 'inset.control' },\n      },\n      lg: {\n        frame: { '--qr-size': 'calc(token(sizes.control.xl) * 2.5)', padding: 'inset.control' },\n      },\n      xl: {\n        frame: { '--qr-size': '{sizes.surface.overlayMin}', padding: 'inset.overlay' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,eAAe,IAAI;CAC9B,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAW;CAAiB;CAChE,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,SAAS;GACT,IAAI;EACN;EACA,SAAS,EACP,MAAM,qBACR;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,eAAe;EACjB;EACA,iBAAiB,EACf,UAAU,iBACZ;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,aAAa;GAAsB,SAAS;EAAgB,EACvE;EACA,IAAI,EACF,OAAO;GAAE,aAAa;GAAuC,SAAS;EAAgB,EACxF;EACA,IAAI,EACF,OAAO;GAAE,aAAa;GAAqC,SAAS;EAAgB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,aAAa;GAAuC,SAAS;EAAgB,EACxF;EACA,IAAI,EACF,OAAO;GAAE,aAAa;GAA8B,SAAS;EAAgB,EAC/E;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { RadioGroup, RadioGroupRootProps } from "./radio-group.mjs";
+export { RadioGroup, type RadioGroupRootProps };

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

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

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

@@ -0,0 +1,33 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/radio-group/radio-group.d.ts
+export interface RadioGroupRootProps {
+  /** 제어되는 선택. `null`은 아무것도 선택하지 않음이며, 라디오 그룹에서는 엄연한 상태입니다. */
+  value?: string | null;
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: string | null;
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<string | null>) => void;
+  /** 그룹이 배치되는 축이자, 그 축을 따라 움직이는 화살표 키를 정합니다. */
+  orientation?: Orientation;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 그룹을 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 RadioGroup은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 RadioGroup은 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 모든 아이템에 `aria-invalid`로 보조 기술에 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 무언가가 선택돼 있어야 합니다. */
+  required?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const RadioGroup: SynapseComponent<"indicator" | "item" | "itemControl" | "itemText" | "label" | "root", "root", RadioGroupRootProps, never>;
+//#endregion
+//# sourceMappingURL=radio-group.d.mts.map

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

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

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

@@ -0,0 +1,47 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { radioGroupRecipe } from "./radio-group.recipe.mjs";
+import { createElement } from "react";
+import * as radioGroup from "@zag-js/radio-group";
+//#region src/components/radio-group/radio-group.tsx
+const RadioGroup = defineComponent()({
+	name: "RadioGroup",
+	module: radioGroup,
+	rootPart: "root",
+	elements: {
+		itemText: "span",
+		itemControl: "span",
+		indicator: "span"
+	},
+	getterProps: {
+		item: [
+			"value",
+			"invalid",
+			"disabled"
+		],
+		itemText: ["value"],
+		itemControl: ["value"]
+	},
+	partOwnedGetters: { item: [{
+		name: "itemHiddenInput",
+		getter: "getItemHiddenInputProps",
+		getterArgs: (_api, ownerArgs) => [ownerArgs],
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}] },
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: [],
+		describeOwned: ["itemHiddenInput"],
+		labelable: false
+	},
+	variantProps: ["size"],
+	slots: (props) => radioGroupRecipe({ size: resolveSize(props.size, "RadioGroup") })
+});
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=radio-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.mjs","names":[],"sources":["../../../src/components/radio-group/radio-group.tsx"],"sourcesContent":["'use client'\n\nimport * as radioGroup from '@zag-js/radio-group'\nimport { createElement } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { radioGroupRecipe } from '#/components/radio-group/radio-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 RadioGroupRootProps {\n  /** 제어되는 선택. `null`은 아무것도 선택하지 않음이며, 라디오 그룹에서는 엄연한 상태입니다. */\n  value?: string | null\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: string | null\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<string | null>) => void\n  /** 그룹이 배치되는 축이자, 그 축을 따라 움직이는 화살표 키를 정합니다. */\n  orientation?: Orientation\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 그룹을 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 RadioGroup은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 RadioGroup은 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 모든 아이템에 `aria-invalid`로 보조 기술에 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 무언가가 선택돼 있어야 합니다. */\n  required?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const RadioGroup = defineComponent<RadioGroupRootProps>()({\n  name: 'RadioGroup',\n  module: radioGroup,\n  rootPart: 'root',\n  elements: {\n    itemText: 'span',\n    itemControl: 'span',\n    indicator: 'span',\n  },\n  getterProps: {\n    item: ['value', 'invalid', 'disabled'],\n    itemText: ['value'],\n    itemControl: ['value'],\n  },\n  partOwnedGetters: {\n    item: [\n      {\n        name: 'itemHiddenInput',\n        getter: 'getItemHiddenInputProps',\n        getterArgs: (_api, ownerArgs) => [ownerArgs],\n        render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n      },\n    ],\n  },\n  field: {\n    ids: (field) => ({ label: field.label }),\n    describe: [],\n    describeOwned: ['itemHiddenInput'],\n    labelable: false,\n  },\n  variantProps: ['size'],\n  slots: (props: RadioGroupRootProps) =>\n    radioGroupRecipe({ size: resolveSize(props.size, 'RadioGroup') }),\n})\n"],"mappings":";;;;;;;AAsCA,MAAa,aAAa,gBAAqC,CAAC,CAAC;CAC/D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,UAAU;EACV,aAAa;EACb,WAAW;CACb;CACA,aAAa;EACX,MAAM;GAAC;GAAS;GAAW;EAAU;EACrC,UAAU,CAAC,OAAO;EAClB,aAAa,CAAC,OAAO;CACvB;CACA,kBAAkB,EAChB,MAAM,CACJ;EACE,MAAM;EACN,QAAQ;EACR,aAAa,MAAM,cAAc,CAAC,SAAS;EAC3C,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF,EACF;CACA,OAAO;EACL,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EACtC,UAAU,CAAC;EACX,eAAe,CAAC,iBAAiB;EACjC,WAAW;CACb;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,iBAAiB,EAAE,MAAM,YAAY,MAAM,MAAM,YAAY,EAAE,CAAC;AACpE,CAAC"}

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

@@ -0,0 +1,189 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/radio-group/radio-group.recipe.ts
+const radioGroupRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"item",
+		"itemText",
+		"itemControl",
+		"indicator"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			gap: "gap.related",
+			color: "foreground.default",
+			_horizontal: {
+				flexDirection: "row",
+				flexWrap: "wrap",
+				alignItems: "center",
+				columnGap: "gap.distinct"
+			},
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: {
+			color: "foreground.muted",
+			_horizontal: { flexBasis: "fill" }
+		},
+		item: {
+			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"
+			}
+		},
+		itemText: { userSelect: "none" },
+		itemControl: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			rounded: "pill",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.strong",
+			bg: "surface.raised",
+			outlineColor: "border.focus",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&[data-active]:not([data-disabled], [data-readonly])": { transform: "scale(0.9)" },
+			_after: {
+				content: "\"\"",
+				width: "[round(nearest, 60%, 2px)]",
+				height: "[round(nearest, 60%, 2px)]",
+				rounded: "pill",
+				bg: "primary.default",
+				opacity: 0,
+				transform: "scale(0.5)",
+				transitionProperty: "common",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction",
+				pointerEvents: "none",
+				_highContrast: { bg: "system.highlight" }
+			},
+			"&:is(:hover, [data-hover]):not([data-disabled], [data-readonly], [data-invalid], [aria-invalid=true], [data-state=checked])": { borderColor: "foreground.muted" },
+			_checked: {
+				borderColor: "primary.default",
+				_highContrast: { borderColor: "system.highlight" },
+				_after: {
+					opacity: 1,
+					transform: "scale(1)"
+				},
+				_invalid: { borderColor: "error.default" },
+				_disabled: {
+					borderColor: "primary.disabled",
+					_after: { 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",
+				_after: { bg: "error.default" },
+				_focusVisible: {
+					outlineWidth: "focus",
+					outlineOffset: "inset.compact",
+					outlineColor: "border.focus"
+				}
+			},
+			_readOnly: {
+				bg: "background.subtle",
+				borderStyle: "dashed"
+			},
+			_disabled: {
+				bg: "surface.raised",
+				borderColor: "border.muted",
+				_highContrast: { borderColor: "system.grayText" },
+				_after: {
+					bg: "foreground.disabled",
+					_highContrast: { bg: "system.grayText" }
+				}
+			}
+		},
+		indicator: {
+			display: "none",
+			pointerEvents: "none"
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "caption" },
+			label: { textStyle: "caption" },
+			item: {
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			itemControl: {
+				width: "icon.xs",
+				height: "icon.xs"
+			}
+		},
+		sm: {
+			root: { textStyle: "caption" },
+			label: { textStyle: "caption" },
+			item: {
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			itemControl: {
+				width: "icon.sm",
+				height: "icon.sm"
+			}
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			item: { textStyle: "body" },
+			itemControl: {
+				width: "icon.sm",
+				height: "icon.sm",
+				_after: {
+					width: "[round(nearest, 66.667%, 2px)]",
+					height: "[round(nearest, 66.667%, 2px)]"
+				}
+			}
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			item: { textStyle: "body" },
+			itemControl: {
+				width: "icon.md",
+				height: "icon.md"
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			item: { textStyle: "subtitle" },
+			itemControl: {
+				width: "icon.lg",
+				height: "icon.lg"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { radioGroupRecipe };
+
+//# sourceMappingURL=radio-group.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.recipe.mjs","names":[],"sources":["../../../src/components/radio-group/radio-group.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const radioGroupRecipe = sva({\n  slots: ['root', 'label', 'item', 'itemText', 'itemControl', 'indicator'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      gap: 'gap.related',\n      color: 'foreground.default',\n      _horizontal: {\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        alignItems: 'center',\n        columnGap: 'gap.distinct',\n      },\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      color: 'foreground.muted',\n      _horizontal: { flexBasis: 'fill' },\n    },\n    item: {\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    itemText: {\n      userSelect: 'none',\n    },\n    itemControl: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      rounded: 'pill',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.strong',\n      bg: 'surface.raised',\n      outlineColor: 'border.focus',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&[data-active]:not([data-disabled], [data-readonly])': { transform: 'scale(0.9)' },\n      // 점 크기는 2px 단위로 반올림합니다. 컨트롤 안쪽은 늘 짝수 px(10, 14, 18, 22)이라, 점도 짝수여야\n      // 위아래와 좌우 여백이 같은 정수 px가 됩니다. 3/5, 2/3을 그대로 쓰면 9.33px 같은 소수 크기가 되어\n      // 점이 한쪽으로 치우칩니다.\n      _after: {\n        content: '\"\"',\n        width: '[round(nearest, 60%, 2px)]',\n        height: '[round(nearest, 60%, 2px)]',\n        rounded: 'pill',\n        bg: 'primary.default',\n        opacity: 0,\n        transform: 'scale(0.5)',\n        transitionProperty: 'common',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n        pointerEvents: 'none',\n        _highContrast: { bg: 'system.highlight' },\n      },\n      '&:is(:hover, [data-hover]):not([data-disabled], [data-readonly], [data-invalid], [aria-invalid=true], [data-state=checked])':\n        { borderColor: 'foreground.muted' },\n      _checked: {\n        borderColor: 'primary.default',\n        _highContrast: { borderColor: 'system.highlight' },\n        _after: { opacity: 1, transform: 'scale(1)' },\n        _invalid: { borderColor: 'error.default' },\n        _disabled: { borderColor: 'primary.disabled', _after: { 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        _after: { bg: '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      },\n      _disabled: {\n        bg: 'surface.raised',\n        borderColor: 'border.muted',\n        _highContrast: { borderColor: 'system.grayText' },\n        _after: { bg: 'foreground.disabled', _highContrast: { bg: 'system.grayText' } },\n      },\n    },\n    indicator: {\n      display: 'none',\n      pointerEvents: 'none',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'caption' },\n        label: { textStyle: 'caption' },\n        item: { gap: 'gap.inline', textStyle: 'caption' },\n        itemControl: { width: 'icon.xs', height: 'icon.xs' },\n      },\n      sm: {\n        root: { textStyle: 'caption' },\n        label: { textStyle: 'caption' },\n        item: { gap: 'gap.inline', textStyle: 'caption' },\n        itemControl: { width: 'icon.sm', height: 'icon.sm' },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        item: { textStyle: 'body' },\n        itemControl: {\n          width: 'icon.sm',\n          height: 'icon.sm',\n          _after: {\n            width: '[round(nearest, 66.667%, 2px)]',\n            height: '[round(nearest, 66.667%, 2px)]',\n          },\n        },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        item: { textStyle: 'body' },\n        itemControl: { width: 'icon.md', height: 'icon.md' },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        item: { textStyle: 'subtitle' },\n        itemControl: { width: 'icon.lg', height: 'icon.lg' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { RatingGroup, RatingGroupRootProps, RatingHoverChangeDetails } from "./rating-group.mjs";
+export { RatingGroup, type RatingGroupRootProps, type RatingHoverChangeDetails };

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

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

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

@@ -0,0 +1,43 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/rating-group/rating-group.d.ts
+export interface RatingHoverChangeDetails {
+  readonly hoveredValue: number;
+}
+export interface RatingGroupRootProps {
+  /** 제어되는 평점. `0`은 평가하지 않음이고, 반값은 `allowHalf`일 때만 허용됩니다. */
+  value?: number;
+  /** 비제어 모드의 초기 평점. `value`를 주면 무시됩니다. */
+  defaultValue?: number;
+  /** 제어 여부와 무관하게 평점이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<number>) => void;
+  /** 아무것도 확정되기 전에, 포인터가 아이템 위를 지날 때 호출됩니다. */
+  onHoverChange?: (details: RatingHoverChangeDetails) => void;
+  /** 아이템이 몇 개인지. 기본값은 5입니다. */
+  count?: number;
+  /** 반값을 허용합니다. 포인터가 아이템의 어느 쪽에 있는지로 정해집니다. */
+  allowHalf?: boolean;
+  /** 마운트될 때 그룹 안으로 포커스를 옮깁니다. */
+  autoFocus?: boolean;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 그룹을 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 RatingGroup은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 RatingGroup은 평점을 보여주되 바꿀 수 없습니다. 표시용으로 쓰는 경우입니다. */
+  readOnly?: boolean;
+  /** 제약 검증. 폼이 제출되려면 평점이 있어야 합니다. */
+  required?: boolean;
+  /** 이 RatingGroup에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const RatingGroup: SynapseComponent<"control" | "item" | "label" | "root", "root", RatingGroupRootProps, never>;
+//#endregion
+//# sourceMappingURL=rating-group.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-group.d.mts","names":[],"sources":["../../../src/components/rating-group/rating-group.tsx"],"mappings":";;;;;iBAaiB;WACN;;iBAGM;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,aAAW,gEAAA"}

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

@@ -0,0 +1,39 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { star } from "../../icons/src/star.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { ratingGroupRecipe } from "./rating-group.recipe.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as ratingGroup from "@zag-js/rating-group";
+//#region src/components/rating-group/rating-group.tsx
+const RatingGroup = defineComponent()({
+	name: "RatingGroup",
+	module: ratingGroup,
+	rootPart: "root",
+	getterProps: { item: ["index"] },
+	defaultContent: { item: () => /* @__PURE__ */ jsx(Icon, { icon: star }) },
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}],
+	machineTranslations: { ratingValueText: (t) => (index) => t("ratingGroup.item.label", { count: index }) },
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["item"],
+		labelable: false
+	},
+	amendBehaviorProps: { item: (_behaviorProps, _api, _args, translate) => ({ "aria-roledescription": translate("ratingGroup.item.roleDescription") }) },
+	variantProps: ["size"],
+	slots: (props) => ratingGroupRecipe({ size: resolveSize(props.size, "RatingGroup") })
+});
+//#endregion
+export { RatingGroup };
+
+//# sourceMappingURL=rating-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-group.mjs","names":[],"sources":["../../../src/components/rating-group/rating-group.tsx"],"sourcesContent":["'use client'\n\nimport { star } from '@neurocle/synapse-icons'\nimport * as ratingGroup from '@zag-js/rating-group'\nimport { createElement } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { ratingGroupRecipe } from '#/components/rating-group/rating-group.recipe.ts'\nimport type { TranslationOverrides, Translator } from '#/provider/translations.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 RatingHoverChangeDetails {\n  readonly hoveredValue: number\n}\n\nexport interface RatingGroupRootProps {\n  /** 제어되는 평점. `0`은 평가하지 않음이고, 반값은 `allowHalf`일 때만 허용됩니다. */\n  value?: number\n  /** 비제어 모드의 초기 평점. `value`를 주면 무시됩니다. */\n  defaultValue?: number\n  /** 제어 여부와 무관하게 평점이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<number>) => void\n  /** 아무것도 확정되기 전에, 포인터가 아이템 위를 지날 때 호출됩니다. */\n  onHoverChange?: (details: RatingHoverChangeDetails) => void\n  /** 아이템이 몇 개인지. 기본값은 5입니다. */\n  count?: number\n  /** 반값을 허용합니다. 포인터가 아이템의 어느 쪽에 있는지로 정해집니다. */\n  allowHalf?: boolean\n  /** 마운트될 때 그룹 안으로 포커스를 옮깁니다. */\n  autoFocus?: boolean\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 그룹을 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 RatingGroup은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 RatingGroup은 평점을 보여주되 바꿀 수 없습니다. 표시용으로 쓰는 경우입니다. */\n  readOnly?: boolean\n  /** 제약 검증. 폼이 제출되려면 평점이 있어야 합니다. */\n  required?: boolean\n  /** 이 RatingGroup에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const RatingGroup = defineComponent<RatingGroupRootProps>()({\n  name: 'RatingGroup',\n  module: ratingGroup,\n  rootPart: 'root',\n  getterProps: { item: ['index'] },\n  defaultContent: { item: () => <Icon icon={star} /> },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n    },\n  ],\n  machineTranslations: {\n    ratingValueText:\n      (t: Translator) =>\n      (index: number): string =>\n        t('ratingGroup.item.label', { count: index }),\n  },\n  field: { ids: (field) => ({ label: field.label }), describe: ['item'], labelable: false },\n  amendBehaviorProps: {\n    item: (_behaviorProps, _api, _args, translate) => ({\n      'aria-roledescription': translate('ratingGroup.item.roleDescription'),\n    }),\n  },\n  variantProps: ['size'],\n  slots: (props: RatingGroupRootProps) =>\n    ratingGroupRecipe({ size: resolveSize(props.size, 'RatingGroup') }),\n})\n"],"mappings":";;;;;;;;;;;AAkDA,MAAa,cAAc,gBAAsC,CAAC,CAAC;CACjE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE;CAC/B,gBAAgB,EAAE,YAAY,oBAAC,MAAD,EAAM,MAAM,KAAO,CAAA,EAAE;CACnD,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF;CACA,qBAAqB,EACnB,kBACG,OACA,UACC,EAAE,0BAA0B,EAAE,OAAO,MAAM,CAAC,EAClD;CACA,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EAAI,UAAU,CAAC,MAAM;EAAG,WAAW;CAAM;CACxF,oBAAoB,EAClB,OAAO,gBAAgB,MAAM,OAAO,eAAe,EACjD,wBAAwB,UAAU,kCAAkC,EACtE,GACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,kBAAkB,EAAE,MAAM,YAAY,MAAM,MAAM,aAAa,EAAE,CAAC;AACtE,CAAC"}

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

@@ -0,0 +1,133 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/rating-group/rating-group.recipe.ts
+const ratingGroupRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"item",
+		"control"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			minHeight: "target.minimum",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: { color: "foreground.muted" },
+		control: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "inset.none"
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "inset",
+			color: "border.strong",
+			cursor: "pointer",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"& svg": {
+				pointerEvents: "none",
+				fill: "surface.transparent",
+				stroke: "border.strong",
+				strokeWidth: "emphasis",
+				strokeLinejoin: "round",
+				_highContrast: { stroke: "system.canvasText" }
+			},
+			_highlighted: {
+				color: "accent.muted",
+				"& svg": {
+					fill: "accent.muted",
+					stroke: "accent.muted",
+					_highContrast: {
+						fill: "system.highlight",
+						stroke: "system.highlight"
+					}
+				}
+			},
+			outline: "none",
+			"&:not([data-synapse-input=pointer] *):focus-visible": {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "border.muted",
+				cursor: "not-allowed",
+				"& svg": {
+					stroke: "border.muted",
+					_highContrast: { stroke: "system.grayText" }
+				},
+				_highlighted: {
+					color: "foreground.disabled",
+					"& svg": {
+						fill: "foreground.disabled",
+						stroke: "foreground.disabled",
+						_highContrast: {
+							fill: "system.grayText",
+							stroke: "system.grayText"
+						}
+					}
+				}
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "caption" },
+			label: { textStyle: "caption" },
+			item: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			root: { textStyle: "caption" },
+			label: { textStyle: "caption" },
+			item: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			item: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			item: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			item: { "& svg": {
+				width: "icon.xl",
+				height: "icon.xl"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { ratingGroupRecipe };
+
+//# sourceMappingURL=rating-group.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-group.recipe.mjs","names":[],"sources":["../../../src/components/rating-group/rating-group.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const ratingGroupRecipe = sva({\n  slots: ['root', 'label', 'item', 'control'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n      minHeight: 'target.minimum',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      color: 'foreground.muted',\n    },\n    control: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'inset.none',\n    },\n    item: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'inset',\n      color: 'border.strong',\n      cursor: 'pointer',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '& svg': {\n        pointerEvents: 'none',\n        fill: 'surface.transparent',\n        stroke: 'border.strong',\n        strokeWidth: 'emphasis',\n        strokeLinejoin: 'round',\n        _highContrast: { stroke: 'system.canvasText' },\n      },\n      _highlighted: {\n        color: 'accent.muted',\n        '& svg': {\n          fill: 'accent.muted',\n          stroke: 'accent.muted',\n          _highContrast: { fill: 'system.highlight', stroke: 'system.highlight' },\n        },\n      },\n      outline: 'none',\n      '&:not([data-synapse-input=pointer] *):focus-visible': {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      _readOnly: { cursor: 'default' },\n      _disabled: {\n        color: 'border.muted',\n        cursor: 'not-allowed',\n        '& svg': { stroke: 'border.muted', _highContrast: { stroke: 'system.grayText' } },\n        _highlighted: {\n          color: 'foreground.disabled',\n          '& svg': {\n            fill: 'foreground.disabled',\n            stroke: 'foreground.disabled',\n            _highContrast: { fill: 'system.grayText', stroke: 'system.grayText' },\n          },\n        },\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'caption' },\n        label: { textStyle: 'caption' },\n        item: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        root: { textStyle: 'caption' },\n        label: { textStyle: 'caption' },\n        item: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        item: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        item: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        item: { '& svg': { width: 'icon.xl', height: 'icon.xl' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,oBAAoB,IAAI;CACnC,OAAO;EAAC;EAAQ;EAAS;EAAQ;CAAS;CAC1C,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW;GACX,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,OAAO,EACL,OAAO,mBACT;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,UAAU;GACV,WAAW;GACX,SAAS;GACT,OAAO;GACP,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,SAAS;IACP,eAAe;IACf,MAAM;IACN,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,eAAe,EAAE,QAAQ,oBAAoB;GAC/C;GACA,cAAc;IACZ,OAAO;IACP,SAAS;KACP,MAAM;KACN,QAAQ;KACR,eAAe;MAAE,MAAM;MAAoB,QAAQ;KAAmB;IACxE;GACF;GACA,SAAS;GACT,uDAAuD;IACrD,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW,EAAE,QAAQ,UAAU;GAC/B,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,QAAQ;KAAgB,eAAe,EAAE,QAAQ,kBAAkB;IAAE;IAChF,cAAc;KACZ,OAAO;KACP,SAAS;MACP,MAAM;MACN,QAAQ;MACR,eAAe;OAAE,MAAM;OAAmB,QAAQ;MAAkB;KACtE;IACF;GACF;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EAAE,WAAW,UAAU;GAC7B,OAAO,EAAE,WAAW,UAAU;GAC9B,MAAM,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAC3D;EACA,IAAI;GACF,MAAM,EAAE,WAAW,UAAU;GAC7B,OAAO,EAAE,WAAW,UAAU;GAC9B,MAAM,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAC3D;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,MAAM,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAC3D;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,MAAM,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAC3D;EACA,IAAI;GACF,MAAM,EAAE,WAAW,WAAW;GAC9B,OAAO,EAAE,WAAW,OAAO;GAC3B,MAAM,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAC3D;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/scroll-area/index.d.mts

@@ -0,0 +1,2 @@
+import { ScrollArea, ScrollAreaRootProps } from "./scroll-area.mjs";
+export { ScrollArea, type ScrollAreaRootProps };

package/dist/components/scroll-area/index.mjs

@@ -0,0 +1,2 @@
+import { ScrollArea } from "./scroll-area.mjs";
+export { ScrollArea };

package/dist/components/scroll-area/scroll-area.d.mts

@@ -0,0 +1,12 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/scroll-area/scroll-area.d.ts
+export interface ScrollAreaRootProps {
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const ScrollArea: SynapseComponent<"content" | "corner" | "root" | "scrollbar" | "thumb" | "viewport", "root", ScrollAreaRootProps, never>;
+//#endregion
+//# sourceMappingURL=scroll-area.d.mts.map

package/dist/components/scroll-area/scroll-area.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.mts","names":[],"sources":["../../../src/components/scroll-area/scroll-area.tsx"],"mappings":";;;iBAQiB;;EAEf,OAAO;;EAEP;;qBAGW,YAAU,6FAAA"}

package/dist/components/scroll-area/scroll-area.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { scrollAreaRecipe } from "./scroll-area.recipe.mjs";
+import * as scrollArea from "@zag-js/scroll-area";
+//#region src/components/scroll-area/scroll-area.tsx
+const ScrollArea = defineComponent()({
+	name: "ScrollArea",
+	module: scrollArea,
+	rootPart: "root",
+	elements: {
+		scrollbar: "div",
+		thumb: "div",
+		corner: "div"
+	},
+	getterProps: {
+		scrollbar: ["orientation"],
+		thumb: ["orientation"]
+	},
+	amendBehaviorProps: { viewport: (behaviorProps, _api, _args, translate) => behaviorProps["data-overflow-x"] === void 0 && behaviorProps["data-overflow-y"] === void 0 ? {} : {
+		role: "group",
+		tabIndex: 0,
+		"aria-label": translate("scrollArea.viewport.label")
+	} },
+	variantProps: ["size"],
+	slots: (props) => scrollAreaRecipe({ size: resolveSize(props.size, "ScrollArea") })
+});
+//#endregion
+export { ScrollArea };
+
+//# sourceMappingURL=scroll-area.mjs.map

package/dist/components/scroll-area/scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.mjs","names":[],"sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["'use client'\n\nimport * as scrollArea from '@zag-js/scroll-area'\n\nimport { scrollAreaRecipe } from '#/components/scroll-area/scroll-area.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface ScrollAreaRootProps {\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const ScrollArea = defineComponent<ScrollAreaRootProps>()({\n  name: 'ScrollArea',\n  module: scrollArea,\n  rootPart: 'root',\n  elements: { scrollbar: 'div', thumb: 'div', corner: 'div' },\n  getterProps: {\n    scrollbar: ['orientation'],\n    thumb: ['orientation'],\n  },\n  amendBehaviorProps: {\n    viewport: (behaviorProps, _api, _args, translate) =>\n      behaviorProps['data-overflow-x'] === undefined &&\n      behaviorProps['data-overflow-y'] === undefined\n        ? {}\n        : {\n            role: 'group',\n            tabIndex: 0,\n            'aria-label': translate('scrollArea.viewport.label'),\n          },\n  },\n  variantProps: ['size'],\n  slots: (props: ScrollAreaRootProps) =>\n    scrollAreaRecipe({ size: resolveSize(props.size, 'ScrollArea') }),\n})\n"],"mappings":";;;;;;AAeA,MAAa,aAAa,gBAAqC,CAAC,CAAC;CAC/D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EAAE,WAAW;EAAO,OAAO;EAAO,QAAQ;CAAM;CAC1D,aAAa;EACX,WAAW,CAAC,aAAa;EACzB,OAAO,CAAC,aAAa;CACvB;CACA,oBAAoB,EAClB,WAAW,eAAe,MAAM,OAAO,cACrC,cAAc,uBAAuB,KAAA,KACrC,cAAc,uBAAuB,KAAA,IACjC,CAAC,IACD;EACE,MAAM;EACN,UAAU;EACV,cAAc,UAAU,2BAA2B;CACrD,EACR;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,iBAAiB,EAAE,MAAM,YAAY,MAAM,MAAM,YAAY,EAAE,CAAC;AACpE,CAAC"}