@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-HAXRHSCN.mjs

@@ -1,291 +0,0 @@
-import {
-  renderOverlayPortal,
-  useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/AutoComplete.tsx
-import { useState, useRef, useEffect, useId, useMemo } from "react";
-import {
-  autoCompleteBaseClasses,
-  autoCompleteDropdownClasses,
-  autoCompleteEmptyStateClasses,
-  getAutoCompleteInputClasses,
-  getAutoCompleteOptionClasses,
-  filterAutoCompleteOptions,
-  resolveAutoCompleteDisplayValue,
-  getInitialPickerActiveIndex,
-  getPickerComboboxAria,
-  getPickerListboxAria,
-  getPickerNavigationIndex,
-  getPickerOptionAria,
-  getPickerOptionId,
-  classNames,
-  resolveLocaleText,
-  mergeTigerLocale,
-  icon20ViewBox,
-  closeSolidIcon20PathD
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AUTOCOMPLETE_KEYS = /* @__PURE__ */ new Set([
-  "value",
-  "options",
-  "placeholder",
-  "searchValue",
-  "defaultSearchValue",
-  "size",
-  "disabled",
-  "clearable",
-  "emptyText",
-  "filterOption",
-  "defaultActiveFirstOption",
-  "allowFreeInput",
-  "locale",
-  "onChange",
-  "onSelect",
-  "onSearchChange"
-]);
-var AutoComplete = (props) => {
-  const {
-    value = "",
-    options = [],
-    placeholder = "",
-    searchValue,
-    defaultSearchValue = "",
-    size = "md",
-    disabled = false,
-    clearable = false,
-    emptyText,
-    filterOption = true,
-    defaultActiveFirstOption = true,
-    allowFreeInput = true,
-    locale,
-    className,
-    onChange,
-    onSelect,
-    onSearchChange,
-    ...rest
-  } = props;
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const resolvedNotFoundText = resolveLocaleText(
-    "No matches found",
-    emptyText,
-    mergedLocale?.common?.emptyText
-  );
-  const divProps = {};
-  for (const key of Object.keys(rest)) {
-    if (!AUTOCOMPLETE_KEYS.has(key)) {
-      divProps[key] = rest[key];
-    }
-  }
-  const instanceId = useId();
-  const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
-  const [isOpen, setIsOpen] = useState(false);
-  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
-    searchValue ?? resolveAutoCompleteDisplayValue(value, options, defaultSearchValue)
-  );
-  const inputValue = searchValue ?? uncontrolledSearchValue;
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const containerRef = useRef(null);
-  const inputRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const overlay = useAnchoredOverlay({
-    enabled: isOpen,
-    referenceRef: inputRef,
-    floatingRef: dropdownRef,
-    containerRef,
-    placement: "bottom-start",
-    offset: 4,
-    matchReferenceWidth: true,
-    dismissOnOutside: true,
-    dismissOnEscape: true,
-    restoreFocusOnDismiss: true,
-    onDismiss: closeDropdown
-  });
-  useEffect(() => {
-    if (searchValue !== void 0) {
-      return;
-    }
-    setUncontrolledSearchValue(resolveAutoCompleteDisplayValue(value, options, defaultSearchValue));
-  }, [defaultSearchValue, options, searchValue, value]);
-  const filteredOptions = useMemo(
-    () => filterAutoCompleteOptions(options, inputValue, filterOption),
-    [options, inputValue, filterOption]
-  );
-  const showClearButton = clearable && !disabled && inputValue !== "";
-  function openDropdown() {
-    if (disabled) return;
-    setIsOpen(true);
-    setActiveIndex(getInitialPickerActiveIndex(filteredOptions, defaultActiveFirstOption));
-  }
-  function closeDropdown() {
-    setIsOpen(false);
-    setActiveIndex(-1);
-  }
-  function constrainToOption() {
-    if (allowFreeInput) return;
-    const match = options.find((o) => !o.disabled && o.label === inputValue);
-    if (match) {
-      if (String(match.value) !== String(value)) {
-        onChange?.(match.value);
-        onSelect?.(match.value, match);
-      }
-      return;
-    }
-    const current = options.find((o) => String(o.value) === String(value));
-    const revertLabel = current ? current.label : "";
-    if (revertLabel !== inputValue) {
-      setUncontrolledSearchValue(revertLabel);
-      onChange?.(current ? current.value : "");
-    }
-  }
-  function handleInput(e) {
-    const val = e.target.value;
-    if (searchValue === void 0) {
-      setUncontrolledSearchValue(val);
-    }
-    onChange?.(val);
-    onSearchChange?.(val);
-    if (!isOpen) {
-      setIsOpen(true);
-    }
-    if (defaultActiveFirstOption) {
-      const newFiltered = filterAutoCompleteOptions(options, val, filterOption);
-      setActiveIndex(getInitialPickerActiveIndex(newFiltered, true));
-    }
-  }
-  function handleSelect(option) {
-    if (option.disabled) return;
-    if (searchValue === void 0) {
-      setUncontrolledSearchValue(option.label);
-    }
-    onSearchChange?.(option.label);
-    onChange?.(option.value);
-    onSelect?.(option.value, option);
-    closeDropdown();
-  }
-  function handleClear(e) {
-    e.stopPropagation();
-    if (searchValue === void 0) {
-      setUncontrolledSearchValue("");
-    }
-    onChange?.("");
-    onSearchChange?.("");
-    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":
-      case "ArrowUp":
-      case "Home":
-      case "End":
-        e.preventDefault();
-        setActiveIndex((prev) => getPickerNavigationIndex(filteredOptions, prev, e.key));
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
-          handleSelect(filteredOptions[activeIndex]);
-        } else {
-          constrainToOption();
-          closeDropdown();
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        closeDropdown();
-        break;
-    }
-  }
-  const containerClasses = classNames(autoCompleteBaseClasses, className);
-  const dropdown = isOpen && (filteredOptions.length > 0 || inputValue) ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: dropdownRef,
-      ...filteredOptions.length > 0 ? getPickerListboxAria({ id: listboxId }) : {},
-      className: classNames(
-        autoCompleteDropdownClasses,
-        filteredOptions.length === 0 && autoCompleteEmptyStateClasses,
-        overlay.floatingClasses
-      ),
-      style: overlay.floatingStyles,
-      "data-positioned": overlay.positioned,
-      children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: getPickerOptionId(listboxId, index),
-          ...getPickerOptionAria({
-            selected: String(option.value) === String(value),
-            disabled: !!option.disabled
-          }),
-          className: getAutoCompleteOptionClasses(
-            String(option.value) === String(value),
-            !!option.disabled,
-            size
-          ),
-          onMouseDown: (event) => event.preventDefault(),
-          onClick: () => handleSelect(option),
-          onMouseEnter: () => setActiveIndex(index),
-          children: option.label
-        },
-        String(option.value)
-      )) : resolvedNotFoundText
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, ...divProps, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        className: getAutoCompleteInputClasses(size, disabled, isOpen),
-        value: inputValue,
-        placeholder,
-        disabled,
-        ...getPickerComboboxAria({ expanded: isOpen, listboxId, activeIndex }),
-        autoComplete: "off",
-        onChange: handleInput,
-        onFocus: openDropdown,
-        onKeyDown: handleKeyDown,
-        onBlur: constrainToOption
-      }
-    ),
-    showClearButton && /* @__PURE__ */ 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": resolveLocaleText("Clear", mergedLocale?.common?.clearText),
-        onClick: handleClear,
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "w-4 h-4",
-            viewBox: icon20ViewBox,
-            fill: "currentColor",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
-          }
-        )
-      }
-    ),
-    renderOverlayPortal(dropdown, overlay.target)
-  ] });
-};
-
-export {
-  AutoComplete
-};

