@new-black/lyra 0.1.6 → 0.1.8

package/dist/lyra23.js

@@ -1,65 +1,601 @@
-import { j as t } from "./lyra44.js";
-import { forwardRef as i } from "react";
-import { ListBox as l, Item as d, Header as p, Section as j } from "./lyra43.js";
-import { Text as $ } from "./lyra34.js";
-import { listBoxStyles as u, listBoxItemStyles as B, listBoxHeaderStyles as S } from "./lyra24.js";
-import { SvgIcon as N } from "./lyra33.js";
-import { twMerge as m } from "./lyra45.js";
-const y = ({
-  className: s,
-  isEmptyLabel: e = "No options available",
-  renderEmptyState: a,
-  selectionMode: c = "single",
-  ...o
-}, r) => /* @__PURE__ */ t.jsx(
-  l,
-  {
-    ...o,
-    ref: r,
-    selectionMode: c,
-    className: m(u({ className: s })),
-    renderEmptyState: a || (() => /* @__PURE__ */ t.jsx("div", { className: "px-2 py-1", children: /* @__PURE__ */ t.jsx($, { variant: "body-medium", children: e }) }))
-  }
-), b = ({ className: s, children: e, ...a }, c) => /* @__PURE__ */ t.jsx(
-  d,
-  {
-    ...a,
-    ref: c,
-    className: ({
-      isDisabled: o,
-      isPressed: r,
-      isSelected: x,
-      isFocused: n,
-      isHovered: f
-    }) => m(
-      B({
-        className: s,
-        isDisabled: o,
-        isPressed: r,
-        isSelected: x,
-        isFocused: n,
-        isHovered: f
-      })
+import { j as e } from "./lyra53.js";
+import { createContext as ne, useState as P, useRef as E, useContext as re, useMemo as ae, useEffect as _ } from "react";
+import { Button as W, Label as oe } from "./lyra52.js";
+import { match as ie } from "./lyra275.js";
+import "./lyra2.js";
+import { cx as ce } from "./lyra62.js";
+import "./lyra67.js";
+import { Text as k } from "./lyra42.js";
+import "./lyra68.js";
+import "./lyra69.js";
+import "./lyra70.js";
+import { Button as D } from "./lyra8.js";
+import "./lyra72.js";
+import "./lyra10.js";
+import "./lyra11.js";
+import "./lyra147.js";
+import "./lyra24.js";
+import { SvgIcon as $ } from "./lyra38.js";
+import "./lyra15.js";
+import "./lyra17.js";
+import "./lyra18.js";
+import { sharedInputFieldWrapperStyles as T, sharedInputFieldStyles as H, sharedInputSizeStyles as q, sharedInputStyles as ue, sharedInputlabelStyles as de, sharedInputHintStyles as me } from "./lyra19.js";
+import "./lyra20.js";
+import "./lyra148.js";
+import "./lyra22.js";
+import "./lyra25.js";
+import "./lyra26.js";
+import "./lyra27.js";
+import "./lyra73.js";
+import { Popover as A } from "./lyra29.js";
+import "./lyra31.js";
+import "./lyra149.js";
+import "./lyra75.js";
+import { Spinner as G } from "./lyra36.js";
+import "./lyra39.js";
+import "./lyra77.js";
+import { TagGroup as pe } from "./lyra41.js";
+import "./lyra79.js";
+import { useSpinDelay as he } from "./lyra47.js";
+import "./lyra48.js";
+import "./lyra57.js";
+import { fixedForwardRef as J } from "./lyra63.js";
+import { listBoxStyles as U, listBoxItemStyles as K } from "./lyra276.js";
+import { Combobox as w } from "./lyra277.js";
+import { twMerge as N } from "./lyra54.js";
+import { useLocale as X, useFilter as fe } from "./lyra51.js";
+const Y = ne({}), xe = (s) => {
+  const [l, t] = P(
+    s.value ?? s.defaultValue
+  ), [i, n] = P(s.initiallyOpen ?? !1);
+  return /* @__PURE__ */ e.jsx(
+    Y.Provider,
+    {
+      value: {
+        ...s,
+        popoverIsOpen: i,
+        setPopoverIsOpen: n,
+        internalValue: l,
+        setInternalValue: t
+      },
+      children: s.children
+    }
+  );
+}, z = () => re(Y), Z = () => {
+  const {
+    itemLabelKey: s,
+    onQueryChange: l,
+    items: t
+    /* listToFilterOn */
+  } = z(), [i, n] = P(""), { contains: u } = fe({ sensitivity: "base" }), m = ae(() => l ? t : t.filter((j) => u(j[s], i ?? "")), [u, s, t, l, i]);
+  return _(() => {
+    l && (l == null || l(i));
+  }, [i]), {
+    filteredItems: m,
+    query: i,
+    setQuery: n
+  };
+}, xs = (s) => {
+  const { selectionMode: l = "single" } = s, i = ie({ ...s, selectionMode: l }).returnType().with({ selectionMode: "single" }, (n) => ({
+    ...n,
+    value: n.value,
+    defaultValue: n.defaultValue,
+    onChange: n.onChange
+  })).with({ selectionMode: "multiple" }, (n) => ({
+    ...n,
+    value: n.value,
+    defaultValue: n.defaultValue,
+    onChange: n.onChange
+  })).run();
+  return /* @__PURE__ */ e.jsx(xe, { ...i, children: /* @__PURE__ */ e.jsx(ve, {}) });
+}, Q = ({ item: s, state: l, render: t }) => {
+  const { itemLabelKey: i } = z(), n = s == null ? void 0 : s[i];
+  return t ? t(s, l) : /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+    l.selected ? /* @__PURE__ */ e.jsx($, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
+    n
+  ] });
+}, ve = () => {
+  const s = z(), { internalValue: l, value: t, defaultValue: i, name: n, selectionMode: u, onChange: m } = s;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      w,
+      {
+        name: n,
+        value: (m ? t : l) ?? "",
+        defaultValue: i,
+        multiple: u === "multiple"
+      }
     ),
-    children: (o) => /* @__PURE__ */ t.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
-      /* @__PURE__ */ t.jsx("div", { className: o.isSelected ? "" : "me-5", children: typeof e == "function" ? e(o) : e }),
-      o.isSelected && /* @__PURE__ */ t.jsx(N, { name: "checkmark", className: "h-4 w-4" })
-    ] })
-  }
-), v = ({ className: s, ...e }, a) => /* @__PURE__ */ t.jsx(
-  p,
-  {
-    ...e,
-    ref: a,
-    className: S({ className: s })
-  }
-), L = (s, e) => /* @__PURE__ */ t.jsx(j, { ...s, ref: e }), E = i(y), M = i(b), T = i(L), q = i(v);
+    u === "single" ? /* @__PURE__ */ e.jsx(be, {}) : null,
+    u === "multiple" ? /* @__PURE__ */ e.jsx(ye, {}) : null
+  ] });
+}, ee = ({
+  query: s,
+  setQuery: l,
+  onQueryChange: t,
+  isLoading: i,
+  startSlot: n,
+  endSlot: u,
+  clearLabel: m = "Clear"
+}) => {
+  const [j, g] = P(!1), [y, p] = P(!1), [h, I] = P(!1);
+  return _(() => {
+    setTimeout(() => {
+      I(!0);
+    }, 10);
+  }, []), /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: T({
+        fullWidth: !0,
+        className: "py-3 pe-[--list-box-item-padding-end] ps-[--list-box-item-padding-start]"
+      }),
+      children: /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: N(
+            H({
+              fullWidth: !0,
+              isFocused: j,
+              isHovered: y,
+              className: "px-2"
+            })
+          ),
+          onPointerEnter: () => p(!0),
+          onPointerLeave: () => p(!1),
+          onMouseEnter: () => p(!0),
+          onMouseLeave: () => p(!1),
+          children: [
+            /* @__PURE__ */ e.jsx($, { name: "search", className: "-me-2 h-4 w-4" }),
+            n,
+            h ? /* @__PURE__ */ e.jsx(
+              w.Input,
+              {
+                autoFocus: !0,
+                className: ue({ size: "small" }),
+                onChange: (x) => {
+                  l(x.target.value), t == null || t(x.target.value);
+                },
+                value: s ?? "",
+                onFocus: () => g(!0),
+                onBlur: () => g(!1)
+              }
+            ) : null,
+            s && s.length ? /* @__PURE__ */ e.jsx(
+              D,
+              {
+                variant: "ghost",
+                className: "mx-2",
+                size: "small",
+                tooltip: m,
+                excludeFromTabOrder: !0,
+                onPress: () => {
+                  l("");
+                },
+                children: /* @__PURE__ */ e.jsx($, { name: "cross", className: "h-4 w-4" })
+              }
+            ) : null,
+            u,
+            i ? /* @__PURE__ */ e.jsx(G, { className: "mx-2", size: "small" }) : null
+          ]
+        }
+      )
+    }
+  );
+}, se = ({ label: s, hint: l, isRequired: t }) => /* @__PURE__ */ e.jsxs("div", { className: ce("flex items-center gap-3", s ? "justify-between" : "justify-end"), children: [
+  s ? /* @__PURE__ */ e.jsxs(
+    oe,
+    {
+      className: de(),
+      style: { fontFamily: "var(--input-label-font-family)" },
+      children: [
+        s,
+        t && /* @__PURE__ */ e.jsx("span", { className: "text-danger", children: " *" })
+      ]
+    }
+  ) : null,
+  l ? /* @__PURE__ */ e.jsx(
+    "span",
+    {
+      className: me(),
+      style: { fontFamily: "var(--input-hint-font-family)" },
+      children: l
+    }
+  ) : null
+] }), te = ({ description: s, errorMessage: l }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  s && /* @__PURE__ */ e.jsx(k, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: s }),
+  l && /* @__PURE__ */ e.jsx(k, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: l })
+] }), je = (s, l) => {
+  const t = z(), {
+    clearLabel: i,
+    label: n,
+    hint: u,
+    description: m,
+    errorMessage: j,
+    validationState: g,
+    placeholder: y,
+    isRequired: p,
+    isDisabled: h,
+    fullWidth: I,
+    setPopoverIsOpen: x,
+    size: L,
+    startSlot: b,
+    endSlot: C,
+    itemLabelKey: M,
+    onChange: r,
+    setInternalValue: o
+  } = t, f = r ? t.value : t.internalValue, [R, d] = P(!1), [O, F] = P(!1), V = (S) => {
+    S.key === "ArrowDown" || S.key === " " || S.key === "Enter" ? x(!0) : (S.key === "Backspace" || S.key === "Escape") && (r == null || r(void 0), o(void 0));
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: N(T({ fullWidth: I })), children: [
+    /* @__PURE__ */ e.jsx(se, { hint: u, isRequired: p, label: n }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        className: N(
+          H({
+            fullWidth: I,
+            isDisabled: h,
+            isFocused: R,
+            isHovered: O,
+            size: L ?? "medium",
+            validationState: g,
+            className: "gap-1 px-0 py-0"
+          })
+        ),
+        onPointerEnter: () => F(!0),
+        onPointerLeave: () => F(!1),
+        onMouseEnter: () => F(!0),
+        onMouseLeave: () => F(!1),
+        ref: l,
+        children: [
+          /* @__PURE__ */ e.jsxs(
+            W,
+            {
+              isDisabled: h,
+              className: N(
+                q({
+                  size: L ?? "medium",
+                  className: "flex h-full w-full flex-grow items-center gap-3 text-start outline-none"
+                })
+              ),
+              onFocus: () => {
+                d(!0);
+              },
+              onBlur: () => {
+                d(!1);
+              },
+              onPress: () => {
+                x(!0);
+              },
+              onKeyDown: V,
+              children: [
+                b,
+                /* @__PURE__ */ e.jsx("div", { className: "grow", children: f ? f == null ? void 0 : f[M] : /* @__PURE__ */ e.jsx(k, { color: "secondary", children: y }) }),
+                C
+              ]
+            }
+          ),
+          f && /* @__PURE__ */ e.jsx(
+            D,
+            {
+              variant: "ghost",
+              isDisabled: h,
+              size: L,
+              tooltip: i ?? "Clear",
+              onPress: () => {
+                o(void 0), r == null || r(void 0);
+              },
+              excludeFromTabOrder: !0,
+              children: /* @__PURE__ */ e.jsx($, { name: "cross", className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            W,
+            {
+              isDisabled: h,
+              className: N(
+                q({
+                  size: L ?? "medium",
+                  className: "h-full flex-grow outline-none"
+                })
+              ),
+              onPress: () => {
+                x(!0);
+              },
+              onFocus: () => {
+                d(!0);
+              },
+              onBlur: () => {
+                d(!1);
+              },
+              onKeyDown: V,
+              excludeFromTabOrder: !0,
+              children: /* @__PURE__ */ e.jsx($, { name: "chevron-down", className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(te, { description: m, errorMessage: j })
+  ] });
+}, ge = J(je), be = () => {
+  var S, c;
+  const s = z(), {
+    itemLabelKey: l,
+    itemIdKey: t,
+    renderItem: i,
+    disabledItemIdKeys: n,
+    allowCustomValue: u,
+    onChange: m,
+    popoverIsOpen: j,
+    setPopoverIsOpen: g,
+    setInternalValue: y,
+    searchInputClearLabel: p = "Clear",
+    isLoading: h,
+    searchInputEndSlot: I,
+    searchInputStartSlot: x,
+    allowCustomValueCreateLabel: L = (a) => `Create "${a}"`
+  } = s, b = m, C = s == null ? void 0 : s.internalValue, M = s == null ? void 0 : s.value, { filteredItems: r, query: o, setQuery: f } = Z(), R = E(null), d = E(null), { direction: O } = X(), F = (S = r == null ? void 0 : r.filter(
+    (a) => (a == null ? void 0 : a[l]) == o
+  )) == null ? void 0 : S.length, V = he(h ?? !1, { delay: 500, minDuration: 200 });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(ge, { ref: d }),
+    /* @__PURE__ */ e.jsx(
+      A,
+      {
+        className: "pb-2",
+        isOpen: j,
+        onOpenChange: (a) => {
+          var v;
+          g(a), a && ((v = R.current) == null || v.focus());
+        },
+        triggerRef: d,
+        showPopoverInBottomDrawerOnSmallScreens: !0,
+        style: { "--trigger-width": ((c = d.current) == null ? void 0 : c.offsetWidth) + "px", direction: O },
+        children: /* @__PURE__ */ e.jsxs(
+          w,
+          {
+            nullable: !0,
+            onChange: (a) => {
+              a && (b == null || b(a), y(a), g(!1));
+            },
+            value: (m ? M : C) ?? "",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                ee,
+                {
+                  query: o,
+                  setQuery: f,
+                  clearLabel: p,
+                  startSlot: x,
+                  endSlot: I
+                }
+              ),
+              r && (r != null && r.length) && !V || u && F === 0 && !V ? /* @__PURE__ */ e.jsxs(w.Options, { static: !0, className: U(), children: [
+                r.map((a) => /* @__PURE__ */ e.jsx(
+                  w.Option,
+                  {
+                    className: ({ active: v, selected: B, disabled: le }) => N(
+                      K({
+                        active: v,
+                        disabled: le,
+                        selected: B
+                      })
+                    ),
+                    value: a,
+                    disabled: n == null ? void 0 : n.includes(a[t]),
+                    children: (v) => /* @__PURE__ */ e.jsx(Q, { item: a, state: v, render: i })
+                  },
+                  a[t]
+                )),
+                o && o.length && u && F === 0 ? /* @__PURE__ */ e.jsx(
+                  w.Option,
+                  {
+                    value: {
+                      [t]: o,
+                      [l]: o
+                    },
+                    className: ({ active: a, selected: v, disabled: B }) => N(
+                      K({
+                        active: a,
+                        disabled: B,
+                        selected: v
+                      })
+                    ),
+                    children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
+                      L(o)
+                    ] })
+                  }
+                ) : null
+              ] }) : null,
+              V ? /* @__PURE__ */ e.jsx("div", { className: "flex h-40 w-full items-center justify-center", children: /* @__PURE__ */ e.jsx(G, { size: "medium" }) }) : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}, Se = (s, l) => {
+  const t = z(), {
+    label: i,
+    hint: n,
+    description: u,
+    errorMessage: m,
+    validationState: j,
+    isRequired: g,
+    isDisabled: y,
+    fullWidth: p,
+    setPopoverIsOpen: h,
+    size: I,
+    startSlot: x,
+    endSlot: L,
+    itemLabelKey: b,
+    itemIdKey: C,
+    setInternalValue: M
+  } = t, r = t.addValueLabel ?? "Add value", o = t.internalValue, f = t.onChange, [R, d] = P(!1);
+  return /* @__PURE__ */ e.jsxs("div", { className: N(T({ fullWidth: p })), children: [
+    /* @__PURE__ */ e.jsx(se, { hint: n, isRequired: g, label: i }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        className: N(
+          H({
+            fullWidth: p,
+            isDisabled: y,
+            isHovered: R,
+            size: I ?? "medium",
+            validationState: j,
+            className: "gap-2 px-2 py-1.5"
+          })
+        ),
+        ref: l,
+        onPointerEnter: () => d(!0),
+        onPointerLeave: () => d(!1),
+        onMouseEnter: () => d(!0),
+        onMouseLeave: () => d(!1),
+        children: [
+          x,
+          o && o.length ? /* @__PURE__ */ e.jsx(
+            pe,
+            {
+              itemIdKey: C,
+              itemLabelKey: b,
+              label: i ?? t["aria-label"],
+              isDisabled: y,
+              value: o,
+              onChange: (O) => {
+                M(O), f == null || f(O);
+              }
+            }
+          ) : null,
+          L,
+          o != null && o.length ? /* @__PURE__ */ e.jsx(
+            D,
+            {
+              variant: "ghost",
+              className: "p-1.5",
+              size: "small",
+              tooltip: r,
+              onPress: () => h(!0),
+              children: /* @__PURE__ */ e.jsx($, { name: "plus" })
+            }
+          ) : /* @__PURE__ */ e.jsx(
+            D,
+            {
+              variant: "ghost",
+              size: "small",
+              className: "text-sm",
+              endIcon: /* @__PURE__ */ e.jsx($, { name: "plus" }),
+              onPress: () => h(!0),
+              children: r
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(te, { description: u, errorMessage: m })
+  ] });
+}, Ne = J(Se), ye = () => {
+  var V, S;
+  const s = z(), {
+    itemLabelKey: l,
+    itemIdKey: t,
+    renderItem: i,
+    disabledItemIdKeys: n,
+    allowCustomValue: u,
+    onChange: m,
+    popoverIsOpen: j,
+    setPopoverIsOpen: g,
+    setInternalValue: y,
+    searchInputClearLabel: p = "Clear",
+    isLoading: h,
+    searchInputEndSlot: I,
+    searchInputStartSlot: x,
+    allowCustomValueCreateLabel: L = (c) => `Create "${c}"`
+  } = s, b = m, C = s.internalValue, M = s.value, { filteredItems: r, query: o, setQuery: f } = Z(), R = E(null), d = E(null), { direction: O } = X(), F = (V = r == null ? void 0 : r.filter(
+    (c) => (c == null ? void 0 : c[l]) == o
+  )) == null ? void 0 : V.length;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(Ne, { ref: d }),
+    /* @__PURE__ */ e.jsx(
+      A,
+      {
+        className: "pb-2",
+        isOpen: j,
+        onOpenChange: (c) => {
+          var a;
+          g(c), c && ((a = R.current) == null || a.focus());
+        },
+        triggerRef: d,
+        showPopoverInBottomDrawerOnSmallScreens: !0,
+        style: { "--trigger-width": ((S = d.current) == null ? void 0 : S.offsetWidth) + "px", direction: O },
+        children: /* @__PURE__ */ e.jsxs(
+          w,
+          {
+            value: (m ? M : C) ?? [],
+            onChange: (c) => {
+              b == null || b(c), y(c);
+            },
+            multiple: !0,
+            children: [
+              /* @__PURE__ */ e.jsx(
+                ee,
+                {
+                  query: o,
+                  setQuery: f,
+                  isLoading: h,
+                  clearLabel: p,
+                  startSlot: x,
+                  endSlot: I
+                }
+              ),
+              r && (r != null && r.length) || u && F === 0 ? /* @__PURE__ */ e.jsxs(w.Options, { static: !0, className: U(), children: [
+                r.map((c) => /* @__PURE__ */ e.jsx(
+                  w.Option,
+                  {
+                    className: ({ active: a, selected: v, disabled: B }) => N(
+                      K({
+                        active: a,
+                        disabled: B,
+                        selected: v
+                      })
+                    ),
+                    value: c,
+                    disabled: n == null ? void 0 : n.includes(c[t]),
+                    children: (a) => /* @__PURE__ */ e.jsx(Q, { item: c, state: a, render: i })
+                  },
+                  c[t]
+                )),
+                o && o.length && u && F === 0 ? /* @__PURE__ */ e.jsx(
+                  w.Option,
+                  {
+                    value: {
+                      [t]: o,
+                      [l]: o
+                    },
+                    className: ({ active: c, selected: a, disabled: v }) => N(
+                      K({
+                        active: c,
+                        disabled: v,
+                        selected: a
+                      })
+                    ),
+                    children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
+                      L(o)
+                    ] })
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  v as Header,
-  b as Item,
-  E as ListBox,
-  q as ListBoxHeader,
-  M as ListBoxItem,
-  T as ListBoxSection,
-  L as Section
+  xs as SearchListField
 };