@gardenfi/garden-book 0.2.25 → 0.2.27

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@gardenfi/garden-book",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "type": "module",
   "types": "dist/index.d.ts",
-  "sideEffects": [
-    "*.css"
-  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -19,36 +18,29 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./*": {
-      "types": "./dist/*/index.d.ts",
-      "import": "./dist/*/index.js",
-      "default": "./dist/*/index.js"
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.umd.js"
     },
-    "./Icons": {
-      "types": "./dist/Icons/index.d.ts",
-      "import": "./dist/Icons/index.js",
-      "default": "./dist/Icons/index.js"
+    "./style.css": {
+      "require": "./dist/style.css",
+      "default": "./dist/style.css"
     },
-    "./Logo": {
-      "types": "./dist/Logo/index.d.ts",
-      "import": "./dist/Logo/index.js",
-      "default": "./dist/Logo/index.js"
-    },
-    "./style.css": "./dist/style.css",
     "./fonts/*": "./dist/fonts/*"
   },
   "files": [
     "dist"
   ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "dependencies": {
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
     "lottie-react": "^2.4.0",
     "postcss-prefixwrap": "^1.51.0",
-    "react-lazy-load-image-component": "^1.6.3",
+    "react-lazy-load-image-component": "^1.6.2",
     "react-remove-scroll": "^2.6.3",
     "tailwind-merge": "^2.4.0"
   },
@@ -62,21 +54,21 @@
     "@storybook/react": "^8.3.1",
     "@storybook/react-vite": "^8.3.1",
     "@storybook/test": "^8.3.1",
-    "@types/node": "^20.0.0",
-    "react": "^19",
-    "react-dom": "^19",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/react-lazy-load-image-component": "^1.6.5",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-lazy-load-image-component": "^1",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
+    "chromatic": "^15.2.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^8.3.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",

package/dist/BlogCard/index.d.ts

@@ -1 +0,0 @@
-export { BlogCard } from './BlogCard';

package/dist/BlogCard/index.js

@@ -1,60 +0,0 @@
-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/index.js";
-import { Typography as f } from "../Typography/index.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/index.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/index.d.ts

@@ -1 +0,0 @@
-export { BottomSheet } from './BottomSheet';

package/dist/BottomSheet/index.js

@@ -1,17 +0,0 @@
-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 l } from "../ClientOnly/index.js";
-const s = ({
-  children: o,
-  open: r,
-  onOpenChange: t
-}) => /* @__PURE__ */ f(l, { children: /* @__PURE__ */ f(g.Root, { open: r, onOpenChange: t, repositionInputs: !1, children: /* @__PURE__ */ e(g.Portal, { 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__ */ e(g.Content, { className: "gf-fixed gf-bottom-0 gf-left-0 gf-right-0 gf-z-50 gf-mt-24 gf-flex gf-max-h-[85vh] gf-flex-col 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-flex-shrink-0 gf-rounded-full gf-bg-white/30" }),
-    /* @__PURE__ */ f("div", { className: "gf-scrollbar-hide gf-flex gf-flex-1 gf-flex-col gf-gap-5 gf-overflow-y-auto", children: o })
-  ] })
-] }) }) });
-export {
-  s as BottomSheet
-};

package/dist/Button/ClientOnlyLottie.js

@@ -1,27 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as f, useEffect as p } from "react";
-import { ClientOnly as u } from "../ClientOnly/index.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/index.d.ts

@@ -1 +0,0 @@
-export { Button } from './Button';

package/dist/Button/index.js

@@ -1,108 +0,0 @@
-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/index.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/spinner.json.js

