@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-TYCRDHE6.mjs

@@ -0,0 +1,143 @@
+import { StatusIcon } from './chunk-FLYJVZED.mjs';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { getTourTargetRect, getTourPopoverPosition, getTourSpotlightStyle, classNames, tourCloseButtonClasses, closeIconPathD, tourTitleClasses, tourDescriptionClasses, tourFooterClasses, tourIndicatorClasses, tourPopoverClasses } from '@expcat/tigercat-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Tour = ({
+  steps,
+  open = false,
+  current: controlledCurrent,
+  nextText = "Next",
+  prevText = "Previous",
+  finishText = "Finish",
+  closable = true,
+  showIndicators = true,
+  className,
+  onClose,
+  onFinish,
+  onChange
+}) => {
+  const [internalStep, setInternalStep] = useState(0);
+  const currentStep = controlledCurrent ?? internalStep;
+  const step = steps[currentStep];
+  const [targetRect, setTargetRect] = useState();
+  const popoverRef = useRef(null);
+  const updateRect = useCallback(() => {
+    if (step?.target) {
+      setTargetRect(getTourTargetRect(step.target));
+    } else {
+      setTargetRect(void 0);
+    }
+  }, [step]);
+  useEffect(() => {
+    if (open) updateRect();
+  }, [open, currentStep, updateRect]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = () => updateRect();
+    window.addEventListener("resize", handler);
+    window.addEventListener("scroll", handler, true);
+    return () => {
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler, true);
+    };
+  }, [open, updateRect]);
+  const goTo = useCallback(
+    (idx) => {
+      setInternalStep(idx);
+      onChange?.(idx);
+    },
+    [onChange]
+  );
+  const next = useCallback(() => {
+    if (currentStep < steps.length - 1) {
+      goTo(currentStep + 1);
+    } else {
+      onFinish?.();
+      onClose?.();
+    }
+  }, [currentStep, steps.length, goTo, onFinish, onClose]);
+  const prev = useCallback(() => {
+    if (currentStep > 0) goTo(currentStep - 1);
+  }, [currentStep, goTo]);
+  const close = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  if (!open || !step) return null;
+  if (typeof document === "undefined") return null;
+  const placement = step.placement ?? "bottom";
+  const showMask = step.mask !== false;
+  const isLast = currentStep === steps.length - 1;
+  const isFirst = currentStep === 0;
+  let popoverStyle;
+  if (targetRect) {
+    const pos = getTourPopoverPosition(targetRect, 320, 160, placement);
+    popoverStyle = { position: "absolute", top: pos.top, left: pos.left };
+  } else {
+    popoverStyle = {
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    };
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showMask && targetRect && /* @__PURE__ */ jsx("div", { style: getTourSpotlightStyle(targetRect), "aria-hidden": "true" }),
+    showMask && !targetRect && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[1000] bg-black/45", "aria-hidden": "true", onClick: close }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: popoverRef,
+        className: classNames(tourPopoverClasses, className),
+        style: popoverStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: tourCloseButtonClasses,
+              type: "button",
+              "aria-label": "Close tour",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(StatusIcon, { path: closeIconPathD, className: "h-4 w-4" })
+            }
+          ),
+          step.title && /* @__PURE__ */ jsx("div", { className: tourTitleClasses, children: step.title }),
+          step.description && /* @__PURE__ */ jsx("div", { className: tourDescriptionClasses, children: step.description }),
+          /* @__PURE__ */ jsxs("div", { className: tourFooterClasses, children: [
+            showIndicators && /* @__PURE__ */ jsxs("span", { className: tourIndicatorClasses, children: [
+              currentStep + 1,
+              " / ",
+              steps.length
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              !isFirst && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
+                  onClick: prev,
+                  children: prevText
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
+                  onClick: next,
+                  children: isLast ? finishText : nextText
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+  return ReactDOM.createPortal(content, document.body);
+};
+
+export { Tour };

package/dist/chunk-TZNTHABR.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/InfiniteScroll.tsx
+var InfiniteScroll = ({
+  hasMore = true,
+  loading = false,
+  threshold = 100,
+  loadingText = "Loading...",
+  endText = "No more data",
+  direction = "vertical",
+  inverse = false,
+  disabled = false,
+  className,
+  children,
+  loader,
+  end,
+  onLoadMore,
+  ...rest
+}) => {
+  const containerRef = react.useRef(null);
+  const containerClasses = react.useMemo(
+    () => tigercatCore.getInfiniteScrollContainerClasses(direction, className),
+    [direction, className]
+  );
+  const checkScroll = react.useCallback(() => {
+    if (disabled || loading || !hasMore) return;
+    const el = containerRef.current;
+    if (!el) return;
+    if (tigercatCore.shouldLoadMore(el, threshold, direction, inverse)) {
+      onLoadMore?.();
+    }
+  }, [disabled, loading, hasMore, threshold, direction, inverse, onLoadMore]);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", checkScroll, { passive: true });
+    return () => el.removeEventListener("scroll", checkScroll);
+  }, [checkScroll]);
+  const loaderEl = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.infiniteScrollLoaderClasses, role: "status", "aria-live": "polite", children: loader ?? loadingText }) : null;
+  const endEl = !hasMore && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.infiniteScrollEndClasses, children: end ?? endText }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: tigercatCore.classNames(containerClasses), ...rest, children: inverse ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loaderEl,
+    children,
+    endEl
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    loaderEl,
+    endEl
+  ] }) });
+};
+var InfiniteScroll_default = InfiniteScroll;
+
+exports.InfiniteScroll = InfiniteScroll;
+exports.InfiniteScroll_default = InfiniteScroll_default;