package/dist/chunk-HLS4CHWX.mjs

@@ -1,30 +0,0 @@
-// src/components/Text.tsx
-import React from "react";
-import { classNames, getTextClasses } from "@expcat/tigercat-core";
-var Text = React.memo(
-  ({
-    tag = "p",
-    size,
-    weight,
-    align,
-    color,
-    truncate,
-    italic,
-    underline,
-    lineThrough,
-    children,
-    className,
-    ...props
-  }) => {
-    const textClasses = classNames(
-      getTextClasses({ size, weight, align, color, truncate, italic, underline, lineThrough }),
-      className
-    );
-    return React.createElement(tag, { ...props, className: textClasses }, children);
-  }
-);
-Text.displayName = "Text";
-
-export {
-  Text
-};

package/dist/chunk-HS6KUPTI.mjs

@@ -1,177 +0,0 @@
-import {
-  Modal
-} from "./chunk-54HN5BXW.mjs";
-import {
-  ImageCropper
-} from "./chunk-PD6Q36OO.mjs";
-import {
-  Button
-} from "./chunk-5TE7KLE5.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/CropUpload.tsx
-import { useState, useRef, useCallback, useMemo } from "react";
-import {
-  classNames,
-  cropUploadTriggerClasses,
-  cropUploadTriggerDisabledClasses,
-  uploadPlusIconPath,
-  validateUploadFile,
-  readFileAsDataUrl,
-  getCropperResult,
-  isActivationKey,
-  getImageEditorLabels,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CropUpload = ({
-  locale,
-  accept = "image/*",
-  disabled = false,
-  maxSize,
-  cropperProps,
-  modalTitle,
-  modalWidth = 520,
-  className,
-  children,
-  onCropComplete,
-  onError
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const labels = useMemo(() => getImageEditorLabels(mergedLocale), [mergedLocale]);
-  const fileInputRef = useRef(null);
-  const cropperRef = useRef(null);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [imageSrc, setImageSrc] = useState("");
-  const [cropping, setCropping] = useState(false);
-  const handleTriggerClick = useCallback(() => {
-    if (disabled) return;
-    fileInputRef.current?.click();
-  }, [disabled]);
-  const handleFileChange = useCallback(
-    (e) => {
-      const file = e.target.files?.[0];
-      if (!file) return;
-      const sizeError = validateUploadFile(file, maxSize);
-      if (sizeError) {
-        onError?.(sizeError);
-        e.target.value = "";
-        return;
-      }
-      readFileAsDataUrl(file).then((url) => {
-        setImageSrc(url);
-        setModalVisible(true);
-      }).catch((err) => onError?.(err));
-      e.target.value = "";
-    },
-    [maxSize, onError]
-  );
-  const handleConfirm = useCallback(async () => {
-    if (!cropperRef.current) return;
-    setCropping(true);
-    try {
-      const result = await getCropperResult(
-        cropperRef.current
-      );
-      if (result) {
-        onCropComplete?.(result);
-        setModalVisible(false);
-      }
-    } catch (err) {
-      onError?.(err);
-    } finally {
-      setCropping(false);
-    }
-  }, [onCropComplete, onError]);
-  const handleCancel = useCallback(() => {
-    setModalVisible(false);
-    setImageSrc("");
-  }, []);
-  const triggerClasses = useMemo(
-    () => classNames(disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses, className),
-    [disabled, className]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (isActivationKey(e)) {
-        e.preventDefault();
-        handleTriggerClick();
-      }
-    },
-    [handleTriggerClick]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "tiger-crop-upload inline-block", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        accept,
-        style: { display: "none" },
-        onChange: handleFileChange
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: triggerClasses,
-        onClick: handleTriggerClick,
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-label": labels.selectImageAriaLabel,
-        "aria-disabled": disabled ? "true" : void 0,
-        onKeyDown: handleKeyDown,
-        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "w-5 h-5",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: "2",
-                  d: uploadPlusIconPath
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { children: labels.selectImageText })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Modal,
-      {
-        open: modalVisible,
-        size: "lg",
-        width: modalWidth,
-        title: modalTitle ?? labels.cropModalTitle,
-        className: "tiger-crop-upload-modal",
-        closable: true,
-        maskClosable: false,
-        onClose: handleCancel,
-        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: labels.cropCancelText }),
-          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: labels.cropConfirmText })
-        ] }),
-        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, locale, ...cropperProps })
-      }
-    )
-  ] });
-};
-
-export {
-  CropUpload
-};

