@gardenfi/garden-book 0.2.31 → 0.3.0-beta.2

package/dist/Logo/index.js

@@ -3,9 +3,9 @@ import { BTCLogo as m } from "./BTCLogo.js";
 import { CatalogLogo as p } from "./CatalogLogo.js";
 import { Coinbase as a } from "./Coinbase.js";
 import { EthereumLogo as g } from "./EthereumLogo.js";
-import { GardenExplorer as L } from "./GardenExplorer.js";
+import { GardenExplorer as l } from "./GardenExplorer.js";
 import { GardenFullLogo as G } from "./GardenFullLogo.js";
-import { GardenLogo as C } from "./GardenLogo.js";
+import { GardenLogo as c } from "./GardenLogo.js";
 import { GardenLogoText as T } from "./GardenLogoText.js";
 import { GardenStrokeIcon as D } from "./GardenStrokeIcon.js";
 import { GMXLogo as I } from "./GMXLogo.js";
@@ -30,18 +30,16 @@ import { GardenIcon as mo } from "./GardenIcon.js";
 import { GardenIconOutline as po } from "./GardenIconOutline.js";
 import { NFTIcon as ao } from "./NFTIcon.js";
 import { GardenExplorerAlt as go } from "./GardenExplorerAlt.js";
-import { GardenDocs as lo } from "./GardenDocs.js";
+import { GardenDocs as Lo } from "./GardenDocs.js";
 import { GardenLogoMarkDark as io } from "./GardenLogoMarkDark.js";
-import { GardenLogoMarkLight as co } from "./GardenLogoMarkLight.js";
+import { GardenLogoMarkLight as Co } from "./GardenLogoMarkLight.js";
 import { GardenLogoDark as ko } from "./GardenLogoDark.js";
 import { GardenLogoLight as uo } from "./GardenLogoLight.js";
