asheeui 0.6.15 → 1.0.0

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

@@ -1,20 +1,19 @@
 "use client";
 import { registerComponentDefaults as e } from "../../libs/registry.js";
-const t = {
-  size: "md",
-  placement: "right",
-  animated: !0,
-  closeOnOverlayClick: !0,
-  closeOnEsc: !0
+//#region src/components/drawer/drawer-config.ts
+var t = {
+	size: "md",
+	placement: "right",
+	animated: !0,
+	closeOnOverlayClick: !0,
+	closeOnEsc: !0
 }, n = {
-  size: "md",
-  placement: "right",
-  animated: !0,
-  closeOnOverlayClick: !0,
-  closeOnEsc: !0
+	size: "md",
+	placement: "right",
+	animated: !0,
+	closeOnOverlayClick: !0,
+	closeOnEsc: !0
 };
 e("drawer", t);
-export {
-  n as FALLBACK_DRAWER_CONFIG,
-  t as defaultDrawerConfig
-};
+//#endregion
+export { n as FALLBACK_DRAWER_CONFIG, t as defaultDrawerConfig };

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

@@ -1,46 +1,42 @@
 "use client";
-const e = {
-  sm: "w-80",
-  md: "w-[28rem]",
-  lg: "w-[36rem]",
-  full: "w-screen"
+//#region src/components/drawer/drawer-styles.ts
+var e = {
+	sm: "w-80",
+	md: "w-[28rem]",
+	lg: "w-[36rem]",
+	full: "w-screen"
 }, t = {
-  sm: "h-80",
-  md: "h-[28rem]",
-  lg: "h-[36rem]",
-  full: "h-screen"
-}, o = {
-  right: "justify-end items-stretch",
-  left: "justify-start items-stretch",
-  top: "flex-col justify-start items-stretch",
-  bottom: "flex-col justify-end items-stretch"
+	sm: "h-80",
+	md: "h-[28rem]",
+	lg: "h-[36rem]",
+	full: "h-screen"
+}, n = {
+	right: "justify-end items-stretch",
+	left: "justify-start items-stretch",
+	top: "flex-col justify-start items-stretch",
+	bottom: "flex-col justify-end items-stretch"
 }, r = {
-  right: "border-l",
-  left: "border-r",
-  top: "border-b",
-  bottom: "border-t"
-}, s = {
-  right: {
-    closed: "drawer-slide-right-closed",
-    open: "drawer-slide-right-open"
-  },
-  left: {
-    closed: "drawer-slide-left-closed",
-    open: "drawer-slide-left-open"
-  },
-  top: {
-    closed: "drawer-slide-top-closed",
-    open: "drawer-slide-top-open"
-  },
-  bottom: {
-    closed: "drawer-slide-bottom-closed",
-    open: "drawer-slide-bottom-open"
-  }
-};
-export {
-  s as DRAWER_ANIMATION_STATE,
-  r as DRAWER_BORDER_PLACEMENT_CLASS,
-  o as DRAWER_CONTAINER_PLACEMENT_CLASS,
-  t as DRAWER_HEIGHT_CLASS,
-  e as DRAWER_WIDTH_CLASS
+	right: "border-l",
+	left: "border-r",
+	top: "border-b",
+	bottom: "border-t"
+}, i = {
+	right: {
+		closed: "drawer-slide-right-closed",
+		open: "drawer-slide-right-open"
+	},
+	left: {
+		closed: "drawer-slide-left-closed",
+		open: "drawer-slide-left-open"
+	},
+	top: {
+		closed: "drawer-slide-top-closed",
+		open: "drawer-slide-top-open"
+	},
+	bottom: {
+		closed: "drawer-slide-bottom-closed",
+		open: "drawer-slide-bottom-open"
+	}
 };
+//#endregion
+export { i as DRAWER_ANIMATION_STATE, r as DRAWER_BORDER_PLACEMENT_CLASS, n as DRAWER_CONTAINER_PLACEMENT_CLASS, t as DRAWER_HEIGHT_CLASS, e as DRAWER_WIDTH_CLASS };

package/dist/components/{select/Select.d.ts → dropmenu/Dropmenu.d.ts}

@@ -1,23 +1,24 @@
 import { ReactNode } from 'react';
 import { InputProps } from '../input/Input';
-import { MenuConfig, SelectMenuOption } from '../select-menu/select-menu-config';
-import { SelectConfig } from './select-config';
+import { MenuProps } from '../menu/Menu';
+import { MenuOption } from '../menu/menu-config';
+import { DropmenuConfig } from './dropmenu-config';
 /**
- * Field-related props that Select inherits from Input.
+ * Field-related props that Dropmenu inherits from Input.
  * Picked to avoid conflicts with Button-specific props.
  */
 type SelectFieldProps = Pick<InputProps, "label" | "description" | "message" | "required" | "isLoading" | "status" | "labelAlign" | "className" | "id" | "style">;
 /**
- * Configuration options for the Select component.
- * Extends field props from Input, and SelectConfig for
+ * Configuration options for the Dropmenu component.
+ * Extends field props from Input, and DropmenuConfig for
  * component-specific options. Uses Button for trigger styling.
  */
-export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"> {
+export interface DropmenuProps extends SelectFieldProps, Omit<DropmenuConfig, "menu"> {
     /**
      * Available options to select from.
      * Each option must have a label and a unique value.
      */
-    options: SelectMenuOption[];
+    options: MenuOption[];
     /**
      * Controlled selected value.
      */
@@ -62,7 +63,7 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
     /**
      * Placeholder text shown when no value is selected.
      *
-     * @default "Select..."
+     * @default "Dropmenu..."
      */
     placeholder?: string;
     /**
@@ -89,12 +90,12 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
      * Menu configuration overrides including portal, portalTarget, className, and visual styles.
      * All menu-related props should be passed through this object.
      */
-    menu?: MenuConfig;
+    menu?: MenuProps;
 }
 /**
  * A dropdown selector with search, label, validation, and configurable styles.
  *
- * Select renders a dropdown that allows selecting a single option from a list.
+ * Dropmenu renders a dropdown that allows selecting a single option from a list.
  * It supports search filtering, controlled and uncontrolled selection state,
  * validation states, custom menu and trigger styles, and start/end content
  * slots. Visual tokens resolve through the standard AsheeUI cascade system.
@@ -107,10 +108,10 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  * By default, the dropdown menu uses Floating UI's FloatingPortal to render
  * at the document body level. This ensures the menu escapes CSS containment,
  * overflow clipping, and stacking context issues. The portal can be disabled
- * via the `menu.portal` prop or `components.select.menu.portal` in the config
+ * via the `menu.portal` prop or `components.dropmenu.menu.portal` in the config
  * if the menu needs to stay within a specific parent container.
  *
- * @param props - Select configuration options.
+ * @param props - Dropmenu configuration options.
  * @param props.options - Available options to select from.
  * @param props.value - Controlled selected value.
  * @param props.onChange - Native change event handler.
@@ -126,7 +127,7 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  * @param props.searchInputName - Name attribute for the search input. Defaults to "select-search".
  * @param props.initialValue - Initial value for uncontrolled usage.
  * @param props.belowList - Content below the options list.
- * @param props.placeholder - Placeholder text. Defaults to "Select...".
+ * @param props.placeholder - Placeholder text. Defaults to "Dropmenu...".
  * @param props.size - Size of the trigger. Defaults to "md".
  * @param props.radius - Corner rounding. Defaults to "md".
  * @param props.variant - Visual style variant. Defaults to "bordered".
@@ -142,7 +143,7 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  *
  * @example
  * ```tsx
- * import { Select } from "asheeui";
+ * import { Dropmenu } from "asheeui";
  * import { useState } from "react";
  *
  * export function Example() {
@@ -155,11 +156,11 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  *   ];
  *
  *   return (
- *     <Select
+ *     <Dropmenu
  *       options={options}
  *       value={value}
  *       onValueChange={setValue}
- *       label="Select Framework"
+ *       label="Dropmenu Framework"
  *       placeholder="Choose a framework..."
  *     />
  *   );
@@ -169,7 +170,7 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  * @example
  * ```tsx
  * // With search, validation, and menu configuration
- * <Select
+ * <Dropmenu
  *   options={fruits}
  *   label="Favorite Fruit"
  *   isSearch
@@ -186,12 +187,12 @@ export interface SelectProps extends SelectFieldProps, Omit<SelectConfig, "menu"
  * />
  * ```
  *
- * @see SelectConfig - The configuration type for component defaults.
+ * @see DropmenuConfig - The configuration type for component defaults.
  * @see Input - The input component that provides field capabilities.
  * @see Button - The button component used as the trigger.
- * @see SelectMenu - The dropdown menu component.
+ * @see Menu - The dropdown menu component.
  * @see FieldShell - The wrapper component for label and validation.
  */
-export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Dropmenu: import('react').ForwardRefExoticComponent<DropmenuProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};
-//# sourceMappingURL=Select.d.ts.map
+//# sourceMappingURL=Dropmenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropmenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropmenu/Dropmenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA0B,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKhF;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,UAAU,EACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,UAAU,GACV,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,IAAI,GACJ,OAAO,CACV,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,aACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoGG;AACH,eAAO,MAAM,QAAQ,6GA8QpB,CAAC"}

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/dropmenu/dropmenu-config.js

@@ -0,0 +1,9 @@
+"use client";
+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/dropmenu/dropmenu-config.ts
+var r = n, i = t;
+e("dropmenu", r);
+//#endregion
+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/dropmenu/dropmenu-styles.js

@@ -0,0 +1,6 @@
+"use client";
+import { FIELD_STATUS_BORDER_CLASS as e } from "../field/field-styles.js";
+//#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

@@ -1,59 +1,53 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Spinner as h } from "../spinner/spinner.js";
-import { cn as t } from "../../utils/cn.js";
-const u = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-}, g = {
-  default: "text-foreground",
-  error: "text-danger",
-  warning: "text-warning",
-  success: "text-success"
+import { cn as e } from "../../utils/cn.js";
+import { Spinner as t } from "../spinner/spinner.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/field/FieldShell.tsx
+var i = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+}, a = {
+	default: "text-foreground",
+	error: "text-danger",
+	warning: "text-warning",
+	success: "text-success"
 };
