@new-black/lyra 0.1.16 → 0.1.19

package/dist/lyra21.js

@@ -1,416 +1,437 @@
 import { j as s } from "./lyra54.js";
-import { useState as S, useRef as R, useCallback as V } from "react";
-import { Label as W } from "./lyra53.js";
+import { useState as N, useRef as V, useCallback as D } from "react";
+import { Label as X } from "./lyra53.js";
+import { twMerge as T } from "./lyra55.js";
 import "./lyra2.js";
-import { cx as M } from "./lyra100.js";
-import "./lyra104.js";
-import { Text as y } from "./lyra43.js";
-import "./lyra105.js";
-import "./lyra106.js";
-import "./lyra108.js";
+import { cx as P } from "./lyra99.js";
+import "./lyra100.js";
+import { Text as M } from "./lyra43.js";
+import "./lyra101.js";
+import "./lyra102.js";
+import "./lyra103.js";
 import "./lyra8.js";
-import { buttonStyles as X } from "./lyra9.js";
+import { buttonStyles as Y } from "./lyra9.js";
 import "./lyra10.js";
 import "./lyra11.js";
-import "./lyra116.js";
+import "./lyra105.js";
 import "./lyra13.js";
 import "./lyra26.js";
-import { SvgIcon as B } from "./lyra39.js";
+import { SvgIcon as O } from "./lyra39.js";
 import "./lyra16.js";
 import "./lyra18.js";
 import "./lyra19.js";
 import "./lyra28.js";
-import { listBoxStyles as Y } from "./lyra29.js";
-import { listBoxItemStyles as Z } from "./lyra155.js";
-import { Popover as _ } from "./lyra30.js";
+import { listBoxStyles as Z } from "./lyra29.js";
+import { listBoxItemStyles as _ } from "./lyra150.js";
+import { Popover as z } from "./lyra30.js";
 import "./lyra32.js";
-import "./lyra117.js";
-import { sharedInputFieldWrapperStyles as D, sharedInputlabelStyles as z, sharedInputHintStyles as C, sharedInputFieldStyles as T } from "./lyra22.js";
-import { TagGroup as K, TagItem as ss } from "./lyra156.js";
+import "./lyra107.js";
+import { sharedInputFieldWrapperStyles as G, sharedInputlabelStyles as C, sharedInputHintStyles as K, sharedInputFieldStyles as U } from "./lyra22.js";
+import { TagGroup as ss, TagItem as es } from "./lyra151.js";
+import "react-dom";
 import "./lyra23.js";
-import "./lyra118.js";
+import "./lyra110.js";
 import "./lyra25.js";
 import "./lyra27.js";
-import "./lyra112.js";
+import "./lyra111.js";
 import "./lyra40.js";
-import "./lyra114.js";
+import "./lyra109.js";
 import "./lyra42.js";
-import "./lyra151.js";
+import "./lyra144.js";
 import "./lyra49.js";
 import "./lyra58.js";
 import "./lyra51.js";
-import { Listbox as b } from "./lyra158.js";
-import { twMerge as G } from "./lyra55.js";
-import { useLocale as U } from "./lyra52.js";
-const q = (r) => M(
-  r === "small" && "min-h-[42px]",
-  r === "medium" && "min-h-[50px]",
-  r === "large" && "min-h-[58px]"
-), A = ({ label: r, optionalLabel: t, isRequired: o }) => /* @__PURE__ */ s.jsxs("div", { className: M("flex items-center gap-3", r ? "justify-between" : "justify-end"), children: [
+import { Listbox as y } from "./lyra153.js";
+import { useLocale as q } from "./lyra52.js";
+const A = (e) => P(
+  e === "small" && "min-h-[42px]",
+  e === "medium" && "min-h-[50px]",
+  e === "large" && "min-h-[58px]"
+), J = ({ isRequired: e, label: r, optionalLabel: l }) => /* @__PURE__ */ s.jsxs("div", { className: P("flex items-center gap-3", r ? "justify-between" : "justify-end"), children: [
   r ? /* @__PURE__ */ s.jsx(
-    W,
+    X,
     {
-      className: z(),
+      className: C(),
       style: { fontFamily: "var(--input-label-font-family)" },
       children: r
     }
   ) : null,
-  o === !1 ? /* @__PURE__ */ s.jsx(
+  e === !1 ? /* @__PURE__ */ s.jsx(
     "span",
     {
-      className: C(),
+      className: K(),
       style: { fontFamily: "var(--input-hint-font-family)" },
-      children: t
+      children: l
     }
   ) : null
-] }), J = ({ description: r, errorMessage: t }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-  r && /* @__PURE__ */ s.jsx(y, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: r }),
-  t && /* @__PURE__ */ s.jsx(y, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: t })
+] }), Q = ({ description: e, errorMessage: r }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  e && /* @__PURE__ */ s.jsx(M, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: e }),
+  r && /* @__PURE__ */ s.jsx(M, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: r })
 ] }), rs = ({
-  item: r,
-  state: t,
-  renderItem: o,
-  itemLabelKey: p
+  item: e,
+  itemLabelKey: r,
+  renderItem: l,
+  state: p
 }) => {
-  const a = r == null ? void 0 : r[p];
-  return o ? o(r, t) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
-    t.selected ? /* @__PURE__ */ s.jsx(B, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
+  const a = e == null ? void 0 : e[r];
+  return l ? l(e, p) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+    p.selected ? /* @__PURE__ */ s.jsx(O, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
     a
   ] });