-import { Code4renaLogo as ho } from "./Code4renaLogo.js";
 export {
   e as ArbitrumLogo,
   m as BTCLogo,
   q as Camelot,
   p as CatalogLogo,
-  ho as Code4renaLogo,
   a as Coinbase,
   v as DLCBTC,
   V as Debridge,
@@ -49,17 +47,17 @@ export {
   g as EthereumLogo,
   H as GMX,
   I as GMXLogo,
-  lo as GardenDocs,
-  L as GardenExplorer,
+  Lo as GardenDocs,
+  l as GardenExplorer,
   go as GardenExplorerAlt,
   G as GardenFullLogo,
   mo as GardenIcon,
   po as GardenIconOutline,
-  C as GardenLogo,
+  c as GardenLogo,
   ko as GardenLogoDark,
   uo as GardenLogoLight,
   io as GardenLogoMarkDark,
-  co as GardenLogoMarkLight,
+  Co as GardenLogoMarkLight,
   T as GardenLogoText,
   D as GardenStrokeIcon,
   ao as NFTIcon,

package/dist/OTPInput/OTPInput.d.ts

@@ -0,0 +1,11 @@
+export type OTPInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    length?: number;
+    white?: boolean;
+};
+export declare const OTPInput: ({ value, onChange, onComplete, disabled, autoFocus, className, length, white, }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/OTPInput/index.d.ts

@@ -0,0 +1,2 @@
+export { OTPInput } from './OTPInput';
+export type { OTPInputProps } from './OTPInput';

package/dist/OTPInput/index.js

@@ -0,0 +1,88 @@
+import { jsx as R } from "react/jsx-runtime";
+import { useState as T, useRef as l, useEffect as m } from "react";
+import { cn as h } from "../utils/index.js";
+const L = ({
+  value: p,
+  onChange: g,
+  onComplete: w,
+  disabled: a = !1,
+  autoFocus: y = !0,
+  className: k,
+  length: c = 6,
+  white: A = !1
+}) => {
+  const [o, i] = T(Array(c).fill("")), s = l([]), D = l(!1), O = l(p), j = l(w);
+  m(() => {
+    j.current = w;
+  }, [w]), m(() => {
+    if (p === "" && O.current !== "" && o.some((t) => t !== "")) {
+      const t = setTimeout(() => {
+        i(Array(c).fill("")), D.current = !1;
+      }, 0);
+      return () => clearTimeout(t);
+    }
+    O.current = p;
+  }, [p, c, o]), m(() => {
+    var t;
+    y && s.current[0] && !a && ((t = s.current[0]) == null || t.focus());
+  }, [y, a]), m(() => {
+    const t = o.join("");
+    t.length === c && j.current && !a && !D.current && (D.current = !0, j.current(t));
+  }, [o, c, a]);
+  const I = (t, r) => {
+    var u;
+    const e = r.replace(/\D/g, "");
+    if (e.length > 1) return;
+    const n = [...o];
+    n[t] = e, i(n), g(n.join("")), e && t < c - 1 && ((u = s.current[t + 1]) == null || u.focus());
+  }, P = (t, r) => {
+    var e, n, u;
+    if (r.key === "Backspace") {
+      if (o[t]) {
+        const f = [...o];
+        f[t] = "", i(f), g(f.join(""));
+      } else if (t > 0) {
+        const f = [...o];
+        f[t - 1] = "", i(f), g(f.join("")), (e = s.current[t - 1]) == null || e.focus();
+      }
+    } else r.key === "ArrowLeft" && t > 0 ? (n = s.current[t - 1]) == null || n.focus() : r.key === "ArrowRight" && t < c - 1 && ((u = s.current[t + 1]) == null || u.focus());
+  }, S = (t) => {
+    var u;
+    t.preventDefault();
+    const r = t.clipboardData.getData("text").replace(/\D/g, "").slice(0, c);
+    if (r.length === 0) return;
+    const e = [...o];
+    for (let f = 0; f < c; f++)
+      e[f] = r[f] || "";
+    i(e), g(e.join(""));
+    const n = Math.min(r.length - 1, c - 1);
+    (u = s.current[n]) == null || u.focus();
+  };
+  return /* @__PURE__ */ R("div", { className: h("gf-flex gf-gap-3 gf-items-center gf-w-full", k), children: o.map((t, r) => /* @__PURE__ */ R(
+    "input",
+    {
+      ref: (e) => {
+        s.current[r] = e;
+      },
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: t,
+      onChange: (e) => I(r, e.target.value),
+      onKeyDown: (e) => P(r, e),
+      onPaste: S,
+      disabled: a,
+      autoFocus: y && r === 0,
+      className: h(
+        "gf-flex-1 gf-min-w-0 gf-h-11 gf-text-center gf-text-[20px] gf-text-primaryIris gf-rounded-lg gf-bg-white/70",
+        "focus:gf-outline-none focus:gf-ring-0 focus:gf-ring-offset-0",
+        "disabled:gf-opacity-50 disabled:gf-cursor-not-allowed",
+        A && "gf-bg-white/50"
+      )
+    },
+    r
+  )) });
+};
+export {
+  L as OTPInput
+};

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+export type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /** Disables all controls (e.g. while a page request is in flight). */
+    disabled?: boolean;
+    /** Max numbered buttons to show before ellipsis. Default 5. */
+    maxVisiblePages?: number;
+    className?: string;
+};
+/** Page navigation with prev/next arrows, numbered buttons, and ellipsis for large ranges. Returns null when `totalPages ≤ 1`. */
+export declare const Pagination: ({ currentPage, totalPages, onPageChange, disabled, maxVisiblePages, className, }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
+/** Skeleton placeholder matching the Pagination layout while page data loads. */
+export declare const SkeletonPagination: FC;

package/dist/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination, SkeletonPagination } from './Pagination';
+export type { PaginationProps } from './Pagination';

package/dist/Pagination/index.js

@@ -0,0 +1,111 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { KeyboardLeftIcon as d } from "../Icons/KeyboardLeftIcon.js";
+import { KeyboardRightIcon as a } from "../Icons/KeyboardRightIcon.js";
+import { Typography as o } from "../Typography/index.js";
+import { cn as c } from "../utils/index.js";
+const x = (f, g, s = 5) => {
+  if (f <= s)
+    return Array.from({ length: f }, (t, h) => h + 1);
+  const i = [], l = Math.floor(s / 2);
+  let r = Math.max(1, g - l), n = Math.min(f, g + l);
+  g <= l ? n = s : g > f - l && (r = f - s + 1), r > 1 && (i.push(1), r > 2 && i.push("..."));
+  for (let t = r; t <= n; t++) i.push(t);
+  return n < f && (n < f - 1 && i.push("..."), i.push(f)), i;
+}, M = ({
+  currentPage: f,
+  totalPages: g,
+  onPageChange: s,
+  disabled: i = !1,
+  maxVisiblePages: l = 5,
+  className: r
+}) => {
+  if (g <= 1) return null;
+  const n = f <= 1 || i, t = f >= g || i, h = x(g, f, l), y = () => {
+    n || s(f - 1);
+  }, u = () => {
+    t || s(f + 1);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: c(
+        "gf-flex gf-gap-1 gf-justify-center gf-items-center sm:gf-mt-1 gf-mb-8",
+        r
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          d,
+          {
+            className: c(
+              "gf-w-5 sm:gf-w-6 gf-h-5 sm:gf-h-6 gf-py-[5px] sm:gf-py-1.5 gf-cursor-pointer",
+              n && "gf-opacity-50 gf-cursor-not-allowed"
+            ),
+            onClick: y
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "gf-flex gf-gap-px", children: h.map(
+          (m, w) => m === "..." ? /* @__PURE__ */ e(
+            o,
+            {
+              size: "h5",
+              breakpoints: { sm: "h4", md: "h3" },
+              className: "gf-p-1.5 gf-min-w-6 sm:gf-min-w-7 gf-h-6 sm:gf-h-7 gf-flex gf-items-center gf-justify-center",
+              children: "..."
+            },
+            `ellipsis-${w}`
+          ) : /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => m !== f && s(m),
+              disabled: i,
+              className: c(
+                "gf-p-1.5 gf-min-w-6 sm:gf-min-w-7 gf-h-6 sm:gf-h-7 gf-rounded-full gf-flex gf-items-center gf-justify-center",
+                f === m && "gf-bg-white/50"
+              ),
+              children: /* @__PURE__ */ e(
+                o,
+                {
+                  size: "h5",
+                  breakpoints: { sm: "h4", md: "h3" },
+                  weight: f === m ? "medium" : "regular",
+                  children: m
+                }
+              )
+            },
+            m
+          )
+        ) }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            className: c(
+              "gf-w-5 sm:gf-w-6 gf-h-5 sm:gf-h-6 gf-py-[5px] sm:gf-py-1.5 gf-cursor-pointer",
+              t && "gf-opacity-50 gf-cursor-not-allowed"
+            ),
+            onClick: u
+          }
+        )
+      ]
+    }
+  );
+}, z = () => /* @__PURE__ */ p("div", { className: "gf-flex gf-gap-1 gf-justify-center gf-items-center gf-mt-1 gf-mb-8", children: [
+  /* @__PURE__ */ e(d, { className: "gf-w-6 gf-h-6 gf-py-1.5 gf-opacity-50" }),
+  /* @__PURE__ */ p("div", { className: "gf-flex gf-gap-1", children: [
+    /* @__PURE__ */ e("div", { className: "gf-p-1.5 gf-min-w-7 gf-min-h-7 gf-rounded-full gf-flex gf-items-center gf-justify-center gf-bg-white/30 gf-animate-pulse" }),
+    /* @__PURE__ */ e("span", { className: "gf-py-1.5 gf-min-w-[22px] gf-h-7 gf-flex gf-items-center gf-justify-center", children: "..." }),
+    [0, 1, 2].map((f) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "gf-p-1.5 gf-min-w-7 gf-min-h-7 gf-rounded-full gf-flex gf-items-center gf-justify-center gf-bg-white/30 gf-animate-pulse"
+      },
+      f
+    )),
+    /* @__PURE__ */ e("span", { className: "gf-py-1.5 gf-min-w-[22px] gf-h-7 gf-flex gf-items-center gf-justify-center", children: "..." }),
+    /* @__PURE__ */ e("div", { className: "gf-p-1.5 gf-min-w-7 gf-min-h-7 gf-rounded-full gf-flex gf-items-center gf-justify-center gf-bg-white/30 gf-animate-pulse" })
+  ] }),
+  /* @__PURE__ */ e(a, { className: "gf-w-6 gf-h-6 gf-py-1.5 gf-opacity-50" })
+] });
+export {
+  M as Pagination,
+  z as SkeletonPagination
+};

