@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/{chunk-RCNTRSUA.mjs → chunk-INBSKSZG.mjs}

@@ -1,5 +1,5 @@
 import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import { clampValue, formatPrecision, stepValue, isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD } from '@expcat/tigercat-core';
+import { isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD, stepValue, clampValue, formatPrecision } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/InputNumber.tsx
@@ -45,15 +45,12 @@ var InputNumber = ({
     },
     [formatter, precision]
   );
-  const parseValue = useCallback(
-    (str) => {
-      if (str === "" || str === "-") return null;
-      if (parser) return parser(str);
-      const num = Number(str);
-      return Number.isNaN(num) ? null : num;
-    },
-    [parser]
-  );
+  const parseValue = (str) => {
+    if (str === "" || str === "-") return null;
+    if (parser) return parser(str);
+    const num = Number(str);
+    return Number.isNaN(num) ? null : num;
+  };
   useEffect(() => {
     if (!focused) {
       setDisplayValue(toDisplayValue(currentValue));
@@ -64,69 +61,54 @@ var InputNumber = ({
       inputRef.current.focus();
     }
   }, [autoFocus]);
-  const commitValue = useCallback(
-    (val) => {
-      let finalVal = val;
-      if (finalVal !== null) {
-        finalVal = clampValue(finalVal, min, max);
-        if (precision !== void 0) {
-          finalVal = formatPrecision(finalVal, precision);
-        }
-      }
-      if (!isControlled) {
-        setInternalValue(finalVal);
+  const commitValue = (val) => {
+    let finalVal = val;
+    if (finalVal !== null) {
+      finalVal = clampValue(finalVal, min, max);
+      if (precision !== void 0) {
+        finalVal = formatPrecision(finalVal, precision);
       }
-      onChange?.(finalVal);
-      setDisplayValue(toDisplayValue(finalVal));
-    },
-    [min, max, precision, isControlled, onChange, toDisplayValue]
-  );
-  const handleStep = useCallback(
-    (direction) => {
-      if (disabled || readonly) return;
-      const next = stepValue(currentValue, step, direction, min, max, precision);
-      commitValue(next);
-    },
-    [currentValue, step, min, max, precision, disabled, readonly, commitValue]
-  );
-  const handleInput = useCallback((e) => {
+    }
+    if (!isControlled) {
+      setInternalValue(finalVal);
+    }
+    onChange?.(finalVal);
+    setDisplayValue(toDisplayValue(finalVal));
+  };
+  const handleStep = (direction) => {
+    if (disabled || readonly) return;
+    const next = stepValue(currentValue, step, direction, min, max, precision);
+    commitValue(next);
+  };
+  const handleInput = (e) => {
     setDisplayValue(e.target.value);
-  }, []);
-  const handleBlur = useCallback(
-    (e) => {
-      setFocused(false);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    const parsed = parseValue(displayValue);
+    commitValue(parsed);
+    onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    setFocused(true);
+    if (formatter && currentValue !== null) {
+      setDisplayValue(String(currentValue));
+    }
+    onFocus?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (!keyboard || disabled || readonly) return;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleStep("up");
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleStep("down");
+    } else if (e.key === "Enter") {
       const parsed = parseValue(displayValue);
       commitValue(parsed);
-      onBlur?.(e);
-    },
-    [displayValue, parseValue, commitValue, onBlur]
-  );
-  const handleFocus = useCallback(
-    (e) => {
-      setFocused(true);
-      if (formatter && currentValue !== null) {
-        setDisplayValue(String(currentValue));
-      }
-      onFocus?.(e);
-    },
-    [formatter, currentValue, onFocus]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (!keyboard || disabled || readonly) return;
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        handleStep("up");
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        handleStep("down");
-      } else if (e.key === "Enter") {
-        const parsed = parseValue(displayValue);
-        commitValue(parsed);
-      }
-    },
-    [keyboard, disabled, readonly, handleStep, parseValue, displayValue, commitValue]
-  );
+    }
+  };
   const atMin = isAtMin(currentValue, min);
   const atMax = isAtMax(currentValue, max);
   const wrapperClasses = useMemo(

package/dist/chunk-IOHPB4CF.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var GaugeChart = ({
+  width = 280,
+  height = 200,
+  padding = 24,
+  value,
+  min = 0,
+  max = 100,
+  startAngle = 135,
+  endAngle = 405,
+  arcWidth = 20,
+  showTicks = true,
+  tickCount = 5,
+  valueFormatter,
+  label,
+  segments,
+  trackColor = "var(--tiger-border,#e5e7eb)",
+  color = "var(--tiger-primary,#2563eb)",
+  title: chartTitle,
+  desc,
+  className
+}) => {
+  const innerRect = React.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const radius = React.useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2 - 4,
+    [innerRect.width, innerRect.height]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const needleAngle = React.useMemo(
+    () => tigercatCore.valueToGaugeAngle(value, min, max, startAngle, endAngle),
+    [value, min, max, startAngle, endAngle]
+  );
+  const ticks = React.useMemo(
+    () => showTicks ? tigercatCore.computeGaugeTicks(cx, cy, radius, min, max, startAngle, endAngle, tickCount) : [],
+    [showTicks, cx, cy, radius, min, max, startAngle, endAngle, tickCount]
+  );
+  const trackPath = tigercatCore.createGaugeArcPath(cx, cy, radius, startAngle, endAngle, arcWidth);
+  const valuePath = needleAngle > startAngle ? tigercatCore.createGaugeArcPath(cx, cy, radius, startAngle, needleAngle, arcWidth) : null;
+  const needlePath = tigercatCore.createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, needleAngle);
+  const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title: chartTitle,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: trackPath, fill: trackColor, strokeWidth: 0 }),
+        segments ? segments.map((seg, i) => {
+          const sStart = tigercatCore.valueToGaugeAngle(seg.range[0], min, max, startAngle, endAngle);
+          const sEnd = tigercatCore.valueToGaugeAngle(seg.range[1], min, max, startAngle, endAngle);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: tigercatCore.createGaugeArcPath(cx, cy, radius, sStart, sEnd, arcWidth),
+              fill: seg.color,
+              strokeWidth: 0
+            },
+            `seg-${i}`
+          );
+        }) : valuePath && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: valuePath,
+            fill: color,
+            strokeWidth: 0,
+            style: { transition: "all 0.3s ease-out" }
+          }
+        ),
+        ticks.map((tick, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: tick.x1,
+              y1: tick.y1,
+              x2: tick.x2,
+              y2: tick.y2,
+              stroke: "var(--tiger-text-secondary,#6b7280)",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: tick.x2 + (tick.x2 - tick.x1) * 1.5,
+              y: tick.y2 + (tick.y2 - tick.y1) * 1.5,
+              className: tigercatCore.chartAxisTickTextClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: { fontSize: "10px" },
+              children: tick.label
+            }
+          )
+        ] }, `tick-${i}`)),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: needlePath,
+            fill: "var(--tiger-text,#374151)",
+            style: { transition: "all 0.3s ease-out" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 5, fill: "var(--tiger-text,#374151)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: cx,
+            y: cy + radius * 0.35,
+            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: formattedValue
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: cx,
+            y: cy + radius * 0.35 + 20,
+            className: tigercatCore.chartAxisTickTextClasses,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.GaugeChart = GaugeChart;

package/dist/{chunk-QIJG42YQ.mjs → chunk-IPLK4AIE.mjs}

@@ -1,4 +1,4 @@
-import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { ImagePreview } from './chunk-HLJQZUIY.mjs';
 import { createContext, useState, useRef, useCallback, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -38,10 +38,10 @@ var ImageGroup = ({
     preview && /* @__PURE__ */ jsx(
       ImagePreview,
       {
-        visible: previewVisible,
+        open: previewVisible,
         images: imagesRef.current,
         currentIndex: previewIndex,
-        onVisibleChange: (val) => {
+        onOpenChange: (val) => {
           setPreviewVisible(val);
           if (!val) onPreviewVisibleChange?.(false);
         },

package/dist/{chunk-XWRJVNB6.js → chunk-IWP22YTF.js}

@@ -25,17 +25,22 @@ var Form = React.forwardRef(
     inlineMessage = true,
     showRequiredAsterisk = true,
     disabled = false,
+    loading = false,
     children,
     onSubmit,
     onValidate,
     onChange,
     className,
+    fieldDependencies,
+    undoable = false,
+    maxHistorySize = 50,
     ...props
   }, ref) => {
     const [errors, setErrors] = React.useState([]);
     const [formValues, setFormValues] = React.useState(model);
     const fieldRulesRef = React__default.default.useRef({});
     const formValuesRef = React__default.default.useRef(model);
+    const [historyState, setHistoryState] = React.useState(() => tigercatCore.createFormHistory(model, maxHistorySize));
     React__default.default.useEffect(() => {
       setFormValues(model);
     }, [model]);
@@ -80,24 +85,29 @@ var Form = React.forwardRef(
     const validateField = React.useCallback(
       async (fieldName, rulesOverride, trigger) => {
         const fieldRules = resolveFieldRules(fieldName, rulesOverride);
-        if (!fieldRules) {
-          return;
+        if (fieldRules) {
+          const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+          setErrors((prevErrors) => {
+            const existing = prevErrors.find((e) => e.field === fieldName);
+            const existingMessage = existing?.message ?? null;
+            if (!error && !existingMessage) return prevErrors;
+            if (error && error === existingMessage) return prevErrors;
+            const filtered = prevErrors.filter((e) => e.field !== fieldName);
+            if (error) {
+              return [...filtered, { field: fieldName, message: error }];
+            }
+            return filtered;
+          });
+          onValidate?.(fieldName, !error, error);
         }
-        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
-        setErrors((prevErrors) => {
-          const existing = prevErrors.find((e) => e.field === fieldName);
-          const existingMessage = existing?.message ?? null;
-          if (!error && !existingMessage) return prevErrors;
-          if (error && error === existingMessage) return prevErrors;
-          const filtered = prevErrors.filter((e) => e.field !== fieldName);
-          if (error) {
-            return [...filtered, { field: fieldName, message: error }];
+        if (fieldDependencies) {
+          const dependents = tigercatCore.getDependentFields(fieldName, fieldDependencies);
+          for (const dep of dependents) {
+            await validateField(dep);
           }
-          return filtered;
-        });
-        onValidate?.(fieldName, !error, error);
+        }
       },
-      [resolveFieldRules, runFieldValidation, onValidate]
+      [resolveFieldRules, runFieldValidation, onValidate, fieldDependencies]
     );
     const runValidation = React.useCallback(async () => {
       const effectiveRules = getEffectiveRules();
@@ -152,6 +162,29 @@ var Form = React.forwardRef(
       clearValidate();
       setFormValues(model);
     }, [model, clearValidate]);
+    const addField = React.useCallback(
+      (fieldName, defaultValue) => {
+        if (!fieldName) return;
+        setFormValues((prev) => {
+          const next = { ...prev, [fieldName]: defaultValue ?? null };
+          onChange?.(next);
+          return next;
+        });
+      },
+      [onChange]
+    );
+    const removeField = React.useCallback(
+      (fieldName) => {
+        if (!fieldName) return;
+        setFormValues((prev) => {
+          const { [fieldName]: _, ...next } = prev;
+          onChange?.(next);
+          return next;
+        });
+        clearValidate(fieldName);
+      },
+      [onChange, clearValidate]
+    );
     const updateValue = React.useCallback(
       (fieldName, value) => {
         const setValueByPath = (target, path, nextValue) => {
@@ -186,13 +219,44 @@ var Form = React.forwardRef(
       },
       [onChange]
     );
+    const snapshotHistory = React.useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => tigercatCore.pushFormHistory(prev, formValuesRef.current));
+    }, [undoable]);
+    const undo = React.useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => {
+        const result = tigercatCore.undoFormHistory(prev);
+        if (result) {
+          setFormValues(result.present);
+          formValuesRef.current = result.present;
+          onChange?.(result.present);
+          return result;
+        }
+        return prev;
+      });
+    }, [undoable, onChange]);
+    const redo = React.useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => {
+        const result = tigercatCore.redoFormHistory(prev);
+        if (result) {
+          setFormValues(result.present);
+          formValuesRef.current = result.present;
+          onChange?.(result.present);
+          return result;
+        }
+        return prev;
+      });
+    }, [undoable, onChange]);
     const handleSubmit = React.useCallback(
       async (event) => {
         event.preventDefault();
+        if (loading) return;
         const result = await runValidation();
         onSubmit?.({ ...result, values: formValuesRef.current });
       },
-      [runValidation, onSubmit]
+      [runValidation, onSubmit, loading]
     );
     React.useImperativeHandle(
       ref,
@@ -201,9 +265,28 @@ var Form = React.forwardRef(
         validateFields,
         validateField,
         clearValidate,
-        resetFields
+        resetFields,
+        addField,
+        removeField,
+        undo,
+        redo,
+        snapshotHistory,
+        canUndo: tigercatCore.canUndo(historyState),
+        canRedo: tigercatCore.canRedo(historyState)
       }),
-      [validate, validateFields, validateField, clearValidate, resetFields]
+      [
+        validate,
+        validateFields,
+        validateField,
+        clearValidate,
+        resetFields,
+        addField,
+        removeField,
+        undo,
+        redo,
+        snapshotHistory,
+        historyState
+      ]
     );
     const contextValue = React.useMemo(
       () => ({
@@ -216,6 +299,7 @@ var Form = React.forwardRef(
         inlineMessage,
         showRequiredAsterisk,
         disabled,
+        loading,
         errors,
         registerFieldRules,
         validateField,
@@ -232,6 +316,7 @@ var Form = React.forwardRef(
         inlineMessage,
         showRequiredAsterisk,
         disabled,
+        loading,
         errors,
         registerFieldRules,
         validateField,
@@ -243,6 +328,7 @@ var Form = React.forwardRef(
       "tiger-form",
       `tiger-form--label-${labelPosition}`,
       disabled && "tiger-form--disabled",
+      loading && "tiger-form--loading",
       className
     );
     return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("form", { className: formClasses, onSubmit: handleSubmit, ...props, children }) });

package/dist/chunk-J3N24I7A.mjs

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { generateQRMatrix, classNames, qrcodeContainerClasses, qrcodeOverlayClasses, qrcodeExpiredTextClasses, qrcodeRefreshClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/QRCode.tsx
+var QRCode = ({
+  value,
+  size = 128,
+  color = "#000000",
+  bgColor = "#ffffff",
+  level: _level = "M",
+  status = "active",
+  onRefresh,
+  className
+}) => {
+  const matrix = useMemo(() => generateQRMatrix(value), [value]);
+  const moduleSize = useMemo(() => size / matrix.length, [size, matrix.length]);
+  const containerClass = classNames(qrcodeContainerClasses, className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, style: { width: size, height: size }, children: [
+    /* @__PURE__ */ 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__ */ jsx("rect", { width: size, height: size, fill: bgColor }),
+          matrix.flatMap(
+            (row, r) => row.map(
+              (cell, c) => cell ? /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: c * moduleSize,
+                  y: r * moduleSize,
+                  width: moduleSize,
+                  height: moduleSize,
+                  fill: color
+                },
+                `${r}-${c}`
+              ) : null
+            )
+          )
+        ]
+      }
+    ),
+    status === "expired" && /* @__PURE__ */ jsxs("div", { className: qrcodeOverlayClasses, children: [
+      /* @__PURE__ */ jsx("span", { className: qrcodeExpiredTextClasses, children: "QR code expired" }),
+      /* @__PURE__ */ jsx("span", { className: qrcodeRefreshClasses, onClick: onRefresh, children: "Refresh" })
+    ] }),
+    status === "loading" && /* @__PURE__ */ jsx("div", { className: qrcodeOverlayClasses, children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading..." }) })
+  ] });
+};
+var QRCode_default = QRCode;
+
+export { QRCode, QRCode_default };

package/dist/chunk-JB33A4S6.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ColorPicker.tsx
+var ColorPicker = ({
+  value = "#2563eb",
+  disabled = false,
+  size = "md",
+  showAlpha: _showAlpha = false,
+  format: _format = "hex",
+  presets,
+  className,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [inputValue, setInputValue] = react.useState(value);
+  const containerRef = react.useRef(null);
+  const hsv = react.useMemo(() => {
+    const rgb = tigercatCore.hexToRgb(value);
+    return tigercatCore.rgbToHsv(rgb.r, rgb.g, rgb.b);
+  }, [value]);
+  react.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  function togglePanel() {
+    if (disabled) return;
+    setIsOpen((v) => !v);
+  }
+  function handleHueChange(e) {
+    const hue = Number(e.target.value);
+    const { r, g, b } = tigercatCore.hsvToRgb(hue, hsv.s, hsv.v);
+    const hex = tigercatCore.rgbToHex(r, g, b);
+    onChange?.(hex);
+  }
+  function handleInputChange(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    if (tigercatCore.isValidHex(val)) {
+      const hex = val.startsWith("#") ? val : `#${val}`;
+      onChange?.(hex);
+    }
+  }
+  function handlePresetClick(color) {
+    onChange?.(color);
+  }
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: tigercatCore.classNames(tigercatCore.colorPickerBaseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.getColorPickerTriggerClasses(size, disabled),
+        style: { backgroundColor: value },
+        role: "button",
+        "aria-label": "Pick color",
+        tabIndex: 0,
+        onClick: togglePanel
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.colorPickerPanelClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 360,
+            value: hsv.h,
+            className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+            "aria-label": "Hue",
+            onChange: handleHueChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hex" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            className: tigercatCore.colorPickerInputClasses,
+            value: inputValue,
+            "aria-label": "Color value",
+            onChange: handleInputChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+            style: { backgroundColor: value },
+            "aria-label": "Color preview"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: value })
+      ] }),
+      presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tigercatCore.colorPickerPresetClasses,
+          style: { backgroundColor: color },
+          "aria-label": `Select ${color}`,
+          onClick: () => handlePresetClick(color)
+        },
+        color
+      )) })
+    ] })
+  ] });
+};
+
+exports.ColorPicker = ColorPicker;