@new-black/lyra 0.1.19 → 0.1.20

package/dist/lyra22.js

@@ -1,172 +1,607 @@
-import { cva as t } from "./lyra99.js";
-import "./lyra108.js";
-const l = t(["lyra-input", "flex", "flex-col"], {
-  variants: {
-    fullWidth: {
-      true: "w-full",
-      false: "w-fit"
+import { j as s } from "./lyra59.js";
+import { useState as w, useRef as A, useCallback as L, useMemo as es, useEffect as X, useId as ls } from "react";
+import { Button as q, Label as is } from "./lyra58.js";
+import { twMerge as E } from "./lyra60.js";
+import "./lyra2.js";
+import { cx as T } from "./lyra309.js";
+import "./lyra315.js";
+import { Text as V } from "./lyra48.js";
+import "./lyra319.js";
+import "./lyra320.js";
+import "./lyra311.js";
+import "./lyra8.js";
+import { buttonStyles as Y } from "./lyra9.js";
+import "./lyra10.js";
+import "./lyra310.js";
+import "./lyra13.js";
+import "./lyra321.js";
+import "./lyra15.js";
+import "./lyra28.js";
+import { SvgIcon as k } from "./lyra44.js";
+import "./lyra18.js";
+import "./lyra20.js";
+import "./lyra21.js";
+import "./lyra32.js";
+import { listBoxStyles as ns } from "./lyra33.js";
+import { listBoxItemStyles as os } from "./lyra439.js";
+import { Popover as as } from "./lyra34.js";
+import "./lyra36.js";
+import "./lyra323.js";
+import { SheetHeader as cs } from "./lyra38.js";
+import { sharedInputFieldWrapperStyles as G, sharedInputFieldStyles as J, sharedInputlabelStyles as ms, sharedInputHintStyles as ds, sharedInputStyles as us } from "./lyra24.js";
+import { TagGroup as fs, TagItem as xs } from "./lyra440.js";
+import { flushSync as _ } from "react-dom";
+import "./lyra25.js";
+import "./lyra326.js";
+import "./lyra27.js";
+import "./lyra29.js";
+import "./lyra30.js";
+import "./lyra327.js";
+import "./lyra317.js";
+import { Spinner as ps } from "./lyra42.js";
+import "./lyra45.js";
+import "./lyra325.js";
+import "./lyra47.js";
+import "./lyra429.js";
+import { useIsMobileDevice as P } from "./lyra52.js";
+import { useSpinDelay as hs } from "./lyra53.js";
+import "./lyra54.js";
+import "./lyra63.js";
+import "./lyra56.js";
+import { Combobox as B } from "./lyra441.js";
+import { useLocale as Q, useFilter as js } from "./lyra57.js";
+const Ns = ({
+  itemLabelKey: t,
+  items: l,
+  onQueryChange: i
+}) => {
+  const [n, u] = w(""), { contains: a, startsWith: p } = js({ sensitivity: "base" }), c = es(() => {
+    if (i)
+      return l;
+    {
+      let f = [];
+      f = l.filter((e) => p(e[t], n ?? ""));
+      const j = l.filter((e) => a(e[t], n ?? "")).sort((e, m) => {
+        const d = e[t].indexOf(n ?? ""), r = m[t].indexOf(n ?? "");
+        return d - r;
+      });
+      return f = f.concat(j), f = f.filter(
+        (e, m, d) => m === d.findIndex((r) => r[t] === e[t])
+      ), f;
     }
-  }
-}), n = t(
-  {},
-  {
-    variants: {
-      size: {
-        small: [
-          "min-h-[42px]",
-          "px-[--input-padding-x-small]",
-          "py-[--input-padding-y-small]",
-          "text-[length:var(--input-text-size-small)]"
-        ],
-        medium: [
-          "min-h-[50px]",
-          "px-[--input-padding-x-medium]",
-          "py-[--input-padding-y-medium]",
-          "text-[length:var(--input-text-size-medium)]"
-        ],
-        large: [
-          "min-h-[58px]",
-          "px-[--input-padding-x-large]",
-          "py-[--input-padding-y-large]",
-          "text-[length:var(--input-text-size-large)]"
-        ]
-      }
+  }, [a, p, t, l, i, n]);
+  return X(() => {
+    i && (i == null || i(n));
+  }, [n]), {
+    filteredItems: c,
+    query: n,
+    setQuery: u
+  };
+}, K = (t) => T(
+  t === "small" && "min-h-[42px]",
+  t === "medium" && "min-h-[50px]",
+  t === "large" && "min-h-[58px]"
+), bs = ({
+  endSlot: t,
+  fullWidth: l,
+  isDisabled: i,
+  isInvalid: n,
+  itemLabelKey: u,
+  onChange: a,
+  open: p,
+  openPopover: c,
+  placeholder: f,
+  size: x = "medium",
+  startSlot: j,
+  value: e,
+  searchInputRef: m
+}) => {
+  const d = (r) => {
+    r.key === "Escape" || r.key === "Backspace" ? a == null || a(void 0) : r.key === "ArrowDown" || r.key === "ArrowUp" ? c == null || c() : r.key && r.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
+      c == null || c();
+    }), m.current && m.current.setSelectionRange(0, m.current.value.length));
+  };
+  return /* @__PURE__ */ s.jsxs(
+    q,
+    {
+      "aria-haspopup": "listbox",
+      "aria-expanded": p,
+      className: ({ isFocused: r, isHovered: h }) => J({
+        fullWidth: l,
+        isDisabled: i,
+        isHovered: h,
+        isFocused: r,
+        isInvalid: n,
+        size: x,
+        className: T(K(x), "gap-2")
+      }),
+      onKeyDown: d,
+      onPress: c,
+      children: [
+        j,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: e != null && e[u] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: e == null ? void 0 : e[u] }) : /* @__PURE__ */ s.jsx(V, { color: "secondary", children: f }) }),
+        t,
+        /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+          e ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
+            "div",
+            {
+              className: E(
+                Y({
+                  size: "small",
+                  color: "monochrome",
+                  variant: "ghost",
+                  className: "p-1",
+                  isDisabled: i
+                })
+              ),
+              role: "button",
+              onPointerDown: (r) => {
+                r.stopPropagation(), a == null || a(void 0);
+              },
+              onClick: (r) => {
+                r.stopPropagation(), a == null || a(void 0);
+              },
+              children: /* @__PURE__ */ s.jsx(k, { name: "cross", className: "h-4 w-4" })
+            }
+          ) }) : null,
+          /* @__PURE__ */ s.jsx(
+            k,
+            {
+              name: "chevron-down",
+              className: T("h-4 w-4 transition duration-150", p && "rotate-180")
+            }
+          )
+        ] })
+      ]
     }
