@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.connect.mjs","names":[],"sources":["../../../src/components/field/field.connect.ts"],"sourcesContent":["import type { MouseEvent } from 'react'\n\nimport { parts } from '#/components/field/field.anatomy.ts'\nimport type { DescriptionRegistry, FieldContextValue } from '#/shared/field-context.ts'\n\nexport { anatomy } from '#/components/field/field.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = [\n  'id',\n  'invalid',\n  'required',\n  'disabled',\n  'readOnly',\n  'registry',\n  'labelable',\n  'markUnlabelable',\n  'showCount',\n  'count',\n  'rootRef',\n  'recount',\n]\n\nexport interface FieldApi {\n  field: FieldContextValue\n  registry: DescriptionRegistry\n  getRootProps: () => Record<string, unknown>\n  getLabelProps: () => Record<string, unknown>\n  getRequiredIndicatorProps: () => Record<string, unknown>\n  getHelperTextProps: () => Record<string, unknown>\n  getErrorTextProps: () => Record<string, unknown>\n  getCharacterCountProps: () => Record<string, unknown>\n  count: FieldCount | undefined\n}\n\nexport interface FieldCount {\n  readonly id: string\n  readonly length: number\n  readonly max: number | undefined\n}\n\nconst EMPTY_REGISTRY: DescriptionRegistry = {\n  describedBy: undefined,\n  register: () => () => {},\n}\n\nconst noUnlabeling = (): (() => void) => () => {}\n\nconst isRegistry = (value: unknown): value is DescriptionRegistry =>\n  typeof value === 'object' &&\n  value !== null &&\n  'register' in value &&\n  typeof value.register === 'function'\n\nconst isUnlabeling = (value: unknown): value is () => () => void => typeof value === 'function'\n\nconst flag = (value: boolean): '' | undefined => (value ? '' : undefined)\n\nconst isMeasure = (value: unknown): value is Omit<FieldCount, 'id'> =>\n  typeof value === 'object' &&\n  value !== null &&\n  'length' in value &&\n  typeof value.length === 'number' &&\n  'max' in value &&\n  (value.max === undefined || typeof value.max === 'number')\n\nconst isRecount = (value: unknown): value is () => void => typeof value === 'function'\n\nexport function connect(machineProps: Readonly<Record<string, unknown>>): FieldApi {\n  const base = typeof machineProps['id'] === 'string' ? machineProps['id'] : 'field'\n  const invalid = machineProps['invalid'] === true\n  const required = machineProps['required'] === true\n  const disabled = machineProps['disabled'] === true\n  const readOnly = machineProps['readOnly'] === true\n  const labelable = machineProps['labelable'] !== false\n  const registry = isRegistry(machineProps['registry']) ? machineProps['registry'] : EMPTY_REGISTRY\n  const markUnlabelable = isUnlabeling(machineProps['markUnlabelable'])\n    ? machineProps['markUnlabelable']\n    : noUnlabeling\n  const ids = {\n    label: `field:${base}:label`,\n    control: `field:${base}:control`,\n    helperText: `field:${base}:helper-text`,\n    errorText: `field:${base}:error-text`,\n    characterCount: `field:${base}:character-count`,\n  }\n  const measured = isMeasure(machineProps['count']) ? machineProps['count'] : undefined\n  const recount = isRecount(machineProps['recount']) ? machineProps['recount'] : undefined\n  const rootRef = machineProps['rootRef']\n  const errorShown = invalid && (registry.describedBy?.split(' ').includes(ids.errorText) ?? false)\n  const state = {\n    'data-invalid': flag(invalid),\n    'data-required': flag(required),\n    'data-disabled': flag(disabled),\n    'data-readonly': flag(readOnly),\n  }\n\n  return {\n    field: {\n      ids: { label: ids.label, control: ids.control },\n      invalid,\n      required,\n      disabled,\n      readOnly,\n      describedBy: errorShown\n        ? registry.describedBy\n            ?.split(' ')\n            .filter((id) => id !== ids.helperText)\n            .join(' ')\n        : registry.describedBy,\n      markUnlabelable,\n    },\n    registry,\n    count:\n      machineProps['showCount'] === true && measured !== undefined\n        ? { id: ids.characterCount, length: measured.length, max: measured.max }\n        : undefined,\n    getRootProps: () => ({\n      ...parts.root.attrs,\n      ...(typeof rootRef === 'function' ? { ref: rootRef } : {}),\n      ...(recount === undefined ? {} : { onInput: recount }),\n      ...state,\n    }),\n    getCharacterCountProps: () => ({ id: ids.characterCount }),\n    getLabelProps: () => ({\n      ...parts.label.attrs,\n      id: ids.label,\n      htmlFor: labelable ? ids.control : undefined,\n      onClick: labelable\n        ? undefined\n        : (event: MouseEvent<HTMLElement>) => {\n            event.currentTarget.ownerDocument.getElementById(ids.control)?.focus()\n          },\n      ...state,\n    }),\n    getRequiredIndicatorProps: () => ({\n      ...parts.requiredIndicator.attrs,\n      'aria-hidden': true,\n      hidden: !required,\n    }),\n    getHelperTextProps: () => ({ ...parts.helperText.attrs, id: ids.helperText, ...state }),\n    getErrorTextProps: () => ({\n      ...parts.errorText.attrs,\n      id: ids.errorText,\n      'aria-live': 'polite',\n      hidden: !invalid,\n      ...state,\n    }),\n  }\n}\n"],"mappings":"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"}

