@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/chunk-SVASEF6K.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 = false,
+  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;

package/dist/chunk-T5FAKJ6C.mjs

@@ -0,0 +1,49 @@
+import React, { createContext, useMemo } from 'react';
+import { avatarGroupItemClasses, avatarSizeClasses, classNames, avatarGroupOverflowClasses, avatarGroupBaseClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/AvatarGroup.tsx
+var AvatarGroupContext = createContext(null);
+var AvatarGroup = ({
+  max,
+  size,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ size, itemClass: avatarGroupItemClasses }),
+    [size]
+  );
+  const childArray = React.Children.toArray(children);
+  const total = childArray.length;
+  const visibleCount = max != null && max < total ? max : total;
+  const overflow = total - visibleCount;
+  const visible = childArray.slice(0, visibleCount);
+  const overflowSizeClass = avatarSizeClasses[size ?? "md"];
+  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(avatarGroupBaseClasses, className),
+      role: "group",
+      "aria-label": "Avatar group",
+      ...props,
+      children: [
+        visible,
+        overflow > 0 && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: classNames(avatarGroupOverflowClasses, overflowSizeClass),
+            "aria-label": `${overflow} more`,
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { AvatarGroup, AvatarGroupContext };

package/dist/chunk-T6KZ73VM.js

@@ -0,0 +1,198 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+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 TreeMapChart = ({
+  width = 400,
+  height = 300,
+  padding = 8,
+  data,
+  gap = 2,
+  showLabels = true,
+  minLabelSize = 10,
+  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,
+  onNodeClick,
+  onNodeHover
+}) => {
+  const innerRect = React.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = React.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const nodes = React.useMemo(
+    () => tigercatCore.computeTreeMapNodes(data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      colors: palette
+    }),
+    [data, innerRect.width, innerRect.height, gap, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => {
+      const node = nodes[index];
+      return node ? { label: node.label, value: node.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      const node = index !== null ? nodes[index] : null;
+      onNodeHover?.(
+        index,
+        node ? { label: node.label, value: node.value } : null
+      );
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onNodeClick }
+  });
+  const total = React.useMemo(() => nodes.reduce((s, n) => s + n.value, 0), [nodes]);
+  const legendItems = React.useMemo(
+    () => tigercatCore.buildChartLegendItems({
+      data: nodes,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [nodes, palette, activeIndex]
+  );
+  const tooltipContent = React.useMemo(
+    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, nodes, void 0, (node) => {
+      const pct = total > 0 ? (node.value / total * 100).toFixed(1) : "0";
+      return `${node.label}: ${node.value} (${pct}%)`;
+    }),
+    [resolvedHoveredIndex, nodes, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsxRuntime.jsx(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "treemap", children: nodes.map((node) => {
+        const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: node.x,
+              y: node.y,
+              width: node.w,
+              height: node.h,
+              rx: 2,
+              fill: node.color,
+              opacity,
+              className: tigercatCore.classNames(interactive && "cursor-pointer"),
+              style: { transition: "opacity 0.2s ease-out" },
+              onMouseEnter: (e) => handleMouseEnter(node.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(node.index)
+            }
+          ),
+          showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: node.x + node.w / 2,
+              y: node.y + node.h / 2,
+              className: "fill-white text-xs",
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: {
+                pointerEvents: "none",
+                fontSize: `${Math.min(12, node.h * 0.3)}px`
+              },
+              children: node.label
+            }
+          )
+        ] }, `node-${node.index}`);
+      }) })
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6PBNFLM7_js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+
+exports.TreeMapChart = TreeMapChart;

package/dist/chunk-TFPIRBHL.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/VirtualTable.tsx
+var VirtualTable = ({
+  data = [],
+  columns = [],
+  rowHeight = 48,
+  height = 400,
+  overscan = 5,
+  stickyHeader = true,
+  rowKey,
+  loading = false,
+  emptyText = "No data",
+  selectable = false,
+  selectedKeys = [],
+  striped = false,
+  bordered = false,
+  className,
+  onRowClick,
+  onSelect,
+  renderCell,
+  ...rest
+}) => {
+  const containerRef = react.useRef(null);
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const range = react.useMemo(
+    () => tigercatCore.calculateVirtualRange(scrollTop, height, data.length, rowHeight, overscan),
+    [scrollTop, height, data.length, rowHeight, overscan]
+  );
+  const visibleData = react.useMemo(
+    () => data.slice(range.start, range.end),
+    [data, range.start, range.end]
+  );
+  const selectedSet = react.useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const onScroll = react.useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+    }
+  }, []);
+  const containerClasses = react.useMemo(
+    () => tigercatCore.getVirtualTableContainerClasses(bordered, className),
+    [bordered, className]
+  );
+  const bottomHeight = Math.max(0, range.totalHeight - range.end * rowHeight);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: tigercatCore.classNames(
+        containerClasses,
+        rest.className
+      ),
+      style: { height: `${height}px` },
+      onScroll,
+      role: "grid",
+      "aria-rowcount": data.length,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: stickyHeader ? tigercatCore.virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              className: tigercatCore.virtualTableHeaderCellClasses,
+              style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0,
+              children: col.title ?? ""
+            },
+            col.key
+          )) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("tr", { style: { height: `${range.offsetTop}px` }, "aria-hidden": true }),
+            visibleData.map((row, localIdx) => {
+              const globalIdx = range.start + localIdx;
+              const key = tigercatCore.getVirtualRowKey(row, globalIdx, rowKey);
+              const isSelected = selectedSet.has(key);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "tr",
+                {
+                  className: tigercatCore.getVirtualTableRowClasses(globalIdx, striped, isSelected),
+                  onClick: () => {
+                    onRowClick?.(row, globalIdx);
+                    if (selectable) onSelect?.(key, row, globalIdx);
+                  },
+                  children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.virtualTableCellClasses, children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "") }, col.key))
+                },
+                key
+              );
+            }),
+            bottomHeight > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { style: { height: `${bottomHeight}px` }, "aria-hidden": true })
+          ] })
+        ] }),
+        data.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.virtualTableEmptyClasses, children: emptyText }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.virtualTableLoadingClasses, children: "Loading..." })
+      ]
+    }
+  );
+};
+var VirtualTable_default = VirtualTable;
+
+exports.VirtualTable = VirtualTable;
+exports.VirtualTable_default = VirtualTable_default;

package/dist/chunk-TKZO5UBH.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Stepper.tsx
+var Stepper = ({
+  value = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  size = "md",
+  precision,
+  className,
+  onChange
+}) => {
+  function setValue(v) {
+    const clamped = tigercatCore.clampStepperValue(v, min, max, precision);
+    onChange?.(clamped);
+  }
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const icon = (d) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: tigercatCore.stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames(tigercatCore.stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: tigercatCore.getStepperButtonClasses(size, disabled || atMin, "left"),
+        disabled: disabled || atMin,
+        "aria-label": "Decrease",
+        onClick: () => setValue(value - step),
+        children: icon(tigercatCore.minusPathD)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        className: tigercatCore.getStepperInputClasses(size),
+        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        disabled,
+        "aria-label": "Value",
+        onChange: (e) => {
+          const val = Number(e.target.value);
+          if (!Number.isNaN(val)) setValue(val);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: tigercatCore.getStepperButtonClasses(size, disabled || atMax, "right"),
+        disabled: disabled || atMax,
+        "aria-label": "Increase",
+        onClick: () => setValue(value + step),
+        children: icon(tigercatCore.plusPathD)
+      }
+    )
+  ] });
+};
+
+exports.Stepper = Stepper;