-  }
-), a = t(
-  [
-    "flex",
-    "items-center",
-    "outline-none",
-    "border",
-    "border-solid",
-    "border-[--input-border-default-color]",
-    "rounded-[--input-radius]",
-    "font-sans",
-    "text-base",
-    "transition-all",
-    "ease-out",
-    "duration-150",
-    "placeholder:text-[--input-placeholder-color]"
-  ],
-  {
-    variants: {
-      fullWidth: {
-        true: "w-full",
-        false: "w-fit"
-      },
-      isDisabled: {
-        true: "bg-[--input-disabled-bg-color] text-[--input-text-disabled-color] cursor-not-allowed",
-        false: "bg-[--input-background-color] text-[--input-text-color]"
-      },
-      size: {
-        small: [
-          "px-[--input-padding-x-small]",
-          "py-[--input-padding-y-small]",
-          "text-[length:var(--input-text-size-small)]"
-        ],
-        medium: [
-          "px-[--input-padding-x-medium]",
-          "py-[--input-padding-y-medium]",
-          "text-[length:var(--input-text-size-medium)]"
-        ],
-        large: [
-          "px-[--input-padding-x-large]",
-          "py-[--input-padding-y-large]",
-          "text-[length:var(--input-text-size-large)]"
-        ]
-      },
-      isInvalid: {
-        true: "border-[--input-border-invalid-color]"
-      },
-      isHovered: {
-        true: ""
-      },
-      isFocused: {
-        true: ""
-      }
-    },
-    compoundVariants: [
-      {
-        isInvalid: void 0,
-        isFocused: !1,
-        isDisabled: !1,
-        className: "border-[--input-border-default-color]"
-      },
-      {
-        isDisabled: !1,
-        isFocused: !1,
-        isInvalid: void 0,
-        isHovered: !0,
-        className: "border-[--input-border-default-hover-color]"
-      },
-      {
-        isFocused: !0,
-        isDisabled: !1,
-        isInvalid: void 0,
-        className: "border-[--input-border-focused-color] ring ring-[--input-ring-focused-color]"
+  );
+}, Ss = ({
+  endSlot: t,
+  fullWidth: l,
+  isDisabled: i,
+  isInvalid: n,
+  itemIdKey: u,
+  itemLabelKey: a,
+  label: p,
+  onChange: c,
+  open: f,
+  openPopover: x,
+  placeholder: j,
+  size: e = "medium",
+  startSlot: m,
+  value: d,
+  searchInputRef: r
+}) => {
+  const h = (o) => {
+    o.key === "ArrowDown" || o.key === "ArrowUp" ? x == null || x() : o.key && o.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
+      x == null || x();
+    }), r.current && r.current.setSelectionRange(0, r.current.value.length));
+  };
+  return /* @__PURE__ */ s.jsxs(
+    q,
+    {
+      className: ({ isFocused: o, isHovered: b }) => J({
+        fullWidth: l,
+        isDisabled: i,
+        isHovered: b,
+        isFocused: o,
+        isInvalid: n,
+        size: e,
+        className: K(e)
+      }),
+      onPress: x,
+      onKeyDown: h,
+      "aria-haspopup": "listbox",
+      "aria-expanded": f,
+      children: [
+        m,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: d && d.length ? /* @__PURE__ */ s.jsx(
+          fs,
+          {
+            "aria-label": p ?? "Selected items",
+            onRemove: (o) => {
+              d && c(d.filter((b) => !o.has(b[u])));
+            },
+            children: d.map((o) => /* @__PURE__ */ s.jsx(xs, { ...o, children: o == null ? void 0 : o[a] }, o[u]))
+          }
+        ) : /* @__PURE__ */ s.jsx(V, { color: "secondary", children: j }) }),
+        t,
+        /* @__PURE__ */ s.jsx(
+          k,
+          {
+            name: "chevron-down",
+            className: T("h-4 w-4 min-w-[16px] transition duration-150", f && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}, C = ({
+  isRequired: t,
+  label: l,
+  optionalLabel: i
+}) => /* @__PURE__ */ s.jsxs("div", { className: T("flex items-center gap-3", l ? "justify-between" : "justify-end"), children: [
+  l ? /* @__PURE__ */ s.jsx(
+    is,
+    {
+      className: ms(),
+      style: { fontFamily: "var(--input-label-font-family)" },
+      children: l
+    }
+  ) : null,
+  t === !1 ? /* @__PURE__ */ s.jsx(
+    "span",
+    {
+      className: ds(),
+      style: { fontFamily: "var(--input-hint-font-family)" },
+      children: i
+    }
+  ) : null
+] }), ss = ({ description: t, errorMessage: l }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  t && /* @__PURE__ */ s.jsx(V, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: t }),
+  l && /* @__PURE__ */ s.jsx(V, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: l })
+] }), ws = ({
+  item: t,
+  itemLabelKey: l,
+  renderItem: i,
+  state: n
+}) => {
+  const u = t == null ? void 0 : t[l];
+  return i ? i(t, n) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+    n.selected ? /* @__PURE__ */ s.jsx(k, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
+    u
+  ] });
+}, Fs = ({
+  clearLabel: t = "Clear",
+  endSlot: l,
+  isLoading: i,
+  onQueryChange: n,
+  query: u,
+  setQuery: a,
+  startSlot: p,
+  searchInputRef: c
+}) => {
+  const f = ls(), [x, j] = w(!1), [e, m] = w(!1), d = P({ returnUndefinedIfUndefined: !0 }), r = hs(i ?? !1, { delay: 500, minDuration: 200 });
+  return X(() => {
+    var h;
+    typeof d == "boolean" && !d && ((h = c.current) == null || h.focus());
+  }, [d]), /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      className: G({
+        fullWidth: !0,
+        className: "box-border  py-3 pe-[--list-box-item-padding-end] ps-[--list-box-item-padding-start]"
+      }),
+      children: /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          className: E(
+            J({
+              fullWidth: !0,
+              isFocused: x,
+              isHovered: e,
+              className: "bg-neutral-0 px-2"
+            })
+          ),
+          onPointerEnter: () => m(!0),
+          onPointerLeave: () => m(!1),
+          onMouseEnter: () => m(!0),
+          onMouseLeave: () => m(!1),
+          children: [
+            /* @__PURE__ */ s.jsx(k, { name: "search", className: "-me-2 h-4 w-4" }),
+            p,
+            /* @__PURE__ */ s.jsx(
+              B.Input,
+              {
+                ref: c,
+                id: f,
+                className: us({ size: "small" }),
+                onChange: (h) => {
+                  a(h.target.value ?? ""), n == null || n(h.target.value);
+                },
+                value: u ?? "",
+                onFocus: () => j(!0),
+                onBlur: () => j(!1)
+              }
+            ),
+            u && u.length ? /* @__PURE__ */ s.jsx(
+              q,
+              {
+                "aria-label": t ?? "Clear",
+                className: E(
+                  Y({
+                    size: "small",
+                    color: "monochrome",
+                    variant: "ghost"
+                  })
+                ),
+                excludeFromTabOrder: !0,
+                onPress: () => {
+                  var h;
+                  a(""), (h = c.current) == null || h.focus();
+                },
+                children: /* @__PURE__ */ s.jsx(k, { name: "cross", className: "h-4 w-4" })
+              }
+            ) : null,
+            l,
+            r ? /* @__PURE__ */ s.jsx(ps, { className: "mx-2", size: "small" }) : null
+          ]
+        }
+      )
+    }
+  );
+}, ts = ({
+  direction: t,
+  disabledItemIdKeys: l,
+  isLoading: i,
+  itemIdKey: n,
+  itemLabelKey: u,
+  items: a,
+  onQueryChange: p,
+  open: c,
+  renderItem: f,
+  setOpenPopover: x,
+  triggerRef: j,
+  label: e,
+  description: m,
+  searchInputRef: d
+}) => {
+  var F;
+  const { filteredItems: r, query: h, setQuery: o } = Ns({
+    itemLabelKey: u,
+    items: a,
+    onQueryChange: p
+  }), b = P({ returnUndefinedIfUndefined: !0 });
+  return /* @__PURE__ */ s.jsx(
+    as,
+    {
+      className: "lyra-list-box pb-2",
+      isOpen: c,
+      triggerRef: j,
+      showPopoverInDrawerOnSmallScreens: !0,
+      onOpenChange: x,
+      shouldUpdatePosition: !0,
+      style: {
+        "--trigger-width": ((F = j.current) == null ? void 0 : F.offsetWidth) + "px",
+        direction: t
       },
-      {
-        isDisabled: !1,
-        isFocused: !0,
-        isInvalid: !0,
-        className: "ring !ring-[--input-ring-invalid-color]"
-      }
-    ],
-    defaultVariants: {
-      isDisabled: !1
+      children: c ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        b ? /* @__PURE__ */ s.jsx(cs, { title: e, description: m }) : null,
+        /* @__PURE__ */ s.jsx(
+          Fs,
+          {
+            onQueryChange: p,
+            isLoading: i,
+            query: h,
+            setQuery: o,
+            searchInputRef: d
+          }
+        ),
+        r && r.length ? /* @__PURE__ */ s.jsx(
+          B.Options,
+          {
+            static: !0,
+            className: ns({
+              className: "h-full max-h-[74dvh] overflow-y-auto sm:max-h-80"
+            }),
+            children: r.map((N) => /* @__PURE__ */ s.jsx(
+              B.Option,
+              {
+                className: ({ active: S, disabled: I, selected: $ }) => E(
+                  os({
+                    active: S,
+                    disabled: I,
+                    selected: $
+                  })
+                ),
+                value: N,
+                disabled: l == null ? void 0 : l.includes(N == null ? void 0 : N[n]),
+                children: (S) => /* @__PURE__ */ s.jsx(
+                  ws,
+                  {
+                    item: N,
+                    state: S,
+                    renderItem: f,
+                    itemLabelKey: u
+                  }
+                )
+              },
+              N[n]
+            ))
+          }
+        ) : null
+      ] }) : null
     }