package/dist/Portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type PortalProps = {
+    children: ReactNode;
+    container?: HTMLElement | null;
+};
+/** SSR-safe React portal. Delays mount until after hydration to avoid document access on the server. */
+export declare const Portal: ({ children, container }: PortalProps) => import('react').ReactPortal | null;

package/dist/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { Portal } from './Portal';
+export type { PortalProps } from './Portal';

package/dist/Portal/index.js

@@ -0,0 +1,11 @@
+import { useState as u, useEffect as n } from "react";
+import { createPortal as f } from "react-dom";
+const a = ({ children: t, container: e }) => {
+  const [o, r] = u(!1);
+  return n(() => {
+    r(!0);
+  }, []), o ? f(t, e ?? document.body) : null;
+};
+export {
+  a as Portal
+};

package/dist/ResponsiveModal/ResponsiveModal.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+
+type OpacityVariants = "extra-light" | "light" | "medium" | "semi-dark" | "full";
+export type ResponsiveModalProps = {
+    open: boolean;
+    onClose: () => void;
+    label?: string;
+    children: ReactNode;
+    opacityLevel?: OpacityVariants;
+    className?: string;
+};
+/** Modal on desktop, vaul BottomSheet on mobile. Reads viewport from `ViewportProvider`. Portals into `document.body`. */
+export declare const ResponsiveModal: FC<ResponsiveModalProps>;
+export {};

