@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-3LDDXHW2.mjs

@@ -1,217 +0,0 @@
-import {
-  useFormItemControlContext
-} from "./chunk-F6T3OLTQ.mjs";
-import {
-  useInputGroupContext
-} from "./chunk-34VGG7AK.mjs";
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-
-// src/components/Input.tsx
-import { useState, useEffect, useRef, useCallback, useId } from "react";
-import {
-  classNames,
-  getInputFieldClasses,
-  getInputWrapperClasses,
-  getInputAffixClasses,
-  getInputErrorClasses,
-  getInputClearButtonClasses,
-  getInputPasswordToggleClasses,
-  getInputCountClasses,
-  parseInputValue,
-  injectShakeStyle,
-  SHAKE_CLASS
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Input = ({
-  size,
-  type = "text",
-  status: statusProp,
-  errorMessage: errorMessageProp,
-  _shakeTrigger: shakeTriggerProp,
-  prefix,
-  suffix,
-  value,
-  defaultValue,
-  placeholder = "",
-  disabled = false,
-  readonly = false,
-  required = false,
-  maxLength,
-  minLength,
-  name,
-  id,
-  autoComplete,
-  autoFocus = false,
-  clearable = false,
-  showPassword = false,
-  showCount = false,
-  onInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onClear,
-  className,
-  style,
-  ...props
-}) => {
-  injectShakeStyle();
-  const inputGroup = useInputGroupContext();
-  const formItemControl = useFormItemControlContext();
-  const effectiveSize = size ?? inputGroup?.size ?? "md";
-  const status = statusProp ?? formItemControl?.status ?? "default";
-  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
-  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
-  const wrapperRef = useRef(null);
-  const inputRef = useRef(null);
-  const reactId = useId();
-  const errorMsgId = `tiger-input-error-${reactId}`;
-  const [inputValue, setInputValue] = useControlledState(value, defaultValue ?? "");
-  const [passwordVisible, setPasswordVisible] = useState(false);
-  useEffect(() => {
-    if (status === "error" && wrapperRef.current) {
-      const el = wrapperRef.current;
-      el.classList.remove(SHAKE_CLASS);
-      void el.offsetWidth;
-      el.classList.add(SHAKE_CLASS);
-    }
-  }, [status, shakeTrigger]);
-  const handleAnimationEnd = useCallback(() => {
-    wrapperRef.current?.classList.remove(SHAKE_CLASS);
-  }, []);
-  const currentValStr = String(inputValue);
-  const handleInput = (event) => {
-    setInputValue(parseInputValue(event.currentTarget, type));
-    onInput?.(event);
-  };
-  const handleChange = (event) => {
-    setInputValue(parseInputValue(event.currentTarget, type));
-    onChange?.(event);
-  };
-  const handleClear = () => {
-    setInputValue("");
-    onClear?.();
-    inputRef.current?.focus();
-  };
-  const togglePasswordVisibility = () => {
-    setPasswordVisible((v) => !v);
-  };
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix || clearable || showPassword;
-  const activeError = status === "error" && !!errorMessage;
-  const showClear = clearable && !disabled && !readonly && currentValStr.length > 0;
-  const showPasswordToggle = showPassword && type === "password" && !disabled;
-  const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
-  const inputClasses = getInputFieldClasses({
-    size: effectiveSize,
-    status,
-    hasPrefix,
-    hasSuffix
-  });
-  const renderSuffix = () => {
-    if (showClear) {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getInputClearButtonClasses(effectiveSize),
-          onClick: handleClear,
-          "aria-label": "Clear input",
-          tabIndex: -1,
-          children: "\u2715"
-        }
-      );
-    }
-    if (showPasswordToggle) {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getInputPasswordToggleClasses(effectiveSize),
-          onClick: togglePasswordVisibility,
-          "aria-label": passwordVisible ? "Hide password" : "Show password",
-          tabIndex: -1,
-          children: passwordVisible ? "\u{1F648}" : "\u{1F441}"
-        }
-      );
-    }
-    if (suffix) {
-      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", effectiveSize), children: suffix });
-    }
-    return null;
-  };
-  const wrapperNode = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: classNames(getInputWrapperClasses(status), className),
-      style,
-      onAnimationEnd: handleAnimationEnd,
-      children: [
-        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", effectiveSize), children: prefix }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...props,
-            ref: inputRef,
-            className: inputClasses,
-            type: effectiveType,
-            value: inputValue,
-            placeholder,
-            disabled,
-            readOnly: readonly,
-            required,
-            maxLength,
-            minLength,
-            name,
-            id,
-            autoComplete,
-            autoFocus,
-            ...status === "error" ? { "aria-invalid": true } : {},
-            ...activeError ? { "aria-describedby": errorMsgId } : {},
-            onInput: handleInput,
-            onChange: handleChange,
-            onFocus,
-            onBlur
-          }
-        ),
-        renderSuffix()
-      ]
-    }
-  );
-  const extras = [];
-  if (activeError) {
-    extras.push(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: errorMsgId,
-          className: getInputErrorClasses(effectiveSize),
-          "aria-live": "polite",
-          children: errorMessage
-        },
-        "error"
-      )
-    );
-  }
-  if (showCount) {
-    const count = currentValStr.length;
-    const isOver = maxLength !== void 0 && count > maxLength;
-    const countText = maxLength !== void 0 ? `${count} / ${maxLength}` : `${count}`;
-    extras.push(
-      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText }, "count")
-    );
-  }
-  if (extras.length === 0) {
-    return wrapperNode;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    wrapperNode,
-    extras
-  ] });
-};
-
-export {
-  Input
-};