package/dist/components/field/field.d.mts

@@ -0,0 +1,19 @@
+import { SynapseComponent } from "../../system/types.mjs";
+//#region src/components/field/field.d.ts
+export interface FieldRootProps {
+  /** 안쪽 컨트롤이 물려받는 오류 상태. `true`이면 `Field.ErrorText`가 나타나고 컨트롤에 `aria-invalid`가 붙습니다. */
+  invalid?: boolean;
+  /** 안쪽 컨트롤이 물려받는 필수 상태. `Field.RequiredIndicator`가 나타납니다. */
+  required?: boolean;
+  /** 안쪽 컨트롤이 물려받는 비활성 상태. */
+  disabled?: boolean;
+  /** 안쪽 컨트롤이 물려받는 읽기 전용 상태. */
+  readOnly?: boolean;
+  /** 레이블, 설명, 오류와 컨트롤을 잇는 식별자들의 바탕. 서버와 클라이언트에서 같습니다. */
+  id?: string;
+  /** 안쪽 텍스트 입력의 글자 수를 메시지 줄 오른쪽에 보여 줍니다. 입력에 `maxLength`가 있으면 "12 / 280"처럼 한도와 함께 보이고, 한도에 가까워지면 남은 글자 수를 스크린 리더에 알립니다. */
+  showCount?: boolean;
+}
+export declare const Field: SynapseComponent<"errorText" | "helperText" | "label" | "requiredIndicator" | "root", "root", FieldRootProps, never>;
+//#endregion
+//# sourceMappingURL=field.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.mts","names":[],"sources":["../../../src/components/field/field.tsx"],"mappings":";;iBAYiB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;qBAgCW,OAAK,8FAAA"}

