@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/chunk-IGBQGR6G.mjs

@@ -0,0 +1,234 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
+
+// src/components/InputOTP.tsx
+import { useEffect, useId, useMemo, useRef } from "react";
+import {
+  applyOtpBackspace,
+  applyOtpCharInput,
+  applyOtpDelete,
+  classNames,
+  devWarn,
+  distributeOtpPaste,
+  formatOtpSlotLabel,
+  getInputOTPLabels,
+  getOtpContainerClasses,
+  getOtpErrorClasses,
+  getOtpSeparatorClasses,
+  getOtpSeparatorIndices,
+  getOtpSlotClasses,
+  injectShakeStyle,
+  isOtpComplete,
+  normalizeOtpValue,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTP = ({
+  size = "md",
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  length = 6,
+  value,
+  defaultValue,
+  type = "numeric",
+  pattern,
+  masked = false,
+  maskChar = "\u2022",
+  groups,
+  separator = "-",
+  disabled = false,
+  readonly = false,
+  autoFocus = false,
+  name,
+  id,
+  ariaLabel,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  className,
+  style,
+  ...rest
+}) => {
+  injectShakeStyle();
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const labels = getInputOTPLabels(config.locale);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-otp-error-${reactId}`;
+  const containerRef = useRef(null);
+  const slotRefs = useRef([]);
+  const charOptions = useMemo(() => ({ type, pattern }), [type, pattern]);
+  const [rawValue, setRawValue] = useControlledState(value, defaultValue ?? "", onChange);
+  const currentValue = normalizeOtpValue(rawValue, length, charOptions);
+  const separatorIndices = useMemo(() => getOtpSeparatorIndices(length, groups), [length, groups]);
+  if (groups && groups.length > 0 && separatorIndices.length === 0) {
+    devWarn("InputOTP.groups", "[Tigercat] InputOTP: `groups` must sum to `length`; ignoring.");
+  }
+  useEffect(() => {
+    if (status === "error" && containerRef.current) {
+      const el = containerRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, shakeTrigger]);
+  useEffect(() => {
+    if (autoFocus) {
+      slotRefs.current[Math.min(currentValue.length, length - 1)]?.focus();
+    }
+  }, []);
+  const focusSlot = (index) => {
+    slotRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+  };
+  const displayChar = (val, index) => {
+    const char = val[index] ?? "";
+    return char && masked ? maskChar : char;
+  };
+  const emitValue = (next) => {
+    if (next === currentValue) return;
+    setRawValue(next);
+    if (isOtpComplete(next, length)) onComplete?.(next);
+  };
+  const isInteractive = !disabled && !readonly;
+  const handleSlotChange = (index, event) => {
+    if (!isInteractive) return;
+    const result = applyOtpCharInput(
+      currentValue,
+      index,
+      event.currentTarget.value,
+      length,
+      charOptions
+    );
+    event.currentTarget.value = displayChar(result.value, index);
+    emitValue(result.value);
+    focusSlot(result.nextIndex);
+  };
+  const handleSlotKeyDown = (index, event) => {
+    if (!isInteractive) return;
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        const result = applyOtpBackspace(currentValue, index);
+        emitValue(result.value);
+        focusSlot(result.nextIndex);
+        break;
+      }
+      case "Delete": {
+        event.preventDefault();
+        const result = applyOtpDelete(currentValue, index);
+        emitValue(result.value);
+        break;
+      }
+      case "ArrowLeft":
+        event.preventDefault();
+        focusSlot(index - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        focusSlot(index + 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusSlot(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusSlot(Math.min(currentValue.length, length - 1));
+        break;
+    }
+  };
+  const handlePaste = (event) => {
+    if (!isInteractive) return;
+    event.preventDefault();
+    const result = distributeOtpPaste(event.clipboardData.getData("text"), length, charOptions);
+    if (!result) return;
+    emitValue(result.value);
+    focusSlot(result.nextIndex);
+  };
+  const handleSlotFocus = (event) => {
+    event.currentTarget.select();
+  };
+  const handleGroupFocus = (event) => {
+    if (!containerRef.current?.contains(event.relatedTarget)) {
+      onFocus?.(event);
+    }
+  };
+  const handleGroupBlur = (event) => {
+    if (!containerRef.current?.contains(event.relatedTarget)) {
+      onBlur?.(event);
+    }
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const slotClasses = getOtpSlotClasses(size, status, { disabled, readonly });
+  const slots = [];
+  for (let i = 0; i < length; i++) {
+    slots.push(
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            slotRefs.current[i] = el;
+          },
+          className: slotClasses,
+          type: "text",
+          inputMode: type === "numeric" ? "numeric" : void 0,
+          autoComplete: i === 0 ? "one-time-code" : "off",
+          value: displayChar(currentValue, i),
+          disabled,
+          readOnly: readonly,
+          "aria-label": formatOtpSlotLabel(labels.slotLabel, i + 1, length),
+          ...status === "error" ? { "aria-invalid": true } : {},
+          onChange: (event) => handleSlotChange(i, event),
+          onKeyDown: (event) => handleSlotKeyDown(i, event),
+          onFocus: handleSlotFocus
+        },
+        `slot-${i}`
+      )
+    );
+    if (separatorIndices.includes(i) && separator) {
+      slots.push(
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: getOtpSeparatorClasses(size), children: separator }, `separator-${i}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classNames("inline-block", className), style, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: containerRef,
+        id,
+        role: "group",
+        "aria-label": ariaLabel ?? labels.groupLabel,
+        ...activeError ? { "aria-describedby": errorMsgId } : {},
+        className: getOtpContainerClasses(size),
+        onPaste: handlePaste,
+        onFocus: handleGroupFocus,
+        onBlur: handleGroupBlur,
+        children: [
+          slots,
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue })
+        ]
+      }
+    ),
+    activeError && /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getOtpErrorClasses(), children: errorMessage })
+  ] });
+};
+var InputOTP_default = InputOTP;
+
+export {
+  InputOTP,
+  InputOTP_default
+};

