@sikka/hawa 0.25.2-next → 0.26.0-next

package/dist/chunk-3N6JJKMN.mjs

@@ -0,0 +1,263 @@
+// components/util.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// components/elements/button/Button.tsx
+import * as React2 from "react";
+import { cva } from "class-variance-authority";
+
+// components/elements/loading/Loading.tsx
+import React from "react";
+var Loading = ({
+  design = "spinner",
+  size = "sm",
+  themeMode = "light",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "hawa-h-4 hawa-w-4",
+    xs: "hawa-h-1 hawa-w-1",
+    sm: "hawa-h-6 hawa-w-6",
+    normal: "hawa-h-8 hawa-w-8",
+    lg: "hawa-h-14 hawa-w-14",
+    xl: "hawa-h-24 hawa-w-24"
+  };
+  let animationStyles = {
+    pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
+    bounce: "hawa-animate-bounce"
+  };
+  switch (design.split("-")[0]) {
+    case "dots":
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn("hawa-flex hawa-flex-row hawa-gap-2", props.className)
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        )
+      );
+    case "square":
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          viewBox: "0 0 35 35",
+          height: "35",
+          width: "35"
+        },
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            className: "squircle-track",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            className: "square-car",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5",
+            pathLength: "100"
+          }
+        )
+      );
+    case "squircle":
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          x: "0px",
+          y: "0px",
+          viewBox: "0 0 37 37",
+          height: "37",
+          width: "37",
+          preserveAspectRatio: "xMidYMid meet"
+        },
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            className: "squircle-track",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            className: "squircle-car",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        )
+      );
+    case "progress":
+      return /* @__PURE__ */ React.createElement("div", { className: "progress-loading" });
+    case "orbit":
+      return /* @__PURE__ */ React.createElement("div", { className: "orbit-container" });
+    default:
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("circle-container", sizeStyles[size]),
+          viewBox: "0 0 40 40",
+          height: "40",
+          width: "40"
+        },
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            className: cn("circle-track", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            className: cn("circle-car", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        )
+      );
+  }
+};
+
+// components/elements/button/Button.tsx
+var buttonVariants = cva(
+  "hawa-inline-flex hawa-items-center  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90",
+        light: "hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40",
+        destructive: "hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90",
+        outline: "hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        secondary: "hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80",
+        ghost: "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        link: "hawa-text-primary hawa-underline-offset-4 hover:hawa-underline",
+        combobox: "hawa-bg-background hawa-border",
+        neoBrutalism: "neo-brutalism"
+        // "hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active",
+      },
+      size: {
+        default: "hawa-h-10 hawa-px-4 hawa-py-2",
+        heightless: "hawa-px-4 hawa-py-4",
+        xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
+        sm: "hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3",
+        lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
+        xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
+        icon: "hawa-h-10 hawa-w-10",
+        smallIcon: "hawa-h-7 hawa-w-7"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    centered = true,
+    isLoading,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = "button";
+    const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
+    return /* @__PURE__ */ React2.createElement(
+      Comp,
+      {
+        className: cn(
+          buttonVariants({ variant, size, className }),
+          centered && "hawa-justify-center"
+        ),
+        ref,
+        ...props
+      },
+      isLoading ? /* @__PURE__ */ React2.createElement(
+        Loading,
+        {
+          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+          themeMode: variant === "outline" ? "light" : "dark",
+          color: loadingColor,
+          size: size === "sm" || size === "xs" ? "xs" : "button"
+        }
+      ) : children
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  cn,
+  Button
+};

package/dist/commonTypes-cyhMPvmz.d.mts

@@ -0,0 +1,4 @@
+type OrientationType = "vertical" | "horizontal";
+type RadiusType = "full" | "inherit" | "none";
+
+export type { OrientationType as O, RadiusType as R };

package/dist/commonTypes-cyhMPvmz.d.ts

@@ -0,0 +1,4 @@
+type OrientationType = "vertical" | "horizontal";
+type RadiusType = "full" | "inherit" | "none";
+
+export type { OrientationType as O, RadiusType as R };

package/dist/index.css

@@ -1690,6 +1690,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-max-w-2xs {
   max-width: 250px;
 }
+.hawa-max-w-4xl {
+  max-width: 56rem;
+}
 .hawa-max-w-\[200px\] {
   max-width: 200px;
 }

package/dist/signature/index.d.mts

@@ -0,0 +1,11 @@
+import React__default, { FC } from 'react';
+import { SignaturePadOptions } from 'signature_pad';
+
+interface SignatureCanvasProps extends SignaturePadOptions {
+    canvasProps?: React__default.CanvasHTMLAttributes<HTMLCanvasElement>;
+    clearOnResize?: boolean;
+    onGetImage?: any;
+}
+declare const Signature: FC<SignatureCanvasProps>;
+
+export { Signature, type SignatureCanvasProps };

package/dist/signature/index.d.ts

@@ -0,0 +1,11 @@
+import React__default, { FC } from 'react';
+import { SignaturePadOptions } from 'signature_pad';
+
+interface SignatureCanvasProps extends SignaturePadOptions {
+    canvasProps?: React__default.CanvasHTMLAttributes<HTMLCanvasElement>;
+    clearOnResize?: boolean;
+    onGetImage?: any;
+}
+declare const Signature: FC<SignatureCanvasProps>;
+
+export { Signature, type SignatureCanvasProps };

package/dist/signature/index.js

@@ -0,0 +1,151 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/elements/signature/index.ts
+var signature_exports = {};
+__export(signature_exports, {
+  Signature: () => Signature
+});
+module.exports = __toCommonJS(signature_exports);
+
+// components/elements/signature/Signature.tsx
+var import_react = __toESM(require("react"));
+
+// components/util.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// components/elements/signature/Signature.tsx
+var import_signature_pad = __toESM(require("signature_pad"));
+var import_trim_canvas = __toESM(require("trim-canvas"));
+var Signature = ({
+  canvasProps,
+  clearOnResize = false,
+  onGetImage,
+  ...sigPadProps
+}) => {
+  const canvasRef = (0, import_react.useRef)(null);
+  const sigPadRef = (0, import_react.useRef)(null);
+  const checkClearOnResize = () => {
+    if (!clearOnResize) {
+      return;
+    }
+    resizeCanvas();
+  };
+  const resizeCanvas = () => {
+    var _a;
+    const canvas = canvasRef.current;
+    if (canvas && canvas.parentElement) {
+      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      if (typeof (canvasProps == null ? void 0 : canvasProps.width) === "undefined") {
+        canvas.width = canvas.parentElement.offsetWidth * ratio;
+      } else {
+        canvas.width = Number(canvasProps.width) * ratio;
+      }
+      if (typeof (canvasProps == null ? void 0 : canvasProps.height) === "undefined") {
+        canvas.height = canvas.parentElement.offsetHeight * ratio;
+      } else {
+        canvas.height = Number(canvasProps.height) * ratio;
+      }
+      (_a = canvas.getContext("2d")) == null ? void 0 : _a.scale(ratio, ratio);
+      clear();
+    }
+  };
+  const getTrimmedCanvas = () => {
+    var _a;
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas reference is null");
+    }
+    const copy = document.createElement("canvas");
+    copy.width = canvas.width;
+    copy.height = canvas.height;
+    (_a = copy.getContext("2d")) == null ? void 0 : _a.drawImage(canvas, 0, 0);
+    return (0, import_trim_canvas.default)(copy);
+  };
+  const getSignatureImage = () => {
+    const trimmedCanvas = getTrimmedCanvas();
+    return trimmedCanvas.toDataURL();
+  };
+  (0, import_react.useEffect)(() => {
+    if (onGetImage) {
+      onGetImage(getSignatureImage);
+    }
+  }, [onGetImage]);
+  (0, import_react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      sigPadRef.current = new import_signature_pad.default(canvas, sigPadProps);
+      resizeCanvas();
+      window.addEventListener("resize", checkClearOnResize);
+    }
+    return () => {
+      window.removeEventListener("resize", checkClearOnResize);
+    };
+  }, [sigPadProps]);
+  const clear = () => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.clear();
+  };
+  const isEmpty = () => {
+    var _a;
+    return !!((_a = sigPadRef.current) == null ? void 0 : _a.isEmpty());
+  };
+  const fromDataURL = (dataURL, options) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.fromDataURL(dataURL, options);
+  };
+  const toDataURL = (type, encoderOptions) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.toDataURL(type, encoderOptions);
+  };
+  const fromData = (pointGroups) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.fromData(pointGroups);
+  };
+  const toData = () => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.toData();
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-w-full" }, /* @__PURE__ */ import_react.default.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      ...canvasProps,
+      className: cn("hawa-rounded", canvasProps == null ? void 0 : canvasProps.className)
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "clickable-link hawa-w-fit", onClick: () => clear() }, "Clear"));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Signature
+});