-}, Q = ({
-  direction: r,
-  disabledItemIdKeys: t,
-  itemIdKey: o,
+}, W = ({
+  direction: e,
+  disabledItemIdKeys: r,
+  itemIdKey: l,
   itemLabelKey: p,
   items: a,
-  open: j,
-  renderItem: h,
-  triggerRef: c
+  open: c,
+  setOpen: d,
+  renderItem: f,
+  triggerRef: j
 }) => {
-  var d;
+  var u;
   return /* @__PURE__ */ s.jsx(
-    _,
+    z,
     {
-      className: "!max-h-96 pb-2",
-      isOpen: j,
-      triggerRef: c,
-      showPopoverInBottomDrawerOnSmallScreens: !0,
+      className: "lyra-list-box pb-2",
+      isOpen: c,
+      triggerRef: j,
+      showPopoverInDrawerOnSmallScreens: !0,
+      onOpenChange: d,
       shouldUpdatePosition: !0,
       style: {
-        "--trigger-width": ((d = c.current) == null ? void 0 : d.offsetWidth) + "px",
-        direction: r
+        "--trigger-width": ((u = j.current) == null ? void 0 : u.offsetWidth) + "px",
+        direction: e
       },
-      children: a && a.length ? /* @__PURE__ */ s.jsx(b.Options, { static: !0, className: Y(), children: a.map((e) => /* @__PURE__ */ s.jsx(
-        b.Option,
+      children: a && a.length ? /* @__PURE__ */ s.jsx(
+        y.Options,
         {
-          className: ({ active: l, selected: i, disabled: n }) => G(
-            Z({
-              active: l,
-              disabled: n,
-              selected: i
-            })
-          ),
-          value: e,
-          disabled: t == null ? void 0 : t.includes(e == null ? void 0 : e[o]),
-          children: (l) => /* @__PURE__ */ s.jsx(
-            rs,
+          static: !0,
+          className: Z({
+            className: "h-full max-h-[85dvh] overflow-y-auto sm:max-h-80"
+          }),
+          children: a.map((n) => /* @__PURE__ */ s.jsx(
+            y.Option,
             {
-              item: e,
-              state: l,
-              renderItem: h,
-              itemLabelKey: p
-            }
-          )
-        },
-        e[o]
-      )) }) : null
+              className: ({ active: t, disabled: h, selected: m }) => T(
+                _({
+                  active: t,
+                  disabled: h,
+                  selected: m,
+                  className: "hover:bg-[--list-box-item-bg-color-active]"
+                })
+              ),
+              value: n,
+              disabled: r == null ? void 0 : r.includes(n == null ? void 0 : n[l]),
+              children: (t) => /* @__PURE__ */ s.jsx(
+                rs,
+                {
+                  item: n,
+                  state: t,
+                  renderItem: f,
+                  itemLabelKey: p
+                }
+              )
+            },
+            n[l]
+          ))
+        }
+      ) : null
     }
   );
