@expcat/tigercat-react 0.0.1

package/dist/chunk-6MGEGOYJ.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Loading.tsx
+var Loading = ({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  text,
+  fullscreen = false,
+  delay = 0,
+  background = "rgba(255, 255, 255, 0.9)",
+  customColor,
+  className = "",
+  style,
+  ...props
+}) => {
+  react.useEffect(() => {
+    tigercatCore.injectLoadingAnimationStyles();
+  }, []);
+  const [visible, setVisible] = react.useState(delay === 0);
+  react.useEffect(() => {
+    if (delay > 0) {
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, delay);
+      return () => clearTimeout(timer);
+    }
+  }, [delay]);
+  const spinnerClasses = tigercatCore.getLoadingClasses(variant, size, color, customColor);
+  const textClasses = tigercatCore.getLoadingTextClasses(size, color, customColor);
+  const containerClasses = tigercatCore.classNames(
+    fullscreen ? tigercatCore.loadingFullscreenBaseClasses : tigercatCore.loadingContainerBaseClasses,
+    className
+  );
+  const mergedStyle = {
+    ...customColor ? { color: customColor } : null,
+    ...fullscreen ? { backgroundColor: background } : null,
+    ...style
+  };
+  const renderSpinner = () => {
+    const svg = tigercatCore.getSpinnerSVG(variant);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: spinnerClasses,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: svg.viewBox,
+        children: svg.elements.map((el, index) => {
+          if (el.type === "circle") {
+            return /* @__PURE__ */ jsxRuntime.jsx("circle", { ...el.attrs }, index);
+          } else if (el.type === "path") {
+            return /* @__PURE__ */ jsxRuntime.jsx("path", { ...el.attrs }, index);
+          }
+          return null;
+        })
+      }
+    );
+  };
+  const renderDots = () => {
+    const colorClass = customColor ? "" : tigercatCore.loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLoadingDotsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLoadingDotClasses(size, i, colorClass) }, i)) });
+  };
+  const renderBars = () => {
+    const colorClass = customColor ? "" : tigercatCore.loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLoadingBarsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLoadingBarClasses(size, i, colorClass) }, i)) });
+  };
+  const renderIndicator = () => {
+    switch (variant) {
+      case "dots":
+        return renderDots();
+      case "bars":
+        return renderBars();
+      case "spinner":
+      case "ring":
+      case "pulse":
+      default:
+        return renderSpinner();
+    }
+  };
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: containerClasses,
+      style: mergedStyle,
+      role: "status",
+      "aria-label": text || "Loading",
+      "aria-live": "polite",
+      "aria-busy": true,
+      ...props,
+      children: [
+        renderIndicator(),
+        text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: textClasses, children: text })
+      ]
+    }
+  );
+};
+
+exports.Loading = Loading;

package/dist/chunk-6PUSRC6S.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var chunk2DOPHSZP_js = require('./chunk-2DOPHSZP.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BreadcrumbItem = ({
+  href,
+  target,
+  current = false,
+  separator: customSeparator,
+  className,
+  style,
+  onClick,
+  children,
+  icon,
+  ...props
+}) => {
+  const breadcrumbContext = chunk2DOPHSZP_js.useBreadcrumbContext();
+  const itemClasses = react.useMemo(
+    () => tigercatCore.getBreadcrumbItemClasses(current, className),
+    [current, className]
+  );
+  const linkClasses = react.useMemo(() => tigercatCore.getBreadcrumbLinkClasses(current), [current]);
+  const separatorClasses = react.useMemo(() => tigercatCore.getBreadcrumbSeparatorClasses(), []);
+  const separatorContent = react.useMemo(() => {
+    const sep = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
+    return tigercatCore.getSeparatorContent(sep);
+  }, [customSeparator, breadcrumbContext]);
+  const handleClick = react.useCallback(
+    (event) => {
+      if (!current) {
+        onClick?.(event);
+      }
+    },
+    [current, onClick]
+  );
+  const computedRel = react.useMemo(() => {
+    if (target === "_blank") {
+      return "noopener noreferrer";
+    }
+    return void 0;
+  }, [target]);
+  const contentElements = icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: icon }),
+    children
+  ] }) : children;
+  const linkElement = href && !current ? /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      className: linkClasses,
+      href,
+      target,
+      rel: computedRel,
+      "aria-current": current ? "page" : void 0,
+      onClick: handleClick,
+      children: contentElements
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: linkClasses, "aria-current": current ? "page" : void 0, children: contentElements });
+  const separatorElement = !current ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClasses, "aria-hidden": "true", children: separatorContent }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClasses, style, ...props, children: [
+    linkElement,
+    separatorElement
+  ] });
+};
+
+exports.BreadcrumbItem = BreadcrumbItem;

