@new-black/lyra 0.1.17 → 0.1.19

package/dist/lyra21.js

@@ -1,195 +1,210 @@
 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 { twMerge as D } from "./lyra55.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 P } from "./lyra99.js";
+import "./lyra100.js";
+import { Text as M } from "./lyra43.js";
+import "./lyra101.js";
+import "./lyra102.js";
 import "./lyra103.js";
-import { Text as B } from "./lyra43.js";
-import "./lyra107.js";
-import "./lyra117.js";
-import "./lyra109.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 "./lyra127.js";
+import "./lyra105.js";
 import "./lyra13.js";
 import "./lyra26.js";
-import { SvgIcon as M } 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 "./lyra148.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 "./lyra128.js";
-import { sharedInputFieldWrapperStyles as T, sharedInputlabelStyles as z, sharedInputHintStyles as C, sharedInputFieldStyles as G } from "./lyra22.js";
-import { TagGroup as K, TagItem as ss } from "./lyra149.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 "./lyra129.js";
+import "./lyra110.js";
 import "./lyra25.js";
 import "./lyra27.js";
-import "./lyra106.js";
+import "./lyra111.js";
 import "./lyra40.js";
-import "./lyra116.js";
+import "./lyra109.js";
 import "./lyra42.js";
 import "./lyra144.js";
 import "./lyra49.js";
 import "./lyra58.js";
 import "./lyra51.js";
