@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-4APNERYR.js

@@ -0,0 +1,212 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/AutoComplete.tsx
+var AUTOCOMPLETE_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "options",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "notFoundText",
+  "filterOption",
+  "defaultActiveFirstOption",
+  "allowFreeInput",
+  "onChange",
+  "onSelect",
+  "onSearch"
+]);
+var AutoComplete = (props) => {
+  const {
+    value = "",
+    options = [],
+    placeholder = "",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    notFoundText = "No matches found",
+    filterOption = true,
+    defaultActiveFirstOption = true,
+    className,
+    onChange,
+    onSelect,
+    onSearch,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!AUTOCOMPLETE_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = react.useId();
+  const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [inputValue, setInputValue] = react.useState(String(value ?? ""));
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    setInputValue(String(value ?? ""));
+  }, [value]);
+  const filteredOptions = react.useMemo(
+    () => tigercatCore.filterAutoCompleteOptions(options, inputValue, filterOption),
+    [options, inputValue, filterOption]
+  );
+  const showClearButton = clearable && !disabled && inputValue !== "";
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+    if (defaultActiveFirstOption && filteredOptions.length > 0) {
+      setActiveIndex(0);
+    }
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleInput(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    onChange?.(val);
+    onSearch?.(val);
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (defaultActiveFirstOption) {
+      const newFiltered = tigercatCore.filterAutoCompleteOptions(options, val, filterOption);
+      setActiveIndex(newFiltered.length > 0 ? 0 : -1);
+    }
+  }
+  function handleSelect(option) {
+    if (option.disabled) return;
+    setInputValue(option.label);
+    onChange?.(option.value);
+    onSelect?.(option.value, option);
+    closeDropdown();
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    setInputValue("");
+    onChange?.("");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }
+  function handleKeyDown(e) {
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openDropdown();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (filteredOptions.length > 0) {
+          setActiveIndex((prev) => {
+            let next = prev + 1;
+            while (next < filteredOptions.length && filteredOptions[next].disabled) next++;
+            return next < filteredOptions.length ? next : prev;
+          });
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (filteredOptions.length > 0) {
+          setActiveIndex((prev) => {
+            let p = prev - 1;
+            while (p >= 0 && filteredOptions[p].disabled) p--;
+            return p >= 0 ? p : prev;
+          });
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+          handleSelect(filteredOptions[activeIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        closeDropdown();
+        break;
+    }
+  }
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  const containerClasses = tigercatCore.classNames(tigercatCore.autoCompleteBaseClasses, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: tigercatCore.getAutoCompleteInputClasses(size, disabled, isOpen),
+        value: inputValue,
+        placeholder,
+        disabled,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+        autoComplete: "off",
+        onChange: handleInput,
+        onFocus: openDropdown,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-autocomplete-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-autocomplete-clear-hover,var(--tiger-text,#111827))] transition-colors",
+        "aria-label": "Clear",
+        onClick: handleClear,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            viewBox: tigercatCore.icon20ViewBox,
+            fill: "currentColor",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+          }
+        )
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, role: "listbox", className: tigercatCore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: `${listboxId}-option-${index}`,
+        role: "option",
+        "aria-selected": String(option.value) === String(value),
+        "aria-disabled": option.disabled,
+        className: tigercatCore.getAutoCompleteOptionClasses(
+          String(option.value) === String(value),
+          !!option.disabled,
+          size
+        ),
+        onClick: () => handleSelect(option),
+        onMouseEnter: () => setActiveIndex(index),
+        children: option.label
+      },
+      String(option.value)
+    )) }),
+    isOpen && inputValue && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.autoCompleteDropdownClasses, tigercatCore.autoCompleteEmptyStateClasses), children: notFoundText })
+  ] });
+};
+
+exports.AutoComplete = AutoComplete;