-  }
-), s = t([
-  "text-[--input-label-color]",
-  "text-[length:--input-label-size]",
-  "mb-[--input-label-margin-bottom]",
-  "transition-all",
-  "ease-out",
-  "duration-150"
-]), d = t(
-  ["font-[--input-hint-weight]", "text-[--input-hint-color]", "mb-[--input-hint-margin-bottom]"],
-  {
-    variants: {
-      size: {
-        small: ["text-[--input-hint-size-small]"],
-        medium: ["text-[--input-hint-size-medium]"],
-        large: ["text-[--input-hint-size-large]"]
-      }
+  );
+}, wt = ({
+  by: t,
+  defaultValue: l,
+  description: i,
+  disabledItemIdKeys: n,
+  endSlot: u,
+  errorMessage: a,
+  fullWidth: p = !0,
+  isDisabled: c,
+  isInvalid: f,
+  isLoading: x,
+  isRequired: j,
+  itemIdKey: e,
+  itemLabelKey: m,
+  items: d,
+  label: r,
+  name: h,
+  onChange: o,
+  onQueryChange: b,
+  optionalLabel: F = "Optional",
+  placeholder: N,
+  renderItem: S,
+  size: I = "medium",
+  startSlot: $,
+  value: R
+}) => {
+  const [W, z] = w(R ?? l), [g, v] = w(!1), Z = () => v(!0), H = () => v(!1), D = A(null), M = L(
+    (O) => {
+      z(O), o == null || o(O), H();
+    },
+    [o]
+  ), U = A(null), { direction: y } = Q();
+  return /* @__PURE__ */ s.jsx(
+    B,
+    {
+      disabled: c,
+      name: h,
+      value: W ?? "",
+      onChange: M,
+      by: t,
+      children: ({ disabled: O, value: rs }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
+          /* @__PURE__ */ s.jsx(
+            C,
+            {
+              label: r,
+              optionalLabel: F,
+              isRequired: j
+            }
+          ),
+          /* @__PURE__ */ s.jsx("div", { ref: U, children: /* @__PURE__ */ s.jsx(
+            bs,
+            {
+              endSlot: u,
+              fullWidth: p,
+              isDisabled: O,
+              isInvalid: f,
+              open: g,
+              openPopover: Z,
+              placeholder: N,
+              size: I,
+              startSlot: $,
+              value: rs,
+              itemLabelKey: m,
+              itemIdKey: e,
+              onChange: M,
+              searchInputRef: D
+            }
+          ) }),
+          /* @__PURE__ */ s.jsx(ss, { description: i, errorMessage: a })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          ts,
+          {
+            triggerRef: U,
+            label: r,
+            description: i,
+            itemIdKey: e,
+            itemLabelKey: m,
+            items: d,
+            open: g,
+            setOpenPopover: v,
+            renderItem: S,
+            disabledItemIdKeys: n,
+            direction: y,
+            onQueryChange: b,
+            isLoading: x,
+            searchInputRef: D
+          }
+        )
+      ] })
     }