package/dist/chunk-UBKOITHT.mjs

@@ -0,0 +1,142 @@
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import React, { useMemo } from 'react';
+import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GaugeChart = ({
+  width = 280,
+  height = 200,
+  padding = 24,
+  value,
+  min = 0,
+  max = 100,
+  startAngle = 135,
+  endAngle = 405,
+  arcWidth = 20,
+  showTicks = true,
+  tickCount = 5,
+  valueFormatter,
+  label,
+  segments,
+  trackColor = "var(--tiger-border,#e5e7eb)",
+  color = "var(--tiger-primary,#2563eb)",
+  title: chartTitle,
+  desc,
+  className
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const radius = useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2 - 4,
+    [innerRect.width, innerRect.height]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const needleAngle = useMemo(
+    () => valueToGaugeAngle(value, min, max, startAngle, endAngle),
+    [value, min, max, startAngle, endAngle]
+  );
+  const ticks = useMemo(
+    () => showTicks ? computeGaugeTicks(cx, cy, radius, min, max, startAngle, endAngle, tickCount) : [],
+    [showTicks, cx, cy, radius, min, max, startAngle, endAngle, tickCount]
+  );
+  const trackPath = createGaugeArcPath(cx, cy, radius, startAngle, endAngle, arcWidth);
+  const valuePath = needleAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, needleAngle, arcWidth) : null;
+  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, needleAngle);
+  const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+  return /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title: chartTitle,
+      desc,
+      className: classNames(className),
+      children: [
+        /* @__PURE__ */ jsx("path", { d: trackPath, fill: trackColor, strokeWidth: 0 }),
+        segments ? segments.map((seg, i) => {
+          const sStart = valueToGaugeAngle(seg.range[0], min, max, startAngle, endAngle);
+          const sEnd = valueToGaugeAngle(seg.range[1], min, max, startAngle, endAngle);
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: createGaugeArcPath(cx, cy, radius, sStart, sEnd, arcWidth),
+              fill: seg.color,
+              strokeWidth: 0
+            },
+            `seg-${i}`
+          );
+        }) : valuePath && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: valuePath,
+            fill: color,
+            strokeWidth: 0,
+            style: { transition: "all 0.3s ease-out" }
+          }
+        ),
+        ticks.map((tick, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: tick.x1,
+              y1: tick.y1,
+              x2: tick.x2,
+              y2: tick.y2,
+              stroke: "var(--tiger-text-secondary,#6b7280)",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: tick.x2 + (tick.x2 - tick.x1) * 1.5,
+              y: tick.y2 + (tick.y2 - tick.y1) * 1.5,
+              className: chartAxisTickTextClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: { fontSize: "10px" },
+              children: tick.label
+            }
+          )
+        ] }, `tick-${i}`)),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: needlePath,
+            fill: "var(--tiger-text,#374151)",
+            style: { transition: "all 0.3s ease-out" }
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--tiger-text,#374151)" }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: cx,
+            y: cy + radius * 0.35,
+            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: formattedValue
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: cx,
+            y: cy + radius * 0.35 + 20,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { GaugeChart };

