@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-C6FS67EL.mjs

@@ -0,0 +1,260 @@
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/MaskInput.tsx
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  applyMaskInput,
+  classNames,
+  formatMaskValue,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputFieldClasses,
+  getInputLabels,
+  getInputWrapperClasses,
+  getMaskInputMode,
+  mergeAriaDescribedBy,
+  parseMask,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  shouldEmitMaskComplete
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MaskInput = forwardRef(function MaskInput2({
+  size,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  mask,
+  tokens,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly: readonlyProp,
+  readOnly: readOnlyProp,
+  clearable = false,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  type,
+  inputMode,
+  ...rest
+}, ref) {
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = useMemo(() => getInputLabels(config.locale), [config.locale]);
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, readOnlyProp);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+  const chromeRef = useRef(null);
+  const inputRef = useRef(null);
+  const isComposing = useRef(false);
+  const pendingCaret = useRef(null);
+  const mountedRef = useRef(false);
+  const reactId = useId();
+  const errorMsgId = `tiger-mask-input-error-${reactId}`;
+  const spec = useMemo(() => parseMask(mask, tokens), [mask, tokens]);
+  const [rawValue, setRawValue] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? "",
+    onChange: (next, detail) => {
+      onChange?.(next, detail);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const formatted = useMemo(() => formatMaskValue(rawValue, spec), [rawValue, spec]);
+  const maskedValue = formatted.maskedValue;
+  const resolvedInputMode = inputMode ?? getMaskInputMode(mask, spec);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(chromeRef.current ?? inputRef.current);
+  }, [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, wasCompleted) => {
+    setRawValue(raw, detail);
+    if (shouldEmitMaskComplete(wasCompleted, detail.completed)) {
+      onComplete?.(raw, detail.maskedValue);
+    }
+  };
+  const applyValue = (inputValue, caret) => {
+    const wasCompleted = formatted.completed;
+    const result = applyMaskInput(inputValue, caret, spec, maskedValue);
+    if (inputRef.current) inputRef.current.value = result.maskedValue;
+    pendingCaret.current = result.caret;
+    commit(
+      result.rawValue,
+      { maskedValue: result.maskedValue, completed: result.completed },
+      wasCompleted
+    );
+  };
+  const handleInput = (event) => {
+    if (isComposing.current) return;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handlePaste = (event) => {
+    if (effectiveDisabled || isReadOnly) 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 handleClear = () => {
+    setRawValue("", { maskedValue: "", completed: false });
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !effectiveDisabled && !isReadOnly && rawValue.length > 0;
+  const hasExtras = activeError;
+  const describedBy = mergeAriaDescribedBy(
+    mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      activeError ? errorMsgId : void 0
+    ),
+    formItemControl?.describedBy
+  );
+  const field = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      ref: setRefs,
+      className: getInputFieldClasses({
+        size: effectiveSize,
+        status,
+        hasSuffix: showClear,
+        inGroup: false
+      }),
+      type: type ?? "text",
+      inputMode: resolvedInputMode,
+      value: maskedValue,
+      placeholder,
+      disabled: effectiveDisabled,
+      readOnly: isReadOnly,
+      id: effectiveId,
+      autoComplete,
+      autoFocus,
+      "aria-invalid": status === "error" ? true : rest["aria-invalid"],
+      "aria-required": formItemControl?.required ? true : rest["aria-required"],
+      "aria-describedby": describedBy,
+      onInput: handleInput,
+      onChange: () => {
+      },
+      onPaste: handlePaste,
+      onCompositionStart: () => {
+        isComposing.current = true;
+      },
+      onCompositionEnd: (event) => {
+        isComposing.current = false;
+        const target = event.currentTarget;
+        applyValue(target.value, target.selectionStart ?? target.value.length);
+      },
+      onFocus,
+      onBlur: handleBlur
+    }
+  );
+  const chrome = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chromeRef,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      className: classNames(
+        getInputWrapperClasses(status, { inGroup: inGroup && !hasExtras }),
+        !hasExtras ? className : void 0
+      ),
+      style: !hasExtras ? style : void 0,
+      onAnimationEnd: () => chromeRef.current?.classList.remove(SHAKE_CLASS),
+      children: [
+        field,
+        effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: rawValue, disabled: effectiveDisabled }) : null,
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getInputClearButtonClasses(effectiveSize),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: handleClear,
+            "aria-label": labels.clearAriaLabel,
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!hasExtras) return chrome;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        inGroup ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+        className
+      ),
+      style,
+      children: [
+        chrome,
+        activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : null
+      ]
+    }
+  );
+});
+MaskInput.displayName = "MaskInput";
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};

package/dist/chunk-CKKOBWER.mjs