-import { Listbox as b } from "./lyra150.js";
-import { useLocale as U } from "./lyra52.js";
-const q = (r) => P(
-  r === "small" && "min-h-[42px]",
-  r === "medium" && "min-h-[50px]",
-  r === "large" && "min-h-[58px]"
-), A = ({ isRequired: r, label: e, optionalLabel: o }) => /* @__PURE__ */ s.jsxs("div", { className: P("flex items-center gap-3", e ? "justify-between" : "justify-end"), children: [
-  e ? /* @__PURE__ */ s.jsx(
-    W,
+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(
+    X,
     {
-      className: z(),
+      className: C(),
       style: { fontFamily: "var(--input-label-font-family)" },
-      children: e
+      children: r
     }
   ) : null,
-  r === !1 ? /* @__PURE__ */ s.jsx(
+  e === !1 ? /* @__PURE__ */ s.jsx(
     "span",
     {
-      className: C(),
+      className: K(),
       style: { fontFamily: "var(--input-hint-font-family)" },
-      children: o
+      children: l
     }
   ) : null
-] }), J = ({ description: r, errorMessage: e }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-  r && /* @__PURE__ */ s.jsx(B, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: r }),
-  e && /* @__PURE__ */ s.jsx(B, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: e })
+] }), 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,
-  itemLabelKey: e,
-  renderItem: o,
+  item: e,
+  itemLabelKey: r,
+  renderItem: l,
   state: p
 }) => {
-  const l = r == null ? void 0 : r[e];
-  return o ? o(r, p) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
-    p.selected ? /* @__PURE__ */ s.jsx(M, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
-    l
+  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: e,
-  itemIdKey: o,
+}, W = ({
+  direction: e,
+  disabledItemIdKeys: r,
+  itemIdKey: l,
   itemLabelKey: p,
-  items: l,
-  open: n,
-  renderItem: d,
-  triggerRef: h
+  items: a,
+  open: c,
+  setOpen: d,
+  renderItem: f,
+  triggerRef: j
 }) => {
   var u;
   return /* @__PURE__ */ s.jsx(
-    _,
+    z,
     {
-      className: "!max-h-96 pb-2",
-      isOpen: n,
-      triggerRef: h,
-      showPopoverInBottomDrawerOnSmallScreens: !0,
+      className: "lyra-list-box pb-2",
+      isOpen: c,
+      triggerRef: j,
+      showPopoverInDrawerOnSmallScreens: !0,
+      onOpenChange: d,
       shouldUpdatePosition: !0,
       style: {
-        "--trigger-width": ((u = h.current) == null ? void 0 : u.offsetWidth) + "px",
-        direction: r
+        "--trigger-width": ((u = j.current) == null ? void 0 : u.offsetWidth) + "px",
+        direction: e
       },
-      children: l && l.length ? /* @__PURE__ */ s.jsx(b.Options, { static: !0, className: Y(), children: l.map((i) => /* @__PURE__ */ s.jsx(
-        b.Option,
+      children: a && a.length ? /* @__PURE__ */ s.jsx(
+        y.Options,
         {
-          className: ({ active: t, disabled: x, selected: a }) => D(
-            Z({
-              active: t,
-              disabled: x,
-              selected: a
-            })
-          ),
-          value: i,
-          disabled: e == null ? void 0 : e.includes(i == null ? void 0 : i[o]),
-          children: (t) => /* @__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: i,
-              state: t,
-              renderItem: d,
-              itemLabelKey: p
-            }
-          )
-        },
-        i[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: e,
-  isDisabled: o,
+}, ts = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: l,
   isInvalid: p,
-  itemLabelKey: l,
-  onChange: n,
+  itemLabelKey: a,
+  onChange: c,
   open: d,
-  placeholder: h,
+  setOpen: f,
+  placeholder: j,
   size: u = "medium",
-  startSlot: i,
+  startSlot: n,
   value: t
 }) => {
-  const [x, a] = S(!1), [N, f] = S(!1), c = (m) => {
-    (m.key === "Escape" || m.key === "Backspace") && (n == null || n(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: G({
-        fullWidth: e,
-        isDisabled: o,
-        isHovered: N,
-        isFocused: x,
+      className: U({
+        fullWidth: r,
+        isDisabled: l,
+        isHovered: b,
+        isFocused: h,
         isInvalid: p,
         size: u,
-        className: q(u)
+        className: A(u)
       }),
-      onPointerEnter: () => f(!0),
-      onPointerLeave: () => f(!1),
-      onMouseEnter: () => f(!0),
-      onMouseLeave: () => f(!1),
+      onPointerEnter: () => o(!0),
+      onPointerLeave: () => o(!1),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
       onFocus: () => {
-        a(!0);
+        m(!0);
       },
       onBlur: () => {
-        a(!1);
+        m(!1);
       },
-      onKeyDown: c,
+      onKeyDown: S,
+      onClick: () => f(!0),
       children: [
-        i,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: t != null && t[l] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: t == null ? void 0 : t[l] }) : /* @__PURE__ */ s.jsx(B, { 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: [
           t ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
             "div",
             {
-              className: D(
-                X({
+              className: T(
+                Y({
                   size: "small",
                   color: "monochrome",
                   variant: "ghost",
                   className: "p-1",
-                  isDisabled: o
+                  isDisabled: l
                 })
               ),
-              onClick: (m) => {
-                m.stopPropagation(), n == null || n(void 0);
+              onClick: (i) => {
+                i.stopPropagation(), c == null || c(void 0);
               },
-              children: /* @__PURE__ */ s.jsx(M, { name: "cross", className: "h-4 w-4" })
+              children: /* @__PURE__ */ s.jsx(O, { name: "cross", className: "h-4 w-4" })
             }
           ) }) : null,
           /* @__PURE__ */ s.jsx(
-            M,
+            O,
             {
               name: "chevron-down",
               className: P("h-4 w-4 transition duration-150", d && "rotate-180")
@@ -199,218 +214,224 @@ const q = (r) => P(
       ]
     }
   );
-}, ts = ({
-  endSlot: r,
-  fullWidth: e,
-  isDisabled: o,
+}, os = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: l,
   isInvalid: p,
-  itemIdKey: l,
-  itemLabelKey: n,
+  itemIdKey: a,
+  itemLabelKey: c,
   label: d,
-  onChange: h,
-  open: u,
-  placeholder: i,
+  onChange: f,
+  open: j,
+  setOpen: u,
+  placeholder: n,
   size: t = "medium",
-  startSlot: x,
-  value: a
+  startSlot: h,
+  value: m
 }) => {
-  const [N, f] = S(!1), [c, m] = S(!1);
+  const [b, o] = N(!1), [S, i] = N(!1);
   return /* @__PURE__ */ s.jsxs(
-    b.Button,
+    y.Button,
     {
-      className: G({
-        fullWidth: e,
-        isDisabled: o,
-        isHovered: c,
-        isFocused: N,
+      className: U({
+        fullWidth: r,
+        isDisabled: l,
+        isHovered: S,
+        isFocused: b,
         isInvalid: p,
         size: t,
-        className: q(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: () => {
-        f(!0);
+        o(!0);
       },
       onBlur: () => {
-        f(!1);
+        o(!1);
       },
+      onClick: () => u(!0),
       children: [
-        x,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: a && a.length ? /* @__PURE__ */ s.jsx(
-          K,
+        h,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: m && m.length ? /* @__PURE__ */ s.jsx(
+          ss,
           {
             "aria-label": d ?? "Selected items",
-            onRemove: (j) => {
-              a && h(a.filter((F) => !j.has(F[l])));
+            onRemove: (x) => {
+              m && f(m.filter((F) => !x.has(F[a])));
             },
-            children: a.map((j) => /* @__PURE__ */ s.jsx(ss, { ...j, children: j == null ? void 0 : j[n] }, j[l]))
+            children: m.map((x) => /* @__PURE__ */ s.jsx(es, { ...x, children: x == null ? void 0 : x[c] }, x[a]))
           }
-        ) : /* @__PURE__ */ s.jsx(B, { color: "secondary", children: i }) }),
-        r,
+        ) : /* @__PURE__ */ s.jsx(M, { color: "secondary", children: n }) }),
+        e,
         /* @__PURE__ */ s.jsx(
-          M,
+          O,
           {
             name: "chevron-down",
-            className: P("h-4 w-4 min-w-[16px] transition duration-150", u && "rotate-180")
+            className: P("h-4 w-4 min-w-[16px] transition duration-150", j && "rotate-180")
           }
         )
       ]
     }
   );
-}, Ys = ({
-  by: r,
-  defaultValue: e,
-  description: o,
+}, _s = ({
+  by: e,
+  defaultValue: r,
+  description: l,
   disabledItemIdKeys: p,
-  endSlot: l,
-  errorMessage: n,
+  endSlot: a,
+  errorMessage: c,
   fullWidth: d = !0,
-  isDisabled: h,
-  isInvalid: u,
-  isRequired: i,
-  itemIdKey: t,
-  itemLabelKey: x,
-  items: a,
-  label: N,
-  name: f,
-  onChange: c,
-  optionalLabel: m = "Optional",
-  placeholder: j,
-  renderItem: F,
-  size: k = "medium",
-  startSlot: H,
-  value: E
+  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 [O, $] = S(E ?? e), g = R(null), { direction: I } = U(), w = V(
+  const [$, I] = N(H ?? r), [w, g] = N(!1), k = V(null), { direction: L } = q(), B = D(
     (v) => {
-      $(v), c == null || c(v);
+      I(v), o == null || o(v), g(!1);
     },
-    [c]
+    [o]
   );
   return /* @__PURE__ */ s.jsx(
-    b,
+    y,
     {
-      disabled: h,
-      name: f,
-      by: r,
-      onChange: w,
-      value: O ?? "",
-      children: ({ disabled: v, open: y, value: L }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: T({ fullWidth: d }), children: [
-          /* @__PURE__ */ s.jsx(A, { label: N, optionalLabel: m, isRequired: i }),
-          /* @__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: l,
+              endSlot: a,
               fullWidth: d,
               isDisabled: v,
-              isInvalid: u,
-              open: y,
-              placeholder: j,
-              size: k,
-              startSlot: H,
-              value: L,
-              itemLabelKey: x,
-              itemIdKey: t,
-              onChange: w
+              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: o, errorMessage: n })
+          /* @__PURE__ */ s.jsx(Q, { description: l, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          Q,
+          W,
           {
-            triggerRef: g,
-            itemIdKey: t,
-            itemLabelKey: x,
-            items: a,
-            open: y,
-            renderItem: F,
+            triggerRef: k,
+            itemIdKey: n,
+            itemLabelKey: t,
+            items: h,
+            open: w,
+            setOpen: g,
+            renderItem: x,
             disabledItemIdKeys: p,
-            direction: I
+            direction: L
           }
         )
       ] })
     }
   );
-}, Zs = ({
-  by: r,
-  defaultValue: e,
-  description: o,
+}, zs = ({
+  by: e,
+  defaultValue: r,
+  description: l,
   disabledItemIdKeys: p,
-  endSlot: l,
-  errorMessage: n,
+  endSlot: a,
+  errorMessage: c,
   fullWidth: d = !0,
-  isDisabled: h,
-  isInvalid: u,
-  isRequired: i,
-  itemIdKey: t,
-  itemLabelKey: x,
-  items: a,
-  label: N,
-  name: f,
-  onChange: c,
-  optionalLabel: m = "Optional",
-  placeholder: j,
-  renderItem: F,
-  size: k = "medium",
-  startSlot: H,
-  value: E
+  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 [O, $] = S(E ?? e), g = R(null), { direction: I } = U(), w = V(
+  const [$, I] = N(H ?? r), [w, g] = N(!1), k = V(null), { direction: L } = q(), B = D(
     (v) => {
-      $(v), c == null || c(v);
+      I(v), o == null || o(v);
     },
-    [c]
+    [o]
   );
   return /* @__PURE__ */ s.jsx(
-    b,
+    y,
     {
-      disabled: h,
-      name: f,
-      by: r,
-      onChange: w,
+      disabled: f,
+      name: b,
+      by: e,
+      onChange: B,
       multiple: !0,
-      value: O ?? [],
-      children: ({ disabled: v, open: y, value: L }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: T({ fullWidth: d }), children: [
-          /* @__PURE__ */ s.jsx(A, { label: N, optionalLabel: m, isRequired: i }),
-          /* @__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: l,
+              endSlot: a,
               fullWidth: d,
               isDisabled: v,
-              isInvalid: u,
-              open: y,
-              placeholder: j,
-              size: k,
-              startSlot: H,
-              value: L,
-              itemLabelKey: x,
-              itemIdKey: t,
-              onChange: w
+              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: o, errorMessage: n })
+          /* @__PURE__ */ s.jsx(Q, { description: l, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          Q,
+          W,
           {
-            triggerRef: g,
-            itemIdKey: t,
-            itemLabelKey: x,
-            items: a,
-            open: y,
-            renderItem: F,
+            triggerRef: k,
+            itemIdKey: n,
+            itemLabelKey: t,
+            items: h,
+            open: w,
+            setOpen: g,
+            renderItem: x,
             disabledItemIdKeys: p,
-            direction: I
+            direction: L
           }
         )
       ] })
@@ -418,6 +439,6 @@ const q = (r) => P(
   );
 };
 export {
-  Zs as MultiSelect,
-  Ys as Select
+  zs as MultiSelect,
+  _s as Select
 };