@expcat/tigercat-react 0.2.0 → 0.2.27

package/dist/chunk-JOHKSMJM.mjs

@@ -0,0 +1,266 @@
+import React, { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { classNames, getCarouselContainerClasses, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, carouselSlideBaseClasses, getCarouselDotsClasses, clampSlideIndex, getNextSlideIndex, getPrevSlideIndex, isPrevDisabled, isNextDisabled, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath, getCarouselDotClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/Carousel.tsx
+var Carousel = forwardRef(
+  ({
+    autoplay = false,
+    autoplaySpeed = 3e3,
+    dots = true,
+    dotPosition = "bottom",
+    effect = "scroll",
+    arrows = false,
+    infinite = true,
+    speed = 500,
+    initialSlide = 0,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    className,
+    style,
+    onChange,
+    onBeforeChange,
+    children
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = useState(initialSlide);
+    const [isPaused, setIsPaused] = useState(false);
+    const autoplayTimerRef = useRef(null);
+    const slides = useMemo(() => {
+      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const containerClasses = useMemo(
+      () => classNames(getCarouselContainerClasses(className)),
+      [className]
+    );
+    const trackClasses = useMemo(() => {
+      if (effect === "fade") {
+        return carouselTrackFadeClasses;
+      }
+      return carouselTrackScrollClasses;
+    }, [effect]);
+    const trackStyle = useMemo(() => {
+      if (effect === "scroll") {
+        return {
+          transform: getScrollTransform(currentIndex),
+          transitionDuration: `${speed}ms`
+        };
+      }
+      return {};
+    }, [effect, currentIndex, speed]);
+    const getSlideClasses = useCallback(
+      (index) => {
+        const isActive = index === currentIndex;
+        if (effect === "fade") {
+          const positionClass = index === 0 ? "relative" : "absolute inset-0";
+          return classNames(
+            positionClass,
+            "w-full transition-opacity ease-in-out",
+            isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+          );
+        }
+        return carouselSlideBaseClasses;
+      },
+      [effect, currentIndex]
+    );
+    const getSlideStyle = useCallback(() => {
+      return {
+        transitionDuration: `${speed}ms`
+      };
+    }, [speed]);
+    const dotsClasses = useMemo(() => {
+      return getCarouselDotsClasses(dotPosition);
+    }, [dotPosition]);
+    const goTo = useCallback(
+      (index) => {
+        const clampedIndex = clampSlideIndex(index, slideCount);
+        if (clampedIndex === currentIndex) return;
+        onBeforeChange?.(currentIndex, clampedIndex);
+        const prevIndex = currentIndex;
+        setCurrentIndex(clampedIndex);
+        onChange?.(clampedIndex, prevIndex);
+      },
+      [currentIndex, slideCount, onBeforeChange, onChange]
+    );
+    const next = useCallback(() => {
+      const nextIdx = getNextSlideIndex(currentIndex, slideCount, infinite);
+      if (nextIdx !== currentIndex) {
+        goTo(nextIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    const prev = useCallback(() => {
+      const prevIdx = getPrevSlideIndex(currentIndex, slideCount, infinite);
+      if (prevIdx !== currentIndex) {
+        goTo(prevIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        prev,
+        goTo
+      }),
+      [next, prev, goTo]
+    );
+    useEffect(() => {
+      if (autoplay && !isPaused) {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+        }
+        autoplayTimerRef.current = setInterval(() => {
+          setCurrentIndex((prevIndex) => {
+            const nextIdx = getNextSlideIndex(prevIndex, slideCount, infinite);
+            if (nextIdx !== prevIndex) {
+              onBeforeChange?.(prevIndex, nextIdx);
+              onChange?.(nextIdx, prevIndex);
+            }
+            return nextIdx;
+          });
+        }, autoplaySpeed);
+      }
+      return () => {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+          autoplayTimerRef.current = null;
+        }
+      };
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, onChange, onBeforeChange]);
+    const handleMouseEnter = useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleMouseLeave = useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleFocus = useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const handleBlur = useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const isPrevArrowDisabled = useMemo(
+      () => isPrevDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const isNextArrowDisabled = useMemo(
+      () => isNextDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const renderArrows = () => {
+      if (!arrows) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getCarouselArrowClasses("prev", isPrevArrowDisabled),
+            onClick: prev,
+            disabled: isPrevArrowDisabled,
+            "aria-label": "Previous slide",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsx("path", { d: carouselPrevArrowPath })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getCarouselArrowClasses("next", isNextArrowDisabled),
+            onClick: next,
+            disabled: isNextArrowDisabled,
+            "aria-label": "Next slide",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsx("path", { d: carouselNextArrowPath })
+              }
+            )
+          }
+        )
+      ] });
+    };
+    const renderDots = () => {
+      if (!dots || slideCount <= 1) return null;
+      return /* @__PURE__ */ jsx("div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getCarouselDotClasses(index === currentIndex),
+          onClick: () => goTo(index),
+          "aria-label": `Go to slide ${index + 1}`,
+          "aria-current": index === currentIndex ? "true" : "false"
+        },
+        index
+      )) });
+    };
+    const renderSlides = () => {
+      const slideElements = slides.map((slide, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getSlideClasses(index),
+          style: effect === "fade" ? getSlideStyle() : void 0,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": `Slide ${index + 1} of ${slideCount}`,
+          "aria-hidden": index !== currentIndex,
+          children: slide
+        },
+        index
+      ));
+      if (effect === "fade") {
+        return /* @__PURE__ */ jsx("div", { className: classNames(trackClasses, "h-full"), children: slideElements });
+      }
+      return /* @__PURE__ */ jsx("div", { className: trackClasses, style: trackStyle, children: slideElements });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: containerClasses,
+        style,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": "Image carousel",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          renderSlides(),
+          renderArrows(),
+          renderDots()
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+export { Carousel };

package/dist/{chunk-WEGU7O4J.mjs → chunk-KOLLAGRK.mjs}

@@ -1,4 +1,4 @@
-import { useBreadcrumbContext } from './chunk-7JQ7LURS.mjs';
+import { useBreadcrumbContext } from './chunk-H36CWHUP.mjs';
 import { useMemo, useCallback } from 'react';
 import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-IS7YOBR7.mjs → chunk-NDOYQK2R.mjs}