package/dist/chunk-6YDIBMCM.mjs

@@ -0,0 +1,33 @@
+import React from 'react';
+import { classNames, textSizeClasses, textWeightClasses, textAlignClasses, textColorClasses, textDecorationClasses } from '@expcat/tigercat-core';
+
+// src/components/Text.tsx
+var Text = ({
+  tag = "p",
+  size = "base",
+  weight = "normal",
+  align,
+  color = "default",
+  truncate = false,
+  italic = false,
+  underline = false,
+  lineThrough = false,
+  children,
+  className,
+  ...props
+}) => {
+  const textClasses = classNames(
+    textSizeClasses[size],
+    textWeightClasses[weight],
+    align && textAlignClasses[align],
+    textColorClasses[color],
+    truncate && textDecorationClasses.truncate,
+    italic && textDecorationClasses.italic,
+    underline && textDecorationClasses.underline,
+    lineThrough && textDecorationClasses.lineThrough,
+    className
+  );
+  return React.createElement(tag, { ...props, className: textClasses }, children);
+};
+
+export { Text };

package/dist/chunk-72ZRDBXN.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Container.tsx
+var Container = ({
+  maxWidth = false,
+  center = true,
+  padding = true,
+  children,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const containerClasses = tigercatCore.getContainerClasses({
+    maxWidth,
+    center,
+    padding,
+    className
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, className: containerClasses, children });
+};
+
+exports.Container = Container;

package/dist/chunk-77D7VQMG.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var chunkLNKI6HQ3_js = require('./chunk-LNKI6HQ3.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = react.useContext(chunkLNKI6HQ3_js.DropdownContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (context?.closeOnClick) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = tigercatCore.classNames(tigercatCore.getDropdownItemClasses(disabled, divided), className);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
+
+exports.DropdownItem = DropdownItem;

package/dist/chunk-7CAJK2ZK.mjs

@@ -0,0 +1,54 @@
+import { classNames, getSwitchClasses, getSwitchThumbClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Switch.tsx
+var Switch = ({
+  checked = false,
+  disabled = false,
+  size = "md",
+  onChange,
+  className,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  ...props
+}) => {
+  const switchClasses = classNames(getSwitchClasses(size, checked, disabled), className);
+  const thumbClasses = getSwitchThumbClasses(size, checked);
+  const toggle = () => {
+    if (disabled) return;
+    onChange?.(!checked);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    toggle();
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: switchClasses,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      children: /* @__PURE__ */ jsx("span", { className: thumbClasses, "aria-hidden": "true" })
+    }
+  );
+};
+
+export { Switch };

package/dist/chunk-7JQ7LURS.mjs

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import { classNames, breadcrumbContainerClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Breadcrumb.tsx
+var BreadcrumbContext = createContext(null);
+function useBreadcrumbContext() {
+  return useContext(BreadcrumbContext);
+}
+var Breadcrumb = ({
+  separator = "/",
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const containerClasses = React.useMemo(
+    () => classNames(breadcrumbContainerClasses, className),
+    [className]
+  );
+  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 }) }) });
+};
+
+export { Breadcrumb, useBreadcrumbContext };

package/dist/chunk-7KRBDT2Z.mjs

