@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-IGBQGR6G.mjs → chunk-2AVHOPKK.mjs}

@@ -3,34 +3,42 @@ import {
 } from "./chunk-F6T3OLTQ.mjs";
 import {
   useControlledState
-} from "./chunk-MEFARVQI.mjs";
+} from "./chunk-UJTAHHQT.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/InputOTP.tsx
-import { useEffect, useId, useMemo, useRef } from "react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import {
+  SHAKE_CLASS,
   applyOtpBackspace,
   applyOtpCharInput,
   applyOtpDelete,
   classNames,
+  clampOtpClickIndex,
   devWarn,
   distributeOtpPaste,
   formatOtpSlotLabel,
   getInputOTPLabels,
   getOtpContainerClasses,
   getOtpErrorClasses,
+  getOtpFocusIndex,
+  getOtpInputMode,
+  getOtpKeyIntent,
   getOtpSeparatorClasses,
   getOtpSeparatorIndices,
   getOtpSlotClasses,
-  injectShakeStyle,
+  getOtpSlotTabIndex,
   isOtpComplete,
+  mergeAriaDescribedBy,
   normalizeOtpValue,
-  SHAKE_CLASS
+  runShakeAnimation,
+  sanitizeOtpInput,
+  shouldDistributeOtpInput
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var InputOTP = ({
+var InputOTP = forwardRef(function InputOTP2({
   size = "md",
   status: statusProp,
   errorMessage: errorMessageProp,
@@ -57,40 +65,62 @@ var InputOTP = ({
   className,
   style,
   ...rest
-}) => {
-  injectShakeStyle();
+}, ref) {
   const config = useTigerConfig();
   const formItemControl = useFormItemControlContext();
   const status = statusProp ?? formItemControl?.status ?? "default";
-  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const errorMessage = errorMessageProp;
   const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const effectiveName = name ?? formItemControl?.name;
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
   const labels = getInputOTPLabels(config.locale);
   const reactId = useId();
   const errorMsgId = `tiger-input-otp-error-${reactId}`;
   const containerRef = useRef(null);
   const slotRefs = useRef([]);
+  const mountedRef = useRef(false);
+  const setSlotRef = (index) => (node) => {
+    slotRefs.current[index] = node;
+    if (index === 0) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
   const charOptions = useMemo(() => ({ type, pattern }), [type, pattern]);
-  const [rawValue, setRawValue] = useControlledState(value, defaultValue ?? "", onChange);
+  const inputMode = getOtpInputMode(type, pattern);
+  const [rawValue, setRawValue] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? "",
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
   const currentValue = normalizeOtpValue(rawValue, length, charOptions);
+  const [focusIndex, setFocusIndex] = useState(() => getOtpFocusIndex(currentValue, length));
   const separatorIndices = useMemo(() => getOtpSeparatorIndices(length, groups), [length, groups]);
   if (groups && groups.length > 0 && separatorIndices.length === 0) {
     devWarn("InputOTP.groups", "[Tigercat] InputOTP: `groups` must sum to `length`; ignoring.");
   }
   useEffect(() => {
-    if (status === "error" && containerRef.current) {
-      const el = containerRef.current;
-      el.classList.remove(SHAKE_CLASS);
-      void el.offsetWidth;
-      el.classList.add(SHAKE_CLASS);
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
     }
+    if (status === "error") runShakeAnimation(containerRef.current);
   }, [status, shakeTrigger]);
   useEffect(() => {
     if (autoFocus) {
-      slotRefs.current[Math.min(currentValue.length, length - 1)]?.focus();
+      slotRefs.current[getOtpFocusIndex(currentValue, length)]?.focus();
     }
   }, []);
   const focusSlot = (index) => {
-    slotRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+    const next = Math.max(0, Math.min(index, length - 1));
+    setFocusIndex(next);
+    slotRefs.current[next]?.focus();
   };
   const displayChar = (val, index) => {
     const char = val[index] ?? "";
@@ -101,51 +131,49 @@ var InputOTP = ({
     setRawValue(next);
     if (isOtpComplete(next, length)) onComplete?.(next);
   };
-  const isInteractive = !disabled && !readonly;
+  const isInteractive = !effectiveDisabled && !readonly;
   const handleSlotChange = (index, event) => {
     if (!isInteractive) return;
-    const result = applyOtpCharInput(
-      currentValue,
-      index,
-      event.currentTarget.value,
-      length,
-      charOptions
-    );
+    const inputType = event.nativeEvent.inputType;
+    const sanitized = sanitizeOtpInput(event.currentTarget.value, charOptions);
+    const result = applyOtpCharInput(currentValue, index, event.currentTarget.value, length, {
+      ...charOptions,
+      distributeFromStart: shouldDistributeOtpInput(index, inputType, sanitized.length)
+    });
     event.currentTarget.value = displayChar(result.value, index);
     emitValue(result.value);
     focusSlot(result.nextIndex);
   };
   const handleSlotKeyDown = (index, event) => {
     if (!isInteractive) return;
-    switch (event.key) {
-      case "Backspace": {
+    const intent = getOtpKeyIntent(event.key, dir);
+    switch (intent.type) {
+      case "backspace": {
         event.preventDefault();
         const result = applyOtpBackspace(currentValue, index);
         emitValue(result.value);
         focusSlot(result.nextIndex);
         break;
       }
-      case "Delete": {
+      case "delete": {
         event.preventDefault();
         const result = applyOtpDelete(currentValue, index);
         emitValue(result.value);
         break;
       }
-      case "ArrowLeft":
-        event.preventDefault();
-        focusSlot(index - 1);
-        break;
-      case "ArrowRight":
+      case "move":
         event.preventDefault();
-        focusSlot(index + 1);
+        focusSlot(index + intent.delta);
         break;
-      case "Home":
+      case "home":
         event.preventDefault();
         focusSlot(0);
         break;
-      case "End":
+      case "end":
         event.preventDefault();
-        focusSlot(Math.min(currentValue.length, length - 1));
+        focusSlot(getOtpFocusIndex(currentValue, length));
+        break;
+      default:
         break;
     }
   };
@@ -157,8 +185,12 @@ var InputOTP = ({
     emitValue(result.value);
     focusSlot(result.nextIndex);
   };
-  const handleSlotFocus = (event) => {
-    event.currentTarget.select();
+  const handleSlotMouseDown = (index, event) => {
+    const next = clampOtpClickIndex(index, currentValue, length);
+    if (next !== index) {
+      event.preventDefault();
+      focusSlot(next);
+    }
   };
   const handleGroupFocus = (event) => {
     if (!containerRef.current?.contains(event.relatedTarget)) {
@@ -167,32 +199,47 @@ var InputOTP = ({
   };
   const handleGroupBlur = (event) => {
     if (!containerRef.current?.contains(event.relatedTarget)) {
+      formItemControl?.onBlur?.();
       onBlur?.(event);
     }
   };
   const activeError = status === "error" && !!errorMessage;
-  const slotClasses = getOtpSlotClasses(size, status, { disabled, readonly });
+  const slotClasses = getOtpSlotClasses(size, status, { disabled: effectiveDisabled, readonly });
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const describedBy = mergeAriaDescribedBy(
+    mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      activeError ? errorMsgId : void 0
+    ),
+    formItemControl?.describedBy
+  );
+  const currentTab = Math.min(Math.max(focusIndex, 0), length - 1);
   const slots = [];
   for (let i = 0; i < length; i++) {
+    const isTabStop = i === currentTab;
     slots.push(
       /* @__PURE__ */ jsx(
         "input",
         {
-          ref: (el) => {
-            slotRefs.current[i] = el;
-          },
+          ref: setSlotRef(i),
           className: slotClasses,
           type: "text",
-          inputMode: type === "numeric" ? "numeric" : void 0,
+          inputMode,
           autoComplete: i === 0 ? "one-time-code" : "off",
+          maxLength: 1,
           value: displayChar(currentValue, i),
-          disabled,
+          disabled: effectiveDisabled,
           readOnly: readonly,
+          tabIndex: getOtpSlotTabIndex(i, currentTab, effectiveDisabled),
+          id: isTabStop ? id ?? formItemControl?.id : void 0,
           "aria-label": formatOtpSlotLabel(labels.slotLabel, i + 1, length),
-          ...status === "error" ? { "aria-invalid": true } : {},
+          "aria-invalid": status === "error" ? true : void 0,
+          "aria-required": isTabStop && formItemControl?.required ? true : void 0,
+          "aria-describedby": isTabStop ? describedBy : void 0,
           onChange: (event) => handleSlotChange(i, event),
           onKeyDown: (event) => handleSlotKeyDown(i, event),
-          onFocus: handleSlotFocus
+          onMouseDown: (event) => handleSlotMouseDown(i, event),
+          onFocus: (event) => event.currentTarget.select()
         },
         `slot-${i}`
       )
@@ -203,29 +250,40 @@ var InputOTP = ({
       );
     }
   }
+  const { onClick: restOnClick, ...groupRest } = rest;
   return /* @__PURE__ */ jsxs("div", { className: classNames("inline-block", className), style, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ...rest,
+        ...groupRest,
         ref: containerRef,
-        id,
         role: "group",
-        "aria-label": ariaLabel ?? labels.groupLabel,
-        ...activeError ? { "aria-describedby": errorMsgId } : {},
+        "aria-label": labelledby ? void 0 : ariaLabel ?? labels.groupLabel,
+        "aria-labelledby": labelledby,
         className: getOtpContainerClasses(size),
         onPaste: handlePaste,
         onFocus: handleGroupFocus,
         onBlur: handleGroupBlur,
+        onAnimationEnd: () => containerRef.current?.classList.remove(SHAKE_CLASS),
+        onClick: restOnClick,
         children: [
           slots,
-          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue })
+          effectiveName && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: effectiveName,
+              value: currentValue,
+              disabled: effectiveDisabled
+            }
+          )
         ]
       }
     ),
-    activeError && /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getOtpErrorClasses(), children: errorMessage })
+    activeError && /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getOtpErrorClasses(), "aria-live": "polite", children: errorMessage })
   ] });
-};
+});
+InputOTP.displayName = "InputOTP";
 var InputOTP_default = InputOTP;
 
 export {

package/dist/{chunk-34VGG7AK.mjs → chunk-2AVQQGL2.mjs}

@@ -3,7 +3,8 @@ import { createContext, useContext, useMemo } from "react";
 import {
   classNames,
   getInputGroupClasses,
-  getInputGroupAddonClasses
+  getInputGroupAddonClasses,
+  TIGER_CHROME_ATTR
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var InputGroupContext = createContext(null);
@@ -18,26 +19,26 @@ var InputGroup = ({
   ...rest
 }) => {
   const contextValue = useMemo(() => ({ size, compact }), [size, compact]);
+  const named = Boolean(rest["aria-label"] || rest["aria-labelledby"]);
   const groupClasses = useMemo(
     () => classNames(getInputGroupClasses(compact, className)),
     [compact, className]
   );
-  return /* @__PURE__ */ jsx(InputGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+  return /* @__PURE__ */ jsx(InputGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: named ? "group" : void 0, children }) });
 };
 var InputGroupAddon = ({
-  addonType: _addonType = "text",
   className,
   children,
   ...rest
 }) => {
   const ctx = useInputGroupContext();
   const size = ctx?.size ?? "md";
-  const compact = ctx?.compact ?? true;
+  const compact = ctx?.compact ?? false;
   const addonClasses = useMemo(
     () => classNames(getInputGroupAddonClasses(size, compact, className)),
     [size, compact, className]
   );
-  return /* @__PURE__ */ jsx("span", { ...rest, className: addonClasses, children });
+  return /* @__PURE__ */ jsx("span", { ...rest, ...{ [TIGER_CHROME_ATTR]: "" }, className: addonClasses, children });
 };
 
 export {

package/dist/{chunk-Y6557RWE.mjs → chunk-2BRMZBQ2.mjs}

@@ -1,8 +1,9 @@
 // src/components/Collapse.tsx
-import { createContext, useContext, useState, useMemo, useCallback } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import {
   classNames,
   getCollapseContainerClasses,
+  getNextAccordionHeaderIndex,
   normalizeActiveKeys,
   togglePanelKey
 } from "@expcat/tigercat-core";
@@ -21,30 +22,44 @@ var Collapse = ({
   className,
   style,
   onChange,
-  children
+  children,
+  ...rest
 }) => {
   const [internalActiveKeys, setInternalActiveKeys] = useState(
-    normalizeActiveKeys(defaultActiveKey)
+    () => normalizeActiveKeys(defaultActiveKey, { accordion })
   );
+  const headersRef = useRef([]);
   const activeKeys = useMemo(() => {
-    return controlledActiveKey !== void 0 ? normalizeActiveKeys(controlledActiveKey) : internalActiveKeys;
-  }, [controlledActiveKey, internalActiveKeys]);
+    return controlledActiveKey !== void 0 ? normalizeActiveKeys(controlledActiveKey, { accordion }) : internalActiveKeys;
+  }, [controlledActiveKey, internalActiveKeys, accordion]);
   const handlePanelClick = useCallback(
     (key) => {
       const newKeys = togglePanelKey(key, activeKeys, accordion);
       if (controlledActiveKey === void 0) {
         setInternalActiveKeys(newKeys);
       }
-      if (onChange) {
-        if (accordion) {
-          onChange(newKeys.length > 0 ? newKeys[0] : void 0);
-        } else {
-          onChange(newKeys);
-        }
-      }
+      onChange?.(newKeys);
     },
     [activeKeys, accordion, controlledActiveKey, onChange]
   );
+  const registerHeader = useCallback((record) => {
+    const headers = headersRef.current;
+    const index = headers.findIndex((header) => header.key === record.key);
+    if (index >= 0) {
+      headers[index] = record;
+    } else {
+      headers.push(record);
+    }
+  }, []);
+  const unregisterHeader = useCallback((key) => {
+    headersRef.current = headersRef.current.filter((header) => header.key !== key);
+  }, []);
+  const moveHeaderFocus = useCallback((currentKey, action) => {
+    const next = getNextAccordionHeaderIndex(headersRef.current, currentKey, action);
+    if (next >= 0) {
+      headersRef.current[next]?.el.focus();
+    }
+  }, []);
   const containerClasses = useMemo(() => {
     return classNames(getCollapseContainerClasses(bordered, ghost, className));
   }, [bordered, ghost, className]);
@@ -55,11 +70,24 @@ var Collapse = ({
       expandIconPosition,
       bordered,
       ghost,
-      handlePanelClick
+      handlePanelClick,
+      registerHeader,
+      unregisterHeader,
+      moveHeaderFocus
     }),
-    [activeKeys, accordion, expandIconPosition, bordered, ghost, handlePanelClick]
+    [
+      activeKeys,
+      accordion,
+      expandIconPosition,
+      bordered,
+      ghost,
+      handlePanelClick,
+      registerHeader,
+      unregisterHeader,
+      moveHeaderFocus
+    ]
   );
-  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, role: "region", children }) });
+  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, ...rest, children }) });
 };
 var Collapse_default = Collapse;