@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

package/dist/esm/components/select/select.js

@@ -1,14 +1,16 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-select";
-import { cva as u } from "class-variance-authority";
-import { ChevronDown as c, ChevronUp as h, Check as g } from "lucide-react";
+import { cva as g } from "class-variance-authority";
 import * as l from "react";
+import { faCaretDown as m, faCaretUp as b, faCheck as y } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as i } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const b = (a) => /* @__PURE__ */ t(e.Root, { ...a });
-b.displayName = "Select";
-const T = e.Group, V = e.Value, y = u(
+import "luxon";
+const h = (a) => /* @__PURE__ */ t(e.Root, { ...a });
+h.displayName = "Select";
+const U = e.Group, L = e.Value, x = g(
   "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
@@ -28,20 +30,26 @@ const T = e.Group, V = e.Value, y = u(
       variant: "default"
     }
   }
-), w = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, f) => /* @__PURE__ */ i(
+), N = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, u) => /* @__PURE__ */ c(
   e.Trigger,
   {
-    ref: f,
-    className: s(y({ size: r, variant: d, className: a })),
+    ref: u,
+    className: s(x({ size: r, variant: d, className: a })),
     ...n,
     children: [
       o,
-      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(c, { className: "h-4 w-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" }) })
+      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(
+        i,
+        {
+          icon: m,
+          className: "size-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180"
+        }
+      ) })
     ]
   }
 ));
-w.displayName = e.Trigger.displayName;
-const m = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+N.displayName = e.Trigger.displayName;
+const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.ScrollUpButton,
   {
     ref: r,
@@ -50,11 +58,11 @@ const m = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
       a
     ),
     ...o,
-    children: /* @__PURE__ */ t(h, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ t(i, { icon: b, className: "size-4" })
   }
 ));
-m.displayName = e.ScrollUpButton.displayName;
-const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+p.displayName = e.ScrollUpButton.displayName;
+const f = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.ScrollDownButton,
   {
     ref: r,
@@ -63,11 +71,11 @@ const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
       a
     ),
     ...o,
-    children: /* @__PURE__ */ t(c, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ t(i, { icon: m, className: "size-4" })
   }
 ));
-p.displayName = e.ScrollDownButton.displayName;
-const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ i(
+f.displayName = e.ScrollDownButton.displayName;
+const w = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
   e.Content,
   {
     ref: n,
@@ -79,7 +87,7 @@ const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
     position: r,
     ...d,
     children: [
-      /* @__PURE__ */ t(m, {}),
+      /* @__PURE__ */ t(p, {}),
       /* @__PURE__ */ t(
         e.Viewport,
         {
@@ -90,12 +98,12 @@ const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
           children: o
         }
       ),
-      /* @__PURE__ */ t(p, {})
+      /* @__PURE__ */ t(f, {})
     ]
   }
 ) }));
-x.displayName = e.Content.displayName;
-const N = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+w.displayName = e.Content.displayName;
+const S = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.Label,
   {
     ref: r,
@@ -103,8 +111,8 @@ const N = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
     ...o
   }
 ));
-N.displayName = e.Label.displayName;
-const S = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ i(
+S.displayName = e.Label.displayName;
+const v = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ c(
   e.Item,
   {
     ref: d,
@@ -114,13 +122,13 @@ const S = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__
     ),
     ...r,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(g, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(i, { icon: y, className: "size-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
 ));
-S.displayName = e.Item.displayName;
-const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+v.displayName = e.Item.displayName;
+const z = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.Separator,
   {
     ref: r,
@@ -128,17 +136,17 @@ const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
     ...o
   }
 ));
-v.displayName = e.Separator.displayName;
+z.displayName = e.Separator.displayName;
 export {
-  b as Select,
-  x as SelectContent,
-  T as SelectGroup,
-  S as SelectItem,
-  N as SelectLabel,
-  p as SelectScrollDownButton,
-  m as SelectScrollUpButton,
-  v as SelectSeparator,
-  w as SelectTrigger,
-  V as SelectValue,
-  y as selectTriggerVariants
+  h as Select,
+  w as SelectContent,
+  U as SelectGroup,
+  v as SelectItem,
+  S as SelectLabel,
+  f as SelectScrollDownButton,
+  p as SelectScrollUpButton,
+  z as SelectSeparator,
+  N as SelectTrigger,
+  L as SelectValue,
+  x as selectTriggerVariants
 };

package/dist/esm/components/separate-line/index.js

@@ -0,0 +1,4 @@
+import { SeparateLine as a } from "./separate-line.js";
+export {
+  a as SeparateLine
+};

package/dist/esm/components/separate-line/separate-line.js

@@ -0,0 +1,28 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as p from "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const s = p.forwardRef(
+  ({ outOfBound: r = 0, margin: e = 10, left: t = 0, thickness: o = 1, className: i }, a) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: a,
+      className: d(
+        "relative flex flex-row flex-nowrap items-center justify-center border-b border-gray-20",
+        i
+      ),
+      style: {
+        left: t ? -t : void 0,
+        margin: e ? `${e}px 0` : void 0,
+        width: r ? `calc(100% + ${r}px)` : void 0,
+        borderBottomWidth: o
+      }
+    }
+  )
+);
+s.displayName = "SeparateLine";
+export {
+  s as SeparateLine
+};

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