@@ -0,0 +1,269 @@
+import { Select } from './chunk-YYKJ63LD.mjs';
+import { Button } from './chunk-KMQOLVWP.mjs';
+import { useState, useMemo } from 'react';
+import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, listLoadingOverlayClasses, getListHeaderFooterClasses, listEmptyStateClasses, listPaginationContainerClasses, getLoadingOverlaySpinnerClasses, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var spinnerSvg = getSpinnerSVG("spinner");
+var LoadingSpinner = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: getLoadingOverlaySpinnerClasses(),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    children: spinnerSvg.elements.map((el, index) => {
+      if (el.type === "circle") return /* @__PURE__ */ jsx("circle", { ...el.attrs }, index);
+      if (el.type === "path") return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
+      return null;
+    })
+  }
+);
+var List = ({
+  dataSource = [],
+  size = "md",
+  bordered = "divided",
+  loading = false,
+  emptyText = "No data",
+  split = true,
+  itemLayout = "horizontal",
+  header,
+  footer,
+  pagination = false,
+  grid,
+  rowKey = "key",
+  hoverable = false,
+  renderItem,
+  onItemClick,
+  onPageChange,
+  className,
+  ...divProps
+}) => {
+  const [currentPage, setCurrentPage] = useState(
+    pagination && typeof pagination === "object" ? pagination.current || 1 : 1
+  );
+  const [currentPageSize, setCurrentPageSize] = useState(
+    pagination && typeof pagination === "object" ? pagination.pageSize || 10 : 10
+  );
+  const paginatedData = useMemo(() => {
+    if (pagination === false) {
+      return dataSource;
+    }
+    return paginateData(dataSource, currentPage, currentPageSize);
+  }, [dataSource, currentPage, currentPageSize, pagination]);
+  const paginationInfo = useMemo(() => {
+    if (pagination === false) {
+      return null;
+    }
+    const total = dataSource.length;
+    return calculatePagination(total, currentPage, currentPageSize);
+  }, [dataSource.length, currentPage, currentPageSize, pagination]);
+  const listClasses = useMemo(() => {
+    return classNames(getListClasses(bordered), listSizeClasses[size], className);
+  }, [bordered, size, className]);
+  const gridClasses = useMemo(() => {
+    if (!grid) return "";
+    return classNames(
+      listGridContainerClasses,
+      getGridColumnClasses(grid.column, grid.xs, grid.sm, grid.md, grid.lg, grid.xl, grid.xxl)
+    );
+  }, [grid]);
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+    onPageChange?.({ current: page, pageSize: currentPageSize });
+  };
+  const handlePageSizeChange = (pageSize) => {
+    setCurrentPageSize(pageSize);
+    setCurrentPage(1);
+    onPageChange?.({ current: 1, pageSize });
+  };
+  const handleItemClick = (item, index) => {
+    onItemClick?.(item, index);
+  };
+  const getItemKey = (item, index) => {
+    if (typeof rowKey === "function") {
+      return rowKey(item, index);
+    }
+    return item[rowKey] || index;
+  };
+  const renderListHeader = () => {
+    if (!header) return null;
+    return /* @__PURE__ */ jsx("div", { className: getListHeaderFooterClasses(size, false), children: header });
+  };
+  const renderListFooter = () => {
+    if (!footer) return null;
+    return /* @__PURE__ */ jsx("div", { className: getListHeaderFooterClasses(size, true), children: footer });
+  };
+  const renderDefaultListItem = (item, _index) => {
+    const itemContent = [];
+    const metaContent = [];
+    if (item.avatar) {
+      metaContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemAvatarClasses, children: typeof item.avatar === "string" ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.avatar,
+            alt: item.title || "Avatar",
+            className: "w-10 h-10 rounded-full object-cover"
+          }
+        ) : item.avatar }, "avatar")
+      );
+    }
+    const contentChildren = [];
+    if (item.title) {
+      contentChildren.push(
+        /* @__PURE__ */ jsx("div", { className: listItemTitleClasses, children: item.title }, "title")
+      );
+    }
+    if (item.description) {
+      contentChildren.push(
+        /* @__PURE__ */ jsx("div", { className: listItemDescriptionClasses, children: item.description }, "description")
+      );
+    }
+    if (contentChildren.length > 0) {
+      metaContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemContentClasses, children: contentChildren }, "content")
+      );
+    }
+    if (metaContent.length > 0) {
+      itemContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemMetaClasses, children: metaContent }, "meta")
+      );
+    }
+    if (item.extra) {
+      itemContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemExtraClasses, children: item.extra }, "extra")
+      );
+    }
+    return itemContent;
+  };
+  const renderListItem = (item, index) => {
+    const key = getItemKey(item, index);
+    const itemClasses = getListItemClasses(
+      size,
+      itemLayout,
+      split && bordered === "divided" && !grid,
+      hoverable
+    );
+    const clickable = typeof onItemClick === "function";
+    const handleClick = clickable ? () => handleItemClick(item, index) : void 0;
+    const handleKeyDown = clickable ? (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleItemClick(item, index);
+      }
+    } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(itemClasses, clickable && "cursor-pointer"),
+        role: "listitem",
+        tabIndex: clickable ? 0 : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: renderItem ? renderItem(item, index) : renderDefaultListItem(item)
+      },
+      key
+    );
+  };
+  const renderListItems = () => {
+    if (loading) {
+      return null;
+    }
+    if (paginatedData.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: listEmptyStateClasses, role: "status", "aria-live": "polite", children: emptyText });
+    }
+    const items = paginatedData.map((item, index) => renderListItem(item, index));
+    if (grid) {
+      const gutter = grid.gutter;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: gridClasses,
+          style: gutter ? { gap: `${gutter}px` } : void 0,
+          children: items
+        }
+      );
+    }
+    return items;
+  };
+  const renderPagination = () => {
+    if (pagination === false || !paginationInfo) {
+      return null;
+    }
+    const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo;
+    const total = dataSource.length;
+    const paginationConfig = pagination;
+    return /* @__PURE__ */ jsxs("div", { className: listPaginationContainerClasses, children: [
+      paginationConfig.showTotal !== false && /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--tiger-text,#111827)]", children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items` }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        paginationConfig.showSizeChanger !== false && /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            value: currentPageSize,
+            onChange: (value) => {
+              if (value == null) return;
+              const nextSize = typeof value === "number" ? value : Number(value);
+              if (!Number.isFinite(nextSize)) return;
+              handlePageSizeChange(nextSize);
+            },
+            options: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => ({
+              label: `${size2} / page`,
+              value: size2
+            }))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              disabled: !hasPrev,
+              onClick: () => handlePageChange(currentPage - 1),
+              className: classNames(
+                !hasPrev && "cursor-not-allowed",
+                hasPrev && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+              ),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "px-3 py-1 text-sm text-[var(--tiger-text,#111827)]", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              disabled: !hasNext,
+              onClick: () => handlePageChange(currentPage + 1),
+              className: classNames(
+                !hasNext && "cursor-not-allowed",
+                hasNext && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+              ),
+              children: "Next"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: listWrapperClasses, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { ...divProps, className: listClasses, role: "list", "aria-busy": loading || void 0, children: [
+        renderListHeader(),
+        renderListItems(),
+        renderListFooter()
+      ] }),
+      loading && /* @__PURE__ */ jsx("div", { className: listLoadingOverlayClasses, role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) })
+    ] }),
+    renderPagination()
+  ] });
+};
+
+export { List };

package/dist/chunk-7O2OQKVY.mjs

@@ -0,0 +1,10 @@
+import { classNames, layoutRootClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Layout.tsx
+var Layout = ({ className, children, ...props }) => {
+  const layoutClasses = classNames(layoutRootClasses, className);
+  return /* @__PURE__ */ jsx("div", { className: layoutClasses, ...props, children });
+};
+
+export { Layout };