@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-KTBAJ3TL.mjs

@@ -0,0 +1,408 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Signature.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  SHAKE_CLASS,
+  appendSignaturePoint,
+  beginSignatureStroke,
+  classNames,
+  clampSignatureLineWidth,
+  clearSignatureStrokes,
+  createDocumentDragSession,
+  createSignatureChangePayload,
+  createSignatureSession,
+  exportSignatureDataUrl,
+  finishSignatureStroke,
+  getSignatureCanvasStatusClasses,
+  getSignatureCanvasWrapClasses,
+  getSignatureDevicePixelRatio,
+  getSignatureLabels,
+  getSignaturePoint,
+  isSignatureEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  resolveSignaturePenColor,
+  resolveSignatureSurfaceColor,
+  runShakeAnimation,
+  signatureCanvasClasses,
+  signatureRootClasses,
+  signatureStrokesToSvg,
+  signatureSvgToDataUrl,
+  signatureToolbarButtonClasses,
+  signatureToolbarClasses,
+  signatureValueToStrokes,
+  drawSignatureStrokes,
+  syncSignatureCanvasBackingStore,
+  undoSignatureStroke
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_HEIGHT = 180;
+var Signature = forwardRef(function Signature2({
+  value,
+  defaultValue,
+  width: widthProp,
+  height = DEFAULT_HEIGHT,
+  penColor,
+  backgroundColor,
+  lineWidth = 2,
+  disabled = false,
+  readonly = false,
+  clearable = true,
+  exportType = "image/png",
+  quality = 0.92,
+  ariaLabel,
+  clearText,
+  undoText,
+  locale,
+  labels: labelsOverride,
+  name,
+  id,
+  status: statusProp,
+  className,
+  onChange,
+  onBegin,
+  onEnd,
+  onClear,
+  onUndo,
+  onBlur,
+  style,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getSignatureLabels(mergedLocale, {
+      ...labelsOverride,
+      ariaLabel: ariaLabel?.trim() || labelsOverride?.ariaLabel,
+      undoText: undoText?.trim() || labelsOverride?.undoText,
+      clearText: clearText?.trim()
+    }),
+    [ariaLabel, clearText, labelsOverride, mergedLocale, undoText]
+  );
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const parsedValue = value !== void 0 ? value : formItemControl?.value;
+  const [committed, setCommitted] = useControlledState({
+    value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: defaultValue ?? "",
+    onChange: (next, payload) => {
+      onChange?.(next, payload);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const rootRef = useRef(null);
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  const sessionRef = useRef(
+    createSignatureSession(signatureValueToStrokes(committed))
+  );
+  const dragDisposeRef = useRef(void 0);
+  const activePointerRef = useRef(null);
+  const [strokes, setStrokes] = useState(() => signatureValueToStrokes(committed));
+  const [observedWidth, setObservedWidth] = useState(0);
+  const logicalWidth = widthProp ?? observedWidth;
+  const isInteractive = !effectiveDisabled && !readonly;
+  const normalizedLineWidth = clampSignatureLineWidth(lineWidth);
+  const exportOptions = useCallback(
+    () => ({
+      width: Math.max(1, logicalWidth || widthProp || 1),
+      height,
+      backgroundColor,
+      surfaceColor: resolveSignatureSurfaceColor(canvasRef.current),
+      quality,
+      exportType
+    }),
+    [backgroundColor, exportType, height, logicalWidth, quality, widthProp]
+  );
+  const draw = useCallback(
+    (nextStrokes) => {
+      const canvas = canvasRef.current;
+      if (!canvas || logicalWidth <= 0 || height <= 0) return;
+      const context = syncSignatureCanvasBackingStore(
+        canvas,
+        logicalWidth,
+        height,
+        getSignatureDevicePixelRatio()
+      );
+      if (!context) return;
+      drawSignatureStrokes(context, nextStrokes, {
+        width: logicalWidth,
+        height,
+        backgroundColor
+      });
+    },
+    [backgroundColor, height, logicalWidth]
+  );
+  useLayoutEffect(() => {
+    draw(strokes);
+  }, [draw, strokes]);
+  useEffect(() => {
+    if (sessionRef.current.activeStroke) return;
+    const next = signatureValueToStrokes(committed);
+    sessionRef.current = createSignatureSession(next);
+    setStrokes(next);
+  }, [committed]);
+  useEffect(() => {
+    if (widthProp != null) return;
+    const wrap = wrapRef.current;
+    if (!wrap || typeof ResizeObserver === "undefined") {
+      if (wrap) setObservedWidth(Math.floor(wrap.clientWidth));
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const next = Math.floor(entries[0]?.contentRect.width ?? wrap.clientWidth);
+      if (next > 0) setObservedWidth(next);
+    });
+    observer.observe(wrap);
+    const initial = Math.floor(wrap.clientWidth);
+    if (initial > 0) setObservedWidth(initial);
+    return () => observer.disconnect();
+  }, [widthProp]);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, formItemControl?.shakeTrigger]);
+  const emitPayload = useCallback(
+    (session, extra) => {
+      const payload = createSignatureChangePayload(session.strokes, exportOptions());
+      sessionRef.current = createSignatureSession(session.strokes);
+      setStrokes(session.strokes);
+      setCommitted(payload.value, payload);
+      formItemControl?.onChange?.(payload.value);
+      if (extra?.clear) onClear?.();
+      if (extra?.undo) onUndo?.();
+      return payload;
+    },
+    [exportOptions, formItemControl, onClear, onUndo, setCommitted]
+  );
+  const clear = useCallback(() => {
+    if (effectiveDisabled || readonly) return;
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    const session = clearSignatureStrokes();
+    emitPayload(session, { clear: true });
+  }, [effectiveDisabled, emitPayload, readonly]);
+  const undo = useCallback(() => {
+    if (effectiveDisabled || readonly) return;
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    const session = undoSignatureStroke(sessionRef.current);
+    emitPayload(session, { undo: true });
+  }, [effectiveDisabled, emitPayload, readonly]);
+  const toSVG = useCallback(
+    () => signatureStrokesToSvg(sessionRef.current.strokes, exportOptions()),
+    [exportOptions]
+  );
+  const toDataURL = useCallback(
+    (type = exportType, nextQuality = quality) => {
+      if (type === "image/svg+xml") return signatureSvgToDataUrl(toSVG());
+      return exportSignatureDataUrl(sessionRef.current.strokes, type, {
+        ...exportOptions(),
+        quality: nextQuality
+      });
+    },
+    [exportOptions, exportType, quality, toSVG]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear,
+      undo,
+      isEmpty: () => isSignatureEmpty(sessionRef.current.strokes),
+      toDataURL,
+      toSVG,
+      focus: () => canvasRef.current?.focus()
+    }),
+    [clear, toDataURL, toSVG, undo]
+  );
+  const getPoint = (clientX, clientY) => {
+    const canvas = canvasRef.current;
+    const rect = canvas?.getBoundingClientRect() ?? {
+      left: 0,
+      top: 0,
+      width: logicalWidth,
+      height
+    };
+    return getSignaturePoint(clientX, clientY, rect, logicalWidth || rect.width, height);
+  };
+  const handlePointerDown = (event) => {
+    if (!isInteractive) return;
+    event.preventDefault();
+    const pointerId = event.pointerId;
+    const color = resolveSignaturePenColor(event.currentTarget, penColor);
+    const next = beginSignatureStroke(
+      sessionRef.current,
+      getPoint(event.clientX, event.clientY),
+      pointerId,
+      color,
+      normalizedLineWidth
+    );
+    if (next.pointerId !== pointerId) return;
+    sessionRef.current = next;
+    activePointerRef.current = pointerId;
+    setStrokes(next.strokes);
+    onBegin?.();
+    dragDisposeRef.current?.();
+    const session = createDocumentDragSession({
+      startX: event.clientX,
+      startY: event.clientY,
+      pointerId,
+      pointerTarget: event.currentTarget,
+      dragThreshold: 0,
+      onMove: (payload) => {
+        const moved = appendSignaturePoint(
+          sessionRef.current,
+          getPoint(payload.currentX, payload.currentY),
+          pointerId
+        );
+        sessionRef.current = moved;
+        setStrokes(moved.strokes);
+      },
+      onEnd: () => endDrawing(pointerId)
+    });
+    dragDisposeRef.current = () => session.dispose();
+  };
+  const endDrawing = (id2) => {
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    if (activePointerRef.current !== id2) return;
+    activePointerRef.current = null;
+    if (!sessionRef.current.activeStroke) return;
+    const finished = finishSignatureStroke(sessionRef.current, id2);
+    sessionRef.current = finished;
+    const payload = emitPayload(finished);
+    if (payload) onEnd?.(payload);
+  };
+  useEffect(() => () => dragDisposeRef.current?.(), []);
+  const handleKeyDown = (event) => {
+    if (!clearable || effectiveDisabled || readonly) return;
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      undo();
+      return;
+    }
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      undo();
+      return;
+    }
+    if (event.key === "Delete") {
+      event.preventDefault();
+      clear();
+    }
+  };
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next)) return;
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const empty = isSignatureEmpty(strokes) && !committed;
+  const { "aria-describedby": _describedBy, "aria-labelledby": _labelledby, ...rootRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: classNames(signatureRootClasses, className, status === "error" && SHAKE_CLASS),
+      style,
+      onBlur: handleFocusOut,
+      ...rootRest,
+      children: [
+        effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: committed ?? "" }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: wrapRef,
+            className: classNames(
+              getSignatureCanvasWrapClasses(effectiveDisabled, readonly),
+              getSignatureCanvasStatusClasses(status)
+            ),
+            children: /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: signatureCanvasClasses,
+                width: Math.max(1, logicalWidth),
+                height,
+                tabIndex: effectiveDisabled ? -1 : 0,
+                role: "textbox",
+                "aria-multiline": "true",
+                id: effectiveId,
+                "aria-label": labelledby ? void 0 : labels.ariaLabel,
+                "aria-labelledby": labelledby,
+                "aria-describedby": describedBy,
+                "aria-disabled": effectiveDisabled || void 0,
+                "aria-readonly": readonly || void 0,
+                "aria-invalid": status === "error" ? true : void 0,
+                "aria-required": formItemControl?.required || void 0,
+                onPointerDown: handlePointerDown,
+                onLostPointerCapture: () => {
+                  const id2 = activePointerRef.current;
+                  if (id2 != null) endDrawing(id2);
+                },
+                onKeyDown: handleKeyDown
+              }
+            )
+          }
+        ),
+        clearable ? /* @__PURE__ */ jsxs("div", { className: signatureToolbarClasses, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: signatureToolbarButtonClasses,
+              disabled: effectiveDisabled || readonly || empty,
+              onClick: undo,
+              children: labels.undoText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: signatureToolbarButtonClasses,
+              disabled: effectiveDisabled || readonly || empty,
+              onClick: clear,
+              children: labels.clearText
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+Signature.displayName = "Signature";
+var Signature_default = Signature;
+
+export {
+  Signature,
+  Signature_default
+};

package/dist/{chunk-XJ7U2W7S.mjs → chunk-LHHRNRND.mjs}

@@ -1,10 +1,11 @@
 // src/components/Space.tsx
+import { forwardRef } from "react";
 import {
   getSpaceClasses,
   getSpaceStyle
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
-var Space = ({
+var Space = forwardRef(function Space2({
   direction = "horizontal",
   size = "md",
   align = "start",
@@ -13,18 +14,21 @@ var Space = ({
   className,
   style,
   ...props
-}) => {
+}, ref) {
   const gapStyle = getSpaceStyle(size);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...props,
+      ref,
+      "data-tiger-space": "",
       className: getSpaceClasses({ direction, size, align, wrap }, className),
       style: gapStyle ? { ...gapStyle, ...style } : style,
       children
     }
   );
-};
+});
+Space.displayName = "Space";
 
 export {
   Space