@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-XT43B7ZI.mjs → chunk-QIGZOYBF.mjs}

@@ -1,12 +1,17 @@
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
 // src/components/LoadingBarContainer.tsx
 import {
-  DEFAULT_LOADING_BAR_ARIA_LABEL,
   DEFAULT_LOADING_BAR_COLOR,
   DEFAULT_LOADING_BAR_HEIGHT,
   getLoadingBarContainerClasses,
   getLoadingBarFillClasses,
   getLoadingBarFillStyle,
-  LOADING_BAR_CONTAINER_ID
+  getLoadingBarProgressValue,
+  getLoadingLabel
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var LoadingBarContainer = ({
@@ -19,15 +24,33 @@ var LoadingBarContainer = ({
   ariaLabel,
   ...rest
 }) => {
+  const config = useTigerConfig();
+  const locale = config.locale ?? getGlobalTigerLocale();
   const isBusy = status === "loading";
-  const resolvedAriaLabel = ariaLabel?.trim() || DEFAULT_LOADING_BAR_ARIA_LABEL;
+  const resolvedAriaLabel = getLoadingLabel(locale, ariaLabel);
+  const valueNow = getLoadingBarProgressValue(percentage);
+  const {
+    "aria-label": _ariaLabel,
+    "aria-live": _ariaLive,
+    "aria-atomic": _ariaAtomic,
+    "aria-busy": _ariaBusy,
+    "aria-valuenow": _ariaValueNow,
+    "aria-valuemin": _ariaValueMin,
+    "aria-valuemax": _ariaValueMax,
+    ...domRest
+  } = rest;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...rest,
-      id: LOADING_BAR_CONTAINER_ID,
+      ...domRest,
       className: getLoadingBarContainerClasses(className),
       style: { ...style, height: `${height}px` },
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": valueNow,
+      "aria-busy": isBusy || void 0,
       "data-tiger-loading-bar-container": "",
       "data-tiger-loading-bar-status": status,
       children: /* @__PURE__ */ jsx(
@@ -35,14 +58,6 @@ var LoadingBarContainer = ({
         {
           className: getLoadingBarFillClasses(status, color),
           style: getLoadingBarFillStyle(percentage, height),
-          role: "progressbar",
-          "aria-label": resolvedAriaLabel,
-          "aria-valuemin": 0,
-          "aria-valuemax": 100,
-          "aria-valuenow": Math.round(percentage),
-          "aria-busy": isBusy || void 0,
-          "aria-live": "polite",
-          "aria-atomic": "true",
           "data-tiger-loading-bar": "",
           "data-tiger-loading-bar-status": status
         }

package/dist/chunk-QUF2UX52.mjs

@@ -0,0 +1,343 @@
+import {
+  useDrag
+} from "./chunk-REJVXLW5.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FileManager.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getFileManagerContainerClasses,
+  getFileItemClasses,
+  getFileManagerContentClasses,
+  getFileManagerGridStyle,
+  deriveFileManagerModel,
+  toggleFileSelection,
+  resolveFileOpen,
+  buildFileBreadcrumb,
+  applyFileManagerReorder,
+  clampFileManagerFocusIndex,
+  resolveFileManagerItemKeydown,
+  resolveFileItemExtension,
+  resolveFileItemIcon,
+  toFileDragItem,
+  formatFileSizeLabel,
+  getFileManagerLabels,
+  DEFAULT_FILE_COLUMNS,
+  DEFAULT_FILE_GRID_COLUMNS,
+  EMPTY_FILE_ITEMS,
+  EMPTY_FILE_PATH,
+  fileManagerToolbarClasses,
+  fileManagerBreadcrumbClasses,
+  fileManagerBreadcrumbListClasses,
+  fileManagerBreadcrumbItemClasses,
+  fileManagerBreadcrumbCurrentClasses,
+  fileManagerBreadcrumbSeparatorClasses,
+  fileManagerItemIconClasses,
+  fileManagerItemNameClasses,
+  fileManagerItemMetaClasses,
+  fileManagerEmptyClasses,
+  fileManagerLoadingClasses,
+  fileManagerSearchClasses,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileManager = ({
+  files,
+  viewMode = "list",
+  gridColumns = DEFAULT_FILE_GRID_COLUMNS,
+  selectedKeys,
+  defaultSelectedKeys,
+  multiple = false,
+  columns,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath,
+  defaultCurrentPath,
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText,
+  searchable = false,
+  searchText,
+  defaultSearchText,
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  onReorder,
+  onFilesChange,
+  renderIcon,
+  locale,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getFileManagerLabels(mergedLocale), [mergedLocale]);
+  const isRtl = mergedLocale?.direction === "rtl";
+  const tree = files ?? EMPTY_FILE_ITEMS;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const contentRef = useRef(null);
+  const [keys, setKeys] = useControlledState({
+    value: selectedKeys,
+    defaultValue: defaultSelectedKeys ?? [],
+    onChange: onSelectedKeysChange
+  });
+  const [path, setPath] = useControlledState({
+    value: currentPath,
+    defaultValue: defaultCurrentPath ?? EMPTY_FILE_PATH,
+    onChange: (next) => {
+      onCurrentPathChange?.(next);
+      onNavigate?.(next);
+    }
+  });
+  const [query, setQuery] = useControlledState({
+    value: searchText,
+    defaultValue: defaultSearchText ?? "",
+    onChange: onSearchTextChange
+  });
+  const metaColumns = columns ?? DEFAULT_FILE_COLUMNS;
+  const showSizeColumn = metaColumns.includes("size");
+  const showModifiedColumn = metaColumns.includes("modified");
+  const showTypeColumn = metaColumns.includes("type");
+  const model = useMemo(
+    () => deriveFileManagerModel({
+      files: tree,
+      currentPath: path,
+      selectedKeys: keys,
+      sortField,
+      sortOrder,
+      showHidden,
+      searchText: query,
+      draggable
+    }),
+    [tree, path, keys, sortField, sortOrder, showHidden, query, draggable]
+  );
+  const viewKey = `${path.join("/")}\0${query}\0${model.processedItems.length}`;
+  useEffect(() => {
+    setFocusedIndex(0);
+  }, [viewKey]);
+  const drag = useDrag({
+    containerId: "files",
+    onDrop: (event) => {
+      if (!model.canReorder) return;
+      const result = applyFileManagerReorder(
+        tree,
+        path,
+        event.fromIndex,
+        event.toIndex,
+        model.currentItems
+      );
+      if (!result) return;
+      onReorder?.(result.layer, event.fromIndex, event.toIndex);
+      onFilesChange?.(result.files);
+    }
+  });
+  const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
+  const contentClass = getFileManagerContentClasses(viewMode);
+  const gridStyle = getFileManagerGridStyle(viewMode, gridColumns);
+  const breadcrumbs = useMemo(
+    () => buildFileBreadcrumb(tree, path, labels.rootText),
+    [tree, path, labels.rootText]
+  );
+  const focusedItem = clampFileManagerFocusIndex(focusedIndex, model.processedItems);
+  const commitPath = useCallback(
+    (next) => {
+      setPath(next);
+    },
+    [setPath]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      if (loading || item.disabled) return;
+      onSelect?.(item);
+      setKeys(toggleFileSelection(keys, item.key, multiple));
+    },
+    [keys, loading, multiple, onSelect, setKeys]
+  );
+  const handleOpen = useCallback(
+    (item) => {
+      if (loading) return;
+      const result = resolveFileOpen(item, path);
+      if (!result) return;
+      if (result.type === "navigate") {
+        commitPath(result.path);
+      } else {
+        onOpen?.(result.item);
+      }
+    },
+    [commitPath, loading, onOpen, path]
+  );
+  const focusItemAt = useCallback((index) => {
+    requestAnimationFrame(() => {
+      contentRef.current?.querySelector(`[data-option-index="${index}"]`)?.focus();
+    });
+  }, []);
+  const handleItemKeyDown = useCallback(
+    (event, item, index) => {
+      if (loading) return;
+      const action = resolveFileManagerItemKeydown({
+        key: event.key,
+        altKey: event.altKey,
+        viewMode,
+        gridColumns,
+        isRtl,
+        currentIndex: index,
+        items: model.processedItems,
+        currentPath: path
+      });
+      if (!action) return;
+      event.preventDefault();
+      if (action.type === "move" || action.type === "home" || action.type === "end") {
+        setFocusedIndex(action.index);
+        focusItemAt(action.index);
+        return;
+      }
+      if (action.type === "select") {
+        handleSelect(item);
+        return;
+      }
+      if (action.type === "open") {
+        handleSelect(item);
+        handleOpen(item);
+        return;
+      }
+      commitPath(action.path);
+    },
+    [
+      commitPath,
+      focusItemAt,
+      gridColumns,
+      handleOpen,
+      handleSelect,
+      isRtl,
+      loading,
+      model.processedItems,
+      path,
+      viewMode
+    ]
+  );
+  const handleDragStart = useCallback(
+    (event, item, index) => {
+      if (!model.canReorder || item.disabled) return;
+      drag.startDrag(toFileDragItem(item, index, "files"), event);
+    },
+    [drag, model.canReorder]
+  );
+  const handleDragOver = useCallback(
+    (event, item, index) => {
+      if (!model.canReorder || item.disabled) return;
+      drag.dragOver(toFileDragItem(item, index, "files"), event);
+    },
+    [drag, model.canReorder]
+  );
+  const emptyLabel = emptyText ?? mergedLocale?.fileManager?.emptyText ?? mergedLocale?.common?.emptyText ?? labels.emptyText;
+  const loadingLabel = mergedLocale?.common?.loadingText;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: classNames(containerClasses),
+      style,
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: fileManagerToolbarClasses, children: [
+          /* @__PURE__ */ jsx("nav", { className: fileManagerBreadcrumbClasses, "aria-label": labels.pathAriaLabel, children: /* @__PURE__ */ jsx("ol", { className: fileManagerBreadcrumbListClasses, children: breadcrumbs.map((segment, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+            index > 0 ? /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbSeparatorClasses, "aria-hidden": "true", children: "/" }) : null,
+            segment.current ? /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbCurrentClasses, "aria-current": "page", children: segment.name }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: fileManagerBreadcrumbItemClasses,
+                onClick: () => commitPath(segment.path),
+                children: segment.name
+              }
+            )
+          ] }, segment.key || "root")) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          searchable && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: fileManagerSearchClasses,
+              placeholder: mergedLocale?.common?.searchPlaceholder,
+              "aria-label": labels.searchAriaLabel,
+              value: query,
+              onChange: (event) => setQuery(event.target.value)
+            }
+          )
+        ] }),
+        model.processedItems.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            className: contentClass,
+            style: gridStyle,
+            role: "listbox",
+            "aria-label": labels.listboxAriaLabel,
+            "aria-multiselectable": multiple || void 0,
+            "aria-disabled": loading || void 0,
+            children: model.processedItems.map((item, index) => {
+              const isSelected = model.selectedSet.has(item.key);
+              const itemClass = getFileItemClasses(viewMode, isSelected, Boolean(item.disabled));
+              const canDrag = model.canReorder && !item.disabled;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: itemClass,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": item.disabled || void 0,
+                  tabIndex: !loading && !item.disabled && index === focusedItem ? 0 : -1,
+                  "data-option-index": index,
+                  "data-disabled": item.disabled || void 0,
+                  "data-drag-id": item.key,
+                  "data-drag-index": index,
+                  "data-drag-container": "files",
+                  onFocus: () => {
+                    if (!item.disabled) setFocusedIndex(index);
+                  },
+                  onKeyDown: (event) => handleItemKeyDown(event, item, index),
+                  onClick: () => handleSelect(item),
+                  onDoubleClick: () => handleOpen(item),
+                  draggable: canDrag,
+                  onDragStart: canDrag ? (event) => handleDragStart(event, item, index) : void 0,
+                  onDragOver: canDrag ? (event) => handleDragOver(event, item, index) : void 0,
+                  onDrop: canDrag ? (event) => drag.drop(event) : void 0,
+                  onDragEnd: canDrag ? () => drag.endDrag() : void 0,
+                  children: [
+                    renderIcon ? renderIcon(item) : /* @__PURE__ */ jsx("span", { className: fileManagerItemIconClasses, "aria-hidden": "true", children: resolveFileItemIcon(item) }),
+                    /* @__PURE__ */ jsx("span", { className: fileManagerItemNameClasses, children: item.name }),
+                    viewMode === "list" && showTypeColumn && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: resolveFileItemExtension(item) || item.type }),
+                    viewMode === "list" && showSizeColumn && item.size !== void 0 && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: formatFileSizeLabel(item.size) }),
+                    viewMode === "list" && showModifiedColumn && item.modified && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: item.modified })
+                  ]
+                },
+                item.key
+              );
+            })
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: fileManagerEmptyClasses, children: emptyLabel }),
+        loading && /* @__PURE__ */ jsx("div", { className: fileManagerLoadingClasses, role: "status", children: loadingLabel })
+      ]
+    }
+  );
+};
+var FileManager_default = FileManager;
+
+export {
+  FileManager,
+  FileManager_default
+};

