@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/{chunk-SW4I4X6E.mjs → chunk-HUCBHFSL.mjs}

@@ -24,9 +24,10 @@ var CloseIcon = () => /* @__PURE__ */ jsx(
   }
 );
 var Drawer = ({
-  visible = false,
+  open = false,
   placement = "right",
   size = "md",
+  width,
   title,
   header,
   closable = true,
@@ -46,11 +47,11 @@ var Drawer = ({
   style,
   ...rest
 }) => {
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(visible);
+  const [hasBeenOpened, setHasBeenOpened] = React.useState(open);
   useEffect(() => {
-    if (visible) setHasBeenOpened(true);
-  }, [visible]);
-  const shouldRender = destroyOnClose ? visible : hasBeenOpened;
+    if (open) setHasBeenOpened(true);
+  }, [open]);
+  const shouldRender = destroyOnClose ? open : hasBeenOpened;
   const handleClose = useCallback(() => {
     onClose?.();
   }, [onClose]);
@@ -63,20 +64,20 @@ var Drawer = ({
     },
     [maskClosable, handleClose]
   );
-  useEscapeKey({ enabled: visible, onEscape: handleClose });
+  useEscapeKey({ enabled: open, onEscape: handleClose });
   const previousVisible = useRef(false);
   useEffect(() => {
-    if (visible === previousVisible.current) return;
-    previousVisible.current = visible;
+    if (open === previousVisible.current) return;
+    previousVisible.current = open;
     const timer = window.setTimeout(() => {
-      if (visible) {
+      if (open) {
         onAfterEnter?.();
       } else {
         onAfterLeave?.();
       }
     }, ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
-  }, [visible, onAfterEnter, onAfterLeave]);
+  }, [open, onAfterEnter, onAfterLeave]);
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
@@ -97,7 +98,7 @@ var Drawer = ({
     locale?.common?.closeText
   );
   useEffect(() => {
-    if (visible) {
+    if (open) {
       previousActiveElementRef.current = captureActiveElement();
       const timer = window.setTimeout(() => {
         focusFirst([closeButtonRef.current, dialogRef.current]);
@@ -105,7 +106,7 @@ var Drawer = ({
       return () => window.clearTimeout(timer);
     }
     restoreFocus(previousActiveElementRef.current);
-  }, [visible]);
+  }, [open]);
   const handleKeyDown = useCallback((event) => {
     if (event.key === "Tab" && dialogRef.current) {
       const focusables = getFocusableElements(dialogRef.current);
@@ -116,13 +117,10 @@ var Drawer = ({
       }
     }
   }, []);
-  const containerClasses = classNames(
-    getDrawerContainerClasses(),
-    !visible && "pointer-events-none"
-  );
-  const maskClasses = getDrawerMaskClasses(visible);
+  const containerClasses = classNames(getDrawerContainerClasses(), !open && "pointer-events-none");
+  const maskClasses = getDrawerMaskClasses(open);
   const panelClasses = classNames(
-    getDrawerPanelClasses(placement, visible, size),
+    getDrawerPanelClasses(placement, open, size),
     "flex flex-col",
     className
   );
@@ -139,8 +137,8 @@ var Drawer = ({
     {
       className: containerClasses,
       style: { zIndex },
-      hidden: !visible,
-      "aria-hidden": !visible ? "true" : void 0,
+      hidden: !open,
+      "aria-hidden": !open ? "true" : void 0,
       "data-tiger-drawer-root": "",
       children: [
         mask && /* @__PURE__ */ jsx(
@@ -156,7 +154,12 @@ var Drawer = ({
           "div",
           {
             className: panelClasses,
-            style,
+            style: {
+              ...style,
+              ...width ? {
+                [placement === "left" || placement === "right" ? "width" : "height"]: typeof width === "number" ? `${width}px` : width
+              } : void 0
+            },
             ...dialogDivProps,
             role: "dialog",
             "aria-modal": "true",

package/dist/{chunk-Q57BYUUW.js → chunk-HWWNBCFB.js}

@@ -1,9 +1,13 @@
 'use strict';
 
-var react = require('react');
+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/List.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
@@ -38,31 +42,34 @@ var List = ({
   onItemClick,
   onPageChange,
   className,
+  draggable: isDraggable = false,
+  onReorder,
   ...divProps
 }) => {
-  const [currentPage, setCurrentPage] = react.useState(
+  const [currentPage, setCurrentPage] = React.useState(
     pagination && typeof pagination === "object" ? pagination.current || 1 : 1
   );
-  const [currentPageSize, setCurrentPageSize] = react.useState(
+  const dragIndexRef = React__default.default.useRef(null);
+  const [currentPageSize, setCurrentPageSize] = React.useState(
     pagination && typeof pagination === "object" ? pagination.pageSize || 10 : 10
   );
-  const paginatedData = react.useMemo(() => {
+  const paginatedData = React.useMemo(() => {
     if (pagination === false) {
       return dataSource;
     }
     return tigercatCore.paginateData(dataSource, currentPage, currentPageSize);
   }, [dataSource, currentPage, currentPageSize, pagination]);
-  const paginationInfo = react.useMemo(() => {
+  const paginationInfo = React.useMemo(() => {
     if (pagination === false) {
       return null;
     }
     const total = dataSource.length;
     return tigercatCore.calculatePagination(total, currentPage, currentPageSize);
   }, [dataSource.length, currentPage, currentPageSize, pagination]);
-  const listClasses = react.useMemo(() => {
+  const listClasses = React.useMemo(() => {
     return tigercatCore.classNames(tigercatCore.getListClasses(bordered), tigercatCore.listSizeClasses[size], className);
   }, [bordered, size, className]);
-  const gridClasses = react.useMemo(() => {
+  const gridClasses = React.useMemo(() => {
     if (!grid) return "";
     return tigercatCore.classNames(
       tigercatCore.listGridContainerClasses,
@@ -157,11 +164,35 @@ var List = ({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: tigercatCore.classNames(itemClasses, clickable && "cursor-pointer"),
+        className: tigercatCore.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

package/dist/{chunk-MDZDPGRK.mjs → chunk-HZ5Z5Y2J.mjs}

@@ -14,6 +14,7 @@ var Select = (props) => {
     clearable = true,
     noOptionsText = "No options found",
     noDataText = "No options available",
+    maxTagCount,
     onSearch,
     className
   } = props;
@@ -26,6 +27,9 @@ var Select = (props) => {
     "clearable",
     "noOptionsText",
     "noDataText",
+    "maxTagCount",
+    "virtual",
+    "listHeight",
     "onSearch",
     "className",
     "value",
@@ -57,12 +61,17 @@ var Select = (props) => {
     if (isMultipleSelect(props)) {
       const value2 = props.value ?? [];
       if (value2.length === 0) return placeholder;
-      return allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label).join(", ");
+      const labels = allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label);
+      if (maxTagCount !== void 0 && labels.length > maxTagCount) {
+        const visible = labels.slice(0, maxTagCount);
+        return `${visible.join(", ")} +${labels.length - maxTagCount}`;
+      }
+      return labels.join(", ");
     }
     const value = props.value;
     if (value === void 0 || value === null || value === "") return placeholder;
     return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [props.multiple, props.value, allOptions, placeholder]);
+  }, [props.multiple, props.value, allOptions, placeholder, maxTagCount]);
   const showClearButton = useMemo(
     () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
     [clearable, disabled, props.value]
@@ -411,6 +420,7 @@ var Select = (props) => {
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
         "aria-controls": listboxId,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : void 0,
         children: [
           /* @__PURE__ */ jsx(
             "span",
@@ -423,16 +433,25 @@ var Select = (props) => {
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-            showClearButton && /* @__PURE__ */ jsx("span", { className: "inline-flex", "data-tiger-select-clear": true, onClick: clearSelection, children: /* @__PURE__ */ jsx(
-              "svg",
+            showClearButton && /* @__PURE__ */ jsx(
+              "span",
               {
-                className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: icon20ViewBox,
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+                className: "inline-flex",
+                "data-tiger-select-clear": true,
+                "aria-label": "Clear selection",
+                onClick: clearSelection,
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: icon20ViewBox,
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx("span", { className: classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsx(
               "svg",
               {

package/dist/chunk-HZHFFVP7.mjs

@@ -0,0 +1,63 @@
+import { classNames, getStepperButtonClasses, getStepperInputClasses, stepperBaseClasses, clampStepperValue, stepperIconViewBox, minusPathD, plusPathD } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Stepper.tsx
+var Stepper = ({
+  value = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  size = "md",
+  precision,
+  className,
+  onChange
+}) => {
+  function setValue(v) {
+    const clamped = clampStepperValue(v, min, max, precision);
+    onChange?.(clamped);
+  }
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMin, "left"),
+        disabled: disabled || atMin,
+        "aria-label": "Decrease",
+        onClick: () => setValue(value - step),
+        children: icon(minusPathD)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: getStepperInputClasses(size),
+        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        disabled,
+        "aria-label": "Value",
+        onChange: (e) => {
+          const val = Number(e.target.value);
+          if (!Number.isNaN(val)) setValue(val);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMax, "right"),
+        disabled: disabled || atMax,
+        "aria-label": "Increase",
+        onClick: () => setValue(value + step),
+        children: icon(plusPathD)
+      }
+    )
+  ] });
+};
+
+export { Stepper };

package/dist/chunk-I3CDTF4U.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/InputGroup.tsx
+var InputGroupContext = react.createContext(null);
+function useInputGroupContext() {
+  return react.useContext(InputGroupContext);
+}
+var InputGroup = ({
+  size = "md",
+  compact = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = react.useMemo(() => ({ size, compact }), [size, compact]);
+  const groupClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getInputGroupClasses(compact, className)),
+    [compact, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+var InputGroupAddon = ({
+  addonType: _addonType = "text",
+  className,
+  children,
+  ...rest
+}) => {
+  const ctx = useInputGroupContext();
+  const size = ctx?.size ?? "md";
+  const compact = ctx?.compact ?? true;
+  const addonClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getInputGroupAddonClasses(size, compact, className)),
+    [size, compact, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, className: addonClasses, children });
+};
+
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupContext = InputGroupContext;
+exports.useInputGroupContext = useInputGroupContext;

package/dist/chunk-I4SKKEU3.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/FileManager.tsx
+var FileManager = ({
+  files = [],
+  viewMode = "list",
+  selectedKeys = [],
+  multiple = false,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath = [],
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText = "Empty folder",
+  searchable = false,
+  searchText = "",
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  renderIcon
+}) => {
+  const [localSearch, setLocalSearch] = react.useState(searchText);
+  const currentItems = react.useMemo(() => tigercatCore.navigateToFolder(files, currentPath), [files, currentPath]);
+  const processedItems = react.useMemo(() => {
+    let items = tigercatCore.filterHiddenFiles(currentItems, showHidden);
+    const search = localSearch || searchText;
+    if (search) {
+      items = tigercatCore.filterFileItems(items, search);
+    }
+    return tigercatCore.sortFileItems(items, sortField, sortOrder);
+  }, [currentItems, showHidden, localSearch, searchText, sortField, sortOrder]);
+  const selectedSet = react.useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const containerClasses = react.useMemo(() => tigercatCore.getFileManagerContainerClasses(className), [className]);
+  const handleSelect = react.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(item);
+      const keys = [...selectedKeys];
+      const idx = keys.indexOf(item.key);
+      if (idx >= 0) {
+        keys.splice(idx, 1);
+      } else {
+        if (!multiple) keys.length = 0;
+        keys.push(item.key);
+      }
+      onSelectedKeysChange?.(keys);
+    },
+    [selectedKeys, multiple, onSelect, onSelectedKeysChange]
+  );
+  const handleOpen = react.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (item.type === "folder") {
+        const newPath = [...currentPath, item.name];
+        onCurrentPathChange?.(newPath);
+        onNavigate?.(newPath);
+      } else {
+        onOpen?.(item);
+      }
+    },
+    [currentPath, onOpen, onNavigate, onCurrentPathChange]
+  );
+  const navigateToBreadcrumb = react.useCallback(
+    (index) => {
+      const newPath = currentPath.slice(0, index);
+      onCurrentPathChange?.(newPath);
+      onNavigate?.(newPath);
+    },
+    [currentPath, onNavigate, onCurrentPathChange]
+  );
+  const breadcrumbItems = [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: tigercatCore.fileManagerBreadcrumbItemClasses,
+        onClick: () => navigateToBreadcrumb(0),
+        children: "Root"
+      },
+      "root"
+    ),
+    ...currentPath.flatMap((seg, i) => [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.fileManagerBreadcrumbSeparatorClasses, children: "/" }, `sep-${i}`),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tigercatCore.fileManagerBreadcrumbItemClasses,
+          onClick: () => navigateToBreadcrumb(i + 1),
+          children: seg
+        },
+        `path-${i}`
+      )
+    ])
+  ];
+  const contentClass = viewMode === "grid" ? `${tigercatCore.fileManagerContentClasses} grid grid-cols-4 gap-2` : tigercatCore.fileManagerContentClasses;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames(containerClasses), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.fileManagerToolbarClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: tigercatCore.fileManagerBreadcrumbClasses, "aria-label": "File path", children: breadcrumbItems }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      searchable && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          className: tigercatCore.fileManagerSearchClasses,
+          placeholder: "Search...",
+          value: localSearch,
+          onChange: (e) => {
+            setLocalSearch(e.target.value);
+            onSearchTextChange?.(e.target.value);
+          }
+        }
+      )
+    ] }),
+    processedItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClass, role: "listbox", "aria-multiselectable": multiple, children: processedItems.map((item) => {
+      const isSelected = selectedSet.has(item.key);
+      const itemClass = tigercatCore.getFileItemClasses(viewMode, isSelected);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: itemClass,
+          role: "option",
+          "aria-selected": isSelected,
+          "data-disabled": item.disabled || void 0,
+          onClick: () => handleSelect(item),
+          onDoubleClick: () => handleOpen(item),
+          draggable: draggable && !item.disabled,
+          children: [
+            renderIcon ? renderIcon(item) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.fileManagerItemIconClasses, "aria-hidden": "true", children: item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.fileManagerItemNameClasses, children: item.name }),
+            viewMode === "list" && item.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.fileManagerItemMetaClasses, children: tigercatCore.formatFileSizeLabel(item.size) }),
+            viewMode === "list" && item.modified && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.fileManagerItemMetaClasses, children: item.modified })
+          ]
+        },
+        item.key
+      );
+    }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.fileManagerEmptyClasses, children: emptyText }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.fileManagerLoadingClasses, children: "Loading..." })
+  ] });
+};
+var FileManager_default = FileManager;
+
+exports.FileManager = FileManager;
+exports.FileManager_default = FileManager_default;