@gardenfi/garden-book 0.2.3-beta.10 → 0.2.3-beta.12

package/dist/Button.js

@@ -0,0 +1,515 @@
+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 = [
+  {
+    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: true
+              },
+              ix: 2
+            },
+            nm: "Path 1",
+            mn: "ADBE Vector Shape - Group",
+            hd: false
+          },
+          {
+            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: false
+          },
+          {
+            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: false
+      },
+      {
+        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: false
+      }
+    ],
+    ip: 0,
+    op: 600,
+    st: 0,
+    bm: 0
+  }
+];
+const markers = [];
+const spinnerAnimation = {
+  v,
+  fr,
+  ip,
+  op,
+  w,
+  h,
+  nm,
+  ddd,
+  assets,
+  layers,
+  markers
+};
+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
+};
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../src/components/Button/ClientOnlyLottie.tsx","../src/components/Button/Button.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { ClientOnly } from \"../ClientOnly/ClientOnly\";\n\ninterface ClientOnlyLottieProps {\n  animationData: any;\n  loop?: boolean;\n  autoplay?: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const ClientOnlyLottie = ({\n  animationData,\n  loop = true,\n  autoplay = true,\n  style,\n}: ClientOnlyLottieProps) => {\n  const [LottieComponent, setLottieComponent] = useState<any>(null);\n\n  useEffect(() => {\n    import(\"lottie-react\").then((module) => {\n      setLottieComponent(() => module.default);\n    });\n  }, []);\n\n  return (\n    <ClientOnly fallback={<div style={style} />}>\n      {LottieComponent ? (\n        <LottieComponent\n          animationData={animationData}\n          loop={loop}\n          autoplay={autoplay}\n          style={style}\n        />\n      ) : (\n        <div style={style} />\n      )}\n    </ClientOnly>\n  );\n};\n","import { cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils/utils\";\nimport { forwardRef } from \"react\";\nimport { ClientOnlyLottie } from \"./ClientOnlyLottie\";\nimport spinnerAnimation from \"./spinner.json\";\n\ntype Variants = \"primary\" | \"secondary\" | \"disabled\" | \"ternary\";\ntype SizeVariants = \"sm\" | \"md\" | \"lg\";\ntype BreakpointVariants = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Breakpoints = {\n  [K in BreakpointVariants]?: SizeVariants;\n};\n\ntype ButtonColors = {\n  primary?: string;\n  secondary?: string;\n  ternary?: string;\n  disabled?: string;\n};\n\nconst buttonStyles = cva(\n  [\n    \"gf-font-haffer\",\n    \"gf-font-medium\",\n    \"gf-min-w-32\",\n    \"gf-px-6\",\n    \"gf-focus:outline-none\",\n    \"gf-border-none\",\n    \"gf-transition-colors\",\n    \"gf-duration-500\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: \"gf-text-white gf-bg-button-primary\",\n        secondary: \"gf-text-white gf-bg-button-secondary\",\n        ternary: \"gf-text-dark-grey gf-bg-button-ternary\",\n        disabled:\n          \"gf-bg-button-disabled-bg gf-text-button-disabled-text gf-cursor-not-allowed\",\n      },\n      size: {\n        sm: \"gf-h-9 gf-rounded-xl gf-text-xs\",\n        md: \"gf-h-10 gf-rounded-xl gf-text-sm\",\n        lg: \"gf-h-12 gf-rounded-2xl gf-text-base\",\n      },\n      breakpointSize: {\n        // breakpoint: button size\n        \"xs:sm\": \"xs:gf-h-9 xs:gf-rounded-xl xs:gf-text-xs\",\n        \"xs:md\": \"xs:gf-h-10 xs:gf-rounded-xl xs:gf-text-sm\",\n        \"xs:lg\": \"xs:gf-h-12 xs:gf-rounded-2xl xs:gf-text-base\",\n        \"sm:sm\": \"sm:gf-h-9 sm:gf-rounded-xl sm:gf-text-xs\",\n        \"sm:md\": \"sm:gf-h-10 sm:gf-rounded-xl sm:gf-text-sm\",\n        \"sm:lg\": \"sm:gf-h-12 sm:gf-rounded-2xl sm:gf-text-base\",\n        \"md:sm\": \"md:gf-h-9 md:gf-rounded-xl md:gf-text-xs\",\n        \"md:md\": \"md:gf-h-10 md:gf-rounded-xl md:gf-text-sm\",\n        \"md:lg\": \"md:gf-h-12 md:gf-rounded-2xl md:gf-text-base\",\n        \"lg:sm\": \"lg:gf-h-9 lg:gf-rounded-xl lg:gf-text-xs\",\n        \"lg:md\": \"lg:gf-h-10 lg:gf-rounded-xl lg:gf-text-sm\",\n        \"lg:lg\": \"lg:gf-h-12 lg:gf-rounded-2xl lg:gf-text-base\",\n        \"xl:sm\": \"xl:gf-h-9 xl:gf-rounded-xl xl:gf-text-xs\",\n        \"xl:md\": \"xl:gf-h-10 xl:gf-rounded-xl xl:gf-text-sm\",\n        \"xl:lg\": \"xl:gf-h-12 xl:gf-rounded-2xl xl:gf-text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  }\n);\n\ntype BreakpointSizeKey = `${BreakpointVariants}:${SizeVariants}`;\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: Variants;\n  size?: SizeVariants;\n  breakpoints?: Breakpoints;\n  loading?: boolean;\n  colors?: ButtonColors;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      breakpoints,\n      loading,\n      className,\n      children,\n      colors,\n      ...props\n    },\n    ref\n  ) => {\n    const breakpointClasses = breakpoints\n      ? Object.entries(breakpoints)\n          .map(([breakpoint, size]) => `${breakpoint}:${size}`)\n          .map((key) =>\n            buttonStyles({ breakpointSize: key as BreakpointSizeKey })\n          )\n          .join(\" \")\n      : \"\";\n\n    const getDynamicColorStyle = () => {\n      if (!colors || !variant) return {};\n\n      const colorClass = colors[variant];\n      if (!colorClass) return {};\n\n      if (variant === \"primary\") {\n        return { backgroundColor: colorClass };\n      } else if (variant === \"secondary\") {\n        return { backgroundColor: colorClass };\n      } else if (variant === \"ternary\") {\n        return { backgroundColor: colorClass };\n      } else if (variant === \"disabled\") {\n        return { backgroundColor: colorClass };\n      }\n\n      return {};\n    };\n\n    const dynamicColorStyle = getDynamicColorStyle();\n\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          \"gf-transition-colors gf-duration-300\",\n          className,\n          buttonStyles({\n            variant,\n            size,\n          }),\n          breakpointClasses,\n          loading\n        )}\n        style={dynamicColorStyle}\n        disabled={loading || variant === \"disabled\"}\n        {...props}\n      >\n        <div className=\"gf-flex gf-justify-center gf-items-center gf-gap-3\">\n          {children}\n          {loading && (\n            <ClientOnlyLottie\n              animationData={spinnerAnimation}\n              loop\n              autoplay\n              style={{ width: 24, height: 24 }}\n            />\n          )}\n        </div>\n      </button>\n    );\n  }\n);\n"],"names":["size"],"mappings":";;;;;AAUO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AACF,MAA6B;AAC3B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAc,IAAI;AAEhE,YAAU,MAAM;AACd,WAAO,cAAc,EAAE,KAAK,CAAC,WAAW;AACtC,yBAAmB,MAAM,OAAO,OAAO;AAAA,IACzC,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,6BACG,YAAA,EAAW,8BAAW,OAAA,EAAI,MAAA,CAAc,GACtC,UAAA,kBACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,IAGF,oBAAC,OAAA,EAAI,MAAA,CAAc,EAAA,CAEvB;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClBA,MAAM,eAAe;AAAA,EACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,gBAAgB;AAAA;AAAA,QAEd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAYO,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,oBAAoB,cACtB,OAAO,QAAQ,WAAW,EACvB,IAAI,CAAC,CAAC,YAAYA,KAAI,MAAM,GAAG,UAAU,IAAIA,KAAI,EAAE,EACnD;AAAA,MAAI,CAAC,QACJ,aAAa,EAAE,gBAAgB,KAA0B;AAAA,IAAA,EAE1D,KAAK,GAAG,IACX;AAEJ,UAAM,uBAAuB,MAAM;AACjC,UAAI,CAAC,UAAU,CAAC,gBAAgB,CAAA;AAEhC,YAAM,aAAa,OAAO,OAAO;AACjC,UAAI,CAAC,WAAY,QAAO,CAAA;AAExB,UAAI,YAAY,WAAW;AACzB,eAAO,EAAE,iBAAiB,WAAA;AAAA,MAC5B,WAAW,YAAY,aAAa;AAClC,eAAO,EAAE,iBAAiB,WAAA;AAAA,MAC5B,WAAW,YAAY,WAAW;AAChC,eAAO,EAAE,iBAAiB,WAAA;AAAA,MAC5B,WAAW,YAAY,YAAY;AACjC,eAAO,EAAE,iBAAiB,WAAA;AAAA,MAC5B;AAEA,aAAO,CAAA;AAAA,IACT;AAEA,UAAM,oBAAoB,qBAAA;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,aAAa;AAAA,YACX;AAAA,YACA;AAAA,UAAA,CACD;AAAA,UACD;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACP,UAAU,WAAW,YAAY;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,UAAA;AAAA,UACA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAe;AAAA,cACf,MAAI;AAAA,cACJ,UAAQ;AAAA,cACR,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,YAAG;AAAA,UAAA;AAAA,QACjC,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/{components/atoms/Checkbox → Checkbox}/Checkbox.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 
 type CheckBoxProps = React.HTMLAttributes<HTMLDivElement> & {
     checked: boolean;
+    color?: string;
 };
 export declare const CheckBox: FC<CheckBoxProps>;
 export {};

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { C as Checked, U as Unchecked } from "./Unchecked-B7UGXlAZ.js";
+const CheckBox = ({ checked, color, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { ...props, children: checked ? /* @__PURE__ */ jsx(Checked, { className: "gf-cursor-pointer", color }) : /* @__PURE__ */ jsx(Unchecked, { className: "gf-cursor-pointer" }) });
+};
+export {
+  CheckBox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { FC } from \"react\";\nimport { Checked, Unchecked } from \"../Icons\";\n\ntype CheckBoxProps = React.HTMLAttributes<HTMLDivElement> & {\n  checked: boolean;\n  color?: string;\n};\n\nexport const CheckBox: FC<CheckBoxProps> = ({ checked, color, ...props }) => {\n  return (\n    <div {...props}>\n      {checked ? (\n        <Checked className=\"gf-cursor-pointer\" color={color} />\n      ) : (\n        <Unchecked className=\"gf-cursor-pointer\" />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAQO,MAAM,WAA8B,CAAC,EAAE,SAAS,OAAO,GAAG,YAAY;AAC3E,SACE,oBAAC,OAAA,EAAK,GAAG,OACN,oBACC,oBAAC,SAAA,EAAQ,WAAU,qBAAoB,OAAc,IAErD,oBAAC,WAAA,EAAU,WAAU,qBAAoB,GAE7C;AAEJ;"}