@@ -1,20 +1,21 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-separator";
 import * as e from "react";
+import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const s = e.forwardRef(
-  ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ i(
+  ({ className: t, orientation: r = "horizontal", decorative: a = !0, ...m }, p) => /* @__PURE__ */ i(
     o.Root,
     {
       ref: p,
-      decorative: t,
+      decorative: a,
       orientation: r,
       className: l(
         "shrink-0 bg-border",
         r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        a
+        t
       ),
       ...m
     }

package/dist/esm/components/short-string/short-string.js

@@ -1,27 +1,21 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { TooltipProvider as p, Tooltip as c, TooltipTrigger as d, TooltipContent as f } from "../tooltip/tooltip.js";
-import { cn as a } from "../../utils/cn.js";
-function m({
-  children: t,
-  maxLength: i,
-  className: n,
-  showTooltip: o = !0
+import { jsx as r } from "react/jsx-runtime";
+import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
+import "luxon";
+function j({
+  children: o,
+  maxLength: t,
+  showTooltip: m = !0,
+  className: i
 }) {
-  if (i === void 0) {
-    const l = /* @__PURE__ */ r("span", { className: a("inline-block max-w-full truncate", n), children: t });
-    return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-      /* @__PURE__ */ r(d, { asChild: !0, children: l }),
-      /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-    ] }) }) : l;
-  }
-  if (!t || t.length <= i)
-    return /* @__PURE__ */ r("span", { className: n, children: t });
-  const e = `${t.slice(0, i)}...`;
-  return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-    /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r("span", { className: n, children: e }) }),
-    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-  ] }) }) : /* @__PURE__ */ r("span", { className: n, children: e });
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ r("span", { className: i, children: S(e, p) });
+  return typeof o == "string" && t !== void 0 ? m && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(f, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  m as ShortString
+  j as ShortString
 };

package/dist/esm/components/signatures/confirmation-item.js

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import "../buttons/back-button/back-button.js";
 import "../buttons/button/button.js";
 import { CopyButton as m } from "../buttons/copy-button/copy-button.js";
@@ -6,31 +6,32 @@ import { ExternalButton as p } from "../buttons/external-button/external-button.
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
 import { shortenHash as s } from "../../utils/format.js";
-import "@gearbox-protocol/sdk";
+import "luxon";
 import "../buttons/tab-button/tab-button.js";
 import { Identicon as a } from "./identicon.js";
