@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/editable/editable.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { close } from "../../icons/src/close.mjs";
+import { edit } from "../../icons/src/edit.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { editableRecipe } from "./editable.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as editable from "@zag-js/editable";
+//#region src/components/editable/editable.tsx
+const toMachineProps = (props) => ({
+	...props.open === void 0 ? {} : { edit: props.open },
+	...props.defaultOpen === void 0 ? {} : { defaultEdit: props.defaultOpen },
+	...props.onOpenChange === void 0 ? {} : { onEditChange: (details) => props.onOpenChange?.({ open: details.edit }) }
+});
+const Editable = defineComponent()({
+	name: "Editable",
+	module: editable,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			input: field.control
+		}),
+		describe: ["preview", "input"]
+	},
+	elements: {
+		input: "input",
+		preview: "span"
+	},
+	defaultContent: {
+		preview: (api) => api.valueText,
+		editTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: edit }),
+		submitTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }),
+		cancelTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close })
+	},
+	machineTranslations: {
+		input: "editable.input.label",
+		edit: "editable.editTrigger.label",
+		submit: "editable.submitTrigger.label",
+		cancel: "editable.cancelTrigger.label"
+	},
+	variantProps: [
+		"open",
+		"defaultOpen",
+		"onOpenChange",
+		"size"
+	],
+	useMachineProps: toMachineProps,
+	slots: (props) => {
+		const size = resolveSize(props.size, "Editable");
+		const own = editableRecipe.raw({ size });
+		const secondary = {
+			variant: "outline",
+			tone: "neutral",
+			size
+		};
+		return {
+			...editableRecipe({ size }),
+			editTrigger: buttonPartClass(secondary, own.editTrigger),
+			submitTrigger: buttonPartClass({
+				variant: "solid",
+				tone: "primary",
+				size
+			}, own.submitTrigger),
+			cancelTrigger: buttonPartClass(secondary, own.cancelTrigger),
+			input: inputPartClass(size, own.input)
+		};
+	}
+});
+//#endregion
+export { Editable };
+
+//# sourceMappingURL=editable.mjs.map