package/dist/components/field/field.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { DescriptionContext, FieldContext, useDescriptionRegistry } from "../../shared/field-context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { field_connect_exports } from "./field.connect.mjs";
+import { fieldCountClass, fieldRecipe } from "./field.recipe.mjs";
+import { CharacterCount } from "../../shared/character-count.mjs";
+import { FieldDescription } from "../../shared/field-description.mjs";
+import { measure, sameMeasure } from "../../shared/text-entry.mjs";
+import { createElement, useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/field/field.tsx
+function useCount(showCount) {
+	const root = useRef(null);
+	const [count, setCount] = useState(void 0);
+	const recount = useCallback(() => {
+		const next = measure(root.current);
+		setCount((current) => sameMeasure(current, next) ? current : next);
+	}, []);
+	const rootRef = useCallback((element) => {
+		root.current = element;
+	}, []);
+	useLayoutEffect(() => {
+		if (showCount) recount();
+	});
+	return showCount ? {
+		showCount,
+		count,
+		rootRef,
+		recount
+	} : {};
+}
+function useFieldMachineProps(props) {
+	const counting = useCount(props.showCount === true);
+	const registry = useDescriptionRegistry();
+	const [unlabelable, setUnlabelable] = useState(0);
+	const markUnlabelable = useCallback(() => {
+		setUnlabelable((count) => count + 1);
+		return () => {
+			setUnlabelable((count) => count - 1);
+		};
+	}, []);
+	return {
+		registry,
+		labelable: unlabelable === 0,
+		markUnlabelable,
+		...counting
+	};
+}
+const Field = defineComponent()({
+	name: "Field",
+	module: field_connect_exports,
+	rootPart: "root",
+	rootElement: "div",
+	elements: {
+		label: "label",
+		requiredIndicator: "span",
+		helperText: FieldDescription,
+		errorText: FieldDescription
+	},
+	defaultContent: { requiredIndicator: () => "*" },
+	rootOwnedGetters: [{
+		name: "characterCount",
+		getter: "getCharacterCountProps",
+		render: (_props, api) => api.count === void 0 ? null : createElement(CharacterCount, {
+			id: api.count.id,
+			className: fieldCountClass,
+			length: api.count.length,
+			max: api.count.max
+		})
+	}],
+	useMachineProps: useFieldMachineProps,
+	wrapRoot: (api, node) => createElement(DescriptionContext.Provider, { value: api.registry }, createElement(FieldContext.Provider, { value: api.field }, node)),
+	slots: () => fieldRecipe()
+});
+//#endregion
+export { Field };
+
+//# sourceMappingURL=field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.mjs","names":["field","countClass"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, useCallback, useLayoutEffect, useRef, useState } from 'react'\n\nimport * as field from '#/components/field/field.connect.ts'\nimport { fieldCountClass as countClass, fieldRecipe } from '#/components/field/field.recipe.ts'\nimport { CharacterCount } from '#/shared/character-count.tsx'\nimport { DescriptionContext, FieldContext, useDescriptionRegistry } from '#/shared/field-context.ts'\nimport { FieldDescription } from '#/shared/field-description.tsx'\nimport { measure, type Measure, sameMeasure } from '#/shared/text-entry.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface FieldRootProps {\n  /** 안쪽 컨트롤이 물려받는 오류 상태. `true`이면 `Field.ErrorText`가 나타나고 컨트롤에 `aria-invalid`가 붙습니다. */\n  invalid?: boolean\n  /** 안쪽 컨트롤이 물려받는 필수 상태. `Field.RequiredIndicator`가 나타납니다. */\n  required?: boolean\n  /** 안쪽 컨트롤이 물려받는 비활성 상태. */\n  disabled?: boolean\n  /** 안쪽 컨트롤이 물려받는 읽기 전용 상태. */\n  readOnly?: boolean\n  /** 레이블, 설명, 오류와 컨트롤을 잇는 식별자들의 바탕. 서버와 클라이언트에서 같습니다. */\n  id?: string\n  /** 안쪽 텍스트 입력의 글자 수를 메시지 줄 오른쪽에 보여 줍니다. 입력에 `maxLength`가 있으면 \"12 / 280\"처럼 한도와 함께 보이고, 한도에 가까워지면 남은 글자 수를 스크린 리더에 알립니다. */\n  showCount?: boolean\n}\n\nfunction useCount(showCount: boolean): Record<string, unknown> {\n  const root = useRef<HTMLElement | null>(null)\n  const [count, setCount] = useState<Measure | undefined>(undefined)\n  const recount = useCallback(() => {\n    const next = measure(root.current)\n    setCount((current) => (sameMeasure(current, next) ? current : next))\n  }, [])\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    root.current = element\n  }, [])\n  useLayoutEffect(() => {\n    if (showCount) recount()\n  })\n  return showCount ? { showCount, count, rootRef, recount } : {}\n}\n\nfunction useFieldMachineProps(props: FieldRootProps): Record<string, unknown> {\n  const counting = useCount(props.showCount === true)\n  const registry = useDescriptionRegistry()\n  const [unlabelable, setUnlabelable] = useState(0)\n  const markUnlabelable = useCallback(() => {\n    setUnlabelable((count) => count + 1)\n    return () => {\n      setUnlabelable((count) => count - 1)\n    }\n  }, [])\n  return { registry, labelable: unlabelable === 0, markUnlabelable, ...counting }\n}\n\nexport const Field = defineComponent<FieldRootProps>()({\n  name: 'Field',\n  module: field,\n  rootPart: 'root',\n  rootElement: 'div',\n  elements: {\n    label: 'label',\n    requiredIndicator: 'span',\n    helperText: FieldDescription,\n    errorText: FieldDescription,\n  },\n  defaultContent: { requiredIndicator: () => '*' },\n  rootOwnedGetters: [\n    {\n      name: 'characterCount',\n      getter: 'getCharacterCountProps',\n      render: (_props, api) =>\n        api.count === undefined\n          ? null\n          : createElement(CharacterCount, {\n              id: api.count.id,\n              className: countClass,\n              length: api.count.length,\n              max: api.count.max,\n            }),\n    },\n  ],\n  useMachineProps: useFieldMachineProps,\n  wrapRoot: (api, node) =>\n    createElement(\n      DescriptionContext.Provider,\n      { value: api.registry },\n      createElement(FieldContext.Provider, { value: api.field }, node),\n    ),\n  slots: () => fieldRecipe(),\n})\n"],"mappings":";;;;;;;;;;AA2BA,SAAS,SAAS,WAA6C;CAC7D,MAAM,OAAO,OAA2B,IAAI;CAC5C,MAAM,CAAC,OAAO,YAAY,SAA8B,KAAA,CAAS;CACjE,MAAM,UAAU,kBAAkB;EAChC,MAAM,OAAO,QAAQ,KAAK,OAAO;EACjC,UAAU,YAAa,YAAY,SAAS,IAAI,IAAI,UAAU,IAAK;CACrE,GAAG,CAAC,CAAC;CACL,MAAM,UAAU,aAAa,YAAgC;EAC3D,KAAK,UAAU;CACjB,GAAG,CAAC,CAAC;CACL,sBAAsB;EACpB,IAAI,WAAW,QAAQ;CACzB,CAAC;CACD,OAAO,YAAY;EAAE;EAAW;EAAO;EAAS;CAAQ,IAAI,CAAC;AAC/D;AAEA,SAAS,qBAAqB,OAAgD;CAC5E,MAAM,WAAW,SAAS,MAAM,cAAc,IAAI;CAClD,MAAM,WAAW,uBAAuB;CACxC,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,kBAAkB,kBAAkB;EACxC,gBAAgB,UAAU,QAAQ,CAAC;EACnC,aAAa;GACX,gBAAgB,UAAU,QAAQ,CAAC;EACrC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EAAE;EAAU,WAAW,gBAAgB;EAAG;EAAiB,GAAG;CAAS;AAChF;AAEA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EACR,OAAO;EACP,mBAAmB;EACnB,YAAY;EACZ,WAAW;CACb;CACA,gBAAgB,EAAE,yBAAyB,IAAI;CAC/C,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,QAAQ,QACf,IAAI,UAAU,KAAA,IACV,OACA,cAAc,gBAAgB;GAC5B,IAAI,IAAI,MAAM;GACd,WAAWC;GACX,QAAQ,IAAI,MAAM;GAClB,KAAK,IAAI,MAAM;EACjB,CAAC;CACT,CACF;CACA,iBAAiB;CACjB,WAAW,KAAK,SACd,cACE,mBAAmB,UACnB,EAAE,OAAO,IAAI,SAAS,GACtB,cAAc,aAAa,UAAU,EAAE,OAAO,IAAI,MAAM,GAAG,IAAI,CACjE;CACF,aAAa,YAAY;AAC3B,CAAC"}

package/dist/components/field/field.recipe.mjs

@@ -0,0 +1,60 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/field/field.recipe.ts
+const fieldCountClass = css({
+	alignSelf: "start",
+	textAlign: "end",
+	textStyle: "detail",
+	color: "foreground.muted",
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap",
+	"&[data-near-limit]": { color: "foreground.default" }
+});
+const fieldRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"requiredIndicator",
+		"helperText",
+		"errorText"
+	],
+	base: {
+		root: {
+			display: "grid",
+			gridTemplateColumns: "minmax(0, 1fr) auto",
+			gridAutoFlow: "row dense",
+			columnGap: "gap.related",
+			rowGap: "gap.inline",
+			width: "fill",
+			"& > *": { gridColumn: "1 / -1" },
+			"& > [data-part=helper-text], & > [data-part=error-text]": { gridColumn: "1" },
+			"& > [data-part=character-count]": { gridColumn: "2" },
+			"&:has(> [data-part=error-text]) > [data-part=helper-text]": { display: "none" }
+		},
+		label: {
+			display: "inline-flex",
+			alignItems: "baseline",
+			gap: "gap.inline",
+			justifySelf: "start",
+			textStyle: "label",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		requiredIndicator: { color: "error.default" },
+		helperText: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			margin: "inset.none",
+			_disabled: { color: "foreground.disabled" }
+		},
+		errorText: {
+			textStyle: "detail",
+			color: "error.default",
+			margin: "inset.none"
+		}
+	}
+});
+//#endregion
+export { fieldCountClass, fieldRecipe };
+
+//# sourceMappingURL=field.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.recipe.mjs","names":[],"sources":["../../../src/components/field/field.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\n\nexport const fieldCountClass = css({\n  alignSelf: 'start',\n  textAlign: 'end',\n  textStyle: 'detail',\n  color: 'foreground.muted',\n  fontVariantNumeric: 'tabular-nums',\n  whiteSpace: 'nowrap',\n  '&[data-near-limit]': { color: 'foreground.default' },\n})\n\nexport const fieldRecipe = sva({\n  slots: ['root', 'label', 'requiredIndicator', 'helperText', 'errorText'],\n  base: {\n    root: {\n      display: 'grid',\n      gridTemplateColumns: 'minmax(0, 1fr) auto',\n      gridAutoFlow: 'row dense',\n      columnGap: 'gap.related',\n      rowGap: 'gap.inline',\n      width: 'fill',\n      '& > *': { gridColumn: '1 / -1' },\n      '& > [data-part=helper-text], & > [data-part=error-text]': { gridColumn: '1' },\n      '& > [data-part=character-count]': { gridColumn: '2' },\n      '&:has(> [data-part=error-text]) > [data-part=helper-text]': { display: 'none' },\n    },\n    label: {\n      display: 'inline-flex',\n      alignItems: 'baseline',\n      gap: 'gap.inline',\n      justifySelf: 'start',\n      textStyle: 'label',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    requiredIndicator: {\n      color: 'error.default',\n    },\n    helperText: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      margin: 'inset.none',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    errorText: {\n      textStyle: 'detail',\n      color: 'error.default',\n      margin: 'inset.none',\n    },\n  },\n})\n"],"mappings":";;;AAEA,MAAa,kBAAkB,IAAI;CACjC,WAAW;CACX,WAAW;CACX,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CACZ,sBAAsB,EAAE,OAAO,qBAAqB;AACtD,CAAC;AAED,MAAa,cAAc,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAS;EAAqB;EAAc;CAAW;CACvE,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,qBAAqB;GACrB,cAAc;GACd,WAAW;GACX,QAAQ;GACR,OAAO;GACP,SAAS,EAAE,YAAY,SAAS;GAChC,2DAA2D,EAAE,YAAY,IAAI;GAC7E,mCAAmC,EAAE,YAAY,IAAI;GACrD,6DAA6D,EAAE,SAAS,OAAO;EACjF;EACA,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK;GACL,aAAa;GACb,WAAW;GACX,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,mBAAmB,EACjB,OAAO,gBACT;EACA,YAAY;GACV,WAAW;GACX,OAAO;GACP,QAAQ;GACR,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,WAAW;GACT,WAAW;GACX,OAAO;GACP,QAAQ;EACV;CACF;AACF,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Field, FieldRootProps } from "./field.mjs";
+export { Field, type FieldRootProps };

