@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/{chunk-3MRP3XYI.js → chunk-5QLSTNA3.js}

@@ -1,8 +1,11 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
 
+
+var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
+
 // src/components/Loading.tsx
 var _react = require('react');
 
@@ -18,6 +21,8 @@ var _react = require('react');
 
 
 
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('react/jsx-runtime');
 var Loading = ({
@@ -32,8 +37,14 @@ var Loading = ({
   lockScroll = true,
   className,
   style,
+  locale,
   ...props
 }) => {
+  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
+  const mergedLocale = _react.useMemo.call(void 0, 
+    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, locale),
+    [config.locale, locale]
+  );
   const [visible, setVisible] = _react.useState.call(void 0, delay <= 0);
   _react.useEffect.call(void 0, () => {
     _tigercatcore.injectLoadingAnimationStyles.call(void 0, );
@@ -116,7 +127,7 @@ var Loading = ({
       className: containerClasses,
       style: mergedStyle,
       role: "status",
-      "aria-label": text || "Loading",
+      "aria-label": text || _tigercatcore.resolveLocaleText.call(void 0, "Loading", _optionalChain([mergedLocale, 'optionalAccess', _ => _.common, 'optionalAccess', _2 => _2.loadingText])),
       "aria-live": "polite",
       "aria-busy": true,
       ...props,

package/dist/chunk-5SX2M3LU.mjs

@@ -0,0 +1,319 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
+// src/components/FileManager.tsx
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getFileManagerContainerClasses,
+  getFileItemClasses,
+  deriveFileManagerModel,
+  toggleFileSelection,
+  resolveFileOpen,
+  sliceBreadcrumbPath,
+  toFileDragItem,
+  applyFileDragReorder,
+  formatFileSizeLabel,
+  getFileManagerLabels,
+  fileManagerToolbarClasses,
+  fileManagerBreadcrumbClasses,
+  fileManagerBreadcrumbItemClasses,
+  fileManagerBreadcrumbSeparatorClasses,
+  fileManagerContentClasses,
+  fileManagerItemIconClasses,
+  fileManagerItemNameClasses,
+  fileManagerItemMetaClasses,
+  fileManagerEmptyClasses,
+  fileManagerLoadingClasses,
+  fileManagerSearchClasses,
+  resolveLocaleText,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileManager = ({
+  files = [],
+  viewMode = "list",
+  selectedKeys = [],
+  multiple = false,
+  columns,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath = [],
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText,
+  searchable = false,
+  searchText = "",
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  onReorder,
+  renderIcon,
+  locale
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const [localSearch, setLocalSearch] = useState(searchText);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const contentRef = useRef(null);
+  const dragFromIndex = useRef(null);
+  const labels = useMemo(() => getFileManagerLabels(mergedLocale), [mergedLocale]);
+  const metaColumns = columns ?? ["size", "modified"];
+  const showSizeColumn = metaColumns.includes("size");
+  const showModifiedColumn = metaColumns.includes("modified");
+  const showTypeColumn = metaColumns.includes("type");
+  const model = useMemo(
+    () => deriveFileManagerModel({
+      files,
+      currentPath,
+      selectedKeys,
+      sortField,
+      sortOrder,
+      showHidden,
+      searchText: localSearch || searchText
+    }),
+    [files, currentPath, selectedKeys, sortField, sortOrder, showHidden, localSearch, searchText]
+  );
+  const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
+  const handleSelect = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(item);
+      const keys = toggleFileSelection(selectedKeys, item.key, multiple);
+      onSelectedKeysChange?.(keys);
+    },
+    [selectedKeys, multiple, onSelect, onSelectedKeysChange]
+  );
+  const handleOpen = useCallback(
+    (item) => {
+      const result = resolveFileOpen(item, currentPath);
+      if (!result) return;
+      if (result.type === "navigate") {
+        onCurrentPathChange?.(result.path);
+        onNavigate?.(result.path);
+      } else {
+        onOpen?.(result.item);
+      }
+    },
+    [currentPath, onOpen, onNavigate, onCurrentPathChange]
+  );
+  const navigateToBreadcrumb = useCallback(
+    (index) => {
+      const newPath = sliceBreadcrumbPath(currentPath, index);
+      onCurrentPathChange?.(newPath);
+      onNavigate?.(newPath);
+    },
+    [currentPath, onNavigate, onCurrentPathChange]
+  );
+  const breadcrumbItems = [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: fileManagerBreadcrumbItemClasses,
+        onClick: () => navigateToBreadcrumb(0),
+        children: labels.rootText
+      },
+      "root"
+    ),
+    ...currentPath.flatMap((seg, i) => [
+      /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbSeparatorClasses, children: "/" }, `sep-${i}`),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: fileManagerBreadcrumbItemClasses,
+          onClick: () => navigateToBreadcrumb(i + 1),
+          children: seg
+        },
+        `path-${i}`
+      )
+    ])
+  ];
+  const contentClass = viewMode === "grid" ? `${fileManagerContentClasses} grid grid-cols-4 gap-2` : fileManagerContentClasses;
+  const firstEnabledIndex = model.processedItems.findIndex((item) => !item.disabled);
+  const focusedItem = focusedIndex >= 0 && !model.processedItems[focusedIndex]?.disabled ? focusedIndex : firstEnabledIndex;
+  const focusItemAt = useCallback((index) => {
+    requestAnimationFrame(() => {
+      contentRef.current?.querySelector(`[data-option-index="${index}"]`)?.focus();
+    });
+  }, []);
+  const moveFocus = useCallback(
+    (current, direction) => {
+      if (model.processedItems.length === 0) return;
+      let next = current;
+      for (let i = 0; i < model.processedItems.length; i += 1) {
+        next = (next + direction + model.processedItems.length) % model.processedItems.length;
+        if (!model.processedItems[next]?.disabled) {
+          setFocusedIndex(next);
+          focusItemAt(next);
+          return;
+        }
+      }
+    },
+    [focusItemAt, model.processedItems]
+  );
+  const handleItemKeyDown = useCallback(
+    (event, item, index) => {
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          moveFocus(index, 1);
+          return;
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          moveFocus(index, -1);
+          return;
+        case "Home":
+          event.preventDefault();
+          if (firstEnabledIndex >= 0) {
+            setFocusedIndex(firstEnabledIndex);
+            focusItemAt(firstEnabledIndex);
+          }
+          return;
+        case "End": {
+          event.preventDefault();
+          let lastEnabledIndex = -1;
+          for (let next = model.processedItems.length - 1; next >= 0; next -= 1) {
+            if (!model.processedItems[next]?.disabled) {
+              lastEnabledIndex = next;
+              break;
+            }
+          }
+          if (lastEnabledIndex >= 0) {
+            setFocusedIndex(lastEnabledIndex);
+            focusItemAt(lastEnabledIndex);
+          }
+          return;
+        }
+        case " ":
+          event.preventDefault();
+          handleSelect(item);
+          return;
+        case "Enter":
+          event.preventDefault();
+          handleSelect(item);
+          handleOpen(item);
+          return;
+        default:
+          return;
+      }
+    },
+    [firstEnabledIndex, focusItemAt, handleOpen, handleSelect, model.processedItems, moveFocus]
+  );
+  const handleDragStart = useCallback(
+    (event, item, index) => {
+      if (!draggable || item.disabled) return;
+      dragFromIndex.current = index;
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", String(toFileDragItem(item, index).id));
+    },
+    [draggable]
+  );
+  const handleDragOver = useCallback(
+    (event) => {
+      if (!draggable || dragFromIndex.current === null) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+    },
+    [draggable]
+  );
+  const handleDrop = useCallback(
+    (event, toIndex) => {
+      if (!draggable) return;
+      const fromIndex = dragFromIndex.current;
+      dragFromIndex.current = null;
+      if (fromIndex === null || fromIndex === toIndex) return;
+      event.preventDefault();
+      const items = model.processedItems;
+      const reordered = applyFileDragReorder(items, {
+        item: toFileDragItem(items[fromIndex], fromIndex),
+        fromIndex,
+        toIndex,
+        fromContainerId: "",
+        toContainerId: ""
+      });
+      onReorder?.(reordered, fromIndex, toIndex);
+    },
+    [draggable, model.processedItems, onReorder]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames(containerClasses), children: [
+    /* @__PURE__ */ jsxs("div", { className: fileManagerToolbarClasses, children: [
+      /* @__PURE__ */ jsx("nav", { className: fileManagerBreadcrumbClasses, "aria-label": "File path", children: breadcrumbItems }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      searchable && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: fileManagerSearchClasses,
+          placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
+          value: localSearch,
+          onChange: (e) => {
+            setLocalSearch(e.target.value);
+            onSearchTextChange?.(e.target.value);
+          }
+        }
+      )
+    ] }),
+    model.processedItems.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: contentClass,
+        role: "listbox",
+        "aria-multiselectable": multiple,
+        children: model.processedItems.map((item, index) => {
+          const isSelected = model.selectedSet.has(item.key);
+          const itemClass = getFileItemClasses(viewMode, isSelected);
+          const dragItem = draggable && !item.disabled ? toFileDragItem(item, index) : void 0;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: itemClass,
+              role: "option",
+              "aria-selected": isSelected,
+              tabIndex: !item.disabled && index === focusedItem ? 0 : -1,
+              "data-option-index": index,
+              "data-disabled": item.disabled || void 0,
+              "data-drag-id": dragItem?.id,
+              onFocus: () => {
+                if (!item.disabled) setFocusedIndex(index);
+              },
+              onKeyDown: (event) => handleItemKeyDown(event, item, index),
+              onClick: () => handleSelect(item),
+              onDoubleClick: () => handleOpen(item),
+              draggable: draggable && !item.disabled,
+              onDragStart: (event) => handleDragStart(event, item, index),
+              onDragOver: handleDragOver,
+              onDrop: (event) => handleDrop(event, index),
+              children: [
+                renderIcon ? renderIcon(item) : /* @__PURE__ */ jsx("span", { className: fileManagerItemIconClasses, "aria-hidden": "true", children: item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}" }),
+                /* @__PURE__ */ jsx("span", { className: fileManagerItemNameClasses, children: item.name }),
+                viewMode === "list" && showTypeColumn && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: item.extension ?? 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: resolveLocaleText("Empty folder", emptyText, mergedLocale?.common?.emptyText) }),
+    loading && /* @__PURE__ */ jsx("div", { className: fileManagerLoadingClasses, children: resolveLocaleText("Loading...", mergedLocale?.common?.loadingText) })
+  ] });
+};
+var FileManager_default = FileManager;
+
+export {
+  FileManager,
+  FileManager_default
+};

