@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/chunk-R5XY4EQL.js

@@ -0,0 +1,56 @@
+'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/AvatarGroup.tsx
+var AvatarGroupContext = React.createContext(null);
+var AvatarGroup = ({
+  max,
+  size,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = React.useMemo(
+    () => ({ size, itemClass: tigercatCore.avatarGroupItemClasses }),
+    [size]
+  );
+  const childArray = React__default.default.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 = tigercatCore.avatarSizeClasses[size ?? "md"];
+  return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tigercatCore.classNames(tigercatCore.avatarGroupBaseClasses, className),
+      role: "group",
+      "aria-label": "Avatar group",
+      ...props,
+      children: [
+        visible,
+        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: tigercatCore.classNames(tigercatCore.avatarGroupOverflowClasses, overflowSizeClass),
+            "aria-label": `${overflow} more`,
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroupContext = AvatarGroupContext;

package/dist/chunk-RRJTIKU6.mjs

@@ -0,0 +1,238 @@
+import { useId, useState, useRef, useMemo, useEffect } from 'react';
+import { getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, getTreeSelectTriggerClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses, treeSelectBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/TreeSelect.tsx
+var TREESELECT_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "treeData",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "multiple",
+  "showSearch",
+  "notFoundText",
+  "defaultExpandAll",
+  "onChange"
+]);
+var TreeSelect = (props) => {
+  const {
+    value,
+    treeData = [],
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    multiple = false,
+    showSearch = false,
+    notFoundText = "No data",
+    defaultExpandAll = false,
+    className,
+    onChange,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!TREESELECT_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = useId();
+  const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedKeys, setExpandedKeys] = useState(
+    () => defaultExpandAll ? new Set(getAllTreeSelectKeys(treeData)) : /* @__PURE__ */ new Set()
+  );
+  const containerRef = useRef(null);
+  const displayLabel = useMemo(() => getTreeSelectDisplayLabel(treeData, value), [treeData, value]);
+  const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
+  const matchedKeys = useMemo(() => {
+    if (!searchQuery) return null;
+    return filterTreeSelectNodes(treeData, searchQuery);
+  }, [treeData, searchQuery]);
+  const effectiveExpandedKeys = matchedKeys ?? expandedKeys;
+  const flatNodes = useMemo(
+    () => flattenTreeSelectNodes(treeData, effectiveExpandedKeys),
+    [treeData, effectiveExpandedKeys]
+  );
+  const visibleNodes = useMemo(() => {
+    if (!matchedKeys) return flatNodes;
+    return flatNodes.filter((f) => matchedKeys.has(f.node.key));
+  }, [flatNodes, matchedKeys]);
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setSearchQuery("");
+  }
+  function toggleDropdown() {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }
+  function toggleExpand(key, e) {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function isSelected(key) {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(key);
+    }
+    return value === key;
+  }
+  function handleNodeSelect(node) {
+    if (node.disabled) return;
+    if (multiple) {
+      const current = Array.isArray(value) ? [...value] : [];
+      const idx = current.indexOf(node.key);
+      if (idx >= 0) current.splice(idx, 1);
+      else current.push(node.key);
+      onChange?.(current);
+    } else {
+      onChange?.(node.key);
+      closeDropdown();
+    }
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    onChange?.(multiple ? [] : void 0);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeDropdown();
+    } else if ((e.key === "Enter" || e.key === " ") && !isOpen) {
+      e.preventDefault();
+      openDropdown();
+    }
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: getTreeSelectTriggerClasses(size, disabled, isOpen),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "flex-1 truncate",
+                !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+              ),
+              children: displayLabel || placeholder
+            }
+          ),
+          showClearButton ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+              "aria-label": "Clear selection",
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  viewBox: icon20ViewBox,
+                  fill: "currentColor",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4 transition-transform",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx("path", { d: chevronDownSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          ) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { id: listboxId, role: "listbox", className: treeSelectDropdownClasses, children: [
+      showSearch && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: treeSelectSearchClasses,
+          placeholder: "Search...",
+          value: searchQuery,
+          "aria-label": "Search tree",
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      ),
+      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+        const { node, level, hasChildren, isExpanded } = flatNode;
+        const selected = isSelected(node.key);
+        const indent = level * 20;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": node.disabled,
+            className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+            style: { paddingLeft: `${indent + 8}px` },
+            onClick: (e) => {
+              e.stopPropagation();
+              handleNodeSelect(node);
+            },
+            children: [
+              hasChildren ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                    isExpanded ? "rotate-90" : ""
+                  ),
+                  onClick: (e) => toggleExpand(node.key, e),
+                  children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: chevronRightSolidIcon20PathD,
+                      fillRule: "evenodd",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
+            ]
+          },
+          String(node.key)
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: notFoundText })
+    ] })
+  ] });
+};
+
+export { TreeSelect };

