@new-black/lyra 0.1.19 → 0.1.20

package/dist/lyra20.js

@@ -1,596 +1,144 @@
-import { j as s } from "./lyra54.js";
-import { useState as b, useRef as M, useCallback as L, useMemo as rs, useEffect as X, useId as es } from "react";
-import { Button as q, Label as ls } from "./lyra53.js";
-import { twMerge as A } from "./lyra55.js";
-import "./lyra2.js";
-import { cx as I } from "./lyra99.js";
-import "./lyra100.js";
-import { Text as H } from "./lyra43.js";
-import "./lyra101.js";
-import "./lyra102.js";
-import "./lyra103.js";
-import "./lyra8.js";
-import { buttonStyles as Y } from "./lyra9.js";
-import "./lyra10.js";
-import "./lyra11.js";
-import "./lyra105.js";
+import { j as i } from "./lyra59.js";
+import { forwardRef as l } from "react";
+import { RadioGroup as j, Label as b, Radio as v } from "./lyra58.js";
+import { twMerge as p } from "./lyra60.js";
+import { cx as N } from "./lyra309.js";
+import { Text as m } from "./lyra48.js";
+import { textStyles as h } from "./lyra49.js";
 import "./lyra13.js";
-import "./lyra26.js";
-import { SvgIcon as v } from "./lyra39.js";
-import "./lyra16.js";
-import "./lyra18.js";
-import "./lyra19.js";
+import "./lyra321.js";
+import "./lyra15.js";
 import "./lyra28.js";
-import { listBoxStyles as is } from "./lyra29.js";
-import { listBoxItemStyles as as } from "./lyra150.js";
-import { Popover as ns } from "./lyra30.js";
+import "./lyra18.js";
+import "./lyra8.js";
+import "./lyra318.js";
+import "./lyra21.js";
+import "./lyra2.js";
+import "./lyra315.js";
+import "./lyra320.js";
+import "./lyra311.js";
+import "./lyra10.js";
+import "./lyra310.js";
 import "./lyra32.js";
-import "./lyra107.js";
-import { sharedInputFieldWrapperStyles as G, sharedInputFieldStyles as J, sharedInputlabelStyles as os, sharedInputHintStyles as cs, sharedInputStyles as ms } from "./lyra22.js";
-import { TagGroup as ds, TagItem as us } from "./lyra151.js";
-import { flushSync as _ } from "react-dom";
-import "./lyra23.js";
-import "./lyra110.js";
+import "./lyra322.js";
+import "./lyra34.js";
+import "./lyra36.js";
+import "./lyra323.js";
+import "./lyra38.js";
+import "./lyra317.js";
+import "./lyra45.js";
+import "./lyra325.js";
+import "./lyra47.js";
+import "./lyra429.js";
+import "./lyra54.js";
+import "./lyra63.js";
+import "./lyra56.js";
+import { sharedInputlabelStyles as g, sharedInputHintStyles as w } from "./lyra24.js";
+import "react-dom";
 import "./lyra25.js";
+import "./lyra326.js";
 import "./lyra27.js";