package/dist/components/field/index.mjs

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

package/dist/components/fieldset/fieldset.anatomy.mjs

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

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

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

package/dist/components/fieldset/fieldset.connect.mjs

@@ -0,0 +1,60 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./fieldset.anatomy.mjs";
+//#region src/components/fieldset/fieldset.connect.ts
+var fieldset_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = [
+	"id",
+	"invalid",
+	"disabled",
+	"registry"
+];
+const EMPTY_REGISTRY = {
+	describedBy: void 0,
+	register: () => () => {}
+};
+const isRegistry = (value) => typeof value === "object" && value !== null && "register" in value && typeof value.register === "function";
+const flag = (value) => value ? "" : void 0;
+function connect(machineProps) {
+	const base = typeof machineProps["id"] === "string" ? machineProps["id"] : "fieldset";
+	const invalid = machineProps["invalid"] === true;
+	const disabled = machineProps["disabled"] === true;
+	const registry = isRegistry(machineProps["registry"]) ? machineProps["registry"] : EMPTY_REGISTRY;
+	const state = {
+		"data-invalid": flag(invalid),
+		"data-disabled": flag(disabled)
+	};
+	return {
+		registry,
+		getRootProps: () => ({
+			...parts.root.attrs,
+			disabled,
+			"aria-describedby": registry.describedBy,
+			...state
+		}),
+		getLegendProps: () => ({
+			...parts.legend.attrs,
+			...state
+		}),
+		getHelperTextProps: () => ({
+			...parts.helperText.attrs,
+			id: `fieldset:${base}:helper-text`,
+			...state
+		}),
+		getErrorTextProps: () => ({
+			...parts.errorText.attrs,
+			id: `fieldset:${base}:error-text`,
+			"aria-live": "polite",
+			hidden: !invalid,
+			...state
+		})
+	};
+}
+//#endregion
+export { anatomy, connect, fieldset_connect_exports, props };
+
+//# sourceMappingURL=fieldset.connect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.connect.mjs","names":[],"sources":["../../../src/components/fieldset/fieldset.connect.ts"],"sourcesContent":["import { parts } from '#/components/fieldset/fieldset.anatomy.ts'\nimport type { DescriptionRegistry } from '#/shared/field-context.ts'\n\nexport { anatomy } from '#/components/fieldset/fieldset.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = ['id', 'invalid', 'disabled', 'registry']\n\nexport interface FieldsetApi {\n  registry: DescriptionRegistry\n  getRootProps: () => Record<string, unknown>\n  getLegendProps: () => Record<string, unknown>\n  getHelperTextProps: () => Record<string, unknown>\n  getErrorTextProps: () => Record<string, unknown>\n}\n\nconst EMPTY_REGISTRY: DescriptionRegistry = {\n  describedBy: undefined,\n  register: () => () => {},\n}\n\nconst isRegistry = (value: unknown): value is DescriptionRegistry =>\n  typeof value === 'object' &&\n  value !== null &&\n  'register' in value &&\n  typeof value.register === 'function'\n\nconst flag = (value: boolean): '' | undefined => (value ? '' : undefined)\n\nexport function connect(machineProps: Readonly<Record<string, unknown>>): FieldsetApi {\n  const base = typeof machineProps['id'] === 'string' ? machineProps['id'] : 'fieldset'\n  const invalid = machineProps['invalid'] === true\n  const disabled = machineProps['disabled'] === true\n  const registry = isRegistry(machineProps['registry']) ? machineProps['registry'] : EMPTY_REGISTRY\n  const state = { 'data-invalid': flag(invalid), 'data-disabled': flag(disabled) }\n\n  return {\n    registry,\n    getRootProps: () => ({\n      ...parts.root.attrs,\n      disabled,\n      'aria-describedby': registry.describedBy,\n      ...state,\n    }),\n    getLegendProps: () => ({ ...parts.legend.attrs, ...state }),\n    getHelperTextProps: () => ({\n      ...parts.helperText.attrs,\n      id: `fieldset:${base}:helper-text`,\n      ...state,\n    }),\n    getErrorTextProps: () => ({\n      ...parts.errorText.attrs,\n      id: `fieldset:${base}:error-text`,\n      'aria-live': 'polite',\n      hidden: !invalid,\n      ...state,\n    }),\n  }\n}\n"],"mappings":";;;;;;;;;AAOA,MAAa,QAA2B;CAAC;CAAM;CAAW;CAAY;AAAU;AAUhF,MAAM,iBAAsC;CAC1C,aAAa,KAAA;CACb,sBAAsB,CAAC;AACzB;AAEA,MAAM,cAAc,UAClB,OAAO,UAAU,YACjB,UAAU,QACV,cAAc,SACd,OAAO,MAAM,aAAa;AAE5B,MAAM,QAAQ,UAAoC,QAAQ,KAAK,KAAA;AAE/D,SAAgB,QAAQ,cAA8D;CACpF,MAAM,OAAO,OAAO,aAAa,UAAU,WAAW,aAAa,QAAQ;CAC3E,MAAM,UAAU,aAAa,eAAe;CAC5C,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,WAAW,WAAW,aAAa,WAAW,IAAI,aAAa,cAAc;CACnF,MAAM,QAAQ;EAAE,gBAAgB,KAAK,OAAO;EAAG,iBAAiB,KAAK,QAAQ;CAAE;CAE/E,OAAO;EACL;EACA,qBAAqB;GACnB,GAAG,MAAM,KAAK;GACd;GACA,oBAAoB,SAAS;GAC7B,GAAG;EACL;EACA,uBAAuB;GAAE,GAAG,MAAM,OAAO;GAAO,GAAG;EAAM;EACzD,2BAA2B;GACzB,GAAG,MAAM,WAAW;GACpB,IAAI,YAAY,KAAK;GACrB,GAAG;EACL;EACA,0BAA0B;GACxB,GAAG,MAAM,UAAU;GACnB,IAAI,YAAY,KAAK;GACrB,aAAa;GACb,QAAQ,CAAC;GACT,GAAG;EACL;CACF;AACF"}