package/dist/{chunk-ZFHTSHXS.mjs → chunk-RUROWRB5.mjs}

@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -45,6 +45,7 @@ var DatePicker = (props) => {
     onChange: _onChange,
     onClear: _onClear,
     className: _className,
+    shortcuts: _shortcuts,
     ...rest
   }) => rest)(props);
   const [isOpen, setIsOpen] = useState(false);
@@ -267,6 +268,24 @@ var DatePicker = (props) => {
   const setToday = () => {
     selectDate(/* @__PURE__ */ new Date());
   };
+  const handleShortcut = (shortcut) => {
+    const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+    if (!isRangeMode) {
+      const date = val instanceof Date ? normalizeDate(val) : val ? normalizeDate(parseDate(val)) : null;
+      if (!isControlled) setInternalValue(date);
+      props.onChange?.(date);
+    } else {
+      const range = val;
+      if (range && Array.isArray(range)) {
+        const parsed = [
+          range[0] ? normalizeDate(range[0] instanceof Date ? range[0] : parseDate(range[0])) : null,
+          range[1] ? normalizeDate(range[1] instanceof Date ? range[1] : parseDate(range[1])) : null
+        ];
+        setRangeValue(parsed);
+      }
+    }
+    closeCalendar();
+  };
   const clearDate = (event) => {
     event.stopPropagation();
     if (!isRangeMode) {
@@ -467,6 +486,16 @@ var DatePicker = (props) => {
               }
             );
           })(),
+          props.shortcuts && props.shortcuts.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]", children: props.shortcuts.map((sc, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: datePickerFooterButtonClasses,
+              onClick: () => handleShortcut(sc),
+              children: sc.label
+            },
+            i
+          )) }),
           isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
             /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
             /* @__PURE__ */ jsx(

package/dist/{chunk-SAZ6V6DX.js → chunk-RVCUNEBU.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,7 +9,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/components/RadioGroup.tsx
 var RadioGroupContext = React__default.default.createContext(null);
 var RadioGroup = ({
   value,
@@ -21,9 +21,7 @@ var RadioGroup = ({
   className,
   ...props
 }) => {
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : internalValue;
+  const [currentValue, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(value, defaultValue);
   const generatedNameRef = React.useRef(
     `tiger-radio-group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
   );

package/dist/chunk-RWZIWKZR.js

@@ -0,0 +1,188 @@
+'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');
+
+var SunburstChart = ({
+  width = 320,
+  height = 320,
+  padding = 24,
+  data,
+  innerRadiusRatio = 0,
+  showLabels: _showLabels = true,
+  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: _tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onArcClick,
+  onArcHover
+}) => {
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const outerRadius = react.useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2,
+    [innerRect.width, innerRect.height]
+  );
+  const innerRadius = react.useMemo(
+    () => outerRadius * Math.max(0, Math.min(1, innerRadiusRatio)),
+    [outerRadius, innerRadiusRatio]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const arcs = react.useMemo(
+    () => tigercatCore.computeSunburstArcs(data, {
+      cx,
+      cy,
+      innerRadius,
+      outerRadius,
+      colors: palette
+    }),
+    [data, cx, cy, innerRadius, outerRadius, 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 arc = arcs[index];
+      return arc ? { label: arc.label, value: arc.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      const arc = index !== null ? arcs[index] : null;
+      onArcHover?.(
+        index,
+        arc ? { label: arc.label, value: arc.value } : null
+      );
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onArcClick }
+  });
+  const rootArcs = react.useMemo(() => arcs.filter((a) => a.depth === 0), [arcs]);
+  const legendItems = react.useMemo(
+    () => tigercatCore.buildChartLegendItems({
+      data: rootArcs,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [rootArcs, palette, activeIndex]
+  );
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, arcs, void 0, (arc) => {
+      return `${arc.label}: ${arc.value}`;
+    }),
+    [resolvedHoveredIndex, arcs]
+  );
+  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": "sunburst", children: arcs.map((arc) => {
+        const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: arc.path,
+            fill: arc.color,
+            opacity,
+            stroke: "#ffffff",
+            strokeWidth: 1,
+            className: tigercatCore.classNames(interactive && "cursor-pointer"),
+            style: { transition: "opacity 0.2s ease-out" },
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": arc.label,
+            onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(arc.index)
+          },
+          `arc-${arc.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.SunburstChart = SunburstChart;