@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-IZC77KAN.mjs

@@ -0,0 +1,497 @@
+import {
+  ColorSwatch
+} from "./chunk-JVLLOOEE.mjs";
+import {
+  FormItemControlProvider,
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay,
+  useBodyScrollLock,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ColorPicker.tsx
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  applyColorPickerAlpha,
+  applyColorPickerHue,
+  classNames,
+  colorPickerBaseClasses,
+  colorPickerCheckerboardStyle,
+  colorPickerChromeLabelClasses,
+  colorPickerClearButtonClasses,
+  colorPickerHueTrackStyle,
+  colorPickerInputClasses,
+  colorPickerPanelClasses,
+  colorPickerPreviewClasses,
+  colorPickerSliderTrackClasses,
+  colorPickerSvPlaneClasses,
+  colorPickerSvThumbClasses,
+  colorPickerTriggerSwatchClasses,
+  commitPresetColor,
+  createDocumentDragSession,
+  cssColorFromHsva,
+  formatHsva,
+  getColorPickerAlphaTrackStyle,
+  getColorPickerFormatLabel,
+  getColorPickerLabels,
+  getColorPickerSvPlaneStyle,
+  getColorPickerTriggerClasses,
+  hsvaFromSvPointer,
+  isColorPickerEmpty,
+  mergeAriaDescribedBy,
+  mergeHsvaHue,
+  mergeTigerLocale,
+  nudgeColorPickerSv,
+  parseColorInput,
+  parseColorToHsva,
+  seedColorPickerHsva,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
+  SHAKE_CLASS,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPicker = forwardRef(
+  function ColorPicker2(props, ref) {
+    const {
+      value,
+      defaultValue,
+      disabled = false,
+      size = "md",
+      showAlpha = false,
+      format = "hex",
+      presets,
+      className,
+      locale,
+      labels: labelsOverride,
+      open,
+      defaultOpen = false,
+      clearable = true,
+      closeOnSelect = true,
+      name,
+      id,
+      status: statusProp,
+      placement = "bottom-start",
+      offset = 4,
+      dropdownClassName,
+      getPopupContainer,
+      onChange,
+      onOpenChange,
+      onBlur,
+      style
+    } = props;
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getColorPickerLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    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 props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+      formItemControl?.describedBy
+    );
+    const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["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,
+      onChange: (next) => {
+        onChange?.(next ?? "");
+        formItemControl?.onChange?.(next ?? "");
+      }
+    });
+    const [isOpen, setOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const draggingRef = useRef(false);
+    const [hsva, setHsva] = useState(() => seedColorPickerHsva(committed));
+    const hsvaRef = useRef(hsva);
+    hsvaRef.current = hsva;
+    const [inputValue, setInputValue] = useState(
+      () => isColorPickerEmpty(committed) ? "" : formatHsva(seedColorPickerHsva(committed), format, showAlpha)
+    );
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const svRef = useRef(null);
+    const dragSessionRef = useRef(null);
+    const instanceId = useId();
+    const panelId = `${instanceId}-panel`;
+    const overlay = useAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: panelRef,
+      containerRef: rootRef,
+      placement,
+      offset,
+      layout: "fullscreen-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: getPopupContainer,
+      onDismiss: () => {
+        setOpen(false);
+        window.setTimeout(() => triggerRef.current?.focus(), 0);
+      }
+    });
+    useFocusTrap({ enabled: isOpen, containerRef: panelRef, inert: true });
+    useBodyScrollLock({ enabled: isOpen });
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useEffect(() => {
+      if (draggingRef.current) return;
+      const parsed = parseColorToHsva(committed);
+      if (parsed) {
+        setHsva((prev) => mergeHsvaHue(prev, parsed));
+        setInputValue(formatHsva(parsed, format, showAlpha));
+        return;
+      }
+      if (isColorPickerEmpty(committed)) {
+        setInputValue("");
+      }
+    }, [committed, format, showAlpha]);
+    useEffect(() => {
+      if (status === "error") runShakeAnimation(rootRef.current);
+    }, [status, formItemControl?.shakeTrigger]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const plane = svRef.current;
+      plane?.focus();
+    }, [isOpen]);
+    useEffect(() => {
+      return () => dragSessionRef.current?.dispose();
+    }, []);
+    const setOpenSafe = useCallback(
+      (next) => {
+        if (effectiveDisabled) return;
+        setOpen(next);
+      },
+      [effectiveDisabled, setOpen]
+    );
+    const commitHsva = useCallback(
+      (next) => {
+        setHsva(next);
+        const formatted = formatHsva(next, format, showAlpha);
+        setInputValue(formatted);
+        setCommitted(formatted);
+      },
+      [format, setCommitted, showAlpha]
+    );
+    const displayColor = cssColorFromHsva(hsva, showAlpha);
+    const hasValue = !isColorPickerEmpty(committed);
+    const showClear = Boolean(clearable && hasValue && !effectiveDisabled);
+    function handleTriggerKeyDown(event) {
+      if (effectiveDisabled) return;
+      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpenSafe(!isOpen);
+      } else if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        setOpenSafe(false);
+      } else if ((event.key === "Delete" || event.key === "Backspace") && showClear) {
+        event.preventDefault();
+        setCommitted("");
+        setInputValue("");
+      }
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.current && next && rootRef.current.contains(next) || panelRef.current && next && panelRef.current.contains(next)) {
+        return;
+      }
+      formItemControl?.onBlur?.();
+      onBlur?.(event);
+    }
+    function startSvDrag(event) {
+      if (effectiveDisabled) return;
+      event.preventDefault();
+      const plane = svRef.current;
+      if (!plane) return;
+      draggingRef.current = true;
+      const apply = (clientX, clientY) => {
+        commitHsva(
+          hsvaFromSvPointer(
+            clientX,
+            clientY,
+            plane.getBoundingClientRect(),
+            hsvaRef.current.h,
+            hsvaRef.current.a
+          )
+        );
+      };
+      apply(event.clientX, event.clientY);
+      dragSessionRef.current?.dispose();
+      dragSessionRef.current = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        pointerId: event.pointerId,
+        pointerTarget: plane,
+        dragThreshold: 0,
+        onMove: (payload) => apply(payload.currentX, payload.currentY),
+        onEnd: () => {
+          draggingRef.current = false;
+          dragSessionRef.current = null;
+        }
+      });
+    }
+    function handleSvKeyDown(event) {
+      const step = event.shiftKey ? 10 : 2;
+      let next = null;
+      if (event.key === "ArrowRight") next = nudgeColorPickerSv(hsva, step, 0);
+      else if (event.key === "ArrowLeft") next = nudgeColorPickerSv(hsva, -step, 0);
+      else if (event.key === "ArrowUp") next = nudgeColorPickerSv(hsva, 0, step);
+      else if (event.key === "ArrowDown") next = nudgeColorPickerSv(hsva, 0, -step);
+      if (!next) return;
+      event.preventDefault();
+      commitHsva(next);
+    }
+    function handleHueChange(event) {
+      draggingRef.current = true;
+      commitHsva(applyColorPickerHue(hsva, Number(event.target.value)));
+      draggingRef.current = false;
+    }
+    function handleAlphaChange(event) {
+      draggingRef.current = true;
+      commitHsva(applyColorPickerAlpha(hsva, Number(event.target.value) / 100));
+      draggingRef.current = false;
+    }
+    function handleInputChange(event) {
+      const raw = event.target.value;
+      setInputValue(raw);
+      const parsed = parseColorInput(raw, format, showAlpha);
+      if (!parsed) return;
+      const next = parseColorToHsva(parsed);
+      if (!next) return;
+      setHsva(next);
+      setCommitted(parsed);
+    }
+    function handlePreset(color) {
+      const formatted = commitPresetColor(color, hsva, format, showAlpha);
+      if (!formatted) return;
+      const next = parseColorToHsva(formatted);
+      if (next) setHsva(next);
+      setInputValue(formatted);
+      setCommitted(formatted);
+      if (closeOnSelect) setOpenSafe(false);
+    }
+    function handleClear() {
+      setCommitted("");
+      setInputValue("");
+    }
+    const triggerSwatchStyle = {
+      ...colorPickerCheckerboardStyle,
+      backgroundColor: hasValue ? displayColor : void 0
+    };
+    if (hasValue) {
+      triggerSwatchStyle.backgroundImage = `${colorPickerCheckerboardStyle.backgroundImage}`;
+      triggerSwatchStyle.boxShadow = `inset 0 0 0 999px ${displayColor}`;
+    }
+    const svStyle = {
+      ...getColorPickerSvPlaneStyle(hsva.h)
+    };
+    const alphaStyle = getColorPickerAlphaTrackStyle(hsva);
+    const panel = isOpen ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.panelTitle,
+        className: classNames(colorPickerPanelClasses, overlay.floatingClasses, dropdownClassName),
+        style: overlay.floatingStyles,
+        "data-positioned": overlay.positioned,
+        "data-tiger-colorpicker-panel": "",
+        onBlur: handleFocusOut,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--tiger-text,#111827)]", children: labels.panelTitle }),
+            showClear ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: colorPickerClearButtonClasses,
+                "data-tiger-colorpicker-clear": "",
+                onClick: handleClear,
+                children: labels.clear
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: svRef,
+              className: colorPickerSvPlaneClasses,
+              style: svStyle,
+              role: "slider",
+              tabIndex: effectiveDisabled ? -1 : 0,
+              "aria-label": `${labels.saturation}, ${labels.brightness}`,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(hsva.s),
+              "aria-valuetext": `${labels.saturation} ${Math.round(hsva.s)}, ${labels.brightness} ${Math.round(hsva.v)}`,
+              "data-tiger-colorpicker-sv": "",
+              onPointerDown: startSvDrag,
+              onKeyDown: handleSvKeyDown,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: colorPickerSvThumbClasses,
+                  style: { left: `${hsva.s}%`, top: `${100 - hsva.v}%` },
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: colorPickerChromeLabelClasses, children: labels.hue }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 360,
+                value: Math.round(hsva.h),
+                className: colorPickerSliderTrackClasses,
+                style: colorPickerHueTrackStyle,
+                "aria-label": labels.hue,
+                disabled: effectiveDisabled,
+                onChange: handleHueChange
+              }
+            )
+          ] }),
+          showAlpha ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: colorPickerChromeLabelClasses, children: labels.alpha }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                value: Math.round(hsva.a * 100),
+                className: colorPickerSliderTrackClasses,
+                style: alphaStyle,
+                "aria-label": labels.alpha,
+                disabled: effectiveDisabled,
+                onChange: handleAlphaChange
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: classNames(colorPickerChromeLabelClasses, "uppercase"), children: getColorPickerFormatLabel(format, labels) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: colorPickerInputClasses,
+                value: inputValue,
+                "aria-label": labels.value,
+                disabled: effectiveDisabled,
+                onChange: handleInputChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: colorPickerPreviewClasses,
+                style: {
+                  ...colorPickerCheckerboardStyle,
+                  boxShadow: `inset 0 0 0 999px ${displayColor}`
+                },
+                role: "img",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: hasValue ? formatHsva(hsva, format, showAlpha) : "" })
+          ] }),
+          presets && presets.length > 0 ? /* @__PURE__ */ jsx(FormItemControlProvider, { value: null, children: /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              colors: presets,
+              value: hasValue ? formatHsva(hsva, "hex", false) : void 0,
+              columns: Math.min(8, presets.length),
+              size: "sm",
+              ariaLabel: labels.swatches,
+              onChange: (color) => handlePreset(color)
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: selectDoneButtonClasses,
+              onClick: () => setOpenSafe(false),
+              children: labels.done
+            }
+          ) })
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classNames(colorPickerBaseClasses, className, status === "error" && SHAKE_CLASS),
+        style,
+        onBlur: handleFocusOut,
+        children: [
+          effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: hasValue ? committed ?? "" : "" }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: setTriggerRef,
+              type: "button",
+              id: effectiveId,
+              className: getColorPickerTriggerClasses(size, effectiveDisabled, status),
+              "data-tiger-colorpicker-trigger": "",
+              "aria-label": labelledby ? void 0 : labels.trigger,
+              "aria-labelledby": labelledby,
+              "aria-describedby": describedBy,
+              title: labels.trigger,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-controls": isOpen ? panelId : void 0,
+              "aria-invalid": status === "error" ? true : void 0,
+              "aria-required": formItemControl?.required || void 0,
+              disabled: effectiveDisabled,
+              onClick: () => setOpenSafe(!isOpen),
+              onKeyDown: handleTriggerKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: colorPickerTriggerSwatchClasses, style: triggerSwatchStyle })
+            }
+          ),
+          renderOverlayPortal(panel, overlay.target)
+        ]
+      }
+    );
+  }
+);
+var ColorPicker_default = ColorPicker;
+
+export {
+  ColorPicker,
+  ColorPicker_default
+};