package/dist/{chunk-RDIEZKV2.js → chunk-UEJHVPE2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkSAZ6V6DX_js = require('./chunk-SAZ6V6DX.js');
+var chunkRVCUNEBU_js = require('./chunk-RVCUNEBU.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,7 +18,7 @@ var Radio = ({
   style,
   ...props
 }) => {
-  const groupContext = react.useContext(chunkSAZ6V6DX_js.RadioGroupContext);
+  const groupContext = react.useContext(chunkRVCUNEBU_js.RadioGroupContext);
   const [internalChecked, setInternalChecked] = react.useState(defaultChecked);
   const isCheckedControlled = checked !== void 0;
   const isInGroup = !!groupContext;

package/dist/chunk-UF3DXKCI.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Text.tsx
+var Text = React__default.default.memo(
+  ({
+    tag = "p",
+    size,
+    weight,
+    align,
+    color,
+    truncate,
+    italic,
+    underline,
+    lineThrough,
+    children,
+    className,
+    ...props
+  }) => {
+    const textClasses = tigercatCore.classNames(
+      tigercatCore.getTextClasses({ size, weight, align, color, truncate, italic, underline, lineThrough }),
+      className
+    );
+    return React__default.default.createElement(tag, { ...props, className: textClasses }, children);
+  }
+);
+Text.displayName = "Text";
+
+exports.Text = Text;

package/dist/chunk-UIO6O4MI.js

@@ -0,0 +1,57 @@
+'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/Card.tsx
+var Card = React__default.default.memo(
+  ({
+    variant = "default",
+    size = "md",
+    direction = "vertical",
+    hoverable = false,
+    cover,
+    coverAlt = "Card cover image",
+    header,
+    footer,
+    actions,
+    className,
+    children,
+    ...props
+  }) => {
+    const isHorizontal = direction === "horizontal";
+    const sectionSizeClass = cover ? tigercatCore.cardSizeClasses[size] : void 0;
+    const cardClasses = tigercatCore.classNames(
+      tigercatCore.getCardClasses(variant, hoverable),
+      tigercatCore.cardDirectionClasses[direction],
+      !cover && tigercatCore.cardSizeClasses[size],
+      className
+    );
+    const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass);
+    const bodyContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      header != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardHeaderClasses), children: header }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionSizeClass, children }),
+      footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardFooterClasses), children: footer }),
+      actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses)), children: actions })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClasses, ...props, children: [
+      cover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cardCoverWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: cover,
+          alt: coverAlt,
+          className: tigercatCore.classNames(tigercatCore.cardCoverClasses, isHorizontal && "h-full w-48 object-cover")
+        }
+      ) }),
+      isHorizontal ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cardHorizontalBodyClasses, children: bodyContent }) : bodyContent
+    ] });
+  }
+);
+Card.displayName = "Card";
+
+exports.Card = Card;

package/dist/chunk-UKGQ7256.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useControlledState.ts
+function useControlledState(controlledValue, defaultValue) {
+  const [internalValue, setInternalValue] = react.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  return [value, setInternalValue, isControlled];
+}
+
+exports.useControlledState = useControlledState;

package/dist/chunk-UPQGB5NQ.mjs

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { getPrintLayoutClasses, printLayoutHeaderClasses, printLayoutFooterClasses, classNames, printLayoutPageBreakClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/PrintLayout.tsx
+var PrintLayout = ({
+  pageSize = "A4",
+  orientation = "portrait",
+  showHeader = false,
+  showFooter = false,
+  headerText,
+  footerText,
+  headerRender,
+  footerRender,
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = useMemo(
+    () => getPrintLayoutClasses(pageSize, orientation, className),
+    [pageSize, orientation, className]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, children: [
+    showHeader && (headerRender || headerText) && /* @__PURE__ */ jsx("div", { className: printLayoutHeaderClasses, children: headerRender || headerText }),
+    /* @__PURE__ */ jsx("div", { className: "tiger-print-content", children }),
+    showFooter && (footerRender || footerText) && /* @__PURE__ */ jsx("div", { className: printLayoutFooterClasses, children: footerRender || footerText })
+  ] });
+};
+var PrintPageBreak = (props) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: classNames(printLayoutPageBreakClasses, "print:break-before-page"),
+    "aria-hidden": "true"
+  }
+);
+
+export { PrintLayout, PrintPageBreak };

package/dist/chunk-UQMPEMY7.mjs

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+// src/hooks/useControlledState.ts
+function useControlledState(controlledValue, defaultValue) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  return [value, setInternalValue, isControlled];
+}
+
+export { useControlledState };

package/dist/chunk-V3P4ZAGL.mjs