package/dist/{chunk-FI53LYZ6.js → chunk-5UREMEDS.js}

@@ -1,4 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ImageCropper.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
+
+// src/components/ImageCropper.tsx
+
 
 
 
@@ -22,6 +27,8 @@ var _react = require('react');
 
 
 
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('react/jsx-runtime');
 var ImageCropper = _react.forwardRef.call(void 0, 
@@ -33,11 +40,20 @@ var ImageCropper = _react.forwardRef.call(void 0,
     outputType = "image/png",
     quality = 0.92,
     guides = true,
+    locale,
     className,
     style,
     onCropChange,
     onReady
   }, ref) => {
+    const reactId = _react.useId.call(void 0, );
+    const maskId = `tiger-crop-mask-${reactId.replace(/:/g, "")}`;
+    const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
+    const mergedLocale = _react.useMemo.call(void 0, 
+      () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = _react.useMemo.call(void 0, () => _tigercatcore.getImageEditorLabels.call(void 0, mergedLocale), [mergedLocale]);
     const containerRef = _react.useRef.call(void 0, null);
     const imageRef = _react.useRef.call(void 0, null);
     const [imageLoaded, setImageLoaded] = _react.useState.call(void 0, false);
@@ -267,7 +283,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
           className: _tigercatcore.classNames.call(void 0, containerClasses, "flex items-center justify-center"),
           style: { ...style, minHeight: "200px" },
           role: "img",
-          "aria-label": "Loading image for cropping",
+          "aria-label": labels.loadingCropImageAriaLabel,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
         }
       );
