@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/field/fieldset.js

@@ -0,0 +1,128 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Field } from "./field.js";
+import { fieldStateAttributes } from "./field-state.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/components/field/fieldset.tsx
+/**
+* A field rendered as a fieldset, for a group of choices named by its legend.
+*
+* @example
+* <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+*/
+var FieldsetRoot = (t0) => {
+	const $ = c(29);
+	let dirty;
+	let disabled;
+	let errors;
+	let filled;
+	let pending;
+	let props;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = dirty;
+		$[2] = disabled;
+		$[3] = errors;
+		$[4] = filled;
+		$[5] = pending;
+		$[6] = props;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = touched;
+	} else {
+		dirty = $[1];
+		disabled = $[2];
+		errors = $[3];
+		filled = $[4];
+		pending = $[5];
+		props = $[6];
+		readOnly = $[7];
+		requiredness = $[8];
+		touched = $[9];
+	}
+	let t1;
+	if ($[10] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[10] = errors;
+		$[11] = t1;
+	} else t1 = $[11];
+	const invalid = t1.length > 0;
+	let t2;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Fieldset.Root, {});
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== dirty || $[14] !== disabled || $[15] !== filled || $[16] !== invalid || $[17] !== pending || $[18] !== readOnly || $[19] !== requiredness || $[20] !== touched) {
+		t3 = fieldStateAttributes({
+			disabled,
+			readonly: readOnly,
+			requiredness,
+			invalid,
+			dirty,
+			touched,
+			pending,
+			filled
+		});
+		$[13] = dirty;
+		$[14] = disabled;
+		$[15] = filled;
+		$[16] = invalid;
+		$[17] = pending;
+		$[18] = readOnly;
+		$[19] = requiredness;
+		$[20] = touched;
+		$[21] = t3;
+	} else t3 = $[21];
+	let t4;
+	if ($[22] !== dirty || $[23] !== disabled || $[24] !== invalid || $[25] !== props || $[26] !== t3 || $[27] !== touched) {
+		t4 = /* @__PURE__ */ jsx(Field.Root, {
+			render: t2,
+			disabled,
+			invalid,
+			dirty,
+			touched,
+			...t3,
+			...props
+		});
+		$[22] = dirty;
+		$[23] = disabled;
+		$[24] = invalid;
+		$[25] = props;
+		$[26] = t3;
+		$[27] = touched;
+		$[28] = t4;
+	} else t4 = $[28];
+	return t4;
+};
+/**
+* The legend that names a {@link FieldsetRoot}.
+*
+* @example
+* <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+*/
+var FieldsetLegend = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Fieldset.Legend, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			nativeLabel: false,
+			render: t0,
+			...props
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+export { FieldsetLegend, FieldsetRoot };

package/dist/components/field/hidden-input.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detaches a headless library's hidden form input from any enclosing `<form>`,
+ * so the value it carries is never submitted natively.
+ *
+ * @example
+ * <Select.Root inputRef={detachHiddenInput} />
+ */
+export declare const detachHiddenInput: (node: HTMLInputElement | null) => void;
+//# sourceMappingURL=hidden-input.d.ts.map

package/dist/components/field/hidden-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden-input.d.ts","sourceRoot":"","sources":["../../../src/components/field/hidden-input.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,SACvB,gBAAgB,GAAG,IAAI,KAC3B,IAEF,CAAC"}

package/dist/components/field/hidden-input.js

@@ -0,0 +1,12 @@
+// src/components/field/hidden-input.ts
+/**
+* Detaches a headless library's hidden form input from any enclosing `<form>`,
+* so the value it carries is never submitted natively.
+*
+* @example
+* <Select.Root inputRef={detachHiddenInput} />
+*/
+var detachHiddenInput = (node) => {
+	node?.setAttribute("form", "");
+};
+export { detachHiddenInput };

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

@@ -0,0 +1,8 @@
+export * from "./choice-option.ts";
+export * from "./field.tsx";
+export * from "./field-state.ts";
+export * from "./hidden-input.ts";
+export * from "./options-load.ts";
+export * from "./rim-focus.ts";
+export * from "./use-field-focus.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/dist/components/field/index.js

