@expcat/tigercat-react 0.2.0 → 0.2.27

package/README.md

@@ -0,0 +1,59 @@
+# @expcat/tigercat-react
+
+[![npm version](https://img.shields.io/npm/v/@expcat/tigercat-react.svg)](https://www.npmjs.com/package/@expcat/tigercat-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+React UI components for [Tigercat](https://github.com/expcats/Tigercat) - A Tailwind CSS based component library.
+
+## 📖 Documentation
+
+**[Live Demo & Docs →](https://expcat.github.io/Tigercat/react/)**
+
+## Installation
+
+```bash
+pnpm add @expcat/tigercat-react
+# or
+npm install @expcat/tigercat-react
+```
+
+**Requirements:** React ≥19, Tailwind CSS ≥3.4
+
+## Quick Start
+
+```tsx
+import { ConfigProvider, Button } from '@expcat/tigercat-react'
+
+function App() {
+  return (
+    <ConfigProvider>
+      <Button variant="primary">Click me</Button>
+    </ConfigProvider>
+  )
+}
+```
+
+## Components
+
+| Category       | Components                                                                            |
+| -------------- | ------------------------------------------------------------------------------------- |
+| **Basic**      | Alert, Avatar, Badge, Button, Code, Divider, Icon, Link, Tag, Text                    |
+| **Form**       | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, Upload, Form  |
+| **Layout**     | Card, Container, Grid (Row/Col), Layout, List, Descriptions, Skeleton, Space          |
+| **Navigation** | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree                             |
+| **Feedback**   | Modal, Drawer, Message, Notification, Loading, Popconfirm, Popover, Tooltip, Progress |
+| **Data**       | Table, Timeline                                                                       |
+| **Charts**     | BarChart, LineChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart        |
+
+## Hooks
+
+- `useChartInteraction` - Chart interaction utilities
+- `useFormContext` - Form state management
+- `useMenuContext` - Menu state access
+- `useTabsContext` - Tabs state access
+- `useBreadcrumbContext` - Breadcrumb navigation
+- `useStepsContext` - Steps state access
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-6DYS4PJT.mjs → chunk-2UVQIL26.mjs}

@@ -1,4 +1,4 @@
-import { PieChart } from './chunk-LZNG2HGC.mjs';
+import { PieChart } from './chunk-E6GLWHRL.mjs';
 import { useMemo } from 'react';
 import { getChartInnerRect, classNames } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';

package/dist/chunk-4MMT4EJJ.mjs

@@ -0,0 +1,78 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { getScrollTop, scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, backTopIconPath } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/BackTop.tsx
+var DefaultIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-5 w-5",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: backTopIconPath })
+  }
+);
+var BackTop = ({
+  visibilityHeight = 400,
+  target = () => window,
+  duration = 450,
+  onClick,
+  children,
+  className,
+  "aria-label": ariaLabel = "Back to top",
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const handleScroll = useCallback(() => {
+    const targetElement = target();
+    if (!targetElement) return;
+    const scrollTop = getScrollTop(targetElement);
+    setVisible(scrollTop >= visibilityHeight);
+  }, [target, visibilityHeight]);
+  const handleClick = useCallback(
+    (event) => {
+      const targetElement = target();
+      if (targetElement) {
+        scrollToTop(targetElement, duration);
+      }
+      onClick?.(event);
+    },
+    [target, duration, onClick]
+  );
+  useEffect(() => {
+    const targetElement = target();
+    if (!targetElement) return;
+    targetElement.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      targetElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [target, handleScroll]);
+  const buttonClasses = useMemo(() => {
+    const targetElement = target();
+    const positionClasses = !targetElement || targetElement === window ? backTopButtonClasses : backTopContainerClasses;
+    return classNames(
+      positionClasses,
+      visible ? backTopVisibleClasses : backTopHiddenClasses,
+      className
+    );
+  }, [target, visible, className]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: buttonClasses,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children || /* @__PURE__ */ jsx(DefaultIcon, {})
+    }
+  );
+};
+var BackTop_default = BackTop;
+
+export { BackTop, BackTop_default };

package/dist/chunk-67EK62HG.mjs

@@ -0,0 +1,65 @@
+import { useAnchorContext } from './chunk-YIF5VX7K.mjs';
+import React, { useEffect, useMemo } from 'react';
+import { classNames, getAnchorLinkClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  ...props
+}) => {
+  const anchorContext = useAnchorContext();
+  useEffect(() => {
+    anchorContext?.registerLink(href);
+    return () => {
+      anchorContext?.unregisterLink(href);
+    };
+  }, [href, anchorContext]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    anchorContext?.handleLinkClick(href, event);
+  };
+  const linkClasses = useMemo(() => {
+    const isActive = anchorContext?.activeLink === href;
+    return classNames(getAnchorLinkClasses(isActive, className));
+  }, [anchorContext?.activeLink, href, className]);
+  const hasNestedLinks = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === AnchorLink
+  );
+  if (hasNestedLinks) {
+    return /* @__PURE__ */ jsxs("div", { className: "anchor-link-wrapper", children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target,
+          className: linkClasses,
+          "data-anchor-href": href,
+          onClick: handleClick,
+          ...props,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "pl-3 mt-1 space-y-1", children })
+    ] });
+  }
+  const content = children ?? title;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      onClick: handleClick,
+      ...props,
+      children: content
+    }
+  );
+};
+var AnchorLink_default = AnchorLink;
+
+export { AnchorLink, AnchorLink_default };