package/dist/components/fieldset/fieldset.d.mts

@@ -0,0 +1,13 @@
+import { SynapseComponent } from "../../system/types.mjs";
+//#region src/components/fieldset/fieldset.d.ts
+export interface FieldsetRootProps {
+  /** 묶음 전체의 오류 상태. `true`이면 `Fieldset.ErrorText`가 나타납니다. */
+  invalid?: boolean;
+  /** 네이티브 `<fieldset disabled>`로 안쪽의 모든 컨트롤을 한 번에 비활성화합니다. */
+  disabled?: boolean;
+  /** 설명과 오류 문구의 식별자 바탕. 서버와 클라이언트에서 같습니다. */
+  id?: string;
+}
+export declare const Fieldset: SynapseComponent<"errorText" | "helperText" | "legend" | "root", "root", FieldsetRootProps, never>;
+//#endregion
+//# sourceMappingURL=fieldset.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.mts","names":[],"sources":["../../../src/components/fieldset/fieldset.tsx"],"mappings":";;iBAUiB;;EAEf;;EAEA;;EAEA;;qBAGW,UAAQ,yEAAA"}

package/dist/components/fieldset/fieldset.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { DescriptionContext, useDescriptionRegistry } from "../../shared/field-context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { FieldDescription } from "../../shared/field-description.mjs";
+import { fieldset_connect_exports } from "./fieldset.connect.mjs";
+import { fieldsetRecipe } from "./fieldset.recipe.mjs";
+import { createElement } from "react";
+//#region src/components/fieldset/fieldset.tsx
+const Fieldset = defineComponent()({
+	name: "Fieldset",
+	module: fieldset_connect_exports,
+	rootPart: "root",
+	rootElement: "fieldset",
+	elements: {
+		legend: "legend",
+		helperText: FieldDescription,
+		errorText: FieldDescription
+	},
+	useMachineProps: () => ({ registry: useDescriptionRegistry() }),
+	wrapRoot: (api, node) => createElement(DescriptionContext.Provider, { value: api.registry }, node),
+	slots: () => fieldsetRecipe()
+});
+//#endregion
+export { Fieldset };
+
+//# sourceMappingURL=fieldset.mjs.map