@@ -0,0 +1,7 @@
+import { Field, useFieldIds } from "./field.js";
+import { fieldStateAttributes } from "./field-state.js";
+import { detachHiddenInput } from "./hidden-input.js";
+import { OPTIONS_LOADED, optionsLoad, optionsLoadMessage } from "./options-load.js";
+import { focusControlOnRim } from "./rim-focus.js";
+import { useFieldFocus, withFieldFocus } from "./use-field-focus.js";
+export { Field, OPTIONS_LOADED, detachHiddenInput, fieldStateAttributes, focusControlOnRim, optionsLoad, optionsLoadMessage, useFieldFocus, useFieldIds, withFieldFocus };

package/dist/components/field/options-load.d.ts

@@ -0,0 +1,55 @@
+/**
+ * How far the options of a select or combobox have loaded. A failure that
+ * trying again can clear carries a `retry`.
+ */
+export type OptionsLoad = Readonly<{
+    status: "pending" | "success";
+}> | Readonly<{
+    status: "error";
+    retry?: () => void;
+}>;
+/** The copy a select's or combobox's popup shows about its options. */
+export type OptionsLoadLabels = Readonly<{
+    /** Said while the options load, such as "Loading options…". */
+    loadingLabel: string;
+    /** Said when the options failed to load and a retry can help. */
+    loadFailedLabel: string;
+    /** Said when the options failed to load and trying again won't help. */
+    loadBrokenLabel: string;
+    /** The retry button's text, such as "Try again". */
+    retryLabel: string;
+    /** Said when there are no options at all. */
+    noOptionsLabel: string;
+}>;
+/**
+ * What a popup says about a load that is pending or failed; nothing once the
+ * options are there.
+ *
+ * @example
+ * optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+ */
+export declare const optionsLoadMessage: (load: OptionsLoad, labels: OptionsLoadLabels) => string | undefined;
+/**
+ * The load of options that are all there from the start.
+ *
+ * @example
+ * const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+ */
+export declare const OPTIONS_LOADED: OptionsLoad;
+/** The part of a query `optionsLoad` reads, such as a TanStack Query result. */
+export type OptionsQuery = Readonly<{
+    data: unknown;
+    error: unknown;
+    isFetching: boolean;
+    refetch: () => Promise<unknown>;
+}>;
+/**
+ * The options load of a query: loaded once it holds data, pending while it
+ * fetches without any, failed otherwise. A failure offers a retry when
+ * `retryable` says trying again can help, which by default is always.
+ *
+ * @example
+ * <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+ */
+export declare const optionsLoad: (query: OptionsQuery, retryable?: (error: unknown) => boolean) => OptionsLoad;
+//# sourceMappingURL=options-load.d.ts.map

package/dist/components/field/options-load.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-load.d.ts","sourceRoot":"","sources":["../../../src/components/field/options-load.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GACpB,QAAQ,CAAC;IAAE,MAAM,EAAE,SAAS,GAAG,SAAS,CAAA;CAAE,CAAC,GAC3C,QAAQ,CAAC;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAErD,uEAAuE;AACvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,+DAA+D;IAC/D,YAAY,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAC;IACxB,wEAAwE;IACxE,eAAe,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,cAAc,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,SACxB,WAAW,UACT,iBAAiB,KACvB,MAAM,GAAG,SAUX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,WAE5B,CAAC;AAEF,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAChC,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,UAChB,YAAY,cACR,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,KACpC,WAeF,CAAC"}

package/dist/components/field/options-load.js

