@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-3GPGSNOQ.mjs

@@ -1,258 +0,0 @@
-import {
-  renderOverlayPortal,
-  useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/ColorPicker.tsx
-import { useState, useMemo, useRef, useEffect } from "react";
-import {
-  colorPickerBaseClasses,
-  getColorPickerTriggerClasses,
-  colorPickerPanelClasses,
-  colorPickerInputClasses,
-  colorPickerPresetClasses,
-  rgbToHex,
-  rgbToHsv,
-  hsvToRgb,
-  formatColorString,
-  parseColorInput,
-  parseColorParts,
-  classNames,
-  mergeTigerLocale,
-  getColorPickerLabels,
-  formatColorPickerSelectPreset
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-function rgbFromValue(value) {
-  const parts = parseColorParts(value);
-  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
-}
-function explicitAlphaFromValue(value) {
-  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
-  const parts = parseColorParts(value);
-  return parts ? parts.a : null;
-}
-var ColorPicker = ({
-  value = "#2563eb",
-  disabled = false,
-  size = "md",
-  showAlpha = false,
-  format = "hex",
-  presets,
-  className,
-  locale,
-  labels: labelsOverride,
-  onChange
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const labels = useMemo(
-    () => getColorPickerLabels(mergedLocale, labelsOverride),
-    [mergedLocale, labelsOverride]
-  );
-  const [isOpen, setIsOpen] = useState(false);
-  const [alpha, setAlpha] = useState(() => explicitAlphaFromValue(value) ?? 1);
-  const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const overlay = useAnchoredOverlay({
-    enabled: isOpen,
-    referenceRef: triggerRef,
-    floatingRef: panelRef,
-    containerRef,
-    placement: "bottom-start",
-    offset: 4,
-    dismissOnOutside: true,
-    dismissOnEscape: true,
-    restoreFocusOnDismiss: true,
-    onDismiss: () => setIsOpen(false)
-  });
-  const rgb = useMemo(() => rgbFromValue(value), [value]);
-  const hsv = useMemo(() => rgbToHsv(rgb.r, rgb.g, rgb.b), [rgb]);
-  useEffect(() => {
-    const next = explicitAlphaFromValue(value);
-    if (next !== null) setAlpha(next);
-  }, [value]);
-  const displayValue = useMemo(
-    () => formatColorString(rgb.r, rgb.g, rgb.b, format, showAlpha ? alpha : void 0),
-    [rgb, format, showAlpha, alpha]
-  );
-  const swatchColor = showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : value;
-  const [inputValue, setInputValue] = useState(displayValue);
-  useEffect(() => {
-    setInputValue(displayValue);
-  }, [displayValue]);
-  function togglePanel() {
-    if (disabled) return;
-    setIsOpen((v) => !v);
-  }
-  function handleTriggerKeyDown(e) {
-    if (disabled) return;
-    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-      e.preventDefault();
-      setIsOpen((v) => !v);
-    } else if (e.key === "Escape" && isOpen) {
-      setIsOpen(false);
-    }
-  }
-  function handleHueChange(e) {
-    const hue = Number(e.target.value);
-    const { r, g, b } = hsvToRgb(hue, hsv.s, hsv.v);
-    const hex = rgbToHex(r, g, b);
-    onChange?.(hex);
-  }
-  function handleInputChange(e) {
-    const val = e.target.value;
-    setInputValue(val);
-    const parsed = parseColorInput(val);
-    if (parsed) {
-      onChange?.(parsed);
-    }
-  }
-  function handleAlphaChange(e) {
-    const nextAlpha = Number(e.target.value) / 100;
-    setAlpha(nextAlpha);
-    const emitFormat = format === "hex" ? "rgb" : format;
-    const next = formatColorString(rgb.r, rgb.g, rgb.b, emitFormat, nextAlpha);
-    onChange?.(next);
-  }
-  function handlePresetClick(color) {
-    onChange?.(color);
-  }
-  function handlePresetKeyDown(e, color) {
-    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-      e.preventDefault();
-      handlePresetClick(color);
-    }
-  }
-  function handleClear() {
-    onChange?.("");
-  }
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: triggerRef,
-        className: getColorPickerTriggerClasses(size, disabled),
-        style: { backgroundColor: swatchColor },
-        role: "button",
-        "data-tiger-colorpicker-trigger": "",
-        "aria-label": labels.trigger,
-        title: labels.trigger,
-        "aria-haspopup": "dialog",
-        "aria-expanded": isOpen,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : 0,
-        onClick: togglePanel,
-        onKeyDown: handleTriggerKeyDown
-      }
-    ),
-    renderOverlayPortal(
-      isOpen ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          className: classNames(colorPickerPanelClasses, overlay.floatingClasses),
-          style: overlay.floatingStyles,
-          "data-positioned": overlay.positioned,
-          "data-tiger-colorpicker-panel": "",
-          role: "dialog",
-          "aria-label": labels.panelTitle,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--tiger-text,#111827)]", children: labels.panelTitle }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "text-xs text-[var(--tiger-primary,#2563eb)] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-primary,#2563eb)]",
-                  "data-tiger-colorpicker-clear": "",
-                  onClick: handleClear,
-                  children: labels.clear
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.hue }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "range",
-                  min: 0,
-                  max: 360,
-                  value: hsv.h,
-                  className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": labels.hue,
-                  onChange: handleHueChange
-                }
-              )
-            ] }),
-            showAlpha && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.alpha }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "range",
-                  min: 0,
-                  max: 100,
-                  value: Math.round(alpha * 100),
-                  className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": labels.alpha,
-                  onChange: handleAlphaChange
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase", children: format }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  className: colorPickerInputClasses,
-                  value: inputValue,
-                  "aria-label": labels.value,
-                  onChange: handleInputChange
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
-                  style: { backgroundColor: swatchColor },
-                  "aria-label": labels.preview
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: displayValue })
-            ] }),
-            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: colorPickerPresetClasses,
-                style: { backgroundColor: color },
-                role: "button",
-                tabIndex: 0,
-                "aria-label": formatColorPickerSelectPreset(labels.selectPreset, color),
-                onClick: () => handlePresetClick(color),
-                onKeyDown: (e) => handlePresetKeyDown(e, color)
-              },
-              color
-            )) })
-          ]
-        }
-      ) : null,
-      overlay.target
-    )
-  ] });
-};
-
-export {
-  ColorPicker
-};