@@ -96,6 +96,18 @@ var Pagination = ({
     },
     [handleQuickJumperSubmit]
   );
+  const normalizedPageSizeOptions = useMemo(() => {
+    return pageSizeOptions.map((option) => {
+      if (typeof option === "number") {
+        return {
+          value: option,
+          label: `${option} ${labels.itemsPerPageText}`
+        };
+      }
+      const label = option.label ?? `${option.value} ${labels.itemsPerPageText}`;
+      return { value: option.value, label };
+    });
+  }, [pageSizeOptions, labels.itemsPerPageText]);
   const containerClasses = getPaginationContainerClasses(align, className);
   const elements = [];
   if (showTotal) {
@@ -231,11 +243,7 @@ var Pagination = ({
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
           "aria-label": labels.itemsPerPageText,
-          children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxs("option", { value: sizeOption, children: [
-            sizeOption,
-            " ",
-            labels.itemsPerPageText
-          ] }, sizeOption))
+          children: normalizedPageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsx("option", { value: sizeOption.value, children: sizeOption.label }, sizeOption.value))
         },
         "size-changer"
       )

package/dist/{chunk-2DOPHSZP.js → chunk-OWUGXP6K.js}

@@ -17,15 +17,20 @@ var Breadcrumb = ({
   separator = "/",
   className,
   style,
+  extra,
   children,
   ...props
 }) => {
+  const hasExtra = Boolean(extra);
   const containerClasses = React__default.default.useMemo(
-    () => tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, className),
-    [className]
+    () => tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
   );
   const contextValue = React__default.default.useMemo(() => ({ separator }), [separator]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap gap-2", children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
 };
 
 exports.Breadcrumb = Breadcrumb;

package/dist/chunk-Q2GPRAF4.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Collapse.tsx
+var CollapseContext = react.createContext(null);
+function useCollapseContext() {
+  return react.useContext(CollapseContext);
+}
+var Collapse = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  accordion = false,
+  bordered = true,
+  expandIconPosition = "start",
+  ghost = false,
+  className,
+  style,
+  onChange,
+  children
+}) => {
+  const [internalActiveKeys, setInternalActiveKeys] = react.useState(
+    tigercatCore.normalizeActiveKeys(defaultActiveKey)
+  );
+  const activeKeys = react.useMemo(() => {
+    return controlledActiveKey !== void 0 ? tigercatCore.normalizeActiveKeys(controlledActiveKey) : internalActiveKeys;
+  }, [controlledActiveKey, internalActiveKeys]);
+  const handlePanelClick = react.useCallback(
+    (key) => {
+      const newKeys = tigercatCore.togglePanelKey(key, activeKeys, accordion);
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKeys(newKeys);
+      }
+      if (onChange) {
+        if (accordion) {
+          onChange(newKeys.length > 0 ? newKeys[0] : void 0);
+        } else {
+          onChange(newKeys);
+        }
+      }
+    },
+    [activeKeys, accordion, controlledActiveKey, onChange]
+  );
+  const containerClasses = react.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getCollapseContainerClasses(bordered, ghost, className));
+  }, [bordered, ghost, className]);
+  const contextValue = react.useMemo(
+    () => ({
+      activeKeys,
+      accordion,
+      expandIconPosition,
+      bordered,
+      ghost,
+      handlePanelClick
+    }),
+    [activeKeys, accordion, expandIconPosition, bordered, ghost, handlePanelClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapseContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, role: "region", children }) });
+};
+var Collapse_default = Collapse;
+
+exports.Collapse = Collapse;
+exports.Collapse_default = Collapse_default;
+exports.useCollapseContext = useCollapseContext;

