asheeui 0.6.7 → 0.6.9

package/dist/components/select-menu/SelectMenu.d.ts

@@ -1,16 +1,16 @@
 import { FloatingContext } from '@floating-ui/react';
 import { ReactNode } from 'react';
-import { SelectMenuConfig } from './select-menu-config';
+import { MenuConfig, SelectMenuOption } from './select-menu-config';
 /**
- * Type alias for a select option.
- * Each option must have a label and a unique value.
+ * Menu props that extend MenuConfig with className.
+ * Used for menu configuration overrides.
  */
-export interface SelectOption {
-    label: string;
-    value: string | number;
-    disabled?: boolean;
-    [key: string]: unknown;
-}
+export type MenuProps = MenuConfig & {
+    /**
+     * Extra CSS classes for the menu container.
+     */
+    className?: string;
+};
 /**
  * Props for the SelectMenu component.
  */
@@ -38,7 +38,7 @@ export interface SelectMenuProps {
     /**
      * Available options to display in the menu.
      */
-    options: SelectOption[];
+    options: SelectMenuOption[];
     /**
      * Currently selected values.
      * Used to highlight selected options with a checkmark.
@@ -48,7 +48,7 @@ export interface SelectMenuProps {
      * Callback fired when an option is selected.
      * Receives the selected option object.
      */
-    onSelectOption: (option: SelectOption) => void;
+    onSelectMenuOption: (option: SelectMenuOption) => void;
     /**
      * Whether search input is shown in the menu.
      * @default true
@@ -76,23 +76,20 @@ export interface SelectMenuProps {
      * Content rendered below the options list.
      */
     belowList?: ReactNode;
-    /**
-     * Extra CSS classes for the dropdown.
-     */
-    dropdownClassName?: string;
     /**
      * Configuration for menu items from the parent component.
      */
-    menuConfig?: SelectMenuConfig;
+    menuConfig?: MenuConfig;
     /**
      * Props override for menu configuration.
+     * Includes className, portal, portalTarget, and visual style options.
      */
-    menuProps?: SelectMenuConfig;
+    menuProps?: MenuProps;
     /**
      * Custom render function for each option.
      * Receives the option and a boolean indicating if it's selected.
      */
-    renderOption?: (option: SelectOption, isSelected: boolean) => ReactNode;
+    renderOption?: (option: SelectMenuOption, isSelected: boolean) => ReactNode;
     /**
      * Initial focus target for the FloatingFocusManager.
      */
@@ -102,20 +99,6 @@ export interface SelectMenuProps {
      * @default false
      */
     returnFocus?: boolean;
-    /**
-     * Whether to render the menu in a React portal.
-     * When true, the menu is rendered at the document body level.
-     * Defaults to true. This is typically controlled by the parent
-     * component (Select, MultiSelect, Autocomplete) via their own
-     * config or props.
-     */
-    portal?: boolean;
-    /**
-     * Custom portal target element for the menu.
-     * When portal is enabled, the menu is rendered into this element.
-     * Defaults to document.body.
-     */
-    portalTarget?: HTMLElement | null;
 }
 /**
  * A reusable dropdown menu for selecting options from a list.
@@ -131,8 +114,8 @@ export interface SelectMenuProps {
  * By default, the menu uses React's createPortal 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 `portal` prop if the menu needs to stay within a specific parent
- * container. This is typically controlled by the parent component.
+ * the `menuProps.portal` prop if the menu needs to stay within a specific
+ * parent container. This is typically controlled by the parent component.
  *
  * @param props - SelectMenu configuration options.
  * @param props.isOpen - Whether the menu is open.
@@ -142,16 +125,18 @@ export interface SelectMenuProps {
  * @param props.setFloatingRef - Ref setter for the floating element.
  * @param props.options - Available options to display.
  * @param props.selectedValues - Currently selected values.
- * @param props.onSelectOption - Callback fired when an option is selected.
+ * @param props.onSelectMenuOption - Callback fired when an option is selected.
  * @param props.isSearch - Whether search is enabled. Defaults to true.
  * @param props.searchPlaceholder - Search placeholder. Defaults to "Search...".
+ * @param props.searchInputName - Name attribute for the search input. Defaults to "select-menu-search".
+ * @param props.searchQuery - Controlled search query value.
+ * @param props.onSearchChange - Callback fired when the search query changes.
  * @param props.belowList - Content below the options list.
- * @param props.dropdownClassName - Extra classes for the dropdown.
  * @param props.menuConfig - Configuration for menu items.
- * @param props.menuProps - Props override for menu configuration.
+ * @param props.menuProps - Props override for menu configuration. Includes className, portal, portalTarget, and visual styles.
  * @param props.renderOption - Custom render function for options.
- * @param props.portal - Whether to render the menu in a portal. Defaults to true.
- * @param props.portalTarget - Custom portal target element. Defaults to document.body.
+ * @param props.initialFocus - Initial focus target for the FloatingFocusManager.
+ * @param props.returnFocus - Whether to return focus to the trigger after closing. Defaults to false.
  *
  * @example
  * ```tsx
@@ -165,15 +150,36 @@ export interface SelectMenuProps {
  *   setFloatingRef={refs.setFloating}
  *   options={options}
  *   selectedValues={selectedValues}
- *   onSelectOption={handleSelect}
+ *   onSelectMenuOption={handleSelect}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom menu configuration
+ * <SelectMenu
+ *   isOpen={isOpen}
+ *   context={context}
+ *   floatingStyles={floatingStyles}
+ *   getFloatingProps={getFloatingProps}
+ *   setFloatingRef={refs.setFloating}
+ *   options={options}
+ *   selectedValues={selectedValues}
+ *   onSelectMenuOption={handleSelect}
+ *   menuProps={{
+ *     className: "custom-dropdown",
+ *     portal: false,
+ *     itemVariant: "solid",
+ *     activeItemColor: "success"
+ *   }}
  * />
  * ```
  *
- * @see SelectMenuConfig - The configuration type for menu items.
+ * @see MenuConfig - The configuration type for menu items.
  * @see Button - The button component used for menu items.
  */
 export declare const SelectMenu: {
-    ({ isOpen, context, floatingStyles, getFloatingProps, setFloatingRef, options, selectedValues, onSelectOption, isSearch, searchPlaceholder, searchInputName, searchQuery, onSearchChange, belowList, dropdownClassName, menuConfig, menuProps, renderOption, initialFocus, returnFocus, portal, portalTarget, }: SelectMenuProps): import("react").JSX.Element | null;
+    ({ isOpen, context, floatingStyles, getFloatingProps, setFloatingRef, options, selectedValues, onSelectMenuOption, isSearch, searchPlaceholder, searchInputName, searchQuery, onSearchChange, belowList, menuConfig, menuProps, renderOption, initialFocus, returnFocus, }: SelectMenuProps): import("react").JSX.Element | null;
     displayName: string;
 };
 //# sourceMappingURL=SelectMenu.d.ts.map

package/dist/components/select-menu/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../src/components/select-menu/SelectMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAoB,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAU5E,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC;;OAEG;IACH,gBAAgB,EAAE,CAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE7B;;OAEG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAErC;;;OAGG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAExE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAErD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU;qTAuBpB,eAAe;;CAiKjB,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../src/components/select-menu/SelectMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC;;OAEG;IACH,gBAAgB,EAAE,CAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE7B;;OAEG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAErC;;;OAGG;IACH,kBAAkB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAE5E;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAErD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,eAAO,MAAM,UAAU;gRAoBpB,eAAe;;CA2NjB,CAAC"}

package/dist/components/select-menu/SelectMenu.js

@@ -1,147 +1,161 @@
 "use client";
-import { jsx as a, jsxs as z } from "react/jsx-runtime";
-import { FloatingFocusManager as H } from "@floating-ui/react";
-import { useState as J, useMemo as W } from "react";
-import { createPortal as X } from "react-dom";
-import { CheckIcon as Y } from "../../icons/CheckIcon.js";
-import { SearchIcon as Z } from "../../icons/SearchIcon.js";
-import { useAsheeConfig as $ } from "../../libs/context.js";
-import { resolveCascade as c, resolveRadiusKey as p } from "../../utils/resolve-token.js";
-import { Button as C } from "../button/Button.js";
-import { Input as g } from "../input/Input.js";
-import { FALLBACK_SELECT_MENU_CONFIG as l } from "./select-menu-config.js";
-import { cn as P } from "../../utils/cn.js";
-const tt = ({
-  isOpen: V,
-  context: m,
-  floatingStyles: u,
-  getFloatingProps: S,
-  setFloatingRef: k,
-  options: s = [],
-  selectedValues: A = [],
-  onSelectOption: F,
-  isSearch: v = !0,
-  searchPlaceholder: M = "Search...",
-  searchInputName: L = "select-menu-search",
-  searchQuery: Q,
+import { jsx as a, jsxs as V } from "react/jsx-runtime";
+import { FloatingFocusManager as X } from "@floating-ui/react";
+import { useState as Y, useEffect as Z, useMemo as $ } from "react";
+import { createPortal as n } from "react-dom";
+import { CheckIcon as u } from "../../icons/CheckIcon.js";
+import { SearchIcon as m } from "../../icons/SearchIcon.js";
+import { useAsheeConfig as p } from "../../libs/context.js";
+import { resolveCascade as r, resolveRadiusKey as C } from "../../utils/resolve-token.js";
+import { Button as g } from "../button/Button.js";
+import { Input as P } from "../input/Input.js";
+import { FALLBACK_SELECT_MENU_CONFIG as d } from "./select-menu-config.js";
+import { cn as tt } from "../../utils/cn.js";
+const lt = ({
+  isOpen: s,
+  context: A,
+  floatingStyles: F,
+  getFloatingProps: L,
+  setFloatingRef: M,
+  options: v = [],
+  selectedValues: E = [],
+  onSelectMenuOption: Q,
+  isSearch: y = !0,
+  searchPlaceholder: T = "Search...",
+  searchInputName: j = "select-menu-search",
+  searchQuery: K,
   onSearchChange: b,
   belowList: h,
-  dropdownClassName: j,
-  menuConfig: t,
-  menuProps: e,
+  menuConfig: l,
+  menuProps: t = {},
   renderOption: x,
-  initialFocus: E,
-  returnFocus: K,
-  portal: R = !0,
-  portalTarget: _
+  initialFocus: R,
+  returnFocus: _
 }) => {
-  const d = $(), [B, O] = J(""), o = Q ?? B, T = (r) => {
-    b ? b(r) : O(r);
-  }, f = W(() => !v || !o.trim() ? s : s.filter(
-    (r) => r.label.toLowerCase().includes(o.toLowerCase())
-  ), [s, v, o]), D = (r) => A.includes(r), G = c(
-    e == null ? void 0 : e.itemVariant,
+  const c = p(), [B, D] = Y(""), i = K ?? B, G = (e) => {
+    b ? b(e) : D(e);
+  }, w = r(
+    t == null ? void 0 : t.lockScroll,
+    l == null ? void 0 : l.lockScroll,
+    void 0,
+    d.lockScroll
+  ), O = r(
+    t == null ? void 0 : t.portal,
+    l == null ? void 0 : l.portal,
+    void 0,
+    d.portal
+  ), I = r(
+    t == null ? void 0 : t.portalTarget,
+    l == null ? void 0 : l.portalTarget,
+    void 0,
+    typeof document < "u" ? document.body : null
+  );
+  Z(() => {
+    if (!s || !w) return;
+    const e = document.body.style.overflow, o = document.body.style.position, J = document.body.style.width;
+    return document.body.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.width = "100%", () => {
+      document.body.style.overflow = e, document.body.style.position = o, document.body.style.width = J;
+    };
+  }, [s, w]);
+  const N = $(() => !y || !i.trim() ? v : v.filter(
+    (e) => e.label.toLowerCase().includes(i.toLowerCase())
+  ), [v, y, i]), U = (e) => E.includes(e), W = r(
     t == null ? void 0 : t.itemVariant,
+    l == null ? void 0 : l.itemVariant,
     void 0,
-    l.itemVariant
-  ), y = c(
-    e == null ? void 0 : e.itemColor,
+    d.itemVariant
+  ), S = r(
     t == null ? void 0 : t.itemColor,
-    d.defaultColor,
-    l.itemColor
-  ), U = c(
-    e == null ? void 0 : e.activeItemVariant,
+    l == null ? void 0 : l.itemColor,
+    c.defaultColor,
+    d.itemColor
+  ), q = r(
     t == null ? void 0 : t.activeItemVariant,
-    d.defaultVariant,
-    l.activeItemVariant
-  ), q = c(
-    e == null ? void 0 : e.activeItemColor,
+    l == null ? void 0 : l.activeItemVariant,
+    c.defaultVariant,
+    d.activeItemVariant
+  ), H = r(
     t == null ? void 0 : t.activeItemColor,
-    d.defaultColor,
-    l.activeItemColor
-  ), I = p(
-    e == null ? void 0 : e.radius,
+    l == null ? void 0 : l.activeItemColor,
+    c.defaultColor,
+    d.activeItemColor
+  ), f = C(
     t == null ? void 0 : t.radius,
-    d.defaultRadius,
-    l.radius
-  ), N = c(
-    e == null ? void 0 : e.size,
+    l == null ? void 0 : l.radius,
+    c.defaultRadius,
+    d.radius
+  ), k = r(
     t == null ? void 0 : t.size,
+    l == null ? void 0 : l.size,
     void 0,
-    l.size
-  ), n = _ ?? (typeof document < "u" ? document.body : null);
-  if (!V) return null;
-  const w = /* @__PURE__ */ a(
-    H,
+    d.size
+  );
+  if (!s) return null;
+  const z = /* @__PURE__ */ a(
+    X,
     {
-      context: m,
+      context: A,
       modal: !1,
-      initialFocus: E,
-      returnFocus: K,
-      children: /* @__PURE__ */ a(
+      initialFocus: R,
+      returnFocus: _,
+      children: /* @__PURE__ */ V(
         "div",
         {
-          ref: k,
-          style: { ...u, zIndex: 999999 },
-          className: "w-full outline-none",
-          ...S(),
-          children: /* @__PURE__ */ z(
-            "div",
-            {
-              className: P(
-                "max-h-60 shadow-xl bg-background border border-border p-1 flex flex-col gap-0.5 overflow-y-auto scrollbar-hide",
-                "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 ease-out",
-                j
-              ),
-              children: [
-                v && /* @__PURE__ */ a("div", { className: "w-full p-1 mb-1 sticky top-0 z-10 border-b border-border", children: /* @__PURE__ */ a(
-                  g,
-                  {
-                    name: L,
-                    type: "text",
-                    variant: "bordered",
-                    radius: I,
-                    color: y,
-                    size: N,
-                    value: o,
-                    onChange: (r) => T(r.target.value),
-                    startContent: /* @__PURE__ */ a(Z, { className: "w-3.5 h-3.5 text-foreground/70" }),
-                    placeholder: M,
-                    autoFocus: !0,
-                    className: "w-full pl-8 h-8 text-xs bg-secondary/30 border-none focus-visible:ring-0"
-                  }
-                ) }),
-                f.length === 0 ? /* @__PURE__ */ a("div", { className: "px-3 py-4 text-xs text-foreground/70 text-center", children: "No options found" }) : f.map((r) => {
-                  const i = D(r.value);
-                  return x ? x(r, i) : /* @__PURE__ */ z(
-                    C,
-                    {
-                      variant: i ? U : G,
-                      color: i ? q : y,
-                      radius: I,
-                      size: N,
-                      isDisabled: r.disabled,
-                      onClick: () => F(r),
-                      className: "w-full justify-between font-normal text-left transition-colors truncate",
-                      children: [
-                        /* @__PURE__ */ a("span", { children: r.label }),
-                        i && /* @__PURE__ */ a(Y, { className: "w-3.5 h-3.5 shrink-0 ml-2" })
-                      ]
-                    },
-                    String(r.value)
-                  );
-                }),
-                h && /* @__PURE__ */ a("div", { className: "border-t border-border pt-1 mt-1", children: h })
-              ]
-            }
-          )
+          ref: M,
+          style: { ...F },
+          className: tt(
+            "z-100 w-full outline-none max-h-60 shadow-xl bg-background border border-border p-1 flex flex-col gap-0.5 overflow-y-auto scrollable-hidden",
+            "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 ease-out",
+            t == null ? void 0 : t.className
+          ),
+          ...L(),
+          children: [
+            y && /* @__PURE__ */ a("div", { className: "w-full p-1 mb-1 sticky top-0 z-10 border-b border-border", children: /* @__PURE__ */ a(
+              P,
+              {
+                name: j,
+                type: "text",
+                variant: "bordered",
+                radius: f,
+                color: S,
+                size: k,
+                value: i,
+                onChange: (e) => G(e.target.value),
+                startContent: /* @__PURE__ */ a(m, { className: "w-3.5 h-3.5 text-foreground/70" }),
+                placeholder: T,
+                autoFocus: !0,
+                className: "w-full pl-8 h-8 text-xs bg-secondary/30 border-none focus-visible:ring-0"
+              }
+            ) }),
+            N.length === 0 ? /* @__PURE__ */ a("div", { className: "px-3 py-4 text-xs text-foreground/70 text-center", children: "No options found" }) : N.map((e) => {
+              const o = U(e.value);
+              return x ? x(e, o) : /* @__PURE__ */ V(
+                g,
+                {
+                  variant: o ? q : W,
+                  color: o ? H : S,
+                  radius: f,
+                  size: k,
+                  isDisabled: e.disabled,
+                  onClick: () => Q(e),
+                  className: "w-full justify-between font-normal text-left transition-colors truncate",
+                  children: [
+                    /* @__PURE__ */ a("span", { children: e.label }),
+                    o && /* @__PURE__ */ a(u, { className: "w-3.5 h-3.5 shrink-0 ml-2" })
+                  ]
+                },
+                String(e.value)
+              );
+            }),
+            h && /* @__PURE__ */ a("div", { className: "border-t border-border pt-1 mt-1", children: h })
+          ]
         }
       )
     }
   );
-  return R && n ? X(w, n) : w;
+  return O && I ? n(z, I) : z;
 };
-tt.displayName = "SelectMenu";
+lt.displayName = "SelectMenu";
 export {
-  tt as SelectMenu
+  lt as SelectMenu
 };

package/dist/components/select-menu/select-menu-config.d.ts

@@ -29,7 +29,7 @@ export interface SelectMenuOption {
  * Theme configuration options for the SelectMenu component.
  * Controls the visual appearance of the dropdown menu and its items.
  */
-export interface SelectMenuConfig {
+export interface MenuConfig {
     /**
      * Corner rounding of the dropdown menu.
      * Controls the border-radius of the menu container.
@@ -72,11 +72,42 @@ export interface SelectMenuConfig {
      * @default "primary"
      */
     activeItemColor?: Color;
+    /**
+     * Whether to lock body scroll when the dropdown is open.
+     * When true, the page behind the dropdown cannot scroll.
+     * This prevents the page from scrolling while interacting with the dropdown.
+     *
+     * @default false
+     */
+    lockScroll?: boolean;
+    /**
+     * Whether to render the menu in a React portal.
+     * When true, the menu is rendered at the document body level.
+     * Defaults to true. This is typically controlled by the parent
+     * component (Select, MultiSelect, Autocomplete) via their own
+     * config or props.
+     */
+    portal?: boolean;
+    /**
+     * Custom portal target element for the menu.
+     * When portal is enabled, the menu is rendered into this element.
+     * Defaults to document.body.
+     */
+    portalTarget?: HTMLElement | null;
 }
 /**
  * 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_SELECT_MENU_CONFIG: Required<SelectMenuConfig>;
+export declare const FALLBACK_SELECT_MENU_CONFIG: {
+    radius: Radius;
+    size: Size;
+    itemVariant: Variant;
+    itemColor: Color;
+    activeItemVariant: Variant;
+    activeItemColor: Color;
+    lockScroll: boolean;
+    portal: boolean;
+};
 //# sourceMappingURL=select-menu-config.d.ts.map

package/dist/components/select-menu/select-menu-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu-config.d.ts","sourceRoot":"","sources":["../../../src/components/select-menu/select-menu-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAElB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAAQ,CAAC,gBAAgB,CAOlE,CAAC"}
+{"version":3,"file":"select-menu-config.d.ts","sourceRoot":"","sources":["../../../src/components/select-menu/select-menu-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAElB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC;IAExB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,2BAA2B;YACtB,MAAM;UACR,IAAI;iBACM,OAAO;eACP,KAAK;uBACC,OAAO;qBACP,KAAK;;;CAGpC,CAAC"}

package/dist/components/select-menu/select-menu-config.js

@@ -5,7 +5,9 @@ const t = {
   itemVariant: "ghost",
   itemColor: "primary",
   activeItemVariant: "faded",
-  activeItemColor: "primary"
+  activeItemColor: "primary",
+  lockScroll: !1,
+  portal: !0
 };
 export {
   t as FALLBACK_SELECT_MENU_CONFIG

package/dist/components/sidebar/Sidebar.js

@@ -275,7 +275,7 @@ function Ge({
           "nav",
           {
             className: i(
-              "flex-1 overflow-y-auto py-3 px-2 flex flex-col gap-3 scrollbar-hide",
+              "flex-1 overflow-y-auto py-3 px-2 flex flex-col gap-3 scrollable-hidden",
               ee
             ),
             children: Ae.map(_e)

package/dist/components/switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, InputHTMLAttributes } from 'react';
 import { SwitchConfig } from './switch-config';
-type BaseSwitchProps = SwitchConfig & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "children" | "color">;
+type BaseSwitchProps = Omit<SwitchConfig, "status"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "children" | "color">;
 /**
  * Configuration options for the Switch component.
  */
@@ -15,11 +15,6 @@ export interface SwitchProps extends BaseSwitchProps {
      * Provides additional context for the switch.
      */
     description?: string;
-    /**
-     * Validation message shown below the switch.
-     * Color is determined by the status prop.
-     */
-    message?: string;
     /**
      * Whether the field is required.
      * Adds a required indicator to the label.
@@ -51,23 +46,20 @@ export interface SwitchProps extends BaseSwitchProps {
     onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
 /**
- * A toggle switch with label, description, and validation support.
+ * A toggle switch with label and description support.
  *
  * Switch renders a toggle input that can be checked or unchecked. It
- * supports controlled and uncontrolled usage, validation states, and
- * the standard AsheeUI cascade for visual tokens. The component
- * integrates with FieldShell for label, description, and message
- * handling.
+ * supports controlled and uncontrolled usage, and the standard AsheeUI
+ * cascade for visual tokens. The component integrates with FieldShell for
+ * label and description handling.
  *
  * The component automatically handles accessibility attributes including
- * role="switch", aria-checked, aria-invalid, and aria-busy for loading
- * states. It also supports proper focus management through the native
- * input element.
+ * role="switch", aria-checked, and aria-busy for loading states. It also
+ * supports proper focus management through the native input element.
  *
  * @param props - Switch configuration options.
  * @param props.label - Label text for the switch.
  * @param props.description - Description text.
- * @param props.message - Validation message.
  * @param props.required - Whether the field is required. Defaults to false.
  * @param props.isLoading - Loading state. Defaults to false.
  * @param props.checked - Controlled checked state.
@@ -76,7 +68,6 @@ export interface SwitchProps extends BaseSwitchProps {
  * @param props.size - Size scale. Defaults to "md".
  * @param props.color - Theme accent color. Defaults to "primary".
  * @param props.radius - Corner rounding. Defaults to "full".
- * @param props.status - Validation status. Defaults to "default".
  * @param props.labelAlign - Alignment of the label. Defaults to "left".
  * @param props.disabled - Whether the switch is disabled.
  * @param props.className - Extra CSS classes for the switch.
@@ -91,29 +82,14 @@ export interface SwitchProps extends BaseSwitchProps {
  *   const [checked, setChecked] = useState(false);
  *
  *   return (
- *     <Switch
- *       label="Enable notifications"
- *       description="Receive email notifications for updates"
- *       checked={checked}
- *       onChange={(checked) => setChecked(checked)}
+ *     <Switch * checked="{checked}" description="Receive email notifications for updates" label="Enable notifications" onChange="{(checked)"> setChecked(checked)}
  *     />
  *   );
  * }
  * ```
  *
- * @example
- * ```tsx
- * // With validation
- * <Switch
- *   label="Terms accepted"
- *   status="error"
- *   message="You must accept the terms to continue"
- *   required
- * />
- * ```
- *
  * @see SwitchConfig - The configuration type for component defaults.
- * @see FieldShell - The wrapper component for label and validation.
+ * @see FieldShell - The wrapper component for label and layout.
  * @see useAsheeConfig - Hook for accessing the global configuration.
  */
 export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,mBAAmB,EAIzB,MAAM,OAAO,CAAC;AAWf,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU5E,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC3C,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7E;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,MAAM,0GAiLlB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,mBAAmB,EAIzB,MAAM,OAAO,CAAC;AAWf,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAS5E,KAAK,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,GACjD,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC3C,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7E;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,MAAM,0GAqKlB,CAAC"}