-function A({
-  id: c,
-  label: r,
-  labelAlign: a = "left",
-  description: n,
-  descriptionId: o,
-  message: l,
-  messageId: d,
-  status: s = "default",
-  required: m,
-  isLoading: x,
-  children: f
-}) {
-  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-1.5", children: [
-    r && /* @__PURE__ */ e(
-      "label",
-      {
-        htmlFor: c,
-        className: t(
-          "text-sm font-medium text-foreground",
-          u[a]
-        ),
-        children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1.5", children: [
-          r,
-          m && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "text-danger", children: "*" }),
-          x && /* @__PURE__ */ e(h, { size: "sm" })
-        ] })
-      }
-    ),
-    n && /* @__PURE__ */ e("p", { id: o, className: t("text-sm text-foreground/60"), children: n }),
-    f,
-    l && /* @__PURE__ */ e(
-      "p",
-      {
-        id: d,
-        role: s === "error" ? "alert" : void 0,
-        className: t("text-sm", g[s]),
-        children: l
-      }
-    )
-  ] });
+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: [
+			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: [
+						l,
+						g && /* @__PURE__ */ n("span", {
+							"aria-hidden": "true",
+							className: "text-danger",
+							children: "*"
+						}),
+						_ && /* @__PURE__ */ n(t, { size: "sm" })
+					]
+				})
+			}),
+			d && /* @__PURE__ */ n("p", {
+				id: f,
+				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
+			})
+		]
+	});
 }