package/dist/{chunk-VXHBQTZS.js → chunk-GY6D4XS3.js}

@@ -98,6 +98,18 @@ var Pagination = ({
     },
     [handleQuickJumperSubmit]
   );
+  const normalizedPageSizeOptions = react.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 = tigercatCore.getPaginationContainerClasses(align, className);
   const elements = [];
   if (showTotal) {
@@ -233,11 +245,7 @@ var Pagination = ({
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
           "aria-label": labels.itemsPerPageText,
-          children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: sizeOption, children: [
-            sizeOption,
-            " ",
-            labels.itemsPerPageText
-          ] }, sizeOption))
+          children: normalizedPageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: sizeOption.value, children: sizeOption.label }, sizeOption.value))
         },
         "size-changer"
       )

package/dist/chunk-GZPMLPRW.js

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

package/dist/{chunk-7JQ7LURS.mjs → chunk-H36CWHUP.mjs}

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { classNames, breadcrumbContainerClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Breadcrumb.tsx
 var BreadcrumbContext = createContext(null);
@@ -11,15 +11,20 @@ var Breadcrumb = ({
   separator = "/",
   className,
   style,
+  extra,
   children,
   ...props
 }) => {
+  const hasExtra = Boolean(extra);
   const containerClasses = React.useMemo(
-    () => classNames(breadcrumbContainerClasses, className),
-    [className]
+    () => classNames(breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
   );
   const contextValue = React.useMemo(() => ({ separator }), [separator]);
-  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children }) }) });
+  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
 };
 
 export { Breadcrumb, useBreadcrumbContext };

package/dist/chunk-HUZVBDHV.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/BackTop.tsx
+var DefaultIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-5 w-5",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: tigercatCore.backTopIconPath })
+  }
+);
+var BackTop = ({
+  visibilityHeight = 400,
+  target = () => window,
+  duration = 450,
+  onClick,
+  children,
+  className,
+  "aria-label": ariaLabel = "Back to top",
+  ...props
+}) => {
+  const [visible, setVisible] = react.useState(false);
+  const handleScroll = react.useCallback(() => {
+    const targetElement = target();
+    if (!targetElement) return;
+    const scrollTop = tigercatCore.getScrollTop(targetElement);
+    setVisible(scrollTop >= visibilityHeight);
+  }, [target, visibilityHeight]);
+  const handleClick = react.useCallback(
+    (event) => {
+      const targetElement = target();
+      if (targetElement) {
+        tigercatCore.scrollToTop(targetElement, duration);
+      }
+      onClick?.(event);
+    },
+    [target, duration, onClick]
+  );
+  react.useEffect(() => {
+    const targetElement = target();
+    if (!targetElement) return;
+    targetElement.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      targetElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [target, handleScroll]);
+  const buttonClasses = react.useMemo(() => {
+    const targetElement = target();
+    const positionClasses = !targetElement || targetElement === window ? tigercatCore.backTopButtonClasses : tigercatCore.backTopContainerClasses;
+    return tigercatCore.classNames(
+      positionClasses,
+      visible ? tigercatCore.backTopVisibleClasses : tigercatCore.backTopHiddenClasses,
+      className
+    );
+  }, [target, visible, className]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: buttonClasses,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children || /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
+    }
+  );
+};
+var BackTop_default = BackTop;
+
+exports.BackTop = BackTop;
+exports.BackTop_default = BackTop_default;