-function B({
-  confirmation: e,
+function C({
+  confirmation: r,
   note: o,
   explorerUrl: i
 }) {
-  return /* @__PURE__ */ r("div", { className: "group relative flex items-center", children: [
+  return /* @__PURE__ */ e("div", { className: "group relative flex items-center", children: [
     /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
-    /* @__PURE__ */ r("div", { className: "ml-10 flex items-center gap-2", children: [
-      /* @__PURE__ */ t(a, { address: e, size: 32 }),
-      /* @__PURE__ */ t("span", { className: "text-foreground whitespace-nowrap", children: s(e) }),
+    /* @__PURE__ */ e("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ t(a, { address: r, size: 32 }),
+      /* @__PURE__ */ t("span", { className: "text-foreground whitespace-nowrap", children: s(r) }),
       o && /* @__PURE__ */ t("span", { className: "text-gray-500 text-xs whitespace-nowrap", children: o }),
-      /* @__PURE__ */ r("div", { className: "flex opacity-0 transition-opacity group-hover:opacity-100", children: [
-        /* @__PURE__ */ t(m, { text: e }),
+      /* @__PURE__ */ e("div", { className: "flex opacity-0 transition-opacity group-hover:opacity-100", children: [
+        /* @__PURE__ */ t(m, { text: r }),
         i && /* @__PURE__ */ t(p, { url: i })
       ] })
     ] })
   ] });
 }
 export {
-  B as ConfirmationItem
+  C as ConfirmationItem
 };

package/dist/esm/components/signatures/vertical-timeline.js

@@ -1,55 +1,56 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Check as n, X as o } from "lucide-react";
-import { useState as d } from "react";
-function f({
-  steps: r,
-  minWidth: c = 300
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { faCheck as m, faXmark as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
+function b({
+  steps: s,
+  minWidth: i = 300
 }) {
-  const [s, i] = d(r.map(() => !1));
-  return /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ a("div", { className: `relative min-w-[${c}px]`, children: [
+  const [r, o] = n(s.map(() => !1));
+  return /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ l("div", { className: `relative min-w-[${i}px]`, children: [
     /* @__PURE__ */ t("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100%-20px)] bg-gray-800" }),
-    /* @__PURE__ */ t("div", { className: "space-y-4", children: r.map((e, l) => /* @__PURE__ */ a(
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: s.map((e, a) => /* @__PURE__ */ l(
       "div",
       {
         children: [
-          e.type === "default" && e.status !== "not-started" && /* @__PURE__ */ a("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ a(
+          e.type === "default" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ l(
               "div",
               {
                 className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${e.status === "success" ? "bg-green-500" : e.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
                 children: [
-                  e.status === "success" && /* @__PURE__ */ t(n, { className: "h-3 w-3 text-black" }),
-                  e.status === "error" && /* @__PURE__ */ t(o, { className: "h-3 w-3 text-black" })
+                  e.status === "success" && /* @__PURE__ */ t(c, { icon: m, className: "size-3 text-black" }),
+                  e.status === "error" && /* @__PURE__ */ t(c, { icon: d, className: "size-3 text-black" })
                 ]
               }
             ),
             /* @__PURE__ */ t("span", { className: "ml-10 text-foreground", children: e.title })
           ] }),
-          e.type === "extention" && e.status !== "not-started" && /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ a("div", { className: "relative flex items-center", children: [
+          e.type === "extention" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
               /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
               /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => i([
-                    ...s.slice(0, l),
-                    !s[l],
-                    ...s.slice(l + 1)
+                  onClick: () => o([
+                    ...r.slice(0, a),
+                    !r[a],
+                    ...r.slice(a + 1)
                   ]),
                   className: "ml-10 text-green-500 hover:underline cursor-pointer",
-                  children: s[l] ? "Hide all" : "Show all"
+                  children: r[a] ? "Hide all" : "Show all"
                 }
               )
             ] }),
-            s[l] && e.children
+            r[a] && e.children
           ] })
         ]
       },
-      `step-${l}`
+      `step-${a}`
     )) })
   ] }) });
 }
 export {
-  f as VerticalTimeline
+  b as VerticalTimeline
 };

package/dist/esm/components/simple-dropdown/index.js

@@ -0,0 +1,4 @@
+import { SimpleDropdown as r } from "./simple-dropdown.js";
+export {
+  r as SimpleDropdown
+};

package/dist/esm/components/simple-dropdown/simple-dropdown.js

@@ -0,0 +1,64 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-dropdown-menu";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+function w({
+  children: a,
+  title: i,
+  asChild: o = !1,
+  placement: n = "bottom",
+  align: d = "start",
+  sideOffset: s = 4,
+  maxWidth: m,
+  minWidth: p,
+  open: l,
+  onOpenChange: f,
+  modal: c = !1,
+  className: g,
+  triggerClassName: b
+}) {
+  const u = r(
+    "z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    g
+  );
+  return /* @__PURE__ */ h(
+    t.Root,
+    {
+      open: l,
+      onOpenChange: f,
+      modal: c,
+      children: [
+        /* @__PURE__ */ e(
+          t.Trigger,
+          {
+            asChild: o,
+            className: o ? void 0 : r(
+              "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+              b
+            ),
+            children: i
+          }
+        ),
+        /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+          t.Content,
+          {
+            side: n,
+            align: d,
+            sideOffset: s,
+            className: u,
+            style: { maxWidth: m, minWidth: p },
+            children: a
+          }
+        ) })
+      ]
+    }
+  );
+}
+w.displayName = "SimpleDropdown";
+export {
+  w as SimpleDropdown
+};

package/dist/esm/components/skeleton/skeleton-stack.js

@@ -1,31 +1,32 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useMemo as c } from "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 import { Skeleton as n } from "./skeleton.js";
 const l = {
   sm: "space-y-2",
   md: "space-y-3",
   lg: "space-y-4"
 };
-function g({
+function h({
   lines: o = 5,
-  className: e,
-  gap: t = "md"
+  className: t,
+  gap: e = "md"
 }) {
   const s = c(
     () => Array.from({ length: o }, () => crypto.randomUUID()),
     [o]
   );
-  return /* @__PURE__ */ m("div", { className: r(l[t], e), children: s.map((a, p) => /* @__PURE__ */ m(
+  return /* @__PURE__ */ m("div", { className: r(l[e], t), children: s.map((p, a) => /* @__PURE__ */ m(
     n,
     {
-      className: r("h-4 w-full", p === o - 1 && "w-3/4")
+      className: r("h-4 w-full", a === o - 1 && "w-3/4")
     },
-    a
+    p
   )) });
 }
 export {
-  g as SkeletonStack
+  h as SkeletonStack
 };

package/dist/esm/components/skeleton/skeleton.js

@@ -1,9 +1,10 @@
 import { jsx as a, Fragment as f } from "react/jsx-runtime";
 import { cva as p } from "class-variance-authority";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as w } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const c = p("animate-pulse rounded-md bg-muted", {
   variants: {
     variant: {
@@ -48,21 +49,21 @@ const c = p("animate-pulse rounded-md bg-muted", {
     height: "md"
   }
 });
-function S({
+function V({
   className: s,
   variant: l,
   speed: n,
   width: t,
   height: e,
-  loading: d = !0,
+  loading: m = !0,
   children: i,
-  style: m,
+  style: d,
   ...h
 }) {
-  if (!d && i !== void 0)
+  if (!m && i !== void 0)
     return /* @__PURE__ */ a(f, { children: i });
   const r = typeof t == "number", o = typeof e == "number", u = {
-    ...m,
+    ...d,
     ...r && { width: `${t}px` },
     ...o && { height: `${e}px` }
   };
@@ -84,6 +85,6 @@ function S({
   );
 }
 export {
-  S as Skeleton,
+  V as Skeleton,
   c as skeletonVariants
 };

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

@@ -1,4 +1,18 @@
 import { Slider as o } from "./slider.js";
+import { SliderProvider as d, useSliderContext as l } from "./slider-context.js";
+import { SliderMark as i } from "./slider-mark.js";
+import { SliderTrack as x } from "./slider-track.js";
+import { THEME_COLOR_MAP as n, THUMB_HALF as p, THUMB_SIZE as s, getIntervalBounds as M, getThumbInBoundsOffset as T, resolveColor as u } from "./types.js";
 export {
-  o as Slider
+  o as Slider,
+  i as SliderMark,
+  d as SliderProvider,
+  x as SliderTrack,
+  n as THEME_COLOR_MAP,
+  p as THUMB_HALF,
+  s as THUMB_SIZE,
+  M as getIntervalBounds,
+  T as getThumbInBoundsOffset,
+  u as resolveColor,
+  l as useSliderContext
 };

package/dist/esm/components/slider/slider-context.js

@@ -0,0 +1,22 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as d, useMemo as s, useContext as x } from "react";
+const r = d(void 0);
+function C({
+  children: n,
+  colorIntervals: e,
+  min: t,
+  max: o
+}) {
+  const i = s(
+    () => ({ colorIntervals: e, min: t, max: o }),
+    [e, t, o]
+  );
+  return /* @__PURE__ */ u(r.Provider, { value: i, children: n });
+}
+function m() {
+  return x(r);
+}
+export {
+  C as SliderProvider,
+  m as useSliderContext
+};

package/dist/esm/components/slider/slider-mark.js

@@ -0,0 +1,33 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useSliderContext as i } from "./slider-context.js";
+import { getThumbInBoundsOffset as p, getIntervalBounds as d, resolveColor as b } from "./types.js";
+function C({ value: r, min: t, max: o, onClick: n }) {
+  const a = i()?.colorIntervals, s = o - t;
+  if (s <= 0) return null;
+  const c = (r - t) / s * 100, l = p(c), u = m(r, a);
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: "absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-auto cursor-pointer border-0 p-0 appearance-none bg-transparent",
+      style: {
+        left: `calc(${c}% + ${l}px)`,
+        top: "50%",
+        backgroundColor: u ?? "hsl(var(--gray-40))"
+      },
+      onClick: () => n?.(r)
+    }
+  );
+}
+function m(r, t) {
+  if (t)
+    for (const o of t) {
+      const { start: n, end: e } = d(o);
+      if (r >= n && r <= e)
+        return b(o.color) ?? "hsl(var(--success))";
+    }
+}
+export {
+  C as SliderMark
+};