@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/{chunk-DQNA57CA.js → chunk-JLM4LBUS.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunkMWH6FCSE_js = require('./chunk-MWH6FCSE.js');
+var chunkAJQPGAYL_js = require('./chunk-AJQPGAYL.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 var createTooltipId = tigercatCore.createFloatingIdFactory("tooltip");
 var Tooltip = ({
-  visible,
-  defaultVisible = false,
+  open,
+  defaultOpen = false,
   content,
   trigger = "hover",
   placement = "top",
@@ -17,21 +17,14 @@ var Tooltip = ({
   className,
   style,
   children,
-  onVisibleChange,
+  onOpenChange,
   ...divProps
 }) => {
   const tooltipIdRef = react.useRef(null);
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const {
-    currentVisible,
-    containerRef,
-    triggerRef,
-    floatingRef,
-    floatingStyles,
-    triggerHandlers
-  } = chunkMWH6FCSE_js.usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = chunkAJQPGAYL_js.usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = react.useMemo(
     () => tigercatCore.classNames(tigercatCore.getTooltipContainerClasses(), className),
     [className]

package/dist/{chunk-TJFS44SH.js → chunk-JLRRXRZO.js}

@@ -1,9 +1,9 @@
 'use strict';
 
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/CheckboxGroup.tsx
 var CheckboxGroupContextProvider = react.createContext(null);
 var useCheckboxGroup = () => {
   return react.useContext(CheckboxGroupContextProvider);
@@ -18,9 +18,7 @@ var CheckboxGroup = ({
   className,
   ...props
 }) => {
-  const [internalValue, setInternalValue] = react.useState(defaultValue);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : internalValue;
+  const [value, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(controlledValue, defaultValue);
   const updateValue = (val, checked) => {
     if (disabled) return;
     const currentValue = [...value];

package/dist/chunk-JR7L67Q3.mjs

@@ -0,0 +1,186 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { useMemo } from 'react';
+import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FunnelChart = ({
+  width = 320,
+  height = 300,
+  padding = 24,
+  data,
+  direction = "vertical",
+  gap = 2,
+  pinch = false,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSegmentClick,
+  onSegmentHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSegmentHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onSegmentClick }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const segments = useMemo(
+    () => computeFunnelSegments(data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      pinch,
+      colors: palette
+    }),
+    [data, innerRect.width, innerRect.height, gap, pinch, palette]
+  );
+  const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data,
+      palette,
+      activeIndex,
+      getLabel: (d, i) => d.label ?? `Stage ${i + 1}`,
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
+    [data, palette, activeIndex]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
+      const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      const label = datum.label ?? `Stage ${index + 1}`;
+      return `${label}: ${datum.value} (${pct}%)`;
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        /* @__PURE__ */ jsx("g", { "data-series-type": "funnel", children: segments.map((seg) => {
+          const opacity = getChartElementOpacity(seg.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: seg.path,
+              fill: seg.color,
+              opacity,
+              className: classNames(interactive && "cursor-pointer"),
+              style: { transition: "opacity 0.2s ease-out" },
+              tabIndex: selectable ? 0 : void 0,
+              role: selectable ? "button" : "img",
+              "aria-label": seg.label,
+              onMouseEnter: (e) => handleMouseEnter(seg.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(seg.index),
+              onKeyDown: (e) => handleKeyDown(e, seg.index)
+            },
+            `seg-${seg.index}`
+          );
+        }) }),
+        segments.map((seg) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: seg.cx,
+            y: seg.cy,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: seg.label
+          },
+          `label-${seg.index}`
+        ))
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsx(
+      ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+
+export { FunnelChart };

package/dist/{chunk-GNMOOYHG.js → chunk-KNBNE74O.js}

@@ -18,7 +18,7 @@ var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var ImagePreview = ({
-  visible,
+  open,
   images,
   currentIndex = 0,
   zIndex = 1050,
@@ -26,10 +26,11 @@ var ImagePreview = ({
   scaleStep = 0.5,
   minScale = 0.25,
   maxScale = 5,
-  onVisibleChange,
+  onOpenChange,
   onCurrentIndexChange,
   onScaleChange
 }) => {
+  const isOpen = open;
   const [scale, setScale] = react.useState(1);
   const [offsetX, setOffsetX] = react.useState(0);
   const [offsetY, setOffsetY] = react.useState(0);
@@ -46,7 +47,7 @@ var ImagePreview = ({
     resetTransform();
   }, [currentIndex, resetTransform]);
   react.useEffect(() => {
-    if (visible) {
+    if (isOpen) {
       resetTransform();
       setIndex(currentIndex);
       document.body.style.overflow = "hidden";
@@ -56,11 +57,11 @@ var ImagePreview = ({
     return () => {
       document.body.style.overflow = "";
     };
-  }, [visible, currentIndex, resetTransform]);
+  }, [isOpen, currentIndex, resetTransform]);
   const handleClose = react.useCallback(() => {
-    onVisibleChange?.(false);
-  }, [onVisibleChange]);
-  chunkZYPEO2KY_js.useEscapeKey({ enabled: !!visible, onEscape: handleClose });
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: !!isOpen, onEscape: handleClose });
   const navState = react.useMemo(() => tigercatCore.getPreviewNavState(index, images.length), [index, images.length]);
   const handleZoomIn = react.useCallback(() => {
     setScale((s) => {
@@ -97,14 +98,14 @@ var ImagePreview = ({
     }
   }, [index, images.length, resetTransform, onCurrentIndexChange]);
   react.useEffect(() => {
-    if (!visible) return;
+    if (!isOpen) return;
     const handler = (e) => {
       if (e.key === "ArrowLeft") handlePrev();
       if (e.key === "ArrowRight") handleNext();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [visible, handlePrev, handleNext]);
+  }, [isOpen, handlePrev, handleNext]);
   const handleWheel = react.useCallback(
     (e) => {
       e.preventDefault();
@@ -146,7 +147,7 @@ var ImagePreview = ({
     () => tigercatCore.calculateTransform(scale, offsetX, offsetY),
     [scale, offsetX, offsetY]
   );
-  if (!visible || !images.length) return null;
+  if (!isOpen || !images.length) return null;
   const currentSrc = images[index] || images[0];
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/chunk-L6WOLPV7.mjs

@@ -0,0 +1,123 @@
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { hexToRgb, rgbToHsv, classNames, getColorPickerTriggerClasses, colorPickerPanelClasses, colorPickerInputClasses, colorPickerPresetClasses, colorPickerBaseClasses, hsvToRgb, rgbToHex, isValidHex } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ColorPicker.tsx
+var ColorPicker = ({
+  value = "#2563eb",
+  disabled = false,
+  size = "md",
+  showAlpha = false,
+  format = "hex",
+  presets,
+  className,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const containerRef = useRef(null);
+  const hsv = useMemo(() => {
+    const rgb = hexToRgb(value);
+    return rgbToHsv(rgb.r, rgb.g, rgb.b);
+  }, [value]);
+  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 } = hsvToRgb(hue, hsv.s, hsv.v);
+    const hex = rgbToHex(r, g, b);
+    onChange?.(hex);
+  }
+  function handleInputChange(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    if (isValidHex(val)) {
+      const hex = val.startsWith("#") ? val : `#${val}`;
+      onChange?.(hex);
+    }
+  }
+  function handlePresetClick(color) {
+    onChange?.(color);
+  }
+  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__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getColorPickerTriggerClasses(size, disabled),
+        style: { backgroundColor: value },
+        role: "button",
+        "aria-label": "Pick color",
+        tabIndex: 0,
+        onClick: togglePanel
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: colorPickerPanelClasses, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hex" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: colorPickerInputClasses,
+            value: inputValue,
+            "aria-label": "Color value",
+            onChange: handleInputChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+            style: { backgroundColor: value },
+            "aria-label": "Color preview"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: value })
+      ] }),
+      presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: colorPickerPresetClasses,
+          style: { backgroundColor: color },
+          "aria-label": `Select ${color}`,
+          onClick: () => handlePresetClick(color)
+        },
+        color
+      )) })
+    ] })
+  ] });
+};
+
+export { ColorPicker };

package/dist/chunk-LODDAS62.js

@@ -0,0 +1,173 @@
+'use strict';
+
+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);
+
+// src/components/Progress.tsx
+var Progress = React__default.default.memo(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "line",
+    percentage = 0,
+    status = "normal",
+    showText,
+    text,
+    format,
+    striped = false,
+    stripedAnimation = false,
+    strokeWidth = 6,
+    width = "auto",
+    height,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }) => {
+    const clampedPercentage = tigercatCore.clampPercentage(percentage);
+    const effectiveVariant = tigercatCore.getStatusVariant(status) || variant;
+    const shouldShowText = showText ?? type === "line";
+    const displayText = shouldShowText ? tigercatCore.formatProgressText(clampedPercentage, text, format) : "";
+    const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
+    const ariaAttrs = {
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-valuenow": clampedPercentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    };
+    const renderLineProgress = () => {
+      const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...props,
+          className: tigercatCore.classNames("flex items-center w-full", className),
+          style: { ...style ?? {}, ...containerStyle },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressLineBaseClasses,
+                  tigercatCore.progressTrackBgClasses,
+                  !height && tigercatCore.progressLineSizeClasses[size]
+                ),
+                style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: tigercatCore.classNames(
+                      tigercatCore.progressLineInnerClasses,
+                      tigercatCore.getProgressVariantClasses(effectiveVariant),
+                      striped && tigercatCore.progressStripedClasses,
+                      striped && stripedAnimation && tigercatCore.progressStripedAnimationClasses
+                    ),
+                    style: { width: `${clampedPercentage}%` },
+                    ...ariaAttrs
+                  }
+                )
+              }
+            ),
+            shouldShowText && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressTextBaseClasses,
+                  tigercatCore.progressTextSizeClasses[size],
+                  tigercatCore.getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    const renderCircleProgress = () => {
+      const {
+        width: svgWidth,
+        height: svgHeight,
+        radius,
+        cx,
+        cy
+      } = tigercatCore.getCircleSize(size, strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = tigercatCore.calculateCirclePath(radius, clampedPercentage);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...props,
+          className: tigercatCore.classNames(tigercatCore.progressCircleBaseClasses, className),
+          style: {
+            ...style ?? {},
+            width: `${svgWidth}px`,
+            height: `${svgHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: tigercatCore.progressCircleTrackStrokeClasses,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: tigercatCore.getProgressVariantClasses(effectiveVariant).replace("bg-", "text-"),
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray,
+                  strokeDashoffset,
+                  style: {
+                    transition: "stroke-dashoffset 0.3s ease",
+                    transform: "rotate(-90deg)",
+                    transformOrigin: "center"
+                  },
+                  ...ariaAttrs
+                }
+              )
+            ] }),
+            shouldShowText && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressCircleTextClasses,
+                  tigercatCore.progressTextSizeClasses[size],
+                  "font-medium",
+                  tigercatCore.getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    if (type === "circle") return renderCircleProgress();
+    return renderLineProgress();
+  }
+);
+Progress.displayName = "Progress";
+
+exports.Progress = Progress;

package/dist/{chunk-IP3MAJSH.mjs → chunk-MQ5ZP5RW.mjs}

@@ -1,12 +1,12 @@
-import { usePopup } from './chunk-3PV2MDST.mjs';
+import { usePopup } from './chunk-AMOH5AMN.mjs';
 import { useRef, useMemo } from 'react';
 import { createFloatingIdFactory, classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var createTooltipId = createFloatingIdFactory("tooltip");
 var Tooltip = ({
-  visible,
-  defaultVisible = false,
+  open,
+  defaultOpen = false,
   content,
   trigger = "hover",
   placement = "top",
@@ -15,21 +15,14 @@ var Tooltip = ({
   className,
   style,
   children,
-  onVisibleChange,
+  onOpenChange,
   ...divProps
 }) => {
   const tooltipIdRef = useRef(null);
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const {
-    currentVisible,
-    containerRef,
-    triggerRef,
-    floatingRef,
-    floatingStyles,
-    triggerHandlers
-  } = usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = useMemo(
     () => classNames(getTooltipContainerClasses(), className),
     [className]

package/dist/{chunk-KMTERPME.mjs → chunk-MSHCPJIJ.mjs}

@@ -1,4 +1,4 @@
-import { useCheckboxGroup } from './chunk-OCVQ3LOT.mjs';
+import { useCheckboxGroup } from './chunk-DKT2EYVM.mjs';
 import { useState, useRef, useEffect } from 'react';
 import { getCheckboxClasses, classNames, getCheckboxLabelClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';