package/dist/chunk-J3BDVC5F.mjs

@@ -0,0 +1,107 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/QRCode.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  classNames,
+  mergeTigerLocale,
+  getQRCodeLabels,
+  generateQRMatrix,
+  qrcodeContainerClasses,
+  qrcodeOverlayClasses,
+  qrcodeStatusTextClasses,
+  qrcodeRefreshClasses,
+  QRCODE_DEFAULT_COLOR,
+  QRCODE_DEFAULT_BG,
+  QR_QUIET_ZONE,
+  qrViewBoxSize,
+  qrNeedsContrastWarning,
+  devWarn
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var QRCode = forwardRef(function QRCode2({
+  value,
+  size = 128,
+  color = QRCODE_DEFAULT_COLOR,
+  bgColor = QRCODE_DEFAULT_BG,
+  status = "active",
+  onRefresh,
+  className,
+  locale,
+  style,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getQRCodeLabels(mergedLocale), [mergedLocale]);
+  const matrix = useMemo(() => generateQRMatrix(value ?? ""), [value]);
+  const moduleCount = matrix.length;
+  const viewBox = qrViewBoxSize(moduleCount);
+  const overlay = status === "expired" || status === "loading";
+  const namedValue = value ? ` (${value})` : "";
+  const imgLabel = status === "expired" ? `${labels.expiredText}${namedValue}` : status === "loading" ? `${labels.loadingText}${namedValue}` : `${labels.ariaLabel}${namedValue}`;
+  if (qrNeedsContrastWarning(color, bgColor)) {
+    devWarn(
+      "QRCode.contrast",
+      "QRCode: `color` and `bgColor` are under 3:1 contrast; scanners may fail."
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: classNames(qrcodeContainerClasses, className),
+      style: { ...style, width: size, height: size },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: `0 0 ${viewBox} ${viewBox}`,
+            xmlns: "http://www.w3.org/2000/svg",
+            role: overlay ? void 0 : "img",
+            "aria-hidden": overlay ? true : void 0,
+            "aria-label": overlay ? void 0 : imgLabel,
+            className: "block h-full w-full",
+            children: [
+              /* @__PURE__ */ jsx("rect", { width: viewBox, height: viewBox, fill: bgColor }),
+              matrix.flatMap(
+                (row, r) => row.map(
+                  (cell, c) => cell ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: c + QR_QUIET_ZONE,
+                      y: r + QR_QUIET_ZONE,
+                      width: 1,
+                      height: 1,
+                      fill: color
+                    },
+                    `${r}-${c}`
+                  ) : null
+                )
+              )
+            ]
+          }
+        ),
+        status === "expired" ? /* @__PURE__ */ jsxs("div", { className: qrcodeOverlayClasses, role: "status", "aria-label": imgLabel, children: [
+          /* @__PURE__ */ jsx("span", { className: qrcodeStatusTextClasses, children: labels.expiredText }),
+          onRefresh ? /* @__PURE__ */ jsx("button", { type: "button", className: qrcodeRefreshClasses, onClick: onRefresh, children: labels.refreshText }) : null
+        ] }) : null,
+        status === "loading" ? /* @__PURE__ */ jsx("div", { className: qrcodeOverlayClasses, role: "status", "aria-label": imgLabel, children: /* @__PURE__ */ jsx("span", { className: qrcodeStatusTextClasses, children: labels.loadingText }) }) : null
+      ]
+    }
+  );
+});
+var QRCode_default = QRCode;
+
+export {
+  QRCode,
+  QRCode_default
+};