@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-7YLVAZJQ.mjs

@@ -0,0 +1,47 @@
+import { classNames, getSegmentedOptionClasses, getSegmentedContainerClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Segmented.tsx
+var Segmented = ({
+  value,
+  options = [],
+  disabled = false,
+  size = "md",
+  block = false,
+  className,
+  onChange
+}) => {
+  function handleSelect(opt) {
+    if (opt.disabled || disabled) return;
+    if (opt.value === value) return;
+    onChange?.(opt.value);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(getSegmentedContainerClasses(size, block), className),
+      role: "radiogroup",
+      children: options.map((opt) => {
+        const selected = opt.value === value;
+        const isDisabled = !!opt.disabled || disabled;
+        return /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: classNames(
+              getSegmentedOptionClasses(size, selected, isDisabled),
+              block ? "flex-1 text-center" : ""
+            ),
+            role: "radio",
+            "aria-checked": selected,
+            "aria-disabled": isDisabled,
+            onClick: () => handleSelect(opt),
+            children: /* @__PURE__ */ jsx("span", { children: opt.label })
+          },
+          opt.value
+        );
+      })
+    }
+  );
+};
+
+export { Segmented };

package/dist/{chunk-NV3JUZ3N.js → chunk-AGR3FM3V.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkGNMOOYHG_js = require('./chunk-GNMOOYHG.js');
+var chunkKNBNE74O_js = require('./chunk-KNBNE74O.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -38,12 +38,12 @@ var ImageGroup = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkGNMOOYHG_js.ImagePreview,
+      chunkKNBNE74O_js.ImagePreview,
       {
-        visible: previewVisible,
+        open: previewVisible,
         images: imagesRef.current,
         currentIndex: previewIndex,
-        onVisibleChange: (val) => {
+        onOpenChange: (val) => {
           setPreviewVisible(val);
           if (!val) onPreviewVisibleChange?.(false);
         },

package/dist/{chunk-MWH6FCSE.js → chunk-AJQPGAYL.js}

@@ -6,18 +6,18 @@ var tigercatCore = require('@expcat/tigercat-core');
 
 function usePopup(options) {
   const {
-    visible,
-    defaultVisible = false,
+    open,
+    defaultOpen = false,
     disabled = false,
     trigger = "click",
     placement = "top",
     offset = 8,
     multiTrigger = true,
-    onVisibleChange
+    onOpenChange
   } = options;
-  const isControlled = visible !== void 0;
-  const [internalVisible, setInternalVisible] = react.useState(defaultVisible);
-  const currentVisible = isControlled ? visible : internalVisible;
+  const isControlled = open !== void 0;
+  const [internalVisible, setInternalVisible] = react.useState(defaultOpen);
+  const currentVisible = isControlled ? open : internalVisible;
   const containerRef = react.useRef(null);
   const triggerRef = react.useRef(null);
   const floatingRef = react.useRef(null);
@@ -36,9 +36,9 @@ function usePopup(options) {
     (next) => {
       if (disabled && next) return;
       if (!isControlled) setInternalVisible(next);
-      onVisibleChange?.(next);
+      onOpenChange?.(next);
     },
-    [disabled, isControlled, onVisibleChange]
+    [disabled, isControlled, onOpenChange]
   );
   const handleToggle = react.useCallback(() => {
     if (!disabled) setVisible(!currentVisible);

package/dist/{chunk-3PV2MDST.mjs → chunk-AMOH5AMN.mjs}

@@ -4,18 +4,18 @@ import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-cor
 
 function usePopup(options) {
   const {
-    visible,
-    defaultVisible = false,
+    open,
+    defaultOpen = false,
     disabled = false,
     trigger = "click",
     placement = "top",
     offset = 8,
     multiTrigger = true,
-    onVisibleChange
+    onOpenChange
   } = options;
-  const isControlled = visible !== void 0;
-  const [internalVisible, setInternalVisible] = useState(defaultVisible);
-  const currentVisible = isControlled ? visible : internalVisible;
+  const isControlled = open !== void 0;
+  const [internalVisible, setInternalVisible] = useState(defaultOpen);
+  const currentVisible = isControlled ? open : internalVisible;
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
@@ -34,9 +34,9 @@ function usePopup(options) {
     (next) => {
       if (disabled && next) return;
       if (!isControlled) setInternalVisible(next);
-      onVisibleChange?.(next);
+      onOpenChange?.(next);
     },
-    [disabled, isControlled, onVisibleChange]
+    [disabled, isControlled, onOpenChange]
   );
   const handleToggle = useCallback(() => {
     if (!disabled) setVisible(!currentVisible);

package/dist/chunk-AOZLBASY.mjs

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { getDividerClasses, getDividerStyle } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Divider.tsx
+var Divider = React.memo(
+  ({
+    orientation = "horizontal",
+    lineStyle = "solid",
+    spacing = "md",
+    color,
+    thickness,
+    className,
+    ...props
+  }) => {
+    const classes = useMemo(() => {
+      const base = getDividerClasses(orientation, lineStyle, spacing);
+      return className ? `${base} ${className}` : base;
+    }, [orientation, lineStyle, spacing, className]);
+    const style = useMemo(
+      () => getDividerStyle(orientation, color, thickness),
+      [color, thickness, orientation]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        className: classes,
+        style,
+        role: "separator",
+        "aria-orientation": orientation
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+export { Divider };

package/dist/chunk-ASALMHFI.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ButtonGroup.tsx
+var ButtonGroupContext = react.createContext(null);
+function useButtonGroupContext() {
+  return react.useContext(ButtonGroupContext);
+}
+var ButtonGroup = ({
+  size,
+  vertical = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = react.useMemo(() => ({ size }), [size]);
+  const groupClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.buttonGroupBaseClasses,
+      vertical ? tigercatCore.buttonGroupVerticalClasses : tigercatCore.buttonGroupHorizontalClasses,
+      vertical ? tigercatCore.buttonGroupItemVerticalClasses : tigercatCore.buttonGroupItemClasses,
+      className
+    ),
+    [vertical, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupContext = ButtonGroupContext;
+exports.useButtonGroupContext = useButtonGroupContext;

package/dist/chunk-AYDPWKSW.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, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SunburstChart = ({
+  width = 320,
+  height = 320,
+  padding = 24,
+  data,
+  innerRadiusRatio = 0,
+  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,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onArcClick,
+  onArcHover
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const outerRadius = useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2,
+    [innerRect.width, innerRect.height]
+  );
+  const innerRadius = useMemo(
+    () => outerRadius * Math.max(0, Math.min(1, innerRadiusRatio)),
+    [outerRadius, innerRadiusRatio]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const arcs = useMemo(
+    () => 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
+  } = 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 = useMemo(() => arcs.filter((a) => a.depth === 0), [arcs]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: rootArcs,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [rootArcs, palette, activeIndex]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, arcs, void 0, (arc) => {
+      return `${arc.label}: ${arc.value}`;
+    }),
+    [resolvedHoveredIndex, arcs]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: /* @__PURE__ */ jsx("g", { "data-series-type": "sunburst", children: arcs.map((arc) => {
+        const opacity = getChartElementOpacity(arc.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arc.path,
+            fill: arc.color,
+            opacity,
+            stroke: "#ffffff",
+            strokeWidth: 1,
+            className: 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__ */ 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 { SunburstChart };

package/dist/chunk-B53R2U2R.mjs

@@ -0,0 +1,86 @@
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { resolveAffixTarget, calculateAffixState, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Affix.tsx
+var Affix = ({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  children,
+  onChange,
+  ...props
+}) => {
+  const wrapperRef = useRef(null);
+  const placeholderRef = useRef(null);
+  const originalRectRef = useRef(null);
+  const [state, setState] = useState({ affixed: false, style: {} });
+  const prevAffixed = useRef(false);
+  const update = useCallback(() => {
+    const el = prevAffixed.current && placeholderRef.current ? placeholderRef.current : wrapperRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (!originalRectRef.current || !prevAffixed.current) {
+      originalRectRef.current = {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    const resolved = resolveAffixTarget(target);
+    const containerRect = resolved.getRect();
+    const newState = calculateAffixState(
+      originalRectRef.current,
+      containerRect,
+      offsetBottom !== void 0 ? void 0 : offsetTop,
+      offsetBottom,
+      zIndex
+    );
+    if (newState.affixed !== prevAffixed.current) {
+      prevAffixed.current = newState.affixed;
+      onChange?.(newState.affixed);
+    }
+    setState(newState);
+  }, [offsetTop, offsetBottom, target, zIndex, onChange]);
+  useEffect(() => {
+    const resolved = resolveAffixTarget(target);
+    const scrollEl = resolved.element;
+    scrollEl.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update, { passive: true });
+    update();
+    return () => {
+      scrollEl.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [target, update]);
+  const wrapperClasses = useMemo(() => classNames(className), [className]);
+  if (state.affixed) {
+    return /* @__PURE__ */ jsxs("div", { ref: placeholderRef, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: originalRectRef.current?.width ?? 0,
+            height: originalRectRef.current?.height ?? 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: wrapperRef,
+          className: wrapperClasses,
+          style: state.style,
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, ...props, children });
+};
+
+export { Affix };

package/dist/chunk-BALJCZ62.mjs

@@ -0,0 +1,147 @@
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { classNames, resizableBaseClasses, defaultResizeHandles, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Resizable.tsx
+var Resizable = ({
+  defaultWidth,
+  defaultHeight,
+  minWidth = 0,
+  minHeight = 0,
+  maxWidth,
+  maxHeight,
+  handles = defaultResizeHandles,
+  axis = "both",
+  disabled = false,
+  lockAspectRatio = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  children
+}) => {
+  const [width, setWidth] = useState(defaultWidth);
+  const [height, setHeight] = useState(defaultHeight);
+  const [draggingHandle, setDraggingHandle] = useState(null);
+  const dragRef = useRef(null);
+  const handleMouseDown = useCallback(
+    (handle, e) => {
+      if (disabled) return;
+      e.preventDefault();
+      const sw = width ?? 0;
+      const sh = height ?? 0;
+      dragRef.current = {
+        handle,
+        startX: e.clientX,
+        startY: e.clientY,
+        startW: sw,
+        startH: sh
+      };
+      setDraggingHandle(handle);
+      onResizeStart?.({ width: sw, height: sh, handle, deltaX: 0, deltaY: 0 });
+      const onMouseMove = (ev) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        const mouseDeltaX = ev.clientX - drag.startX;
+        const mouseDeltaY = ev.clientY - drag.startY;
+        const { deltaWidth, deltaHeight } = calculateResizeDelta(
+          drag.handle,
+          mouseDeltaX,
+          mouseDeltaY,
+          axis
+        );
+        let newW = drag.startW + deltaWidth;
+        let newH = drag.startH + deltaHeight;
+        if (lockAspectRatio) {
+          const ar = applyAspectRatio(newW, newH, drag.startW, drag.startH);
+          newW = ar.width;
+          newH = ar.height;
+        }
+        const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
+        setWidth(clamped.width);
+        setHeight(clamped.height);
+        onResize?.({
+          width: clamped.width,
+          height: clamped.height,
+          handle: drag.handle,
+          deltaX: clamped.width - drag.startW,
+          deltaY: clamped.height - drag.startH
+        });
+      };
+      const onMouseUp = (ev) => {
+        const drag = dragRef.current;
+        if (drag) {
+          const mouseDeltaX = ev.clientX - drag.startX;
+          const mouseDeltaY = ev.clientY - drag.startY;
+          const { deltaWidth, deltaHeight } = calculateResizeDelta(
+            drag.handle,
+            mouseDeltaX,
+            mouseDeltaY,
+            axis
+          );
+          let newW = drag.startW + deltaWidth;
+          let newH = drag.startH + deltaHeight;
+          if (lockAspectRatio) {
+            const ar = applyAspectRatio(newW, newH, drag.startW, drag.startH);
+            newW = ar.width;
+            newH = ar.height;
+          }
+          const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
+          onResizeEnd?.({
+            width: clamped.width,
+            height: clamped.height,
+            handle: drag.handle,
+            deltaX: clamped.width - drag.startW,
+            deltaY: clamped.height - drag.startH
+          });
+        }
+        dragRef.current = null;
+        setDraggingHandle(null);
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [
+      disabled,
+      width,
+      height,
+      axis,
+      lockAspectRatio,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      onResizeStart,
+      onResize,
+      onResizeEnd
+    ]
+  );
+  const containerClasses = useMemo(
+    () => classNames(resizableBaseClasses, "group/resizable", className),
+    [className]
+  );
+  const containerStyle = useMemo(() => {
+    const s = { ...style };
+    if (width != null) s.width = `${width}px`;
+    if (height != null) s.height = `${height}px`;
+    return s;
+  }, [width, height, style]);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, "data-resizable": "", children: [
+    children,
+    handles.map((pos) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getResizableHandleClasses(pos, draggingHandle === pos, disabled),
+        "data-handle": pos,
+        onMouseDown: (e) => handleMouseDown(pos, e)
+      },
+      pos
+    ))
+  ] });
+};
+var Resizable_default = Resizable;
+
+export { Resizable, Resizable_default };

package/dist/{chunk-F24IF2QL.js → chunk-BCNKTT5C.js}

@@ -30,10 +30,13 @@ var Button = ({
   disabled = false,
   loading = false,
   loadingIcon,
+  icon,
   block = false,
+  iconPosition = "left",
+  htmlType = "button",
+  danger = false,
   onClick,
   children,
-  type = "button",
   className,
   "aria-busy": ariaBusyProp,
   "aria-disabled": ariaDisabledProp,
@@ -42,17 +45,18 @@ var Button = ({
   const isDisabled = disabled || loading;
   const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
   const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
-  const buttonClasses = React.useMemo(
-    () => tigercatCore.classNames(
+  const buttonClasses = React.useMemo(() => {
+    const variantClasses = danger ? tigercatCore.buttonDangerClasses[variant] ?? tigercatCore.buttonDangerClasses.primary : tigercatCore.getButtonVariantClasses(variant);
+    return tigercatCore.classNames(
       tigercatCore.buttonBaseClasses,
-      tigercatCore.getButtonVariantClasses(variant),
+      variantClasses,
       tigercatCore.buttonSizeClasses[size],
       isDisabled && tigercatCore.buttonDisabledClasses,
       block && "w-full",
       className
-    ),
-    [variant, size, isDisabled, block, className]
-  );
+    );
+  }, [variant, size, isDisabled, block, danger, className]);
+  const iconIsRight = iconPosition === "right";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -62,9 +66,10 @@ var Button = ({
       "aria-disabled": ariaDisabled,
       disabled: isDisabled,
       onClick: isDisabled ? void 0 : onClick,
-      type,
+      type: htmlType,
       children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        !loading && icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: icon }),
         children
       ]
     }