@expcat/tigercat-react 0.0.1

package/dist/chunk-KAEHFMTQ.mjs

@@ -0,0 +1,537 @@
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { getSpinnerSVG, getAllKeys, calculateCheckedState, getVisibleTreeItems, filterTreeNodes, getAutoExpandKeys, findNode, handleNodeCheck, getCheckedKeysByStrategy, getParentKeys, treeNodeCheckboxClasses, treeNodeIconClasses, classNames, treeNodeLabelClasses, treeNodeWrapperClasses, getTreeNodeClasses, treeNodeChildrenClasses, treeLineClasses, treeEmptyStateClasses, treeBaseClasses, treeNodeIndentClasses, getTreeNodeExpandIconClasses, treeLoadingClasses } from '@expcat/tigercat-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/Tree.tsx
+var spinnerSvg = getSpinnerSVG("spinner");
+var ExpandIcon = ({
+  expanded,
+  hasChildren
+}) => {
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx("span", { className: treeNodeIndentClasses });
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getTreeNodeExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4V4z" })
+    }
+  );
+};
+var LoadingSpinner = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: treeLoadingClasses,
+    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 Tree = ({
+  treeData = [],
+  selectionMode,
+  checkable = false,
+  showIcon = true,
+  showLine = false,
+  defaultExpandedKeys = [],
+  defaultSelectedKeys = [],
+  defaultCheckedKeys = [],
+  expandedKeys: controlledExpandedKeys,
+  selectedKeys: controlledSelectedKeys,
+  checkedKeys: controlledCheckedKeys,
+  defaultExpandAll = false,
+  checkStrictly = false,
+  checkStrategy = "all",
+  selectable = true,
+  multiple = false,
+  loadData,
+  filterValue = "",
+  filterFn,
+  autoExpandParent = true,
+  blockNode = false,
+  emptyText = "No data",
+  ariaLabel = "Tree",
+  onExpand,
+  onSelect,
+  onCheck,
+  onNodeClick,
+  onNodeExpand,
+  onNodeCollapse,
+  className
+}) => {
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const effectiveSelectable = useMemo(() => {
+    if (selectionMode !== void 0) {
+      return selectionMode !== "none";
+    }
+    return selectable;
+  }, [selectionMode, selectable]);
+  const effectiveMultiple = useMemo(() => {
+    if (selectionMode !== void 0) {
+      return selectionMode === "multiple";
+    }
+    return multiple;
+  }, [selectionMode, multiple]);
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => {
+    if (controlledExpandedKeys !== void 0) {
+      return new Set(controlledExpandedKeys);
+    }
+    if (defaultExpandAll) {
+      return new Set(getAllKeys(treeData));
+    }
+    if (defaultExpandedKeys && defaultExpandedKeys.length > 0) {
+      return new Set(defaultExpandedKeys);
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(
+    () => new Set(controlledSelectedKeys !== void 0 ? controlledSelectedKeys : defaultSelectedKeys)
+  );
+  const [internalCheckedState, setInternalCheckedState] = useState(() => {
+    if (controlledCheckedKeys !== void 0) {
+      if (Array.isArray(controlledCheckedKeys)) {
+        return calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
+      }
+      return controlledCheckedKeys;
+    }
+    return calculateCheckedState(treeData, defaultCheckedKeys, checkStrictly);
+  });
+  const [loadingNodes, setLoadingNodes] = useState(/* @__PURE__ */ new Set());
+  const [filteredNodeKeys, setFilteredNodeKeys] = useState(/* @__PURE__ */ new Set());
+  const [activeKey, setActiveKey] = useState();
+  const computedExpandedKeys = useMemo(() => {
+    if (controlledExpandedKeys !== void 0) {
+      return new Set(controlledExpandedKeys);
+    }
+    return internalExpandedKeys;
+  }, [controlledExpandedKeys, internalExpandedKeys]);
+  const visibleItems = useMemo(
+    () => getVisibleTreeItems(treeData, computedExpandedKeys, filteredNodeKeys),
+    [treeData, computedExpandedKeys, filteredNodeKeys]
+  );
+  const focusableKeys = useMemo(
+    () => visibleItems.filter((i) => !i.node.disabled).map((i) => i.key),
+    [visibleItems]
+  );
+  const defaultActiveKey = focusableKeys[0];
+  useEffect(() => {
+    if (activeKey === void 0) return;
+    itemRefs.current.get(activeKey)?.focus();
+  }, [activeKey]);
+  const computedSelectedKeys = useMemo(() => {
+    if (controlledSelectedKeys !== void 0) {
+      return new Set(controlledSelectedKeys);
+    }
+    return internalSelectedKeys;
+  }, [controlledSelectedKeys, internalSelectedKeys]);
+  const computedCheckedState = useMemo(() => {
+    if (controlledCheckedKeys !== void 0) {
+      if (Array.isArray(controlledCheckedKeys)) {
+        return calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
+      }
+      return controlledCheckedKeys;
+    }
+    return internalCheckedState;
+  }, [controlledCheckedKeys, internalCheckedState, treeData, checkStrictly]);
+  useEffect(() => {
+    if (filterValue) {
+      const matched = filterTreeNodes(treeData, filterValue, filterFn);
+      setFilteredNodeKeys(matched);
+      if (autoExpandParent) {
+        const autoExpand = getAutoExpandKeys(treeData, matched);
+        if (controlledExpandedKeys === void 0) {
+          setInternalExpandedKeys((prev) => /* @__PURE__ */ new Set([...prev, ...autoExpand]));
+        }
+      }
+    } else {
+      setFilteredNodeKeys(/* @__PURE__ */ new Set());
+    }
+  }, [filterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
+  const handleExpand = useCallback(
+    (nodeKey) => {
+      const node = findNode(treeData, nodeKey);
+      if (!node) return;
+      const newExpandedKeys = new Set(computedExpandedKeys);
+      const isExpanded = newExpandedKeys.has(nodeKey);
+      if (isExpanded) {
+        newExpandedKeys.delete(nodeKey);
+        onNodeCollapse?.(node, nodeKey);
+      } else {
+        newExpandedKeys.add(nodeKey);
+        onNodeExpand?.(node, nodeKey);
+        if (loadData && !node.children && !node.isLeaf && !loadingNodes.has(nodeKey)) {
+          setLoadingNodes((prev) => /* @__PURE__ */ new Set([...prev, nodeKey]));
+          loadData(node).then((children) => {
+            node.children = children;
+            setLoadingNodes((prev) => {
+              const next = new Set(prev);
+              next.delete(nodeKey);
+              return next;
+            });
+          }).catch(() => {
+            setLoadingNodes((prev) => {
+              const next = new Set(prev);
+              next.delete(nodeKey);
+              return next;
+            });
+            newExpandedKeys.delete(nodeKey);
+          });
+        }
+      }
+      if (controlledExpandedKeys === void 0) {
+        setInternalExpandedKeys(newExpandedKeys);
+      }
+      onExpand?.(Array.from(newExpandedKeys), {
+        expanded: !isExpanded,
+        node
+      });
+    },
+    [
+      treeData,
+      computedExpandedKeys,
+      loadData,
+      loadingNodes,
+      controlledExpandedKeys,
+      onExpand,
+      onNodeExpand,
+      onNodeCollapse
+    ]
+  );
+  const handleSelect = useCallback(
+    (nodeKey, event) => {
+      const node = findNode(treeData, nodeKey);
+      if (!node || node.disabled || !effectiveSelectable) return;
+      const newSelectedKeys = new Set(computedSelectedKeys);
+      if (effectiveMultiple) {
+        if (newSelectedKeys.has(nodeKey)) {
+          newSelectedKeys.delete(nodeKey);
+        } else {
+          newSelectedKeys.add(nodeKey);
+        }
+      } else {
+        newSelectedKeys.clear();
+        newSelectedKeys.add(nodeKey);
+      }
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      const selectedKeysArray = Array.from(newSelectedKeys);
+      onSelect?.(selectedKeysArray, {
+        selected: newSelectedKeys.has(nodeKey),
+        selectedNodes: selectedKeysArray.map((k) => findNode(treeData, k)).filter(Boolean),
+        node,
+        event
+      });
+    },
+    [
+      treeData,
+      computedSelectedKeys,
+      effectiveSelectable,
+      effectiveMultiple,
+      controlledSelectedKeys,
+      onSelect
+    ]
+  );
+  const handleCheck = useCallback(
+    (nodeKey, checked) => {
+      const node = findNode(treeData, nodeKey);
+      if (!node || node.disabled) return;
+      const currentCheckedKeys = computedCheckedState.checked;
+      const newCheckedState = handleNodeCheck(
+        treeData,
+        nodeKey,
+        checked,
+        currentCheckedKeys,
+        checkStrictly
+      );
+      if (controlledCheckedKeys === void 0) {
+        setInternalCheckedState(newCheckedState);
+      }
+      const returnKeys = getCheckedKeysByStrategy(newCheckedState, treeData, checkStrategy);
+      onCheck?.(returnKeys, {
+        checked,
+        checkedNodes: newCheckedState.checked.map((k) => findNode(treeData, k)).filter(Boolean),
+        node,
+        checkedNodesPositions: newCheckedState
+      });
+    },
+    [treeData, computedCheckedState, checkStrictly, checkStrategy, controlledCheckedKeys, onCheck]
+  );
+  const handleKeyDown = useCallback(
+    (e, node, isExpanded, isChecked) => {
+      if (node.disabled) return;
+      const currentKey = activeKey ?? defaultActiveKey ?? node.key;
+      const currentIndex = focusableKeys.findIndex((k) => k === currentKey);
+      const isExpandable = !!(node.children && node.children.length > 0) || !!(loadData && !node.isLeaf);
+      const parents = getParentKeys(treeData, node.key);
+      const parentKey = parents[parents.length - 1];
+      const getFirstChildKey = () => {
+        const list = visibleItems;
+        const index = list.findIndex((i) => i.key === node.key);
+        if (index < 0) return void 0;
+        const base = list[index];
+        for (let i = index + 1; i < list.length; i++) {
+          const item = list[i];
+          if (item.level <= base.level) break;
+          if (item.parentKey === node.key && !item.node.disabled) return item.key;
+        }
+        return void 0;
+      };
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[currentIndex + 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[currentIndex - 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[0] ?? currentKey);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[focusableKeys.length - 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (isExpandable && !isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (isExpandable && isExpanded) {
+          setActiveKey(getFirstChildKey() ?? currentKey);
+        }
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (isExpandable && isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (parentKey !== void 0) {
+          setActiveKey(parentKey);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (isExpandable && isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (parentKey !== void 0) {
+          if (computedExpandedKeys.has(parentKey)) {
+            handleExpand(parentKey);
+          }
+          setActiveKey(parentKey);
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (effectiveSelectable) {
+          handleSelect(node.key, e);
+          return;
+        }
+        if (isExpandable) {
+          handleExpand(node.key);
+        }
+        return;
+      }
+      if (e.key === " ") {
+        e.preventDefault();
+        if (checkable) {
+          handleCheck(node.key, !isChecked);
+          return;
+        }
+        if (isExpandable) {
+          handleExpand(node.key);
+        }
+      }
+    },
+    [
+      activeKey,
+      defaultActiveKey,
+      focusableKeys,
+      visibleItems,
+      treeData,
+      loadData,
+      checkable,
+      computedExpandedKeys,
+      effectiveSelectable,
+      handleExpand,
+      handleSelect,
+      handleCheck
+    ]
+  );
+  const handleNodeClickInternal = useCallback(
+    (node, event) => {
+      if (node.disabled) return;
+      onNodeClick?.(node, event);
+    },
+    [onNodeClick]
+  );
+  const renderTreeNode = useCallback(
+    (node, level, _parentKey) => {
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isExpanded = computedExpandedKeys.has(node.key);
+      const isSelected = computedSelectedKeys.has(node.key);
+      const isChecked = computedCheckedState.checked.includes(node.key);
+      const isHalfChecked = computedCheckedState.halfChecked.includes(node.key);
+      const isLoading = loadingNodes.has(node.key);
+      const isFiltered = filteredNodeKeys.size > 0;
+      const isMatched = filteredNodeKeys.has(node.key);
+      const isVisible = !isFiltered || isMatched;
+      const isExpandable = hasChildren || !!(loadData && !node.isLeaf);
+      const isFocusable = !node.disabled && node.key === (activeKey ?? defaultActiveKey);
+      if (!isVisible) {
+        return null;
+      }
+      const indent = [];
+      for (let i = 0; i < level; i++) {
+        indent.push(/* @__PURE__ */ jsx("span", { className: treeNodeIndentClasses }, i));
+      }
+      const nodeContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        indent,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: isExpandable ? "cursor-pointer" : "",
+            onClick: (e) => {
+              e.stopPropagation();
+              if (isExpandable) {
+                setActiveKey(node.key);
+                handleExpand(node.key);
+              }
+            },
+            children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
+          }
+        ),
+        checkable && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": `Select ${node.label}`,
+            className: treeNodeCheckboxClasses,
+            checked: isChecked,
+            ref: (input) => {
+              if (input) {
+                input.indeterminate = isHalfChecked;
+              }
+            },
+            disabled: node.disabled,
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            onChange: (e) => {
+              handleCheck(node.key, e.target.checked);
+            }
+          }
+        ),
+        showIcon && node.icon && /* @__PURE__ */ jsx("span", { className: treeNodeIconClasses, children: node.icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              treeNodeLabelClasses,
+              isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+            ),
+            children: node.label
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(LoadingSpinner, {})
+      ] });
+      return /* @__PURE__ */ jsxs("div", { className: treeNodeWrapperClasses, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
+            ref: (el) => {
+              itemRefs.current.set(node.key, el);
+            },
+            role: "treeitem",
+            "aria-level": level + 1,
+            "aria-disabled": node.disabled || void 0,
+            "aria-selected": effectiveSelectable ? isSelected : void 0,
+            "aria-expanded": isExpandable ? isExpanded : void 0,
+            "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
+            tabIndex: isFocusable ? 0 : -1,
+            onFocus: () => {
+              if (!node.disabled) setActiveKey(node.key);
+            },
+            onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
+            onClick: (e) => {
+              setActiveKey(node.key);
+              handleNodeClickInternal(node, e);
+              if (effectiveSelectable && !node.disabled) {
+                handleSelect(node.key, e);
+              }
+            },
+            children: nodeContent
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: classNames(treeNodeChildrenClasses, showLine && treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1, node.key)) })
+      ] }, node.key);
+    },
+    [
+      computedExpandedKeys,
+      computedSelectedKeys,
+      computedCheckedState,
+      loadingNodes,
+      filteredNodeKeys,
+      activeKey,
+      defaultActiveKey,
+      loadData,
+      checkable,
+      blockNode,
+      effectiveSelectable,
+      showIcon,
+      showLine,
+      handleExpand,
+      handleCheck,
+      handleSelect,
+      handleNodeClickInternal,
+      handleKeyDown
+    ]
+  );
+  if (!treeData || treeData.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(treeBaseClasses, "p-4", className),
+        role: "tree",
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ jsx("div", { className: treeEmptyStateClasses, children: emptyText })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(treeBaseClasses, className),
+      role: "tree",
+      "aria-label": ariaLabel,
+      "aria-multiselectable": effectiveMultiple || void 0,
+      children: treeData.map((node) => renderTreeNode(node, 0))
+    }
+  );
+};
+var Tree_default = Tree;
+
+export { Tree, Tree_default };

