@gardenfi/garden-book 0.2.3-beta.13 → 0.2.3-beta.14

package/dist/BlogCard/BlogCard.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useState as m, useEffect as y } from "react";
+import { Opacity as N } from "../Opacity/Opacity.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { LazyLoadImage as b } from "react-lazy-load-image-component";
+/* empty css                                                                   */
+import d from "../assets/blogPlaceholder.svg.js";
+import { cn as a } from "../utils/utils.js";
+const k = ({
+  thumbnail: r,
+  category: i,
+  date: g,
+  title: l,
+  className: c,
+  thumbnailClassName: t
+}) => {
+  const [p, n] = m(!1), [h, s] = m(r ?? d);
+  y(() => {
+    s(r ?? d);
+  }, [r]);
+  const u = () => {
+    s(d);
+  }, x = b;
+  return /* @__PURE__ */ e(N, { level: "semi-dark", className: "gf-rounded-2xl h-full", children: /* @__PURE__ */ o("div", { className: a(c, "gf-overflow-hidden gf-rounded-2xl"), children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: a(t, `${p ? "" : "gf-filter gf-blur-md"}`),
+        children: /* @__PURE__ */ e(
+          x,
+          {
+            alt: l,
+            effect: "blur",
+            src: h,
+            onLoad: () => n(!0),
+            onError: u
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: "gf-px-4 gf-pt-4 gf-pb-5 gf-md:px-5 gf-md:pb-11", children: [
+      /* @__PURE__ */ o("div", { className: "gf-flex gf-justify-between gf-mb-3", children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            size: "h5",
+            weight: "medium",
+            className: "gf-bg-rose gf-px-3 gf-py-1 gf-rounded-full",
+            children: i
+          }
+        ),
+        /* @__PURE__ */ e(f, { size: "h5", weight: "medium", className: "gf-px-3 gf-py-1", children: g })
+      ] }),
+      /* @__PURE__ */ e(f, { size: "h3", weight: "bold", children: l })
+    ] })
+  ] }) });
+};
+export {
+  k as BlogCard
+};

package/dist/BottomSheet/BottomSheet.js

@@ -0,0 +1,17 @@
+import { jsx as f, jsxs as e } from "react/jsx-runtime";
+import { Drawer as g } from "../node_modules/vaul/dist/index.js";
+import { ClientOnly as t } from "../ClientOnly/ClientOnly.js";
+const s = ({
+  children: o,
+  open: r,
+  onOpenChange: l
+}) => /* @__PURE__ */ f(t, { children: /* @__PURE__ */ e(g.Root, { open: r, onOpenChange: l, children: [
+  /* @__PURE__ */ f(g.Overlay, { className: "gf-fixed gf-inset-0 gf-z-50 gf-h-screen gf-w-screen gf-bg-dark-grey gf-bg-opacity-40 gf-transition-colors gf-duration-500 gf-ease-cubic-in-out" }),
+  /* @__PURE__ */ f(g.Portal, { children: /* @__PURE__ */ e(g.Content, { className: "gf-fixed gf-bottom-0 gf-z-50 gf-h-fit gf-w-full gf-rounded-t-xl gf-bg-white/50 gf-px-4 gf-py-4 gf-outline-none gf-backdrop-blur-[20px]", children: [
+    /* @__PURE__ */ f("div", { className: "gf-mx-auto gf-mb-3 gf-h-1 gf-w-[60px] gf-rounded-full gf-bg-white/30" }),
+    /* @__PURE__ */ f("div", { className: "gf-scrollbar-hide gf-flex gf-max-h-[90vh] gf-flex-col gf-gap-5 gf-overflow-y-scroll", children: o })
+  ] }) })
+] }) });
+export {
+  s as BottomSheet
+};

package/dist/Button/Button.js