package/dist/chunk-3O3AQLNS.mjs

@@ -1,172 +0,0 @@
-// src/hooks/useFormController.ts
-import { useState, useCallback, useMemo, useRef } from "react";
-import {
-  validateForm,
-  validateField as validateFieldUtil,
-  getValueByPath,
-  createFormErrorMap,
-  clearFieldErrors,
-  createFormHistory,
-  pushFormHistory,
-  undoFormHistory,
-  redoFormHistory,
-  canUndo as canUndoFn,
-  canRedo as canRedoFn
-} from "@expcat/tigercat-core";
-function useFormController(options = {}) {
-  const { initialValues = {}, rules, undoable = false, maxHistorySize = 50 } = options;
-  const [values, setValues] = useState(() => ({ ...initialValues }));
-  const [errors, setErrors] = useState([]);
-  const valuesRef = useRef(values);
-  valuesRef.current = values;
-  const rulesRef = useRef(rules);
-  rulesRef.current = rules;
-  const initialRef = useRef(initialValues);
-  const [history, setHistory] = useState(
-    () => undoable ? createFormHistory(initialValues, maxHistorySize) : null
-  );
-  const errorsByField = useMemo(() => createFormErrorMap(errors), [errors]);
-  const hasErrors = errors.length > 0;
-  const setFieldValue = useCallback(
-    (fieldName, value) => {
-      setValues((prev) => {
-        const next = { ...prev, [fieldName]: value };
-        valuesRef.current = next;
-        return next;
-      });
-      if (undoable) {
-        setHistory(
-          (h) => h ? pushFormHistory(h, { ...valuesRef.current, [fieldName]: value }) : h
-        );
-      }
-    },
-    [undoable]
-  );
-  const setBulkValues = useCallback(
-    (partial) => {
-      setValues((prev) => {
-        const next = { ...prev, ...partial };
-        valuesRef.current = next;
-        return next;
-      });
-      if (undoable) {
-        setHistory((h) => h ? pushFormHistory(h, { ...valuesRef.current, ...partial }) : h);
-      }
-    },
-    [undoable]
-  );
-  const getFieldValue = useCallback(
-    (fieldName) => getValueByPath(valuesRef.current, fieldName),
-    []
-  );
-  const validate = useCallback(async () => {
-    const r = rulesRef.current;
-    if (!r) {
-      setErrors([]);
-      return true;
-    }
-    const result = await validateForm(valuesRef.current, r);
-    setErrors(result.errors);
-    return result.valid;
-  }, []);
-  const validateFields = useCallback(async (fieldNames) => {
-    const r = rulesRef.current;
-    if (!r || fieldNames.length === 0) return true;
-    const nextErrors = [];
-    for (const name of fieldNames) {
-      const fieldRules = r[name];
-      if (!fieldRules) continue;
-      const error = await validateFieldUtil(
-        name,
-        getValueByPath(valuesRef.current, name),
-        fieldRules,
-        valuesRef.current
-      );
-      if (error) nextErrors.push({ field: name, message: error });
-    }
-    const fieldSet = new Set(fieldNames);
-    setErrors((prev) => [...prev.filter((e) => !fieldSet.has(e.field)), ...nextErrors]);
-    return nextErrors.length === 0;
-  }, []);
-  const validateField = useCallback(async (fieldName) => {
-    const r = rulesRef.current;
-    const fieldRules = r?.[fieldName];
-    if (!fieldRules) return null;
-    const error = await validateFieldUtil(
-      fieldName,
-      getValueByPath(valuesRef.current, fieldName),
-      fieldRules,
-      valuesRef.current
-    );
-    setErrors((prev) => {
-      const filtered = prev.filter((e) => e.field !== fieldName);
-      return error ? [...filtered, { field: fieldName, message: error }] : filtered;
-    });
-    return error;
-  }, []);
-  const clearValidate = useCallback((fieldNames) => {
-    if (!fieldNames) {
-      setErrors([]);
-      return;
-    }
-    const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
-    setErrors((prev) => clearFieldErrors(fields, prev));
-  }, []);
-  const reset = useCallback(() => {
-    const init = { ...initialRef.current };
-    setValues(init);
-    valuesRef.current = init;
-    setErrors([]);
-    if (undoable) {
-      setHistory(createFormHistory(init, maxHistorySize));
-    }
-  }, [undoable, maxHistorySize]);
-  const undo = useCallback(() => {
-    if (!undoable) return;
-    setHistory((h) => {
-      if (!h) return h;
-      const next = undoFormHistory(h);
-      if (!next) return h;
-      setValues(next.present);
-      valuesRef.current = next.present;
-      return next;
-    });
-  }, [undoable]);
-  const redo = useCallback(() => {
-    if (!undoable) return;
-    setHistory((h) => {
-      if (!h) return h;
-      const next = redoFormHistory(h);
-      if (!next) return h;
-      setValues(next.present);
-      valuesRef.current = next.present;
-      return next;
-    });
-  }, [undoable]);
-  return {
-    values,
-    errors,
-    errorsByField,
-    hasErrors,
-    setFieldValue,
-    setValues: setBulkValues,
-    getFieldValue,
-    validate,
-    validateFields,
-    validateField,
-    clearValidate,
-    reset,
-    undo,
-    redo,
-    get canUndo() {
-      return undoable && history != null && canUndoFn(history);
-    },
-    get canRedo() {
-      return undoable && history != null && canRedoFn(history);
-    }
-  };
-}
-
-export {
-  useFormController
-};