package/dist/Chip/index.d.ts

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

package/dist/Chip-DOSAEkS5.js

@@ -0,0 +1,24 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { c as cn } from "./utils-BnsJHiW8.js";
+import { R as RadioCheckedIcon, a as RadioUncheckedIcon } from "./RadioUncheckedIcon-KnzZG6cp.js";
+const Chip = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "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",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+const CheckBox = ({ checked }) => /* @__PURE__ */ jsx(Fragment, { children: checked ? /* @__PURE__ */ jsx(RadioCheckedIcon, { className: "gf-w-4 gf-sm:w-5" }) : /* @__PURE__ */ jsx(RadioUncheckedIcon, { className: "gf-w-4 gf-sm:w-5" }) });
+const Logo = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "gf-flex gf-items-center gf-justify-center", ...props, children });
+Chip.CheckBox = CheckBox;
+Chip.Logo = Logo;
+export {
+  Chip as C
+};
+//# sourceMappingURL=Chip-DOSAEkS5.js.map

package/dist/Chip-DOSAEkS5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-DOSAEkS5.js","sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["import { FC, ReactNode, HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/utils\";\nimport { RadioCheckedIcon } from \"../Icons/RadioCheckedIcon\";\nimport { RadioUncheckedIcon } from \"../Icons/RadioUncheckedIcon\";\n\ntype ChipProps = HTMLAttributes<HTMLDivElement> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Chip\n * @param children content within the chip\n * @param props additional div props to be spread\n * @returns Chip component\n */\nconst Chip: FC<ChipProps> & {\n  CheckBox: FC<CheckBoxProps>;\n  Logo: FC<LogoProps>;\n} = ({ children, className, ...props }) => {\n  return (\n    <div\n      className={cn(\n        \"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\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype CheckBoxProps = HTMLAttributes<HTMLDivElement> & {\n  checked: boolean;\n};\n\n/**\n * CheckBox\n * @param checked checkbox active or not\n * @returns CheckBox Icon component\n */\nconst CheckBox: FC<CheckBoxProps> = ({ checked }) => (\n  <>\n    {checked ? (\n      <RadioCheckedIcon className=\"gf-w-4 gf-sm:w-5\" />\n    ) : (\n      <RadioUncheckedIcon className=\"gf-w-4 gf-sm:w-5\" />\n    )}\n  </>\n);\n\ntype LogoProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\n/**\n * Logo\n * @param children home for the logo\n * @param props additional div props to be spread\n * @returns Logo component\n */\nconst Logo: FC<LogoProps> = ({ children, ...props }) => (\n  <div className=\"gf-flex gf-items-center gf-justify-center\" {...props}>\n    {children}\n  </div>\n);\n\nChip.CheckBox = CheckBox;\nChip.Logo = Logo;\n\nexport { Chip };\n"],"names":[],"mappings":";;;AAgBA,MAAM,OAGF,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAWA,MAAM,WAA8B,CAAC,EAAE,8CAElC,UAAA,UACC,oBAAC,kBAAA,EAAiB,WAAU,oBAAmB,IAE/C,oBAAC,oBAAA,EAAmB,WAAU,oBAAmB,GAErD;AAaF,MAAM,OAAsB,CAAC,EAAE,UAAU,GAAG,MAAA,MAC1C,oBAAC,OAAA,EAAI,WAAU,6CAA6C,GAAG,OAC5D,SAAA,CACH;AAGF,KAAK,WAAW;AAChB,KAAK,OAAO;"}