@@ -1,375 +0,0 @@
-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,
-    ty: 4,
-    nm: "Shape Layer 1",
-    sr: 1,
-    ks: {
-      o: {
-        a: 0,
-        k: 100,
-        ix: 11
-      },
-      r: {
-        a: 1,
-        k: [
-          {
-            i: {
-              x: [
-                0.34
-              ],
-              y: [
-                1
-              ]
-            },
-            o: {
-              x: [
-                0.66
-              ],
-              y: [
-                0
-              ]
-            },
-            t: 0,
-            s: [
-              180
-            ]
-          },
-          {
-            t: 119,
-            s: [
-              540
-            ]
-          }
-        ],
-        ix: 10
-      },
-      p: {
-        a: 0,
-        k: [
-          32.135,
-          31.505,
-          0
-        ],
-        ix: 2,
-        l: 2
-      },
-      a: {
-        a: 0,
-        k: [
-          -0.75,
-          2.75,
-          0
-        ],
-        ix: 1,
-        l: 2
-      },
-      s: {
-        a: 0,
-        k: [
-          82,
-          82,
-          100
-        ],
-        ix: 6,
-        l: 2
-      }
-    },
-    ao: 0,
-    shapes: [
-      {
-        ty: "gr",
-        it: [
-          {
-            ind: 0,
-            ty: "sh",
-            ix: 1,
-            ks: {
-              a: 0,
-              k: {
-                i: [
-                  [
-                    15.326,
-                    0
-                  ],
-                  [
-                    0,
-                    -15.326
-                  ],
-                  [
-                    -15.326,
-                    0
-                  ],
-                  [
-                    0,
-                    15.326
-                  ]
-                ],
-                o: [
-                  [
-                    -15.326,
-                    0
-                  ],
-                  [
-                    0,
-                    15.326
-                  ],
-                  [
-                    15.326,
-                    0
-                  ],
-                  [
-                    0,
-                    -15.326
-                  ]
-                ],
-                v: [
-                  [
-                    0,
-                    -27.75
-                  ],
-                  [
-                    -27.75,
-                    0
-                  ],
-                  [
-                    0,
-                    27.75
-                  ],
-                  [
-                    27.75,
-                    0
-                  ]
-                ],
-                c: !0
-              },
-              ix: 2
-            },
-            nm: "Path 1",
-            mn: "ADBE Vector Shape - Group",
-            hd: !1
-          },
-          {
-            ty: "st",
-            c: {
-              a: 0,
-              k: [
-                0.505882352941,
-                0.478431372549,
-                0.564705882353,
-                1
-              ],
-              ix: 3
-            },
-            o: {
-              a: 0,
-              k: 100,
-              ix: 4
-            },
-            w: {
-              a: 0,
-              k: 10,
-              ix: 5
-            },
-            lc: 1,
-            lj: 1,
-            ml: 4,
-            bm: 0,
-            nm: "Stroke 1",
-            mn: "ADBE Vector Graphic - Stroke",
-            hd: !1
-          },
-          {
-            ty: "tr",
-            p: {
-              a: 0,
-              k: [
-                -0.75,
-                2.75
-              ],
-              ix: 2
-            },
-            a: {
-              a: 0,
-              k: [
-                0,
-                0
-              ],
-              ix: 1
-            },
-            s: {
-              a: 0,
-              k: [
-                100,
-                100
-              ],
-              ix: 3
-            },
-            r: {
-              a: 0,
-              k: 0,
-              ix: 6
-            },
-            o: {
-              a: 0,
-              k: 100,
-              ix: 7
-            },
-            sk: {
-              a: 0,
-              k: 0,
-              ix: 4
-            },
-            sa: {
-              a: 0,
-              k: 0,
-              ix: 5
-            },
-            nm: "Transform"
-          }
-        ],
-        nm: "Ellipse 1",
-        np: 3,
-        cix: 2,
-        bm: 0,
-        ix: 1,
-        mn: "ADBE Vector Group",
-        hd: !1
-      },
-      {
-        ty: "tm",
-        s: {
-          a: 1,
-          k: [
-            {
-              i: {
-                x: [
-                  0.833
-                ],
-                y: [
-                  0.833
-                ]
-              },
-              o: {
-                x: [
-                  0.167
-                ],
-                y: [
-                  0.167
-                ]
-              },
-              t: 0,
-              s: [
-                100
-              ]
-            },
-            {
-              i: {
-                x: [
-                  0.351
-                ],
-                y: [
-                  0.985
-                ]
-              },
-              o: {
-                x: [
-                  0.665
-                ],
-                y: [
-                  0
-                ]
-              },
-              t: 60,
-              s: [
-                90
-              ]
-            },
-            {
-              t: 120,
-              s: [
-                0
-              ]
-            }
-          ],
-          ix: 1
-        },
-        e: {
-          a: 1,
-          k: [
-            {
-              i: {
-                x: [
-                  0.34
-                ],
-                y: [
-                  1
-                ]
-              },
-              o: {
-                x: [
-                  0.66
-                ],
-                y: [
-                  0
-                ]
-              },
-              t: 0,
-              s: [
-                100
-              ]
-            },
-            {
-              t: 60,
-              s: [
-                0
-              ]
-            }
-          ],
-          ix: 2
-        },
-        o: {
-          a: 0,
-          k: 176,
-          ix: 3
-        },
-        m: 1,
-        ix: 2,
-        nm: "Trim Paths 1",
-        mn: "ADBE Vector Filter - Trim",
-        hd: !1
-      }
-    ],
-    ip: 0,
-    op: 600,
-    st: 0,
-    bm: 0
-  }
-], o = [], c = {
-  v: s,
-  fr: 60,
-  ip: 0,
-  op: 120,
-  w: 64,
-  h: 64,
-  nm: a,
-  ddd: 0,
-  assets: i,
-  layers: t,
-  markers: o
-};
-export {
-  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
-};

package/dist/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export { CheckBox } from './Checkbox';

package/dist/Checkbox/index.js

@@ -1,7 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Checked as m } from "../Icons/Checked.js";
-import { Unchecked as s } from "../Icons/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/index.d.ts

@@ -1 +0,0 @@
-export { Chip } from './Chip';