package/dist/chunk-R2VBVZIH.mjs

@@ -0,0 +1,20 @@
+// src/components/Footer.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  injectLayoutGridStyles,
+  layoutFooterClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Footer = forwardRef(function Footer2({ className, height, style, as = "footer", children, ...props }, ref) {
+  injectLayoutGridStyles();
+  const footerClasses = classNames(layoutFooterClasses, className);
+  const footerStyle = height ? { ...style, height } : style;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(Tag, { ref, className: footerClasses, style: footerStyle, ...props, children });
+});
+Footer.displayName = "TigerFooter";
+
+export {
+  Footer
+};

package/dist/chunk-R45ZPU5J.mjs

@@ -0,0 +1,19 @@
+// src/components/Header.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getLayoutHeaderClasses,
+  injectLayoutGridStyles
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Header = forwardRef(function Header2({ className, variant = "default", height, style, children, ...props }, ref) {
+  injectLayoutGridStyles();
+  const headerClasses = classNames(getLayoutHeaderClasses(variant), className);
+  const headerStyle = height ? { ...style, height } : style;
+  return /* @__PURE__ */ jsx("header", { ref, className: headerClasses, style: headerStyle, ...props, children });
+});
+Header.displayName = "TigerHeader";
+
+export {
+  Header
+};