@@ -0,0 +1,110 @@
+import { useState, useMemo } from 'react';
+import { starViewBox, starPathD, classNames, rateInactiveColor, rateHoverColor, rateActiveColor, getRateStarClasses, rateBaseClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/Rate.tsx
+var Rate = ({
+  value = 0,
+  count = 5,
+  allowHalf = false,
+  disabled = false,
+  size = "md",
+  allowClear = true,
+  character,
+  className,
+  onChange,
+  onHoverChange
+}) => {
+  const [hoverValue, setHoverValue] = useState(0);
+  const displayValue = hoverValue > 0 ? hoverValue : value;
+  const isChar = !!character;
+  function getStarValue(index, isHalf) {
+    return isHalf ? index + 0.5 : index + 1;
+  }
+  function handleClick(index, e) {
+    if (disabled) return;
+    const el = e.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const half = allowHalf && e.clientX - rect.left < rect.width / 2;
+    const val = getStarValue(index, half);
+    const newVal = allowClear && val === value ? 0 : val;
+    onChange?.(newVal);
+  }
+  function handleMouseMove(index, e) {
+    if (disabled) return;
+    const el = e.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const half = allowHalf && e.clientX - rect.left < rect.width / 2;
+    const val = getStarValue(index, half);
+    if (val !== hoverValue) {
+      setHoverValue(val);
+      onHoverChange?.(val);
+    }
+  }
+  function handleMouseLeave() {
+    if (disabled) return;
+    setHoverValue(0);
+    onHoverChange?.(0);
+  }
+  const starIcon = useMemo(
+    () => /* @__PURE__ */ jsx("svg", { viewBox: starViewBox, fill: "currentColor", className: "w-full h-full", children: /* @__PURE__ */ jsx("path", { d: starPathD }) }),
+    []
+  );
+  const stars = useMemo(() => {
+    const items = [];
+    for (let i = 0; i < count; i++) {
+      const full = displayValue >= i + 1;
+      const half = allowHalf && !full && displayValue >= i + 0.5;
+      const isHovering = hoverValue > 0;
+      const colorClass = full || half ? isHovering ? rateHoverColor : rateActiveColor : rateInactiveColor;
+      const content = half ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: classNames("absolute inset-0", rateInactiveColor), children: isChar ? /* @__PURE__ */ jsx("span", { children: character }) : starIcon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "absolute inset-0 overflow-hidden",
+              isHovering ? rateHoverColor : rateActiveColor
+            ),
+            style: { width: "50%" },
+            children: isChar ? /* @__PURE__ */ jsx("span", { children: character }) : starIcon
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { className: colorClass, children: isChar ? /* @__PURE__ */ jsx("span", { children: character }) : starIcon });
+      items.push(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: getRateStarClasses(size, isChar, disabled),
+            role: "radio",
+            "aria-checked": full || half,
+            "aria-label": `${i + 1} star${i + 1 > 1 ? "s" : ""}`,
+            onClick: (e) => handleClick(i, e),
+            onMouseMove: (e) => handleMouseMove(i, e),
+            onMouseLeave: handleMouseLeave,
+            children: content
+          },
+          i
+        )
+      );
+    }
+    return items;
+  }, [
+    count,
+    displayValue,
+    hoverValue,
+    allowHalf,
+    disabled,
+    size,
+    character,
+    isChar,
+    value,
+    allowClear,
+    onChange,
+    onHoverChange,
+    starIcon
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: classNames(rateBaseClasses, className), role: "radiogroup", "aria-label": "Rating", children: stars });
+};
+
+export { Rate };

package/dist/{chunk-TGPQ4KET.mjs → chunk-VAQDUVBP.mjs}

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, listLoadingOverlayClasses, getListHeaderFooterClasses, listEmptyStateClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getLoadingOverlaySpinnerClasses, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -36,11 +36,14 @@ var List = ({
   onItemClick,
   onPageChange,
   className,
+  draggable: isDraggable = false,
+  onReorder,
   ...divProps
 }) => {
   const [currentPage, setCurrentPage] = useState(
     pagination && typeof pagination === "object" ? pagination.current || 1 : 1
   );
+  const dragIndexRef = React.useRef(null);
   const [currentPageSize, setCurrentPageSize] = useState(
     pagination && typeof pagination === "object" ? pagination.pageSize || 10 : 10
   );
@@ -155,11 +158,35 @@ var List = ({
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames(itemClasses, clickable && "cursor-pointer"),
+        className: classNames(
+          itemClasses,
+          clickable && "cursor-pointer",
+          isDraggable && "cursor-grab"
+        ),
         role: "listitem",
         tabIndex: clickable ? 0 : void 0,
         onClick: handleClick,
         onKeyDown: handleKeyDown,
+        draggable: isDraggable || void 0,
+        onDragStart: isDraggable ? () => {
+          dragIndexRef.current = index;
+        } : void 0,
+        onDragOver: isDraggable ? (e) => e.preventDefault() : void 0,
+        onDrop: isDraggable ? () => {
+          const from = dragIndexRef.current;
+          if (from === null || from === index) {
+            dragIndexRef.current = null;
+            return;
+          }
+          dragIndexRef.current = null;
+          const items = [...dataSource];
+          const [moved] = items.splice(from, 1);
+          items.splice(index, 0, moved);
+          onReorder?.(items, from, index);
+        } : void 0,
+        onDragEnd: isDraggable ? () => {
+          dragIndexRef.current = null;
+        } : void 0,
         children: renderItem ? renderItem(item, index) : renderDefaultListItem(item)
       },
       key