@@ -0,0 +1,38 @@
+// src/components/field/options-load.ts
+/**
+* What a popup says about a load that is pending or failed; nothing once the
+* options are there.
+*
+* @example
+* optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+*/
+var optionsLoadMessage = (load, labels) => {
+	if (load.status === "pending") return labels.loadingLabel;
+	if (load.status === "error") return load.retry === void 0 ? labels.loadBrokenLabel : labels.loadFailedLabel;
+};
+/**
+* The load of options that are all there from the start.
+*
+* @example
+* const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+*/
+var OPTIONS_LOADED = { status: "success" };
+/**
+* The options load of a query: loaded once it holds data, pending while it
+* fetches without any, failed otherwise. A failure offers a retry when
+* `retryable` says trying again can help, which by default is always.
+*
+* @example
+* <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+*/
+var optionsLoad = (query, retryable = () => true) => {
+	if (query.data !== void 0) return { status: "success" };
+	if (query.isFetching || query.error === null) return { status: "pending" };
+	return retryable(query.error) ? {
+		status: "error",
+		retry: () => {
+			query.refetch();
+		}
+	} : { status: "error" };
+};
+export { OPTIONS_LOADED, optionsLoad, optionsLoadMessage };

package/dist/components/field/rim-focus.d.ts

@@ -0,0 +1,11 @@
+import type { MouseEvent } from "react";
+/**
+ * Focuses a field group's control when the press lands on the group's own box —
+ * its padding, or an inlay that takes no pointer events. Presses that reach the
+ * control, an `inlay-action` or any other interactive part are left alone.
+ *
+ * @example
+ * <div className={style.group} onMouseDown={focusControlOnRim} />
+ */
+export declare const focusControlOnRim: (event: MouseEvent<HTMLElement>) => void;
+//# sourceMappingURL=rim-focus.d.ts.map

package/dist/components/field/rim-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rim-focus.d.ts","sourceRoot":"","sources":["../../../src/components/field/rim-focus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASxC;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,UACtB,UAAU,CAAC,WAAW,CAAC,KAC5B,IAaF,CAAC"}

package/dist/components/field/rim-focus.js

@@ -0,0 +1,23 @@
+// src/components/field/rim-focus.ts
+var CONTROL_SELECTOR = [
+	"input:not([type=\"hidden\"])",
+	"textarea",
+	"[role=\"spinbutton\"]",
+	"[contenteditable=\"true\"]"
+].join(",");
+/**
+* Focuses a field group's control when the press lands on the group's own box —
+* its padding, or an inlay that takes no pointer events. Presses that reach the
+* control, an `inlay-action` or any other interactive part are left alone.
+*
+* @example
+* <div className={style.group} onMouseDown={focusControlOnRim} />
+*/
+var focusControlOnRim = (event) => {
+	if (event.target !== event.currentTarget) return;
+	const control = event.currentTarget.querySelector(CONTROL_SELECTOR);
+	if (control === null || control.matches(":disabled")) return;
+	event.preventDefault();
+	control.focus();
+};
+export { focusControlOnRim };

package/dist/components/field/use-field-focus.d.ts

@@ -0,0 +1,38 @@
+import { type FocusEvent } from "react";
+import type { FieldState } from "./field-state.ts";
+export type FieldFocusHandlers<TEvent extends FocusEvent<HTMLElement>> = Readonly<{
+    onFocus?: (event: TEvent) => void;
+    onBlur?: (event: TEvent) => void;
+}>;
+export type FieldFocus<TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>> = Readonly<{
+    /** Focus is on this element or inside it, however it got there. */
+    focused: boolean;
+    /** That focus is the keyboard's, so it has earned a ring. */
+    focusVisible: boolean;
+    /** Spread onto the element whose focus is being tracked, after its own props. */
+    props: Readonly<{
+        onFocus: (event: TEvent) => void;
+        onBlur: (event: TEvent) => void;
+    }>;
+}>;
+/**
+ * Live focus laid over a projected field state. A caller can add focus that
+ * lands elsewhere in the field, such as a popup this element does not contain;
+ * the ring stays the element's own.
+ *
+ * @example
+ * fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+ */
+export declare const withFieldFocus: (state: FieldState, focus: Pick<FieldFocus, "focused" | "focusVisible">) => FieldState;
+/**
+ * Tracks focus for a control that has to publish it as `data-focused` and
+ * `data-focus-visible` rather than leave it to a selector. React's focus events
+ * bubble, so this reads focus inside a group as well as on a bare control. The
+ * handlers passed in still run, so `props` is spread last.
+ *
+ * @example
+ * const focus = useFieldFocus(props);
+ * <div {...props} {...focus.props} />
+ */
+export declare const useFieldFocus: <TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>>(handlers?: FieldFocusHandlers<TEvent>) => FieldFocus<TEvent>;
+//# sourceMappingURL=use-field-focus.d.ts.map