package/dist/chunk-3QNIFKVF.mjs

@@ -1,232 +0,0 @@
-// src/components/Anchor.tsx
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef
-} from "react";
-import {
-  classNames,
-  getAnchorWrapperClasses,
-  getAnchorInkContainerClasses,
-  getAnchorInkActiveClasses,
-  getAnchorLinkClasses,
-  getAnchorLinkListClasses,
-  createAnchorObserver,
-  createProgrammaticScrollLock,
-  scrollToAnchor
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AnchorContext = createContext(null);
-function useAnchorContext() {
-  return useContext(AnchorContext);
-}
-var AnchorLink = ({
-  href,
-  title,
-  target,
-  className,
-  children,
-  ...props
-}) => {
-  const anchorContext = useAnchorContext();
-  const register = anchorContext?.registerLink;
-  const unregister = anchorContext?.unregisterLink;
-  useEffect(() => {
-    if (href) {
-      register?.(href);
-    }
-    return () => {
-      unregister?.(href);
-    };
-  }, [href, register, unregister]);
-  const handleClick = (event) => {
-    event.preventDefault();
-    anchorContext?.handleLinkClick(href, event);
-  };
-  const linkClasses = useMemo(() => {
-    const isActive = anchorContext?.activeLink === href;
-    return classNames(getAnchorLinkClasses(isActive, className));
-  }, [anchorContext?.activeLink, href, className]);
-  const hasNestedLinks = React.Children.toArray(children).some(
-    (child) => React.isValidElement(child) && child.type === AnchorLink
-  );
-  if (hasNestedLinks) {
-    return /* @__PURE__ */ jsxs("div", { className: "anchor-link-wrapper", children: [
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href,
-          target,
-          className: linkClasses,
-          "data-anchor-href": href,
-          onClick: handleClick,
-          ...props,
-          children: title
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "pl-3 mt-1 space-y-1", children })
-    ] });
-  }
-  const content = children ?? title;
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      target,
-      className: linkClasses,
-      "data-anchor-href": href,
-      onClick: handleClick,
-      ...props,
-      children: content
-    }
-  );
-};
-var Anchor = ({
-  affix = true,
-  bounds = 5,
-  offsetTop = 0,
-  showInkInFixed = false,
-  targetOffset,
-  getCurrentAnchor,
-  getContainer = () => window,
-  direction = "vertical",
-  className,
-  style,
-  onClick,
-  onChange,
-  children
-}) => {
-  const [activeLink, setActiveLink] = useState("");
-  const [links, setLinks] = useState([]);
-  const anchorRef = useRef(null);
-  const inkRef = useRef(null);
-  const getContainerRef = useRef(getContainer);
-  getContainerRef.current = getContainer;
-  const scrollLockRef = useRef(createProgrammaticScrollLock(() => getContainerRef.current()));
-  const getCurrentAnchorRef = useRef(getCurrentAnchor);
-  getCurrentAnchorRef.current = getCurrentAnchor;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const scrollOffset = useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
-  const registerLink = useCallback((href) => {
-    setLinks((prevLinks) => {
-      if (href && !prevLinks.includes(href)) {
-        return [...prevLinks, href];
-      }
-      return prevLinks;
-    });
-  }, []);
-  const unregisterLink = useCallback((href) => {
-    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
-  }, []);
-  const scrollTo = useCallback(
-    (href) => {
-      const container = getContainerRef.current();
-      scrollToAnchor(href, container, scrollOffset);
-    },
-    [scrollOffset]
-  );
-  const handleLinkClick = useCallback(
-    (href, event) => {
-      onClick?.(event, href);
-      scrollLockRef.current.lock();
-      setActiveLink(href);
-      scrollTo(href);
-    },
-    [onClick, scrollTo]
-  );
-  useEffect(() => {
-    let stop = null;
-    const timeoutId = setTimeout(() => {
-      const container = getContainerRef.current();
-      const root = container === window ? null : container;
-      stop = createAnchorObserver(links, {
-        offsetTop: scrollOffset,
-        bounds,
-        root,
-        onChange: (newActiveLink) => {
-          if (scrollLockRef.current.isLocked()) return;
-          const finalActiveLink = getCurrentAnchorRef.current ? getCurrentAnchorRef.current(newActiveLink) : newActiveLink;
-          setActiveLink((prev) => {
-            if (finalActiveLink !== prev) {
-              onChangeRef.current?.(finalActiveLink);
-              return finalActiveLink;
-            }
-            return prev;
-          });
-        }
-      });
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      stop?.();
-    };
-  }, [bounds, links, scrollOffset]);
-  useEffect(() => {
-    return () => {
-      scrollLockRef.current.dispose();
-    };
-  }, []);
-  useEffect(() => {
-    if (!inkRef.current || !anchorRef.current || !activeLink) {
-      return;
-    }
-    const activeLinkElement = anchorRef.current.querySelector(
-      `[data-anchor-href="${activeLink}"]`
-    );
-    if (!activeLinkElement) {
-      return;
-    }
-    const anchorRect = anchorRef.current.getBoundingClientRect();
-    const linkRect = activeLinkElement.getBoundingClientRect();
-    if (direction === "vertical") {
-      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
-      inkRef.current.style.height = `${linkRect.height}px`;
-    } else {
-      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
-      inkRef.current.style.width = `${linkRect.width}px`;
-    }
-  }, [activeLink, direction]);
-  const wrapperClasses = useMemo(
-    () => classNames(getAnchorWrapperClasses(affix, className)),
-    [affix, className]
-  );
-  const inkContainerClasses = useMemo(() => getAnchorInkContainerClasses(direction), [direction]);
-  const inkActiveClasses = useMemo(() => getAnchorInkActiveClasses(direction), [direction]);
-  const linkListClasses = useMemo(() => getAnchorLinkListClasses(direction), [direction]);
-  const showInk = useMemo(() => !affix || showInkInFixed, [affix, showInkInFixed]);
-  const wrapperStyle = useMemo(() => {
-    const baseStyle = {};
-    if (affix && offsetTop > 0) {
-      baseStyle.top = `${offsetTop}px`;
-    }
-    return { ...baseStyle, ...style };
-  }, [affix, offsetTop, style]);
-  const contextValue = useMemo(
-    () => ({
-      activeLink,
-      direction,
-      registerLink,
-      unregisterLink,
-      handleLinkClick,
-      scrollTo
-    }),
-    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
-  );
-  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
-    showInk && /* @__PURE__ */ jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
-    /* @__PURE__ */ jsx("div", { className: linkListClasses, children })
-  ] }) });
-};
-var Anchor_default = Anchor;
-
-export {
-  useAnchorContext,
-  AnchorLink,
-  Anchor,
-  Anchor_default
-};

