@expcat/tigercat-react 2.0.4 → 2.1.0

package/dist/chunk-NLGLBTSM.mjs

@@ -0,0 +1,138 @@
+import {
+  Button
+} from "./chunk-5TE7KLE5.mjs";
+import {
+  Link
+} from "./chunk-XZVQ3PJS.mjs";
+
+// src/components/PageHeader.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import {
+  chevronLeftSolidIcon20PathD,
+  composeComponentClasses,
+  getPageHeaderBackButtonClasses,
+  getPageHeaderRootClasses,
+  hasPageHeaderHeadingContent,
+  icon20ViewBox,
+  pageHeaderActionsClasses,
+  pageHeaderBackIconClasses,
+  pageHeaderBackWrapClasses,
+  pageHeaderContentClasses,
+  pageHeaderHeadingRowClasses,
+  pageHeaderMainClasses,
+  pageHeaderStartClasses,
+  pageHeaderSubtitleClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTitleRowClasses,
+  resolvePageHeaderBackAriaLabel,
+  resolvePageHeaderBackVisibility
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: pageHeaderBackIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+    }
+  );
+}
+var PageHeader = forwardRef(
+  ({
+    showBack,
+    backHref,
+    backAriaLabel,
+    title,
+    subTitle,
+    breadcrumb,
+    actions,
+    back,
+    onBack,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const hasBackOverride = back != null && back !== false;
+    const hasBreadcrumb = breadcrumb != null && breadcrumb !== false;
+    const hasTitle = title != null && title !== false && title !== "";
+    const hasSubtitle = subTitle != null && subTitle !== false && subTitle !== "";
+    const hasActions = actions != null && actions !== false;
+    const hasBody = children != null && children !== false;
+    const showBackControl = resolvePageHeaderBackVisibility({
+      showBack,
+      hasHandler: Boolean(onBack),
+      hasBackHref: Boolean(backHref),
+      hasBackOverride
+    });
+    const showHeading = hasPageHeaderHeadingContent({
+      showBack: showBackControl,
+      hasBreadcrumb,
+      hasTitle,
+      hasSubtitle,
+      hasActions
+    });
+    const resolvedBackAriaLabel = resolvePageHeaderBackAriaLabel(backAriaLabel);
+    const rootClasses = useMemo(
+      () => composeComponentClasses(getPageHeaderRootClasses(className)),
+      [className]
+    );
+    const backButtonClasses = useMemo(() => getPageHeaderBackButtonClasses(), []);
+    const handleBack = useCallback(
+      (event) => {
+        onBack?.(event);
+      },
+      [onBack]
+    );
+    const defaultBackControl = backHref ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: backHref,
+        underline: false,
+        variant: "default",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    );
+    return /* @__PURE__ */ jsxs("header", { ...rest, ref, "data-page-header": "", className: rootClasses, style, children: [
+      showHeading ? /* @__PURE__ */ jsxs("div", { className: pageHeaderHeadingRowClasses, "data-page-header-heading": "", children: [
+        /* @__PURE__ */ jsxs("div", { className: pageHeaderStartClasses, children: [
+          showBackControl ? /* @__PURE__ */ jsx("div", { className: pageHeaderBackWrapClasses, "data-page-header-back": "", children: hasBackOverride ? back : defaultBackControl }) : null,
+          hasBreadcrumb || hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderMainClasses, children: [
+            hasBreadcrumb ? breadcrumb : null,
+            hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleRowClasses, children: [
+              hasTitle ? /* @__PURE__ */ jsx("div", { className: pageHeaderTitleClasses, "data-page-header-title": "", children: title }) : null,
+              hasSubtitle ? /* @__PURE__ */ jsx("div", { className: pageHeaderSubtitleClasses, "data-page-header-subtitle": "", children: subTitle }) : null
+            ] }) : null
+          ] }) : null
+        ] }),
+        hasActions ? /* @__PURE__ */ jsx("div", { className: pageHeaderActionsClasses, "data-page-header-actions": "", children: actions }) : null
+      ] }) : null,
+      hasBody ? /* @__PURE__ */ jsx("div", { className: pageHeaderContentClasses, children }) : null
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+var PageHeader_default = PageHeader;
+
+export {
+  PageHeader,
+  PageHeader_default
+};

package/dist/chunk-NT7GW2FD.mjs

@@ -0,0 +1,40 @@
+// src/components/AspectRatio.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  getAspectRatioContentClasses,
+  getAspectRatioRootClasses,
+  getAspectRatioStyle,
+  ASPECT_RATIO_DEFAULT
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var AspectRatio = forwardRef(
+  ({
+    ratio = ASPECT_RATIO_DEFAULT,
+    className,
+    contentClassName,
+    children,
+    style: styleProp,
+    ...rest
+  }, ref) => {
+    const rootClasses = useMemo(() => getAspectRatioRootClasses(className), [className]);
+    const contentClasses = useMemo(
+      () => getAspectRatioContentClasses(contentClassName),
+      [contentClassName]
+    );
+    const style = useMemo(
+      () => ({
+        ...getAspectRatioStyle(ratio),
+        ...styleProp
+      }),
+      [ratio, styleProp]
+    );
+    return /* @__PURE__ */ jsx("div", { ref, "data-aspect-ratio": "", className: rootClasses, style, ...rest, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var AspectRatio_default = AspectRatio;
+
+export {
+  AspectRatio,
+  AspectRatio_default
+};

package/dist/chunk-OKYMTHFQ.mjs

@@ -0,0 +1,279 @@
+// src/components/ImageCompare.tsx
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import {
+  getImageCompareAfterClasses,
+  getImageCompareBeforeClasses,
+  getImageCompareClipStyle,
+  getImageCompareHandleClasses,
+  getImageCompareHandleStyle,
+  getImageCompareImgClasses,
+  getImageCompareKeyboardPosition,
+  getImageCompareKnobClasses,
+  getImageCompareLineClasses,
+  getImageComparePointerClientPoint,
+  getImageComparePositionFromPointer,
+  getImageCompareRootClasses,
+  getImageCompareRootStyle,
+  isImageCompareInteractiveTarget,
+  isImageCompareVertical,
+  resolveImageCompareAriaLabel,
+  resolveImageCompareFit,
+  resolveImageCompareOrientation,
+  resolveImageComparePosition,
+  resolveImageCompareStep
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderPaneContent(slot, src, alt, fit) {
+  if (slot != null) return slot;
+  if (!src) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: getImageCompareImgClasses(resolveImageCompareFit(fit)),
+      draggable: false
+    }
+  );
+}
+var ImageCompare = forwardRef(
+  ({
+    beforeSrc,
+    afterSrc,
+    beforeAlt = "",
+    afterAlt = "",
+    fit,
+    position: controlledPosition,
+    defaultPosition,
+    orientation,
+    step,
+    disabled = false,
+    width,
+    height,
+    ariaLabel,
+    className,
+    style,
+    before,
+    after,
+    onChange,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const {
+      "aria-label": ariaLabelAttr,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      ...domProps
+    } = rest;
+    const resolvedOrientation = resolveImageCompareOrientation(orientation);
+    const resolvedStep = resolveImageCompareStep(step);
+    const [uncontrolledPosition, setUncontrolledPosition] = useState(
+      () => resolveImageComparePosition(controlledPosition ?? defaultPosition, step)
+    );
+    const [dragging, setDragging] = useState(false);
+    const rootRef = useRef(null);
+    const handleRef = useRef(null);
+    const draggingRef = useRef(false);
+    const isControlled = controlledPosition !== void 0;
+    const current = resolveImageComparePosition(
+      isControlled ? controlledPosition : uncontrolledPosition,
+      step
+    );
+    const vertical = isImageCompareVertical(resolvedOrientation);
+    const resolvedAriaLabel = resolveImageCompareAriaLabel(
+      typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
+    );
+    const setRootRef = useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const commit = useCallback(
+      (next) => {
+        const resolved = resolveImageComparePosition(next, step);
+        if (!isControlled) setUncontrolledPosition(resolved);
+        onChange?.(resolved);
+      },
+      [isControlled, onChange, step]
+    );
+    const positionFromEvent = useCallback(
+      (event) => {
+        const root = rootRef.current;
+        const source = "nativeEvent" in event ? event.nativeEvent : event;
+        const point = getImageComparePointerClientPoint(source);
+        if (!root || !point) return null;
+        return getImageComparePositionFromPointer({
+          clientX: point.clientX,
+          clientY: point.clientY,
+          rect: root.getBoundingClientRect(),
+          orientation: resolvedOrientation,
+          step: resolvedStep
+        });
+      },
+      [resolvedOrientation, resolvedStep]
+    );
+    const handleMove = useCallback(
+      (event) => {
+        if (disabled || !draggingRef.current) return;
+        const next = positionFromEvent(event);
+        if (next === null) return;
+        commit(next);
+      },
+      [commit, disabled, positionFromEvent]
+    );
+    const handleEnd = useCallback(() => {
+      draggingRef.current = false;
+      setDragging(false);
+    }, []);
+    useEffect(() => {
+      if (!dragging) return;
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleMove);
+      document.addEventListener("touchend", handleEnd);
+      return () => {
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("touchend", handleEnd);
+      };
+    }, [dragging, handleEnd, handleMove]);
+    const startDrag = useCallback(
+      (event) => {
+        if (disabled) return;
+        if ("button" in event && event.button !== 0) return;
+        if (isImageCompareInteractiveTarget(event.target, handleRef.current)) return;
+        event.preventDefault();
+        draggingRef.current = true;
+        setDragging(true);
+        const next = positionFromEvent(event);
+        if (next !== null) commit(next);
+        handleRef.current?.focus();
+      },
+      [commit, disabled, positionFromEvent]
+    );
+    const handleMouseDown = useCallback(
+      (event) => {
+        startDrag(event);
+        onMouseDown?.(event);
+      },
+      [onMouseDown, startDrag]
+    );
+    const handleTouchStart = useCallback(
+      (event) => {
+        startDrag(event);
+        onTouchStart?.(event);
+      },
+      [onTouchStart, startDrag]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (disabled) {
+          onKeyDown?.(event);
+          return;
+        }
+        const next = getImageCompareKeyboardPosition(event.key, current, resolvedStep);
+        if (next !== null) {
+          event.preventDefault();
+          commit(next);
+        }
+        onKeyDown?.(event);
+      },
+      [commit, current, disabled, onKeyDown, resolvedStep]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...domProps,
+        ref: setRootRef,
+        "data-image-compare": "",
+        "data-image-compare-orientation": resolvedOrientation,
+        "data-image-compare-position": String(current),
+        "data-image-compare-disabled": disabled ? "true" : "false",
+        "data-image-compare-dragging": dragging ? "true" : "false",
+        className: getImageCompareRootClasses({
+          orientation: resolvedOrientation,
+          disabled,
+          className
+        }),
+        style: {
+          ...getImageCompareRootStyle({
+            position: current,
+            step: resolvedStep,
+            width,
+            height
+          }),
+          ...style
+        },
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: getImageCompareAfterClasses(), "data-image-compare-after": "", children: renderPaneContent(after, afterSrc, afterAlt, fit) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getImageCompareBeforeClasses(),
+              style: getImageCompareClipStyle(current, resolvedOrientation, resolvedStep),
+              "data-image-compare-before": "",
+              children: renderPaneContent(before, beforeSrc, beforeAlt, fit)
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: handleRef,
+              className: getImageCompareHandleClasses({
+                orientation: resolvedOrientation,
+                disabled
+              }),
+              style: getImageCompareHandleStyle(current, resolvedOrientation, resolvedStep),
+              "data-image-compare-handle": "",
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": resolvedAriaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": current,
+              "aria-valuetext": `${current}%`,
+              "aria-orientation": vertical ? "vertical" : "horizontal",
+              "aria-disabled": disabled,
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: getImageCompareLineClasses(resolvedOrientation),
+                    "data-image-compare-line": "",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: getImageCompareKnobClasses(),
+                    "data-image-compare-knob": "",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCompare.displayName = "ImageCompare";
+var ImageCompare_default = ImageCompare;
+
+export {
+  ImageCompare,
+  ImageCompare_default
+};

package/dist/{chunk-LBXNMCXN.mjs → chunk-OZ5XLR22.mjs}

@@ -11,6 +11,7 @@ import {
   handleTabKey,
   getActiveLineIndex,
   getCodeEditorActiveLineClasses,
+  getCodeEditorCaretClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -144,7 +145,11 @@ var CodeEditor = ({
             "textarea",
             {
               ref: textareaRef,
-              className: classNames(codeEditorTextareaClasses, wrapClass),
+              className: classNames(
+                codeEditorTextareaClasses,
+                getCodeEditorCaretClasses(theme),
+                wrapClass
+              ),
               value: code,
               onChange: handleInput,
               onKeyDown: handleKeyDown,

package/dist/{chunk-HHIW7V7B.mjs → chunk-PFL4HNWM.mjs}

@@ -135,14 +135,7 @@ var Pagination = ({
       }
       onPageSizeChange?.(newPage, newPageSize);
     },
-    [
-      disabled,
-      total,
-      validatedCurrentPage,
-      controlledPageSize,
-      controlledCurrent,
-      onPageSizeChange
-    ]
+    [disabled, total, validatedCurrentPage, controlledPageSize, controlledCurrent, onPageSizeChange]
   );
   const handleQuickJumperSubmit = useCallback(() => {
     quickJumperValidationSchedulerRef.current?.cancel();

package/dist/chunk-RUAPTIQ7.mjs

@@ -0,0 +1,181 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
+// src/components/MaskInput.tsx
+import { useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  applyMaskInput,
+  classNames,
+  formatMaskValue,
+  getInputClasses,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputWrapperClasses,
+  injectShakeStyle,
+  parseMask,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MaskInput = ({
+  size,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  mask,
+  tokens,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly = false,
+  clearable = false,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...rest
+}) => {
+  injectShakeStyle();
+  const formItemControl = useFormItemControlContext();
+  const effectiveSize = 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 isComposing = useRef(false);
+  const pendingCaret = useRef(null);
+  const reactId = useId();
+  const errorMsgId = `tiger-mask-input-error-${reactId}`;
+  const spec = useMemo(() => parseMask(mask, tokens), [mask, tokens]);
+  const [rawValue, setRawValue] = useControlledState(value, defaultValue ?? "");
+  const formatted = useMemo(() => formatMaskValue(rawValue, spec), [rawValue, spec]);
+  const maskedValue = formatted.maskedValue;
+  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]);
+  useLayoutEffect(() => {
+    if (pendingCaret.current !== null && inputRef.current) {
+      const caret = pendingCaret.current;
+      inputRef.current.setSelectionRange(caret, caret);
+      pendingCaret.current = null;
+    }
+  });
+  const commit = (raw, detail, previousMasked) => {
+    setRawValue(raw);
+    onChange?.(raw, detail);
+    if (detail.completed && !formatMaskValue(previousMasked, spec).completed) {
+      onComplete?.(raw, detail.maskedValue);
+    }
+  };
+  const applyValue = (inputValue, caret) => {
+    const previousMasked = maskedValue;
+    const result = applyMaskInput(inputValue, caret, spec, previousMasked);
+    if (inputRef.current) inputRef.current.value = result.maskedValue;
+    pendingCaret.current = result.caret;
+    commit(
+      result.rawValue,
+      { maskedValue: result.maskedValue, completed: result.completed },
+      previousMasked
+    );
+  };
+  const handleInput = (event) => {
+    if (isComposing.current) return;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handlePaste = (event) => {
+    if (disabled || readonly) return;
+    event.preventDefault();
+    const input = event.currentTarget;
+    const text = event.clipboardData.getData("text");
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+  };
+  const handleCompositionStart = () => {
+    isComposing.current = true;
+  };
+  const handleCompositionEnd = (event) => {
+    isComposing.current = false;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handleClear = () => {
+    setRawValue("");
+    onChange?.("", { maskedValue: "", completed: false });
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const hasSuffix = clearable;
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !disabled && !readonly && rawValue.length > 0;
+  const inputClasses = getInputClasses({
+    size: effectiveSize,
+    status,
+    hasPrefix: false,
+    hasSuffix
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: classNames(getInputWrapperClasses(), className), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        ref: inputRef,
+        className: inputClasses,
+        type: "text",
+        value: maskedValue,
+        placeholder,
+        disabled,
+        readOnly: readonly,
+        name,
+        id,
+        autoComplete,
+        autoFocus,
+        ...status === "error" ? { "aria-invalid": true } : {},
+        ...activeError ? { "aria-describedby": errorMsgId } : {},
+        onInput: handleInput,
+        onChange: () => {
+        },
+        onPaste: handlePaste,
+        onCompositionStart: handleCompositionStart,
+        onCompositionEnd: handleCompositionEnd,
+        onFocus,
+        onBlur
+      }
+    ),
+    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getInputClearButtonClasses(effectiveSize),
+        onClick: handleClear,
+        "aria-label": "Clear input",
+        tabIndex: -1,
+        children: "\u2715"
+      }
+    )
+  ] });
+};
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};