-  }
-), r = t(
-  ["w-full", "flex-grow", "bg-transparent", "outline-none", "disabled:cursor-not-allowed"],
-  {
-    variants: {
-      size: {
-        small: [
-          "px-[--input-padding-x-small]",
-          "py-[--input-padding-y-small]",
-          "text-[length:var(--input-text-size-small)]"
-        ],
-        medium: [
-          "px-[--input-padding-x-medium]",
-          "py-[--input-padding-y-medium]",
-          "text-[length:var(--input-text-size-medium)]"
-        ],
-        large: [
-          "px-[--input-padding-x-large]",
-          "py-[--input-padding-y-large]",
-          "text-[length:var(--input-text-size-large)]"
-        ]
-      }
+  );
+}, Ft = ({
+  by: t,
+  defaultValue: l,
+  description: i,
+  disabledItemIdKeys: n,
+  endSlot: u,
+  errorMessage: a,
+  fullWidth: p = !0,
+  isDisabled: c,
+  isInvalid: f,
+  isLoading: x,
+  isRequired: j,
+  itemIdKey: e,
+  itemLabelKey: m,
+  items: d,
+  label: r,
+  name: h,
+  onChange: o,
+  onQueryChange: b,
+  optionalLabel: F = "Optional",
+  placeholder: N,
+  renderItem: S,
+  size: I = "medium",
+  startSlot: $,
+  value: R
+}) => {
+  const [W, z] = w(R ?? l), [g, v] = w(!1), Z = () => v(!0), H = L(
+    (y) => {
+      z(y), o == null || o(y);
     },
-    defaultVariants: {
-      size: "medium"
+    [o]
+  ), D = A(null), M = A(null), { direction: U } = Q();
+  return /* @__PURE__ */ s.jsx(
+    B,
+    {
+      disabled: c,
+      name: h,
+      value: W ?? [],
+      onChange: H,
+      by: t,
+      multiple: !0,
+      children: ({ disabled: y, value: O }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
+          /* @__PURE__ */ s.jsx(
+            C,
+            {
+              label: r,
+              optionalLabel: F,
+              isRequired: j
+            }
+          ),
+          /* @__PURE__ */ s.jsx("div", { ref: M, children: /* @__PURE__ */ s.jsx(
+            Ss,
+            {
+              searchInputRef: D,
+              endSlot: u,
+              fullWidth: p,
+              isDisabled: y,
+              isInvalid: f,
+              open: g,
+              openPopover: Z,
+              placeholder: N,
+              size: I,
+              startSlot: $,
+              value: O,
+              itemLabelKey: m,
+              itemIdKey: e,
+              onChange: H
+            }
+          ) }),
+          /* @__PURE__ */ s.jsx(ss, { description: i, errorMessage: a })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          ts,
+          {
+            label: r,
+            description: i,
+            searchInputRef: D,
+            triggerRef: M,
+            itemIdKey: e,
+            itemLabelKey: m,
+            items: d,
+            open: g,
+            setOpenPopover: v,
+            renderItem: S,
+            disabledItemIdKeys: n,
+            direction: U,
+            onQueryChange: b,
+            isLoading: x
+          }
+        )
+      ] })
     }
-  }
-);
+  );
+};
 export {
-  a as sharedInputFieldStyles,
-  l as sharedInputFieldWrapperStyles,
-  d as sharedInputHintStyles,
-  n as sharedInputSizeStyles,
-  r as sharedInputStyles,
-  s as sharedInputlabelStyles
+  Ft as MultiSearchListField,
+  wt as SearchListField
 };