-export {
-  A as FieldShell
-};
+//#endregion
+export { o as FieldShell };

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

@@ -1,21 +1,20 @@
 "use client";
 import { registerComponentDefaults as e } from "../../libs/registry.js";
-const l = {
-  size: "md",
-  labelAlign: "left",
-  fullWidth: !1,
-  variant: "bordered"
-}, i = {
-  size: "md",
-  radius: "md",
-  variant: "bordered",
-  color: "primary",
-  labelAlign: "left",
-  fullWidth: !1,
-  status: "default"
-};
-e("field", l);
-export {
-  i as FALLBACK_FIELD_CONFIG,
-  l as defaultFieldConfig
+//#region src/components/field/field-config.ts
+var t = {
+	size: "md",
+	labelAlign: "left",
+	fullWidth: !1,
+	variant: "bordered"
+}, n = {
+	size: "md",
+	radius: "md",
+	variant: "bordered",
+	color: "primary",
+	labelAlign: "left",
+	fullWidth: !1,
+	status: "default"
 };
+e("field", t);
+//#endregion
+export { n as FALLBACK_FIELD_CONFIG, t as defaultFieldConfig };

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

@@ -1,10 +1,10 @@
 "use client";
-const r = {
-  default: "",
-  error: "border-danger focus-visible:border-danger focus-visible:ring-danger/20",
-  warning: "border-warning focus-visible:border-warning focus-visible:ring-warning/20",
-  success: "border-success focus-visible:border-success focus-visible:ring-success/20"
-};
-export {
-  r as FIELD_STATUS_BORDER_CLASS
+//#region src/components/field/field-styles.ts
+var e = {
+	default: "",
+	error: "border-danger focus-visible:border-danger focus-visible:ring-danger/20",
+	warning: "border-warning focus-visible:border-warning focus-visible:ring-warning/20",
+	success: "border-success focus-visible:border-success focus-visible:ring-success/20"
 };
+//#endregion
+export { e as FIELD_STATUS_BORDER_CLASS };