package/dist/{chunk-6PUSRC6S.js → chunk-T3GSXTDU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2DOPHSZP_js = require('./chunk-2DOPHSZP.js');
+var chunkOWUGXP6K_js = require('./chunk-OWUGXP6K.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,7 +17,7 @@ var BreadcrumbItem = ({
   icon,
   ...props
 }) => {
-  const breadcrumbContext = chunk2DOPHSZP_js.useBreadcrumbContext();
+  const breadcrumbContext = chunkOWUGXP6K_js.useBreadcrumbContext();
   const itemClasses = react.useMemo(
     () => tigercatCore.getBreadcrumbItemClasses(current, className),
     [current, className]

package/dist/{chunk-UG3I4PCY.js → chunk-VR5OP4MO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkN32MAX4A_js = require('./chunk-N32MAX4A.js');
+var chunk2VXA4YOP_js = require('./chunk-2VXA4YOP.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -60,7 +60,7 @@ var DonutChart = ({
     return resolvedOuterRadius * ratio;
   }, [innerRadius, innerRadiusRatio, resolvedOuterRadius]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkN32MAX4A_js.PieChart,
+    chunk2VXA4YOP_js.PieChart,
     {
       width,
       height,

package/dist/chunk-X4F6NSI5.mjs

@@ -0,0 +1,104 @@
+import { useCollapseContext } from './chunk-Y6557RWE.mjs';
+import { useMemo, useCallback } from 'react';
+import { isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CollapsePanel = ({
+  panelKey,
+  header,
+  disabled = false,
+  showArrow = true,
+  className,
+  style,
+  extra,
+  children
+}) => {
+  const collapseContext = useCollapseContext();
+  if (!collapseContext) {
+    throw new Error("CollapsePanel must be used within a Collapse component");
+  }
+  const isActive = useMemo(() => {
+    return isPanelActive(panelKey, collapseContext.activeKeys);
+  }, [panelKey, collapseContext.activeKeys]);
+  const panelClasses = useMemo(() => {
+    return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
+  }, [collapseContext.ghost, className]);
+  const headerClasses = useMemo(() => {
+    return getCollapsePanelHeaderClasses(isActive, disabled);
+  }, [isActive, disabled]);
+  const iconClasses = useMemo(() => {
+    return getCollapseIconClasses(isActive, collapseContext.expandIconPosition);
+  }, [isActive, collapseContext.expandIconPosition]);
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      collapseContext.handlePanelClick(panelKey);
+    }
+  }, [disabled, collapseContext, panelKey]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        collapseContext.handlePanelClick(panelKey);
+      }
+    },
+    [disabled, collapseContext, panelKey]
+  );
+  const arrowIcon = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: iconClasses,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 12L10 8L6 4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: panelClasses, style, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: headerClasses,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isActive,
+        "aria-disabled": disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          showArrow && collapseContext.expandIconPosition === "start" && arrowIcon,
+          /* @__PURE__ */ jsx("span", { className: collapseHeaderTextClasses, children: header }),
+          extra && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: extra }),
+          showArrow && collapseContext.expandIconPosition === "end" && arrowIcon
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: collapsePanelContentWrapperClasses,
+        style: {
+          maxHeight: isActive ? "none" : "0",
+          opacity: isActive ? "1" : "0"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: collapsePanelContentBaseClasses, children })
+      }
+    )
+  ] });
+};
+var CollapsePanel_default = CollapsePanel;
+
+export { CollapsePanel, CollapsePanel_default };

package/dist/chunk-Y6557RWE.mjs

@@ -0,0 +1,62 @@
+import { createContext, useContext, useState, useMemo, useCallback } from 'react';
+import { normalizeActiveKeys, togglePanelKey, classNames, getCollapseContainerClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Collapse.tsx
+var CollapseContext = createContext(null);
+function useCollapseContext() {
+  return useContext(CollapseContext);
+}
+var Collapse = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  accordion = false,
+  bordered = true,
+  expandIconPosition = "start",
+  ghost = false,
+  className,
+  style,
+  onChange,
+  children
+}) => {
+  const [internalActiveKeys, setInternalActiveKeys] = useState(
+    normalizeActiveKeys(defaultActiveKey)
+  );
+  const activeKeys = useMemo(() => {
+    return controlledActiveKey !== void 0 ? normalizeActiveKeys(controlledActiveKey) : internalActiveKeys;
+  }, [controlledActiveKey, internalActiveKeys]);
+  const handlePanelClick = useCallback(
+    (key) => {
+      const newKeys = togglePanelKey(key, activeKeys, accordion);
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKeys(newKeys);
+      }
+      if (onChange) {
+        if (accordion) {
+          onChange(newKeys.length > 0 ? newKeys[0] : void 0);
+        } else {
+          onChange(newKeys);
+        }
+      }
+    },
+    [activeKeys, accordion, controlledActiveKey, onChange]
+  );
+  const containerClasses = useMemo(() => {
+    return classNames(getCollapseContainerClasses(bordered, ghost, className));
+  }, [bordered, ghost, className]);
+  const contextValue = useMemo(
+    () => ({
+      activeKeys,
+      accordion,
+      expandIconPosition,
+      bordered,
+      ghost,
+      handlePanelClick
+    }),
+    [activeKeys, accordion, expandIconPosition, bordered, ghost, handlePanelClick]
+  );
+  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, role: "region", children }) });
+};
+var Collapse_default = Collapse;
+
+export { Collapse, Collapse_default, useCollapseContext };