@@ -0,0 +1,182 @@
+import {
+  StatusIcon
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Alert.tsx
+import { forwardRef, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  classNames,
+  getAlertTypeClasses,
+  defaultAlertThemeColors,
+  alertBaseClasses,
+  alertSizeClasses,
+  alertIconSizeClasses,
+  alertTitleSizeClasses,
+  alertDescriptionSizeClasses,
+  alertCloseButtonBaseClasses,
+  alertIconContainerClasses,
+  getAlertContentClasses,
+  getAlertIconPath,
+  alertCloseIconPath,
+  alertBannerClasses,
+  alertCountdownContainerClasses,
+  alertCountdownBarClasses,
+  alertCountdownColorClasses,
+  resolveAlertRole,
+  getAlertLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Alert = forwardRef(function Alert2({
+  locale,
+  type = "info",
+  size = "md",
+  title,
+  description,
+  showIcon = true,
+  closable = false,
+  closeAriaLabel,
+  duration,
+  open,
+  onOpenChange,
+  banner = false,
+  showCountdown = false,
+  className,
+  children,
+  titleSlot,
+  descriptionSlot,
+  onClose,
+  role: roleProp,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const labels = useMemo(
+    () => getAlertLabels(mergeTigerLocale(config.locale, locale)),
+    [config.locale, locale]
+  );
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const colorScheme = useMemo(() => getAlertTypeClasses(type, defaultAlertThemeColors), [type]);
+  const alertClasses = useMemo(
+    () => classNames(
+      alertBaseClasses,
+      alertSizeClasses[size],
+      colorScheme.bg,
+      colorScheme.border,
+      banner && alertBannerClasses,
+      className
+    ),
+    [size, colorScheme, banner, className]
+  );
+  const iconClasses = useMemo(
+    () => classNames(alertIconSizeClasses[size], colorScheme.icon),
+    [size, colorScheme]
+  );
+  const titleClasses = useMemo(
+    () => classNames(alertTitleSizeClasses[size], colorScheme.title),
+    [size, colorScheme]
+  );
+  const descriptionClasses = useMemo(
+    () => classNames(alertDescriptionSizeClasses[size], colorScheme.description),
+    [size, colorScheme]
+  );
+  const closeButtonClasses = useMemo(
+    () => classNames(
+      alertCloseButtonBaseClasses,
+      colorScheme.closeButton,
+      colorScheme.closeButtonHover,
+      colorScheme.focus
+    ),
+    [colorScheme]
+  );
+  const clearTimerRef = useRef(void 0);
+  const requestClose = useCallback(
+    (event) => {
+      onCloseRef.current?.(event);
+      onOpenChange?.(false);
+      clearTimerRef.current?.();
+    },
+    [onOpenChange]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      event.stopPropagation();
+      requestClose(event.nativeEvent);
+    },
+    [requestClose]
+  );
+  useEffect(() => {
+    if (open === false || !(duration && duration > 0)) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      requestClose(new Event("close", { cancelable: true }));
+    }, duration);
+    const clear = () => window.clearTimeout(timer);
+    clearTimerRef.current = clear;
+    return () => {
+      clear();
+      if (clearTimerRef.current === clear) {
+        clearTimerRef.current = void 0;
+      }
+    };
+  }, [duration, open, requestClose]);
+  if (open === false) {
+    return null;
+  }
+  const iconPath = getAlertIconPath(type);
+  const hasTitle = !!(title || titleSlot);
+  const hasDescription = !!(description || descriptionSlot);
+  const hasChildren = children != null && children !== false;
+  const hasContent = hasTitle || hasDescription || hasChildren;
+  const role = roleProp ?? resolveAlertRole(type, hasContent);
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: alertClasses, role, children: [
+    showIcon && /* @__PURE__ */ jsx("div", { className: alertIconContainerClasses, children: /* @__PURE__ */ jsx(
+      StatusIcon,
+      {
+        path: iconPath,
+        className: iconClasses,
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ) }),
+    hasContent && /* @__PURE__ */ jsxs("div", { className: getAlertContentClasses(showIcon), children: [
+      hasTitle && /* @__PURE__ */ jsx("div", { className: titleClasses, children: titleSlot || title }),
+      hasDescription && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: descriptionSlot || description }),
+      hasChildren && /* @__PURE__ */ jsx("div", { className: hasTitle || hasDescription ? descriptionClasses : titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel ?? labels.closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx(
+          StatusIcon,
+          {
+            path: alertCloseIconPath,
+            className: "h-4 w-4",
+            "aria-hidden": "true",
+            focusable: "false"
+          }
+        )
+      }
+    ),
+    showCountdown && duration && duration > 0 && /* @__PURE__ */ jsx("div", { className: alertCountdownContainerClasses, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(alertCountdownBarClasses, alertCountdownColorClasses[type]),
+        style: { animationDuration: `${duration}ms` }
+      }
+    ) })
+  ] });
+});
+Alert.displayName = "Alert";
+
+export {
+  Alert
+};