@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-WNLUUD5N.mjs

@@ -0,0 +1,179 @@
+import { useRef, useId, useState, useEffect, useCallback } from 'react';
+import { injectShakeStyle, SHAKE_CLASS, getInputClasses, classNames, getInputAffixClasses, getInputWrapperClasses, getInputCountClasses, parseInputValue, getInputErrorClasses, getInputClearButtonClasses, getInputPasswordToggleClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Input.tsx
+var Input = ({
+  size = "md",
+  type = "text",
+  status = "default",
+  errorMessage,
+  _shakeTrigger,
+  prefix,
+  suffix,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly = false,
+  required = false,
+  maxLength,
+  minLength,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  clearable = false,
+  showPassword = false,
+  showCount = false,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...props
+}) => {
+  injectShakeStyle();
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-error-${reactId}`;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  useEffect(() => {
+    if (status === "error" && wrapperRef.current) {
+      const el = wrapperRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, _shakeTrigger]);
+  const handleAnimationEnd = useCallback(() => {
+    wrapperRef.current?.classList.remove(SHAKE_CLASS);
+  }, []);
+  const isControlled = value !== void 0;
+  const inputValue = isControlled ? value : internalValue;
+  const currentValStr = String(inputValue);
+  const handleInput = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onInput?.(event);
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const togglePasswordVisibility = () => {
+    setPasswordVisible((v) => !v);
+  };
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix || clearable || showPassword;
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !disabled && !readonly && currentValStr.length > 0;
+  const showPasswordToggle = showPassword && type === "password" && !disabled;
+  const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
+  const inputClasses = getInputClasses({
+    size,
+    status,
+    hasPrefix,
+    hasSuffix
+  });
+  const renderSuffix = () => {
+    if (activeError) {
+      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(size), children: errorMessage });
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputClearButtonClasses(size),
+          onClick: handleClear,
+          "aria-label": "Clear input",
+          tabIndex: -1,
+          children: "\u2715"
+        }
+      );
+    }
+    if (showPasswordToggle) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputPasswordToggleClasses(size),
+          onClick: togglePasswordVisibility,
+          "aria-label": passwordVisible ? "Hide password" : "Show password",
+          tabIndex: -1,
+          children: passwordVisible ? "\u{1F648}" : "\u{1F441}"
+        }
+      );
+    }
+    if (suffix) {
+      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", size), children: suffix });
+    }
+    return null;
+  };
+  const wrapperNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: classNames(getInputWrapperClasses(), className),
+      style,
+      onAnimationEnd: handleAnimationEnd,
+      children: [
+        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", size), children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: inputRef,
+            className: inputClasses,
+            type: effectiveType,
+            value: inputValue,
+            placeholder,
+            disabled,
+            readOnly: readonly,
+            required,
+            maxLength,
+            minLength,
+            name,
+            id,
+            autoComplete,
+            autoFocus,
+            ...status === "error" ? { "aria-invalid": true } : {},
+            ...activeError ? { "aria-describedby": errorMsgId } : {},
+            onInput: handleInput,
+            onChange: handleChange,
+            onFocus,
+            onBlur
+          }
+        ),
+        renderSuffix()
+      ]
+    }
+  );
+  if (showCount) {
+    const count = currentValStr.length;
+    const isOver = maxLength !== void 0 && count > maxLength;
+    const countText = maxLength !== void 0 ? `${count} / ${maxLength}` : `${count}`;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      wrapperNode,
+      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText })
+    ] });
+  }
+  return wrapperNode;
+};
+
+export { Input };

package/dist/{chunk-VCOBBJLP.js → chunk-WVVXZKNI.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Textarea.tsx
 var Textarea = react.forwardRef(
   ({
     size = "md",
@@ -29,9 +29,10 @@ var Textarea = react.forwardRef(
     ...props
   }, ref) => {
     const textareaRef = react.useRef(null);
-    const [internalValue, setInternalValue] = react.useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
+    const [currentValue, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(
+      value,
+      defaultValue || ""
+    );
     const setRefs = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);

package/dist/chunk-XEYP62CR.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageViewer.tsx
+function SvgIcon({ pathD, label }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD })
+    }
+  );
+}
+var ImageViewer = ({
+  images,
+  open = false,
+  currentIndex = 0,
+  zoomable = true,
+  rotatable = true,
+  showNav = true,
+  showCounter = true,
+  maskClosable = true,
+  minZoom = 0.5,
+  maxZoom = 3,
+  className,
+  onClose,
+  onIndexChange
+}) => {
+  const [index, setIndex] = react.useState(currentIndex);
+  const [zoom, setZoom] = react.useState(1);
+  const [rotation, setRotation] = react.useState(0);
+  react.useEffect(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  const handleClose = react.useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const handlePrev = react.useCallback(() => {
+    const newIndex = (index - 1 + images.length) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  const handleNext = react.useCallback(() => {
+    const newIndex = (index + 1) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, handleClose, handlePrev, handleNext]);
+  const backdropClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.imageViewerBackdropClasses, className),
+    [className]
+  );
+  if (!open || images.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: backdropClasses,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image viewer",
+      onClick: (e) => {
+        if (maskClosable && e.target === e.currentTarget) handleClose();
+      },
+      children: [
+        showCounter && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerCounterClasses, children: [
+          index + 1,
+          " / ",
+          images.length
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: tigercatCore.imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.close, label: "Close" })
+          }
+        ),
+        showNav && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.prev, label: "Previous" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.next, label: "Next" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: tigercatCore.imageViewerImgClasses,
+            src: images[index],
+            alt: `Image ${index + 1}`,
+            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
+            draggable: false
+          }
+        ),
+        (zoomable || rotatable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerToolbarClasses, children: [
+          zoomable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(tigercatCore.clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomOut, label: "Zoom out" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(tigercatCore.clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomIn, label: "Zoom in" })
+              }
+            )
+          ] }),
+          rotatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation - 90)),
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateLeft, label: "Rotate left" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation + 90)),
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateRight, label: "Rotate right" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.ImageViewer = ImageViewer;

package/dist/chunk-XFJ5Q5PF.mjs

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo } from 'react';
+import { classNames, buttonGroupBaseClasses, buttonGroupVerticalClasses, buttonGroupHorizontalClasses, buttonGroupItemVerticalClasses, buttonGroupItemClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ButtonGroup.tsx
+var ButtonGroupContext = createContext(null);
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+var ButtonGroup = ({
+  size,
+  vertical = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = useMemo(() => ({ size }), [size]);
+  const groupClasses = useMemo(
+    () => classNames(
+      buttonGroupBaseClasses,
+      vertical ? buttonGroupVerticalClasses : buttonGroupHorizontalClasses,
+      vertical ? buttonGroupItemVerticalClasses : buttonGroupItemClasses,
+      className
+    ),
+    [vertical, className]
+  );
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+
+export { ButtonGroup, ButtonGroupContext, useButtonGroupContext };

package/dist/chunk-XODGTE2Y.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/QRCode.tsx
+var QRCode = ({
+  value,
+  size = 128,
+  color = "#000000",
+  bgColor = "#ffffff",
+  level = "M",
+  status = "active",
+  onRefresh,
+  className
+}) => {
+  const matrix = react.useMemo(() => tigercatCore.generateQRMatrix(value), [value]);
+  const moduleSize = react.useMemo(() => size / matrix.length, [size, matrix.length]);
+  const containerClass = tigercatCore.classNames(tigercatCore.qrcodeContainerClasses, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        xmlns: "http://www.w3.org/2000/svg",
+        role: "img",
+        "aria-label": "QR Code",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: size, height: size, fill: bgColor }),
+          matrix.flatMap(
+            (row, r) => row.map(
+              (cell, c) => cell ? /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: c * moduleSize,
+                  y: r * moduleSize,
+                  width: moduleSize,
+                  height: moduleSize,
+                  fill: color
+                },
+                `${r}-${c}`
+              ) : null
+            )
+          )
+        ]
+      }
+    ),
+    status === "expired" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.qrcodeOverlayClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.qrcodeExpiredTextClasses, children: "QR code expired" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.qrcodeRefreshClasses, onClick: onRefresh, children: "Refresh" })
+    ] }),
+    status === "loading" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.qrcodeOverlayClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Loading..." }) })
+  ] });
+};
+var QRCode_default = QRCode;
+
+exports.QRCode = QRCode;
+exports.QRCode_default = QRCode_default;

package/dist/chunk-Y3NDP56G.mjs

@@ -0,0 +1,174 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import React, { useMemo } from 'react';
+import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, classNames, chartAxisTickTextClasses, getChartElementOpacity } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const cells = useMemo(
+    () => computeHeatmapCells(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor
+    }),
+    [data, xLabels, yLabels, innerRect.width, innerRect.height, cellGap, minColor, maxColor]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        cells.map((cell, idx) => {
+          const opacity = getChartElementOpacity(idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: classNames(interactive && "cursor-pointer"),
+                style: { transition: "opacity 0.2s ease-out" },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    chart,
+    tooltip
+  ] });
+};
+
+export { HeatmapChart };