@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

package/dist/components/select/select.js

@@ -1,14 +1,16 @@
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import * as c from "react";
-import { Root as L, Portal as B, Content as k, Viewport as $, Group as P, Item as W, ItemIndicator as X, ItemText as z, Label as E, ScrollDownButton as j, ScrollUpButton as M, Separator as Y, Value as O, Trigger as U, Icon as Z } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
-import { SLOT_ATTR as i, mergeClasses as m, shorthands as d } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as V } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as F } from "../density-provider/density-provider.js";
-import { makeZenithStyles as G } from "../../styles/make-styles.js";
-import { boxModel as s, nativeControl as H } from "../../styles/host-reset.js";
-import { OVERLAY_Z_INDEX as _ } from "../../styles/overlay-layer.js";
-import { spacingElement1 as u, graySoft as J, gray11 as K, fontWeightSemibold as Q, leadingXs as tt, textXs as et, spacingElement2 as p, grayA11 as h, accentA3 as y, grayA12 as b, leadingSm as v, textSm as I, selectItemPaddingY as C, selectItemPaddingLeft as ot, body as rt, accentA11 as R, focusRing as q, accentSoft as at, grayA8 as nt, radiusMd as N, radius2xl as it, selectContentGap as lt, selectContentPadding as st, radiusLg as ct } from "../../tokens/index.js";
-const dt = (n) => /* @__PURE__ */ t(
+import { jsx as o, jsxs as E, Fragment as D } from "react/jsx-runtime";
+import * as s from "react";
+import { createPortal as st } from "react-dom";
+import { DirectionProvider as at } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
+import { Select as p } from "../../_virtual/_zenith-runtime-family_select.js";
+import { mergeClasses as y, SLOT_ATTR as g, shorthands as v } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as ct } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as dt } from "../density-provider/density-provider.js";
+import { makeZenithStyles as ut } from "../../styles/make-styles.js";
+import { boxModel as h, nativeControl as pt } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as j } from "../../styles/overlay-layer.js";
+import { spacingElement1 as b, graySoft as ft, gray11 as gt, fontWeightSemibold as mt, leadingXs as ht, textXs as wt, spacingElement2 as S, grayA11 as W, accentA3 as G, grayA12 as U, leadingSm as Y, textSm as Z, selectItemPaddingY as H, selectItemPaddingLeft as xt, body as vt, accentA11 as V, focusRing as J, accentSoft as St, grayA8 as yt, radiusMd as K, radius2xl as bt, selectContentGap as It, selectContentPadding as Ct, radiusLg as At } from "../../tokens/index.js";
+const Dt = (i) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -16,10 +18,10 @@ const dt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
+    ...i,
+    children: /* @__PURE__ */ o("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
   }
-), pt = (n) => /* @__PURE__ */ t(
+), Lt = (i) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -27,10 +29,10 @@ const dt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
+    ...i,
+    children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
   }
-), mt = (n) => /* @__PURE__ */ t(
+), Rt = (i) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -38,10 +40,10 @@ const dt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
+    ...i,
+    children: /* @__PURE__ */ o("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
   }
-), T = (n) => /* @__PURE__ */ t(
+), et = (i) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -49,21 +51,21 @@ const dt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
+    ...i,
+    children: /* @__PURE__ */ o("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
   }