-}, es = ({
-  endSlot: r,
-  fullWidth: t,
-  isDisabled: o,
+}, ts = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: l,
   isInvalid: p,
-  open: a,
-  itemLabelKey: j,
-  placeholder: h,
-  size: c = "medium",
-  startSlot: d,
-  value: e,
-  onChange: l
+  itemLabelKey: a,
+  onChange: c,
+  open: d,
+  setOpen: f,
+  placeholder: j,
+  size: u = "medium",
+  startSlot: n,
+  value: t
 }) => {
-  const [i, n] = S(!1), [v, u] = S(!1), N = (m) => {
-    (m.key === "Escape" || m.key === "Backspace") && (l == null || l(void 0));
+  const [h, m] = N(!1), [b, o] = N(!1), S = (i) => {
+    i.key === "Escape" || i.key === "Backspace" ? c == null || c(void 0) : (i.key === "Enter" || i.key === " ") && f(!0);
   };
   return /* @__PURE__ */ s.jsxs(
-    b.Button,
+    y.Button,
     {
-      className: T({
-        fullWidth: t,
-        isDisabled: o,
-        isHovered: v,
-        isFocused: i,
+      className: U({
+        fullWidth: r,
+        isDisabled: l,
+        isHovered: b,
+        isFocused: h,
         isInvalid: p,
-        size: c,
-        className: q(c)
+        size: u,
+        className: A(u)
       }),
-      onPointerEnter: () => u(!0),
-      onPointerLeave: () => u(!1),
-      onMouseEnter: () => u(!0),
-      onMouseLeave: () => u(!1),
+      onPointerEnter: () => o(!0),
+      onPointerLeave: () => o(!1),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
       onFocus: () => {
-        n(!0);
+        m(!0);
       },
       onBlur: () => {
-        n(!1);
+        m(!1);
       },
-      onKeyDown: N,
+      onKeyDown: S,
+      onClick: () => f(!0),
       children: [
-        d,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: e != null && e[j] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: e == null ? void 0 : e[j] }) : /* @__PURE__ */ s.jsx(y, { color: "secondary", children: h }) }),
-        r,
+        n,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: t != null && t[a] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: t == null ? void 0 : t[a] }) : /* @__PURE__ */ s.jsx(M, { color: "secondary", children: j }) }),
+        e,
         /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-          e ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
+          t ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
             "div",
             {
-              className: G(
-                X({
+              className: T(
+                Y({
                   size: "small",
                   color: "monochrome",
                   variant: "ghost",
                   className: "p-1",
-                  isDisabled: o
+                  isDisabled: l
                 })
               ),
-              onClick: (m) => {
-                m.stopPropagation(), l == null || l(void 0);
+              onClick: (i) => {
+                i.stopPropagation(), c == null || c(void 0);
               },
-              children: /* @__PURE__ */ s.jsx(B, { name: "cross", className: "h-4 w-4" })
+              children: /* @__PURE__ */ s.jsx(O, { name: "cross", className: "h-4 w-4" })
             }
           ) }) : null,
           /* @__PURE__ */ s.jsx(
-            B,
+            O,
             {
               name: "chevron-down",
-              className: M("h-4 w-4 transition duration-150", a && "rotate-180")
+              className: P("h-4 w-4 transition duration-150", d && "rotate-180")
             }
           )
         ] })
       ]
     }
   );
-}, ts = ({
-  endSlot: r,
-  fullWidth: t,
-  isDisabled: o,
+}, os = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: l,
   isInvalid: p,
-  open: a,
-  itemLabelKey: j,
-  itemIdKey: h,
-  placeholder: c,
-  size: d = "medium",
-  label: e,
-  startSlot: l,
-  onChange: i,
-  value: n
+  itemIdKey: a,
+  itemLabelKey: c,
+  label: d,
+  onChange: f,
+  open: j,
+  setOpen: u,
+  placeholder: n,
+  size: t = "medium",
+  startSlot: h,
+  value: m
 }) => {
-  const [v, u] = S(!1), [N, m] = S(!1);
+  const [b, o] = N(!1), [S, i] = N(!1);
   return /* @__PURE__ */ s.jsxs(
-    b.Button,
+    y.Button,
     {
-      className: T({
-        fullWidth: t,
-        isDisabled: o,
-        isHovered: N,
-        isFocused: v,
+      className: U({
+        fullWidth: r,
+        isDisabled: l,
+        isHovered: S,
+        isFocused: b,
         isInvalid: p,
-        size: d,
-        className: q(d)
+        size: t,
+        className: A(t)
       }),
       as: "div",
       role: "button",
       tabIndex: 0,
-      onPointerEnter: () => m(!0),
-      onPointerLeave: () => m(!1),
-      onMouseEnter: () => m(!0),
-      onMouseLeave: () => m(!1),
+      onPointerEnter: () => i(!0),
+      onPointerLeave: () => i(!1),
+      onMouseEnter: () => i(!0),
+      onMouseLeave: () => i(!1),
       onFocus: () => {
-        u(!0);
+        o(!0);
       },
       onBlur: () => {
-        u(!1);
+        o(!1);
       },
+      onClick: () => u(!0),
       children: [
-        l,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: n && n.length ? /* @__PURE__ */ s.jsx(
-          K,
+        h,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: m && m.length ? /* @__PURE__ */ s.jsx(
+          ss,
           {
-            "aria-label": e ?? "Selected items",
+            "aria-label": d ?? "Selected items",
             onRemove: (x) => {
-              n && i(n.filter((F) => !x.has(F[h])));
+              m && f(m.filter((F) => !x.has(F[a])));
             },
-            children: n.map((x) => /* @__PURE__ */ s.jsx(ss, { ...x, children: x == null ? void 0 : x[j] }, x[h]))
+            children: m.map((x) => /* @__PURE__ */ s.jsx(es, { ...x, children: x == null ? void 0 : x[c] }, x[a]))
           }
-        ) : /* @__PURE__ */ s.jsx(y, { color: "secondary", children: c }) }),
-        r,
+        ) : /* @__PURE__ */ s.jsx(M, { color: "secondary", children: n }) }),
+        e,
         /* @__PURE__ */ s.jsx(
-          B,
+          O,
           {
             name: "chevron-down",
-            className: M("h-4 w-4 min-w-[16px] transition duration-150", a && "rotate-180")
+            className: P("h-4 w-4 min-w-[16px] transition duration-150", j && "rotate-180")
           }
         )
       ]
     }
   );