package/dist/signature/index.mjs

@@ -0,0 +1,109 @@
+import {
+  cn
+} from "../chunk-TE3BKEXL.mjs";
+
+// components/elements/signature/Signature.tsx
+import React, { useRef, useEffect } from "react";
+import SignaturePad from "signature_pad";
+import trimCanvas from "trim-canvas";
+var Signature = ({
+  canvasProps,
+  clearOnResize = false,
+  onGetImage,
+  ...sigPadProps
+}) => {
+  const canvasRef = useRef(null);
+  const sigPadRef = useRef(null);
+  const checkClearOnResize = () => {
+    if (!clearOnResize) {
+      return;
+    }
+    resizeCanvas();
+  };
+  const resizeCanvas = () => {
+    var _a;
+    const canvas = canvasRef.current;
+    if (canvas && canvas.parentElement) {
+      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      if (typeof (canvasProps == null ? void 0 : canvasProps.width) === "undefined") {
+        canvas.width = canvas.parentElement.offsetWidth * ratio;
+      } else {
+        canvas.width = Number(canvasProps.width) * ratio;
+      }
+      if (typeof (canvasProps == null ? void 0 : canvasProps.height) === "undefined") {
+        canvas.height = canvas.parentElement.offsetHeight * ratio;
+      } else {
+        canvas.height = Number(canvasProps.height) * ratio;
+      }
+      (_a = canvas.getContext("2d")) == null ? void 0 : _a.scale(ratio, ratio);
+      clear();
+    }
+  };
+  const getTrimmedCanvas = () => {
+    var _a;
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas reference is null");
+    }
+    const copy = document.createElement("canvas");
+    copy.width = canvas.width;
+    copy.height = canvas.height;
+    (_a = copy.getContext("2d")) == null ? void 0 : _a.drawImage(canvas, 0, 0);
+    return trimCanvas(copy);
+  };
+  const getSignatureImage = () => {
+    const trimmedCanvas = getTrimmedCanvas();
+    return trimmedCanvas.toDataURL();
+  };
+  useEffect(() => {
+    if (onGetImage) {
+      onGetImage(getSignatureImage);
+    }
+  }, [onGetImage]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      sigPadRef.current = new SignaturePad(canvas, sigPadProps);
+      resizeCanvas();
+      window.addEventListener("resize", checkClearOnResize);
+    }
+    return () => {
+      window.removeEventListener("resize", checkClearOnResize);
+    };
+  }, [sigPadProps]);
+  const clear = () => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.clear();
+  };
+  const isEmpty = () => {
+    var _a;
+    return !!((_a = sigPadRef.current) == null ? void 0 : _a.isEmpty());
+  };
+  const fromDataURL = (dataURL, options) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.fromDataURL(dataURL, options);
+  };
+  const toDataURL = (type, encoderOptions) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.toDataURL(type, encoderOptions);
+  };
+  const fromData = (pointGroups) => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.fromData(pointGroups);
+  };
+  const toData = () => {
+    var _a;
+    return (_a = sigPadRef.current) == null ? void 0 : _a.toData();
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "hawa-w-full" }, /* @__PURE__ */ React.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      ...canvasProps,
+      className: cn("hawa-rounded", canvasProps == null ? void 0 : canvasProps.className)
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "clickable-link hawa-w-fit", onClick: () => clear() }, "Clear"));
+};
+export {
+  Signature
+};