package/dist/components/field/use-field-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-focus.d.ts","sourceRoot":"","sources":["../../../src/components/field/use-field-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,MAAM,kBAAkB,CAC7B,MAAM,SAAS,UAAU,CAAC,WAAW,CAAC,IACnC,QAAQ,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,CACrB,MAAM,SAAS,UAAU,CAAC,WAAW,CAAC,GACrC,UAAU,CAAC,WAAW,CAAC,IACrB,QAAQ,CAAC;IACZ,mEAAmE;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,YAAY,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,KAAK,EAAE,QAAQ,CAAC;QACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC,CAAC;CACH,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,UACnB,UAAU,SACV,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,cAAc,CAAC,KACjD,UAID,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GACzB,MAAM,SAAS,UAAU,CAAC,WAAW,CAAC,GACrC,UAAU,CAAC,WAAW,CAAC,aAEb,kBAAkB,CAAC,MAAM,CAAC,KACnC,UAAU,CAAC,MAAM,CA6BnB,CAAC"}

package/dist/components/field/use-field-focus.js

@@ -0,0 +1,71 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+// src/components/field/use-field-focus.ts
+/**
+* Live focus laid over a projected field state. A caller can add focus that
+* lands elsewhere in the field, such as a popup this element does not contain;
+* the ring stays the element's own.
+*
+* @example
+* fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+*/
+var withFieldFocus = (state, focus) => ({
+	...state,
+	focused: state.focused === true || focus.focused,
+	focusVisible: focus.focusVisible
+});
+/**
+* Tracks focus for a control that has to publish it as `data-focused` and
+* `data-focus-visible` rather than leave it to a selector. React's focus events
+* bubble, so this reads focus inside a group as well as on a bare control. The
+* handlers passed in still run, so `props` is spread last.
+*
+* @example
+* const focus = useFieldFocus(props);
+* <div {...props} {...focus.props} />
+*/
+var useFieldFocus = (handlers) => {
+	const $ = c(6);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			focused: false,
+			focusVisible: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [focus, setFocus] = useState(t0);
+	let t1;
+	if ($[1] !== handlers) {
+		t1 = {
+			onFocus: (event) => {
+				setFocus({
+					focused: true,
+					focusVisible: event.target.matches(":focus-visible")
+				});
+				handlers?.onFocus?.(event);
+			},
+			onBlur: (event_0) => {
+				if (!(event_0.relatedTarget instanceof Node && event_0.currentTarget.contains(event_0.relatedTarget))) setFocus({
+					focused: false,
+					focusVisible: false
+				});
+				handlers?.onBlur?.(event_0);
+			}
+		};
+		$[1] = handlers;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== focus || $[4] !== t1) {
+		t2 = {
+			...focus,
+			props: t1
+		};
+		$[3] = focus;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { useFieldFocus, withFieldFocus };

package/dist/components/field-placeholder/field-placeholder.css

@@ -0,0 +1,22 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._placeholder_ayddm_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, var(--sys-unit-4));
+    inline-size: 100%;
+  }
+  ._label_ayddm_9 {
+    inline-size: var(--field-placeholder-label-size, var(--sys-unit-56));
+    block-size: 1lh;
+  }
+  ._controls_ayddm_13 {
+    display: flex;
+    gap: var(--sys-unit-4);
+    inline-size: 100%;
+  }
+  ._control_ayddm_13 {
+    flex: 1;
+    block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+  }
+}

package/dist/components/field-placeholder/field-placeholder.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+/**
+ * A field-shaped placeholder, standing in for a control whose code is still on
+ * its way. Holds the label and control heights so the form does not jump when
+ * the real field arrives.
+ *
+ * @example
+ * <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+ */
+export declare const FieldPlaceholder: () => ReactNode;
+//# sourceMappingURL=field-placeholder.d.ts.map