package/dist/components/editable/editable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable.mjs","names":[],"sources":["../../../src/components/editable/editable.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, close, edit } from '@neurocle/synapse-icons'\nimport * as editable from '@zag-js/editable'\n\nimport type { OpenChangeDetails, ValueChangeDetails } from '#/components/details.ts'\nimport { editableRecipe } from '#/components/editable/editable.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass, type ButtonStyle } from '#/shared/button-style.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'\n\nexport type EditableActivationMode = 'focus' | 'dblclick' | 'click' | 'none'\n\nexport type EditableSubmitMode = 'blur' | 'enter' | 'both' | 'none'\n\nexport type EditablePlaceholder = string | { readonly edit: string; readonly preview: string }\n\nexport interface EditableRootProps {\n  /** 제어되는 값. */\n  value?: string\n  /** 비제어 초기 값. `value`가 주어지면 무시됩니다. */\n  defaultValue?: string\n  /** 편집 중 키를 누를 때마다 알림을 받습니다. */\n  onValueChange?: (details: ValueChangeDetails<string>) => void\n  /** 편집이 확정될 때 알림을 받습니다 — 저장할 때 쓸 콜백입니다. */\n  onValueCommit?: (details: ValueChangeDetails<string>) => void\n  /** 편집이 취소되고 이전 값이 복원될 때 알림을 받습니다. */\n  onValueRevert?: (details: ValueChangeDetails<string>) => void\n  /** 제어되는 편집 모드. machine의 `edit`을 다른 컴포넌트와 같은 이름인 `open`으로 받습니다. */\n  open?: boolean\n  /** 비제어 초기 편집 모드. `open`이 주어지면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 편집 모드에 들어가거나 나올 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 무엇이 편집을 시작시키는지. 기본값은 `focus`입니다. */\n  activationMode?: EditableActivationMode\n  /** 무엇이 편집을 확정하는지. 기본값은 `both`이며, 블러 또는 Enter입니다. */\n  submitMode?: EditableSubmitMode\n  /** 입력이 포커스를 받을 때 값 전체를 선택해, 타이핑하면 값이 대체되게 합니다. */\n  selectOnFocus?: boolean\n  /** 고정 너비를 유지하는 대신 입력이 내용에 따라 늘어나게 합니다. */\n  autoResize?: boolean\n  /** 입력이 받아들이는 값의 최대 길이. */\n  maxLength?: number\n  /** 값이 비었을 때 보입니다 — 두 모드에 한 문자열을 쓰거나, 모드별로 하나씩 줍니다. */\n  placeholder?: EditablePlaceholder\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 Editable을 id로 폼과 연결합니다. */\n  form?: string\n  /** 비활성화된 Editable은 제출되지 않고 편집할 수도 없습니다. */\n  disabled?: boolean\n  /** 읽기 전용 Editable은 값을 제출하지만 편집할 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 필드에 값이 있어야 합니다. */\n  required?: boolean\n  /** 이 Editable에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: EditableRootProps): Record<string, unknown> => ({\n  ...(props.open === undefined ? {} : { edit: props.open }),\n  ...(props.defaultOpen === undefined ? {} : { defaultEdit: props.defaultOpen }),\n  ...(props.onOpenChange === undefined\n    ? {}\n    : {\n        onEditChange: (details: { edit: boolean }) => props.onOpenChange?.({ open: details.edit }),\n      }),\n})\n\nexport const Editable = defineComponent<EditableRootProps>()({\n  name: 'Editable',\n  module: editable,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({ label: field.label, input: field.control }),\n    describe: ['preview', 'input'],\n  },\n  elements: { input: 'input', preview: 'span' },\n  defaultContent: {\n    preview: (api) => api.valueText,\n    editTrigger: () => <Icon icon={edit} />,\n    submitTrigger: () => <Icon icon={checkmark} />,\n    cancelTrigger: () => <Icon icon={close} />,\n  },\n  machineTranslations: {\n    input: 'editable.input.label',\n    edit: 'editable.editTrigger.label',\n    submit: 'editable.submitTrigger.label',\n    cancel: 'editable.cancelTrigger.label',\n  },\n  variantProps: ['open', 'defaultOpen', 'onOpenChange', 'size'],\n  useMachineProps: toMachineProps,\n  slots: (props: EditableRootProps) => {\n    const size = resolveSize(props.size, 'Editable')\n    const own = editableRecipe.raw({ size })\n    const secondary: ButtonStyle = { variant: 'outline', tone: 'neutral', size }\n    return {\n      ...editableRecipe({ size }),\n      editTrigger: buttonPartClass(secondary, own.editTrigger),\n      submitTrigger: buttonPartClass(\n        { variant: 'solid', tone: 'primary', size },\n        own.submitTrigger,\n      ),\n      cancelTrigger: buttonPartClass(secondary, own.cancelTrigger),\n      input: inputPartClass(size, own.input),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAM,kBAAkB,WAAuD;CAC7E,GAAI,MAAM,SAAS,KAAA,IAAY,CAAC,IAAI,EAAE,MAAM,MAAM,KAAK;CACvD,GAAI,MAAM,gBAAgB,KAAA,IAAY,CAAC,IAAI,EAAE,aAAa,MAAM,YAAY;CAC5E,GAAI,MAAM,iBAAiB,KAAA,IACvB,CAAC,IACD,EACE,eAAe,YAA+B,MAAM,eAAe,EAAE,MAAM,QAAQ,KAAK,CAAC,EAC3F;AACN;AAEA,MAAa,WAAW,gBAAmC,CAAC,CAAC;CAC3D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,OAAO;EACL,MAAM,WAAW;GAAE,OAAO,MAAM;GAAO,OAAO,MAAM;EAAQ;EAC5D,UAAU,CAAC,WAAW,OAAO;CAC/B;CACA,UAAU;EAAE,OAAO;EAAS,SAAS;CAAO;CAC5C,gBAAgB;EACd,UAAU,QAAQ,IAAI;EACtB,mBAAmB,oBAAC,MAAD,EAAM,MAAM,KAAO,CAAA;EACtC,qBAAqB,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA;EAC7C,qBAAqB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;CAC3C;CACA,qBAAqB;EACnB,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;CACV;CACA,cAAc;EAAC;EAAQ;EAAe;EAAgB;CAAM;CAC5D,iBAAiB;CACjB,QAAQ,UAA6B;EACnC,MAAM,OAAO,YAAY,MAAM,MAAM,UAAU;EAC/C,MAAM,MAAM,eAAe,IAAI,EAAE,KAAK,CAAC;EACvC,MAAM,YAAyB;GAAE,SAAS;GAAW,MAAM;GAAW;EAAK;EAC3E,OAAO;GACL,GAAG,eAAe,EAAE,KAAK,CAAC;GAC1B,aAAa,gBAAgB,WAAW,IAAI,WAAW;GACvD,eAAe,gBACb;IAAE,SAAS;IAAS,MAAM;IAAW;GAAK,GAC1C,IAAI,aACN;GACA,eAAe,gBAAgB,WAAW,IAAI,aAAa;GAC3D,OAAO,eAAe,MAAM,IAAI,KAAK;EACvC;CACF;AACF,CAAC"}