package/dist/chunk-KMQOLVWP.mjs

@@ -0,0 +1,65 @@
+import { getSpinnerSVG, classNames, buttonBaseClasses, getButtonVariantClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Button.tsx
+var spinnerSvg = getSpinnerSVG("spinner");
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  ...props
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = props["aria-busy"] ?? (loading ? true : void 0);
+  const ariaDisabled = props["aria-disabled"] ?? (isDisabled ? true : void 0);
+  const buttonClasses = classNames(
+    buttonBaseClasses,
+    getButtonVariantClasses(variant),
+    buttonSizeClasses[size],
+    isDisabled && buttonDisabledClasses,
+    block && "w-full",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: (event) => {
+        if (isDisabled) return;
+        onClick?.(event);
+      },
+      type,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "mr-2", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "animate-spin h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: spinnerSvg.viewBox,
+            "aria-hidden": "true",
+            focusable: "false",
+            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;
+            })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+};
+
+export { Button };

package/dist/chunk-KUCFT2OA.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var chunkEI2GHMQS_js = require('./chunk-EI2GHMQS.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Col = ({
+  span = 24,
+  offset = 0,
+  order,
+  flex,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const { gutter } = react.useContext(chunkEI2GHMQS_js.RowContext);
+  const { colStyle } = tigercatCore.getGutterStyles(gutter || 0);
+  const isFlexSpanMode = flex !== void 0 && span === 0;
+  const colStyleVars = tigercatCore.getColStyleVars(isFlexSpanMode ? void 0 : span, offset);
+  const colOrderVars = tigercatCore.getColOrderStyleVars(order);
+  const colFlexVar = flex === void 0 ? {} : {
+    "--tiger-col-flex": String(flex).replace(/_/g, " ")
+  };
+  const colClasses = tigercatCore.classNames(
+    isFlexSpanMode ? "" : tigercatCore.getSpanClasses(span),
+    tigercatCore.getOffsetClasses(offset),
+    tigercatCore.getOrderClasses(order),
+    tigercatCore.getFlexClasses(flex),
+    className
+  );
+  const mergedStyle = {
+    ...colStyle,
+    ...colStyleVars,
+    ...colOrderVars,
+    ...colFlexVar,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
+};
+
+exports.Col = Col;