package/dist/components/fieldset/fieldset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.mjs","names":["fieldset"],"sources":["../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["'use client'\n\nimport { createElement } from 'react'\n\nimport * as fieldset from '#/components/fieldset/fieldset.connect.ts'\nimport { fieldsetRecipe } from '#/components/fieldset/fieldset.recipe.ts'\nimport { DescriptionContext, useDescriptionRegistry } from '#/shared/field-context.ts'\nimport { FieldDescription } from '#/shared/field-description.tsx'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface FieldsetRootProps {\n  /** 묶음 전체의 오류 상태. `true`이면 `Fieldset.ErrorText`가 나타납니다. */\n  invalid?: boolean\n  /** 네이티브 `<fieldset disabled>`로 안쪽의 모든 컨트롤을 한 번에 비활성화합니다. */\n  disabled?: boolean\n  /** 설명과 오류 문구의 식별자 바탕. 서버와 클라이언트에서 같습니다. */\n  id?: string\n}\n\nexport const Fieldset = defineComponent<FieldsetRootProps>()({\n  name: 'Fieldset',\n  module: fieldset,\n  rootPart: 'root',\n  rootElement: 'fieldset',\n  elements: { legend: 'legend', helperText: FieldDescription, errorText: FieldDescription },\n  useMachineProps: () => ({ registry: useDescriptionRegistry() }),\n  wrapRoot: (api, node) =>\n    createElement(DescriptionContext.Provider, { value: api.registry }, node),\n  slots: () => fieldsetRecipe(),\n})\n"],"mappings":";;;;;;;;AAmBA,MAAa,WAAW,gBAAmC,CAAC,CAAC;CAC3D,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EAAE,QAAQ;EAAU,YAAY;EAAkB,WAAW;CAAiB;CACxF,wBAAwB,EAAE,UAAU,uBAAuB,EAAE;CAC7D,WAAW,KAAK,SACd,cAAc,mBAAmB,UAAU,EAAE,OAAO,IAAI,SAAS,GAAG,IAAI;CAC1E,aAAa,eAAe;AAC9B,CAAC"}

package/dist/components/fieldset/fieldset.recipe.mjs

@@ -0,0 +1,42 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/fieldset/fieldset.recipe.ts
+const fieldsetRecipe = sva({
+	slots: [
+		"root",
+		"legend",
+		"helperText",
+		"errorText"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related",
+			margin: "inset.none",
+			padding: "inset.none",
+			borderWidth: "0"
+		},
+		legend: {
+			padding: "inset.none",
+			marginBlockEnd: "gap.inline",
+			textStyle: "label",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		helperText: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			margin: "inset.none",
+			_disabled: { color: "foreground.disabled" }
+		},
+		errorText: {
+			textStyle: "detail",
+			color: "error.default",
+			margin: "inset.none"
+		}
+	}
+});
+//#endregion
+export { fieldsetRecipe };
+
+//# sourceMappingURL=fieldset.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.recipe.mjs","names":[],"sources":["../../../src/components/fieldset/fieldset.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const fieldsetRecipe = sva({\n  slots: ['root', 'legend', 'helperText', 'errorText'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n      margin: 'inset.none',\n      padding: 'inset.none',\n      borderWidth: '0',\n    },\n    legend: {\n      padding: 'inset.none',\n      marginBlockEnd: 'gap.inline',\n      textStyle: 'label',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    helperText: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      margin: 'inset.none',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    errorText: {\n      textStyle: 'detail',\n      color: 'error.default',\n      margin: 'inset.none',\n    },\n  },\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAU;EAAc;CAAW;CACnD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,QAAQ;GACR,SAAS;GACT,aAAa;EACf;EACA,QAAQ;GACN,SAAS;GACT,gBAAgB;GAChB,WAAW;GACX,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,YAAY;GACV,WAAW;GACX,OAAO;GACP,QAAQ;GACR,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,WAAW;GACT,WAAW;GACX,OAAO;GACP,QAAQ;EACV;CACF;AACF,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Fieldset, FieldsetRootProps } from "./fieldset.mjs";
+export { Fieldset, type FieldsetRootProps };