@@ -283,7 +299,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
           height: `${displayHeight}px`
         },
         role: "application",
-        "aria-label": "Image cropper",
+        "aria-label": labels.cropperDialogAriaLabel,
         "aria-roledescription": "image cropper",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -293,7 +309,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
               className: _tigercatcore.imageCropperImgClasses,
               style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
               draggable: false,
-              alt: "Image to crop"
+              alt: labels.imageToCropAriaLabel
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -304,7 +320,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
               height: displayHeight,
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "mask", { id: "crop-mask", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "mask", { id: maskId, children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: displayWidth, height: displayHeight, fill: "white" }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
                 ] }) }),
@@ -314,7 +330,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
                     width: displayWidth,
                     height: displayHeight,
                     fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-                    mask: "url(#crop-mask)"
+                    mask: `url(#${maskId})`
                   }
                 )
               ]
@@ -344,7 +360,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
               },
               role: "button",
               tabIndex: 0,
-              "aria-label": "Move crop area",
+              "aria-label": labels.moveCropAreaAriaLabel,
               onMouseDown: (e) => handleMouseDown(e, "move"),
               onTouchStart: (e) => handleTouchStart(e, "move"),
               onKeyDown: handleMoveKeyDown
@@ -427,7 +443,7 @@ var ImageCropper = _react.forwardRef.call(void 0,
                 style: pos,
                 role: "button",
                 tabIndex: 0,
-                "aria-label": `Resize crop area ${handle}`,
+                "aria-label": labels.resizeCropAreaAriaLabel.replace("{handle}", handle),
                 onMouseDown: (e) => handleMouseDown(e, "resize", handle),
                 onTouchStart: (e) => handleTouchStart(e, "resize", handle),
                 onKeyDown: (e) => handleResizeKeyDown(e, handle)

package/dist/{chunk-MSHCPJIJ.mjs → chunk-6BOSSZM3.mjs}

@@ -1,9 +1,12 @@
 import {
   useCheckboxGroup
-} from "./chunk-DKT2EYVM.mjs";
+} from "./chunk-MV2JQ6XQ.mjs";
+import {
+  useControlledState
+} from "./chunk-WHYHLUXG.mjs";
 
 // src/components/Checkbox.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import {
   classNames,
   getCheckboxClasses,
@@ -23,11 +26,10 @@ var Checkbox = ({
   ...props
 }) => {
   const groupContext = useCheckboxGroup();
-  const [internalChecked, setInternalChecked] = useState(defaultChecked);
-  const isControlled = controlledChecked !== void 0;
+  const [checkedState, setChecked] = useControlledState(controlledChecked, defaultChecked, onChange);
   const effectiveSize = propSize || groupContext?.size || "md";
   const effectiveDisabled = propDisabled || groupContext?.disabled || false;
-  const checked = groupContext && value !== void 0 ? groupContext.value.includes(value) : isControlled ? controlledChecked : internalChecked;
+  const checked = groupContext && value !== void 0 ? groupContext.value.includes(value) : checkedState;
   const checkboxRef = useRef(null);
   useEffect(() => {
     if (checkboxRef.current) {
@@ -40,10 +42,7 @@ var Checkbox = ({
     if (groupContext && value !== void 0) {
       groupContext.updateValue(value, newValue);
     } else {
-      if (!isControlled) {
-        setInternalChecked(newValue);
-      }
-      onChange?.(newValue, event);
+      setChecked(newValue, event);
     }
   };
   const checkboxClasses = getCheckboxClasses(effectiveSize, effectiveDisabled);