package/dist/chunk-J76R2S62.mjs

@@ -0,0 +1,161 @@
+// src/components/Masonry.tsx
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import {
+  classNames,
+  computeMasonryColumnHeights,
+  distributeMasonryItems,
+  getMasonryColumnClasses,
+  getMasonryColumnStyle,
+  getMasonryGapStyle,
+  getMasonryItemClasses,
+  getMasonryRootClasses,
+  moduloDistributeMasonryItems,
+  observeScrollAreaSize,
+  readMasonryItemHeight,
+  resolveMasonryColumnCount,
+  resolveMasonryGap,
+  MASONRY_DEFAULT_COLUMNS,
+  MASONRY_DEFAULT_GAP
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function childSignature(nodes) {
+  return nodes.map(
+    (node, index) => `${index}:${typeof node === "object" && node !== null && "key" in node ? String(node.key ?? "") : String(node)}`
+  ).join("\0");
+}
+function sameHeights(previous, next) {
+  return previous.length === next.length && previous.every((height, index) => height === next[index]);
+}
+function subscribeToResize(onChange) {
+  window.addEventListener("resize", onChange);
+  return () => window.removeEventListener("resize", onChange);
+}
+var noopSubscribe = () => () => void 0;
+var Masonry = forwardRef(
+  ({
+    columns = MASONRY_DEFAULT_COLUMNS,
+    gap = MASONRY_DEFAULT_GAP,
+    className,
+    columnClassName,
+    itemClassName,
+    children,
+    onLayout,
+    style,
+    ...rest
+  }, ref) => {
+    const itemRefs = useRef(/* @__PURE__ */ new Map());
+    const heightsRef = useRef([]);
+    const lastSignatureRef = useRef("");
+    const onLayoutRef = useRef(onLayout);
+    onLayoutRef.current = onLayout;
+    const [distribution, setDistribution] = useState([]);
+    const childNodes = useMemo(() => Children.toArray(children), [children]);
+    const signature = childSignature(childNodes);
+    const isResponsive = typeof columns === "object" || typeof gap === "object";
+    const subscribe = useMemo(
+      () => isResponsive ? subscribeToResize : noopSubscribe,
+      [isResponsive]
+    );
+    const windowWidth = useSyncExternalStore(
+      subscribe,
+      () => window.innerWidth,
+      () => 1024
+    );
+    const columnCount = resolveMasonryColumnCount(columns, windowWidth);
+    const gapPx = resolveMasonryGap(gap, windowWidth);
+    const relayout = useCallback(() => {
+      const elements = itemRefs.current;
+      const indices = Array.from(elements.keys());
+      const maxIndex = indices.length > 0 ? Math.max(...indices) : -1;
+      const nextHeights = [];
+      for (let index = 0; index <= maxIndex; index++) {
+        const element = elements.get(index);
+        nextHeights.push(element ? readMasonryItemHeight(element) : 0);
+      }
+      const countChanged = nextHeights.length !== heightsRef.current.length;
+      if (!countChanged && sameHeights(heightsRef.current, nextHeights)) return;
+      heightsRef.current = nextHeights;
+      const nextDistribution = distributeMasonryItems(nextHeights, columnCount);
+      setDistribution(nextDistribution);
+      onLayoutRef.current?.({
+        columnCount,
+        columnHeights: computeMasonryColumnHeights(nextHeights, nextDistribution, gapPx)
+      });
+    }, [columnCount, gapPx]);
+    useEffect(() => {
+      if (lastSignatureRef.current !== signature) {
+        lastSignatureRef.current = signature;
+        relayout();
+        return;
+      }
+      if (heightsRef.current.length === 0) return;
+      const nextDistribution = distributeMasonryItems(heightsRef.current, columnCount);
+      setDistribution(nextDistribution);
+      onLayoutRef.current?.({
+        columnCount,
+        columnHeights: computeMasonryColumnHeights(heightsRef.current, nextDistribution, gapPx)
+      });
+    }, [signature, columnCount, gapPx, relayout]);
+    useEffect(() => {
+      if (childNodes.length === 0) return;
+      return observeScrollAreaSize(Array.from(itemRefs.current.values()), relayout);
+    }, [signature, distribution, relayout, childNodes.length]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        relayout,
+        getColumnCount: () => columnCount
+      }),
+      [relayout, columnCount]
+    );
+    const activeDistribution = distribution.length > 0 && heightsRef.current.length === childNodes.length ? distribution : moduloDistributeMasonryItems(childNodes.length, columnCount);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        className: classNames(getMasonryRootClasses(className)),
+        style: { ...getMasonryGapStyle(gapPx), ...style },
+        "data-masonry": "",
+        children: activeDistribution.map((indices, columnIndex) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getMasonryColumnClasses(columnClassName),
+            style: getMasonryColumnStyle(gapPx),
+            "data-masonry-column": columnIndex,
+            children: indices.map((index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: getMasonryItemClasses(itemClassName),
+                "data-masonry-item": index,
+                ref: (el) => {
+                  if (el) itemRefs.current.set(index, el);
+                  else itemRefs.current.delete(index);
+                },
+                children: childNodes[index]
+              },
+              `item-${index}`
+            ))
+          },
+          `column-${columnIndex}`
+        ))
+      }
+    );
+  }
+);
+Masonry.displayName = "Masonry";
+var Masonry_default = Masonry;
+
+export {
+  Masonry,
+  Masonry_default
+};