package/dist/components/fieldset/index.mjs

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

package/dist/components/file-upload/file-upload.d.mts

@@ -0,0 +1,105 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { DomAttributes, PartComponent, PartOwnProps, RootOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { ReactNode } from "react";
+//#region src/components/file-upload/file-upload.d.ts
+export type FileUploadRejectReason = 'TOO_MANY_FILES' | 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE' | 'FILE_TOO_SMALL' | 'FILE_INVALID' | 'FILE_EXISTS';
+export interface FileUploadRejection {
+  readonly file: File;
+  readonly errors: readonly FileUploadRejectReason[];
+}
+export interface FileUploadChangeDetails {
+  readonly acceptedFiles: readonly File[];
+  readonly rejectedFiles: readonly FileUploadRejection[];
+}
+export interface FileUploadAcceptDetails {
+  readonly files: readonly File[];
+}
+export interface FileUploadRejectDetails {
+  readonly files: readonly FileUploadRejection[];
+}
+export interface FileUploadRootProps {
+  /** 제어되는 수락된 파일. */
+  acceptedFiles?: readonly File[];
+  /** 비제어 초기 파일. `acceptedFiles`가 주어지면 무시됩니다. */
+  defaultAcceptedFiles?: readonly File[];
+  /** 쥐고 있는 파일이 바뀔 때마다 알림을 받으며, 수락이든 거부든 마찬가지입니다. */
+  onFileChange?: (details: FileUploadChangeDetails) => void;
+  /** 파일이 수락될 때 알림을 받습니다. */
+  onFileAccept?: (details: FileUploadAcceptDetails) => void;
+  /** 파일이 거부될 때 각각의 이유와 함께 알림을 받습니다. */
+  onFileReject?: (details: FileUploadRejectDetails) => void;
+  /**
+   * 업로드가 진행 중입니다.
+   *
+   * 컴포넌트는 파일을 받아들이고 업로드는 사용처가 하므로, 이 사실은 사용처만 압니다.
+   * `FileUpload.Loading`을 움직입니다.
+   */
+  loading?: boolean;
+  /**
+   * 업로드가 실패했습니다.
+   *
+   * `FileUpload.Error`를 움직이며, `loading`보다 우선합니다 — 실패한 요청은 대기 중인 요청이
+   * 아닙니다. 문구는 사용처의 몫이며, 이 컴포넌트는 문구를 싣지 않습니다.
+   */
+  error?: boolean;
+  /** 선택기가 무엇을 제시하는지이며, MIME 타입이나 확장자로 줍니다. */
+  accept?: string | readonly string[] | Record<string, readonly string[]>;
+  /** 쥘 수 있는 파일의 최대 개수. 기본값은 1입니다. */
+  maxFiles?: number;
+  /** 파일 하나의 최대 크기이며, 단위는 바이트입니다. */
+  maxFileSize?: number;
+  /** 파일 하나의 최소 크기이며, 단위는 바이트입니다. */
+  minFileSize?: number;
+  /** 파일이 수락되기 전에 거부합니다. 이유를 돌려주거나, 수락하려면 null을 돌려줍니다. */
+  validate?: (file: File) => readonly FileUploadRejectReason[] | null;
+  /** 들어오는 파일을 다시 씁니다 — 이를테면 압축하거나 이름을 바꿉니다. */
+  transformFiles?: (files: readonly File[]) => Promise<readonly File[]>;
+  /** 파일뿐 아니라 끌어다 놓은 디렉터리도 받아들입니다. */
+  directory?: boolean;
+  /** 모바일 선택기가 어느 카메라를 여는지. */
+  capture?: 'user' | 'environment';
+  /** 끌어다 놓기를 허용합니다. 기본값은 true입니다. */
+  allowDrop?: boolean;
+  /** 페이지의 다른 곳에 파일을 떨어뜨렸을 때 페이지가 이동해 버리는 것을 막습니다. */
+  preventDocumentDrop?: boolean;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 비활성화된 FileUpload는 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 FileUpload는 가진 파일을 보여 주지만 더 받아들이지는 않습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 파일이 있어야 합니다. */
+  required?: boolean;
+  /** 파일 크기를 표기할 때 쓰는 로캘. 기본값은 provider의 로캘입니다. */
+  locale?: string;
+  /** 이 FileUpload에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const FileUpload: {
+  meta: SynapseComponentMeta;
+  Root: ((props: FileUploadRootProps & RootOwnProps & PartOwnProps<HTMLElement> & DomAttributes) => ReactNode) & {
+    readonly displayName: string;
+  };
+  ClearTrigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  Dropzone: PartComponent<HTMLElement, Record<string, unknown>>;
+  Error: PartComponent<HTMLElement, Record<string, unknown>>;
+  Item: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemDeleteTrigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroup: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemName: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemPreview: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemPreviewImage: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemSizeText: PartComponent<HTMLElement, Record<string, unknown>>;
+  Label: PartComponent<HTMLElement, Record<string, unknown>>;
+  Loading: PartComponent<HTMLElement, Record<string, unknown>>;
+  Trigger: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=file-upload.d.mts.map

package/dist/components/file-upload/file-upload.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.mts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;;;YAoBY;iBAQK;WACN,MAAM;WACN,iBAAiB;;iBAGX;WACN,wBAAwB;WACxB,wBAAwB;;iBAGlB;WACN,gBAAgB;;iBAGV;WACN,gBAAgB;;iBAGV;;EAEf,yBAAyB;;EAEzB,gCAAgC;;EAEhC,gBAAgB,SAAS;;EAEzB,gBAAgB,SAAS;;EAEzB,gBAAgB,SAAS;;;;;;;EAOzB;;;;;;;EAOA;;EAEA,sCAAsC;;EAEtC;;EAEA;;EAEA;;EAEA,YAAY,MAAM,kBAAkB;;EAEpC,kBAAkB,gBAAgB,WAAW,iBAAiB;;EAE9D;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBA2GW;QAAA"}

package/dist/components/file-upload/file-upload.mjs

@@ -0,0 +1,127 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { useTranslations } from "../../provider/locale-context.mjs";
+import { close } from "../../icons/src/close.mjs";
+import { file } from "../../icons/src/file.mjs";
+import { trash } from "../../icons/src/trash.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { useFieldContext } from "../../shared/field-context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { resolveMachineTranslations } from "../machine-translations.mjs";
+import { fileUploadRecipe, fileUploadStateSlots } from "./file-upload.recipe.mjs";
+import { createStateParts } from "../../shared/state-parts.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as fileUpload from "@zag-js/file-upload";
+//#region src/components/file-upload/file-upload.tsx
+const MACHINE_STRINGS = { dropzone: "fileUpload.dropzone.label" };
+function FileUploadDropzone(props) {
+	const field = useFieldContext();
+	return createElement("div", {
+		...props,
+		"aria-labelledby": props["aria-labelledby"] ?? field?.ids.label
+	});
+}
+const base = defineComponent()({
+	name: "FileUpload",
+	module: fileUpload,
+	rootPart: "root",
+	elements: {
+		dropzone: FileUploadDropzone,
+		itemPreviewImage: "img",
+		itemName: "span",
+		itemSizeText: "span"
+	},
+	defaultContent: {
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		itemDeleteTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: trash }),
+		itemPreview: () => /* @__PURE__ */ jsx(Icon, { icon: file }),
+		itemName: (_api, _t, args) => args["file"] instanceof File ? args["file"].name : null,
+		itemSizeText: (api, _t, args) => args["file"] instanceof File ? api.getFileSize(args["file"]) : null
+	},
+	getterProps: {
+		dropzone: ["disableClick"],
+		itemGroup: ["type"],
+		item: ["file", "type"],
+		itemName: ["file", "type"],
+		itemPreview: ["file", "type"],
+		itemPreviewImage: [
+			"file",
+			"type",
+			"url"
+		],
+		itemSizeText: ["file", "type"],
+		itemDeleteTrigger: ["file", "type"]
+	},
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}],
+	amendBehaviorProps: {
+		dropzone: (behaviorProps) => ({ "aria-invalid": behaviorProps["data-invalid"] === "" ? true : void 0 }),
+		trigger: (behaviorProps) => ({ "aria-invalid": behaviorProps["data-invalid"] === "" ? true : void 0 }),
+		clearTrigger: (_behaviorProps, _api, _args, translate) => ({ "aria-label": translate("fileUpload.clearTrigger.label") })
+	},
+	machineTranslations: MACHINE_STRINGS,
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["dropzone", "trigger"],
+		labelable: false
+	},
+	useMachineProps: (props) => {
+		const translate = useTranslations(props.translations);
+		return { translations: {
+			...resolveMachineTranslations(MACHINE_STRINGS, translate),
+			itemPreview: (file) => translate("fileUpload.item.preview", { name: file.name }),
+			deleteFile: (file) => translate("fileUpload.deleteTrigger.label", { name: file.name })
+		} };
+	},
+	variantProps: [
+		"size",
+		"loading",
+		"error"
+	],
+	slots: (props) => {
+		const size = resolveSize(props.size, "FileUpload");
+		const own = fileUploadRecipe.raw({ size });
+		const compact = {
+			variant: "ghost",
+			tone: "neutral",
+			size: sizeBelow(size)
+		};
+		return {
+			...fileUploadRecipe({ size }),
+			trigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, own.trigger),
+			clearTrigger: buttonPartClass(compact, own.clearTrigger),
+			itemDeleteTrigger: buttonPartClass(compact, own.itemDeleteTrigger)
+		};
+	}
+});
+const state = createStateParts({
+	component: "FileUpload",
+	when: {
+		error: (props) => props.error === true,
+		loading: (props) => props.loading === true
+	},
+	absent: { empty: "A FileUpload with no files is not an empty state: the dropzone is already on the page telling the user what to do, and a second region saying the same thing would tell them twice that they have not yet done it. The list of chosen files simply has no rows." },
+	slots: () => fileUploadStateSlots
+});
+const FileUpload = {
+	...base,
+	...state.parts,
+	Root: state.wrapRoot(base.Root)
+};
+//#endregion
+export { FileUpload };
+
+//# sourceMappingURL=file-upload.mjs.map