-), f = G({
+), C = ut({
   trigger: {
-    ...H,
+    ...pt,
     display: "flex",
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
-    ...d.gap(p),
-    ...d.borderRadius(ct),
+    ...v.gap(S),
+    ...v.borderRadius(At),
     backgroundColor: "transparent",
-    fontSize: I,
-    lineHeight: v,
+    fontSize: Z,
+    lineHeight: Y,
     outlineStyle: "none",
     whiteSpace: "normal",
     textAlign: "left",
@@ -78,39 +80,30 @@ const dt = (n) => /* @__PURE__ */ t(
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: q
+      outlineColor: J
     },
     ":disabled": {
       cursor: "not-allowed",
       opacity: 0.5
     },
     "&[data-placeholder]": {
-      color: nt
+      color: yt
     },
     "& svg": {
       pointerEvents: "none",
       flexShrink: 0
     },
-    [`& [${i}="select-value"]`]: {
+    [`& [${g}="select-value"]`]: {
       display: "flex",
       alignItems: "center",
-      ...d.gap(p),
+      ...v.gap(S),
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
     // The open-state chevron rotation is declared HERE, on the trigger that carries the state
     // attribute, reaching the icon by SLOT_ATTR.
-    [`&[data-state='open'] [${i}="select-icon"] svg`]: {
-      transform: "rotate(180deg)"
-    },
-    [`&[data-state='open'] [${i}="select-icon"]`]: {
-      transform: "rotate(180deg)"
-    },
-    [`&[data-open] [${i}="select-icon"] svg`]: {
-      transform: "rotate(180deg)"
-    },
-    [`&[data-popup-open] [${i}="select-icon"] svg`]: {
+    [`&[data-popup-open] [${g}="select-icon"]`]: {
       transform: "rotate(180deg)"
     }
   },
@@ -121,10 +114,10 @@ const dt = (n) => /* @__PURE__ */ t(
     flexShrink: 0
   },
   triggerIcon: {
-    ...s,
+    ...h,
     width: "1.5rem",
     height: "1.5rem",
-    color: h,
+    color: W,
     transitionProperty: "transform",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -133,7 +126,7 @@ const dt = (n) => /* @__PURE__ */ t(
     }
   },
   triggerClear: {
-    ...s,
+    ...h,
     position: "absolute",
     right: "2.75rem",
     paddingTop: "0.125rem",
@@ -144,145 +137,140 @@ const dt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
-    color: R,
+    color: V,
     cursor: "pointer",
-    ...d.borderRadius(N),
+    ...v.borderRadius(K),
     ":hover": {
-      backgroundColor: at
+      backgroundColor: St
     },
     ":focus-visible": {
-      outlineColor: q,
+      outlineColor: J,
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px"
     }
   },
   triggerClearIcon: {
-    ...s,
+    ...h,
     width: "1.25rem",
     height: "1.25rem",
-    color: R
+    color: V
+  },
+  // The positioner is what stacks against other layers, as Radix's popper wrapper did; it also
+  // keeps that wrapper's `max-content` floor so the content sizes the same way.
+  positioner: {
+    zIndex: j,
+    minWidth: "max-content"
+  },
+  hideWhenDetached: {
+    "&[data-anchor-hidden]": {
+      visibility: "hidden",
+      pointerEvents: "none"
+    }
   },
   popup: {
-    ...s,
-    backgroundColor: rt,
-    // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines
+    ...h,
+    // Radix laid its content out as a column: scroll-up arrow, viewport, scroll-down arrow.
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: vt,
+    // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in transition offsets a few lines
     // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the
     // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the
     // animation distance a density lever too.
-    ...d.padding(st),
-    ...d.gap(lt),
-    color: b,
+    ...v.padding(Ct),
+    ...v.gap(It),
+    color: U,
     position: "relative",
-    zIndex: _,
-    transformOrigin: "var(--radix-select-content-transform-origin)",
+    zIndex: j,
+    transformOrigin: "var(--transform-origin)",
     overflowX: "hidden",
     overflowY: "auto",
-    ...d.borderRadius(it),
-    ...d.border("1px", "solid", "transparent"),
+    ...v.borderRadius(bt),
+    ...v.border("1px", "solid", "transparent"),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
-    maxHeight: "var(--radix-popper-available-height, 20rem)",
-    "@media (prefers-reduced-motion: reduce)": {
-      animationDuration: "0.01ms",
-      animationIterationCount: "1",
-      "&[data-state='open']": {
-        animationDuration: "0.01ms"
-      },
-      "&[data-state='closed']": {
-        animationDuration: "0.01ms"
-      }
+    maxHeight: "var(--available-height, 20rem)",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "&[data-starting-style]": {
+      opacity: 0,
+      transform: "scale(0.95)"
     },
-    "&[data-state='open']": {
-      animationName: {
-        from: { opacity: 0, transform: "scale(0.95)" },
-        to: { opacity: 1, transform: "scale(1)" }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    "&[data-starting-style][data-side='bottom']": {
+      transform: `translateY(-${S}) scale(0.95)`
     },
-    "&[data-state='open'][data-side='bottom']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: `translateY(-${p}) scale(0.95)`
-        },
-        to: { opacity: 1, transform: "translateY(0) scale(1)" }
-      }
+    "&[data-starting-style][data-side='left']": {
+      transform: `translateX(${S}) scale(0.95)`
     },
-    "&[data-state='open'][data-side='left']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: `translateX(${p}) scale(0.95)`
-        },
-        to: { opacity: 1, transform: "translateX(0) scale(1)" }
-      }
+    "&[data-starting-style][data-side='right']": {
+      transform: `translateX(-${S}) scale(0.95)`
     },
-    "&[data-state='open'][data-side='right']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: `translateX(-${p}) scale(0.95)`
-        },
-        to: { opacity: 1, transform: "translateX(0) scale(1)" }
-      }
+    "&[data-starting-style][data-side='top']": {
+      transform: `translateY(${S}) scale(0.95)`
     },
-    "&[data-state='open'][data-side='top']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: `translateY(${p}) scale(0.95)`
-        },
-        to: { opacity: 1, transform: "translateY(0) scale(1)" }
-      }
+    "&[data-ending-style]": {
+      opacity: 0,
+      transform: "scale(0.95)",
+      transitionDuration: "100ms",
+      transitionTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
     },
-    "&[data-state='closed']": {
-      animationName: {
-        from: { opacity: 1, transform: "scale(1)" },
-        to: { opacity: 0, transform: "scale(0.95)" }
-      },
-      animationDuration: "100ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms",
+      "&[data-ending-style]": {
+        transitionDuration: "0.01ms"
+      }
     }
   },
   viewport: {
-    ...s,
+    ...h,
+    // Radix's viewport: the scroller between the arrows, its scrollbar hidden.
+    position: "relative",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    overflowX: "hidden",
+    overflowY: "auto",
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
     width: "100%",
-    minWidth: "var(--radix-select-trigger-width)",
-    scrollMarginTop: u,
-    scrollMarginBottom: u
+    minWidth: "var(--anchor-width)",
+    scrollMarginTop: b,
+    scrollMarginBottom: b
   },
   item: {
-    ...s,
+    ...h,
     position: "relative",
     display: "flex",
     width: "100%",
     cursor: "default",
     userSelect: "none",
     alignItems: "center",
-    ...d.gap(p),
-    ...d.borderRadius(N),
+    ...v.gap(S),
+    ...v.borderRadius(K),
     // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding
     // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in
     // density.yaml).
-    paddingLeft: ot,
+    paddingLeft: xt,
     paddingRight: "2rem",
-    paddingTop: C,
-    paddingBottom: C,
-    fontSize: I,
-    lineHeight: v,
-    color: b,
+    paddingTop: H,
+    paddingBottom: H,
+    fontSize: Z,
+    lineHeight: Y,
+    color: U,
     outlineStyle: "none",
     ":not(:first-child)": {
       marginTop: "0.125rem"
     },
     "&[data-highlighted]": {
-      backgroundColor: y
+      backgroundColor: G
     },
-    "&[data-state='checked']": {
-      backgroundColor: y
+    "&[data-selected]": {
+      backgroundColor: G
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -293,13 +281,13 @@ const dt = (n) => /* @__PURE__ */ t(
       flexShrink: 0
     },
     "& svg:not([class*='text-'])": {
-      color: h
+      color: W
     }
   },
   itemIndicatorWrapper: {
-    ...s,
+    ...h,
     position: "absolute",
-    right: p,
+    right: S,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -307,256 +295,443 @@ const dt = (n) => /* @__PURE__ */ t(
     justifyContent: "center"
   },
   itemIndicatorIcon: {
-    ...s,
+    ...h,
     // An inline svg sits on the text baseline and grows its wrapper by the line-height gap.
     display: "block",
     width: "1rem",
     height: "1rem",
-    color: h
+    color: W
   },
   label: {
-    ...s,
-    paddingLeft: p,
-    paddingRight: p,
+    ...h,
+    paddingLeft: S,
+    paddingRight: S,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: et,
-    lineHeight: tt,
-    fontWeight: Q,
-    color: K
+    fontSize: wt,
+    lineHeight: ht,
+    fontWeight: mt,
+    color: gt
   },
   separator: {
-    ...s,
+    ...h,
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${u})`,
-    marginRight: `calc(-1 * ${u})`,
-    marginTop: u,
-    marginBottom: u,
+    marginLeft: `calc(-1 * ${b})`,
+    marginRight: `calc(-1 * ${b})`,
+    marginTop: b,
+    marginBottom: b,
     height: "1px",
-    backgroundColor: J
+    backgroundColor: ft
   },
   scrollArrow: {
     display: "flex",
+    flexShrink: 0,
     cursor: "default",
     alignItems: "center",
     justifyContent: "center"
   },
   scrollArrowUp: {
-    ...s,
-    paddingBottom: u
+    ...h,
+    paddingBottom: b
   },
   scrollArrowDown: {
-    ...s,
-    paddingTop: u
+    ...h,
+    paddingTop: b
   },
   scrollArrowIcon: {
-    ...s,
+    ...h,
     width: "1.5rem",
     height: "1.5rem"
   },
   scrollArrowDownIcon: {
     transform: "rotate(180deg)"
   }
-}), Ct = c.forwardRef(function(o, e) {
-  return /* @__PURE__ */ t(L, { "data-slot": "select", ...o });
-}), Rt = c.forwardRef(function({ className: o, ...e }, a) {
-  return /* @__PURE__ */ t(
-    P,
+});
+function A(i) {
+  const t = s.Children.toArray(i).filter(s.isValidElement);
+  return t.length === 1 ? t[0] : void 0;
+}
+function L(i, t) {
+  const r = i ? A(t) : void 0;
+  return r ? { render: r } : { children: t };
+}
+function M(i, t, r) {
+  const e = i ? A(t) : void 0;
+  if (!e) return { children: r(t) };
+  const n = e.props.children;
+  return { render: s.cloneElement(e, void 0, r(n)) };
+}
+function Tt(i) {
+  if (i)
+    return () => {
+      const t = new Event("focus", { cancelable: !0 }), r = document.activeElement;
+      i(t);
+      const e = document.activeElement;
+      return e !== r && e instanceof HTMLElement && queueMicrotask(() => e.focus()), !t.defaultPrevented;
+    };
+}
+function Nt() {
+  const i = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set();
+  let r = 0;
+  const e = () => {
+    r += 1, t.forEach((n) => n());
+  };
+  return {
+    set(n, a, l) {
+      const c = i.get(n);
+      (c == null ? void 0 : c.value) === a && c.label === l || (i.set(n, { value: a, label: l }), e());
+    },
+    delete(n) {
+      i.delete(n) && e();
+    },
+    labelFor(n) {
+      for (const a of i.values())
+        if (a.value === n) return a.label;
+    },
+    subscribe(n) {
+      return t.add(n), () => {
+        t.delete(n);
+      };
+    },
+    version: () => r
+  };
+}
+const R = s.createContext(null), I = s.createContext(!1);
+function Q(i) {
+  return i === "" ? null : i;
+}
+const Ht = s.forwardRef(function({ children: t, dir: r, value: e, defaultValue: n, onValueChange: a, onOpenChange: l, ...c }, d) {
+  const [m] = s.useState(Nt), u = s.useMemo(() => ({ labels: m, dir: r }), [m, r]), x = /* @__PURE__ */ o(
+    p.Root,
     {
-      ref: a,
-      "data-slot": "select-group",
-      [i]: "select-group",
-      className: o,
-      ...e
+      "data-slot": "select",
+      ...e !== void 0 ? { value: Q(e) } : {},
+      ...n !== void 0 ? { defaultValue: Q(n) } : {},
+      onValueChange: (f) => a == null ? void 0 : a(f ?? ""),
+      onOpenChange: (f, w) => {
+        if (w.reason === "escape-key" && w.event.defaultPrevented) {
+          w.cancel();
+          return;
+        }
+        l == null || l(f, w);
+      },
+      ...c,
+      children: /* @__PURE__ */ o(R.Provider, { value: u, children: t })
     }
   );
-}), qt = c.forwardRef(function({ className: o, ...e }, a) {
-  return /* @__PURE__ */ t(
-    O,
+  return r ? /* @__PURE__ */ o(at, { direction: r, children: x }) : x;
+}), Vt = s.forwardRef(
+  function({ asChild: t = !1, className: r, children: e, ...n }, a) {
+    return s.useContext(I) ? /* @__PURE__ */ o(D, { children: e }) : /* @__PURE__ */ o(
+      p.Group,
+      {
+        ref: a,
+        "data-slot": "select-group",
+        [g]: "select-group",
+        className: r,
+        ...n,
+        ...L(t, e)
+      }
+    );
+  }
+), Jt = s.forwardRef(
+  function({ asChild: t = !1, className: r, children: e, placeholder: n, style: a, ...l }, c) {
+    var f;
+    const d = (f = s.useContext(R)) == null ? void 0 : f.labels;
+    s.useSyncExternalStore(
+      (d == null ? void 0 : d.subscribe) ?? qt,
+      (d == null ? void 0 : d.version) ?? tt,
+      (d == null ? void 0 : d.version) ?? tt
+    );
+    const m = t ? A(e) : void 0, u = t ? void 0 : e, x = (w) => w == null ? n : u ?? (d == null ? void 0 : d.labelFor(w)) ?? null;
+    return /* @__PURE__ */ o(
+      p.Value,
+      {
+        ref: c,
+        "data-slot": "select-value",
+        [g]: "select-value",
+        className: r,
+        style: { pointerEvents: "none", ...a },
+        ...l,
+        ...m ? { render: m } : {},
+        children: x
+      }
+    );
+  }
+);
+function qt() {
+  return () => {
+  };
+}
+function tt() {
+  return 0;
+}
+const Kt = s.forwardRef(function({ asChild: t = !1, className: r, children: e, ...n }, a) {
+  var u;
+  const l = C(), c = (u = s.useContext(R)) == null ? void 0 : u.dir, d = t ? A(e) : void 0, m = !d || typeof d.type != "string" || d.type === "button";
+  return /* @__PURE__ */ o(
+    p.Trigger,
     {
       ref: a,
-      "data-slot": "select-value",
-      [i]: "select-value",
-      className: o,
-      ...e
-    }
-  );
-}), Nt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = f();
-  return /* @__PURE__ */ w(
-    U,
-    {
-      ref: l,
       "data-slot": "select-trigger",
-      [i]: "select-trigger",
-      className: m(r.trigger, o),
-      ...a,
-      children: [
-        e,
-        /* @__PURE__ */ t(
-          Z,
+      [g]: "select-trigger",
+      nativeButton: m,
+      className: y(l.trigger, r),
+      ...c ? { dir: c } : {},
+      ...n,
+      ...M(t, e, (x) => /* @__PURE__ */ E(D, { children: [
+        x,
+        /* @__PURE__ */ o(
+          p.Icon,
           {
-            asChild: !0,
             "data-slot": "select-icon",
-            [i]: "select-icon",
-            className: r.triggerIconWrapper,
-            children: /* @__PURE__ */ t(mt, { className: r.triggerIcon })
+            [g]: "select-icon",
+            className: l.triggerIconWrapper,
+            render: /* @__PURE__ */ o(Rt, { className: l.triggerIcon })
           }
         )
-      ]
+      ] }))
     }
   );
-}), Tt = c.forwardRef(function({ className: o, onClick: e, ...a }, l) {
-  const r = f();
-  return /* @__PURE__ */ t(
+}), Qt = s.forwardRef(function({ className: t, onClick: r, ...e }, n) {
+  const a = C();
+  return /* @__PURE__ */ o(
     "span",
     {
-      ref: l,
+      ref: n,
       role: "button",
       tabIndex: 0,
       "data-slot": "select-trigger-clear",
-      [i]: "select-trigger-clear",
-      className: m(r.triggerClear, o),
-      onPointerDown: (g) => {
-        g.preventDefault(), g.stopPropagation();
+      [g]: "select-trigger-clear",
+      className: y(a.triggerClear, t),
+      onPointerDown: (l) => {
+        l.preventDefault(), l.stopPropagation();
       },
-      onClick: (g) => {
-        g.preventDefault(), g.stopPropagation(), e == null || e(g);
+      onMouseDown: (l) => {
+        l.preventDefault(), l.stopPropagation();
       },
-      ...a,
-      children: /* @__PURE__ */ t(dt, { className: r.triggerClearIcon })
+      onClick: (l) => {
+        l.preventDefault(), l.stopPropagation(), r == null || r(l);
+      },
+      ...e,
+      children: /* @__PURE__ */ o(Dt, { className: a.triggerClearIcon })
     }
   );
-}), At = c.forwardRef(function({
-  className: o,
+}), Et = {
+  side: "none",
+  align: "none",
+  fallbackAxisSide: "none"
+}, Pt = {
+  side: "flip",
+  align: "flip",
+  fallbackAxisSide: "none"
+}, kt = 10, te = s.forwardRef(function({
+  asChild: t = !1,
+  className: r,
   children: e,
+  container: n,
   position: a = "popper",
-  align: l = "center",
-  container: r,
-  ...g
-}, A) {
-  const x = f(), S = F(), D = V();
-  return /* @__PURE__ */ t(B, { container: r, children: /* @__PURE__ */ w(
-    k,
-    {
-      ref: A,
-      "data-slot": "select-content",
-      [i]: "select-content",
-      ...S !== void 0 ? { "data-density": S } : {},
-      ...D,
-      position: a,
-      align: l,
-      className: m(x.popup, o),
-      ...g,
-      children: [
-        /* @__PURE__ */ t(gt, {}),
-        /* @__PURE__ */ t(
-          $,
+  side: l = "bottom",
+  sideOffset: c = 0,
+  align: d = "center",
+  alignOffset: m = 0,
+  arrowPadding: u = 0,
+  avoidCollisions: x = !0,
+  collisionBoundary: f = [],
+  collisionPadding: w = kt,
+  sticky: T = "partial",
+  hideWhenDetached: N = !1,
+  updatePositionStrategy: P,
+  onCloseAutoFocus: k,
+  ...ot
+}, rt) {
+  var z, X, $;
+  const q = C(), F = (z = s.useContext(R)) == null ? void 0 : z.dir, O = dt(), nt = ct(), [_, it] = s.useState(null);
+  if (s.useLayoutEffect(() => {
+    it(document.createDocumentFragment());
+  }, []), s.useContext(I)) return null;
+  const lt = t ? ($ = (X = A(e)) == null ? void 0 : X.props) == null ? void 0 : $.children : e;
+  return /* @__PURE__ */ E(D, { children: [
+    _ && st(
+      /* @__PURE__ */ o(I.Provider, { value: !0, children: lt }),
+      _
+    ),
+    /* @__PURE__ */ o(
+      p.Portal,
+      {
+        container: n ?? void 0,
+        children: /* @__PURE__ */ o(
+          p.Positioner,
           {
-            "data-slot": "select-viewport",
-            [i]: "select-viewport",
-            className: x.viewport,
-            children: e
+            className: y(
+              q.positioner,
+              N && q.hideWhenDetached
+            ),
+            alignItemWithTrigger: a === "item-aligned",
+            side: l,
+            sideOffset: c,
+            align: d,
+            alignOffset: m,
+            arrowPadding: u,
+            collisionBoundary: (Array.isArray(f) ? f : [f]).filter((B) => B !== null),
+            collisionPadding: w,
+            collisionAvoidance: x ? Pt : Et,
+            sticky: T === "always",
+            children: /* @__PURE__ */ o(
+              p.Popup,
+              {
+                ref: rt,
+                "data-slot": "select-content",
+                [g]: "select-content",
+                ...O !== void 0 ? { "data-density": O } : {},
+                ...nt,
+                ...F ? { dir: F } : {},
+                finalFocus: Tt(k),
+                className: y(q.popup, r),
+                ...ot,
+                ...M(t, e, (B) => /* @__PURE__ */ E(D, { children: [
+                  /* @__PURE__ */ o(Bt, {}),
+                  /* @__PURE__ */ o(
+                    p.List,
+                    {
+                      "data-slot": "select-viewport",
+                      [g]: "select-viewport",
+                      className: q.viewport,
+                      children: B
+                    }
+                  ),
+                  /* @__PURE__ */ o(Wt, {})
+                ] }))
+              }
+            )
           }
-        ),
-        /* @__PURE__ */ t(ut, {})
-      ]
-    }
-  ) });
-}), Dt = c.forwardRef(function({ className: o, ...e }, a) {
-  const l = f();
-  return /* @__PURE__ */ t(
-    E,
-    {
-      ref: a,
-      "data-slot": "select-label",
-      [i]: "select-label",
-      className: m(l.label, o),
-      ...e
-    }
-  );
-}), Lt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = f();
-  return /* @__PURE__ */ w(
-    W,
-    {
-      ref: l,
-      "data-slot": "select-item",
-      [i]: "select-item",
-      className: m(r.item, o),
-      ...a,
-      children: [
-        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(pt, { className: r.itemIndicatorIcon }) }) }),
-        /* @__PURE__ */ t(z, { children: e })
-      ]
-    }
-  );
-}), Bt = c.forwardRef(function({ className: o, ...e }, a) {
-  const l = f();
-  return /* @__PURE__ */ t(
-    Y,
+        )
+      }
+    )
+  ] });
+}), ee = s.forwardRef(
+  function({ asChild: t = !1, className: r, children: e, ...n }, a) {
+    const l = C();
+    return s.useContext(I) ? null : /* @__PURE__ */ o(
+      p.GroupLabel,
+      {
+        ref: a,
+        "data-slot": "select-label",
+        [g]: "select-label",
+        className: y(l.label, r),
+        ...n,
+        ...L(t, e)
+      }
+    );
+  }
+), oe = s.forwardRef(
+  function({
+    asChild: t = !1,
+    className: r,
+    children: e,
+    value: n,
+    disabled: a,
+    textValue: l,
+    ...c
+  }, d) {
+    var T, N, P;
+    const m = C(), u = (T = s.useContext(R)) == null ? void 0 : T.labels, x = s.useContext(I), [f] = s.useState(() => ({})), w = t ? (P = (N = A(e)) == null ? void 0 : N.props) == null ? void 0 : P.children : e;
+    return s.useLayoutEffect(() => {
+      u == null || u.set(f, n, w);
+    }), s.useLayoutEffect(() => () => u == null ? void 0 : u.delete(f), [u, f]), x ? null : /* @__PURE__ */ o(
+      p.Item,
+      {
+        ref: d,
+        value: n,
+        disabled: a,
+        ...l !== void 0 ? { label: l } : {},
+        "data-slot": "select-item",
+        [g]: "select-item",
+        className: y(m.item, r),
+        ...c,
+        ...M(t, e, (k) => /* @__PURE__ */ E(D, { children: [
+          /* @__PURE__ */ o("span", { className: m.itemIndicatorWrapper, children: /* @__PURE__ */ o(p.ItemIndicator, { children: /* @__PURE__ */ o(Lt, { className: m.itemIndicatorIcon }) }) }),
+          /* @__PURE__ */ o(p.ItemText, { render: /* @__PURE__ */ o("span", {}), children: k })
+        ] }))
+      }
+    );
+  }
+), re = s.forwardRef(function({ asChild: t = !1, className: r, children: e, ...n }, a) {
+  const l = C();
+  return s.useContext(I) ? null : /* @__PURE__ */ o(
+    p.Separator,
     {
       ref: a,
+      "aria-hidden": !0,
       "data-slot": "select-separator",
-      [i]: "select-separator",
-      className: m(l.separator, o),
-      ...e
+      [g]: "select-separator",
+      className: y(l.separator, r),
+      ...n,
+      ...L(t, e)
     }
   );
-}), gt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = f();
-  return /* @__PURE__ */ t(
-    M,
+}), Bt = s.forwardRef(function({ asChild: t = !1, className: r, children: e, style: n, ...a }, l) {
+  const c = C();
+  return s.useContext(I) ? null : /* @__PURE__ */ o(
+    p.ScrollUpArrow,
     {
       ref: l,
       "data-slot": "select-scroll-up-button",
-      [i]: "select-scroll-up-button",
-      className: m(
-        r.scrollArrow,
-        r.scrollArrowUp,
-        o
+      [g]: "select-scroll-up-button",
+      className: y(
+        c.scrollArrow,
+        c.scrollArrowUp,
+        r
       ),
+      style: { position: "static", ...n },
       ...a,
-      children: e ?? /* @__PURE__ */ t(T, { className: r.scrollArrowIcon })
+      ...L(
+        t,
+        e ?? /* @__PURE__ */ o(et, { className: c.scrollArrowIcon })
+      )
     }
   );
-}), ut = c.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = f();
-  return /* @__PURE__ */ t(
-    j,
+}), Wt = s.forwardRef(function({ asChild: t = !1, className: r, children: e, style: n, ...a }, l) {
+  const c = C();
+  return s.useContext(I) ? null : /* @__PURE__ */ o(
+    p.ScrollDownArrow,
     {
       ref: l,
       "data-slot": "select-scroll-down-button",
-      [i]: "select-scroll-down-button",
-      className: m(
-        r.scrollArrow,
-        r.scrollArrowDown,
-        o
+      [g]: "select-scroll-down-button",
+      className: y(
+        c.scrollArrow,
+        c.scrollArrowDown,
+        r
       ),
+      style: { position: "static", ...n },
       ...a,
-      children: e ?? /* @__PURE__ */ t(
-        T,
-        {
-          className: m(
-            r.scrollArrowIcon,
-            r.scrollArrowDownIcon
-          )
-        }
+      ...L(
+        t,
+        e ?? /* @__PURE__ */ o(
+          et,
+          {
+            className: y(
+              c.scrollArrowIcon,
+              c.scrollArrowDownIcon
+            )
+          }
+        )
       )
     }
   );
 });
 export {
-  Ct as Select,
-  At as SelectContent,
-  Rt as SelectGroup,
-  Lt as SelectItem,
-  Dt as SelectLabel,
-  ut as SelectScrollDownButton,
-  gt as SelectScrollUpButton,
-  Bt as SelectSeparator,
-  Nt as SelectTrigger,
-  Tt as SelectTriggerClear,
-  qt as SelectValue
+  Ht as Select,
+  te as SelectContent,
+  Vt as SelectGroup,
+  oe as SelectItem,
+  ee as SelectLabel,
+  Wt as SelectScrollDownButton,
+  Bt as SelectScrollUpButton,
+  re as SelectSeparator,
+  Kt as SelectTrigger,
+  Qt as SelectTriggerClear,
+  Jt as SelectValue
 };
 //# sourceMappingURL=select.js.map