@voxel51/voodo 0.0.8 → 0.0.9

package/dist/index.js

@@ -18475,67 +18475,79 @@ const Af = ({
   }
 ) });
 Af.displayName = "Option";
-const Eg = ({
-  className: e,
-  disabled: r,
-  exclusive: n,
-  onChange: t,
-  options: o,
-  value: a,
-  ...i
+var Eg = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomStart = "bottom start", e.BottomEnd = "bottom end", e.Top = "top", e.TopStart = "top start", e.TopEnd = "top end", e))(Eg || {});
+const kg = ({
+  anchor: e = "bottom start",
+  className: r,
+  disabled: n,
+  exclusive: t,
+  onChange: o,
+  options: a,
+  portal: i,
+  value: s,
+  ...l
 }) => {
-  const [s, l] = ne(!1), [c, u] = ne(() => []);
+  const [c, u] = ne(!1), [d, p] = ne(() => []);
   re(() => {
-    a && a.length > 0 && u([...a]);
-  }, [a]);
-  const d = U(
-    (f) => {
-      f && u(typeof f == "string" ? [f] : [...f]), t?.(f);
+    s && s.length > 0 && p([...s]);
+  }, [s]);
+  const f = U(
+    (m) => {
+      m && p(typeof m == "string" ? [m] : [...m]), t && u(!1), o?.(m);
     },
-    [t]
-  ), p = U(
-    (f) => f && f.length > 0 ? typeof f == "string" ? o?.find((h) => h.id === f)?.data.label ?? "" : f.map((h) => o?.find((m) => m.id === h)?.data.label).filter((h) => !!h).join(", ") : "",
-    [o]
+    [o, t]
+  ), h = U(
+    (m) => m && m.length > 0 ? typeof m == "string" ? a?.find((v) => v.id === m)?.data.label ?? "" : m.map((v) => a?.find((g) => g.id === v)?.data.label).filter((v) => !!v).join(", ") : "",
+    [a]
   );
-  return /* @__PURE__ */ P("div", { className: e, ...i, children: /* @__PURE__ */ Me(
+  return /* @__PURE__ */ P("div", { className: A(r, "w-full"), ...l, children: /* @__PURE__ */ Me(
     X2,
     {
-      disabled: r,
-      value: a,
-      onChange: d,
-      multiple: !n,
+      disabled: n,
+      value: s,
+      onChange: f,
+      multiple: !t,
       children: [
         /* @__PURE__ */ P(
           ad,
           {
-            displayValue: p,
-            onFocus: () => l(!0),
-            onBlur: () => l(!1),
-            className: lf({ disabled: r })
+            displayValue: h,
+            onFocus: () => u(!0),
+            onBlur: () => u(!1),
+            className: A(lf({ disabled: n }), "w-full")
           }
         ),
         /* @__PURE__ */ P(
           id,
           {
-            static: s,
-            anchor: "bottom",
-            className: A("mt-1", at(Le.Md)),
-            children: o?.map((f) => /* @__PURE__ */ P(
-              Af,
-              {
-                value: f.id,
-                selected: (a ?? c).includes(f.id),
-                children: /* @__PURE__ */ P(nt, { children: f.data.content ?? f.data.label })
-              },
-              f.id
-            ))
+            static: c,
+            anchor: e,
+            portal: i,
+            className: A(
+              "mt-1",
+              "w-[var(--anchor-width)]",
+              i && "z-[var(--z-above-modal)]",
+              at(Le.Md)
+            ),
+            children: a?.map((m) => {
+              const v = s ?? d, g = Array.isArray(v) ? v.includes(m.id) : v === m.id;
+              return /* @__PURE__ */ P(
+                Af,
+                {
+                  value: m.id,
+                  selected: g,
+                  children: /* @__PURE__ */ P(nt, { children: m.data.content ?? m.data.label })
+                },
+                m.id
+              );
+            })
           }
         )
       ]
     }
   ) });
 };
-Eg.displayName = "Select";
+kg.displayName = "Select";
 const bs = ({
   position: e,
   onDragStart: r,
@@ -18679,8 +18691,8 @@ const $f = ({
   );
 };
 $f.displayName = "SliderBar";
-const kg = (e, r, n) => (e - r) / (n - r), Bi = ({ max: e, min: r, value: n, threshold: t = 0.1 }) => {
-  const o = kg(n, r, e);
+const Mg = (e, r, n) => (e - r) / (n - r), Bi = ({ max: e, min: r, value: n, threshold: t = 0.1 }) => {
+  const o = Mg(n, r, e);
   return o < t || 1 - o < t ? null : /* @__PURE__ */ P(
     nt,
     {
@@ -18717,13 +18729,13 @@ const kg = (e, r, n) => (e - r) / (n - r), Bi = ({ max: e, min: r, value: n, thr
   }
 );
 Hf.displayName = "SliderLabels";
-const Mg = (e) => e != null, Pg = (e) => {
-  if (!Mg(e))
+const Pg = (e) => e != null, Og = (e) => {
+  if (!Pg(e))
     return !1;
   const r = Number.parseFloat(e.toString());
   return Number.isFinite(r);
 }, y1 = (e, r) => (n) => {
-  if (!Pg(n))
+  if (!Og(n))
     return !1;
   const t = n.toString();
   return Number.parseFloat(t) >= e && Number.parseFloat(t) <= r;
@@ -18820,7 +18832,7 @@ const Mg = (e) => e != null, Pg = (e) => {
       ]
     }
   );
-}, Og = ({
+}, _g = ({
   onChange: e,
   max: r,
   min: n,
@@ -18834,7 +18846,7 @@ const Mg = (e) => e != null, Pg = (e) => {
     multi: !1,
     onChange: e
   }
-), _g = ({
+), Tg = ({
   onChange: e,
   max: r,
   min: n,
@@ -18850,8 +18862,8 @@ const Mg = (e) => e != null, Pg = (e) => {
   }
 );
 xl.displayName = "BaseSlider";
-Og.displayName = "SingleValueSlider";
-_g.displayName = "MultiValueSlider";
+_g.displayName = "SingleValueSlider";
+Tg.displayName = "MultiValueSlider";
 const Yf = ({ className: e, ...r }) => /* @__PURE__ */ Me(
   "svg",
   {
@@ -18884,12 +18896,12 @@ const Yf = ({ className: e, ...r }) => /* @__PURE__ */ Me(
   }
 );
 Yf.displayName = "SpinnerIcon";
-const Tg = {
+const Lg = {
   [B.Xs]: "size-3",
   [B.Sm]: "size-4",
   [B.Md]: "size-5",
   [B.Lg]: "size-6"
-}, Lg = ({
+}, Rg = ({
   className: e,
   size: r = B.Md,
   ...n
@@ -18897,7 +18909,7 @@ const Tg = {
   "div",
   {
     className: he(
-      Tg[r],
+      Lg[r],
       ke(Ce.Primary),
       e
     ),
@@ -18905,18 +18917,18 @@ const Tg = {
     children: /* @__PURE__ */ P(Yf, { className: "animate-spin" })
   }
 );
-Lg.displayName = "Spinner";
-const Rg = {
+Rg.displayName = "Spinner";
+const Ng = {
   [B.Xs]: A("px-2.5 py-1.5", "text-xs/5"),
   [B.Sm]: A("px-3 py-2", "text-sm/6"),
   [B.Md]: A("px-3.5 py-2.5", "text-md/7"),
   [B.Lg]: A("px-4 py-3", "text-lg/9")
-}, Ng = {
+}, Ig = {
   none: "resize-none",
   vertical: "resize-y",
   horizontal: "resize-x",
   both: "resize"
-}, Ig = ({
+}, Fg = ({
   size: e = B.Md,
   radius: r = Le.Sm,
   error: n = !1,
@@ -18950,27 +18962,27 @@ const Rg = {
       "disabled:bg-content-bg-muted",
       n && "border-semantic-destructive",
       n && "focus:ring-semantic-destructive",
-      Rg[e],
+      Ng[e],
       at(r),
-      Ng[t],
+      Ig[t],
       a
     ),
     ...l
   }
 ) });
-Ig.displayName = "TextArea";
-const Fg = ({
+Fg.displayName = "TextArea";
+const Ag = ({
   color: e = ur.Brand,
   children: r,
   ...n
 }) => /* @__PURE__ */ P(nt, { color: e, variant: Oe.Label, ...n, children: r });
-Fg.displayName = "TextBadge";
-const Ag = {
+Ag.displayName = "TextBadge";
+const $g = {
   [ft.Primary]: ke(Ce.Primary),
   [ft.Secondary]: ke(Ce.Secondary),
   [ft.Success]: ke(ur.Success),
   [ft.Danger]: ke(ur.Destructive)
-}, cb = ({
+}, ub = ({
   action: e,
   anchor: r = je.Bottom,
   className: n,
@@ -18994,7 +19006,7 @@ const Ag = {
     ),
     ...l,
     children: [
-      o && /* @__PURE__ */ P("span", { className: A("size-5", Ag[s]), children: /* @__PURE__ */ P(o, {}) }),
+      o && /* @__PURE__ */ P("span", { className: A("size-5", $g[s]), children: /* @__PURE__ */ P(o, {}) }),
       /* @__PURE__ */ Me("div", { className: "flex items-center gap-x-xl", children: [
         /* @__PURE__ */ Me("div", { className: "flex flex-col", children: [
           i && /* @__PURE__ */ P(nt, { className: "font-semibold", children: i }),
@@ -19004,16 +19016,16 @@ const Ag = {
       ] })
     ]
   }
-) }), $g = {
+) }), Hg = {
   [B.Sm]: he("w-8 h-4"),
   [B.Md]: he("w-9 h-5")
-}, Hg = {
+}, Yg = {
   [B.Sm]: he("w-3 h-3"),
   [B.Md]: he("w-4 h-4")
-}, Yg = {
+}, Vg = {
   [B.Sm]: ba[Oe.Sm],
   [B.Md]: ba[Oe.Md]
-}, Vg = (e) => {
+}, Bg = (e) => {
   switch (e) {
     case B.Sm:
       return "group-data-checked:translate-x-[calc(2.3rem-1rem-0.28rem)]";
@@ -19022,7 +19034,7 @@ const Ag = {
     default:
       return "";
   }
-}, Bg = ({
+}, Wg = ({
   checked: e = !1,
   disabled: r = !1,
   onChange: n = void 0,
@@ -19062,7 +19074,7 @@ const Ag = {
         // when checked
         "data-checked:bg-action-primary-primary",
         "data-checked:border-action-primary-primary",
-        $g[t],
+        Hg[t],
         at(Le.Full),
         // intentionally require Full radius
         o
@@ -19082,8 +19094,8 @@ const Ag = {
             // show focus on outside of track
             "transition-transform",
             "translate-x-0.5",
-            Hg[t],
-            Vg(t)
+            Yg[t],
+            Bg(t)
           )
         }
       )
@@ -19094,7 +19106,7 @@ const Ag = {
     {
       className: he(
         ke(Ce.Muted),
-        Yg[t],
+        Vg[t],
         "cursor-pointer",
         a
       ),
@@ -19102,21 +19114,21 @@ const Ag = {
     }
   )
 ] });
-Bg.displayName = "Toggle";
-var Wg = /* @__PURE__ */ ((e) => (e.Default = "default", e.Soft = "soft", e.Full = "full", e.Borderless = "borderless", e))(Wg || {});
-const zg = {
+Wg.displayName = "Toggle";
+var zg = /* @__PURE__ */ ((e) => (e.Default = "default", e.Soft = "soft", e.Full = "full", e.Borderless = "borderless", e))(zg || {});
+const jg = {
   [B.Xs]: A(Ht(Oe.Xs), "min-w-5 min-h-5"),
   [B.Sm]: A(Ht(Oe.Sm), "min-w-6 min-h-6"),
   [B.Md]: A(Ht(Oe.Md), "min-w-7 min-h-7")
-}, jg = {
+}, Ug = {
   [B.Xs]: A("min-w-5 min-h-5"),
   [B.Sm]: A("min-w-6 min-h-6"),
   [B.Md]: A("min-w-7 min-h-7")
-}, Ug = {
+}, Zg = {
   [B.Xs]: A("py-1 px-3"),
   [B.Sm]: A("py-1.5 px-3.75"),
   [B.Md]: A("py-2 px-4")
-}, Zg = {
+}, Kg = {
   soft: A(
     "m-1",
     "py-1 px-1.5",
@@ -19136,10 +19148,10 @@ const zg = {
     ke(Ce.Primary, fe.Selected),
     "data-[selected]:border-b-2"
   )
-}, Kg = (e, r, n) => e === "soft" || e === "borderless" ? "" : r && n ? "rounded-md" : r ? "rounded-l-md" : n ? "rounded-r-md" : "", Gg = (e, r) => {
-  const n = [Zg[e], zg[r]];
-  return e !== "soft" ? n.push(Ug[r]) : n.push(jg[r]), A(...n);
-}, Qg = ({
+}, Gg = (e, r, n) => e === "soft" || e === "borderless" ? "" : r && n ? "rounded-md" : r ? "rounded-l-md" : n ? "rounded-r-md" : "", Qg = (e, r) => {
+  const n = [Kg[e], jg[r]];
+  return e !== "soft" ? n.push(Zg[r]) : n.push(Ug[r]), A(...n);
+}, qg = ({
   tabs: e,
   variant: r = "default",
   defaultIndex: n = 0,
@@ -19177,8 +19189,8 @@ const zg = {
               ke(Ce.Primary, fe.Hover),
               Ee(pt.Card2, fe.Selected),
               "data-[focus]:outline-none",
-              Kg(r, p, f),
-              Gg(r, o)
+              Gg(r, p, f),
+              Qg(r, o)
             ),
             children: u.label
           },
@@ -19189,18 +19201,18 @@ const zg = {
   ),
   /* @__PURE__ */ P(xd, { className: he(s), children: e.map(({ id: c, data: u }) => /* @__PURE__ */ P(Dd, { className: he("focus:outline-none"), children: u.content }, c)) })
 ] });
-Qg.displayName = "ToggleSwitch";
-const qg = {
+qg.displayName = "ToggleSwitch";
+const Xg = {
   [je.Top]: "-translate-y-2",
   [je.Right]: "translate-x-4",
   [je.Bottom]: "translate-y-2",
   [je.Left]: "-translate-x-4"
-}, Xg = {
+}, Jg = {
   [je.Top]: "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
   [je.Right]: "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2",
   [je.Bottom]: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
   [je.Left]: "right-0 top-1/2 translate-x-1/2 -translate-y-1/2"
-}, Jg = ({ anchor: e }) => /* @__PURE__ */ P(
+}, eb = ({ anchor: e }) => /* @__PURE__ */ P(
   "div",
   {
     className: A(
@@ -19208,10 +19220,10 @@ const qg = {
       "w-2 h-2",
       "rotate-45",
       "bg-inherit",
-      Xg[e]
+      Jg[e]
     )
   }
-), eb = ({
+), tb = ({
   anchor: e = je.Top,
   content: r,
   children: n,
@@ -19242,19 +19254,19 @@ const qg = {
           "!overflow-visible",
           Ee(pt.Card2),
           at(Le.Sm),
-          qg[e],
+          Xg[e],
           t
         ),
         children: [
           /* @__PURE__ */ P("div", { className: "max-w-[500px] break-words", children: r }),
-          /* @__PURE__ */ P(Jg, { anchor: e })
+          /* @__PURE__ */ P(eb, { anchor: e })
         ]
       }
     )
   ] });
 };
-eb.displayName = "Tooltip";
-const tb = (e) => ({
+tb.displayName = "Tooltip";
+const nb = (e) => ({
   components: {
     MuiButtonBase: {
       defaultProps: {
@@ -19357,7 +19369,7 @@ const tb = (e) => ({
       }
     }
   }
-}), nb = {
+}), rb = {
   dark: {
     content: {
       bg: {
@@ -19421,7 +19433,7 @@ const tb = (e) => ({
   mode: e = "dark",
   overrides: r = {}
 } = {}) => {
-  const { light: n, dark: t } = nb, o = e === "light" ? n : t, a = {
+  const { light: n, dark: t } = rb, o = e === "light" ? n : t, a = {
     palette: {
       mode: e,
       primary: {
@@ -19475,7 +19487,7 @@ const tb = (e) => ({
       }
     },
     spacing: (s) => `${s * 0.25}rem`
-  }, i = tb(a);
+  }, i = nb(a);
   return {
     ...a,
     ...i,
@@ -19486,7 +19498,7 @@ const tb = (e) => ({
       ...r.components
     }
   };
-}, ub = Vf({ mode: "dark" }), db = Vf({ mode: "light" });
+}, db = Vf({ mode: "dark" }), fb = Vf({ mode: "light" });
 export {
   qe as ActionColor,
   Kp as ActivityToast,
@@ -19511,7 +19523,7 @@ export {
   fs as Input,
   k9 as InputType,
   cf as ListItem,
-  _g as MultiValueSlider,
+  Tg as MultiValueSlider,
   dr as Orientation,
   O9 as Pill,
   df as Radio,
@@ -19520,36 +19532,37 @@ export {
   ff as RichButton,
   F9 as RichButtonGroup,
   Sg as RichList,
-  Eg as Select,
+  kg as Select,
+  Eg as SelectAnchor,
   E1 as SemanticColor,
   nr as Shadow,
-  Og as SingleValueSlider,
+  _g as SingleValueSlider,
   B as Size,
   Tt as Spacing,
-  Lg as Spinner,
+  Rg as Spinner,
   _o as Stack,
   ep as StatusColor,
   nt as Text,
-  Ig as TextArea,
-  Fg as TextBadge,
+  Fg as TextArea,
+  Ag as TextBadge,
   Ce as TextColor,
   Oe as TextVariant,
-  cb as Toast,
+  ub as Toast,
   Ss as ToastContainer,
-  Bg as Toggle,
-  Qg as ToggleSwitch,
-  Wg as ToggleSwitchVariant,
-  eb as Tooltip,
+  Wg as Toggle,
+  qg as ToggleSwitch,
+  zg as ToggleSwitchVariant,
+  tb as Tooltip,
   ft as Variant,
   Ee as bgColorClass,
   Ye as borderColorClass,
   Vf as createMUIThemeConfig,
-  ub as defaultMUIThemeConfig,
+  db as defaultMUIThemeConfig,
   Ds as getColorCssVar,
-  tb as getComponentThemeConfig,
+  nb as getComponentThemeConfig,
   _8 as iconMap,
   lf as inputStyle,
-  db as lightMUIThemeConfig,
+  fb as lightMUIThemeConfig,
   ke as textColorClass,
   xs as withElementState
 };