@@ -0,0 +1,108 @@
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import { cn as h } from "../utils/utils.js";
+import { forwardRef as y } from "react";
+import { ClientOnlyLottie as p } from "./ClientOnlyLottie.js";
+import C from "./spinner.json.js";
+const o = c(
+  [
+    "gf-font-haffer",
+    "gf-font-medium",
+    "gf-min-w-32",
+    "gf-px-6",
+    "gf-focus:outline-none",
+    "gf-border-none",
+    "gf-transition-colors",
+    "gf-duration-500"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "gf-text-white gf-bg-button-primary",
+        secondary: "gf-text-white gf-bg-button-secondary",
+        ternary: "gf-text-dark-grey gf-bg-button-ternary",
+        disabled: "gf-bg-button-disabled-bg gf-text-button-disabled-text gf-cursor-not-allowed"
+      },
+      size: {
+        sm: "gf-h-9 gf-rounded-xl gf-text-xs",
+        md: "gf-h-10 gf-rounded-xl gf-text-sm",
+        lg: "gf-h-12 gf-rounded-2xl gf-text-base"
+      },
+      breakpointSize: {
+        // breakpoint: button size
+        "xs:sm": "xs:gf-h-9 xs:gf-rounded-xl xs:gf-text-xs",
+        "xs:md": "xs:gf-h-10 xs:gf-rounded-xl xs:gf-text-sm",
+        "xs:lg": "xs:gf-h-12 xs:gf-rounded-2xl xs:gf-text-base",
+        "sm:sm": "sm:gf-h-9 sm:gf-rounded-xl sm:gf-text-xs",
+        "sm:md": "sm:gf-h-10 sm:gf-rounded-xl sm:gf-text-sm",
+        "sm:lg": "sm:gf-h-12 sm:gf-rounded-2xl sm:gf-text-base",
+        "md:sm": "md:gf-h-9 md:gf-rounded-xl md:gf-text-xs",
+        "md:md": "md:gf-h-10 md:gf-rounded-xl md:gf-text-sm",
+        "md:lg": "md:gf-h-12 md:gf-rounded-2xl md:gf-text-base",
+        "lg:sm": "lg:gf-h-9 lg:gf-rounded-xl lg:gf-text-xs",
+        "lg:md": "lg:gf-h-10 lg:gf-rounded-xl lg:gf-text-sm",
+        "lg:lg": "lg:gf-h-12 lg:gf-rounded-2xl lg:gf-text-base",
+        "xl:sm": "xl:gf-h-9 xl:gf-rounded-xl xl:gf-text-xs",
+        "xl:md": "xl:gf-h-10 xl:gf-rounded-xl xl:gf-text-sm",
+        "xl:lg": "xl:gf-h-12 xl:gf-rounded-2xl xl:gf-text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), O = y(
+  ({
+    variant: e,
+    size: d,
+    breakpoints: f,
+    loading: g,
+    className: l,
+    children: n,
+    colors: r,
+    ...x
+  }, m) => {
+    const i = f ? Object.entries(f).map(([t, u]) => `${t}:${u}`).map(
+      (t) => o({ breakpointSize: t })
+    ).join(" ") : "", a = (() => {
+      if (!r || !e) return {};
+      const t = r[e];
+      return t ? e === "primary" ? { backgroundColor: t } : e === "secondary" ? { backgroundColor: t } : e === "ternary" ? { backgroundColor: t } : e === "disabled" ? { backgroundColor: t } : {} : {};
+    })();
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: m,
+        className: h(
+          "gf-transition-colors gf-duration-300",
+          l,
+          o({
+            variant: e,
+            size: d
+          }),
+          i,
+          g
+        ),
+        style: a,
+        disabled: g || e === "disabled",
+        ...x,
+        children: /* @__PURE__ */ b("div", { className: "gf-flex gf-justify-center gf-items-center gf-gap-3", children: [
+          n,
+          g && /* @__PURE__ */ s(
+            p,
+            {
+              animationData: C,
+              loop: !0,
+              autoplay: !0,
+              style: { width: 24, height: 24 }
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+export {
+  O as Button
+};

package/dist/Button/ClientOnlyLottie.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as f, useEffect as p } from "react";
+import { ClientOnly as u } from "../ClientOnly/ClientOnly.js";
+const s = ({
+  animationData: n,
+  loop: r = !0,
+  autoplay: i = !0,
+  style: e
+}) => {
+  const [o, m] = f(null);
+  return p(() => {
+    import("lottie-react").then((l) => {
+      m(() => l.default);
+    });
+  }, []), /* @__PURE__ */ t(u, { fallback: /* @__PURE__ */ t("div", { style: e }), children: o ? /* @__PURE__ */ t(
+    o,
+    {
+      animationData: n,
+      loop: r,
+      autoplay: i,
+      style: e
+    }
+  ) : /* @__PURE__ */ t("div", { style: e }) });
+};
+export {
+  s as ClientOnlyLottie
+};

package/dist/{Button.js → Button/spinner.json.js}

@@ -1,40 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { c as cva } from "./index-Ir5YwUO1.js";
-import { c as cn } from "./utils-BnsJHiW8.js";
-import { useState, useEffect, forwardRef } from "react";
-import { C as ClientOnly } from "./ClientOnly-CMQEf-Yl.js";
-const ClientOnlyLottie = ({
-  animationData,
-  loop = true,
-  autoplay = true,
-  style
-}) => {
-  const [LottieComponent, setLottieComponent] = useState(null);
-  useEffect(() => {
-    import("lottie-react").then((module) => {
-      setLottieComponent(() => module.default);
-    });
-  }, []);
-  return /* @__PURE__ */ jsx(ClientOnly, { fallback: /* @__PURE__ */ jsx("div", { style }), children: LottieComponent ? /* @__PURE__ */ jsx(
-    LottieComponent,
-    {
-      animationData,
-      loop,
-      autoplay,
-      style
-    }
-  ) : /* @__PURE__ */ jsx("div", { style }) });
-};
-const v = "5.7.4";
-const fr = 60;
-const ip = 0;
-const op = 120;
-const w = 64;
-const h = 64;
-const nm = "loading spinner";
-const ddd = 0;
-const assets = [];
-const layers = [
+const s = "5.7.4", n = 60, r = 0, x = 120, e = 64, k = 64, a = "loading spinner", m = 0, i = [], t = [
   {
     ddd: 0,
     ind: 1,
@@ -178,13 +142,13 @@ const layers = [
                     0
                   ]
                 ],
-                c: true
+                c: !0
               },
               ix: 2
             },
             nm: "Path 1",
             mn: "ADBE Vector Shape - Group",
-            hd: false
+            hd: !1
           },
           {
             ty: "st",
@@ -214,7 +178,7 @@ const layers = [
             bm: 0,
             nm: "Stroke 1",
             mn: "ADBE Vector Graphic - Stroke",
-            hd: false
+            hd: !1
           },
           {
             ty: "tr",
@@ -271,7 +235,7 @@ const layers = [
         bm: 0,
         ix: 1,
         mn: "ADBE Vector Group",
-        hd: false
+        hd: !1
       },
       {
         ty: "tm",
@@ -374,7 +338,7 @@ const layers = [
         ix: 2,
         nm: "Trim Paths 1",
         mn: "ADBE Vector Filter - Trim",
-        hd: false
+        hd: !1
       }
     ],
     ip: 0,
@@ -382,134 +346,30 @@ const layers = [
     st: 0,
     bm: 0
   }
-];
-const markers = [];
-const spinnerAnimation = {
-  v,
-  fr,
-  ip,
-  op,
-  w,
-  h,
-  nm,
-  ddd,
-  assets,
-  layers,
-  markers
+], o = [], c = {
+  v: s,
+  fr: 60,
+  ip: 0,
+  op: 120,
+  w: 64,
+  h: 64,
+  nm: a,
+  ddd: 0,
+  assets: i,
+  layers: t,
+  markers: o
 };
-const buttonStyles = cva(
-  [
-    "gf-font-haffer",
-    "gf-font-medium",
-    "gf-min-w-32",
-    "gf-px-6",
-    "gf-focus:outline-none",
-    "gf-border-none",
-    "gf-transition-colors",
-    "gf-duration-500"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: "gf-text-white gf-bg-button-primary",
-        secondary: "gf-text-white gf-bg-button-secondary",
-        ternary: "gf-text-dark-grey gf-bg-button-ternary",
-        disabled: "gf-bg-button-disabled-bg gf-text-button-disabled-text gf-cursor-not-allowed"
-      },
-      size: {
-        sm: "gf-h-9 gf-rounded-xl gf-text-xs",
-        md: "gf-h-10 gf-rounded-xl gf-text-sm",
-        lg: "gf-h-12 gf-rounded-2xl gf-text-base"
-      },
-      breakpointSize: {
-        // breakpoint: button size
-        "xs:sm": "xs:gf-h-9 xs:gf-rounded-xl xs:gf-text-xs",
-        "xs:md": "xs:gf-h-10 xs:gf-rounded-xl xs:gf-text-sm",
-        "xs:lg": "xs:gf-h-12 xs:gf-rounded-2xl xs:gf-text-base",
-        "sm:sm": "sm:gf-h-9 sm:gf-rounded-xl sm:gf-text-xs",
-        "sm:md": "sm:gf-h-10 sm:gf-rounded-xl sm:gf-text-sm",
-        "sm:lg": "sm:gf-h-12 sm:gf-rounded-2xl sm:gf-text-base",
-        "md:sm": "md:gf-h-9 md:gf-rounded-xl md:gf-text-xs",
-        "md:md": "md:gf-h-10 md:gf-rounded-xl md:gf-text-sm",
-        "md:lg": "md:gf-h-12 md:gf-rounded-2xl md:gf-text-base",
-        "lg:sm": "lg:gf-h-9 lg:gf-rounded-xl lg:gf-text-xs",
-        "lg:md": "lg:gf-h-10 lg:gf-rounded-xl lg:gf-text-sm",
-        "lg:lg": "lg:gf-h-12 lg:gf-rounded-2xl lg:gf-text-base",
-        "xl:sm": "xl:gf-h-9 xl:gf-rounded-xl xl:gf-text-xs",
-        "xl:md": "xl:gf-h-10 xl:gf-rounded-xl xl:gf-text-sm",
-        "xl:lg": "xl:gf-h-12 xl:gf-rounded-2xl xl:gf-text-base"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-const Button = forwardRef(
-  ({
-    variant,
-    size,
-    breakpoints,
-    loading,
-    className,
-    children,
-    colors,
-    ...props
-  }, ref) => {
-    const breakpointClasses = breakpoints ? Object.entries(breakpoints).map(([breakpoint, size2]) => `${breakpoint}:${size2}`).map(
-      (key) => buttonStyles({ breakpointSize: key })
-    ).join(" ") : "";
-    const getDynamicColorStyle = () => {
-      if (!colors || !variant) return {};
-      const colorClass = colors[variant];
-      if (!colorClass) return {};
-      if (variant === "primary") {
-        return { backgroundColor: colorClass };
-      } else if (variant === "secondary") {
-        return { backgroundColor: colorClass };
-      } else if (variant === "ternary") {
-        return { backgroundColor: colorClass };
-      } else if (variant === "disabled") {
-        return { backgroundColor: colorClass };
-      }
-      return {};
-    };
-    const dynamicColorStyle = getDynamicColorStyle();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: cn(
-          "gf-transition-colors gf-duration-300",
-          className,
-          buttonStyles({
-            variant,
-            size
-          }),
-          breakpointClasses,
-          loading
-        ),
-        style: dynamicColorStyle,
-        disabled: loading || variant === "disabled",
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-justify-center gf-items-center gf-gap-3", children: [
-          children,
-          loading && /* @__PURE__ */ jsx(
-            ClientOnlyLottie,
-            {
-              animationData: spinnerAnimation,
-              loop: true,
-              autoplay: true,
-              style: { width: 24, height: 24 }
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
 export {
-  Button
+  i as assets,
+  m as ddd,
+  c as default,
+  n as fr,
+  k as h,
+  r as ip,
+  t as layers,
+  o as markers,
+  a as nm,
+  x as op,
+  s as v,
+  e as w
 };
-//# sourceMappingURL=Button.js.map

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Checked as m } from "../Icons/Checked/Checked.js";
+import { Unchecked as s } from "../Icons/Unchecked/Unchecked.js";
+const p = ({ checked: o, color: e, ...c }) => /* @__PURE__ */ r("div", { ...c, children: o ? /* @__PURE__ */ r(m, { className: "gf-cursor-pointer", color: e }) : /* @__PURE__ */ r(s, { className: "gf-cursor-pointer" }) });
+export {
+  p as CheckBox
+};

package/dist/Chip/Chip.js

@@ -0,0 +1,20 @@
+import { jsx as f, Fragment as t } from "react/jsx-runtime";
+import { cn as c } from "../utils/utils.js";
+import { RadioCheckedIcon as r } from "../Icons/RadioCheckedIcon/RadioCheckedIcon.js";
+import { RadioUncheckedIcon as s } from "../Icons/RadioUncheckedIcon/RadioUncheckedIcon.js";
+const g = ({ children: e, className: o, ...m }) => /* @__PURE__ */ f(
+  "div",
+  {
+    className: c(
+      "gf-flex gf-items-center gf-rounded-full gf-text-dark-grey gf-font-medium gf-w-max gf-bg-white gf-gap-x-2",
+      o
+    ),
+    ...m,
+    children: e
+  }
+), i = ({ checked: e }) => /* @__PURE__ */ f(t, { children: e ? /* @__PURE__ */ f(r, { className: "gf-w-4 gf-sm:w-5" }) : /* @__PURE__ */ f(s, { className: "gf-w-4 gf-sm:w-5" }) }), n = ({ children: e, ...o }) => /* @__PURE__ */ f("div", { className: "gf-flex gf-items-center gf-justify-center", ...o, children: e });
+g.CheckBox = i;
+g.Logo = n;
+export {
+  g as Chip
+};

package/dist/ClientOnly/ClientOnly.js

@@ -0,0 +1,6 @@
+import { jsx as n, Fragment as t } from "react/jsx-runtime";
+import { useClientOnly as i } from "../hooks/useClientOnly.js";
+const m = ({ children: r, fallback: e = null }) => i() ? /* @__PURE__ */ n(t, { children: r }) : /* @__PURE__ */ n(t, { children: e });
+export {
+  m as ClientOnly
+};

package/dist/Container/Container.js

@@ -0,0 +1,6 @@
+import { jsx as f } from "react/jsx-runtime";
+import { cn as n } from "../utils/utils.js";
+const m = ({ children: r, className: o, ...t }) => /* @__PURE__ */ f("div", { ...t, className: n("gf-p-6 gf-rounded-2xl gf-w-fit", o), children: r });
+export {
+  m as Container
+};