package/dist/components/editable/editable.recipe.mjs

@@ -0,0 +1,152 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/editable/editable.recipe.ts
+const editableRecipe = sva({
+	slots: [
+		"root",
+		"area",
+		"label",
+		"preview",
+		"input",
+		"editTrigger",
+		"submitTrigger",
+		"cancelTrigger",
+		"control"
+	],
+	base: {
+		root: {
+			display: "inline-grid",
+			gridTemplateColumns: "1fr auto",
+			alignItems: "center",
+			columnGap: "gap.related",
+			rowGap: "gap.inline",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: {
+			gridColumn: "1 / -1",
+			color: "foreground.muted"
+		},
+		area: {
+			display: "grid",
+			alignItems: "center",
+			minWidth: "fill"
+		},
+		preview: {
+			gridArea: "1 / 1",
+			display: "flex",
+			alignItems: "center",
+			minHeight: "target.minimum",
+			paddingBlock: "inset.compact",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			color: "foreground.default",
+			whiteSpace: "pre-wrap",
+			overflowWrap: "anywhere",
+			cursor: "text",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not([data-disabled], [aria-readonly=true]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			_placeholderShown: { color: "foreground.subtle" },
+			"&[aria-readonly=true]": {
+				bg: "background.subtle",
+				borderStyle: "dashed",
+				borderColor: "border.default",
+				cursor: "default"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		input: { gridArea: "1 / 1" },
+		control: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "gap.related"
+		},
+		editTrigger: {},
+		submitTrigger: {},
+		cancelTrigger: {}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "detail" },
+			label: { textStyle: "detail" },
+			preview: {
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "detail"
+			},
+			editTrigger: { height: "control.xs" },
+			submitTrigger: { height: "control.xs" },
+			cancelTrigger: { height: "control.xs" }
+		},
+		sm: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			preview: {
+				minHeight: "control.sm",
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			editTrigger: { height: "control.sm" },
+			submitTrigger: { height: "control.sm" },
+			cancelTrigger: { height: "control.sm" }
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			preview: {
+				minHeight: "control.md",
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			editTrigger: { height: "control.md" },
+			submitTrigger: { height: "control.md" },
+			cancelTrigger: { height: "control.md" }
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			preview: {
+				minHeight: "control.lg",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			editTrigger: { height: "control.lg" },
+			submitTrigger: { height: "control.lg" },
+			cancelTrigger: { height: "control.lg" }
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			preview: {
+				minHeight: "control.xl",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			editTrigger: { height: "control.xl" },
+			submitTrigger: { height: "control.xl" },
+			cancelTrigger: { height: "control.xl" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { editableRecipe };
+
+//# sourceMappingURL=editable.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editable.recipe.mjs","names":[],"sources":["../../../src/components/editable/editable.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const editableRecipe = sva({\n  slots: [\n    'root',\n    'area',\n    'label',\n    'preview',\n    'input',\n    'editTrigger',\n    'submitTrigger',\n    'cancelTrigger',\n    'control',\n  ],\n  base: {\n    root: {\n      display: 'inline-grid',\n      gridTemplateColumns: '1fr auto',\n      alignItems: 'center',\n      columnGap: 'gap.related',\n      rowGap: 'gap.inline',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      gridColumn: '1 / -1',\n      color: 'foreground.muted',\n    },\n    area: {\n      display: 'grid',\n      alignItems: 'center',\n      minWidth: 'fill',\n    },\n    preview: {\n      gridArea: '1 / 1',\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 'target.minimum',\n      paddingBlock: 'inset.compact',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      color: 'foreground.default',\n      whiteSpace: 'pre-wrap',\n      overflowWrap: 'anywhere',\n      cursor: 'text',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not([data-disabled], [aria-readonly=true]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      _placeholderShown: { color: 'foreground.subtle' },\n      '&[aria-readonly=true]': {\n        bg: 'background.subtle',\n        borderStyle: 'dashed',\n        borderColor: 'border.default',\n        cursor: 'default',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    input: {\n      gridArea: '1 / 1',\n    },\n    control: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n    },\n    editTrigger: {},\n    submitTrigger: {},\n    cancelTrigger: {},\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'detail' },\n        label: { textStyle: 'detail' },\n        preview: { minHeight: 'control.xs', paddingInline: 'inset.compact', textStyle: 'detail' },\n        editTrigger: { height: 'control.xs' },\n        submitTrigger: { height: 'control.xs' },\n        cancelTrigger: { height: 'control.xs' },\n      },\n      sm: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        preview: { minHeight: 'control.sm', paddingInline: 'inset.control', textStyle: 'body' },\n        editTrigger: { height: 'control.sm' },\n        submitTrigger: { height: 'control.sm' },\n        cancelTrigger: { height: 'control.sm' },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        preview: { minHeight: 'control.md', paddingInline: 'inset.control', textStyle: 'body' },\n        editTrigger: { height: 'control.md' },\n        submitTrigger: { height: 'control.md' },\n        cancelTrigger: { height: 'control.md' },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        preview: { minHeight: 'control.lg', paddingInline: 'inset.overlay', textStyle: 'body' },\n        editTrigger: { height: 'control.lg' },\n        submitTrigger: { height: 'control.lg' },\n        cancelTrigger: { height: 'control.lg' },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        preview: { minHeight: 'control.xl', paddingInline: 'inset.surface', textStyle: 'subtitle' },\n        editTrigger: { height: 'control.xl' },\n        submitTrigger: { height: 'control.xl' },\n        cancelTrigger: { height: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,qBAAqB;GACrB,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,OAAO;GACL,YAAY;GACZ,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,SAAS;GACP,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,cAAc;GACd,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,OAAO;GACP,YAAY;GACZ,cAAc;GACd,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,sDAAsD;IACpD,IAAI;IACJ,OAAO;GACT;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,mBAAmB,EAAE,OAAO,oBAAoB;GAChD,yBAAyB;IACvB,IAAI;IACJ,aAAa;IACb,aAAa;IACb,QAAQ;GACV;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe,EAAE,OAAO,kBAAkB;GAC5C;EACF;EACA,OAAO,EACL,UAAU,QACZ;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,aAAa,CAAC;EACd,eAAe,CAAC;EAChB,eAAe,CAAC;CAClB;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EAAE,WAAW,SAAS;GAC5B,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAS;GACxF,aAAa,EAAE,QAAQ,aAAa;GACpC,eAAe,EAAE,QAAQ,aAAa;GACtC,eAAe,EAAE,QAAQ,aAAa;EACxC;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAO;GACtF,aAAa,EAAE,QAAQ,aAAa;GACpC,eAAe,EAAE,QAAQ,aAAa;GACtC,eAAe,EAAE,QAAQ,aAAa;EACxC;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAO;GACtF,aAAa,EAAE,QAAQ,aAAa;GACpC,eAAe,EAAE,QAAQ,aAAa;GACtC,eAAe,EAAE,QAAQ,aAAa;EACxC;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAO;GACtF,aAAa,EAAE,QAAQ,aAAa;GACpC,eAAe,EAAE,QAAQ,aAAa;GACtC,eAAe,EAAE,QAAQ,aAAa;EACxC;EACA,IAAI;GACF,MAAM,EAAE,WAAW,WAAW;GAC9B,OAAO,EAAE,WAAW,OAAO;GAC3B,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAW;GAC1F,aAAa,EAAE,QAAQ,aAAa;GACpC,eAAe,EAAE,QAAQ,aAAa;GACtC,eAAe,EAAE,QAAQ,aAAa;EACxC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Editable, EditableActivationMode, EditablePlaceholder, EditableRootProps, EditableSubmitMode } from "./editable.mjs";
+export { Editable, type EditableActivationMode, type EditablePlaceholder, type EditableRootProps, type EditableSubmitMode };

package/dist/components/editable/index.mjs

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

package/dist/components/empty-state/empty-state.anatomy.mjs

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

package/dist/components/empty-state/empty-state.anatomy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.anatomy.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('empty-state').parts(\n  'root',\n  'indicator',\n  'title',\n  'description',\n  'actions',\n)\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,aAAa,CAAC,CAAC,MAClD,QACA,aACA,SACA,eACA,SACF;AAEA,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/empty-state/empty-state.connect.mjs

@@ -0,0 +1,26 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./empty-state.anatomy.mjs";
+//#region src/components/empty-state/empty-state.connect.ts
+var empty_state_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = [];
+function connect() {
+	return {
+		getRootProps: () => ({ ...parts.root.attrs }),
+		getIndicatorProps: () => ({
+			...parts.indicator.attrs,
+			"aria-hidden": true
+		}),
+		getTitleProps: () => ({ ...parts.title.attrs }),
+		getDescriptionProps: () => ({ ...parts.description.attrs }),
+		getActionsProps: () => ({ ...parts.actions.attrs })
+	};
+}
+//#endregion
+export { anatomy, connect, empty_state_connect_exports, props };
+
+//# sourceMappingURL=empty-state.connect.mjs.map

package/dist/components/empty-state/empty-state.connect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.connect.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.connect.ts"],"sourcesContent":["import { parts } from '#/components/empty-state/empty-state.anatomy.ts'\n\nexport { anatomy } from '#/components/empty-state/empty-state.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = []\n\nexport interface EmptyStateApi {\n  getRootProps: () => Record<string, unknown>\n  getIndicatorProps: () => Record<string, unknown>\n  getTitleProps: () => Record<string, unknown>\n  getDescriptionProps: () => Record<string, unknown>\n  getActionsProps: () => Record<string, unknown>\n}\n\nexport function connect(): EmptyStateApi {\n  return {\n    getRootProps: () => ({ ...parts.root.attrs }),\n    getIndicatorProps: () => ({ ...parts.indicator.attrs, 'aria-hidden': true }),\n    getTitleProps: () => ({ ...parts.title.attrs }),\n    getDescriptionProps: () => ({ ...parts.description.attrs }),\n    getActionsProps: () => ({ ...parts.actions.attrs }),\n  }\n}\n"],"mappings":";;;;;;;;;AAMA,MAAa,QAA2B,CAAC;AAUzC,SAAgB,UAAyB;CACvC,OAAO;EACL,qBAAqB,EAAE,GAAG,MAAM,KAAK,MAAM;EAC3C,0BAA0B;GAAE,GAAG,MAAM,UAAU;GAAO,eAAe;EAAK;EAC1E,sBAAsB,EAAE,GAAG,MAAM,MAAM,MAAM;EAC7C,4BAA4B,EAAE,GAAG,MAAM,YAAY,MAAM;EACzD,wBAAwB,EAAE,GAAG,MAAM,QAAQ,MAAM;CACnD;AACF"}

package/dist/components/empty-state/empty-state.d.mts

@@ -0,0 +1,10 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/empty-state/empty-state.d.ts
+export interface EmptyStateRootProps {
+  /** 하나뿐인 공용 척도를 따릅니다. 표의 빈 행처럼 좁은 자리에는 작게, 페이지 전체가 빈 자리에는 크게 둡니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+}
+export declare const EmptyState: SynapseComponent<"actions" | "description" | "indicator" | "root" | "title", "root", EmptyStateRootProps, never>;
+//#endregion
+//# sourceMappingURL=empty-state.d.mts.map

package/dist/components/empty-state/empty-state.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.mts","names":[],"sources":["../../../src/components/empty-state/empty-state.tsx"],"mappings":";;;iBAOiB;;EAEf,OAAO;;qBAGI,YAAU,qFAAA"}

package/dist/components/empty-state/empty-state.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { empty_state_connect_exports } from "./empty-state.connect.mjs";
+import { emptyStateRecipe } from "./empty-state.recipe.mjs";
+//#region src/components/empty-state/empty-state.tsx
+const EmptyState = defineComponent()({
+	name: "EmptyState",
+	module: empty_state_connect_exports,
+	rootPart: "root",
+	rootElement: "div",
+	elements: {
+		indicator: "span",
+		title: "div",
+		description: "p",
+		actions: "div"
+	},
+	variantProps: ["size"],
+	slots: (props) => emptyStateRecipe({ size: resolveSize(props.size, "EmptyState") })
+});
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.mjs.map

package/dist/components/empty-state/empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.mjs","names":["emptyState"],"sources":["../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["'use client'\n\nimport * as emptyState from '#/components/empty-state/empty-state.connect.ts'\nimport { emptyStateRecipe } from '#/components/empty-state/empty-state.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface EmptyStateRootProps {\n  /** 하나뿐인 공용 척도를 따릅니다. 표의 빈 행처럼 좁은 자리에는 작게, 페이지 전체가 빈 자리에는 크게 둡니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n}\n\nexport const EmptyState = defineComponent<EmptyStateRootProps>()({\n  name: 'EmptyState',\n  module: emptyState,\n  rootPart: 'root',\n  rootElement: 'div',\n  elements: { indicator: 'span', title: 'div', description: 'p', actions: 'div' },\n  variantProps: ['size'],\n  slots: (props: EmptyStateRootProps) =>\n    emptyStateRecipe({ size: resolveSize(props.size, 'EmptyState') }),\n})\n"],"mappings":";;;;;;AAYA,MAAa,aAAa,gBAAqC,CAAC,CAAC;CAC/D,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EAAE,WAAW;EAAQ,OAAO;EAAO,aAAa;EAAK,SAAS;CAAM;CAC9E,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,iBAAiB,EAAE,MAAM,YAAY,MAAM,MAAM,YAAY,EAAE,CAAC;AACpE,CAAC"}

package/dist/components/empty-state/empty-state.recipe.mjs

@@ -0,0 +1,134 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/empty-state/empty-state.recipe.ts
+const emptyStateRecipe = sva({
+	slots: [
+		"root",
+		"indicator",
+		"title",
+		"description",
+		"actions"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "fill",
+			textAlign: "center",
+			color: "foreground.default"
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			rounded: "full",
+			bg: "background.subtle",
+			color: "foreground.muted"
+		},
+		title: {
+			margin: "inset.none",
+			color: "foreground.default"
+		},
+		description: {
+			margin: "inset.none",
+			color: "foreground.muted"
+		},
+		actions: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.related",
+			_empty: { display: "none" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				padding: "inset.control",
+				gap: "gap.inline"
+			},
+			indicator: {
+				width: "control.sm",
+				height: "control.sm",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			title: { textStyle: "label" },
+			description: { textStyle: "detail" }
+		},
+		sm: {
+			root: {
+				padding: "inset.overlay",
+				gap: "gap.related"
+			},
+			indicator: {
+				width: "control.md",
+				height: "control.md",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			},
+			title: { textStyle: "label" },
+			description: { textStyle: "detail" }
+		},
+		md: {
+			root: {
+				padding: "inset.surface",
+				gap: "gap.related"
+			},
+			indicator: {
+				width: "control.lg",
+				height: "control.lg",
+				"& svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				}
+			},
+			title: { textStyle: "subtitle" },
+			description: { textStyle: "body" }
+		},
+		lg: {
+			root: {
+				padding: "rhythm.normal",
+				gap: "rhythm.tight"
+			},
+			indicator: {
+				width: "control.xl",
+				height: "control.xl",
+				"& svg": {
+					width: "icon.xl",
+					height: "icon.xl"
+				}
+			},
+			title: { textStyle: "subtitle" },
+			description: { textStyle: "body" }
+		},
+		xl: {
+			root: {
+				padding: "rhythm.loose",
+				gap: "rhythm.tight"
+			},
+			indicator: {
+				width: "control.xl",
+				height: "control.xl",
+				"& svg": {
+					width: "icon.xl",
+					height: "icon.xl"
+				}
+			},
+			title: { textStyle: "title" },
+			description: { textStyle: "body" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { emptyStateRecipe };
+
+//# sourceMappingURL=empty-state.recipe.mjs.map

package/dist/components/empty-state/empty-state.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.recipe.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const emptyStateRecipe = sva({\n  slots: ['root', 'indicator', 'title', 'description', 'actions'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: 'fill',\n      textAlign: 'center',\n      color: 'foreground.default',\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      rounded: 'full',\n      bg: 'background.subtle',\n      color: 'foreground.muted',\n    },\n    title: {\n      margin: 'inset.none',\n      color: 'foreground.default',\n    },\n    description: {\n      margin: 'inset.none',\n      color: 'foreground.muted',\n    },\n    actions: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.related',\n      _empty: { display: 'none' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { padding: 'inset.control', gap: 'gap.inline' },\n        indicator: {\n          width: 'control.sm',\n          height: 'control.sm',\n          '& svg': { width: 'icon.sm', height: 'icon.sm' },\n        },\n        title: { textStyle: 'label' },\n        description: { textStyle: 'detail' },\n      },\n      sm: {\n        root: { padding: 'inset.overlay', gap: 'gap.related' },\n        indicator: {\n          width: 'control.md',\n          height: 'control.md',\n          '& svg': { width: 'icon.md', height: 'icon.md' },\n        },\n        title: { textStyle: 'label' },\n        description: { textStyle: 'detail' },\n      },\n      md: {\n        root: { padding: 'inset.surface', gap: 'gap.related' },\n        indicator: {\n          width: 'control.lg',\n          height: 'control.lg',\n          '& svg': { width: 'icon.lg', height: 'icon.lg' },\n        },\n        title: { textStyle: 'subtitle' },\n        description: { textStyle: 'body' },\n      },\n      lg: {\n        root: { padding: 'rhythm.normal', gap: 'rhythm.tight' },\n        indicator: {\n          width: 'control.xl',\n          height: 'control.xl',\n          '& svg': { width: 'icon.xl', height: 'icon.xl' },\n        },\n        title: { textStyle: 'subtitle' },\n        description: { textStyle: 'body' },\n      },\n      xl: {\n        root: { padding: 'rhythm.loose', gap: 'rhythm.tight' },\n        indicator: {\n          width: 'control.xl',\n          height: 'control.xl',\n          '& svg': { width: 'icon.xl', height: 'icon.xl' },\n        },\n        title: { textStyle: 'title' },\n        description: { textStyle: 'body' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,IAAI;CAClC,OAAO;EAAC;EAAQ;EAAa;EAAS;EAAe;CAAS;CAC9D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW;GACX,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,SAAS;GACT,IAAI;GACJ,OAAO;EACT;EACA,OAAO;GACL,QAAQ;GACR,OAAO;EACT;EACA,aAAa;GACX,QAAQ;GACR,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,QAAQ,EAAE,SAAS,OAAO;EAC5B;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IAAE,SAAS;IAAiB,KAAK;GAAa;GACpD,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,OAAO;KAAW,QAAQ;IAAU;GACjD;GACA,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,SAAS;EACrC;EACA,IAAI;GACF,MAAM;IAAE,SAAS;IAAiB,KAAK;GAAc;GACrD,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,OAAO;KAAW,QAAQ;IAAU;GACjD;GACA,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,SAAS;EACrC;EACA,IAAI;GACF,MAAM;IAAE,SAAS;IAAiB,KAAK;GAAc;GACrD,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,OAAO;KAAW,QAAQ;IAAU;GACjD;GACA,OAAO,EAAE,WAAW,WAAW;GAC/B,aAAa,EAAE,WAAW,OAAO;EACnC;EACA,IAAI;GACF,MAAM;IAAE,SAAS;IAAiB,KAAK;GAAe;GACtD,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,OAAO;KAAW,QAAQ;IAAU;GACjD;GACA,OAAO,EAAE,WAAW,WAAW;GAC/B,aAAa,EAAE,WAAW,OAAO;EACnC;EACA,IAAI;GACF,MAAM;IAAE,SAAS;IAAgB,KAAK;GAAe;GACrD,WAAW;IACT,OAAO;IACP,QAAQ;IACR,SAAS;KAAE,OAAO;KAAW,QAAQ;IAAU;GACjD;GACA,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,OAAO;EACnC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/empty-state/index.d.mts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateRootProps } from "./empty-state.mjs";
+export { EmptyState, type EmptyStateRootProps };

package/dist/components/empty-state/index.mjs

@@ -0,0 +1,2 @@
+import { EmptyState } from "./empty-state.mjs";
+export { EmptyState };

package/dist/components/field/field.anatomy.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.anatomy.mjs","names":[],"sources":["../../../src/components/field/field.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('field').parts(\n  'root',\n  'label',\n  'requiredIndicator',\n  'helperText',\n  'errorText',\n)\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,OAAO,CAAC,CAAC,MAC5C,QACA,SACA,qBACA,cACA,WACF;AAEA,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/field/field.connect.mjs

@@ -0,0 +1,117 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./field.anatomy.mjs";
+//#region src/components/field/field.connect.ts
+var field_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = [
+	"id",
+	"invalid",
+	"required",
+	"disabled",
+	"readOnly",
+	"registry",
+	"labelable",
+	"markUnlabelable",
+	"showCount",
+	"count",
+	"rootRef",
+	"recount"
+];
+const EMPTY_REGISTRY = {
+	describedBy: void 0,
+	register: () => () => {}
+};
+const noUnlabeling = () => () => {};
+const isRegistry = (value) => typeof value === "object" && value !== null && "register" in value && typeof value.register === "function";
+const isUnlabeling = (value) => typeof value === "function";
+const flag = (value) => value ? "" : void 0;
+const isMeasure = (value) => typeof value === "object" && value !== null && "length" in value && typeof value.length === "number" && "max" in value && (value.max === void 0 || typeof value.max === "number");
+const isRecount = (value) => typeof value === "function";
+function connect(machineProps) {
+	const base = typeof machineProps["id"] === "string" ? machineProps["id"] : "field";
+	const invalid = machineProps["invalid"] === true;
+	const required = machineProps["required"] === true;
+	const disabled = machineProps["disabled"] === true;
+	const readOnly = machineProps["readOnly"] === true;
+	const labelable = machineProps["labelable"] !== false;
+	const registry = isRegistry(machineProps["registry"]) ? machineProps["registry"] : EMPTY_REGISTRY;
+	const markUnlabelable = isUnlabeling(machineProps["markUnlabelable"]) ? machineProps["markUnlabelable"] : noUnlabeling;
+	const ids = {
+		label: `field:${base}:label`,
+		control: `field:${base}:control`,
+		helperText: `field:${base}:helper-text`,
+		errorText: `field:${base}:error-text`,
+		characterCount: `field:${base}:character-count`
+	};
+	const measured = isMeasure(machineProps["count"]) ? machineProps["count"] : void 0;
+	const recount = isRecount(machineProps["recount"]) ? machineProps["recount"] : void 0;
+	const rootRef = machineProps["rootRef"];
+	const errorShown = invalid && (registry.describedBy?.split(" ").includes(ids.errorText) ?? false);
+	const state = {
+		"data-invalid": flag(invalid),
+		"data-required": flag(required),
+		"data-disabled": flag(disabled),
+		"data-readonly": flag(readOnly)
+	};
+	return {
+		field: {
+			ids: {
+				label: ids.label,
+				control: ids.control
+			},
+			invalid,
+			required,
+			disabled,
+			readOnly,
+			describedBy: errorShown ? registry.describedBy?.split(" ").filter((id) => id !== ids.helperText).join(" ") : registry.describedBy,
+			markUnlabelable
+		},
+		registry,
+		count: machineProps["showCount"] === true && measured !== void 0 ? {
+			id: ids.characterCount,
+			length: measured.length,
+			max: measured.max
+		} : void 0,
+		getRootProps: () => ({
+			...parts.root.attrs,
+			...typeof rootRef === "function" ? { ref: rootRef } : {},
+			...recount === void 0 ? {} : { onInput: recount },
+			...state
+		}),
+		getCharacterCountProps: () => ({ id: ids.characterCount }),
+		getLabelProps: () => ({
+			...parts.label.attrs,
+			id: ids.label,
+			htmlFor: labelable ? ids.control : void 0,
+			onClick: labelable ? void 0 : (event) => {
+				event.currentTarget.ownerDocument.getElementById(ids.control)?.focus();
+			},
+			...state
+		}),
+		getRequiredIndicatorProps: () => ({
+			...parts.requiredIndicator.attrs,
+			"aria-hidden": true,
+			hidden: !required
+		}),
+		getHelperTextProps: () => ({
+			...parts.helperText.attrs,
+			id: ids.helperText,
+			...state
+		}),
+		getErrorTextProps: () => ({
+			...parts.errorText.attrs,
+			id: ids.errorText,
+			"aria-live": "polite",
+			hidden: !invalid,
+			...state
+		})
+	};
+}
+//#endregion
+export { anatomy, connect, field_connect_exports, props };
+
+//# sourceMappingURL=field.connect.mjs.map