@divayth/brick-ui 0.0.15 → 0.1.1

package/dist/ui/Drawer/Drawer.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { useState as d, useEffect as k } from "react";
-import { createPortal as C } from "react-dom";
+import { Portal as C } from "../Portal/Portal.js";
 import { Flex as u } from "../Flex/Flex.js";
 import { IconButton as E } from "../IconButton/IconButton.js";
 import p from "clsx";
@@ -11,12 +11,12 @@ import e from "./Drawer.module.css.js";
 const X = ({
   isOpen: o,
   onClose: h,
-  position: b = "right",
-  size: x = "md",
+  position: x = "right",
+  size: b = "md",
   title: a,
-  children: y,
+  children: v,
   withCloseButton: s = !0,
-  closeOnOverlay: v = !0,
+  closeOnOverlay: y = !0,
   closeLabel: i,
   className: N
 }) => {
@@ -29,56 +29,53 @@ const X = ({
     });
   }, [o]);
   const g = () => {
-    v && t(!1);
+    y && t(!1);
   }, j = () => {
     !f && m && (c(!1), o && h());
   };
-  return m ? C(
-    /* @__PURE__ */ n("div", { className: p(e.root, { [e.open]: f }), children: [
-      /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          "aria-label": i ?? l.close,
-          tabIndex: -1,
-          className: e.overlay,
-          onClick: g,
-          onTransitionEnd: j
-        }
-      ),
-      /* @__PURE__ */ n(
-        u,
-        {
-          direction: "col",
-          className: p(e.panel, e[b], e[x], N),
-          children: [
-            (a || s) && /* @__PURE__ */ n(
-              u,
-              {
-                alignItems: "center",
-                justifyContent: "between",
-                className: e.header,
-                children: [
-                  a,
-                  s && /* @__PURE__ */ r(
-                    E,
-                    {
-                      "aria-label": i ?? l.close,
-                      color: "secondary",
-                      onClick: () => t(!1),
-                      children: /* @__PURE__ */ r(F, { size: 20 })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ r("div", { className: e.content, children: y })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  ) : null;
+  return m ? /* @__PURE__ */ r(C, { children: /* @__PURE__ */ n("div", { className: p(e.root, { [e.open]: f }), children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        "aria-label": i ?? l.close,
+        tabIndex: -1,
+        className: e.overlay,
+        onClick: g,
+        onTransitionEnd: j
+      }
+    ),
+    /* @__PURE__ */ n(
+      u,
+      {
+        direction: "col",
+        className: p(e.panel, e[x], e[b], N),
+        children: [
+          (a || s) && /* @__PURE__ */ n(
+            u,
+            {
+              alignItems: "center",
+              justifyContent: "between",
+              className: e.header,
+              children: [
+                a,
+                s && /* @__PURE__ */ r(
+                  E,
+                  {
+                    "aria-label": i ?? l.close,
+                    color: "secondary",
+                    onClick: () => t(!1),
+                    children: /* @__PURE__ */ r(F, { size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: e.content, children: v })
+        ]
+      }
+    )
+  ] }) }) : null;
 };
 export {
   X as Drawer

package/dist/ui/FeedScroll/FeedScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedScroll.d.ts","sourceRoot":"","sources":["../../../src/ui/FeedScroll/FeedScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAYtE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,kDAIxB,eAAe,gCAwFjB,CAAC"}
+{"version":3,"file":"FeedScroll.d.ts","sourceRoot":"","sources":["../../../src/ui/FeedScroll/FeedScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAYtE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,kDAIxB,eAAe,gCAuFjB,CAAC"}

package/dist/ui/FeedScroll/FeedScroll.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as R, jsx as u } from "react/jsx-runtime";
-import { useState as m, useCallback as S } from "react";
-import { createPortal as y } from "react-dom";
-import z from "clsx";
-import { ArrowBigUp as H } from "lucide-react";
-import { useProvider as L } from "../../app/Provider.js";
-import { Flex as T } from "../Flex/Flex.js";
+import { jsxs as R, jsx as m } from "react/jsx-runtime";
+import { useState as h, useCallback as S } from "react";
+import { Portal as z } from "../Portal/Portal.js";
+import H from "clsx";
+import { ArrowBigUp as L } from "lucide-react";
+import { useProvider as T } from "../../app/Provider.js";
+import { Flex as y } from "../Flex/Flex.js";
 import { IconButton as P } from "../IconButton/IconButton.js";
 import p from "./FeedScroll.module.css.js";
 const Y = ({
@@ -13,24 +13,24 @@ const Y = ({
   scrollToTopLabel: b,
   withScrollToTop: f = !0
 }) => {
-  const { messages: v } = L(), [n, w] = m(!1), [d, x] = m(
+  const { messages: v } = T(), [n, w] = h(!1), [d, x] = h(
     null
-  ), [C, E] = m({ right: 8, bottom: 24 }), B = S((r) => {
+  ), [C, E] = h({ right: 8, bottom: 24 }), B = S((r) => {
     if (!r) return;
     let o = r.parentElement;
     for (; o && !/(auto|scroll|overlay)/.test(getComputedStyle(o).overflowY); )
       o = o.parentElement;
     const t = o ?? document.scrollingElement, e = () => {
-      const s = t.getBoundingClientRect(), l = r.getBoundingClientRect(), M = Math.max(0, s.top), h = Math.min(innerHeight, s.bottom);
+      const s = t.getBoundingClientRect(), l = r.getBoundingClientRect(), M = Math.max(0, s.top), u = Math.min(innerHeight, s.bottom);
       w(
-        t.scrollHeight > t.clientHeight && t.scrollTop > 0 && l.bottom > M && l.top < h
+        t.scrollHeight > t.clientHeight && t.scrollTop > 0 && l.bottom > M && l.top < u
       );
       const c = {
         right: Math.max(
           8,
           innerWidth - Math.min(s.right, l.right, innerWidth) + 8
         ),
-        bottom: Math.max(24, innerHeight - h + 24)
+        bottom: Math.max(24, innerHeight - u + 24)
       };
       E(
         (a) => a.right === c.right && a.bottom === c.bottom ? a : c
@@ -42,28 +42,25 @@ const Y = ({
       window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), i.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ R(T, { ref: B, direction: "col", className: "w-full", children: [
+  return /* @__PURE__ */ R(y, { ref: B, direction: "col", className: "w-full", children: [
     g,
-    f && d && y(
-      /* @__PURE__ */ u(
-        P,
-        {
-          size: "lg",
-          "aria-label": b ?? v.scrollToTop,
-          variant: "filled",
-          "aria-hidden": !n,
-          tabIndex: n ? 0 : -1,
-          className: z(p.button, { [p.visible]: n }),
-          style: C,
-          onClick: () => d.scrollTo({
-            top: 0,
-            behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
-          }),
-          children: /* @__PURE__ */ u(H, {})
-        }
-      ),
-      document.body
-    )
+    f && d && /* @__PURE__ */ m(z, { children: /* @__PURE__ */ m(
+      P,
+      {
+        size: "lg",
+        "aria-label": b ?? v.scrollToTop,
+        variant: "filled",
+        "aria-hidden": !n,
+        tabIndex: n ? 0 : -1,
+        className: H(p.button, { [p.visible]: n }),
+        style: C,
+        onClick: () => d.scrollTo({
+          top: 0,
+          behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+        }),
+        children: /* @__PURE__ */ m(L, {})
+      }
+    ) })
   ] });
 };
 export {

package/dist/ui/Popover/Popover.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { Popover as Primitive } from "radix-ui";
+import { type PortalProps } from "../Portal/Portal.js";
+export type PopoverRootProps = ComponentProps<typeof Primitive.Root>;
+export type PopoverTriggerProps = ComponentProps<typeof Primitive.Trigger>;
+export type PopoverContentProps = ComponentProps<typeof Primitive.Content> & Pick<PortalProps, "container">;
+export declare const Popover: {
+    Root: import("react").FC<Primitive.PopoverProps>;
+    Anchor: (props: ComponentProps<typeof Primitive.Anchor>) => import("react").JSX.Element;
+    Trigger: (props: PopoverTriggerProps) => import("react").JSX.Element;
+    Content: ({ container, sideOffset, collisionPadding, ...props }: PopoverContentProps) => import("react").JSX.Element;
+    Close: import("react").ForwardRefExoticComponent<Primitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/ui/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,GACxE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAwBjC,eAAO,MAAM,OAAO;;oBAnBG,cAAc,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC;qBAHtC,mBAAmB;qEAYxC,mBAAmB;;CAgBrB,CAAC"}

package/dist/ui/Popover/Popover.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Popover as r } from "radix-ui";
+import { Portal as i } from "../Portal/Portal.js";
+const c = (o) => /* @__PURE__ */ t(r.Trigger, { asChild: !0, ...o }), p = (o) => /* @__PURE__ */ t(r.Anchor, { asChild: !0, ...o }), l = ({
+  container: o,
+  sideOffset: e = 8,
+  collisionPadding: n = 8,
+  ...s
+}) => /* @__PURE__ */ t(i, { container: o, children: /* @__PURE__ */ t(
+  r.Content,
+  {
+    sideOffset: e,
+    collisionPadding: n,
+    ...s
+  }
+) }), a = {
+  Root: r.Root,
+  Anchor: p,
+  Trigger: c,
+  Content: l,
+  Close: r.Close
+};
+export {
+  a as Popover
+};

package/dist/ui/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import { type PropsWithChildren } from "react";
+export interface PortalProps extends PropsWithChildren {
+    container?: Element | DocumentFragment | null;
+}
+export declare const Portal: ({ container, children }: PortalProps) => import("react").ReactPortal | null;
+//# sourceMappingURL=Portal.d.ts.map

package/dist/ui/Portal/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/ui/Portal/Portal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAGpE,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,MAAM,GAAI,yBAAyB,WAAW,uCAU1D,CAAC"}

package/dist/ui/Portal/Portal.js

@@ -0,0 +1,12 @@
+"use client";
+import { useState as u, useEffect as n } from "react";
+import { createPortal as f } from "react-dom";
+const a = ({ container: t, children: e }) => {
+  const [o, r] = u(!1);
+  return n(() => {
+    r(!0);
+  }, []), o ? f(e, t ?? document.body) : null;
+};
+export {
+  a as Portal
+};

package/dist/ui/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAG3E,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAU5D,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IAC9D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACjC;AA4BD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,EAAE,oHAa3C,WAAW,CAAC,CAAC,CAAC,gCA4NhB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAU5D,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IAC9D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACjC;AA4BD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,EAAE,oHAa3C,WAAW,CAAC,CAAC,CAAC,gCA6GhB,CAAC"}

package/dist/ui/Select/Select.js

@@ -1,190 +1,122 @@
 "use client";
-import { jsxs as p, jsx as i, Fragment as F } from "react/jsx-runtime";
-import { useRef as C, useState as R, useEffect as q, useId as B } from "react";
-import { createPortal as j } from "react-dom";
-import { Field as w } from "../Field/Field.js";
-import { Flex as M } from "../Flex/Flex.js";
-import { IconButton as W } from "../IconButton/IconButton.js";
-import { Text as _ } from "../Text/Text.js";
-import { useProvider as z } from "../../app/Provider.js";
-import { clsx as O } from "clsx";
-import { ChevronDown as A, X as K } from "lucide-react";
-import o from "./Select.module.css.js";
-const U = {
+import { jsx as r, jsxs as s, Fragment as O } from "react/jsx-runtime";
+import { useRef as P, useState as w, useId as R } from "react";
+import { Popover as m } from "../Popover/Popover.js";
+import { Field as d } from "../Field/Field.js";
+import { Flex as j } from "../Flex/Flex.js";
+import { IconButton as k } from "../IconButton/IconButton.js";
+import { Text as q } from "../Text/Text.js";
+import { useProvider as A } from "../../app/Provider.js";
+import { clsx as x } from "clsx";
+import { ChevronDown as D, X as E } from "lucide-react";
+import t from "./Select.module.css.js";
+const T = {
   sm: 16,
   md: 20,
   lg: 24
-}, V = (d, f) => d ? /* @__PURE__ */ p(F, { children: [
-  d.icon,
-  /* @__PURE__ */ i(_, { className: o.value, children: d.label ?? String(d.value ?? "") })
-] }) : f ? /* @__PURE__ */ i("span", { className: O(o.value, o.placeholder), children: f }) : /* @__PURE__ */ i("span", { className: o.value }), ie = ({
-  value: d,
-  onChange: f,
-  label: x,
-  disabled: a,
-  options: y = [],
-  placeholder: b,
-  error: v,
-  withArrow: k = !0,
-  clearable: L = !0,
-  className: H,
-  size: E = "md",
-  variant: T = "filled"
+}, _ = (n, l) => n ? /* @__PURE__ */ s(O, { children: [
+  n.icon,
+  /* @__PURE__ */ r(q, { className: t.value, children: n.label ?? String(n.value ?? "") })
+] }) : l ? /* @__PURE__ */ r("span", { className: x(t.value, t.placeholder), children: l }) : /* @__PURE__ */ r("span", { className: t.value }), U = ({
+  value: n,
+  onChange: l,
+  label: f,
+  disabled: o,
+  options: g = [],
+  placeholder: N,
+  error: c,
+  withArrow: b = !0,
+  clearable: S = !0,
+  className: y,
+  size: p = "md",
+  variant: C = "filled"
 }) => {
-  const { messages: $ } = z(), h = y.find((e) => e.value === d), c = C(null), N = C(null), [t, l] = R({
-    isOpen: !1,
-    portalTarget: null,
-    top: 0,
-    left: 0,
-    width: 0,
-    maxHeight: 320,
-    direction: "down"
-  });
-  q(() => {
-    if (!t.isOpen) return;
-    if (a) {
-      l((r) => ({ ...r, isOpen: !1 }));
-      return;
-    }
-    const e = (r) => {
-      r.key === "Escape" && (r.preventDefault(), r.stopPropagation(), l((s) => ({ ...s, isOpen: !1 })), c.current?.querySelector("button")?.focus());
-    };
-    document.addEventListener("keydown", e, !0);
-    const n = (r) => {
-      const s = r.target;
-      s instanceof Node && (c.current?.contains(s) || N.current?.contains(s) || l((g) => ({ ...g, isOpen: !1 })));
-    };
-    document.addEventListener("mousedown", n), document.addEventListener("touchstart", n);
-    const m = (r) => {
-      r.target instanceof Node && N.current?.contains(r.target) || l((s) => ({ ...s, isOpen: !1 }));
-    };
-    return document.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
-      document.removeEventListener("keydown", e, !0), document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n), document.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
-    };
-  }, [t.isOpen, a]);
-  const u = B(), D = (e) => {
-    a || (f?.(e.value), l((n) => ({ ...n, isOpen: !1 })), c.current?.querySelector("button")?.focus());
-  }, I = (e) => {
-    e.preventDefault(), e.stopPropagation(), f?.(void 0), l((n) => ({ ...n, isOpen: !1 })), c.current?.querySelector("button")?.focus();
-  }, P = () => {
-    if (!a) {
-      if (!t.isOpen && c.current) {
-        const e = c.current.getBoundingClientRect(), n = 4, m = Math.min(320, y.length * 40 + 8), r = window.innerHeight - e.bottom - n, s = e.top - n, g = r < m && s > r, S = Math.min(e.width, window.innerWidth - n * 2);
-        l({
-          isOpen: !0,
-          portalTarget: c.current.closest("dialog") ?? document.body,
-          direction: g ? "up" : "down",
-          left: Math.max(
-            n,
-            Math.min(e.left, window.innerWidth - S - n)
-          ),
-          width: S,
-          maxHeight: Math.max(0, Math.min(320, g ? s : r)),
-          top: g ? e.top : e.bottom
-        });
-        return;
-      }
-      l((e) => ({
-        ...e,
-        isOpen: !e.isOpen
-      }));
-    }
+  const { messages: $ } = A(), i = g.find((e) => e.value === n), u = P(null), [v, h] = w(!1), a = R(), I = (e) => {
+    o || (l?.(e.value), h(!1), u.current?.querySelector("button")?.focus());
+  }, F = (e) => {
+    e.preventDefault(), e.stopPropagation(), l?.(void 0), h(!1), u.current?.querySelector("button")?.focus();
   };
-  return /* @__PURE__ */ p(w.Root, { className: H, children: [
-    x && /* @__PURE__ */ i(w.Label, { htmlFor: u, label: x }),
-    /* @__PURE__ */ i(w.Control, { size: E, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ r(m.Root, { open: v && !o, onOpenChange: h, children: /* @__PURE__ */ s(d.Root, { className: y, children: [
+    f && /* @__PURE__ */ r(d.Label, { htmlFor: a, label: f }),
+    /* @__PURE__ */ r(d.Control, { size: p, children: /* @__PURE__ */ r(m.Anchor, { children: /* @__PURE__ */ s(
       "div",
       {
-        ref: c,
-        className: O(o.root, {
-          [o.error]: v,
-          [o.disabled]: a
+        ref: u,
+        className: x(t.select, t[C], {
+          [t.error]: c,
+          [t.disabled]: o
         }),
         children: [
-          /* @__PURE__ */ p("div", { className: O(o.select, o[T]), children: [
-            /* @__PURE__ */ p(
-              "button",
-              {
-                id: u,
-                type: "button",
-                className: o.trigger,
-                onClick: P,
-                disabled: a,
-                "aria-expanded": t.isOpen,
-                "aria-haspopup": "listbox",
-                "aria-controls": t.isOpen ? `${u}-options` : void 0,
-                "aria-invalid": v ? !0 : void 0,
-                "aria-describedby": v ? `${u}-error` : void 0,
-                children: [
-                  V(h, b),
-                  k && !(h && L) && /* @__PURE__ */ i(
-                    A,
-                    {
-                      size: U[E],
-                      className: o.arrow,
-                      "aria-hidden": "true"
-                    }
-                  )
-                ]
-              }
-            ),
-            h && L && /* @__PURE__ */ i(
-              W,
-              {
-                size: E,
-                color: "secondary",
-                onClick: I,
-                className: o.clear,
-                disabled: a,
-                "aria-label": $.clear,
-                children: /* @__PURE__ */ i(K, {})
-              }
-            )
-          ] }),
-          t.isOpen && !a && j(
-            /* @__PURE__ */ i(
-              M,
-              {
-                ref: N,
-                id: `${u}-options`,
-                role: "listbox",
-                "aria-label": x ?? b,
-                direction: "col",
-                gap: "xs",
-                className: O(o.dropdown),
-                style: {
-                  position: "fixed",
-                  left: t.left,
-                  top: t.direction === "down" ? t.top + 4 : t.top - 4,
-                  width: t.width,
-                  maxHeight: t.maxHeight,
-                  transform: t.direction === "up" ? "translateY(-100%)" : void 0
-                },
-                children: y.map((e) => /* @__PURE__ */ i(
-                  "button",
+          /* @__PURE__ */ r(m.Trigger, { children: /* @__PURE__ */ s(
+            "button",
+            {
+              id: a,
+              type: "button",
+              className: t.trigger,
+              disabled: o,
+              "aria-expanded": v && !o,
+              "aria-haspopup": "listbox",
+              "aria-controls": v && !o ? `${a}-options` : void 0,
+              "aria-invalid": c ? !0 : void 0,
+              "aria-describedby": c ? `${a}-error` : void 0,
+              children: [
+                _(i, N),
+                b && !(i && S) && /* @__PURE__ */ r(
+                  D,
                   {
-                    role: "option",
-                    "aria-selected": h?.value === e.value,
-                    onClick: () => D(e),
-                    type: "button",
-                    className: h?.value === e.value ? o.active : void 0,
-                    children: /* @__PURE__ */ p(M, { alignItems: "center", children: [
-                      e.icon,
-                      e.label ?? String(e.value ?? "")
-                    ] })
-                  },
-                  `${typeof e.value}:${String(e.value)}`
-                ))
-              }
-            ),
-            t.portalTarget ?? document.body
+                    size: T[p],
+                    className: t.arrow,
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ) }),
+          i && S && /* @__PURE__ */ r(
+            k,
+            {
+              size: p,
+              color: "secondary",
+              onClick: F,
+              className: t.clear,
+              disabled: o,
+              "aria-label": $.clear,
+              children: /* @__PURE__ */ r(E, {})
+            }
+          ),
+          /* @__PURE__ */ r(
+            m.Content,
+            {
+              container: u.current?.closest("dialog"),
+              role: "listbox",
+              align: "start",
+              sideOffset: 4,
+              id: `${a}-options`,
+              "aria-label": f ?? N,
+              className: t.dropdown,
+              children: g.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  role: "option",
+                  "aria-selected": i?.value === e.value,
+                  onClick: () => I(e),
+                  type: "button",
+                  className: i?.value === e.value ? t.active : void 0,
+                  children: /* @__PURE__ */ s(j, { alignItems: "center", children: [
+                    e.icon,
+                    e.label ?? String(e.value ?? "")
+                  ] })
+                },
+                `${typeof e.value}:${String(e.value)}`
+              ))
+            }
           )
         ]
       }
-    ) }),
-    v && /* @__PURE__ */ i(w.Error, { id: `${u}-error`, error: v })
-  ] });
+    ) }) }),
+    c && /* @__PURE__ */ r(d.Error, { id: `${a}-error`, error: c })
+  ] }) });
 };
 export {
-  ie as Select
+  U as Select
 };