@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/filter/filter-chips.js

@@ -0,0 +1,50 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import * as d from "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { FilterChip as u } from "./filter-chip.js";
+const c = d.forwardRef(
+  ({
+    className: m,
+    filters: r = [],
+    onRemoveFilter: t,
+    onClearAll: o,
+    showClearAll: n = !0,
+    ...p
+  }, a) => r.length === 0 ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      ref: a,
+      className: s("flex flex-wrap items-center gap-2", m),
+      ...p,
+      children: [
+        r.map((e) => /* @__PURE__ */ i(
+          u,
+          {
+            label: e.label,
+            value: e.value,
+            onRemove: t ? () => t(e.id) : void 0
+          },
+          e.id
+        )),
+        n && o && r.length > 1 && /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: o,
+            className: "text-sm text-muted-foreground hover:text-foreground underline underline-offset-4",
+            children: "Clear all"
+          }
+        )
+      ]
+    }
+  )
+);
+c.displayName = "FilterChips";
+export {
+  c as FilterChips
+};

package/dist/esm/components/filter/filter-dropdown-item.js

@@ -0,0 +1,55 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import * as d from "react";
+import "@gearbox-protocol/sdk";
+import { cn as u } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const x = d.forwardRef(
+  ({
+    className: n,
+    inset: a,
+    title: i,
+    decimals: f,
+    maxValue: h,
+    state: t,
+    onSave: v,
+    onReset: e,
+    children: s,
+    ...m
+  }, l) => {
+    const o = t != null;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: l,
+        "data-has-state": o,
+        className: u(
+          "relative flex cursor-default select-none items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground",
+          a && "pl-8",
+          n
+        ),
+        ...m,
+        children: [
+          /* @__PURE__ */ r("span", { children: i || s }),
+          o && e && /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: (p) => {
+                p.stopPropagation(), e();
+              },
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "FilterDropdownItem";
+export {
+  x as FilterDropdownItem
+};

package/dist/esm/components/filter/filter-group.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dropdown-menu";
+import * as t from "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const e = t.forwardRef(({ className: o, ...m }, p) => /* @__PURE__ */ i(r.Group, { ref: p, className: a(o), ...m }));
+e.displayName = r.Group.displayName;
+export {
+  e as FilterGroup
+};

package/dist/esm/components/filter/filter-label.js

@@ -0,0 +1,25 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dropdown-menu";
+import * as e from "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const s = e.forwardRef(({ className: m, inset: r, ...t }, i) => /* @__PURE__ */ p(
+  o.Label,
+  {
+    ref: i,
+    className: a(
+      "px-2 py-1.5 text-sm font-semibold",
+      r && "pl-8",
+      m
+    ),
+    ...t
+  }
+));
+s.displayName = o.Label.displayName;
+export {
+  s as FilterLabel
+};

package/dist/esm/components/filter/filter-modal-item.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import * as x from "react";
+import "@gearbox-protocol/sdk";
+import { cn as g } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const b = x.forwardRef(
+  ({
+    className: i,
+    active: s,
+    disabled: t,
+    title: c,
+    state: e,
+    onOpen: a,
+    onReset: o,
+    children: l,
+    onClick: p,
+    ...m
+  }, u) => {
+    const r = e != null;
+    return /* @__PURE__ */ d(
+      "button",
+      {
+        ref: u,
+        type: "button",
+        "data-has-state": r,
+        className: g(
+          "flex cursor-pointer select-none items-center justify-between gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors w-full text-left",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          s && "bg-accent text-accent-foreground",
+          t && "cursor-not-allowed pointer-events-none opacity-50",
+          i
+        ),
+        onClick: p || a,
+        disabled: t,
+        ...m,
+        children: [
+          /* @__PURE__ */ n("span", { children: c || l }),
+          r && o && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: (f) => {
+                f.stopPropagation(), o();
+              },
+              className: "text-xs text-muted-foreground hover:text-foreground",
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+b.displayName = "FilterModalItem";
+export {
+  b as FilterModalItem
+};

package/dist/esm/components/filter/filter-modal.js

@@ -0,0 +1,218 @@
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import * as l from "react";
+import "../buttons/back-button/back-button.js";
+import { Button as N } from "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "@gearbox-protocol/sdk";
+import { cn as D } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import { extractTextFromLabel as j, serializeValue as R } from "../../utils/react.js";
+import "luxon";
+import "../../utils/z-index.js";
+import "../buttons/tab-button/tab-button.js";
+import { CheckboxItem as z } from "../checkbox-item/checkbox-item.js";
+import "../modal/modal.js";
+import { Dialog as X } from "../dialog/dialog.js";
+import "../dialog/dialog-container.js";
+import { DialogContent as Y } from "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import { DialogFooter as Z } from "../dialog/dialog-footer.js";
+import { DialogHeader as _ } from "../dialog/dialog-header.js";
+import { DialogTitle as $ } from "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../input/input.js";
+import "../label/label.js";
+import { SearchLine as ee } from "../search-line/search-line.js";
+import { Tabs as te, TabsList as re, TabsTrigger as oe, TabsContent as le } from "../tabs/tabs.js";
+import { useIntlTyped as ae } from "../typed-intl/index.js";
+function d(m, o) {
+  return m ? Array.isArray(m) ? m.includes(o) : m.has(o) : !1;
+}
+function Qe({
+  title: m,
+  state: o,
+  modalShow: f,
+  onOpen: F,
+  onClose: v,
+  onReset: T,
+  options: p,
+  tabbedOptions: n,
+  onSelect: C,
+  className: q,
+  optionsClassName: Q,
+  resetLabel: V,
+  applyLabel: B,
+  showApplyButton: E = !1,
+  showSearch: H = !1
+}) {
+  const { formatMessage: i } = ae(), [c, S] = l.useState(""), P = V ?? i({
+    messageId: "components.filterModal.reset",
+    defaultMessage: "Reset"
+  }), k = B ?? i({
+    messageId: "components.filterModal.apply",
+    defaultMessage: "Apply"
+  }), [y, G] = l.useState([]), [M, J] = l.useState([]), K = l.useCallback(() => {
+    T();
+  }, [T]), U = l.useCallback(() => {
+    v();
+  }, [v]), A = l.useMemo(() => {
+    if (!y) return [];
+    if (!c.trim())
+      return y;
+    const e = c.toLowerCase().trim();
+    return y.filter((t) => j(t.label).toLowerCase().includes(e));
+  }, [y, c]), u = l.useMemo(() => {
+    if (!M) return [];
+    if (!c.trim())
+      return M;
+    const e = c.toLowerCase().trim();
+    return M.map((t) => ({
+      ...t,
+      options: t.options.filter((a) => j(a.label).toLowerCase().includes(e))
+    })).filter((t) => t.options.length > 0);
+  }, [M, c]), I = l.useMemo(() => u.length > 0 ? u[0].tab : "", [u]), w = l.useRef(f);
+  l.useEffect(() => {
+    const e = w.current, t = f;
+    if (!e && t) {
+      if (p) {
+        const a = [...p].sort((s, h) => {
+          const b = d(o, s.value), g = d(o, h.value);
+          return b && !g ? -1 : !b && g ? 1 : 0;
+        });
+        G(a);
+      }
+      if (n) {
+        const a = n.map((s) => ({
+          ...s,
+          options: [...s.options].sort((h, b) => {
+            const g = d(o, h.value), O = d(o, b.value);
+            return g && !O ? -1 : !g && O ? 1 : 0;
+          })
+        }));
+        J(a);
+      }
+    } else e && !t && S("");
+    w.current = f;
+  }, [f, o, p, n]);
+  const L = l.useMemo(() => n ? n.reduce((e, t) => e + t.options.length, 0) : p?.length ?? 0, [p, n]), W = l.useMemo(
+    () => ({
+      value: c,
+      handleInput: (e) => {
+        S(e.target.value);
+      },
+      handleSubmit: (e) => {
+        e.preventDefault();
+      }
+    }),
+    [c]
+  );
+  return /* @__PURE__ */ r(
+    X,
+    {
+      open: f,
+      onOpenChange: (e) => e ? F() : v(),
+      children: /* @__PURE__ */ x(Y, { className: D("max-w-lg", q), children: [
+        /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r($, { children: m }) }),
+        H && /* @__PURE__ */ r(
+          ee,
+          {
+            searchState: W,
+            placeholder: i({
+              messageId: "components.filterModal.searchPlaceholder",
+              defaultMessage: "Search options..."
+            }),
+            size: "full"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: D(
+              n ? "" : "max-h-[60vh] overflow-y-auto",
+              Q
+            ),
+            children: n ? u.length === 0 ? /* @__PURE__ */ r("div", { className: "text-center text-sm text-muted-foreground", children: i(L === 0 ? {
+              messageId: "components.filterModal.noOptionsAvailable",
+              defaultMessage: "No options available"
+            } : {
+              messageId: "components.filterModal.noOptionsMatchSearch",
+              defaultMessage: "No options match your search"
+            }) }) : /* @__PURE__ */ x(
+              te,
+              {
+                defaultValue: I,
+                className: "w-full",
+                children: [
+                  /* @__PURE__ */ r(re, { className: "w-full justify-start", children: u.map((e) => /* @__PURE__ */ r(oe, { value: e.tab, children: e.label }, e.tab)) }),
+                  u.map((e) => /* @__PURE__ */ r(
+                    le,
+                    {
+                      value: e.tab,
+                      className: "mt-4 max-h-[60vh] overflow-y-auto",
+                      children: e.options.length === 0 ? /* @__PURE__ */ r("div", { className: "text-center text-sm text-muted-foreground", children: i({
+                        messageId: "components.filterModal.noOptionsAvailable",
+                        defaultMessage: "No options available"
+                      }) }) : /* @__PURE__ */ r("div", { className: "space-y-1", children: e.options.map((t) => {
+                        const a = d(o, t.value), s = R(t.value);
+                        return /* @__PURE__ */ r(
+                          z,
+                          {
+                            checked: a,
+                            onCheckedChange: (h) => C(t.value, h),
+                            children: t.label
+                          },
+                          s
+                        );
+                      }) })
+                    },
+                    e.tab
+                  ))
+                ]
+              },
+              I
+            ) : A.length === 0 ? /* @__PURE__ */ r("div", { className: "text-center text-sm text-muted-foreground", children: i(L === 0 ? {
+              messageId: "components.filterModal.noOptionsAvailable",
+              defaultMessage: "No options available"
+            } : {
+              messageId: "components.filterModal.noOptionsMatchSearch",
+              defaultMessage: "No options match your search"
+            }) }) : /* @__PURE__ */ r("div", { className: "space-y-1", children: A.map((e) => {
+              const t = d(o, e.value), a = R(e.value);
+              return /* @__PURE__ */ r(
+                z,
+                {
+                  checked: t,
+                  onCheckedChange: (s) => C(e.value, s),
+                  children: e.label
+                },
+                a
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ x(Z, { className: "flex-row justify-between gap-2 sm:justify-between", children: [
+          /* @__PURE__ */ r(
+            N,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: K,
+              disabled: !o || (Array.isArray(o) ? o.length === 0 : o.size === 0),
+              children: P
+            }
+          ),
+          E ? /* @__PURE__ */ r(N, { type: "button", onClick: U, children: k }) : /* @__PURE__ */ r(N, { type: "button", variant: "default", onClick: v, children: k })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Qe as FilterModal
+};

package/dist/esm/components/filter/filter-radio-item.js

@@ -0,0 +1,30 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-dropdown-menu";
+import * as m from "react";
+import { faCircle as n } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const d = m.forwardRef(({ className: o, children: r, ...i }, a) => /* @__PURE__ */ s(
+  t.RadioItem,
+  {
+    ref: a,
+    className: l(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      o
+    ),
+    ...i,
+    children: [
+      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(c, { icon: n, className: "size-2 fill-current" }) }) }),
+      r
+    ]
+  }
+));
+d.displayName = t.RadioItem.displayName;
+export {
+  d as FilterRadioItem
+};

package/dist/esm/components/filter/filter-separator.js

@@ -0,0 +1,21 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dropdown-menu";
+import * as a from "react";
+import "@gearbox-protocol/sdk";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const e = a.forwardRef(({ className: o, ...m }, t) => /* @__PURE__ */ p(
+  r.Separator,
+  {
+    ref: t,
+    className: i("-mx-1 my-1 h-px bg-muted", o),
+    ...m
+  }
+));
+e.displayName = r.Separator.displayName;
+export {
+  e as FilterSeparator
+};

package/dist/esm/components/filter/index.js

@@ -0,0 +1,26 @@
+import { FilterBlock as e } from "./filter-block.js";
+import { FilterCheckboxItem as l } from "./filter-checkbox-item.js";
+import { FilterChip as i } from "./filter-chip.js";
+import { FilterChips as f } from "./filter-chips.js";
+import { FilterDropdownItem as F } from "./filter-dropdown-item.js";
+import { FilterGroup as d } from "./filter-group.js";
+import { FilterLabel as c } from "./filter-label.js";
+import { FilterModal as k } from "./filter-modal.js";
+import { FilterModalItem as b } from "./filter-modal-item.js";
+import { FilterRadioItem as s } from "./filter-radio-item.js";
+import { FilterSeparator as M } from "./filter-separator.js";
+import { filterBlockVariants as w } from "./variants.js";
+export {
+  e as FilterBlock,
+  l as FilterCheckboxItem,
+  i as FilterChip,
+  f as FilterChips,
+  F as FilterDropdownItem,
+  d as FilterGroup,
+  c as FilterLabel,
+  k as FilterModal,
+  b as FilterModalItem,
+  s as FilterRadioItem,
+  M as FilterSeparator,
+  w as filterBlockVariants
+};

package/dist/esm/components/filter/interface.js

@@ -0,0 +1 @@
+

package/dist/esm/components/filter/variants.js

@@ -0,0 +1,17 @@
+import { cva as a } from "class-variance-authority";
+const r = a("w-full", {
+  variants: {
+    variant: {
+      default: "",
+      elevated: "shadow-lg",
+      outlined: "border-2",
+      ghost: "border-0 shadow-none"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  r as filterBlockVariants
+};

package/dist/esm/components/form/form-field.js

@@ -0,0 +1,42 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { Input as p } from "../input/input.js";
+import { Label as f } from "../label/label.js";
+import { useFormFieldIds as u } from "../../utils/a11y.js";
+import { cn as F } from "../../utils/cn.js";
+function g({
+  label: m,
+  error: d,
+  required: e,
+  helperText: i,
+  inputProps: s,
+  className: n
+}) {
+  const { inputId: a, errorId: c, helperId: t } = u(), r = !!d;
+  return /* @__PURE__ */ l("div", { className: F("space-y-2", n), children: [
+    /* @__PURE__ */ o(
+      f,
+      {
+        htmlFor: a,
+        required: e,
+        variant: r ? "error" : "default",
+        children: m
+      }
+    ),
+    /* @__PURE__ */ o(
+      p,
+      {
+        ...s,
+        id: a,
+        hasError: r,
+        errorMessage: d,
+        "aria-invalid": r,
+        "aria-describedby": r ? c : i ? t : void 0,
+        "aria-required": e
+      }
+    ),
+    !r && i && /* @__PURE__ */ o("p", { id: t, className: "text-sm text-muted-foreground", children: i })
+  ] });
+}
+export {
+  g as FormField
+};

package/dist/esm/components/form/index.js

@@ -0,0 +1,4 @@
+import { FormField as e } from "./form-field.js";
+export {
+  e as FormField
+};

package/dist/esm/components/formatted-number/formatted-number.js

@@ -0,0 +1,59 @@
+import { jsx as n, jsxs as i, Fragment as o } from "react/jsx-runtime";
+import { SimpleTooltip as g } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as u } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function w({
+  value: t,
+  decimalPartLength: r = 4,
+  hideZerosIfMore: p = 3,
+  className: m,
+  ...s
+}) {
+  const d = () => {
+    if (t === void 0 || typeof t == "string")
+      return t;
+    const e = t;
+    if ("originalValue" in e)
+      return e.originalValue;
+    const [a, l] = e.repeat > 0 && e.repeat > p ? ["0", e.repeat] : ["0".repeat(e.repeat), void 0], c = e.decimal && e.decimal.length > 0, h = /* @__PURE__ */ i("span", { children: [
+      e.integer,
+      c && /* @__PURE__ */ i(o, { children: [
+        ".",
+        a.repeat(l || 0),
+        e.decimal
+      ] })
+    ] }), f = /* @__PURE__ */ i("span", { children: [
+      e.integer,
+      c && /* @__PURE__ */ i(o, { children: [
+        ".",
+        /* @__PURE__ */ n(x, { zeroPart: a, repeats: l }),
+        (e.decimal?.slice(0, r) ?? "").replace(/0+$/, "")
+      ] })
+    ] });
+    return /* @__PURE__ */ n(
+      g,
+      {
+        placement: "top",
+        title: f,
+        className: "break-all",
+        children: h
+      }
+    );
+  };
+  return /* @__PURE__ */ n("span", { className: u("relative", m), ...s, children: d() });
+}
+function x({ zeroPart: t, repeats: r }) {
+  return /* @__PURE__ */ i(o, { children: [
+    t,
+    r !== void 0 && r > 0 && /* @__PURE__ */ n("span", { className: "relative -bottom-[3px] text-[calc(1em-2px)]", children: r })
+  ] });
+}
+export {
+  w as FormattedNumberString
+};

package/dist/esm/components/formatted-number/index.js

@@ -0,0 +1,4 @@
+import { FormattedNumberString as e } from "./formatted-number.js";
+export {
+  e as FormattedNumberString
+};