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

package/dist/Modal/Modal.d.ts

@@ -9,6 +9,9 @@ type ModalProps = VariantProps<typeof modalStyles> & {
     onClose?: () => void;
     children: React.ReactNode;
     disableScrollLock?: boolean;
+    /** Extra classes for the full-screen overlay — use to change alignment
+     * (e.g. `!gf-items-end !gf-justify-start` to dock the card bottom-left). */
+    overlayClassName?: string;
 };
 declare const Modal: React.FC<ModalProps> & {
     Children: React.FC<ChildrenProps>;

package/dist/Modal/index.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cva as s } from "class-variance-authority";
-import { useState as c, useEffect as g } from "react";
-import { Opacity as m } from "../Opacity/index.js";
-import { RemoveScroll as d } from "react-remove-scroll";
-import { ClientOnly as p } from "../ClientOnly/index.js";
-const u = s(
+import { cva as c } from "class-variance-authority";
+import { useState as g, useEffect as m } from "react";
+import { Opacity as d } from "../Opacity/index.js";
+import { RemoveScroll as p } from "react-remove-scroll";
+import { ClientOnly as u } from "../ClientOnly/index.js";
+const h = c(
   [
     "gf-fixed gf-inset-0 gf-z-50 gf-flex gf-items-center gf-justify-center gf-min-h-screen gf-transition-all"
   ],
@@ -19,37 +19,37 @@ const u = s(
       open: !1
     }
   }
-), h = ({ open: e, onClose: a, disableScrollLock: r, children: o }) => {
-  const [i, n] = c(!1);
-  g(() => {
-    e && n(!0);
+), v = ({ open: e, onClose: a, disableScrollLock: r, overlayClassName: o, children: i }) => {
+  const [n, f] = g(!1);
+  m(() => {
+    e && f(!0);
   }, [e]);
-  const f = (l) => {
-    a && (l.stopPropagation(), a());
+  const l = (s) => {
+    a && (s.stopPropagation(), a());
   };
-  return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(d, { removeScrollBar: !1, enabled: !!e && !r, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(p, { removeScrollBar: !1, enabled: !!e && !r, children: /* @__PURE__ */ t(
     "div",
     {
-      className: `gf-bg-dark-grey gf-bg-opacity-40 ${u({
+      className: `gf-bg-dark-grey gf-bg-opacity-40 ${h({
         open: e
-      })} ${i ? e ? "gf-animate-fade-in " : "gf-animate-fade-out" : ""}`,
-      onClick: f,
+      })} ${n ? e ? "gf-animate-fade-in " : "gf-animate-fade-out" : ""} ${o ?? ""}`,
+      onClick: l,
       children: /* @__PURE__ */ t(
         "div",
         {
           className: `gf-transform gf-transition-transform ${e ? "gf-animate-scale-in" : "gf-animate-scale-out"}`,
-          children: o
+          children: i
         }
       )
     }
   ) }) });
-}, v = ({
+}, y = ({
   children: e,
   className: a,
   opacityLevel: r,
   ...o
 }) => /* @__PURE__ */ t(
-  m,
+  d,
   {
     level: r,
     onClick: (n) => {
@@ -60,7 +60,7 @@ const u = s(
     children: e
   }
 );
-h.Children = v;
+v.Children = y;
 export {
-  h as Modal
+  v as Modal
 };

package/dist/OTPInput/OTPInput.d.ts

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

package/dist/OTPInput/index.js

@@ -1,17 +1,17 @@
 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 = ({
+const M = ({
   value: p,
   onChange: g,
   onComplete: w,
   disabled: a = !1,
   autoFocus: y = !0,
   className: k,
-  length: c = 6,
-  white: A = !1
+  inputClassName: A,
+  length: c = 6
 }) => {
-  const [o, i] = T(Array(c).fill("")), s = l([]), D = l(!1), O = l(p), j = l(w);
+  const [o, i] = T(Array(c).fill("")), n = l([]), D = l(!1), O = l(p), j = l(w);
   m(() => {
     j.current = w;
   }, [w]), m(() => {
@@ -24,65 +24,65 @@ const L = ({
     O.current = p;
   }, [p, c, o]), m(() => {
     var t;
-    y && s.current[0] && !a && ((t = s.current[0]) == null || t.focus());
+    y && n.current[0] && !a && ((t = n.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) => {
+  const I = (t, e) => {
     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") {
+    const r = e.replace(/\D/g, "");
+    if (r.length > 1) return;
+    const s = [...o];
+    s[t] = r, i(s), g(s.join("")), r && t < c - 1 && ((u = n.current[t + 1]) == null || u.focus());
+  }, P = (t, e) => {
+    var r, s, u;
+    if (e.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();
+        f[t - 1] = "", i(f), g(f.join("")), (r = n.current[t - 1]) == null || r.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());
+    } else e.key === "ArrowLeft" && t > 0 ? (s = n.current[t - 1]) == null || s.focus() : e.key === "ArrowRight" && t < c - 1 && ((u = n.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];
+    const e = t.clipboardData.getData("text").replace(/\D/g, "").slice(0, c);
+    if (e.length === 0) return;
+    const r = [...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();
+      r[f] = e[f] || "";
+    i(r), g(r.join(""));
+    const s = Math.min(e.length - 1, c - 1);
+    (u = n.current[s]) == 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(
+  return /* @__PURE__ */ R("div", { className: h("gf-flex gf-gap-3 gf-items-center gf-w-full", k), children: o.map((t, e) => /* @__PURE__ */ R(
     "input",
     {
-      ref: (e) => {
-        s.current[r] = e;
+      ref: (r) => {
+        n.current[e] = r;
       },
       type: "text",
       inputMode: "numeric",
       maxLength: 1,
       value: t,
-      onChange: (e) => I(r, e.target.value),
-      onKeyDown: (e) => P(r, e),
+      onChange: (r) => I(e, r.target.value),
+      onKeyDown: (r) => P(e, r),
       onPaste: S,
       disabled: a,
-      autoFocus: y && r === 0,
+      autoFocus: y && e === 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"
+        A
       )
     },
-    r
+    e
   )) });
 };
 export {
-  L as OTPInput
+  M as OTPInput
 };

package/dist/ResponsiveModal/ResponsiveModal.d.ts

@@ -8,6 +8,16 @@ export type ResponsiveModalProps = {
     children: ReactNode;
     opacityLevel?: OpacityVariants;
     className?: string;
+    /** Hide the close (X) button — for modals that must force a choice. Also makes
+     * the mobile BottomSheet non-dismissible (no tap-outside / drag-to-close). */
+    hideCloseBtn?: boolean;
+    /** Extra classes for the overlay/backdrop — desktop Modal and mobile
+     * BottomSheet alike */
+    overlayClassName?: string;
+    /** Mobile BottomSheet only. When `true`, the page behind stays interactive. Default `false`. */
+    bottomSheetAllowBackgroundInteraction?: boolean;
+    /** When `true`, the page is NOT scroll-locked while open. */
+    disableScrollLock?: boolean;
 };
 /** Modal on desktop, vaul BottomSheet on mobile. Reads viewport from `ViewportProvider`. Portals into `document.body`. */
 export declare const ResponsiveModal: FC<ResponsiveModalProps>;

package/dist/ResponsiveModal/index.js

@@ -1,62 +1,85 @@
-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 = ({
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useState as x, useEffect as b } from "react";
+import { createPortal as g } from "react-dom";
+import { Modal as n } from "../Modal/index.js";
+import { BottomSheet as v } from "../BottomSheet/index.js";
+import { Typography as y } from "../Typography/index.js";
+import { CloseIcon as l } from "../Icons/CloseIcon.js";
+import { useViewport as M } from "../Viewport/index.js";
+import { cn as N } from "../utils/index.js";
+const V = ({
   open: t,
   onClose: r,
   label: o,
-  children: i,
-  opacityLevel: l = "medium",
-  className: g
+  children: f,
+  opacityLevel: c = "medium",
+  className: a,
+  hideCloseBtn: i,
+  overlayClassName: m,
+  bottomSheetAllowBackgroundInteraction: p,
+  disableScrollLock: u
 }) => {
-  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 }),
+  const d = M() === "mobile", [h, w] = x(!1);
+  return b(() => {
+    w(!0);
+  }, []), h ? d ? t ? g(
+    /* @__PURE__ */ e(
+      v,
+      {
+        open: t,
+        onOpenChange: r,
+        overlayClassName: m,
+        dismissible: !i,
+        modal: !p,
+        children: f
+      }
+    ),
     document.body
-  ) : null : m(
-    /* @__PURE__ */ e(s, { open: t, onClose: r, children: /* @__PURE__ */ f(
-      s.Children,
+  ) : null : g(
+    /* @__PURE__ */ e(
+      n,
       {
-        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
-        ]
+        open: t,
+        onClose: r,
+        overlayClassName: m,
+        disableScrollLock: u,
+        children: /* @__PURE__ */ s(
+          n.Children,
+          {
+            opacityLevel: c,
+            className: N(
+              "gf-relative gf-flex gf-w-[500px] gf-flex-col gf-gap-4 gf-rounded-2xl gf-p-4",
+              a
+            ),
+            children: [
+              o && /* @__PURE__ */ s("div", { className: "gf-flex gf-items-center gf-justify-between", children: [
+                /* @__PURE__ */ e(y, { size: "h4", weight: "medium", children: o }),
+                !i && /* @__PURE__ */ e(
+                  l,
+                  {
+                    className: "gf-h-3 gf-w-3 gf-fill-primaryIris gf-cursor-pointer",
+                    onClick: r
+                  }
+                )
+              ] }),
+              !o && !i && /* @__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(l, { className: "gf-h-4 gf-w-4" })
+                }
+              ),
+              f
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     document.body
   ) : null;
 };
 export {
-  B as ResponsiveModal
+  V as ResponsiveModal
 };

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export * from './components/organisms/QuestCard';
 export * from './components/organisms/DataTable';
 export * from './components/organisms/CardList';
 export * from './components/organisms/DashboardLayout';
+export * from './components/organisms/CookieConsent';
 export * from './components/atoms/OTPInput';
 export * from './components/atoms/DirectionalIconHover';
 export * from './components/atoms/Skeleton';