package/dist/chunk-4GV7UQJJ.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Watermark.tsx
+var Watermark = ({
+  content,
+  image,
+  width = tigercatCore.watermarkDefaults.width,
+  height = tigercatCore.watermarkDefaults.height,
+  rotate = tigercatCore.watermarkDefaults.rotate,
+  zIndex = tigercatCore.watermarkDefaults.zIndex,
+  gapX = tigercatCore.watermarkDefaults.gapX,
+  gapY = tigercatCore.watermarkDefaults.gapY,
+  offsetX = tigercatCore.watermarkDefaults.offsetX,
+  offsetY = tigercatCore.watermarkDefaults.offsetY,
+  font,
+  className,
+  children,
+  ...props
+}) => {
+  const [base64, setBase64] = react.useState();
+  const wrapperRef = react.useRef(null);
+  const resolvedFont = react.useMemo(() => tigercatCore.resolveWatermarkFont(font), [font]);
+  const generate = react.useCallback(() => {
+    if (image) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        ctx.scale(dpr, dpr);
+        ctx.translate(width / 2, height / 2);
+        ctx.rotate(rotate * Math.PI / 180);
+        ctx.translate(-width / 2, -height / 2);
+        ctx.drawImage(img, 0, 0, width, height);
+        setBase64(canvas.toDataURL());
+      };
+      img.src = image;
+    } else {
+      setBase64(
+        tigercatCore.renderWatermarkCanvas({
+          content,
+          width,
+          height,
+          rotate,
+          font: resolvedFont
+        })
+      );
+    }
+  }, [content, image, width, height, rotate, resolvedFont]);
+  react.useEffect(() => {
+    generate();
+  }, [generate]);
+  react.useEffect(() => {
+    if (typeof MutationObserver === "undefined" || !wrapperRef.current) return;
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of Array.from(m.removedNodes)) {
+          if (node.dataset?.watermark === "true") {
+            generate();
+            return;
+          }
+        }
+      }
+    });
+    observer.observe(wrapperRef.current, { childList: true });
+    return () => observer.disconnect();
+  }, [generate]);
+  const overlayStyle = react.useMemo(
+    () => tigercatCore.getWatermarkOverlayStyle({
+      base64Url: base64,
+      width,
+      height,
+      gapX,
+      gapY,
+      offsetX,
+      offsetY,
+      zIndex
+    }),
+    [base64, width, height, gapX, gapY, offsetX, offsetY, zIndex]
+  );
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.watermarkWrapperClasses, className), [className]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: wrapperClasses, ...props, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-watermark": "true", "aria-hidden": "true", style: overlayStyle })
+  ] });
+};
+
+exports.Watermark = Watermark;

package/dist/chunk-4MKMM2OI.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Rate.tsx
+var Rate = ({
+  value = 0,
+  count = 5,
+  allowHalf = false,
+  disabled = false,
+  size = "md",
+  allowClear = true,
+  character,
+  className,
+  onChange,
+  onHoverChange
+}) => {
+  const [hoverValue, setHoverValue] = react.useState(0);
+  const displayValue = hoverValue > 0 ? hoverValue : value;
+  const isChar = !!character;
+  function getStarValue(index, isHalf) {
+    return isHalf ? index + 0.5 : index + 1;
+  }
+  function handleClick(index, e) {
+    if (disabled) return;
+    const el = e.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const half = allowHalf && e.clientX - rect.left < rect.width / 2;
+    const val = getStarValue(index, half);
+    const newVal = allowClear && val === value ? 0 : val;
+    onChange?.(newVal);
+  }
+  function handleMouseMove(index, e) {
+    if (disabled) return;
+    const el = e.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const half = allowHalf && e.clientX - rect.left < rect.width / 2;
+    const val = getStarValue(index, half);
+    if (val !== hoverValue) {
+      setHoverValue(val);
+      onHoverChange?.(val);
+    }
+  }
+  function handleMouseLeave() {
+    if (disabled) return;
+    setHoverValue(0);
+    onHoverChange?.(0);
+  }
+  const starIcon = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: tigercatCore.starViewBox, fill: "currentColor", className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.starPathD }) }),
+    []
+  );
+  const stars = react.useMemo(() => {
+    const items = [];
+    for (let i = 0; i < count; i++) {
+      const full = displayValue >= i + 1;
+      const half = allowHalf && !full && displayValue >= i + 0.5;
+      const isHovering = hoverValue > 0;
+      const colorClass = full || half ? isHovering ? tigercatCore.rateHoverColor : tigercatCore.rateActiveColor : tigercatCore.rateInactiveColor;
+      const content = half ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("absolute inset-0", tigercatCore.rateInactiveColor), children: isChar ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: character }) : starIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tigercatCore.classNames(
+              "absolute inset-0 overflow-hidden",
+              isHovering ? tigercatCore.rateHoverColor : tigercatCore.rateActiveColor
+            ),
+            style: { width: "50%" },
+            children: isChar ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: character }) : starIcon
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: colorClass, children: isChar ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: character }) : starIcon });
+      items.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tigercatCore.getRateStarClasses(size, isChar, disabled),
+            role: "radio",
+            "aria-checked": full || half,
+            "aria-label": `${i + 1} star${i + 1 > 1 ? "s" : ""}`,
+            onClick: (e) => handleClick(i, e),
+            onMouseMove: (e) => handleMouseMove(i, e),
+            onMouseLeave: handleMouseLeave,
+            children: content
+          },
+          i
+        )
+      );
+    }
+    return items;
+  }, [
+    count,
+    displayValue,
+    hoverValue,
+    allowHalf,
+    disabled,
+    size,
+    character,
+    isChar,
+    value,
+    allowClear,
+    onChange,
+    onHoverChange,
+    starIcon
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.rateBaseClasses, className), role: "radiogroup", "aria-label": "Rating", children: stars });
+};
+
+exports.Rate = Rate;