package/dist/components/field-placeholder/field-placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-placeholder.d.ts","sourceRoot":"","sources":["../../../src/components/field-placeholder/field-placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAiB9C;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,QAAO,SAenC,CAAC"}

package/dist/components/field-placeholder/field-placeholder.js

@@ -0,0 +1,54 @@
+import { Skeleton } from "../skeleton/skeleton.js";
+import field_placeholder_module_default from "./field-placeholder.module.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/field-placeholder/field-placeholder.tsx
+var SHAPES = ["single", "split"];
+var shapeIndex = (seed, count) => {
+	let hash = 0;
+	for (const character of seed) hash = (hash * 31 + character.charCodeAt(0)) % 1000003;
+	return hash % count;
+};
+/**
+* A field-shaped placeholder, standing in for a control whose code is still on
+* its way. Holds the label and control heights so the form does not jump when
+* the real field arrives.
+*
+* @example
+* <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+*/
+var FieldPlaceholder = () => {
+	const $ = c(6);
+	const shape = SHAPES[shapeIndex(useId(), SHAPES.length)] ?? "single";
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.label });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== shape) {
+		t2 = shape === "split" && /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[2] = shape;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: field_placeholder_module_default.placeholder,
+			children: [t0, /* @__PURE__ */ jsxs("div", {
+				className: field_placeholder_module_default.controls,
+				children: [t1, t2]
+			})]
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+export { FieldPlaceholder };

package/dist/components/field-placeholder/field-placeholder.module.js

@@ -0,0 +1,12 @@
+import './field-placeholder.css';// src/components/field-placeholder/field-placeholder.module.scss
+var placeholder = "_placeholder_ayddm_3";
+var label = "_label_ayddm_9";
+var controls = "_controls_ayddm_13";
+var control = "_control_ayddm_13";
+var field_placeholder_module_default = {
+	placeholder,
+	label,
+	controls,
+	control
+};
+export { control, controls, field_placeholder_module_default as default, label, placeholder };

package/dist/components/field-placeholder/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./field-placeholder.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field-placeholder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-placeholder/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/components/field-placeholder/index.js

@@ -0,0 +1 @@
+export { FieldPlaceholder } from "./field-placeholder.js";

package/dist/components/file-field/file-field.css

@@ -0,0 +1,95 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._dropTarget_1uj0b_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._dropTarget_1uj0b_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._dropTarget_1uj0b_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._dropTarget_1uj0b_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._dropTarget_1uj0b_3:hover:not([data-disabled], [data-readonly]), ._dropTarget_1uj0b_3[data-focused], ._dropTarget_1uj0b_3[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._dropTarget_1uj0b_3[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._dropTarget_1uj0b_3[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._dropTarget_1uj0b_3[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._dropTarget_1uj0b_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._dropTarget_1uj0b_3 {
+    position: relative;
+    display: flex;
+    gap: var(--sys-unit-4);
+  }
+  ._dropTarget_1uj0b_3 {
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--file-field-gap, var(--sys-unit-8));
+    min-block-size: var(--file-field-min-block-size, var(--sys-unit-40));
+    padding: var(--file-field-padding, var(--sys-unit-12));
+    text-align: center;
+    cursor: pointer;
+  }
+  ._dropTarget_1uj0b_3[data-readonly] {
+    cursor: default;
+  }
+  ._dropTarget_1uj0b_3[data-drop-target] {
+    border-style: dashed;
+    border-color: var(--file-field-drop-border, var(--sys-color-primary));
+    background: var(--file-field-drop-bg, var(--sys-color-primary-container));
+    color: var(--file-field-drop-fg, var(--sys-color-on-primary-container));
+  }
+  ._hint_1uj0b_76 {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    color: var(--field-muted-fg);
+    font: var(--sys-font-body-medium);
+    overflow-wrap: normal;
+    hyphens: auto;
+  }
+  ._list_1uj0b_86 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--file-field-gap, var(--sys-unit-8));
+    min-inline-size: 0;
+  }
+}