package/dist/chunk-5P5M656V.mjs

@@ -1,81 +0,0 @@
-// src/components/Skeleton.tsx
-import {
-  classNames,
-  getParagraphRowWidth,
-  getSkeletonClasses,
-  getSkeletonDimensions
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var Skeleton = ({
-  variant = "text",
-  animation = "pulse",
-  width,
-  height,
-  shape = "circle",
-  rows = 1,
-  paragraph = false,
-  className,
-  style,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-hidden": ariaHidden,
-  ...divProps
-}) => {
-  const visualClasses = getSkeletonClasses(variant, animation, shape);
-  const dimensions = getSkeletonDimensions(variant, width, height);
-  const computedAriaHidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? void 0 : true);
-  if (variant === "text" && rows > 1) {
-    const rowElements = [];
-    for (let i = 0; i < rows; i++) {
-      const rowStyle = {
-        height: dimensions.height
-      };
-      if (paragraph) {
-        rowStyle.width = getParagraphRowWidth(i, rows);
-      } else if (dimensions.width) {
-        rowStyle.width = dimensions.width;
-      }
-      rowElements.push(
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(visualClasses, i < rows - 1 && "mb-2"),
-            style: rowStyle
-          },
-          i
-        )
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...divProps,
-        className: classNames("flex flex-col", className),
-        style,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-hidden": computedAriaHidden,
-        children: rowElements
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...divProps,
-      className: classNames(visualClasses, className),
-      style: {
-        ...style,
-        ...dimensions.width ? { width: dimensions.width } : void 0,
-        height: dimensions.height
-      },
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-hidden": computedAriaHidden
-    }
-  );
-};
-
-export {
-  Skeleton
-};