package/dist/{chunk-QM4GOQDT.js → chunk-4QJZT6QK.js}

@@ -58,6 +58,7 @@ var Tree = ({
   multiple = false,
   loadData,
   filterValue = "",
+  searchable = false,
   filterFn,
   autoExpandParent = true,
   blockNode = false,
@@ -69,9 +70,12 @@ var Tree = ({
   onNodeClick,
   onNodeExpand,
   onNodeCollapse,
-  className
+  className,
+  draggable: isDraggable = false,
+  onDrop
 }) => {
   const itemRefs = react.useRef(/* @__PURE__ */ new Map());
+  const dragNodeKeyRef = react.useRef(null);
   const effectiveSelectable = react.useMemo(() => {
     if (selectionMode !== void 0) {
       return selectionMode !== "none";
@@ -149,9 +153,11 @@ var Tree = ({
     () => tigercatCore.checkedSetsFromState(computedCheckedState),
     [computedCheckedState]
   );
+  const [internalSearchValue, setInternalSearchValue] = react.useState("");
+  const effectiveFilterValue = searchable ? internalSearchValue : filterValue;
   react.useEffect(() => {
-    if (filterValue) {
-      const matched = tigercatCore.filterTreeNodes(treeData, filterValue, filterFn);
+    if (effectiveFilterValue) {
+      const matched = tigercatCore.filterTreeNodes(treeData, effectiveFilterValue, filterFn);
       setFilteredNodeKeys(matched);
       if (autoExpandParent) {
         const autoExpand = tigercatCore.getAutoExpandKeys(treeData, matched);
@@ -162,7 +168,7 @@ var Tree = ({
     } else {
       setFilteredNodeKeys(/* @__PURE__ */ new Set());
     }
-  }, [filterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
+  }, [effectiveFilterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
   const handleExpand = react.useCallback(
     (nodeKey) => {
       const node = tigercatCore.findNode(treeData, nodeKey);
@@ -472,6 +478,26 @@ var Tree = ({
           "aria-expanded": isExpandable ? isExpanded : void 0,
           "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
           tabIndex: isFocusable ? 0 : -1,
+          draggable: isDraggable && !node.disabled ? true : void 0,
+          onDragStart: isDraggable && !node.disabled ? (e) => {
+            e.stopPropagation();
+            dragNodeKeyRef.current = node.key;
+          } : void 0,
+          onDragOver: isDraggable ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          } : void 0,
+          onDrop: isDraggable ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (dragNodeKeyRef.current !== null && dragNodeKeyRef.current !== node.key) {
+              onDrop?.({ dragKey: dragNodeKeyRef.current, dropKey: node.key });
+            }
+            dragNodeKeyRef.current = null;
+          } : void 0,
+          onDragEnd: isDraggable ? () => {
+            dragNodeKeyRef.current = null;
+          } : void 0,
           onFocus: () => {
             if (!node.disabled) setActiveKey(node.key);
           },
@@ -500,14 +526,26 @@ var Tree = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: tigercatCore.classNames(tigercatCore.treeBaseClasses, className),
       role: "tree",
       "aria-label": ariaLabel,
       "aria-multiselectable": effectiveMultiple || void 0,
-      children: treeData.map((node) => renderTreeNode(node, 0))
+      children: [
+        searchable && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            className: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
+            placeholder: "Search...",
+            value: internalSearchValue,
+            onChange: (e) => setInternalSearchValue(e.target.value)
+          }
+        ),
+        treeData.map((node) => renderTreeNode(node, 0))
+      ]
     }
   );
 };