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

package/dist/SelectDropdown/SelectDropdown.d.ts

@@ -30,7 +30,7 @@ export type SelectDropdownProps<V extends string> = {
     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"`. */
+    /** CSS color value for the scroll-overflow gradient fades. Default `"white"`. */
     scrollGradientColor?: string;
 };
 /**

package/dist/SelectDropdown/index.js

@@ -1,33 +1,33 @@
-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 { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useState as m, useRef as w, useCallback as J, useLayoutEffect as M, useEffect as j, 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 { cn as c } 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 = "",
+  placeholder: B = "",
   separatorsAfter: v,
   clearAction: u,
   align: x = "start",
-  disabled: $,
+  disabled: H,
   contentClassName: D,
   triggerClassName: O,
   wrapperClassName: W,
   triggerIcon: z,
   labelSize: R = "h5",
-  scrollGradientColor: S = "gf-from-white"
+  scrollGradientColor: S = "rgba(255,255,255,0.5)"
 }) => {
-  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 [n, l] = m(!1), T = w(null), P = w(null), f = w(null), C = w(null), [p, F] = m({ top: 0, width: 0 }), [K, $] = m(!1), [q, G] = m(!1), y = d.find((e) => e.value === b) ?? null, I = (y == null ? void 0 : y.label) ?? B, h = J(() => {
     const e = C.current;
-    e && (G(e.scrollTop > 0), _(e.scrollTop + e.clientHeight < e.scrollHeight - 1));
+    e && ($(e.scrollTop > 0), G(e.scrollTop + e.clientHeight < e.scrollHeight - 1));
   }, []);
   return M(() => {
     if (!n) return;
-    const e = (g = !1) => {
+    const e = (a = !1) => {
       const s = P.current;
       if (!s) return;
       const r = s.getBoundingClientRect();
@@ -35,45 +35,45 @@ const ie = ({
         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 });
+      const _ = r.bottom + 6, k = x === "end" ? void 0 : r.left, N = x === "end" ? window.innerWidth - r.right : void 0;
+      a && f.current ? (f.current.style.top = `${_}px`, k !== void 0 && (f.current.style.left = `${k}px`), N !== void 0 && (f.current.style.right = `${N}px`)) : F({ top: _, left: k, right: N, 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(() => {
+  }, [n, x]), j(() => {
     if (!n) {
-      G(!1), _(!1);
+      $(!1), G(!1);
       return;
     }
     h();
     const e = setTimeout(h, 50);
     return () => clearTimeout(e);
-  }, [n, d, h]), B(() => {
+  }, [n, d, h]), j(() => {
     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);
+      const a = o.target;
+      (s = T.current) != null && s.contains(a) || (r = f.current) != null && r.contains(a) || 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(
+  }, [n]), /* @__PURE__ */ g("div", { ref: T, className: c("gf-relative gf-inline-block", W), children: [
+    /* @__PURE__ */ g(
       "button",
       {
         ref: P,
         type: "button",
-        disabled: $,
+        disabled: H,
         onClick: () => l((e) => !e),
         "aria-haspopup": "listbox",
         "aria-expanded": n,
-        className: f(
+        className: c(
           "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
         ),
@@ -91,7 +91,7 @@ const ie = ({
           /* @__PURE__ */ t(
             Y,
             {
-              className: f(
+              className: c(
                 "gf-h-3.5 gf-w-3.5 gf-text-primaryIris gf-flex-shrink-0 gf-transition-transform",
                 n && "gf-rotate-180"
               )
@@ -103,7 +103,7 @@ const ie = ({
     /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(U, { children: n && /* @__PURE__ */ t(
       V.div,
       {
-        ref: a,
+        ref: f,
         role: "listbox",
         initial: { opacity: 0, y: -4 },
         animate: { opacity: 1, y: 0 },
@@ -117,24 +117,25 @@ const ie = ({
           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: [
+        children: /* @__PURE__ */ g("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)
+              className: "gf-absolute gf-top-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10",
+              style: { background: `linear-gradient(to bottom, ${S}, transparent)` }
             }
           ),
-          /* @__PURE__ */ c("div", { className: "gf-relative", children: [
+          /* @__PURE__ */ g("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),
+                className: c("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(
+                  const o = e.value === b, a = i === d.length - 1, s = (v == null ? void 0 : v.includes(e.value)) && !a;
+                  return /* @__PURE__ */ g(Q, { children: [
+                    /* @__PURE__ */ g(
                       "button",
                       {
                         type: "button",
@@ -144,7 +145,7 @@ const ie = ({
                         onClick: () => {
                           e.disabled || (L(e.value), l(!1));
                         },
-                        className: f(
+                        className: c(
                           "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"
                         ),
@@ -170,11 +171,12 @@ const ie = ({
             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)
+                className: "gf-absolute gf-bottom-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10",
+                style: { background: `linear-gradient(to top, ${S}, transparent)` }
               }
             )
           ] }),
-          u && b !== u.value && /* @__PURE__ */ t("div", { className: "gf-px-2.5 gf-pb-2 gf-pt-1", children: /* @__PURE__ */ t(
+          u && b !== u.value && /* @__PURE__ */ t("div", { className: "gf-px-2.5 gf-pb-2 gf-pt-1 gf-bg-white/50", children: /* @__PURE__ */ t(
             "button",
             {
               type: "button",