package/dist/chunk-I2BENK5X.mjs

@@ -1,149 +0,0 @@
-import {
-  renderBodyPortal,
-  useBodyScrollLock
-} from "./chunk-HKAZXG74.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/Loading.tsx
-import { useEffect, useState, useMemo } from "react";
-import {
-  classNames,
-  resolveLocaleText,
-  mergeTigerLocale,
-  getLoadingBarClasses,
-  getLoadingBarsWrapperClasses,
-  getLoadingClasses,
-  getLoadingDotClasses,
-  getLoadingDotsWrapperClasses,
-  getLoadingTextClasses,
-  getSpinnerSVG,
-  DEFAULT_LOADING_BACKGROUND,
-  loadingContainerBaseClasses,
-  loadingFullscreenBaseClasses,
-  loadingColorClasses,
-  injectLoadingAnimationStyles
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Loading = ({
-  variant = "spinner",
-  size = "md",
-  color = "primary",
-  text,
-  fullscreen = false,
-  delay = 0,
-  background = DEFAULT_LOADING_BACKGROUND,
-  customColor,
-  lockScroll = true,
-  className,
-  style,
-  locale,
-  ...props
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const [visible, setVisible] = useState(delay <= 0);
-  useEffect(() => {
-    injectLoadingAnimationStyles();
-  }, []);
-  useBodyScrollLock({ enabled: fullscreen && visible && lockScroll });
-  useEffect(() => {
-    if (delay <= 0) {
-      setVisible(true);
-      return;
-    }
-    setVisible(false);
-    const timer = setTimeout(() => setVisible(true), delay);
-    return () => clearTimeout(timer);
-  }, [delay]);
-  const containerClasses = useMemo(
-    () => classNames(
-      fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
-      className
-    ),
-    [fullscreen, className]
-  );
-  const mergedStyle = useMemo(
-    () => ({
-      ...customColor ? { color: customColor } : null,
-      ...fullscreen ? { backgroundColor: background } : null,
-      ...style
-    }),
-    [customColor, fullscreen, background, style]
-  );
-  const renderSpinner = () => {
-    const svg = getSpinnerSVG(variant);
-    const spinnerClasses = getLoadingClasses(variant, size, color, customColor);
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: spinnerClasses,
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: svg.viewBox,
-        children: svg.elements.map((el, index) => {
-          if (el.type === "circle") {
-            return /* @__PURE__ */ jsx("circle", { ...el.attrs }, index);
-          } else if (el.type === "path") {
-            return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
-          }
-          return null;
-        })
-      }
-    );
-  };
-  const renderDots = () => {
-    const colorClass = customColor ? "" : loadingColorClasses[color];
-    const steps = [0, 1, 2];
-    return /* @__PURE__ */ jsx("div", { className: getLoadingDotsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsx("div", { className: getLoadingDotClasses(size, i, colorClass) }, i)) });
-  };
-  const renderBars = () => {
-    const colorClass = customColor ? "" : loadingColorClasses[color];
-    const steps = [0, 1, 2];
-    return /* @__PURE__ */ jsx("div", { className: getLoadingBarsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsx("div", { className: getLoadingBarClasses(size, i, colorClass) }, i)) });
-  };
-  const renderIndicator = () => {
-    switch (variant) {
-      case "dots":
-        return renderDots();
-      case "bars":
-        return renderBars();
-      case "spinner":
-      case "ring":
-      case "pulse":
-      default:
-        return renderSpinner();
-    }
-  };
-  if (!visible) {
-    return null;
-  }
-  const loadingNode = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: containerClasses,
-      style: mergedStyle,
-      role: "status",
-      "aria-label": text || resolveLocaleText("Loading", mergedLocale?.common?.loadingText),
-      "aria-live": "polite",
-      "aria-busy": true,
-      ...props,
-      children: [
-        renderIndicator(),
-        text && /* @__PURE__ */ jsx("div", { className: getLoadingTextClasses(size, color, customColor), children: text })
-      ]
-    }
-  );
-  if (fullscreen) {
-    return renderBodyPortal(loadingNode);
-  }
-  return loadingNode;
-};
-
-export {
-  Loading
-};