@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,76 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/scroll-area/scroll-area.recipe.ts
+const scrollAreaRecipe = sva({
+	slots: [
+		"root",
+		"viewport",
+		"content",
+		"scrollbar",
+		"thumb",
+		"corner"
+	],
+	base: {
+		root: {
+			overflow: "hidden",
+			width: "fill",
+			color: "foreground.default"
+		},
+		viewport: {
+			width: "fill",
+			height: "fill",
+			scrollbar: "hidden",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		content: {
+			width: "fill",
+			paddingInlineEnd: "inset.surface"
+		},
+		scrollbar: {
+			display: "flex",
+			touchAction: "none",
+			userSelect: "none",
+			padding: "inset.compact",
+			bg: "surface.transparent",
+			opacity: 0,
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&[data-orientation=\"vertical\"]": { width: "icon.sm" },
+			"&[data-orientation=\"horizontal\"]": {
+				height: "icon.sm",
+				flexDirection: "column"
+			},
+			"&[data-orientation=\"vertical\"][data-overflow-y], &[data-orientation=\"horizontal\"][data-overflow-x]": { "&:is([data-hover], [data-scrolling], [data-dragging], [data-part=root]:is(:hover, :focus-within) > *)": { opacity: 1 } }
+		},
+		thumb: {
+			flex: "1",
+			rounded: "pill",
+			bg: "border.default",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&[data-orientation=\"vertical\"]": { minHeight: "target.minimum" },
+			"&[data-orientation=\"horizontal\"]": { minWidth: "target.minimum" },
+			"&:is([data-part=scrollbar]:hover > *, [data-dragging])": { bg: "border.strong" },
+			_highContrast: { bg: "system.canvasText" }
+		},
+		corner: { bg: "surface.transparent" }
+	},
+	variants: { size: {
+		xs: { content: { padding: "inset.none" } },
+		sm: { content: { padding: "inset.compact" } },
+		md: { content: { padding: "inset.control" } },
+		lg: { content: { padding: "inset.overlay" } },
+		xl: { content: { padding: "inset.surface" } }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { scrollAreaRecipe };
+
+//# sourceMappingURL=scroll-area.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.recipe.mjs","names":[],"sources":["../../../src/components/scroll-area/scroll-area.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const scrollAreaRecipe = sva({\n  slots: ['root', 'viewport', 'content', 'scrollbar', 'thumb', 'corner'],\n  base: {\n    root: {\n      overflow: 'hidden',\n      width: 'fill',\n      color: 'foreground.default',\n    },\n    viewport: {\n      width: 'fill',\n      height: 'fill',\n      scrollbar: 'hidden',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: '-inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    content: {\n      width: 'fill',\n      paddingInlineEnd: 'inset.surface',\n    },\n    scrollbar: {\n      display: 'flex',\n      touchAction: 'none',\n      userSelect: 'none',\n      padding: 'inset.compact',\n      bg: 'surface.transparent',\n      opacity: 0,\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&[data-orientation=\"vertical\"]': { width: 'icon.sm' },\n      '&[data-orientation=\"horizontal\"]': { height: 'icon.sm', flexDirection: 'column' },\n      '&[data-orientation=\"vertical\"][data-overflow-y], &[data-orientation=\"horizontal\"][data-overflow-x]':\n        {\n          '&:is([data-hover], [data-scrolling], [data-dragging], [data-part=root]:is(:hover, :focus-within) > *)':\n            { opacity: 1 },\n        },\n    },\n    thumb: {\n      flex: '1',\n      rounded: 'pill',\n      bg: 'border.default',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&[data-orientation=\"vertical\"]': { minHeight: 'target.minimum' },\n      '&[data-orientation=\"horizontal\"]': { minWidth: 'target.minimum' },\n      '&:is([data-part=scrollbar]:hover > *, [data-dragging])': { bg: 'border.strong' },\n      _highContrast: { bg: 'system.canvasText' },\n    },\n    corner: {\n      bg: 'surface.transparent',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        content: { padding: 'inset.none' },\n      },\n      sm: {\n        content: { padding: 'inset.compact' },\n      },\n      md: {\n        content: { padding: 'inset.control' },\n      },\n      lg: {\n        content: { padding: 'inset.overlay' },\n      },\n      xl: {\n        content: { padding: 'inset.surface' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,IAAI;CAClC,OAAO;EAAC;EAAQ;EAAY;EAAW;EAAa;EAAS;CAAQ;CACrE,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,OAAO;GACP,QAAQ;GACR,WAAW;GACX,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,SAAS;GACP,OAAO;GACP,kBAAkB;EACpB;EACA,WAAW;GACT,SAAS;GACT,aAAa;GACb,YAAY;GACZ,SAAS;GACT,IAAI;GACJ,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,oCAAkC,EAAE,OAAO,UAAU;GACrD,sCAAoC;IAAE,QAAQ;IAAW,eAAe;GAAS;GACjF,0GACE,EACE,yGACE,EAAE,SAAS,EAAE,EACjB;EACJ;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,IAAI;GACJ,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,oCAAkC,EAAE,WAAW,iBAAiB;GAChE,sCAAoC,EAAE,UAAU,iBAAiB;GACjE,0DAA0D,EAAE,IAAI,gBAAgB;GAChF,eAAe,EAAE,IAAI,oBAAoB;EAC3C;EACA,QAAQ,EACN,IAAI,sBACN;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,SAAS,EAAE,SAAS,aAAa,EACnC;EACA,IAAI,EACF,SAAS,EAAE,SAAS,gBAAgB,EACtC;EACA,IAAI,EACF,SAAS,EAAE,SAAS,gBAAgB,EACtC;EACA,IAAI,EACF,SAAS,EAAE,SAAS,gBAAgB,EACtC;EACA,IAAI,EACF,SAAS,EAAE,SAAS,gBAAgB,EACtC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Select, SelectHighlightChangeDetails, SelectPositioning, SelectRootProps, SelectValueChangeDetails } from "./select.mjs";
+export { Select, type SelectHighlightChangeDetails, type SelectPositioning, type SelectRootProps, type SelectValueChangeDetails };

package/dist/components/select/index.mjs

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

package/dist/components/select/select.d.mts

@@ -0,0 +1,90 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { DomAttributes, PartComponent, PartOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { SynapseCollection } from "../../shared/collection.mjs";
+import { ReactNode } from "react";
+//#region src/components/select/select.d.ts
+export interface SelectPositioning {
+  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+  gutter?: number;
+  sameWidth?: boolean;
+}
+export interface SelectValueChangeDetails {
+  readonly value: readonly string[];
+}
+export interface SelectHighlightChangeDetails {
+  readonly highlightedValue: string | null;
+}
+export interface SelectRootProps<TItem> {
+  /** `createCollection`으로 만든 전체 컬렉션. 윈도잉은 이것을 바꾸지 않습니다. */
+  collection: SynapseCollection<TItem>;
+  /** 제어되는 선택. */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: SelectValueChangeDetails) => void;
+  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */
+  highlightedValue?: string | null;
+  /** 비제어 모드에서 처음 하이라이트되는 아이템. */
+  defaultHighlightedValue?: string | null;
+  /** 하이라이트가 옮겨 갈 때 호출됩니다. */
+  onHighlightChange?: (details: SelectHighlightChangeDetails) => void;
+  /** 제어되는 목록의 열림 상태. */
+  open?: boolean;
+  /** 비제어 모드의 초기 열림 상태. */
+  defaultOpen?: boolean;
+  /** 목록이 열리거나 닫힐 때마다 호출됩니다. */
+  onOpenChange?: (details: {
+    open: boolean;
+  }) => void;
+  /** 둘 이상을 선택할 수 있게 합니다. 값마다 폼 항목을 하나씩 제출합니다. */
+  multiple?: boolean;
+  /** 이미 선택된 아이템을 다시 선택하면 선택이 해제됩니다. */
+  deselectable?: boolean;
+  /** 선택하면 목록을 닫습니다. 단일 Select에서는 기본값이 true입니다. */
+  closeOnSelect?: boolean;
+  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */
+  loopFocus?: boolean;
+  /** 목록이 놓이는 위치. */
+  positioning?: SelectPositioning;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 Select를 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 Select는 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 Select는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 무언가가 선택돼 있어야 합니다. */
+  required?: boolean;
+  /** 이 Select에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+declare function SelectRoot<TItem>(props: SelectRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes): ReactNode;
+export declare const Select: {
+  meta: SynapseComponentMeta;
+  Root: typeof SelectRoot;
+  ClearTrigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  Content: PartComponent<HTMLElement, Record<string, unknown>>;
+  Control: PartComponent<HTMLElement, Record<string, unknown>>;
+  Indicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  Item: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroup: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroupLabel: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemIndicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemText: PartComponent<HTMLElement, Record<string, unknown>>;
+  Label: PartComponent<HTMLElement, Record<string, unknown>>;
+  List: PartComponent<HTMLElement, Record<string, unknown>>;
+  Positioner: PartComponent<HTMLElement, Record<string, unknown>>;
+  Trigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  ValueText: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=select.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/select/select.tsx"],"mappings":";;;;;;iBAiBiB;EACf;EACA;EACA;;iBAGe;WACN;;iBAGM;WACN;;iBAGM,gBAAgB;;EAE/B,YAAY,kBAAkB;;EAE9B;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,qBAAqB,SAAS;;EAE9B;;EAEA;;EAEA,gBAAgB;IAAW;;;EAE3B;;EAEA;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;iBAiEO,WAAW,OAClB,OAAO,gBAAgB,SAAS,aAAa,eAAe,gBAC3D;qBAMU;QAAA"}

package/dist/components/select/select.mjs

@@ -0,0 +1,83 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { chevronsUpDown } from "../../icons/src/chevrons-up-down.mjs";
+import { close } from "../../icons/src/close.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { selectRecipe } from "./select.recipe.mjs";
+import { unwrap } from "../../shared/collection-internal.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as select from "@zag-js/select";
+//#region src/components/select/select.tsx
+const base = defineComponent()({
+	name: "Select",
+	module: select,
+	rootPart: "root",
+	elements: {
+		valueText: "span",
+		itemText: "span",
+		indicator: "span",
+		itemIndicator: "span"
+	},
+	defaultContent: {
+		indicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronsUpDown }),
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }),
+		valueText: (api, t) => api.valueAsString || t("select.trigger.placeholder")
+	},
+	getterProps: {
+		item: ["item"],
+		itemText: ["item"],
+		itemIndicator: ["item"],
+		itemGroup: ["id"],
+		itemGroupLabel: ["htmlFor"]
+	},
+	rootOwnedGetters: [{
+		name: "hiddenSelect",
+		getter: "getHiddenSelectProps",
+		render: (props, api) => createElement("select", props, api.collection.items.map((item) => {
+			const value = api.collection.getItemValue(item) ?? "";
+			return createElement("option", {
+				key: value,
+				value
+			}, api.collection.stringifyItem(item) ?? value);
+		}))
+	}],
+	machineTranslations: { clearTriggerLabel: "select.clearTrigger.label" },
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			trigger: field.control
+		}),
+		describe: ["trigger"],
+		labelable: false
+	},
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Select");
+		return {
+			...selectRecipe({ size }),
+			trigger: inputPartClass(size, selectRecipe.raw({ size }).trigger)
+		};
+	}
+});
+function SelectRoot(props) {
+	const { collection, ...rest } = props;
+	return createElement(base.Root, {
+		...rest,
+		collection: unwrap(collection)
+	});
+}
+SelectRoot.displayName = base.Root.displayName;
+const Select = {
+	...base,
+	Root: SelectRoot
+};
+//#endregion
+export { Select };
+
+//# sourceMappingURL=select.mjs.map

package/dist/components/select/select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.mjs","names":[],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, chevronsUpDown, close } from '@neurocle/synapse-icons'\nimport type { ListCollection } from '@zag-js/collection'\nimport * as select from '@zag-js/select'\nimport { createElement, type ReactNode } from 'react'\n\nimport { selectRecipe } from '#/components/select/select.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { unwrap } from '#/shared/collection-internal.ts'\nimport type { SynapseCollection } from '#/shared/collection.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { DomAttributes, PartOwnProps } from '#/system/types.ts'\n\nexport interface SelectPositioning {\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n  gutter?: number\n  sameWidth?: boolean\n}\n\nexport interface SelectValueChangeDetails {\n  readonly value: readonly string[]\n}\n\nexport interface SelectHighlightChangeDetails {\n  readonly highlightedValue: string | null\n}\n\nexport interface SelectRootProps<TItem> {\n  /** `createCollection`으로 만든 전체 컬렉션. 윈도잉은 이것을 바꾸지 않습니다. */\n  collection: SynapseCollection<TItem>\n  /** 제어되는 선택. */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: SelectValueChangeDetails) => void\n  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */\n  highlightedValue?: string | null\n  /** 비제어 모드에서 처음 하이라이트되는 아이템. */\n  defaultHighlightedValue?: string | null\n  /** 하이라이트가 옮겨 갈 때 호출됩니다. */\n  onHighlightChange?: (details: SelectHighlightChangeDetails) => void\n  /** 제어되는 목록의 열림 상태. */\n  open?: boolean\n  /** 비제어 모드의 초기 열림 상태. */\n  defaultOpen?: boolean\n  /** 목록이 열리거나 닫힐 때마다 호출됩니다. */\n  onOpenChange?: (details: { open: boolean }) => void\n  /** 둘 이상을 선택할 수 있게 합니다. 값마다 폼 항목을 하나씩 제출합니다. */\n  multiple?: boolean\n  /** 이미 선택된 아이템을 다시 선택하면 선택이 해제됩니다. */\n  deselectable?: boolean\n  /** 선택하면 목록을 닫습니다. 단일 Select에서는 기본값이 true입니다. */\n  closeOnSelect?: boolean\n  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */\n  loopFocus?: boolean\n  /** 목록이 놓이는 위치. */\n  positioning?: SelectPositioning\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 Select를 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 Select는 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 Select는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 무언가가 선택돼 있어야 합니다. */\n  required?: boolean\n  /** 이 Select에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\ntype SelectDefinitionProps = Omit<SelectRootProps<never>, 'collection'> & {\n  collection: ListCollection<unknown>\n}\n\nconst base = defineComponent<SelectDefinitionProps>()({\n  name: 'Select',\n  module: select,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n    itemText: 'span',\n    indicator: 'span',\n    itemIndicator: 'span',\n  },\n  defaultContent: {\n    indicator: () => <Icon icon={chevronsUpDown} />,\n    clearTrigger: () => <Icon icon={close} />,\n    itemIndicator: () => <Icon icon={checkmark} />,\n    valueText: (api, t) => api.valueAsString || t('select.trigger.placeholder'),\n  },\n  getterProps: {\n    item: ['item'],\n    itemText: ['item'],\n    itemIndicator: ['item'],\n    itemGroup: ['id'],\n    itemGroupLabel: ['htmlFor'],\n  },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenSelect',\n      getter: 'getHiddenSelectProps',\n      render: (props, api) =>\n        createElement(\n          'select',\n          props,\n          api.collection.items.map((item) => {\n            const value = api.collection.getItemValue(item) ?? ''\n            return createElement(\n              'option',\n              { key: value, value },\n              api.collection.stringifyItem(item) ?? value,\n            )\n          }),\n        ),\n    },\n  ],\n  machineTranslations: { clearTriggerLabel: 'select.clearTrigger.label' },\n  field: {\n    ids: (field) => ({ label: field.label, trigger: field.control }),\n    describe: ['trigger'],\n    labelable: false,\n  },\n  variantProps: ['size'],\n  slots: (props: SelectDefinitionProps) => {\n    const size = resolveSize(props.size, 'Select')\n    return {\n      ...selectRecipe({ size }),\n      trigger: inputPartClass(size, selectRecipe.raw({ size }).trigger),\n    }\n  },\n})\n\nfunction SelectRoot<TItem>(\n  props: SelectRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes,\n): ReactNode {\n  const { collection, ...rest } = props\n  return createElement(base.Root, { ...rest, collection: unwrap(collection) })\n}\nSelectRoot.displayName = base.Root.displayName\n\nexport const Select = {\n  ...base,\n  Root: SelectRoot,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsFA,MAAM,OAAO,gBAAuC,CAAC,CAAC;CACpD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,WAAW;EACX,UAAU;EACV,WAAW;EACX,eAAe;CACjB;CACA,gBAAgB;EACd,iBAAiB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;EAC9C,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,qBAAqB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;EAC7C,YAAY,KAAK,MAAM,IAAI,iBAAiB,EAAE,4BAA4B;CAC5E;CACA,aAAa;EACX,MAAM,CAAC,MAAM;EACb,UAAU,CAAC,MAAM;EACjB,eAAe,CAAC,MAAM;EACtB,WAAW,CAAC,IAAI;EAChB,gBAAgB,CAAC,SAAS;CAC5B;CACA,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,OAAO,QACd,cACE,UACA,OACA,IAAI,WAAW,MAAM,KAAK,SAAS;GACjC,MAAM,QAAQ,IAAI,WAAW,aAAa,IAAI,KAAK;GACnD,OAAO,cACL,UACA;IAAE,KAAK;IAAO;GAAM,GACpB,IAAI,WAAW,cAAc,IAAI,KAAK,KACxC;EACF,CAAC,CACH;CACJ,CACF;CACA,qBAAqB,EAAE,mBAAmB,4BAA4B;CACtE,OAAO;EACL,MAAM,WAAW;GAAE,OAAO,MAAM;GAAO,SAAS,MAAM;EAAQ;EAC9D,UAAU,CAAC,SAAS;EACpB,WAAW;CACb;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAAiC;EACvC,MAAM,OAAO,YAAY,MAAM,MAAM,QAAQ;EAC7C,OAAO;GACL,GAAG,aAAa,EAAE,KAAK,CAAC;GACxB,SAAS,eAAe,MAAM,aAAa,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO;EAClE;CACF;AACF,CAAC;AAED,SAAS,WACP,OACW;CACX,MAAM,EAAE,YAAY,GAAG,SAAS;CAChC,OAAO,cAAc,KAAK,MAAM;EAAE,GAAG;EAAM,YAAY,OAAO,UAAU;CAAE,CAAC;AAC7E;AACA,WAAW,cAAc,KAAK,KAAK;AAEnC,MAAa,SAAS;CACpB,GAAG;CACH,MAAM;AACR"}

package/dist/components/select/select.recipe.mjs

@@ -0,0 +1,298 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/select/select.recipe.ts
+const selectRecipe = sva({
+	slots: [
+		"label",
+		"positioner",
+		"trigger",
+		"indicator",
+		"clearTrigger",
+		"item",
+		"itemText",
+		"itemIndicator",
+		"itemGroup",
+		"itemGroupLabel",
+		"list",
+		"content",
+		"root",
+		"control",
+		"valueText"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			position: "relative",
+			"--select-clear-room": "calc(token(sizes.target.minimum) + token(spacing.gap.inline))",
+			"&:has(> [data-part=clear-trigger]:not([hidden])) > [data-part=trigger] > [data-part=value-text]": { marginInlineEnd: "var(--select-clear-room)" }
+		},
+		trigger: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "gap.inline",
+			textAlign: "start",
+			"&[data-state=open]:hover": { borderColor: "border.focus" },
+			"&[data-state=open]": {
+				borderColor: "border.focus",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			"&[data-state=open]:is([data-invalid], [aria-invalid=true])": {
+				borderColor: "error.default",
+				outlineWidth: "focus",
+				outlineColor: "border.focus"
+			},
+			"&[data-placeholder-shown]": { color: "foreground.subtle" }
+		},
+		valueText: {
+			flex: "1",
+			minWidth: "0",
+			overflowWrap: "anywhere"
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "foreground.default",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_disabled: { color: "foreground.disabled" }
+		},
+		clearTrigger: {
+			position: "absolute",
+			insetInlineEnd: "var(--select-clear-end)",
+			insetBlock: "inset.none",
+			marginBlock: "auto",
+			height: "target.minimum",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "foreground.subtle",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				}
+			}
+		},
+		positioner: { zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))" },
+		content: {
+			layerStyle: "reveal",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: "surface.overlayMin",
+			maxWidth: "surface.overlayMax",
+			maxHeight: "surface.overlayMax",
+			overflowY: "auto",
+			paddingBlock: "inset.compact",
+			paddingInline: "inset.none",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "overlay",
+			pointerEvents: "auto"
+		},
+		list: {
+			display: "flex",
+			flexDirection: "column",
+			outline: "none"
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column",
+			"&:not(:last-of-type)": {
+				paddingBlockEnd: "inset.compact",
+				marginBlockEnd: "inset.compact",
+				borderBlockEndWidth: "hairline",
+				borderBlockEndStyle: "solid",
+				borderColor: "border.muted"
+			}
+		},
+		itemGroupLabel: {
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			textStyle: "detail",
+			color: "foreground.subtle"
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			color: "foreground.default",
+			cursor: "default",
+			userSelect: "none",
+			"&[data-state=checked]": { color: "primary.onSurface" },
+			_highlighted: {
+				bg: "secondary.default",
+				color: "foreground.default",
+				"&[data-state=checked]": { color: "primary.onSurface" },
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		itemText: { overflowWrap: "anywhere" },
+		itemIndicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "primary.onSurface"
+		}
+	},
+	variants: { size: {
+		xs: {
+			control: { "--select-clear-end": "calc(token(borderWidths.hairline) + token(spacing.inset.compact) + token(sizes.icon.xs) + token(spacing.gap.inline))" },
+			item: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			control: { "--select-clear-end": "calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.sm) + token(spacing.gap.inline))" },
+			item: {
+				minHeight: "target.minimum",
+				textStyle: "detail"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			control: { "--select-clear-end": "calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.md) + token(spacing.gap.inline))" },
+			item: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			control: { "--select-clear-end": "calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.md) + token(spacing.gap.inline))" },
+			item: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			control: { "--select-clear-end": "calc(token(borderWidths.hairline) + token(spacing.inset.surface) + token(sizes.icon.lg) + token(spacing.gap.inline))" },
+			item: {
+				minHeight: "control.lg",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			clearTrigger: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { selectRecipe };
+
+//# sourceMappingURL=select.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.recipe.mjs","names":[],"sources":["../../../src/components/select/select.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const selectRecipe = sva({\n  slots: [\n    'label',\n    'positioner',\n    'trigger',\n    'indicator',\n    'clearTrigger',\n    'item',\n    'itemText',\n    'itemIndicator',\n    'itemGroup',\n    'itemGroupLabel',\n    'list',\n    'content',\n    'root',\n    'control',\n    'valueText',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      position: 'relative',\n      '--select-clear-room': 'calc(token(sizes.target.minimum) + token(spacing.gap.inline))',\n      // clear trigger는 trigger 위에 떠서 값과 indicator 사이에 놓입니다. 보이는 동안에는 값이 그 아래로\n      // 파고들지 않고 그 앞에서 끝납니다.\n      '&:has(> [data-part=clear-trigger]:not([hidden])) > [data-part=trigger] > [data-part=value-text]':\n        { marginInlineEnd: 'var(--select-clear-room)' },\n    },\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 'gap.inline',\n      textAlign: 'start',\n      '&[data-state=open]:hover': { borderColor: 'border.focus' },\n      '&[data-state=open]': {\n        borderColor: 'border.focus',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      '&[data-state=open]:is([data-invalid], [aria-invalid=true])': {\n        borderColor: 'error.default',\n        outlineWidth: 'focus',\n        outlineColor: 'border.focus',\n      },\n      '&[data-placeholder-shown]': { color: 'foreground.subtle' },\n    },\n    valueText: {\n      flex: '1',\n      minWidth: '0',\n      overflowWrap: 'anywhere',\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'foreground.default',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    clearTrigger: {\n      position: 'absolute',\n      // trigger의 테두리, 끝 여백, indicator, 간격(크기별로 control에 설정합니다)만큼 떨어져 있어서\n      // 모든 크기에서 indicator 바로 앞에 놓입니다.\n      insetInlineEnd: 'var(--select-clear-end)',\n      insetBlock: 'inset.none',\n      marginBlock: 'auto',\n      height: 'target.minimum',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.subtle',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n      },\n    },\n    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n    },\n    content: {\n      layerStyle: 'reveal',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 'surface.overlayMin',\n      maxWidth: 'surface.overlayMax',\n      maxHeight: 'surface.overlayMax',\n      overflowY: 'auto',\n      paddingBlock: 'inset.compact',\n      paddingInline: 'inset.none',\n      rounded: 'overlay',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.overlay',\n      bg: 'surface.overlay',\n      color: 'foreground.default',\n      boxShadow: 'overlay',\n      pointerEvents: 'auto',\n    },\n    list: {\n      display: 'flex',\n      flexDirection: 'column',\n      outline: 'none',\n    },\n    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      '&:not(:last-of-type)': {\n        paddingBlockEnd: 'inset.compact',\n        marginBlockEnd: 'inset.compact',\n        borderBlockEndWidth: 'hairline',\n        borderBlockEndStyle: 'solid',\n        borderColor: 'border.muted',\n      },\n    },\n    itemGroupLabel: {\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      textStyle: 'detail',\n      color: 'foreground.subtle',\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      color: 'foreground.default',\n      cursor: 'default',\n      userSelect: 'none',\n      '&[data-state=checked]': { color: 'primary.onSurface' },\n      _highlighted: {\n        bg: 'secondary.default',\n        color: 'foreground.default',\n        '&[data-state=checked]': { color: 'primary.onSurface' },\n        _highContrast: { bg: 'system.highlight', color: 'system.highlightText' },\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    itemText: {\n      overflowWrap: 'anywhere',\n    },\n    itemIndicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'primary.onSurface',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        control: {\n          '--select-clear-end':\n            'calc(token(borderWidths.hairline) + token(spacing.inset.compact) + token(sizes.icon.xs) + token(spacing.gap.inline))',\n        },\n        item: { minHeight: 'control.xs', textStyle: 'detail' },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        clearTrigger: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        control: {\n          '--select-clear-end':\n            'calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.sm) + token(spacing.gap.inline))',\n        },\n        item: { minHeight: 'target.minimum', textStyle: 'detail' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        clearTrigger: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        control: {\n          '--select-clear-end':\n            'calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.md) + token(spacing.gap.inline))',\n        },\n        item: { minHeight: 'control.sm', textStyle: 'body' },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        clearTrigger: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        control: {\n          '--select-clear-end':\n            'calc(token(borderWidths.hairline) + token(spacing.inset.control) + token(sizes.icon.md) + token(spacing.gap.inline))',\n        },\n        item: { minHeight: 'control.md', textStyle: 'body' },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        clearTrigger: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        control: {\n          '--select-clear-end':\n            'calc(token(borderWidths.hairline) + token(spacing.inset.surface) + token(sizes.icon.lg) + token(spacing.gap.inline))',\n        },\n        item: { minHeight: 'control.lg', textStyle: 'body' },\n        indicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        clearTrigger: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        itemIndicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Separator, SeparatorRootProps } from "./separator.mjs";
+export { Separator, type SeparatorRootProps };

package/dist/components/separator/index.mjs

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

package/dist/components/separator/separator.anatomy.mjs

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

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

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