@expcat/tigercat-react 1.4.0 → 1.5.0

package/dist/{chunk-ULWT6W6M.mjs → chunk-PZB24FST.mjs}

@@ -1,3 +1,6 @@
+import {
+  useInputGroupContext
+} from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
 } from "./chunk-WHYHLUXG.mjs";
@@ -31,7 +34,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var InputNumber = ({
   value: controlledValue,
   defaultValue,
-  size = "md",
+  size,
   status = "default",
   min = -Infinity,
   max = Infinity,
@@ -53,6 +56,8 @@ var InputNumber = ({
   onBlur,
   className
 }) => {
+  const inputGroup = useInputGroupContext();
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
   const inputRef = useRef(null);
   const repeatControllerRef = useRef(createRafRepeatActionController());
   const repeatValueRef = useRef(null);
@@ -160,19 +165,19 @@ var InputNumber = ({
     () => classNames(
       getInputNumberWrapperClasses(disabled),
       getInputNumberStatusClasses(status),
-      getInputNumberSizeClasses(size),
+      getInputNumberSizeClasses(effectiveSize),
       focused && `ring-2 ${getInputNumberFocusRingColor(status)}`,
       className
     ),
-    [disabled, status, size, focused, className]
+    [disabled, status, effectiveSize, focused, className]
   );
   const inputClasses = useMemo(
     () => getInputNumberInputClasses(
-      size,
+      effectiveSize,
       controls && controlsPosition === "right",
       controls && controlsPosition === "both"
     ),
-    [size, controls, controlsPosition]
+    [effectiveSize, controls, controlsPosition]
   );
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
     controls && controlsPosition === "both" && /* @__PURE__ */ jsx(

package/dist/{chunk-BO45CU4Q.js → chunk-PZWI4YNN.js}

@@ -3,10 +3,10 @@
 var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
 
 
-var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+var _chunk23XPDNCAjs = require('./chunk-23XPDNCA.js');
 
 
-var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+var _chunkSK7PXSVEjs = require('./chunk-SK7PXSVE.js');
 
 
 var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
@@ -215,6 +215,8 @@ var PieChart = ({
                   filter: shadow ? isEmphasized ? _tigercatcore.PIE_EMPHASIS_SHADOW : _tigercatcore.PIE_BASE_SHADOW : void 0
                 },
                 tabIndex: selectable ? 0 : void 0,
+                role: selectable ? "button" : "img",
+                "aria-label": _nullishCoalesce(arc.data.label, () => ( String(arc.value))),
                 "data-pie-slice": "true",
                 "data-index": arc.index,
                 onMouseEnter: (e) => handleMouseEnter(arc.index, e),
@@ -283,7 +285,7 @@ var PieChart = ({
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkUVMQJOTXjs.ChartTooltip,
+    _chunkSK7PXSVEjs.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -300,7 +302,7 @@ var PieChart = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWV5XHYW6js.ChartLegend,
+      _chunk23XPDNCAjs.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-PFYK2V3E.js → chunk-Q2OXQNWU.js}

@@ -9,6 +9,8 @@ var _react = require('react');
 
 
 
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('react/jsx-runtime');
 var Resizable = ({
@@ -118,6 +120,54 @@ var Resizable = ({
       onResizeEnd
     ]
   );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (handle, e) => {
+      if (disabled) return;
+      const delta = _tigercatcore.getResizeKeyboardDelta.call(void 0, e.key);
+      if (!delta) return;
+      e.preventDefault();
+      const startW = _nullishCoalesce(width, () => ( 0));
+      const startH = _nullishCoalesce(height, () => ( 0));
+      const { deltaWidth, deltaHeight } = _tigercatcore.calculateResizeDelta.call(void 0, 
+        handle,
+        delta.deltaX,
+        delta.deltaY,
+        axis
+      );
+      let newW = startW + deltaWidth;
+      let newH = startH + deltaHeight;
+      if (lockAspectRatio) {
+        const ar = _tigercatcore.applyAspectRatio.call(void 0, newW, newH, startW, startH);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = _tigercatcore.clampDimensions.call(void 0, newW, newH, minWidth, minHeight, maxWidth, maxHeight);
+      setWidth(clamped.width);
+      setHeight(clamped.height);
+      const evt = {
+        width: clamped.width,
+        height: clamped.height,
+        handle,
+        deltaX: clamped.width - startW,
+        deltaY: clamped.height - startH
+      };
+      _optionalChain([onResize, 'optionalCall', _7 => _7(evt)]);
+      _optionalChain([onResizeEnd, 'optionalCall', _8 => _8(evt)]);
+    },
+    [
+      disabled,
+      width,
+      height,
+      axis,
+      lockAspectRatio,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      onResize,
+      onResizeEnd
+    ]
+  );
   const containerClasses = _react.useMemo.call(void 0, 
     () => _tigercatcore.classNames.call(void 0, _tigercatcore.resizableBaseClasses, "group/resizable", className),
     [className]
@@ -130,15 +180,29 @@ var Resizable = ({
   }, [width, height, style]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: containerClasses, style: containerStyle, "data-resizable": "", children: [
     children,
-    handles.map((pos) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: _tigercatcore.getResizableHandleClasses.call(void 0, pos, draggingHandle === pos, disabled),
-        "data-handle": pos,
-        onMouseDown: (e) => handleMouseDown(pos, e)
-      },
-      pos
-    ))
+    handles.map((pos) => {
+      const usesHeight = pos === "top" || pos === "bottom";
+      const valueNow = Math.round(_nullishCoalesce((usesHeight ? height : width), () => ( 0)));
+      const valueMin = usesHeight ? minHeight : minWidth;
+      const valueMax = usesHeight ? maxHeight : maxWidth;
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: _tigercatcore.getResizableHandleClasses.call(void 0, pos, draggingHandle === pos, disabled),
+          "data-handle": pos,
+          role: "separator",
+          "aria-label": `Resize ${pos}`,
+          "aria-orientation": _tigercatcore.getResizeHandleOrientation.call(void 0, pos),
+          "aria-valuenow": valueNow,
+          "aria-valuemin": valueMin,
+          "aria-valuemax": valueMax,
+          tabIndex: disabled ? -1 : 0,
+          onMouseDown: (e) => handleMouseDown(pos, e),
+          onKeyDown: (e) => handleKeyDown(pos, e)
+        },
+        pos
+      );
+    })
   ] });
 };
 var Resizable_default = Resizable;

package/dist/{chunk-VM4ZQHT5.mjs → chunk-QANWBRNU.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-6QML6T3Y.mjs";
 import {
   ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-ZG2W4HS5.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-O6YIPNXX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -50,13 +50,13 @@ var AreaChart = ({
   series,
   xScale: xScaleProp,
   yScale: yScaleProp,
-  areaColor: _areaColor = "var(--tiger-primary,#2563eb)",
+  areaColor = "var(--tiger-primary,#2563eb)",
   strokeWidth = 2,
   fillOpacity = 0.2,
   curve = "linear",
   showPoints = false,
   pointSize = 4,
-  pointColor: _pointColor,
+  pointColor,
   stacked = false,
   showGrid = true,
   showAxis = true,
@@ -114,8 +114,13 @@ var AreaChart = ({
     [width, height, padding]
   );
   const resolvedSeries = useMemo(
-    () => resolveSeriesData(series, data),
-    [series, data]
+    () => resolveSeriesData(series, data, {
+      // Single-series colors (`areaColor`/`pointColor`) seed the synthesized
+      // series so they take effect when only `data` is provided.
+      color: areaColor,
+      pointColor
+    }),
+    [series, data, areaColor, pointColor]
   );
   const {
     activeIndex,
@@ -291,6 +296,16 @@ var AreaChart = ({
     setHoveredPointInfo(null);
     onPointHover?.(null, null, null);
   }, [onPointHover]);
+  const showPointTooltipFromElement = useCallback(
+    (el, seriesIndex, pointIndex) => {
+      if (!hoverable) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [hoverable, onPointHover, resolvedSeries]
+  );
   const handlePointClick = useCallback(
     (seriesIndex, pointIndex) => {
       onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
@@ -307,6 +322,7 @@ var AreaChart = ({
     },
     [selectable, handleSeriesSelect]
   );
+  const pointClickable = selectable || !!onPointClick;
   const reversedSeriesData = useMemo(() => [...seriesData].reverse(), [seriesData]);
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
@@ -478,6 +494,8 @@ var AreaChart = ({
           (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
+            const datum = resolvedSeries[sd.seriesIndex]?.data?.[point.pointIndex];
+            const pointInteractive = hoverable || pointClickable;
             return /* @__PURE__ */ jsx(
               "circle",
               {
@@ -487,17 +505,46 @@ var AreaChart = ({
                 fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
-                className: linePointTransitionClasses,
+                className: classNames(
+                  linePointTransitionClasses,
+                  pointInteractive && "cursor-pointer"
+                ),
                 style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                role: pointInteractive ? "button" : "img",
+                "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                tabIndex: pointInteractive ? 0 : void 0,
                 "data-point-index": point.pointIndex,
                 "data-series-key": sd.seriesKey,
-                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                onMouseMove: handlePointMouseMove,
-                onMouseLeave: handlePointMouseLeave,
-                onClick: (e) => {
+                onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                onMouseMove: hoverable ? handlePointMouseMove : void 0,
+                onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                onClick: pointClickable ? (e) => {
                   e.stopPropagation();
                   handlePointClick(sd.seriesIndex, point.pointIndex);
-                }
+                } : void 0,
+                onFocus: hoverable ? (e) => showPointTooltipFromElement(
+                  e.currentTarget,
+                  sd.seriesIndex,
+                  point.pointIndex
+                ) : void 0,
+                onBlur: hoverable ? handlePointMouseLeave : void 0,
+                onKeyDown: pointInteractive ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (pointClickable) {
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    } else {
+                      showPointTooltipFromElement(
+                        e.currentTarget,
+                        sd.seriesIndex,
+                        point.pointIndex
+                      );
+                    }
+                  } else if (e.key === "Escape" && hoverable) {
+                    handlePointMouseLeave();
+                  }
+                } : void 0
               },
               `point-${sd.seriesKey}-${point.pointIndex}`
             );

package/dist/{chunk-XBM76P27.mjs → chunk-QFUIGOOM.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-6QML6T3Y.mjs";
 import {
   ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-ZG2W4HS5.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-O6YIPNXX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
@@ -215,6 +215,8 @@ var PieChart = ({
                   filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
                 },
                 tabIndex: selectable ? 0 : void 0,
+                role: selectable ? "button" : "img",
+                "aria-label": arc.data.label ?? String(arc.value),
                 "data-pie-slice": "true",
                 "data-index": arc.index,
                 onMouseEnter: (e) => handleMouseEnter(arc.index, e),

package/dist/{chunk-BN4ZKCAI.mjs → chunk-QKNORS26.mjs}

@@ -1,6 +1,9 @@
 import {
   useControlledState
 } from "./chunk-WHYHLUXG.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/DatePicker.tsx
 import {
@@ -27,14 +30,29 @@ import {
   getDatePickerIconButtonClasses,
   getDatePickerLocaleCode,
   getDatePickerLabels,
-  getLocaleDirection
+  getLocaleDirection,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 
 // src/components/DatePicker/types.ts
 var isRangeDatePicker = (props) => props.range === true;
 
 // src/components/DatePicker/state.ts
+function normalizeDatePickerLocale(locale) {
+  if (!locale) return void 0;
+  if (typeof locale === "string") return { locale };
+  if ("datePicker" in locale) return locale;
+  const preset = locale;
+  return {
+    locale: hasDatePickerLocaleCode(preset) ? preset.locale : void 0,
+    datePicker: preset
+  };
+}
+function hasDatePickerLocaleCode(locale) {
+  return typeof locale.locale === "string";
+}
 function useDatePickerState(props) {
+  const config = useTigerConfig();
   const {
     size = "md",
     disabled = false,
@@ -100,7 +118,11 @@ function useDatePickerState(props) {
   );
   const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
   const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
-  const localeCode = useMemo(() => getDatePickerLocaleCode(props.locale), [props.locale]);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, normalizeDatePickerLocale(props.locale)),
+    [config.locale, props.locale]
+  );
+  const localeCode = useMemo(() => getDatePickerLocaleCode(mergedLocale), [mergedLocale]);
   const [viewingMonth, setViewingMonth] = useState(
     (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
   );
@@ -140,8 +162,8 @@ function useDatePickerState(props) {
   const dayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
   const isRtl = getLocaleDirection(localeCode) === "rtl";
   const labels = useMemo(
-    () => getDatePickerLabels(props.locale, props.labels),
-    [props.locale, props.labels]
+    () => getDatePickerLabels(mergedLocale, props.labels),
+    [mergedLocale, props.labels]
   );
   const mobileDate = useMemo(() => {
     if (!isRangeMode) return selectedDate ?? normalizeDate(/* @__PURE__ */ new Date());
@@ -544,11 +566,8 @@ function renderDatePickerMobile(ctx) {
 
 // src/components/DatePicker/render-calendar.tsx
 import {
-  formatDate as formatDate2,
   formatMonthYear,
-  isSameDay,
-  isToday as isTodayUtil,
-  normalizeDate as normalizeDate2,
+  getDatePickerCalendarCellState,
   datePickerCalendarClasses,
   datePickerCalendarHeaderClasses,
   datePickerNavButtonClasses,
@@ -614,10 +633,6 @@ function renderDatePickerCalendar(ctx) {
         ] }),
         /* @__PURE__ */ jsx3("div", { className: datePickerCalendarGridClasses, role: "row", children: ctx.dayNames.map((day) => /* @__PURE__ */ jsx3("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
         (() => {
-          const [rangeStart, rangeEnd] = ctx.selectedRange;
-          const normStart = rangeStart ? normalizeDate2(rangeStart) : null;
-          const normEnd = rangeEnd ? normalizeDate2(rangeEnd) : null;
-          const isSelectingEnd = ctx.isRangeMode && Boolean(rangeStart) && !rangeEnd;
           return /* @__PURE__ */ jsx3(
             "div",
             {
@@ -627,38 +642,36 @@ function renderDatePickerCalendar(ctx) {
               "aria-colcount": 7,
               children: ctx.calendarDays.map((date, index) => {
                 if (!date) return null;
-                const normDate = normalizeDate2(date);
-                const isRangeStart = ctx.isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                const isRangeEnd = ctx.isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                const isInRange = ctx.isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                const isSelected = !ctx.isRangeMode ? ctx.selectedDate ? isSameDay(date, ctx.selectedDate) : false : isRangeStart || isRangeEnd;
-                const isCurrentMonthDay = ctx.isCurrentMonth(date);
-                const isTodayDay = isTodayUtil(date);
-                const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                const isDisabled = ctx.isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                const iso = formatDate2(date, "yyyy-MM-dd");
+                const cell = getDatePickerCalendarCellState({
+                  date,
+                  selectedDate: ctx.selectedDate,
+                  selectedRange: ctx.selectedRange,
+                  isRangeMode: ctx.isRangeMode,
+                  isCurrentMonth: ctx.isCurrentMonth,
+                  isDateDisabled: ctx.isDateDisabled
+                });
                 return /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
                     className: getDatePickerDayCellClasses(
-                      isCurrentMonthDay,
-                      isSelected,
-                      isTodayDay,
-                      isDisabled,
-                      Boolean(isInRange),
-                      Boolean(isRangeStart),
-                      Boolean(isRangeEnd)
+                      cell.isCurrentMonthDay,
+                      cell.isSelected,
+                      cell.isTodayDay,
+                      cell.isDisabled,
+                      cell.isInRange,
+                      cell.isRangeStart,
+                      cell.isRangeEnd
                     ),
-                    disabled: isDisabled,
+                    disabled: cell.isDisabled,
                     onClick: () => ctx.selectDate(date),
                     role: "gridcell",
-                    "data-date": iso,
-                    onFocus: () => ctx.setActiveDateIso(iso),
-                    tabIndex: ctx.activeDateIso === iso && !isDisabled ? 0 : -1,
-                    "aria-label": iso,
-                    "aria-selected": isSelected,
-                    "aria-current": isTodayDay ? "date" : void 0,
+                    "data-date": cell.iso,
+                    onFocus: () => ctx.setActiveDateIso(cell.iso),
+                    tabIndex: ctx.activeDateIso === cell.iso && !cell.isDisabled ? 0 : -1,
+                    "aria-label": cell.iso,
+                    "aria-selected": cell.isSelected,
+                    "aria-current": cell.isTodayDay ? "date" : void 0,
                     children: date.getDate()
                   },
                   index

package/dist/{chunk-LROHXQWX.js → chunk-R4PMBWU3.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkANN5P7TJjs = require('./chunk-ANN5P7TJ.js');
+var _chunk2ZA4MUO2js = require('./chunk-2ZA4MUO2.js');
 
 // src/components/Kanban.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -11,7 +11,7 @@ var Kanban = ({
   ...props
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkANN5P7TJjs.TaskBoard,
+    _chunk2ZA4MUO2js.TaskBoard,
     {
       showCardCount,
       allowAddCard,