@expcat/tigercat-react 0.1.8 → 0.2.10

package/README.md

@@ -0,0 +1,59 @@
+# @expcat/tigercat-react
+
+[![npm version](https://img.shields.io/npm/v/@expcat/tigercat-react.svg)](https://www.npmjs.com/package/@expcat/tigercat-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+React UI components for [Tigercat](https://github.com/expcats/Tigercat) - A Tailwind CSS based component library.
+
+## 📖 Documentation
+
+**[Live Demo & Docs →](https://expcat.github.io/Tigercat/react/)**
+
+## Installation
+
+```bash
+pnpm add @expcat/tigercat-react
+# or
+npm install @expcat/tigercat-react
+```
+
+**Requirements:** React ≥19, Tailwind CSS ≥3.4
+
+## Quick Start
+
+```tsx
+import { ConfigProvider, Button } from '@expcat/tigercat-react'
+
+function App() {
+  return (
+    <ConfigProvider>
+      <Button variant="primary">Click me</Button>
+    </ConfigProvider>
+  )
+}
+```
+
+## Components
+
+| Category       | Components                                                                            |
+| -------------- | ------------------------------------------------------------------------------------- |
+| **Basic**      | Alert, Avatar, Badge, Button, Code, Divider, Icon, Link, Tag, Text                    |
+| **Form**       | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, Upload, Form  |
+| **Layout**     | Card, Container, Grid (Row/Col), Layout, List, Descriptions, Skeleton, Space          |
+| **Navigation** | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree                             |
+| **Feedback**   | Modal, Drawer, Message, Notification, Loading, Popconfirm, Popover, Tooltip, Progress |
+| **Data**       | Table, Timeline                                                                       |
+| **Charts**     | BarChart, LineChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart        |
+
+## Hooks
+
+- `useChartInteraction` - Chart interaction utilities
+- `useFormContext` - Form state management
+- `useMenuContext` - Menu state access
+- `useTabsContext` - Tabs state access
+- `useBreadcrumbContext` - Breadcrumb navigation
+- `useStepsContext` - Steps state access
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-TBIEWDY5.js → chunk-36RRHNZD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNEULKOYJ_js = require('./chunk-NEULKOYJ.js');
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var React = require('react');
 var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -91,7 +91,17 @@ var Modal = ({
     if (visible) return;
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [visible]);
-  chunkNEULKOYJ_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "Tab" && dialogRef.current) {
+      const focusables = tigercatCore.getFocusableElements(dialogRef.current);
+      const result = tigercatCore.getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
+      if (result.shouldHandle && result.next) {
+        event.preventDefault();
+        result.next.focus();
+      }
+    }
+  }, []);
   const CloseIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -145,6 +155,7 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
+            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.modalHeaderClasses, children: [

package/dist/chunk-3CDAG4HD.mjs

@@ -0,0 +1,151 @@
+import { useState, useMemo, useCallback } from 'react';
+import { getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+
+// src/hooks/useChartInteraction.ts
+function useChartInteraction(options) {
+  const {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition = "bottom",
+    onHoveredIndexChange,
+    onSelectedIndexChange,
+    getData,
+    callbacks
+  } = options;
+  const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
+  const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
+  const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
+  const activeIndex = useMemo(() => {
+    if (resolvedSelectedIndex !== null) return resolvedSelectedIndex;
+    if (hoverable && resolvedHoveredIndex !== null) return resolvedHoveredIndex;
+    return null;
+  }, [resolvedSelectedIndex, hoverable, resolvedHoveredIndex]);
+  const getElementOpacity = useCallback(
+    (index) => {
+      return getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+    },
+    [activeIndex, activeOpacity, inactiveOpacity]
+  );
+  const handleMouseEnter = useCallback(
+    (index, event) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      onHoveredIndexChange?.(index);
+      if (callbacks?.onHover && getData) {
+        callbacks.onHover(index, getData(index) ?? null);
+      }
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+  );
+  const handleMouseMove = useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (!hoverable) return;
+    if (hoveredIndexProp === void 0) {
+      setLocalHoveredIndex(null);
+    }
+    onHoveredIndexChange?.(null);
+    callbacks?.onHover?.(null, null);
+  }, [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  const handleClick = useCallback(
+    (index) => {
+      if (!selectable) return;
+      const nextIndex = resolvedSelectedIndex === index ? null : index;
+      if (selectedIndexProp === void 0) {
+        setLocalSelectedIndex(nextIndex);
+      }
+      onSelectedIndexChange?.(nextIndex);
+      if (callbacks?.onClick && getData) {
+        const datum = getData(index);
+        if (datum) callbacks.onClick(index, datum);
+      }
+    },
+    [
+      selectable,
+      resolvedSelectedIndex,
+      selectedIndexProp,
+      onSelectedIndexChange,
+      callbacks,
+      getData
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event, index) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleClick(index);
+    },
+    [selectable, handleClick]
+  );
+  const handleLegendClick = useCallback(
+    (index) => {
+      handleClick(index);
+    },
+    [handleClick]
+  );
+  const handleLegendHover = useCallback(
+    (index) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      onHoveredIndexChange?.(index);
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange]
+  );
+  const handleLegendLeave = useCallback(() => {
+    handleMouseLeave();
+  }, [handleMouseLeave]);
+  const wrapperClasses = useMemo(() => {
+    return classNames(
+      "inline-flex",
+      legendPosition === "right" ? "flex-row items-start gap-4" : legendPosition === "left" ? "flex-row-reverse items-start gap-4" : legendPosition === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
+    );
+  }, [legendPosition]);
+  const createLegendItems = useCallback(
+    (items, palette, labelFormatter) => {
+      return items.map((item, index) => ({
+        index,
+        label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
+        color: item.color ?? palette[index % palette.length],
+        active: activeIndex === null || activeIndex === index
+      }));
+    },
+    [activeIndex]
+  );
+  return {
+    localHoveredIndex,
+    localSelectedIndex,
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses,
+    createLegendItems
+  };
+}
+
+export { useChartInteraction };

package/dist/chunk-3QFHVAZT.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartGrid.tsx
+var ChartGrid = ({
+  xScale,
+  yScale,
+  show = "both",
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  lineStyle = "solid",
+  strokeWidth = 1,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const dasharray = react.useMemo(() => tigercatCore.getChartGridLineDasharray(lineStyle), [lineStyle]);
+  const resolvedXTicks = react.useMemo(() => {
+    if (!xScale) return [];
+    return tigercatCore.getChartAxisTicks(xScale, { tickCount: xTicks, tickValues: xTickValues });
+  }, [xScale, xTicks, xTickValues]);
+  const resolvedYTicks = react.useMemo(() => {
+    if (!yScale) return [];
+    return tigercatCore.getChartAxisTicks(yScale, { tickCount: yTicks, tickValues: yTickValues });
+  }, [yScale, yTicks, yTickValues]);
+  const shouldRenderX = show === "both" || show === "x";
+  const shouldRenderY = show === "both" || show === "y";
+  const xRange = xScale?.range;
+  const yRange = yScale?.range;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...props, className: tigercatCore.classNames(className), transform: `translate(${x}, ${y})`, children: [
+    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: tick.position,
+        y1: yRange[0],
+        x2: tick.position,
+        y2: yRange[1],
+        className: tigercatCore.chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `x-${tick.value}`
+    )) : null,
+    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: xRange[0],
+        y1: tick.position,
+        x2: xRange[1],
+        y2: tick.position,
+        className: tigercatCore.chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `y-${tick.value}`
+    )) : null
+  ] });
+};
+var ChartGrid_default = ChartGrid;
+
+exports.ChartGrid = ChartGrid;
+exports.ChartGrid_default = ChartGrid_default;

