@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-GIYBVWR4.mjs → chunk-RGFSY3S2.mjs}

@@ -1,8 +1,23 @@
-import { useFormContext } from './chunk-3XXXM4OB.mjs';
-import React, { useState, useId, useMemo, useCallback, useEffect } from 'react';
-import { getFieldError, classNames } from '@expcat/tigercat-core';
+import { useFormContext } from './chunk-IGE44BIS.mjs';
+import React, { useState, useRef, useId, useMemo, useEffect, useCallback } from 'react';
+import { getFormItemFieldClasses, getFormItemAsteriskClasses, getFieldError, classNames, getFormItemClasses, getFormItemLabelClasses, getFormItemErrorClasses, getFormItemContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+function hasRequiredRule(maybeRules) {
+  if (!maybeRules) return false;
+  const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+  return ruleArr.some((rule) => !!rule && typeof rule === "object" && !!rule.required);
+}
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
+var FIELD_CLASSES = getFormItemFieldClasses();
+var ASTERISK_CLASSES = getFormItemAsteriskClasses();
 var FormItem = ({
   name,
   label,
@@ -17,26 +32,13 @@ var FormItem = ({
 }) => {
   const formContext = useFormContext();
   const [errorMessage, setErrorMessage] = useState("");
+  const [shakeTrigger, setShakeTrigger] = useState(0);
+  const prevFormErrorRef = useRef("");
   const reactId = useId();
-  const baseId = useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const baseId = `tiger-form-item-${reactId}`;
   const labelId = `${baseId}-label`;
   const fieldId = `${baseId}-field`;
   const errorId = `${baseId}-error`;
-  const mergeAriaDescribedBy = useCallback(
-    (existing, next) => {
-      if (!existing) {
-        return next;
-      }
-      if (!next) {
-        return existing;
-      }
-      const parts = new Set(
-        `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-      );
-      return Array.from(parts).join(" ");
-    },
-    []
-  );
   const actualSize = size || formContext?.size || "md";
   const labelPosition = formContext?.labelPosition || "right";
   const labelAlign = formContext?.labelAlign || "right";
@@ -52,14 +54,12 @@ var FormItem = ({
       return required;
     }
     if (rules) {
-      const ruleArray = Array.isArray(rules) ? rules : [rules];
-      return ruleArray.some((rule) => rule.required);
+      return hasRequiredRule(rules);
     }
     if (name && formContext?.rules) {
       const fieldRules = formContext.rules[name];
       if (fieldRules) {
-        const ruleArray = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
-        return ruleArray.some((rule) => rule.required);
+        return hasRequiredRule(fieldRules);
       }
     }
     return false;
@@ -70,8 +70,12 @@ var FormItem = ({
   );
   useEffect(() => {
     if (name && formContext?.errors) {
-      const error = getFieldError(name, formContext.errors);
-      setErrorMessage(error || "");
+      const error = getFieldError(name, formContext.errors) || "";
+      setErrorMessage(error);
+      if (error && error !== prevFormErrorRef.current) {
+        setShakeTrigger((prev) => prev + 1);
+      }
+      prevFormErrorRef.current = error;
     }
   }, [name, formContext?.errors]);
   useEffect(() => {
@@ -100,7 +104,7 @@ var FormItem = ({
       formContext.validateField(name, rules, "change");
     }
   }, [name, formContext, rules]);
-  const hasError = useMemo(() => !!errorMessage, [errorMessage]);
+  const hasError = !!errorMessage;
   const describedById = useMemo(
     () => showMessage && hasError ? errorId : void 0,
     [showMessage, hasError, errorId]
@@ -113,6 +117,7 @@ var FormItem = ({
     return React.Children.toArray(children)[0] ?? null;
   }, [children]);
   const isClonableChild = React.isValidElement(onlyChild);
+  const isNativeElement = isClonableChild && typeof onlyChild.type === "string";
   const childId = isClonableChild ? onlyChild.props.id : void 0;
   const effectiveFieldId = childId ?? fieldId;
   const enhancedChild = useMemo(() => {
@@ -121,6 +126,9 @@ var FormItem = ({
     }
     const nextProps = {
       id: effectiveFieldId,
+      status: !isNativeElement && hasError ? "error" : onlyChild.props.status,
+      errorMessage: !isNativeElement && hasError && !showMessage ? errorMessage : onlyChild.props.errorMessage,
+      _shakeTrigger: !isNativeElement && hasError ? shakeTrigger : void 0,
       "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
       "aria-required": isRequired ? true : onlyChild.props["aria-required"],
       "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
@@ -140,30 +148,35 @@ var FormItem = ({
     onlyChild,
     effectiveFieldId,
     hasError,
+    errorMessage,
+    showMessage,
+    shakeTrigger,
     isRequired,
-    mergeAriaDescribedBy,
+    isNativeElement,
     describedById,
     handleBlur,
     handleChange
   ]);
   const formItemClasses = useMemo(
     () => classNames(
-      "tiger-form-item",
-      `tiger-form-item--${actualSize}`,
-      `tiger-form-item--label-${labelPosition}`,
-      hasError && "tiger-form-item--error",
-      formContext?.disabled && "tiger-form-item--disabled",
+      getFormItemClasses({
+        size: actualSize,
+        labelPosition,
+        hasError,
+        disabled: formContext?.disabled
+      }),
       className
     ),
     [actualSize, labelPosition, hasError, formContext?.disabled, className]
   );
   const labelClasses = useMemo(
-    () => classNames(
-      "tiger-form-item__label",
-      `tiger-form-item__label--${labelAlign}`,
-      isRequired && "tiger-form-item__label--required"
-    ),
-    [labelAlign, isRequired]
+    () => getFormItemLabelClasses({
+      size: actualSize,
+      labelAlign,
+      labelPosition,
+      isRequired
+    }),
+    [actualSize, labelAlign, labelPosition, isRequired]
   );
   const labelStyles = useMemo(() => {
     if (labelPosition === "top") {
@@ -172,9 +185,10 @@ var FormItem = ({
     return actualLabelWidth ? { width: actualLabelWidth } : {};
   }, [labelPosition, actualLabelWidth]);
   const errorClasses = useMemo(
-    () => classNames("tiger-form-item__error", hasError && "tiger-form-item__error--show"),
-    [hasError]
+    () => classNames(getFormItemErrorClasses(actualSize), hasError && "opacity-100"),
+    [actualSize, hasError]
   );
+  const contentClasses = useMemo(() => getFormItemContentClasses(labelPosition), [labelPosition]);
   return /* @__PURE__ */ jsxs("div", { className: formItemClasses, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
@@ -184,16 +198,16 @@ var FormItem = ({
         style: labelStyles,
         htmlFor: isClonableChild ? effectiveFieldId : void 0,
         children: [
-          isRequired && /* @__PURE__ */ jsx("span", { className: "tiger-form-item__asterisk", children: "*" }),
+          isRequired && /* @__PURE__ */ jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "tiger-form-item__content", children: [
+    /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "tiger-form-item__field",
+          className: FIELD_CLASSES,
           role: "group",
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
@@ -204,7 +218,16 @@ var FormItem = ({
           children: enhancedChild
         }
       ),
-      showMessage && hasError && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+      showMessage && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClasses,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      )
     ] })
   ] });
 };

package/dist/chunk-RGZYYVQF.mjs

@@ -0,0 +1,134 @@
+import { StepsItem, Steps } from './chunk-AUP3PMDD.mjs';
+import { useTigerConfig } from './chunk-VEGBO77D.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { mergeTigerLocale, getFormWizardLabels, classNames, resolveLocaleText } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FormWizard = ({
+  steps = [],
+  current,
+  defaultCurrent = 0,
+  clickable = false,
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  showSteps = true,
+  showActions = true,
+  prevText,
+  nextText,
+  finishText,
+  locale,
+  beforeNext,
+  onChange,
+  onFinish,
+  renderStep,
+  className,
+  style,
+  ...props
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getFormWizardLabels(mergedLocale), [mergedLocale]);
+  const [innerCurrent, setInnerCurrent] = useState(defaultCurrent);
+  useEffect(() => {
+    if (current !== void 0) setInnerCurrent(current);
+  }, [current]);
+  const totalCount = steps.length;
+  const currentIndex = current ?? innerCurrent;
+  const currentStep = steps[currentIndex];
+  const isFirst = currentIndex <= 0;
+  const isLast = currentIndex >= totalCount - 1;
+  const wrapperClasses = classNames(
+    "tiger-form-wizard w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+    className
+  );
+  const setCurrent = useCallback(
+    (next) => {
+      const max = Math.max(totalCount - 1, 0);
+      const clamped = Math.min(Math.max(next, 0), max);
+      if (current === void 0) {
+        setInnerCurrent(clamped);
+      }
+      onChange?.(clamped, currentIndex);
+    },
+    [current, currentIndex, onChange, totalCount]
+  );
+  const runBeforeNext = useCallback(async () => {
+    if (!beforeNext || !currentStep) {
+      return true;
+    }
+    const result = await beforeNext(currentIndex, currentStep, steps);
+    return result === true;
+  }, [beforeNext, currentIndex, currentStep, steps]);
+  const handlePrev = useCallback(() => {
+    if (currentIndex <= 0 || steps[currentIndex - 1]?.disabled) return;
+    setCurrent(currentIndex - 1);
+  }, [currentIndex, setCurrent, steps]);
+  const handleNext = useCallback(async () => {
+    if (totalCount === 0) return;
+    const ok = await runBeforeNext();
+    if (!ok) return;
+    if (isLast) {
+      onFinish?.(currentIndex, steps);
+      return;
+    }
+    if (steps[currentIndex + 1]?.disabled) return;
+    setCurrent(currentIndex + 1);
+  }, [currentIndex, totalCount, isLast, onFinish, runBeforeNext, setCurrent, steps]);
+  const handleStepChange = useCallback(
+    async (nextIndex) => {
+      if (nextIndex === currentIndex || steps[nextIndex]?.disabled) return;
+      if (nextIndex > currentIndex) {
+        const ok = await runBeforeNext();
+        if (!ok) return;
+      }
+      setCurrent(nextIndex);
+    },
+    [currentIndex, runBeforeNext, setCurrent, steps]
+  );
+  const contentNode = useMemo(() => {
+    if (!currentStep) return null;
+    if (renderStep) return renderStep(currentStep, currentIndex);
+    return currentStep.content ?? null;
+  }, [currentIndex, currentStep, renderStep]);
+  const stepsNodes = useMemo(
+    () => steps.map((step, index) => /* @__PURE__ */ jsx(
+      StepsItem,
+      {
+        title: step.title,
+        description: step.description,
+        status: step.status,
+        icon: step.icon,
+        disabled: step.disabled
+      },
+      step.key ?? index
+    )),
+    [steps]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, style, "data-tiger-form-wizard": true, ...props, children: [
+    showSteps && steps.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-6 py-5 bg-[var(--tiger-surface-muted,#f9fafb)]", children: /* @__PURE__ */ jsx(
+      Steps,
+      {
+        current: currentIndex,
+        direction,
+        size,
+        simple,
+        clickable,
+        onChange: handleStepChange,
+        children: stepsNodes
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex flex-col items-center", children: contentNode }),
+    showActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 px-6 py-2 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface-muted,#f9fafb)]", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", disabled: isFirst, onClick: handlePrev, children: resolveLocaleText(labels.prevText, prevText) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: handleNext, children: isLast ? resolveLocaleText(labels.finishText, finishText) : resolveLocaleText(labels.nextText, nextText) })
+    ] })
+  ] });
+};
+var FormWizard_default = FormWizard;
+
+export { FormWizard, FormWizard_default };

package/dist/{chunk-3GD3LOII.mjs → chunk-RITTIFCJ.mjs}

@@ -14,8 +14,7 @@ var Sidebar = ({
   const sidebarStyle = {
     ...style,
     width: collapsed ? "0px" : width,
-    minWidth: collapsed ? "0px" : width,
-    overflow: "hidden"
+    minWidth: collapsed ? "0px" : width
   };
   return /* @__PURE__ */ jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children: !collapsed && children });
 };

package/dist/{chunk-Y2JOJ4D6.js → chunk-RKB2VUQO.js}

@@ -103,15 +103,13 @@ var Drawer = ({
     locale?.common?.closeText
   );
   React.useEffect(() => {
-    if (!visible) return;
-    previousActiveElementRef.current = tigercatCore.captureActiveElement();
-    const timer = window.setTimeout(() => {
-      tigercatCore.focusFirst([closeButtonRef.current, dialogRef.current]);
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [visible]);
-  React.useEffect(() => {
-    if (visible) return;
+    if (visible) {
+      previousActiveElementRef.current = tigercatCore.captureActiveElement();
+      const timer = window.setTimeout(() => {
+        tigercatCore.focusFirst([closeButtonRef.current, dialogRef.current]);
+      }, 0);
+      return () => window.clearTimeout(timer);
+    }
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [visible]);
   const handleKeyDown = React.useCallback((event) => {
@@ -125,7 +123,7 @@ var Drawer = ({
     }
   }, []);
   const containerClasses = tigercatCore.classNames(
-    tigercatCore.getDrawerContainerClasses(zIndex),
+    tigercatCore.getDrawerContainerClasses(),
     !visible && "pointer-events-none"
   );
   const maskClasses = tigercatCore.getDrawerMaskClasses(visible);

package/dist/{chunk-7SLNHUGJ.js → chunk-RNEL4XIO.js}

@@ -1,11 +1,11 @@
 'use strict';
 
+var chunkHQ3QOT7H_js = require('./chunk-HQ3QOT7H.js');
 var react = require('react');
 var client = require('react-dom/client');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Notification.tsx
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var notificationInstancesByPosition = {
   "top-left": [],
@@ -29,35 +29,12 @@ var updateCallbacks = {
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-var Icon = ({ path, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: tigercatCore.icon24ViewBox,
-      stroke: "currentColor",
-      strokeWidth: tigercatCore.icon24StrokeWidth,
-      "aria-hidden": "true",
-      focusable: "false",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
-          strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
-          d: path
-        }
-      )
-    }
-  );
-};
 var NotificationItem = ({ notification: notification2, onClose }) => {
   const [isVisible, setIsVisible] = react.useState(false);
   react.useEffect(() => {
     setTimeout(() => setIsVisible(true), 10);
   }, []);
-  const colorScheme = tigercatCore.getNotificationTypeClasses(notification2.type, tigercatCore.defaultNotificationThemeColors);
+  const colorScheme = tigercatCore.getNotificationTypeClasses(notification2.type);
   const notificationClasses = tigercatCore.classNames(
     tigercatCore.notificationBaseClasses,
     colorScheme.bg,
@@ -94,7 +71,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
       "data-tiger-notification-type": notification2.type,
       "data-tiger-notification-id": String(notification2.id),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: iconPath, className: iconClass }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkHQ3QOT7H_js.StatusIcon, { path: iconPath, className: iconClass, "aria-hidden": "true", focusable: "false" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.notificationContentClasses, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.notificationTitleClasses, colorScheme.titleText), children: notification2.title }),
           notification2.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.notificationDescriptionClasses, colorScheme.descriptionText), children: notification2.description })
@@ -109,7 +86,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
             },
             "aria-label": "Close notification",
             type: "button",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.notificationCloseIconPath, className: tigercatCore.notificationCloseIconClasses })
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkHQ3QOT7H_js.StatusIcon, { path: tigercatCore.notificationCloseIconPath, className: tigercatCore.notificationCloseIconClasses })
           }
         )
       ]
@@ -134,16 +111,7 @@ var NotificationContainer = ({
     tigercatCore.notificationPositionClasses[position]
   );
   const handleRemove = (id) => {
-    const instances = notificationInstancesByPosition[position];
-    const index = instances.findIndex((notif) => notif.id === id);
-    if (index !== -1) {
-      const instance = instances[index];
-      instances.splice(index, 1);
-      if (instance.onClose) {
-        instance.onClose();
-      }
-      updateCallbacks[position]?.();
-    }
+    removeNotification(id, position);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -169,8 +137,7 @@ function ensureContainer(position) {
   if (!tigercatCore.isBrowser()) {
     return;
   }
-  const containerId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`;
-  const rootId = `${containerId}-root`;
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
   const existingRootEl = document.getElementById(rootId);
   if (containerRoots[position] && !existingRootEl) {
     containerRoots[position] = null;
@@ -188,6 +155,17 @@ function ensureContainer(position) {
   containerRoots[position] = client.createRoot(rootEl);
   containerRoots[position].render(/* @__PURE__ */ jsxRuntime.jsx(NotificationContainer, { position }));
 }
+function destroyContainer(position) {
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
+  if (containerRoots[position]) {
+    containerRoots[position].unmount();
+    containerRoots[position] = null;
+  }
+  updateCallbacks[position] = null;
+  if (tigercatCore.isBrowser()) {
+    document.getElementById(rootId)?.remove();
+  }
+}
 function addNotification(config) {
   const position = config.position || "top-right";
   ensureContainer(position);
@@ -206,9 +184,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  if (updateCallbacks[position]) {
-    updateCallbacks[position]();
-  }
+  updateCallbacks[position]?.();
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -222,78 +198,51 @@ function removeNotification(id, position) {
   if (index !== -1) {
     const instance = instances[index];
     instances.splice(index, 1);
-    if (instance.onClose) {
-      instance.onClose();
-    }
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    instance.onClose?.();
+    updateCallbacks[position]?.();
+  }
+  if (notificationInstancesByPosition[position].length === 0) {
+    destroyContainer(position);
   }
 }
 function clearAll(position) {
   if (position) {
     notificationInstancesByPosition[position].forEach((instance) => {
-      if (instance.onClose) {
-        instance.onClose();
-      }
+      instance.onClose?.();
     });
     notificationInstancesByPosition[position] = [];
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    destroyContainer(position);
   } else {
     Object.keys(notificationInstancesByPosition).forEach((pos) => {
       const p = pos;
       notificationInstancesByPosition[p].forEach((instance) => {
-        if (instance.onClose) {
-          instance.onClose();
-        }
+        instance.onClose?.();
       });
       notificationInstancesByPosition[p] = [];
-      if (updateCallbacks[p]) {
-        updateCallbacks[p]();
-      }
+      destroyContainer(p);
     });
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { title: options };
-  }
-  return options;
+  return tigercatCore.normalizeStringOption(options, "title");
 }
 var notification = {
-  /**
-   * Show an info notification
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "info" });
   },
-  /**
-   * Show a success notification
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "success" });
   },
-  /**
-   * Show a warning notification
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "warning" });
   },
-  /**
-   * Show an error notification
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "error" });
   },
-  /**
-   * Clear all notifications
-   */
   clear(position) {
     clearAll(position);
   }

package/dist/{chunk-6ZTCBQJ7.mjs → chunk-RPTLVIBF.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { injectShakeStyle, getInputClasses, classNames, getInputAffixClasses, getInputErrorClasses, getInputWrapperClasses, SHAKE_CLASS } from '@expcat/tigercat-core';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { injectShakeStyle, SHAKE_CLASS, getInputClasses, classNames, getInputAffixClasses, getInputErrorClasses, getInputWrapperClasses, parseInputValue } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Input.tsx
@@ -8,6 +8,7 @@ var Input = ({
   type = "text",
   status = "default",
   errorMessage,
+  _shakeTrigger,
   prefix,
   suffix,
   value,
@@ -31,39 +32,30 @@ var Input = ({
   ...props
 }) => {
   injectShakeStyle();
-  const [isShaking, setIsShaking] = useState(false);
-  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
   const [internalValue, setInternalValue] = useState(defaultValue ?? "");
   useEffect(() => {
-    if (status === "error") {
-      setIsShaking(true);
+    if (status === "error" && wrapperRef.current) {
+      const el = wrapperRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
     }
-  }, [status]);
-  const handleAnimationEnd = () => {
-    setIsShaking(false);
-  };
+  }, [status, _shakeTrigger]);
+  const handleAnimationEnd = useCallback(() => {
+    wrapperRef.current?.classList.remove(SHAKE_CLASS);
+  }, []);
   const isControlled = value !== void 0;
   const inputValue = isControlled ? value : internalValue;
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autoFocus]);
-  const getNextValue = (target) => {
-    if (type === "number") {
-      return Number.isNaN(target.valueAsNumber) ? target.value : target.valueAsNumber;
-    }
-    return target.value;
-  };
   const handleInput = (event) => {
     if (!isControlled) {
-      setInternalValue(getNextValue(event.currentTarget));
+      setInternalValue(parseInputValue(event.currentTarget, type));
     }
     onInput?.(event);
   };
   const handleChange = (event) => {
     if (!isControlled) {
-      setInternalValue(getNextValue(event.currentTarget));
+      setInternalValue(parseInputValue(event.currentTarget, type));
     }
     onChange?.(event);
   };
@@ -79,7 +71,8 @@ var Input = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames(getInputWrapperClasses(), className, isShaking && SHAKE_CLASS),
+      ref: wrapperRef,
+      className: classNames(getInputWrapperClasses(), className),
       style,
       onAnimationEnd: handleAnimationEnd,
       children: [
@@ -88,7 +81,6 @@ var Input = ({
           "input",
           {
             ...props,
-            ref: inputRef,
             className: inputClasses,
             type,
             value: inputValue,