asheeui 0.7.0 → 1.0.0

package/dist/components/dropmenu/Dropmenu.js

@@ -0,0 +1,102 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
+import { resolveCascade as r, resolveRadiusKey as i } from "../../utils/resolve-token.js";
+import { FieldShell as a } from "../field/FieldShell.js";
+import { Button as ee } from "../button/Button.js";
+import { Menu as te } from "../menu/Menu.js";
+import { useMenuFloating as o } from "../menu/use-menu-floating.js";
+import { FALLBACK_SELECT_CONFIG as s } from "./dropmenu-config.js";
+import { SELECT_STATUS_BORDER_CLASS as c } from "./dropmenu-styles.js";
+import { forwardRef as l, useCallback as u, useId as ne, useMemo as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/dropmenu/Dropmenu.tsx
+var g = l(({ options: l = [], value: g, onChange: _, onValueChange: v, size: y, radius: b, variant: x, color: re, status: S, label: ie, labelAlign: ae, description: C, message: w, required: oe, isLoading: T, disabled: E, isSearch: D = !1, searchPlaceholder: O = "Search options...", searchInputName: k = "select-search", initialValue: A, belowList: j, placeholder: M = "Dropmenu...", className: N, id: P, name: F, menu: I, style: L, startContent: R, endContent: z }, B) => {
+	let V = t(), H = V.components?.dropmenu, U = ne(), W = P ?? U, [G, K] = f(!1), [q, J] = f(""), se = r(y, H?.size, void 0, s.size), ce = r(x, H?.variant, V.defaultVariant, s.variant), le = r(re, H?.color, V.defaultColor, s.color), ue = i(b, H?.radius, V.defaultRadius, s.radius), Y = S ?? s.status, de = r(ae, H?.labelAlign, void 0, s.labelAlign), fe = Y === "default" ? "" : c[Y], X = d(() => l.find((e) => e.value === g), [l, g]), { refs: Z, context: pe, floatingStyles: me, isPositioned: he, getReferenceProps: ge, getFloatingProps: _e } = o({
+		isOpen: G,
+		onOpenChange: K,
+		disabled: E
+	}), ve = u((e) => {
+		v?.(e.value), _ && _({ target: {
+			value: e.value,
+			name: F ?? ""
+		} }), K(!1), J("");
+	}, [
+		F,
+		_,
+		v
+	]), ye = d(() => X?.label ? X.label : A === void 0 ? M : String(A), [
+		X,
+		A,
+		M
+	]), be = d(() => g == null ? [] : [g], [g]), Q = C ? `${W}-description` : void 0, $ = w ? `${W}-message` : void 0, xe = [Q, $].filter(Boolean).join(" ") || void 0, Se = ge({ onKeyDown: u((e) => {
+		E || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), K(!0));
+	}, [E]) });
+	return /* @__PURE__ */ m(a, {
+		id: W,
+		label: ie,
+		labelAlign: de,
+		description: C,
+		descriptionId: Q,
+		message: w,
+		messageId: $,
+		status: Y,
+		required: oe,
+		isLoading: T,
+		children: /* @__PURE__ */ h("div", {
+			className: "w-full relative inline-block",
+			children: [/* @__PURE__ */ m(ee, {
+				ref: (e) => {
+					Z.setReference(e), typeof B == "function" ? B(e) : B && (B.current = e);
+				},
+				id: W,
+				type: "button",
+				variant: ce,
+				color: le,
+				animate: !1,
+				size: se,
+				radius: ue,
+				isDisabled: E,
+				isLoading: T,
+				fullWidth: !0,
+				"aria-expanded": G,
+				"aria-haspopup": "listbox",
+				"aria-invalid": Y === "error",
+				"aria-describedby": xe,
+				className: e("font-normal text-left justify-between", fe, N),
+				style: L,
+				startContent: R,
+				endContent: /* @__PURE__ */ h(p, { children: [z, /* @__PURE__ */ m(n, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", G && "rotate-180") })] }),
+				...Se,
+				children: /* @__PURE__ */ m("span", {
+					className: e("truncate", X || A ? "text-foreground" : "text-foreground/70"),
+					children: ye
+				})
+			}), /* @__PURE__ */ m(te, {
+				isOpen: G,
+				context: pe,
+				floatingStyles: me,
+				getFloatingProps: _e,
+				setFloatingRef: Z.setFloating,
+				isPositioned: he,
+				returnFocus: !0,
+				options: l,
+				selectedValues: be,
+				onOptionSelect: ve,
+				isSearch: D,
+				searchPlaceholder: O,
+				searchInputName: k,
+				searchQuery: q,
+				onSearchChange: J,
+				belowList: j,
+				menuProps: I,
+				menuConfig: H?.menu
+			})]
+		})
+	});
+});
+g.displayName = "Dropmenu";
+//#endregion
+export { g as Dropmenu };

package/dist/components/{select/select-config.d.ts → dropmenu/dropmenu-config.d.ts}

@@ -1,13 +1,13 @@
 import { InputConfig } from '../input';
-import { MenuConfig } from '../select-menu';
+import { MenuConfig } from '../menu';
 /**
- * Theme configuration options for the Select component.
+ * Theme configuration options for the Dropmenu component.
  *
  * Inherits the shared field config (label handling) and adds trigger
- * and dropdown-menu overrides. Set under `components.select` in
+ * and dropdown-menu overrides. Set under `components.dropmenu` in
  * the AsheeUI config.
  */
-export interface SelectConfig extends InputConfig {
+export interface DropmenuConfig extends InputConfig {
     /**
      * Configuration for the dropdown menu.
      * Controls the menu's visual appearance and behavior.
@@ -15,9 +15,9 @@ export interface SelectConfig extends InputConfig {
     menu?: MenuConfig;
 }
 /**
- * Default config values registered for the Select component.
+ * Default config values registered for the Dropmenu component.
  */
-export declare const defaultSelectConfig: SelectConfig;
+export declare const defaultDropmenuConfig: DropmenuConfig;
 /**
  * Hard fallback values used when no config tier provides a value.
  * These values are used when instance props, component config,
@@ -26,7 +26,7 @@ export declare const defaultSelectConfig: SelectConfig;
 export declare const FALLBACK_SELECT_CONFIG: Required<import('../field').FieldConfig>;
 declare module "../../libs/registry" {
     interface ComponentTypeConfigRegistry {
-        select: SelectConfig;
+        dropmenu: DropmenuConfig;
     }
 }
-//# sourceMappingURL=select-config.d.ts.map
+//# sourceMappingURL=dropmenu-config.d.ts.map

package/dist/components/dropmenu/dropmenu-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropmenu-config.d.ts","sourceRoot":"","sources":["../../../src/components/dropmenu/dropmenu-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAAmC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,0CAAwB,CAAC;AAE5D,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF"}

package/dist/components/{select/select-config.js → dropmenu/dropmenu-config.js}

@@ -2,8 +2,8 @@
 import { registerComponentDefaults as e } from "../../libs/registry.js";
 import { FALLBACK_FIELD_CONFIG as t } from "../field/field-config.js";
 import { defaultInputConfig as n } from "../input/input-config.js";
-//#region src/components/select/select-config.ts
+//#region src/components/dropmenu/dropmenu-config.ts
 var r = n, i = t;
-e("select", r);
+e("dropmenu", r);
 //#endregion
-export { i as FALLBACK_SELECT_CONFIG, r as defaultSelectConfig };
+export { i as FALLBACK_SELECT_CONFIG, r as defaultDropmenuConfig };

package/dist/components/{select/select-styles.d.ts → dropmenu/dropmenu-styles.d.ts}

@@ -11,4 +11,4 @@ export declare const SELECT_SIZE_CLASS: Record<FieldSizeKey, string>;
  * focus ring colors. Re-exports FIELD_STATUS_BORDER_CLASS.
  */
 export declare const SELECT_STATUS_BORDER_CLASS: Record<FieldStatus, string>;
-//# sourceMappingURL=select-styles.d.ts.map
+//# sourceMappingURL=dropmenu-styles.d.ts.map

package/dist/components/dropmenu/dropmenu-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropmenu-styles.d.ts","sourceRoot":"","sources":["../../../src/components/dropmenu/dropmenu-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGvE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI1D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CACxC,CAAC"}

package/dist/components/{select/select-styles.js → dropmenu/dropmenu-styles.js}

@@ -1,6 +1,6 @@
 "use client";
 import { FIELD_STATUS_BORDER_CLASS as e } from "../field/field-styles.js";
-//#region src/components/select/select-styles.ts
+//#region src/components/dropmenu/dropmenu-styles.ts
 var t = e;
 //#endregion
 export { t as SELECT_STATUS_BORDER_CLASS };

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

@@ -0,0 +1,3 @@
+export * from './Dropmenu';
+export * from './dropmenu-config';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropmenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/dropmenu/index.js

@@ -0,0 +1,3 @@
+export * from "./Dropmenu.js";
+export * from "./dropmenu-config.js";
+export * from "./dropmenu-styles.js";

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

@@ -10,6 +10,18 @@ export interface FieldShellProps {
      * Used to associate the label with the input via htmlFor.
      */
     id: string;
+    /**
+     * ID for the label element.
+     * A container that groups several controls (a radio group, for example)
+     * references the visible label with `aria-labelledby` instead of `htmlFor`.
+     */
+    labelId?: string;
+    /**
+     * ID of the control the label describes.
+     * Defaults to `id`. Pass `null` when the label describes a group of controls
+     * rather than one control, so no reference is emitted.
+     */
+    htmlFor?: string | null;
     /**
      * The label text for the field.
      */
@@ -99,5 +111,5 @@ export interface FieldShellProps {
  *
  * @see FieldConfig - The configuration type for field components.
  */
-export declare function FieldShell({ id, label, labelAlign, description, descriptionId, message, messageId, status, required, isLoading, children, }: FieldShellProps): import("react").JSX.Element;
+export declare function FieldShell({ id, labelId, htmlFor, label, labelAlign, description, descriptionId, message, messageId, status, required, isLoading, children, }: FieldShellProps): import("react").JSX.Element;
 //# sourceMappingURL=FieldShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldShell.d.ts","sourceRoot":"","sources":["../../../src/components/field/FieldShell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuB9D;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,KAAK,EACL,UAAmB,EACnB,WAAW,EACX,aAAa,EACb,OAAO,EACP,SAAS,EACT,MAAkB,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAqCjB"}
+{"version":3,"file":"FieldShell.d.ts","sourceRoot":"","sources":["../../../src/components/field/FieldShell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuB9D;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,WAAW,EACX,aAAa,EACb,OAAO,EACP,SAAS,EACT,MAAkB,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAwCjB"}

package/dist/components/field/FieldShell.js

@@ -13,37 +13,38 @@ var i = {
 	warning: "text-warning",
 	success: "text-success"
 };
-function o({ id: o, label: s, labelAlign: c = "left", description: l, descriptionId: u, message: d, messageId: f, status: p = "default", required: m, isLoading: h, children: g }) {
+function o({ id: o, labelId: s, htmlFor: c, label: l, labelAlign: u = "left", description: d, descriptionId: f, message: p, messageId: m, status: h = "default", required: g, isLoading: _, children: v }) {
 	return /* @__PURE__ */ r("div", {
 		className: "flex flex-col gap-1.5",
 		children: [
-			s && /* @__PURE__ */ n("label", {
-				htmlFor: o,
-				className: e("text-sm font-medium text-foreground", i[c]),
+			l && /* @__PURE__ */ n("label", {
+				id: s,
+				htmlFor: c === null ? void 0 : c ?? o,
+				className: e("text-sm font-medium text-foreground", i[u]),
 				children: /* @__PURE__ */ r("span", {
 					className: "inline-flex items-center gap-1.5",
 					children: [
-						s,
-						m && /* @__PURE__ */ n("span", {
+						l,
+						g && /* @__PURE__ */ n("span", {
 							"aria-hidden": "true",
 							className: "text-danger",
 							children: "*"
 						}),
-						h && /* @__PURE__ */ n(t, { size: "sm" })
+						_ && /* @__PURE__ */ n(t, { size: "sm" })
 					]
 				})
 			}),
-			l && /* @__PURE__ */ n("p", {
-				id: u,
-				className: e("text-sm text-foreground/60"),
-				children: l
-			}),
-			g,
 			d && /* @__PURE__ */ n("p", {
 				id: f,
-				role: p === "error" ? "alert" : void 0,
-				className: e("text-sm", a[p]),
+				className: e("text-sm text-foreground/60"),
 				children: d
+			}),
+			v,
+			p && /* @__PURE__ */ n("p", {
+				id: m,
+				role: h === "error" ? "alert" : void 0,
+				className: e("text-sm", a[h]),
+				children: p
 			})
 		]
 	});

package/dist/components/form/Form.d.ts

@@ -0,0 +1,109 @@
+import { ElementType, FormHTMLAttributes, ReactNode } from 'react';
+import { FormConfig } from './form-config';
+type BaseFormProps = FormConfig & Omit<FormHTMLAttributes<HTMLFormElement>, "color" | "children">;
+/**
+ * Configuration options for the Form component.
+ */
+export interface FormProps extends BaseFormProps {
+    /**
+     * The fields and other content of the form.
+     */
+    children?: ReactNode;
+    /**
+     * Legend that groups the fields.
+     * When it is given the fields are wrapped in a `fieldset` with that legend,
+     * which is how a form tells assistive technology which set of controls it is
+     * describing. A form whose fields are already grouped by other landmarks
+     * omits it and names itself with `aria-label` or `aria-labelledby`.
+     */
+    legend?: string;
+    /**
+     * Label of the submit control.
+     * When it is given the component renders an AsheeUI `Button` as the form's
+     * submit control, so no consumer has to rebuild one. Without it the
+     * consumer places its own control.
+     */
+    submitLabel?: string;
+    /**
+     * Whether a submission is in progress.
+     * While it is true the submit control is disabled and busy, which is how a
+     * consumer shows a pending submission without bespoke markup.
+     *
+     * @default false
+     */
+    isPending?: boolean;
+    /**
+     * Component that replaces the native `form` element, such as a framework
+     * form primitive.
+     *
+     * The substitution API is shared with `Link` and `Image`: `component` names
+     * the component and `componentProps` carries the props it needs.
+     */
+    component?: ElementType;
+    /**
+     * Additional props for `component`.
+     */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * A framework-native form element.
+ *
+ * Form wraps the native `form` element the way `Link` wraps the anchor and
+ * `Image` wraps the picture, so form-level improvements have one home without
+ * the framework taking responsibility for form state. It preserves native
+ * submission and validation: `action`, `method`, `encType`, `target`,
+ * `noValidate` and the submit event all pass through untouched, and the
+ * forwarded ref reaches the element itself.
+ *
+ * It is deliberately thin, because a consumer's form state belongs to the
+ * consumer or to a form library. There is no AsheeUI field registry, no
+ * validation schema, and no submission state: `onSubmit` is the native event,
+ * so a form library binds to it exactly as it binds to a plain form.
+ *
+ * Fields keep their own presentation through the framework's field
+ * components, and the component renders an AsheeUI `Button` as the submit
+ * control when a label is given for it. Page layout stays with the consumer's
+ * Tailwind classes.
+ *
+ * The form never moves focus, on mount or on a rejected submission: where a
+ * consumer sends focus after a failed validation is a consumer decision.
+ *
+ * The form element itself can be replaced, the way `Link` replaces the anchor
+ * and `Image` replaces the picture: pass `component` to name a form component
+ * and `componentProps` for the props it needs.
+ *
+ * @param props - Form configuration options and native form attributes.
+ * @param props.children - The fields and other content of the form.
+ * @param props.legend - Legend that groups the fields.
+ * @param props.submitLabel - Label of the submit control the component renders.
+ * @param props.isPending - Whether a submission is in progress. Defaults to false.
+ * @param props.component - Component that replaces the native form element.
+ * @param props.componentProps - Additional props for that component.
+ * @param props.submitVariant - Style of the submit control. Defaults to the configured value.
+ * @param props.submitColor - Colour of the submit control. Defaults to the configured value.
+ * @param props.submitSize - Size of the submit control. Defaults to "md".
+ * @param props.submitRadius - Corner rounding of the submit control. Defaults to "md".
+ * @param props.className - Extra classes applied last.
+ *
+ * @example
+ * ```tsx
+ * <Form legend="Invoice details" submitLabel="Save" onSubmit={handleSubmit}>
+ *   <Input label="Reference" name="reference" />
+ *   <Textarea label="Notes" name="notes" />
+ * </Form>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // A form library binds to the native submit event, unchanged.
+ * <Form onSubmit={form.handleSubmit(save)}>
+ *   <Input label="Email" name="email" />
+ * </Form>
+ * ```
+ *
+ * @see FormConfig - The configuration type for component defaults.
+ * @see Button - The submit control the component renders.
+ */
+export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLFormElement>>;
+export {};
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EAEvB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,UAAU,EAAwB,MAAM,eAAe,CAAC;AAQtE,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,IAAI,uGAyFhB,CAAC"}

package/dist/components/form/Form.js

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveCascade as n, resolveRadiusKey as r } from "../../utils/resolve-token.js";
+import { Button as i } from "../button/Button.js";
+import { FALLBACK_FORM_CONFIG as a } from "./form-config.js";
+import { FORM_BASE_CLASS as o, FORM_FIELD_GROUP_CLASS as s, FORM_LEGEND_CLASS as c } from "./form-styles.js";
+import { forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/form/Form.tsx
+var p = l(({ children: l, legend: p, submitLabel: m, isPending: h = !1, component: g, componentProps: _, submitVariant: v, submitColor: y, submitSize: b, submitRadius: x, className: S, ...C }, w) => {
+	let T = t(), E = T.components?.form, D = n(v, E?.submitVariant, T.defaultVariant, a.submitVariant), O = n(y, E?.submitColor, T.defaultColor, a.submitColor), k = n(b, E?.submitSize, void 0, a.submitSize), A = r(x, E?.submitRadius, T.defaultRadius, a.submitRadius), j = /* @__PURE__ */ f(u, { children: [l, m && /* @__PURE__ */ d("div", {
+		className: "flex items-center gap-2 mt-4",
+		children: /* @__PURE__ */ d(i, {
+			type: "submit",
+			variant: D,
+			color: O,
+			size: k,
+			radius: A,
+			isLoading: h,
+			isDisabled: h,
+			children: m
+		})
+	})] });
+	return /* @__PURE__ */ d(g || "form", {
+		ref: w,
+		className: e(o, S),
+		...C,
+		..._,
+		children: p ? /* @__PURE__ */ f("fieldset", {
+			className: s,
+			children: [/* @__PURE__ */ d("legend", {
+				className: c,
+				children: p
+			}), j]
+		}) : j
+	});
+});
+p.displayName = "Form";
+//#endregion
+export { p as Form };

package/dist/components/form/form-config.d.ts

@@ -0,0 +1,57 @@
+import { Color, Radius, Size, Variant } from '../../shared';
+/**
+ * Theme configuration options for the Form component.
+ *
+ * Set under `components.form` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ *
+ * The form element itself carries no visual treatment: it is a grouping and
+ * submission element, and the fields inside it style themselves. These options
+ * describe the submit control the component renders when a label is given for
+ * it.
+ */
+export interface FormConfig {
+    /**
+     * Visual style variant of the submit control.
+     *
+     * @default "solid"
+     */
+    submitVariant?: Variant;
+    /**
+     * Theme accent colour of the submit control.
+     *
+     * @default "primary"
+     */
+    submitColor?: Color;
+    /**
+     * Size of the submit control.
+     *
+     * @default "md"
+     */
+    submitSize?: Size;
+    /**
+     * Corner rounding of the submit control.
+     *
+     * @default "md"
+     */
+    submitRadius?: Radius;
+}
+/**
+ * Default config values registered for the Form component.
+ *
+ * The visual tokens are intentionally absent so they inherit from the global
+ * defaults and the built-in fallback.
+ */
+export declare const defaultFormConfig: FormConfig;
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * These values are used when instance props, component config,
+ * and global defaults are all undefined.
+ */
+export declare const FALLBACK_FORM_CONFIG: Required<FormConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        form: FormConfig;
+    }
+}
+//# sourceMappingURL=form-config.d.ts.map

package/dist/components/form/form-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-config.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAE/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,UAAU,CAK5C,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF"}

package/dist/components/form/form-config.js

@@ -0,0 +1,12 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/form/form-config.ts
+var t = { submitRadius: "md" }, n = {
+	submitVariant: "solid",
+	submitColor: "primary",
+	submitSize: "md",
+	submitRadius: "md"
+};
+e("form", t);
+//#endregion
+export { n as FALLBACK_FORM_CONFIG, t as defaultFormConfig };

package/dist/components/form/form-styles.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Form component styles for AsheeUI.
+ * This file provides the static classes the Form component is built from.
+ *
+ * The list is deliberately short: a form groups and submits, and page layout
+ * belongs to the consumer's Tailwind classes. Nothing here styles
+ * a field, because fields are the framework's field components.
+ */
+/**
+ * Base classes for the form element.
+ */
+export declare const FORM_BASE_CLASS = "w-full";
+/**
+ * Classes for the group that wraps the fields when the consumer names them.
+ * The browser's default fieldset frame is removed, because the grouping is
+ * semantic rather than visual.
+ */
+export declare const FORM_FIELD_GROUP_CLASS = "border-0 p-0 m-0 min-w-0";
+/**
+ * Classes for the legend of that group.
+ */
+export declare const FORM_LEGEND_CLASS = "p-0 mb-2 text-sm font-medium text-foreground";
+/**
+ * Classes for the row that holds the submit control.
+ */
+export declare const FORM_SUBMIT_ROW_CLASS = "flex items-center gap-2 mt-4";
+//# sourceMappingURL=form-styles.d.ts.map

package/dist/components/form/form-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-styles.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,WAAW,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iCAAiC,CAAC"}

package/dist/components/form/form-styles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/form/form-styles.ts
+var e = "w-full", t = "border-0 p-0 m-0 min-w-0", n = "p-0 mb-2 text-sm font-medium text-foreground", r = "flex items-center gap-2 mt-4";
+//#endregion
+export { e as FORM_BASE_CLASS, t as FORM_FIELD_GROUP_CLASS, n as FORM_LEGEND_CLASS, r as FORM_SUBMIT_ROW_CLASS };

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

@@ -0,0 +1,3 @@
+export * from './Form';
+export * from './form-config';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/components/form/index.js

@@ -0,0 +1,3 @@
+export * from "./Form.js";
+export * from "./form-config.js";
+export * from "./form-styles.js";

package/dist/components/image/Image.d.ts

@@ -17,14 +17,13 @@ export interface ImageProps extends BaseImageProps {
      */
     component?: ElementType;
     /**
-     * Additional props to pass to the custom image component
-     * (e.g. `{ priority: true, sizes: "..." }`).
+     * Additional props for `component` (for example `{ priority: true }`).
      *
      * If `component` is set and neither `width`/`height` nor `fill`
      * are provided here, `fill: true` is applied automatically since
      * this component is container/ratio driven.
      */
-    props?: Record<string, unknown>;
+    componentProps?: Record<string, unknown>;
 }
 /**
  * An image element with ratio locking, object-fit control, radius
@@ -51,7 +50,7 @@ export interface ImageProps extends BaseImageProps {
  * @param props.showSkeleton - Loading placeholder. Defaults to true.
  * @param props.className - Extra classes for the image element.
  * @param props.component - Custom image component.
- * @param props.props - Props forwarded to the image component.
+ * @param props.componentProps - Props forwarded to the image component.
  * @param props.src - The image source URL.
  * @param props.onLoad - Callback fired when the image loads.
  * @param props.onError - Callback fired when the image fails to load.
@@ -83,7 +82,7 @@ export interface ImageProps extends BaseImageProps {
  *   src="/hero.png"
  *   alt="Hero image"
  *   component={NextImage}
- *   props={{ priority: true, sizes: "100vw" }}
+ *   componentProps={{ priority: true, sizes: "100vw" }}
  * />
  * ```
  *

package/dist/components/image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/image/Image.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,KAAK,yGAsNjB,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/image/Image.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,KAAK,yGAsNjB,CAAC"}

package/dist/components/image/Image.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n } from "../../shared/radius.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
 import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
 import { FALLBACK_IMAGE_CONFIG as o } from "./image-config.js";
 import { IMAGE_FIT_CLASS as s, IMAGE_RATIO_CLASS as c } from "./image-styles.js";
@@ -12,8 +12,8 @@ import { jsx as p, jsxs as m } from "react/jsx-runtime";
 function h(e) {
 	return typeof e == "string" && e.trim().length > 0;
 }
-var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton: ee, loading: b, src: x, className: S, onLoad: C, onError: w, component: T, props: E, ...D }, O) => {
-	let k = t(), A = k.components?.image, [j, M] = f(!1), [N, P] = f(x), F = d(null);
+var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton: ee, loading: b, src: x, className: S, onLoad: C, onError: w, component: T, componentProps: E, ...D }, O) => {
+	let k = n(), A = k.components?.image, [j, M] = f(!1), [N, P] = f(x), F = d(null);
 	u(() => {
 		P(x), M(!1);
 	}, [x]), u(() => {
@@ -30,7 +30,7 @@ var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton:
 		M(!0), w?.(e);
 	}, R = (e) => {
 		F.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
-	}, z = r(g, A?.fit, void 0, o.fit), B = r(_, A?.ratio, void 0, o.ratio), V = a(v, A?.radius, k.defaultRadius, o.radius), H = r(b, A?.loading, void 0, o.loading), U = r(ee, A?.showSkeleton, void 0, o.showSkeleton), W = i(z, s, o.fit), G = i(B, c, o.ratio), K = i(V, n, o.radius), q = T || "img", J = !!T, Y = h(N), X = E?.width !== void 0 || E?.height !== void 0 || E?.fill !== void 0, Z = J && !X ? {
+	}, z = r(g, A?.fit, void 0, o.fit), B = r(_, A?.ratio, void 0, o.ratio), V = a(v, A?.radius, k.defaultRadius, o.radius), H = r(b, A?.loading, void 0, o.loading), U = r(ee, A?.showSkeleton, void 0, o.showSkeleton), W = i(z, s, o.fit), G = i(B, c, o.ratio), K = i(V, t, o.radius), q = T || "img", J = !!T, Y = h(N), X = E?.width !== void 0 || E?.height !== void 0 || E?.fill !== void 0, Z = J && !X ? {
 		fill: !0,
 		sizes: "100%"
 	} : {}, Q = e("h-full w-full transition-opacity duration-300", W, j ? "opacity-100" : "opacity-0", K, S), $ = { ...E ?? {} };