package/dist/ResponsiveModal/index.d.ts

@@ -0,0 +1,2 @@
+export { ResponsiveModal } from './ResponsiveModal';
+export type { ResponsiveModalProps } from './ResponsiveModal';

package/dist/ResponsiveModal/index.js

@@ -0,0 +1,62 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useState as u, useEffect as d } from "react";
+import { createPortal as m } from "react-dom";
+import { Modal as s } from "../Modal/index.js";
+import { BottomSheet as h } from "../BottomSheet/index.js";
+import { Typography as w } from "../Typography/index.js";
+import { CloseIcon as n } from "../Icons/CloseIcon.js";
+import { useViewport as x } from "../Viewport/index.js";
+import { cn as b } from "../utils/index.js";
+const B = ({
+  open: t,
+  onClose: r,
+  label: o,
+  children: i,
+  opacityLevel: l = "medium",
+  className: g
+}) => {
+  const c = x() === "mobile", [a, p] = u(!1);
+  return d(() => {
+    p(!0);
+  }, []), a ? c ? t ? m(
+    /* @__PURE__ */ e(h, { open: t, onOpenChange: r, children: i }),
+    document.body
+  ) : null : m(
+    /* @__PURE__ */ e(s, { open: t, onClose: r, children: /* @__PURE__ */ f(
+      s.Children,
+      {
+        opacityLevel: l,
+        className: b(
+          "gf-relative gf-flex gf-w-[500px] gf-flex-col gf-gap-4 gf-rounded-2xl gf-p-4",
+          g
+        ),
+        children: [
+          o && /* @__PURE__ */ f("div", { className: "gf-flex gf-items-center gf-justify-between", children: [
+            /* @__PURE__ */ e(w, { size: "h4", weight: "medium", children: o }),
+            /* @__PURE__ */ e(
+              n,
+              {
+                className: "gf-h-3 gf-w-3 gf-fill-primaryIris gf-cursor-pointer",
+                onClick: r
+              }
+            )
+          ] }),
+          !o && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: r,
+              className: "gf-absolute gf-right-4 gf-top-4 gf-cursor-pointer gf-text-white/50 gf-transition-colors hover:gf-text-white",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ e(n, { className: "gf-h-4 gf-w-4" })
+            }
+          ),
+          i
+        ]
+      }
+    ) }),
+    document.body
+  ) : null;
+};
+export {
+  B as ResponsiveModal
+};