-import "./lyra111.js";
-import { Spinner as xs } from "./lyra37.js";
-import "./lyra40.js";
-import "./lyra109.js";
-import "./lyra42.js";
-import "./lyra144.js";
-import { useSpinDelay as fs } from "./lyra48.js";
-import "./lyra49.js";
-import "./lyra58.js";
-import "./lyra51.js";
-import { Combobox as D } from "./lyra152.js";
-import { useLocale as P, useFilter as ps } from "./lyra52.js";
-const hs = ({
-  itemLabelKey: r,
-  items: i,
-  onQueryChange: n
-}) => {
-  const [a, d] = b(""), { contains: c, startsWith: p } = ps({ sensitivity: "base" }), m = rs(() => {
-    if (n)
-      return i;
-    {
-      let u = [];
-      u = i.filter((l) => p(l[r], a ?? ""));
-      const h = i.filter((l) => c(l[r], a ?? "")).sort((l, o) => {
-        const f = l[r].indexOf(a ?? ""), t = o[r].indexOf(a ?? "");
-        return f - t;
-      });
-      return u = u.concat(h), u = u.filter(
-        (l, o, f) => o === f.findIndex((t) => t[r] === l[r])
-      ), u;
-    }
-  }, [c, p, r, i, n, a]);
-  return X(() => {
-    n && (n == null || n(a));
-  }, [a]), {
-    filteredItems: m,
-    query: a,
-    setQuery: d
-  };
-}, Q = (r) => I(
-  r === "small" && "min-h-[42px]",
-  r === "medium" && "min-h-[50px]",
-  r === "large" && "min-h-[58px]"
-), js = ({
-  endSlot: r,
-  fullWidth: i,
-  isDisabled: n,
-  isInvalid: a,
-  itemLabelKey: d,
-  onChange: c,
-  open: p,
-  openPopover: m,
-  placeholder: u,
-  size: x = "medium",
-  startSlot: h,
-  value: l,
-  searchInputRef: o
-}) => {
-  const f = (t) => {
-    t.key === "Escape" || t.key === "Backspace" ? c == null || c(void 0) : t.key === "ArrowDown" || t.key === "ArrowUp" ? m == null || m() : t.key && t.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
-      m == null || m();
-    }), o.current && o.current.setSelectionRange(0, o.current.value.length));
-  };
-  return /* @__PURE__ */ s.jsxs(
-    q,
-    {
-      "aria-haspopup": "listbox",
-      "aria-expanded": p,
-      className: ({ isFocused: t, isHovered: N }) => J({
-        fullWidth: i,
-        isDisabled: n,
-        isHovered: N,
-        isFocused: t,
-        isInvalid: a,
-        size: x,
-        className: I(Q(x), "gap-2")
-      }),
-      onKeyDown: f,
-      onPress: m,
-      children: [
-        h,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: l != null && l[d] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: l == null ? void 0 : l[d] }) : /* @__PURE__ */ s.jsx(H, { color: "secondary", children: u }) }),
-        r,
-        /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-          l ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
-            "div",
+import "./lyra29.js";
+import "./lyra30.js";
+import "./lyra327.js";
+import { radioGroupStyles as $, radioStyles as R } from "./lyra438.js";
+const S = l(
+  ({
+    children: o,
+    className: r,
+    color: a,
+    description: s,
+    errorMessage: t,
+    isRequired: d,
+    label: e,
+    labelClassName: c,
+    optionalLabel: n = "Optional",
+    orientation: f = "vertical",
+    ...x
+  }, y) => /* @__PURE__ */ i.jsx(j, { ...x, ref: y, children: (u) => /* @__PURE__ */ i.jsxs("div", { className: "lyra-radio lyra-input flex flex-col gap-y-1", children: [
+    /* @__PURE__ */ i.jsxs(
+      "div",
+      {
+        className: N("flex items-center gap-3", e ? "justify-between" : "justify-end"),
+        children: [
+          e ? /* @__PURE__ */ i.jsx(
+            b,
             {
-              className: A(
-                Y({
-                  size: "small",
-                  color: "monochrome",
-                  variant: "ghost",
-                  className: "p-1",
-                  isDisabled: n
-                })
-              ),
-              role: "button",
-              onPointerDown: (t) => {
-                t.stopPropagation(), c == null || c(void 0);
-              },
-              onClick: (t) => {
-                t.stopPropagation(), c == null || c(void 0);
-              },
-              children: /* @__PURE__ */ s.jsx(v, { name: "cross", className: "h-4 w-4" })
+              className: g({
+                className: c
+              }),
+              style: { fontFamily: "var(--input-label-font-family)" },
+              children: e
             }
-          ) }) : null,
-          /* @__PURE__ */ s.jsx(
-            v,
+          ) : null,
+          d === !1 ? /* @__PURE__ */ i.jsx(
+            "span",
             {
-              name: "chevron-down",
-              className: I("h-4 w-4 transition duration-150", p && "rotate-180")
+              className: w(),
+              style: { fontFamily: "var(--input-hint-font-family)" },
+              children: n
             }
-          )
-        ] })
-      ]
-    }
-  );
-}, Ns = ({
-  endSlot: r,
-  fullWidth: i,
-  isDisabled: n,
-  isInvalid: a,
-  itemIdKey: d,
-  itemLabelKey: c,
-  label: p,
-  onChange: m,
-  open: u,
-  openPopover: x,
-  placeholder: h,
-  size: l = "medium",
-  startSlot: o,
-  value: f,
-  searchInputRef: t
-}) => {
-  const N = (e) => {
-    e.key === "ArrowDown" || e.key === "ArrowUp" ? x == null || x() : e.key && e.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
-      x == null || x();
-    }), t.current && t.current.setSelectionRange(0, t.current.value.length));
-  };
-  return /* @__PURE__ */ s.jsxs(
-    q,
-    {
-      className: ({ isFocused: e, isHovered: j }) => J({
-        fullWidth: i,
-        isDisabled: n,
-        isHovered: j,
-        isFocused: e,
-        isInvalid: a,
-        size: l,
-        className: Q(l)
-      }),
-      onPress: x,
-      onKeyDown: N,
-      "aria-haspopup": "listbox",
-      "aria-expanded": u,
-      children: [
-        o,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: f && f.length ? /* @__PURE__ */ s.jsx(
-          ds,
-          {
-            "aria-label": p ?? "Selected items",
-            onRemove: (e) => {
-              f && m(f.filter((j) => !e.has(j[d])));
-            },
-            children: f.map((e) => /* @__PURE__ */ s.jsx(us, { ...e, children: e == null ? void 0 : e[c] }, e[d]))
-          }
-        ) : /* @__PURE__ */ s.jsx(H, { color: "secondary", children: h }) }),
-        r,
-        /* @__PURE__ */ s.jsx(
-          v,
-          {
-            name: "chevron-down",
-            className: I("h-4 w-4 min-w-[16px] transition duration-150", u && "rotate-180")
-          }
-        )
-      ]
-    }
-  );
-}, K = ({
-  isRequired: r,
-  label: i,
-  optionalLabel: n
-}) => /* @__PURE__ */ s.jsxs("div", { className: I("flex items-center gap-3", i ? "justify-between" : "justify-end"), children: [
-  i ? /* @__PURE__ */ s.jsx(
-    ls,
-    {
-      className: os(),
-      style: { fontFamily: "var(--input-label-font-family)" },
-      children: i
-    }
-  ) : null,
-  r === !1 ? /* @__PURE__ */ s.jsx(
-    "span",
-    {
-      className: cs(),
-      style: { fontFamily: "var(--input-hint-font-family)" },
-      children: n
-    }
-  ) : null
-] }), C = ({ description: r, errorMessage: i }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-  r && /* @__PURE__ */ s.jsx(H, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: r }),
-  i && /* @__PURE__ */ s.jsx(H, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: i })
-] }), bs = ({
-  item: r,
-  itemLabelKey: i,
-  renderItem: n,
-  state: a
-}) => {
-  const d = r == null ? void 0 : r[i];
-  return n ? n(r, a) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
-    a.selected ? /* @__PURE__ */ s.jsx(v, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
-    d
-  ] });
-}, Ss = ({
-  clearLabel: r = "Clear",
-  endSlot: i,
-  isLoading: n,
-  onQueryChange: a,
-  query: d,
-  setQuery: c,
-  startSlot: p,
-  searchInputRef: m
-}) => {
-  const u = es(), [x, h] = b(!1), [l, o] = b(!1), f = fs(n ?? !1, { delay: 500, minDuration: 200 });
-  return X(() => {
-    var t;
-    (t = m.current) == null || t.focus();
-  }, []), /* @__PURE__ */ s.jsx(
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ i.jsx("div", { className: p($({ orientation: f, color: a, className: r })), children: typeof o == "function" ? o(u) : o }),
+    s && /* @__PURE__ */ i.jsx(m, { className: "mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: s }),
+    t && /* @__PURE__ */ i.jsx(
+      m,
+      {
+        className: "mt-1.5",
+        variant: "body-small",
+        color: "accent-danger",
+        slot: "errorMessage",
+        children: t
+      }
+    )
+  ] }) })
+);
+S.displayName = "RadioGroup";
+const F = l(({ children: o, className: r, ...a }, s) => /* @__PURE__ */ i.jsx(v, { ...a, ref: s, children: (t) => /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsxs("div", { className: "flex items-start gap-x-[--radio-gap-x]", children: [
+  /* @__PURE__ */ i.jsx(
     "div",
     {
-      className: G({
-        fullWidth: !0,
-        className: "box-border  py-3 pe-[--list-box-item-padding-end] ps-[--list-box-item-padding-start] backdrop-blur-xl"
-      }),
-      children: /* @__PURE__ */ s.jsxs(
-        "div",
+      className: p(
+        R({
+          className: r,
+          isDisabled: t.isDisabled,
+          isSelected: t.isSelected,
+          isFocusVisible: t.isFocusVisible,
+          isHovered: t.isHovered,
+          isPressed: t.isPressed
+        })
+      ),
+      children: t.isSelected && /* @__PURE__ */ i.jsx(
+        "svg",
         {
-          className: A(
-            J({
-              fullWidth: !0,
-              isFocused: x,
-              isHovered: l,
-              className: "bg-neutral-0 px-2"
-            })
-          ),
-          onPointerEnter: () => o(!0),
-          onPointerLeave: () => o(!1),
-          onMouseEnter: () => o(!0),
-          onMouseLeave: () => o(!1),
-          children: [
-            /* @__PURE__ */ s.jsx(v, { name: "search", className: "-me-2 h-4 w-4" }),
-            p,
-            /* @__PURE__ */ s.jsx(
-              D.Input,
-              {
-                ref: m,
-                id: u,
-                className: ms({ size: "small" }),
-                onChange: (t) => {
-                  c(t.target.value ?? ""), a == null || a(t.target.value);
-                },
-                value: d ?? "",
-                onFocus: () => h(!0),
-                onBlur: () => h(!1)
-              }
-            ),
-            d && d.length ? /* @__PURE__ */ s.jsx(
-              q,
-              {
-                "aria-label": r ?? "Clear",
-                className: A(
-                  Y({
-                    size: "small",
-                    color: "monochrome",
-                    variant: "ghost"
-                  })
-                ),
-                excludeFromTabOrder: !0,
-                onPress: () => {
-                  var t;
-                  c(""), (t = m.current) == null || t.focus();
-                },
-                children: /* @__PURE__ */ s.jsx(v, { name: "cross", className: "h-4 w-4" })
-              }
-            ) : null,
-            i,
-            f ? /* @__PURE__ */ s.jsx(xs, { className: "mx-2", size: "small" }) : null
-          ]
+          className: "w-[--radio-size]",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ i.jsx("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })
         }
       )
     }
-  );
-}, ss = ({
-  direction: r,
-  disabledItemIdKeys: i,
-  isLoading: n,
-  itemIdKey: a,
-  itemLabelKey: d,
-  items: c,
-  onQueryChange: p,
-  open: m,
-  renderItem: u,
-  setOpenPopover: x,
-  triggerRef: h,
-  searchInputRef: l
-}) => {
-  var N;
-  const { filteredItems: o, query: f, setQuery: t } = hs({
-    itemLabelKey: d,
-    items: c,
-    onQueryChange: p
-  });
-  return /* @__PURE__ */ s.jsx(
-    ns,
-    {
-      className: "lyra-list-box pb-2",
-      isOpen: m,
-      triggerRef: h,
-      showPopoverInDrawerOnSmallScreens: !0,
-      drawerPosition: "top",
-      onOpenChange: x,
-      shouldUpdatePosition: !0,
-      style: {
-        "--trigger-width": ((N = h.current) == null ? void 0 : N.offsetWidth) + "px",
-        direction: r
-      },
-      children: m ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsx(
-          Ss,
-          {
-            onQueryChange: p,
-            isLoading: n,
-            query: f,
-            setQuery: t,
-            searchInputRef: l
-          }
-        ),
-        o && o.length ? /* @__PURE__ */ s.jsx(
-          D.Options,
-          {
-            static: !0,
-            className: is({
-              className: "h-full max-h-[78dvh] overflow-y-auto sm:max-h-80"
-            }),
-            children: o.map((e) => /* @__PURE__ */ s.jsx(
-              D.Option,
-              {
-                className: ({ active: j, disabled: O, selected: k }) => A(
-                  as({
-                    active: j,
-                    disabled: O,
-                    selected: k
-                  })
-                ),
-                value: e,
-                disabled: i == null ? void 0 : i.includes(e == null ? void 0 : e[a]),
-                children: (j) => /* @__PURE__ */ s.jsx(
-                  bs,
-                  {
-                    item: e,
-                    state: j,
-                    renderItem: u,
-                    itemLabelKey: d
-                  }
-                )
-              },
-              e[a]
-            ))
-          }
-        ) : null
-      ] }) : null
-    }
-  );
-}, ft = ({
-  by: r,
-  defaultValue: i,
-  description: n,
-  disabledItemIdKeys: a,
-  endSlot: d,
-  errorMessage: c,
-  fullWidth: p = !0,
-  isDisabled: m,
-  isInvalid: u,
-  isLoading: x,
-  isRequired: h,
-  itemIdKey: l,
-  itemLabelKey: o,
-  items: f,
-  label: t,
-  name: N,
-  onChange: e,
-  onQueryChange: j,
-  optionalLabel: O = "Optional",
-  placeholder: k,
-  renderItem: E,
-  size: V = "medium",
-  startSlot: R,
-  value: U
-}) => {
-  const [W, z] = b(U ?? i), [y, S] = b(!1), Z = () => S(!0), T = () => S(!1), $ = M(null), g = L(
-    (F) => {
-      z(F), e == null || e(F), T();
-    },
-    [e]
-  ), B = M(null), { direction: w } = P();
-  return /* @__PURE__ */ s.jsx(
-    D,
-    {
-      disabled: m,
-      name: N,
-      value: W ?? "",
-      onChange: g,
-      by: r,
-      children: ({ disabled: F, value: ts }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
-          /* @__PURE__ */ s.jsx(
-            K,
-            {
-              label: t,
-              optionalLabel: O,
-              isRequired: h
-            }
-          ),
-          /* @__PURE__ */ s.jsx("div", { ref: B, children: /* @__PURE__ */ s.jsx(
-            js,
-            {
-              endSlot: d,
-              fullWidth: p,
-              isDisabled: F,
-              isInvalid: u,
-              open: y,
-              openPopover: Z,
-              placeholder: k,
-              size: V,
-              startSlot: R,
-              value: ts,
-              itemLabelKey: o,
-              itemIdKey: l,
-              onChange: g,
-              searchInputRef: $
-            }
-          ) }),
-          /* @__PURE__ */ s.jsx(C, { description: n, errorMessage: c })
-        ] }),
-        /* @__PURE__ */ s.jsx(
-          ss,
-          {
-            triggerRef: B,
-            itemIdKey: l,
-            itemLabelKey: o,
-            items: f,
-            open: y,
-            setOpenPopover: S,
-            renderItem: E,
-            disabledItemIdKeys: a,
-            direction: w,
-            onQueryChange: j,
-            isLoading: x,
-            searchInputRef: $
-          }
-        )
-      ] })
-    }
-  );
-}, pt = ({
-  by: r,
-  defaultValue: i,
-  description: n,
-  disabledItemIdKeys: a,
-  endSlot: d,
-  errorMessage: c,
-  fullWidth: p = !0,
-  isDisabled: m,
-  isInvalid: u,
-  isLoading: x,
-  isRequired: h,
-  itemIdKey: l,
-  itemLabelKey: o,
-  items: f,
-  label: t,
-  name: N,
-  onChange: e,
-  onQueryChange: j,
-  optionalLabel: O = "Optional",
-  placeholder: k,
-  renderItem: E,
-  size: V = "medium",
-  startSlot: R,
-  value: U
-}) => {
-  const [W, z] = b(U ?? i), [y, S] = b(!1), Z = () => S(!0), T = L(
-    (w) => {
-      z(w), e == null || e(w);
-    },
-    [e]
-  ), $ = M(null), g = M(null), { direction: B } = P();
-  return /* @__PURE__ */ s.jsx(
-    D,
+  ),
+  o && /* @__PURE__ */ i.jsx(
+    "div",
     {
-      disabled: m,
-      name: N,
-      value: W ?? [],
-      onChange: T,
-      by: r,
-      multiple: !0,
-      children: ({ disabled: w, value: F }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
-          /* @__PURE__ */ s.jsx(
-            K,
-            {
-              label: t,
-              optionalLabel: O,
-              isRequired: h
-            }
-          ),
-          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
-            Ns,
-            {
-              searchInputRef: $,
-              endSlot: d,
-              fullWidth: p,
-              isDisabled: w,
-              isInvalid: u,
-              open: y,
-              openPopover: Z,
-              placeholder: k,
-              size: V,
-              startSlot: R,
-              value: F,
-              itemLabelKey: o,
-              itemIdKey: l,
-              onChange: T
-            }
-          ) }),
-          /* @__PURE__ */ s.jsx(C, { description: n, errorMessage: c })
-        ] }),
-        /* @__PURE__ */ s.jsx(
-          ss,
-          {
-            searchInputRef: $,
-            triggerRef: g,
-            itemIdKey: l,
-            itemLabelKey: o,
-            items: f,
-            open: y,
-            setOpenPopover: S,
-            renderItem: E,
-            disabledItemIdKeys: a,
-            direction: B,
-            onQueryChange: j,
-            isLoading: x
-          }
-        )
-      ] })
+      className: h({
+        variant: "body-medium",
+        className: [
+          "leading-5",
+          t.isDisabled ? "cursor-not-allowed opacity-50" : ""
+        ]
+      }),
+      children: typeof o == "function" ? o(t) : o
     }
-  );
-};
+  )
+] }) }) }));
+F.displayName = "Radio";
 export {
-  pt as MultiSearchListField,
-  ft as SearchListField
+  F as Radio,
+  S as RadioGroup
 };