package/dist/{chunk-DNOPEJ5I.mjs → chunk-JZZPLKTW.mjs}

@@ -8,6 +8,7 @@ import {
 function useChartInteraction(options) {
   const {
     hoverable,
+    showTooltip = true,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -50,17 +51,18 @@ function useChartInteraction(options) {
   );
   const handleMouseEnter = useCallback(
     (index, event) => {
-      if (!hoverable) return;
+      if (!hoverable && !showTooltip) return;
       if (hoveredIndexProp === void 0) {
         setLocalHoveredIndex(index);
       }
       setTooltipPosition({ x: event.clientX, y: event.clientY });
+      if (!hoverable) return;
       onHoveredIndexChange?.(index);
       if (callbacks?.onHover && getData) {
         callbacks.onHover(index, getData(index) ?? null);
       }
     },
-    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+    [hoverable, showTooltip, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
   );
   const handleMouseMove = useCallback(
     (event) => {
@@ -70,13 +72,14 @@ function useChartInteraction(options) {
   );
   const handleMouseLeave = useCallback(() => {
     tooltipScheduler.cancel();
-    if (!hoverable) return;
+    if (!hoverable && !showTooltip) return;
     if (hoveredIndexProp === void 0) {
       setLocalHoveredIndex(null);
     }
+    if (!hoverable) return;
     onHoveredIndexChange?.(null);
     callbacks?.onHover?.(null, null);
-  }, [hoverable, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  }, [hoverable, showTooltip, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
   const handleClick = useCallback(
     (index) => {
       if (!selectable) return;

package/dist/{chunk-7KCQMXJA.mjs → chunk-KDURW5AS.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
@@ -70,6 +70,7 @@ var FunnelChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -191,7 +192,7 @@ var FunnelChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/{chunk-TFMEHUVZ.mjs → chunk-KKN7KLTB.mjs}

@@ -18,7 +18,6 @@ var QRCode = ({
   size = 128,
   color = "#000000",
   bgColor = "#ffffff",
-  level: _level = "M",
   status = "active",
   onRefresh,
   className,

package/dist/{chunk-6MGQAJ62.mjs → chunk-KL6YJIZ3.mjs}

@@ -11,15 +11,24 @@ import {
   colorPickerPanelClasses,
   colorPickerInputClasses,
   colorPickerPresetClasses,
-  hexToRgb,
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
   formatColorString,
   parseColorInput,
+  parseColorParts,
   classNames
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
+function rgbFromValue(value) {
+  const parts = parseColorParts(value);
+  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
+}
+function explicitAlphaFromValue(value) {
+  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
+  const parts = parseColorParts(value);
+  return parts ? parts.a : null;
+}
 var ColorPicker = ({
   value = "#2563eb",
   disabled = false,
@@ -31,7 +40,7 @@ var ColorPicker = ({
   onChange
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [alpha, setAlpha] = useState(1);
+  const [alpha, setAlpha] = useState(() => explicitAlphaFromValue(value) ?? 1);
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
@@ -47,8 +56,12 @@ var ColorPicker = ({
     restoreFocusOnDismiss: true,
     onDismiss: () => setIsOpen(false)
   });
-  const rgb = useMemo(() => hexToRgb(value), [value]);
+  const rgb = useMemo(() => rgbFromValue(value), [value]);
   const hsv = useMemo(() => rgbToHsv(rgb.r, rgb.g, rgb.b), [rgb]);
+  useEffect(() => {
+    const next = explicitAlphaFromValue(value);
+    if (next !== null) setAlpha(next);
+  }, [value]);
   const displayValue = useMemo(
     () => formatColorString(rgb.r, rgb.g, rgb.b, format, showAlpha ? alpha : void 0),
     [rgb, format, showAlpha, alpha]
@@ -80,13 +93,17 @@ var ColorPicker = ({
   function handleInputChange(e) {
     const val = e.target.value;
     setInputValue(val);
-    const hex = parseColorInput(val);
-    if (hex) {
-      onChange?.(hex);
+    const parsed = parseColorInput(val);
+    if (parsed) {
+      onChange?.(parsed);
     }
   }
   function handleAlphaChange(e) {
-    setAlpha(Number(e.target.value) / 100);
+    const nextAlpha = Number(e.target.value) / 100;
+    setAlpha(nextAlpha);
+    const emitFormat = format === "hex" ? "rgb" : format;
+    const next = formatColorString(rgb.r, rgb.g, rgb.b, emitFormat, nextAlpha);
+    onChange?.(next);
   }
   function handlePresetClick(color) {
     onChange?.(color);