@bizapps/ui 1.9.0 → 1.10.0

package/dist/main.cjs

@@ -28,6 +28,7 @@ var reactHookForm = require('react-hook-form');
 var zod = require('@hookform/resolvers/zod');
 var confetti = require('canvas-confetti');
 var reactTable = require('@tanstack/react-table');
+var SignaturePadLib = require('signature_pad');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -53,6 +54,7 @@ var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 var countryFlags__namespace = /*#__PURE__*/_interopNamespace(countryFlags);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
 var confetti__default = /*#__PURE__*/_interopDefault(confetti);
+var SignaturePadLib__default = /*#__PURE__*/_interopDefault(SignaturePadLib);
 
 // src/components/ui/Alert/alert.tsx
 function cn(...inputs) {
@@ -953,10 +955,11 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
-        "placeholder:text-muted-foreground",
+        "border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[border-color,box-shadow] outline-hidden md:text-sm",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
         "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
         "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
@@ -6188,10 +6191,10 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "border-input flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+        "border-input flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[border-color,box-shadow] outline-hidden md:text-sm",
         "placeholder:text-muted-foreground",
         "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
         "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
@@ -9421,6 +9424,198 @@ function DrawerDescription({
     }
   );
 }
+function SignaturePad({
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  onEmptyChange,
+  disabled = false,
+  height = 260,
+  penColor = "black",
+  // Smoother than the library defaults (0.5–2.5 px, 5 px, 16 ms), which drop points and turn
+  // fast or small curves into visible straight segments.
+  minWidth = 1,
+  maxWidth = 3,
+  minDistance = 1,
+  throttle = 0,
+  velocityFilterWeight,
+  clearLabel,
+  className,
+  ref
+}) {
+  const canvasRef = react.useRef(null);
+  const padRef = react.useRef(null);
+  const emptyRef = react.useRef(true);
+  const [empty, setEmptyState] = react.useState(true);
+  const onEmptyChangeRef = react.useRef(onEmptyChange);
+  const drawnRef = react.useRef({
+    data: [],
+    width: 0,
+    height: 0,
+    scale: 1
+  });
+  const optionsRef = react.useRef({
+    penColor,
+    minWidth,
+    maxWidth,
+    minDistance,
+    throttle,
+    velocityFilterWeight
+  });
+  react.useEffect(() => {
+    onEmptyChangeRef.current = onEmptyChange;
+  }, [onEmptyChange]);
+  const setEmpty = (next) => {
+    if (emptyRef.current === next) return;
+    emptyRef.current = next;
+    setEmptyState(next);
+    onEmptyChangeRef.current?.(next);
+  };
+  const clear = () => {
+    padRef.current?.clear();
+    drawnRef.current = { data: [], width: 0, height: 0, scale: 1 };
+    setEmpty(true);
+  };
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const pad = new SignaturePadLib__default.default(canvas, optionsRef.current);
+    padRef.current = pad;
+    let width = 0;
+    let fittedHeight = 0;
+    const redraw = () => {
+      const drawn = drawnRef.current;
+      drawn.scale = Math.min(width / drawn.width, fittedHeight / drawn.height, 1);
+      pad.clear();
+      pad.fromData(
+        drawn.data.map((group) => ({
+          ...group,
+          points: group.points.map((point) => ({
+            ...point,
+            x: point.x * drawn.scale,
+            y: point.y * drawn.scale
+          }))
+        }))
+      );
+    };
+    const handleEnd = () => {
+      const drawn = drawnRef.current;
+      if (drawn.data.length === 0) {
+        drawn.width = width;
+        drawn.height = fittedHeight;
+        drawn.scale = 1;
+      }
+      const newest = pad.toData().at(-1);
+      if (newest) {
+        const points = newest.points.map((point) => ({
+          ...point,
+          x: point.x / drawn.scale,
+          y: point.y / drawn.scale
+        }));
+        drawn.data = [...drawn.data, { ...newest, points }];
+        const margin = newest.maxWidth ?? 0;
+        const reach = (axis) => Math.max(...points.map((point) => point[axis])) + margin;
+        drawn.width = Math.max(drawn.width, reach("x"));
+        drawn.height = Math.max(drawn.height, reach("y"));
+        const fitting = Math.min(width / drawn.width, fittedHeight / drawn.height, 1);
+        if (fitting !== drawn.scale) redraw();
+      }
+      setEmpty(pad.isEmpty());
+    };
+    pad.addEventListener("endStroke", handleEnd);
+    const fit = () => {
+      const nextWidth = canvas.offsetWidth;
+      const nextHeight = canvas.offsetHeight;
+      if (!nextWidth || !nextHeight) return;
+      if (nextWidth === width && nextHeight === fittedHeight) return;
+      width = nextWidth;
+      fittedHeight = nextHeight;
+      const ratio = window.devicePixelRatio || 1;
+      canvas.width = nextWidth * ratio;
+      canvas.height = nextHeight * ratio;
+      canvas.getContext("2d")?.scale(ratio, ratio);
+      pad.clear();
+      if (drawnRef.current.data.length > 0) redraw();
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(canvas);
+    return () => {
+      observer.disconnect();
+      pad.removeEventListener("endStroke", handleEnd);
+      pad.off();
+      padRef.current = null;
+    };
+  }, []);
+  react.useEffect(() => {
+    if (disabled) padRef.current?.off();
+    else padRef.current?.on();
+  }, [disabled]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      clear,
+      isEmpty: () => padRef.current?.isEmpty() ?? true,
+      toBlob: () => new Promise((resolve, reject) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return reject(new Error("The signature pad is not mounted"));
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("The signature could not be encoded as PNG"));
+        }, "image/png");
+      })
+    }),
+    // `clear` only touches refs and state setters, so the handle is created once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "signature-pad",
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(
+        // Fixed light "paper": the pen is black and the PNG is read on white by others. The
+        // primitive keeps the pad light for consumers that define a dark theme, where a themed
+        // surface (`background`, `border`) would turn dark and hide the black ink.
+        "bg-main-alternative-secondary border-dark-100 relative overflow-hidden rounded-xl border",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-slot": "signature-pad-canvas",
+            role: "img",
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedBy,
+            "aria-disabled": disabled || void 0,
+            style: { height },
+            className: "block w-full touch-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "data-slot": "signature-pad-clear",
+            "aria-label": clearLabel,
+            disabled,
+            "aria-disabled": empty && !disabled ? true : void 0,
+            onClick: () => {
+              if (!emptyRef.current) clear();
+            },
+            className: "bg-main-white text-dark-600 border-dark-100 hover:bg-dark-100 hover:text-main-black aria-disabled:hover:bg-main-white absolute right-2 bottom-2 border border-solid aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrushCleaning, { "aria-hidden": true, className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -9661,6 +9856,7 @@ exports.SidebarProvider = SidebarProvider;
 exports.SidebarRail = SidebarRail;
 exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
+exports.SignaturePad = SignaturePad;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;