asheeui 0.6.5 → 0.6.7

package/dist/components/resizable-screen/ResizableScreen.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as W, jsx as v } from "react/jsx-runtime";
-import { forwardRef as C, useState as k, useRef as ee, useCallback as A } from "react";
-import { useAsheeConfig as te } from "../../libs/context.js";
-import { resolveCascade as o } from "../../utils/resolve-token.js";
+import { jsxs as ee, jsx as v } from "react/jsx-runtime";
+import { forwardRef as te, useState as H, useRef as re, useCallback as k } from "react";
+import { useAsheeConfig as oe } from "../../libs/context.js";
+import { resolveCascade as n } from "../../utils/resolve-token.js";
 import { FALLBACK_RESIZABLE_SCREEN_CONFIG as l } from "./resizable-screen-config.js";
 import { cn as c } from "../../utils/cn.js";
-const re = C(
+const ie = te(
   ({
-    children: H,
+    children: A,
     left: I,
     size: w,
     defaultSize: M,
@@ -15,106 +15,114 @@ const re = C(
     maxSize: E,
     step: K,
     orientation: L,
-    hideHandle: j,
-    onSizeChange: u,
-    handleClassName: x,
-    className: B,
-    style: U,
-    ..._
-  }, d) => {
+    hideHandle: $,
+    onSizeChange: d,
+    handleClassName: S,
+    minContainerHeight: j = 200,
+    minContainerWidth: B = 200,
+    className: U,
+    style: _,
+    ...F
+  }, u) => {
     var R;
-    const t = (R = te().components) == null ? void 0 : R.resizableScreen, h = o(
+    const t = (R = oe().components) == null ? void 0 : R.resizableScreen, h = n(
       N,
       t == null ? void 0 : t.minSize,
       void 0,
       l.minSize
-    ), f = o(
+    ), f = n(
       E,
       t == null ? void 0 : t.maxSize,
       void 0,
       l.maxSize
-    ), D = o(
+    ), D = n(
       K,
       t == null ? void 0 : t.step,
       void 0,
       l.step
-    ), z = o(
+    ), z = n(
       L,
       t == null ? void 0 : t.orientation,
       void 0,
       l.orientation
-    ), F = o(
-      j,
+    ), G = n(
+      $,
       t == null ? void 0 : t.hideHandle,
       void 0,
       l.hideHandle
-    ), O = o(
+    ), O = n(
       M,
       t == null ? void 0 : t.defaultSize,
       void 0,
       l.defaultSize
-    ), T = w ?? I ?? O, [$, G] = k(T), [i, b] = k(!1), y = ee(null), S = w !== void 0, a = S ? w : $, g = A(
+    ), T = w ?? I ?? O, [W, X] = H(T), [o, b] = H(!1), x = re(null), y = w !== void 0, a = y ? w : W, g = k(
       (e) => Math.min(Math.max(e, h), f),
       [h, f]
-    ), s = A(
+    ), s = k(
       (e) => {
         const r = g(e);
-        S || G(r), u == null || u(r);
+        y || X(r), d == null || d(r);
       },
-      [g, S, u]
-    ), X = (e) => {
+      [g, y, d]
+    ), Y = (e) => {
       e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), b(!0);
-    }, Y = (e) => {
-      if (!i || !y.current) return;
-      const r = y.current.getBoundingClientRect(), m = z === "horizontal", p = m ? r.width : r.height, Q = m ? e.clientX - r.left : e.clientY - r.top;
+    }, Z = (e) => {
+      if (!o || !x.current) return;
+      const r = x.current.getBoundingClientRect(), m = z === "horizontal", p = m ? r.width : r.height, V = m ? e.clientX - r.left : e.clientY - r.top;
       if (p > 0) {
-        const V = Q / p * 100;
-        s(V);
+        const C = V / p * 100;
+        s(C);
       }
     }, P = (e) => {
-      if (i) {
+      if (o) {
         try {
           e.currentTarget.releasePointerCapture(e.pointerId);
         } catch {
         }
         b(!1);
       }
-    }, Z = (e) => {
+    }, q = (e) => {
       const r = z === "horizontal", m = r ? "ArrowLeft" : "ArrowUp", p = r ? "ArrowRight" : "ArrowDown";
       e.key === m ? (e.preventDefault(), s(a - D)) : e.key === p ? (e.preventDefault(), s(a + D)) : e.key === "Home" ? (e.preventDefault(), s(h)) : e.key === "End" && (e.preventDefault(), s(f));
-    }, [q, J] = H, n = z === "horizontal";
-    return /* @__PURE__ */ W(
+    }, [J, Q] = A, i = z === "horizontal";
+    return /* @__PURE__ */ ee(
       "div",
       {
         ref: (e) => {
-          y.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
+          x.current = e, typeof u == "function" ? u(e) : u && (u.current = e);
         },
         className: c(
-          "w-full h-full min-h-50 min-w-0 relative flex",
-          i && "select-none",
-          n ? "flex-row" : "flex-col",
-          B
+          "flex relative",
+          o && "select-none",
+          i ? "flex-row" : "flex-col",
+          U
         ),
         style: {
-          cursor: i ? n ? "col-resize" : "row-resize" : "default",
-          ...U
+          cursor: o ? i ? "col-resize" : "row-resize" : "default",
+          // Ensure sensible minimums so the component works even when no
+          // ancestor provides a definite size. These are fallbacks only.
+          minHeight: `${j}px`,
+          minWidth: `${B}px`,
+          ..._
         },
-        ..._,
+        ...F,
         children: [
           /* @__PURE__ */ v(
             "div",
             {
               className: c(
-                "h-full w-full min-w-0 min-h-0 overflow-clip shrink-0",
-                i ? "transition-none" : "transition-[width,height] duration-150 ease-out"
+                "min-w-0 min-h-0 overflow-auto",
+                o ? "transition-none" : "transition-[width,height] duration-150 ease-out"
               ),
               style: {
-                [n ? "width" : "height"]: `${a}%`
+                [i ? "width" : "height"]: `${a}%`,
+                flexShrink: 0,
+                flexGrow: 0
               },
-              children: q
+              children: J
             }
           ),
-          !F && // biome-ignore lint/a11y/useSemanticElements: interactive resizable handle requires div styling
+          !G && // biome-ignore lint/a11y/useSemanticElements: interactive resizable handle requires div styling
           /* @__PURE__ */ v(
             "div",
             {
@@ -123,24 +131,24 @@ const re = C(
               "aria-valuenow": Math.round(a),
               "aria-valuemin": h,
               "aria-valuemax": f,
-              "aria-orientation": n ? "horizontal" : "vertical",
+              "aria-orientation": i ? "horizontal" : "vertical",
               "aria-label": "Resize panel split",
-              onPointerDown: X,
-              onPointerMove: Y,
+              onPointerDown: Y,
+              onPointerMove: Z,
               onPointerUp: P,
               onPointerCancel: P,
-              onKeyDown: Z,
+              onKeyDown: q,
               className: c(
                 "relative z-20 shrink-0 flex items-center justify-center outline-none select-none group touch-none",
-                n ? "w-4 h-full cursor-col-resize -mx-2" : "h-4 w-full cursor-row-resize -my-2"
+                i ? "w-4 self-stretch cursor-col-resize -mx-2" : "h-4 self-stretch w-full cursor-row-resize -my-2"
               ),
               children: /* @__PURE__ */ v(
                 "div",
                 {
                   className: c(
                     "transition-colors duration-150",
-                    n ? "w-1 h-full" : "h-1 w-full",
-                    x || (i ? "bg-primary" : "bg-border group-hover:bg-primary/70 group-focus-visible:bg-primary")
+                    i ? "w-1 self-stretch" : "h-1 self-stretch w-full",
+                    S || (o ? "bg-primary" : "bg-border group-hover:bg-primary/70 group-focus-visible:bg-primary")
                   )
                 }
               )
@@ -150,13 +158,14 @@ const re = C(
             "div",
             {
               className: c(
-                "h-full w-full min-w-0 min-h-0 overflow-clip shrink-0 flex-1",
-                i ? "transition-none" : "transition-[width,height] duration-150 ease-out"
+                "min-w-0 min-h-0 overflow-auto",
+                o ? "transition-none" : "transition-[width,height] duration-150 ease-out"
               ),
               style: {
-                [n ? "width" : "height"]: `${100 - a}%`
+                [i ? "width" : "height"]: `${100 - a}%`,
+                flex: 1
               },
-              children: J
+              children: Q
             }
           )
         ]
@@ -164,7 +173,7 @@ const re = C(
     );
   }
 );
-re.displayName = "ResizableScreen";
+ie.displayName = "ResizableScreen";
 export {
-  re as ResizableScreen
+  ie as ResizableScreen
 };

package/dist/components/select/Select.d.ts

@@ -75,11 +75,6 @@ export interface SelectProps extends BaseSelectProps {
      * @default "Select..."
      */
     placeholder?: string;
-    /**
-     * Custom background color for the trigger button.
-     * Accepts any CSS color value.
-     */
-    buttonColor?: string;
     /**
      * Extra CSS classes for the trigger button.
      */
@@ -108,6 +103,12 @@ export interface SelectProps extends BaseSelectProps {
  * The component uses Floating UI for positioning and accessibility, and
  * integrates with the FieldShell for consistent label and validation handling.
  *
+ * By default, the dropdown 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 or `components.select.portal` in the config if the menu needs
+ * to stay within a specific parent container.
+ *
  * @param props - Select configuration options.
  * @param props.options - Available options to select from.
  * @param props.value - Controlled selected value.
@@ -124,13 +125,14 @@ export interface SelectProps extends BaseSelectProps {
  * @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.buttonColor - Custom background color for the trigger.
  * @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".
  * @param props.color - Theme accent color. Defaults to "primary".
  * @param props.status - Validation status.
  * @param props.labelAlign - Alignment of the label. Defaults to "left".
+ * @param props.portal - Whether to render the dropdown in a portal. Defaults to true.
+ * @param props.portalTarget - Custom portal target element. Defaults to document.body.
  *
  * @example
  * ```tsx

package/dist/components/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAK5E,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CACF,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACxC,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;OAGG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;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;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;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,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,eAAO,MAAM,MAAM,2GA+OlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAK5E,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CACF,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACxC,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;OAGG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;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;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;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,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,eAAO,MAAM,MAAM,2GAsPlB,CAAC"}

package/dist/components/select/Select.js

@@ -1,171 +1,169 @@
 "use client";
-import { jsx as f, jsxs as w } from "react/jsx-runtime";
-import { useFloating as Se, autoUpdate as ve, offset as be, flip as ye, shift as xe, size as ge, useClick as he, useDismiss as Ae, useRole as Re, useInteractions as Le } from "@floating-ui/react";
-import { forwardRef as Ee, useId as Ie, useState as _, useMemo as y, useCallback as we } from "react";
-import { ChevronDownIcon as _e } from "../../icons/ChevronDownIcon.js";
-import { useAsheeConfig as Fe } from "../../libs/context.js";
-import { resolveCascade as m, resolveRadiusKey as Ke, resolveClassKey as Oe } from "../../utils/resolve-token.js";
-import { FieldShell as ke } from "../field/FieldShell.js";
-import { SelectMenu as Ce } from "../select-menu/SelectMenu.js";
-import { FALLBACK_SELECT_CONFIG as s } from "./select-config.js";
-import { SELECT_STATUS_BORDER_CLASS as Ne, SELECT_SIZE_CLASS as ze } from "./select-styles.js";
-import { resolveVariantClass as Te } from "../../shared/variant.js";
-import { RADIUS_CLASS as je } from "../../shared/radius.js";
-import { cn as F } from "../../utils/cn.js";
-const De = Ee(
+import { jsx as f, jsxs as T } from "react/jsx-runtime";
+import { useClick as ye, useDismiss as xe, useRole as Ae, useInteractions as Re } from "@floating-ui/react";
+import { forwardRef as ge, useId as he, useState as I, useMemo as b, useCallback as Le } from "react";
+import { ChevronDownIcon as Te } from "../../icons/ChevronDownIcon.js";
+import { useAsheeConfig as Ie } from "../../libs/context.js";
+import { resolveCascade as l, resolveRadiusKey as Ee, resolveClassKey as _e } from "../../utils/resolve-token.js";
+import { FieldShell as Fe } from "../field/FieldShell.js";
+import { SelectMenu as Ke } from "../select-menu/SelectMenu.js";
+import { FALLBACK_SELECT_CONFIG as t } from "./select-config.js";
+import { SELECT_STATUS_BORDER_CLASS as ke, SELECT_SIZE_CLASS as we } from "./select-styles.js";
+import { resolveVariantClass as Ne } from "../../shared/variant.js";
+import { RADIUS_CLASS as Oe } from "../../shared/radius.js";
+import { useSelectFloating as Pe } from "../select-menu/use-select-floating.js";
+import { cn as E } from "../../utils/cn.js";
+const De = ge(
   ({
     options: p = [],
-    value: r,
+    value: s,
     onChange: S,
-    onValueChange: l,
-    size: K,
-    radius: O,
-    variant: k,
-    color: C,
-    status: N,
-    label: z,
-    labelAlign: T,
-    description: j,
+    onValueChange: a,
+    size: _,
+    radius: F,
+    variant: K,
+    color: k,
+    status: w,
+    label: N,
+    labelAlign: O,
+    description: P,
     message: D,
-    required: M,
-    isLoading: P,
+    required: j,
+    isLoading: z,
     disabled: v,
-    isSearch: U = !1,
+    isSearch: C = !1,
     searchPlaceholder: B = "Search options...",
-    searchInputName: Q = "select-search",
+    searchInputName: M = "select-search",
     initialValue: n,
-    belowList: $,
-    placeholder: x = "Select...",
-    buttonColor: g,
-    className: G,
-    dropdownClassName: H,
+    belowList: Q,
+    placeholder: y = "Select...",
+    className: U,
+    dropdownClassName: G,
     id: Z,
-    name: h,
+    name: x,
     menu: q,
-    style: J
-  }, a) => {
-    var I;
-    const i = Fe(), e = (I = i.components) == null ? void 0 : I.select, W = Ie(), X = Z ?? W, [c, A] = _(!1), [Y, R] = _(""), { refs: L, floatingStyles: V, context: d } = Se({
-      open: c,
-      onOpenChange: (t) => !v && A(t),
-      placement: "bottom-start",
-      whileElementsMounted: ve,
-      middleware: [
-        be(4),
-        ye(),
-        xe({ padding: 8 }),
-        ge({
-          apply({ availableHeight: t, elements: b }) {
-            Object.assign(b.floating.style, {
-              maxHeight: `${t}px`
-            });
-          }
-        })
-      ]
-    }), ee = he(d, { enabled: !v }), te = Ae(d), se = Re(d, { role: "listbox" }), { getReferenceProps: re, getFloatingProps: oe } = Le([
-      ee,
-      te,
-      se
-    ]), le = m(
-      K,
+    portal: H,
+    portalTarget: J,
+    style: W
+  }, i) => {
+    var L;
+    const c = Ie(), e = (L = c.components) == null ? void 0 : L.select, X = he(), Y = Z ?? X, [d, A] = I(!1), [$, R] = I(""), V = l(
+      _,
       e == null ? void 0 : e.size,
       void 0,
-      s.size
-    ), E = m(
-      k,
+      t.size
+    ), g = l(
+      K,
       e == null ? void 0 : e.variant,
-      i.defaultVariant,
-      s.variant
-    ), ne = m(
-      C,
+      c.defaultVariant,
+      t.variant
+    ), ee = l(
+      k,
       e == null ? void 0 : e.color,
-      i.defaultColor,
-      s.color
-    ), ae = Ke(
-      O,
+      c.defaultColor,
+      t.color
+    ), te = Ee(
+      F,
       e == null ? void 0 : e.radius,
-      i.defaultRadius,
-      s.radius
-    ), u = N ?? s.status, ie = m(
-      T,
+      c.defaultRadius,
+      t.radius
+    ), u = w ?? t.status, re = l(
+      O,
       e == null ? void 0 : e.labelAlign,
       void 0,
-      s.labelAlign
-    ), ce = Te(
-      E,
-      ne
-    ), de = u !== "default" ? Ne[u] : "", ue = E === "underlined" ? "rounded-none" : Oe(
-      ae,
-      je,
-      s.radius
-    ), o = y(
-      () => p.find((t) => t.value === r),
-      [p, r]
-    ), fe = we(
-      (t) => {
-        if (l == null || l(t.value), S) {
-          const b = {
-            target: { value: t.value, name: h ?? "" }
+      t.labelAlign
+    ), se = l(
+      H,
+      e == null ? void 0 : e.portal,
+      void 0,
+      t.portal
+    ), oe = l(
+      J,
+      e == null ? void 0 : e.portalTarget,
+      void 0,
+      t.portalTarget
+    ), le = Ne(
+      g,
+      ee
+    ), ae = u !== "default" ? ke[u] : "", ne = g === "underlined" ? "rounded-none" : _e(
+      te,
+      Oe,
+      t.radius
+    ), o = b(
+      () => p.find((r) => r.value === s),
+      [p, s]
+    ), { refs: h, floatingStyles: ie, context: m } = Pe({
+      isOpen: d,
+      onOpenChange: A,
+      disabled: v
+    }), ce = ye(m, { enabled: !v }), de = xe(m), ue = Ae(m, { role: "listbox" }), { getReferenceProps: me, getFloatingProps: fe } = Re([
+      ce,
+      de,
+      ue
+    ]), pe = Le(
+      (r) => {
+        if (a == null || a(r.value), S) {
+          const be = {
+            target: { value: r.value, name: x ?? "" }
           };
-          S(b);
+          S(be);
         }
         A(!1), R("");
       },
-      [h, S, l]
-    ), me = y(() => o != null && o.label ? o.label : n !== void 0 ? String(n) : x, [o, n, x]), pe = y(
-      () => r != null ? [r] : [],
-      [r]
+      [x, S, a]
+    ), Se = b(() => o != null && o.label ? o.label : n !== void 0 ? String(n) : y, [o, n, y]), ve = b(
+      () => s != null ? [s] : [],
+      [s]
     );
     return /* @__PURE__ */ f(
-      ke,
+      Fe,
       {
-        id: X,
-        label: z,
-        labelAlign: ie,
-        description: j,
+        id: Y,
+        label: N,
+        labelAlign: re,
+        description: P,
         message: D,
         status: u,
-        required: M,
-        isLoading: P,
-        children: /* @__PURE__ */ w("div", { className: "w-full relative inline-block", children: [
-          /* @__PURE__ */ w(
+        required: j,
+        isLoading: z,
+        children: /* @__PURE__ */ T("div", { className: "w-full relative inline-block", children: [
+          /* @__PURE__ */ T(
             "button",
             {
-              ref: (t) => {
-                L.setReference(t), typeof a == "function" ? a(t) : a && (a.current = t);
+              ref: (r) => {
+                h.setReference(r), typeof i == "function" ? i(r) : i && (i.current = r);
               },
               type: "button",
               disabled: v,
-              "aria-expanded": c,
+              "aria-expanded": d,
               "aria-haspopup": "listbox",
               "aria-invalid": u === "error",
-              className: F(
+              className: E(
                 "w-full flex items-center justify-between font-normal text-left text-foreground transition-colors outline-none select-none cursor-pointer shrink-0",
                 "focus-visible:ring-2 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-                ze[le],
-                ce,
-                de,
-                ue,
-                g && `bg-[${g}]`,
-                G
+                we[V],
+                le,
+                ae,
+                ne,
+                U
               ),
-              style: J,
-              ...re(),
+              style: W,
+              ...me(),
               children: [
                 /* @__PURE__ */ f(
                   "span",
                   {
                     className: o || n ? "text-foreground" : "text-foreground/70",
-                    children: me
+                    children: Se
                   }
                 ),
                 /* @__PURE__ */ f(
-                  _e,
+                  Te,
                   {
-                    className: F(
+                    className: E(
                       "ml-2 shrink-0 text-foreground/70 transition-transform duration-200",
-                      c && "rotate-180"
+                      d && "rotate-180"
                     )
                   }
                 )
@@ -173,25 +171,27 @@ const De = Ee(
             }
           ),
           /* @__PURE__ */ f(
-            Ce,
+            Ke,
             {
-              isOpen: c,
-              context: d,
-              floatingStyles: V,
-              getFloatingProps: oe,
-              setFloatingRef: L.setFloating,
+              isOpen: d,
+              context: m,
+              floatingStyles: ie,
+              getFloatingProps: fe,
+              setFloatingRef: h.setFloating,
               options: p,
-              selectedValues: pe,
-              onSelectOption: fe,
-              isSearch: U,
+              selectedValues: ve,
+              onSelectOption: pe,
+              isSearch: C,
               searchPlaceholder: B,
-              searchInputName: Q,
-              searchQuery: Y,
+              searchInputName: M,
+              searchQuery: $,
               onSearchChange: R,
-              belowList: $,
-              dropdownClassName: H,
+              belowList: Q,
+              dropdownClassName: G,
               menuProps: q,
-              menuConfig: e
+              menuConfig: e,
+              portal: se,
+              portalTarget: oe
             }
           )
         ] })

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

@@ -13,6 +13,22 @@ export interface SelectConfig extends FieldConfig {
      * Controls the menu's visual appearance and behavior.
      */
     menu?: SelectMenuConfig;
+    /**
+     * Whether to render the dropdown menu in a React portal.
+     * When true, the menu is rendered at the document body level,
+     * escaping any parent DOM hierarchy. This prevents CSS containment
+     * and stacking context issues. Defaults to true because dropdowns
+     * should always appear above other content.
+     *
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Custom portal target element for the dropdown menu.
+     * When portal is enabled, the menu is rendered into this element.
+     * Defaults to document.body.
+     */
+    portalTarget?: HTMLElement | null;
 }
 /**
  * Default config values registered for the Select component.
@@ -25,7 +41,17 @@ export declare const defaultSelectConfig: SelectConfig;
  * These values are used when instance props, component config,
  * and global defaults are all undefined.
  */
-export declare const FALLBACK_SELECT_CONFIG: Required<FieldConfig>;
+export declare const FALLBACK_SELECT_CONFIG: {
+    readonly portal: true;
+    readonly portalTarget: null;
+    readonly size: import('../field').FieldSizeKey;
+    readonly radius: import('../..').Radius;
+    readonly variant: import('../..').Variant;
+    readonly color: import('../..').Color;
+    readonly labelAlign: import('../field').LabelAlign;
+    readonly fullWidth: boolean;
+    readonly status: import('../field').FieldStatus;
+};
 declare module "../../libs/registry" {
     interface ComponentTypeConfigRegistry {
         select: SelectConfig;