-}, Ys = ({
-  isDisabled: r,
-  isRequired: t,
-  label: o,
-  optionalLabel: p = "Optional",
-  description: a,
-  errorMessage: j,
-  isInvalid: h,
-  fullWidth: c = !0,
-  by: d,
-  defaultValue: e,
-  name: l,
-  onChange: i,
-  itemLabelKey: n,
-  itemIdKey: v,
-  value: u,
-  size: N = "medium",
-  startSlot: m,
-  items: x,
-  endSlot: F,
-  disabledItemIdKeys: P,
-  placeholder: k,
-  renderItem: H
+}, _s = ({
+  by: e,
+  defaultValue: r,
+  description: l,
+  disabledItemIdKeys: p,
+  endSlot: a,
+  errorMessage: c,
+  fullWidth: d = !0,
+  isDisabled: f,
+  isInvalid: j,
+  isRequired: u,
+  itemIdKey: n,
+  itemLabelKey: t,
+  items: h,
+  label: m,
+  name: b,
+  onChange: o,
+  optionalLabel: S = "Optional",
+  placeholder: i,
+  renderItem: x,
+  size: F = "medium",
+  startSlot: E,
+  value: H
 }) => {
-  const [E, O] = S(u ?? e), g = R(null), { direction: $ } = U(), w = V(
-    (f) => {
-      O(f), i == null || i(f);
+  const [$, I] = N(H ?? r), [w, g] = N(!1), k = V(null), { direction: L } = q(), B = D(
+    (v) => {
+      I(v), o == null || o(v), g(!1);
     },
-    [i]
+    [o]
   );
   return /* @__PURE__ */ s.jsx(
-    b,
+    y,
     {
-      disabled: r,
-      name: l,
-      by: d,
-      onChange: w,
-      value: E ?? "",
-      children: ({ open: f, disabled: I, value: L }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: D({ fullWidth: c }), children: [
-          /* @__PURE__ */ s.jsx(A, { label: o, optionalLabel: p, isRequired: t }),
-          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
-            es,
+      disabled: f,
+      name: b,
+      by: e,
+      onChange: B,
+      value: $ ?? "",
+      children: ({ disabled: v, value: R }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: d }), children: [
+          /* @__PURE__ */ s.jsx(J, { label: m, optionalLabel: S, isRequired: u }),
+          /* @__PURE__ */ s.jsx("div", { ref: k, children: /* @__PURE__ */ s.jsx(
+            ts,
             {
-              endSlot: F,
-              fullWidth: c,
-              isDisabled: I,
-              isInvalid: h,
-              open: f,
-              placeholder: k,
-              size: N,
-              startSlot: m,
-              value: L,
-              itemLabelKey: n,
-              itemIdKey: v,
-              onChange: w
+              endSlot: a,
+              fullWidth: d,
+              isDisabled: v,
+              isInvalid: j,
+              open: w,
+              placeholder: i,
+              size: F,
+              startSlot: E,
+              value: R,
+              itemLabelKey: t,
+              itemIdKey: n,
+              onChange: B,
+              setOpen: g
             }
           ) }),
-          /* @__PURE__ */ s.jsx(J, { description: a, errorMessage: j })
+          /* @__PURE__ */ s.jsx(Q, { description: l, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          Q,
+          W,
           {
-            triggerRef: g,
-            itemIdKey: v,
-            itemLabelKey: n,
-            items: x,
-            open: f,
-            renderItem: H,
-            disabledItemIdKeys: P,
-            direction: $
+            triggerRef: k,
+            itemIdKey: n,
+            itemLabelKey: t,
+            items: h,
+            open: w,
+            setOpen: g,
+            renderItem: x,
+            disabledItemIdKeys: p,
+            direction: L
           }
         )
       ] })
     }
   );
-}, Zs = ({
-  isDisabled: r,
-  isRequired: t,
-  label: o,
-  optionalLabel: p = "Optional",
-  description: a,
-  errorMessage: j,
-  isInvalid: h,
-  fullWidth: c = !0,
-  by: d,
-  defaultValue: e,
-  name: l,
-  onChange: i,
-  itemLabelKey: n,
-  itemIdKey: v,
-  value: u,
-  size: N = "medium",
-  startSlot: m,
-  items: x,
-  endSlot: F,
-  disabledItemIdKeys: P,
-  placeholder: k,
-  renderItem: H
+}, zs = ({
+  by: e,
+  defaultValue: r,
+  description: l,
+  disabledItemIdKeys: p,
+  endSlot: a,
+  errorMessage: c,
+  fullWidth: d = !0,
+  isDisabled: f,
+  isInvalid: j,
+  isRequired: u,
+  itemIdKey: n,
+  itemLabelKey: t,
+  items: h,
+  label: m,
+  name: b,
+  onChange: o,
+  optionalLabel: S = "Optional",
+  placeholder: i,
+  renderItem: x,
+  size: F = "medium",
+  startSlot: E,
+  value: H
 }) => {
-  const [E, O] = S(u ?? e), g = R(null), { direction: $ } = U(), w = V(
-    (f) => {
-      O(f), i == null || i(f);
+  const [$, I] = N(H ?? r), [w, g] = N(!1), k = V(null), { direction: L } = q(), B = D(
+    (v) => {
+      I(v), o == null || o(v);
     },
-    [i]
+    [o]
   );
   return /* @__PURE__ */ s.jsx(
-    b,
+    y,
     {
-      disabled: r,
-      name: l,
-      by: d,
-      onChange: w,
+      disabled: f,
+      name: b,
+      by: e,
+      onChange: B,
       multiple: !0,
-      value: E ?? [],
-      children: ({ open: f, disabled: I, value: L }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: D({ fullWidth: c }), children: [
-          /* @__PURE__ */ s.jsx(A, { label: o, optionalLabel: p, isRequired: t }),
-          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
-            ts,
+      value: $ ?? [],
+      children: ({ disabled: v, value: R }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: d }), children: [
+          /* @__PURE__ */ s.jsx(J, { label: m, optionalLabel: S, isRequired: u }),
+          /* @__PURE__ */ s.jsx("div", { ref: k, children: /* @__PURE__ */ s.jsx(
+            os,
             {
-              endSlot: F,
-              fullWidth: c,
-              isDisabled: I,
-              isInvalid: h,
-              open: f,
-              placeholder: k,
-              size: N,
-              startSlot: m,
-              value: L,
-              itemLabelKey: n,
-              itemIdKey: v,
-              onChange: w
+              endSlot: a,
+              fullWidth: d,
+              isDisabled: v,
+              isInvalid: j,
+              open: w,
+              setOpen: g,
+              placeholder: i,
+              size: F,
+              startSlot: E,
+              value: R,
+              itemLabelKey: t,
+              itemIdKey: n,
+              onChange: B
             }
           ) }),
-          /* @__PURE__ */ s.jsx(J, { description: a, errorMessage: j })
+          /* @__PURE__ */ s.jsx(Q, { description: l, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          Q,
+          W,
           {
-            triggerRef: g,
-            itemIdKey: v,
-            itemLabelKey: n,
-            items: x,
-            open: f,
-            renderItem: H,
-            disabledItemIdKeys: P,
-            direction: $
+            triggerRef: k,
+            itemIdKey: n,
+            itemLabelKey: t,
+            items: h,
+            open: w,
+            setOpen: g,
+            renderItem: x,
+            disabledItemIdKeys: p,
+            direction: L
           }
         )
       ] })
@@ -418,6 +439,6 @@ const q = (r) => M(
   );
 };
 export {
-  Zs as MultiSelect,
-  Ys as Select
+  zs as MultiSelect,
+  _s as Select
 };