package/dist/{chunk-ALP3KYYY.mjs → chunk-3XKBDV2Q.mjs}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classNames, iconWrapperClasses, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
+import { classNames, iconWrapperClasses, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Icon.tsx
@@ -23,10 +23,10 @@ var Icon = ({
     return React.cloneElement(child, {
       ...svgProps,
       className: classNames(iconSvgBaseClasses, iconSizeClasses[size], svgProps.className),
-      xmlns: svgProps.xmlns ?? "http://www.w3.org/2000/svg",
-      viewBox: svgProps.viewBox ?? "0 0 24 24",
-      fill: svgProps.fill ?? "none",
-      stroke: svgProps.stroke ?? "currentColor",
+      xmlns: svgProps.xmlns ?? SVG_DEFAULT_XMLNS,
+      viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
+      fill: svgProps.fill ?? SVG_DEFAULT_FILL,
+      stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
       strokeWidth: svgProps.strokeWidth ?? 2,
       strokeLinecap: svgProps.strokeLinecap ?? "round",
       strokeLinejoin: svgProps.strokeLinejoin ?? "round"

package/dist/chunk-42UKIFFQ.js

@@ -0,0 +1,278 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ScatterChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  xScale,
+  yScale,
+  pointSize = 4,
+  pointColor = "var(--tiger-primary,#2563eb)",
+  pointOpacity,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  onHoveredIndexChange,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  onSelectedIndexChange,
+  onPointClick,
+  onPointHover,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  legendFormatter,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Other
+  colors,
+  title,
+  desc,
+  className
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onPointHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onPointClick
+    }
+  });
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const xValues = react.useMemo(() => data.map((item) => item.x), [data]);
+  const yValues = react.useMemo(() => data.map((item) => item.y), [data]);
+  const resolvedXScale = react.useMemo(() => {
+    if (xScale) return xScale;
+    const extent = tigercatCore.getNumberExtent(xValues, { includeZero });
+    return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
+  }, [xScale, xValues, includeZero, innerRect.width]);
+  const resolvedYScale = react.useMemo(() => {
+    if (yScale) return yScale;
+    const extent = tigercatCore.getNumberExtent(yValues, { includeZero });
+    return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScale, yValues, includeZero, innerRect.height]);
+  const palette = react.useMemo(
+    () => colors && colors.length > 0 ? colors : pointColor ? [pointColor] : [...tigercatCore.DEFAULT_CHART_COLORS],
+    [colors, pointColor]
+  );
+  const points = react.useMemo(
+    () => data.map((item, index) => {
+      const color = item.color ?? palette[index % palette.length];
+      const opacity = tigercatCore.getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        cx: resolvedXScale.map(item.x),
+        cy: resolvedYScale.map(item.y),
+        r: item.size ?? pointSize,
+        color,
+        opacity: pointOpacity ?? opacity,
+        datum: item
+      };
+    }),
+    [
+      data,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      resolvedXScale,
+      resolvedYScale,
+      pointSize,
+      pointOpacity
+    ]
+  );
+  const legendItems = react.useMemo(
+    () => data.map((item, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [data, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = react.useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, index);
+      const label = datum.label ?? `Point ${index + 1}`;
+      return `${label}: (${datum.x}, ${datum.y})`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = react.useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          chunk3QFHVAZT_js.ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkAX5XRD2Q_js.ChartSeries, { data, type: "scatter", children: points.map((point, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: point.cx,
+            cy: point.cy,
+            r: point.r,
+            fill: point.color,
+            opacity: point.opacity,
+            className: tigercatCore.classNames(
+              "transition-opacity duration-150",
+              (hoverable || selectable) && "cursor-pointer"
+            ),
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
+            "data-point-index": index,
+            onMouseEnter: (e) => handleMouseEnter(index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(index),
+            onKeyDown: (e) => handleKeyDown(e, index)
+          },
+          `point-${index}`
+        )) })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable && /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  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: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var ScatterChart_default = ScatterChart;
+
+exports.ScatterChart = ScatterChart;
+exports.ScatterChart_default = ScatterChart_default;