package/dist/Chip.js

@@ -0,0 +1,5 @@
+import { C } from "./Chip-DOSAEkS5.js";
+export {
+  C as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/dist/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/ClientOnly-CMQEf-Yl.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { u as useClientOnly } from "./useClientOnly-Bzx92NOa.js";
+const ClientOnly = ({ children, fallback = null }) => {
+  const isClient = useClientOnly();
+  if (!isClient) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+export {
+  ClientOnly as C
+};
+//# sourceMappingURL=ClientOnly-CMQEf-Yl.js.map

package/dist/ClientOnly-CMQEf-Yl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly-CMQEf-Yl.js","sources":["../src/components/ClientOnly/ClientOnly.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { useClientOnly } from \"../../hooks/useClientOnly\";\n\ntype ClientOnlyProps = {\n  children: ReactNode;\n  fallback?: ReactNode;\n};\n\n/**\n * ClientOnly wrapper component that only renders children on the client side\n * Useful for components that need to avoid SSR hydration issues\n * @param children - Components to render only on client side\n * @param fallback - Optional fallback content to show during SSR (defaults to null)\n */\nexport const ClientOnly = ({ children, fallback = null }: ClientOnlyProps) => {\n  const isClient = useClientOnly();\n\n  if (!isClient) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;AAcO,MAAM,aAAa,CAAC,EAAE,UAAU,WAAW,WAA4B;AAC5E,QAAM,WAAW,cAAA;AAEjB,MAAI,CAAC,UAAU;AACb,2CAAU,UAAA,SAAA,CAAS;AAAA,EACrB;AAEA,yCAAU,UAAS;AACrB;"}

package/dist/ClientOnly.js

@@ -0,0 +1,5 @@
+import { C } from "./ClientOnly-CMQEf-Yl.js";
+export {
+  C as ClientOnly
+};
+//# sourceMappingURL=ClientOnly.js.map

package/dist/ClientOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}