package/dist/SelectDropdown/SelectDropdown.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+
+export type SelectDropdownItem<V extends string> = {
+    value: V;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export type SelectDropdownProps<V extends string> = {
+    items: SelectDropdownItem<V>[];
+    value: V;
+    onChange: (value: V) => void;
+    placeholder?: string;
+    /** Insert a 1px separator after each listed value. */
+    separatorsAfter?: V[];
+    /** Reset action rendered as a pill at the top of the panel (e.g. "Clear filter"). */
+    clearAction?: {
+        label: string;
+        value: V;
+    };
+    align?: "start" | "end";
+    disabled?: boolean;
+    /** Extra classes for the floating panel (width / max-height / min-width). */
+    contentClassName?: string;
+    /** Extra classes for the trigger button. */
+    triggerClassName?: string;
+    /** Extra classes for the outer wrapper (e.g. "w-full" to make the trigger fill its row). */
+    wrapperClassName?: string;
+    /** Optional leading icon rendered inside the trigger before the label. */
+    triggerIcon?: ReactNode;
+    /** Typography size for trigger + item labels. Default `"h5"`. */
+    labelSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Tailwind `from-*` class for the scroll-overflow gradient fades. Default `"gf-from-white"`. */
+    scrollGradientColor?: string;
+};
+/**
+ * Glassmorphic select — no background, no border, just backdrop-blur on the
+ * panel. Built from scratch (no shadcn DropdownMenu) so the blur actually
+ * shows through to the page content behind it.
+ */
+export declare const SelectDropdown: <V extends string>({ items, value, onChange, placeholder, separatorsAfter, clearAction, align, disabled, contentClassName, triggerClassName, wrapperClassName, triggerIcon, labelSize, scrollGradientColor, }: SelectDropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

package/dist/SelectDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectDropdown } from './SelectDropdown';
+export type { SelectDropdownProps, SelectDropdownItem } from './SelectDropdown';

package/dist/SelectDropdown/index.js

@@ -0,0 +1,195 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as m, useRef as w, useCallback as J, useLayoutEffect as M, useEffect as B, Fragment as Q } from "react";
+import { AnimatePresence as U, motion as V } from "framer-motion";
+import { Typography as E } from "../Typography/index.js";
+import { Portal as X } from "../Portal/index.js";
+import { cn as f } from "../utils/index.js";
+import Y from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const ie = ({
+  items: d,
+  value: b,
+  onChange: L,
+  placeholder: H = "",
+  separatorsAfter: v,
+  clearAction: u,
+  align: x = "start",
+  disabled: $,
+  contentClassName: D,
+  triggerClassName: O,
+  wrapperClassName: W,
+  triggerIcon: z,
+  labelSize: R = "h5",
+  scrollGradientColor: S = "gf-from-white"
+}) => {
+  const [n, l] = m(!1), T = w(null), P = w(null), a = w(null), C = w(null), [p, F] = m({ top: 0, width: 0 }), [K, G] = m(!1), [q, _] = m(!1), y = d.find((e) => e.value === b) ?? null, I = (y == null ? void 0 : y.label) ?? H, h = J(() => {
+    const e = C.current;
+    e && (G(e.scrollTop > 0), _(e.scrollTop + e.clientHeight < e.scrollHeight - 1));
+  }, []);
+  return M(() => {
+    if (!n) return;
+    const e = (g = !1) => {
+      const s = P.current;
+      if (!s) return;
+      const r = s.getBoundingClientRect();
+      if (r.bottom < 0 || r.top > window.innerHeight) {
+        l(!1);
+        return;
+      }
+      const j = r.bottom + 6, N = x === "end" ? void 0 : r.left, k = x === "end" ? window.innerWidth - r.right : void 0;
+      g && a.current ? (a.current.style.top = `${j}px`, N !== void 0 && (a.current.style.left = `${N}px`), k !== void 0 && (a.current.style.right = `${k}px`)) : F({ top: j, left: N, right: k, width: r.width });
+    };
+    e();
+    const i = () => e(!1), o = () => e(!0);
+    return window.addEventListener("resize", i), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", i), window.removeEventListener("scroll", o, !0);
+    };
+  }, [n, x]), B(() => {
+    if (!n) {
+      G(!1), _(!1);
+      return;
+    }
+    h();
+    const e = setTimeout(h, 50);
+    return () => clearTimeout(e);
+  }, [n, d, h]), B(() => {
+    if (!n) return;
+    const e = (o) => {
+      var s, r;
+      const g = o.target;
+      (s = T.current) != null && s.contains(g) || (r = a.current) != null && r.contains(g) || l(!1);
+    }, i = (o) => {
+      o.key === "Escape" && l(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", i), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", i);
+    };
+  }, [n]), /* @__PURE__ */ c("div", { ref: T, className: f("gf-relative gf-inline-block", W), children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        ref: P,
+        type: "button",
+        disabled: $,
+        onClick: () => l((e) => !e),
+        "aria-haspopup": "listbox",
+        "aria-expanded": n,
+        className: f(
+          "gf-flex gf-items-center gf-gap-1.5 gf-py-2 gf-px-3 gf-rounded-full gf-bg-white/70 focus:gf-outline-none gf-transition-colors disabled:gf-cursor-not-allowed",
+          O
+        ),
+        children: [
+          z && /* @__PURE__ */ t("span", { className: "gf-flex gf-items-center gf-shrink-0", children: z }),
+          /* @__PURE__ */ t(
+            E,
+            {
+              size: R,
+              weight: "regular",
+              className: "gf-truncate gf-flex-1 gf-text-left",
+              children: I
+            }
+          ),
+          /* @__PURE__ */ t(
+            Y,
+            {
+              className: f(
+                "gf-h-3.5 gf-w-3.5 gf-text-primaryIris gf-flex-shrink-0 gf-transition-transform",
+                n && "gf-rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(U, { children: n && /* @__PURE__ */ t(
+      V.div,
+      {
+        ref: a,
+        role: "listbox",
+        initial: { opacity: 0, y: -4 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -4 },
+        transition: { duration: 0.15, ease: "easeOut" },
+        style: {
+          position: "fixed",
+          top: p.top,
+          left: p.left,
+          right: p.right,
+          minWidth: p.width || void 0
+        },
+        className: "gf-z-[60] gf-rounded-xl gf-min-w-28 gf-bg-white/30 gf-backdrop-blur-lg [-webkit-backdrop-filter:blur(12px)] gf-overflow-hidden gf-shadow-[0_8px_24px_-12px_rgba(71,60,117,0.2)]",
+        children: /* @__PURE__ */ c("div", { className: "gf-relative", children: [
+          K && /* @__PURE__ */ t(
+            "div",
+            {
+              className: f("gf-absolute gf-top-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10 gf-bg-gradient-to-b gf-to-transparent", S)
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "gf-relative", children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                ref: C,
+                onScroll: h,
+                className: f("gf-py-2 gf-overflow-y-auto gf-max-h-96 [scrollbar-width:none] [&::-webkit-scrollbar]:gf-hidden", D),
+                children: d.map((e, i) => {
+                  const o = e.value === b, g = i === d.length - 1, s = (v == null ? void 0 : v.includes(e.value)) && !g;
+                  return /* @__PURE__ */ c(Q, { children: [
+                    /* @__PURE__ */ c(
+                      "button",
+                      {
+                        type: "button",
+                        role: "option",
+                        "aria-selected": o,
+                        disabled: e.disabled,
+                        onClick: () => {
+                          e.disabled || (L(e.value), l(!1));
+                        },
+                        className: f(
+                          "gf-w-full gf-flex gf-items-center gf-gap-3 gf-px-4 gf-py-2 gf-text-sm gf-transition-colors",
+                          e.disabled ? "gf-opacity-35 gf-cursor-default gf-pointer-events-none" : "hover:gf-bg-white/50 gf-cursor-pointer"
+                        ),
+                        children: [
+                          e.icon && /* @__PURE__ */ t("span", { className: "gf-flex-shrink-0 gf-flex gf-items-center", children: e.icon }),
+                          /* @__PURE__ */ t(
+                            E,
+                            {
+                              size: R,
+                              weight: "regular",
+                              className: "gf-truncate gf-flex-1 gf-text-left",
+                              children: e.label
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    s && /* @__PURE__ */ t("div", { className: "gf-h-px gf-bg-white/40 gf-my-1 gf-mx-3" })
+                  ] }, e.value);
+                })
+              }
+            ),
+            q && /* @__PURE__ */ t(
+              "div",
+              {
+                className: f("gf-absolute gf-bottom-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10 gf-bg-gradient-to-t gf-to-transparent", S)
+              }
+            )
+          ] }),
+          u && b !== u.value && /* @__PURE__ */ t("div", { className: "gf-px-2.5 gf-pb-2 gf-pt-1", children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                L(u.value), l(!1);
+              },
+              className: "gf-flex gf-items-center gf-justify-center gf-w-full gf-rounded-full gf-bg-white/70 hover:gf-bg-white/80 gf-py-1.5 gf-px-3 gf-cursor-pointer gf-transition-colors",
+              children: /* @__PURE__ */ t(E, { size: "h5", weight: "regular", children: u.label })
+            }
+          ) })
+        ] })
+      }
+    ) }) })
+  ] });
+};
+export {
+  ie as SelectDropdown
+};

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const Skeleton: ({ className, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';

package/dist/Skeleton/index.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as t } from "../utils/index.js";
+const n = ({ className: e, ...r }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: t("gf-animate-pulse gf-rounded-md gf-bg-light-grey/50", e),
+    ...r
+  }
+);
+export {
+  n as Skeleton
+};