package/dist/chunk-3LACOSJQ.mjs

@@ -1,65 +0,0 @@
-import {
-  ImagePreview
-} from "./chunk-V7HJ5HLC.mjs";
-
-// src/components/ImageGroup.tsx
-import { useState, useCallback, useMemo, createContext, useRef } from "react";
-import {
-  getImageGroupClasses,
-  registerImageGroupItem,
-  unregisterImageGroupItem
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ImageGroupContext = createContext(null);
-var ImageGroup = ({
-  preview = true,
-  onPreviewOpenChange,
-  children,
-  className
-}) => {
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const [previewIndex, setPreviewIndex] = useState(0);
-  const imagesRef = useRef([]);
-  const register = useCallback((src) => {
-    const result = registerImageGroupItem(imagesRef.current, src);
-    imagesRef.current = result.items;
-    return result.index;
-  }, []);
-  const unregister = useCallback((src) => {
-    imagesRef.current = unregisterImageGroupItem(imagesRef.current, src);
-  }, []);
-  const openPreview = useCallback(
-    (index) => {
-      if (!preview) return;
-      setPreviewIndex(index);
-      setPreviewVisible(true);
-      onPreviewOpenChange?.(true);
-    },
-    [preview, onPreviewOpenChange]
-  );
-  const contextValue = useMemo(
-    () => ({ register, unregister, openPreview }),
-    [register, unregister, openPreview]
-  );
-  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: getImageGroupClasses(className), role: "group", children: [
-    children,
-    preview && /* @__PURE__ */ jsx(
-      ImagePreview,
-      {
-        open: previewVisible,
-        images: imagesRef.current,
-        currentIndex: previewIndex,
-        onOpenChange: (val) => {
-          setPreviewVisible(val);
-          if (!val) onPreviewOpenChange?.(false);
-        },
-        onCurrentIndexChange: setPreviewIndex
-      }
-    )
-  ] }) });
-};
-
-export {
-  ImageGroupContext,
-  ImageGroup
-};

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
-};