@adam-milo/ui 1.0.21 → 1.0.23

package/dist/index6.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useId } from "react";
-import { cn } from "./index17.js";
-/* empty css        */
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo, useCallback, useState, useEffect } from "react";
+import { Input } from "./index20.js";
+import { useMergedRef } from "./index21.js";
 const AlphanumericInput = forwardRef(
   ({
     allowHyphen = false,
@@ -9,185 +9,99 @@ const AlphanumericInput = forwardRef(
     allowSpace = false,
     minLength,
     maxLength,
-    invalidFormatMessage = "Only letters and numbers are allowed",
-    minLengthMessage,
-    maxLengthMessage,
-    onValidationChange,
-    error: externalError,
+    validate,
     onChange,
-    onKeyDown,
-    label,
-    helperText,
-    fullWidth = false,
-    className,
-    id: providedId,
     "data-cy": dataCy,
     "data-testid": dataTestId,
     ...props
   }, ref) => {
-    const [internalError, setInternalError] = useState();
-    const [touched, setTouched] = useState(false);
-    const generatedId = useId();
-    const id = providedId || generatedId;
-    const errorId = `${id}-error`;
-    const helperId = `${id}-helper`;
-    const finalDataCy = dataCy || "alphanumeric-input";
-    const finalTestId = dataTestId || "alphanumeric-input";
-    const validateFormat = (value) => {
-      if (!value) return { isValid: true };
+    const inputRef = useRef(null);
+    const mergedRef = useMergedRef(ref, inputRef);
+    const alphanumericRegex = useMemo(() => {
       let pattern = "^[a-zA-Z0-9";
       if (allowHyphen) pattern += "\\-";
       if (allowUnderscore) pattern += "_";
       if (allowSpace) pattern += " ";
-      pattern += "]+$";
-      const regex = new RegExp(pattern);
-      if (!regex.test(value)) {
-        let message = invalidFormatMessage;
-        if (allowHyphen || allowUnderscore || allowSpace) {
-          const allowed = ["letters", "numbers"];
-          if (allowHyphen) allowed.push("hyphens");
-          if (allowUnderscore) allowed.push("underscores");
-          if (allowSpace) allowed.push("spaces");
-          message = `Only ${allowed.join(", ")} are allowed`;
+      pattern += "]*$";
+      return new RegExp(pattern);
+    }, [allowHyphen, allowUnderscore, allowSpace]);
+    const characterRegex = useMemo(() => {
+      let pattern = "[a-zA-Z0-9";
+      if (allowHyphen) pattern += "\\-";
+      if (allowUnderscore) pattern += "_";
+      if (allowSpace) pattern += " ";
+      pattern += "]";
+      return new RegExp(pattern);
+    }, [allowHyphen, allowUnderscore, allowSpace]);
+    const alphanumericValidation = useCallback(
+      (value) => {
+        if (!value) return void 0;
+        if (!alphanumericRegex.test(value)) {
+          let allowedChars = "letters and numbers";
+          const extras = [];
+          if (allowHyphen) extras.push("hyphens");
+          if (allowUnderscore) extras.push("underscores");
+          if (allowSpace) extras.push("spaces");
+          if (extras.length > 0) {
+            allowedChars += `, ${extras.join(", ")}`;
+          }
+          return `Only ${allowedChars} are allowed`;
         }
-        return { isValid: false, error: message };
-      }
-      if (minLength !== void 0 && value.length < minLength) {
-        return {
-          isValid: false,
-          error: minLengthMessage || `Must be at least ${minLength} characters`
-        };
-      }
-      if (maxLength !== void 0 && value.length > maxLength) {
-        return {
-          isValid: false,
-          error: maxLengthMessage || `Must be at most ${maxLength} characters`
-        };
-      }
-      return { isValid: true };
-    };
-    const handleKeyDown = (e) => {
-      const allowedKeys = [
-        "Backspace",
-        "Delete",
-        "Tab",
-        "Escape",
-        "Enter",
-        "ArrowLeft",
-        "ArrowRight",
-        "Home",
-        "End"
-      ];
-      if (e.ctrlKey || e.metaKey) {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowedKeys.includes(e.key)) {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowSpace && e.key === " ") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowHyphen && e.key === "-") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowUnderscore && e.key === "_") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (e.key >= "a" && e.key <= "z" || e.key >= "A" && e.key <= "Z") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (e.key >= "0" && e.key <= "9") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      e.preventDefault();
-    };
-    const handleChange = (e) => {
-      const value = e.target.value;
-      if (touched) {
-        const validation = validateFormat(value);
-        setInternalError(validation.error);
-        onValidationChange == null ? void 0 : onValidationChange(validation.isValid);
+        if (minLength !== void 0 && value.length < minLength) {
+          return `Must be at least ${minLength} characters`;
+        }
+        if (maxLength !== void 0 && value.length > maxLength) {
+          return `Must be at most ${maxLength} characters`;
+        }
+        return void 0;
+      },
+      [alphanumericRegex, minLength, maxLength, allowHyphen, allowUnderscore, allowSpace]
+    );
+    const combinedValidation = useCallback(
+      (value) => {
+        if (!validate) return alphanumericValidation(value);
+        return alphanumericValidation(value) || validate(value);
+      },
+      [alphanumericValidation, validate]
+    );
+    const [pendingCursorPosition, setPendingCursorPosition] = useState(null);
+    useEffect(() => {
+      if (pendingCursorPosition !== null && inputRef.current) {
+        inputRef.current.setSelectionRange(pendingCursorPosition, pendingCursorPosition);
+        setPendingCursorPosition(null);
       }
-      onChange == null ? void 0 : onChange(e);
-    };
-    const handleBlur = (e) => {
-      var _a;
-      setTouched(true);
-      const validation = validateFormat(e.target.value);
-      setInternalError(validation.error);
-      onValidationChange == null ? void 0 : onValidationChange(validation.isValid);
-      (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
-    };
-    const displayError = externalError || internalError;
-    return /* @__PURE__ */ jsxs(
-      "div",
+    }, [props.value, pendingCursorPosition]);
+    const handleChange = useCallback(
+      (e) => {
+        const input = e.target;
+        const value = input.value;
+        const cursorPosition = input.selectionStart || 0;
+        const filteredValue = value.split("").filter((char) => characterRegex.test(char)).join("");
+        const removedBeforeCursor = value.slice(0, cursorPosition).split("").filter((char) => !characterRegex.test(char)).length;
+        const newPosition = cursorPosition - removedBeforeCursor;
+        input.value = filteredValue;
+        const isControlled = props.value !== void 0;
+        if (isControlled) {
+          setPendingCursorPosition(newPosition);
+        } else {
+          input.setSelectionRange(newPosition, newPosition);
+        }
+        onChange == null ? void 0 : onChange(e);
+      },
+      [characterRegex, onChange, props.value]
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
       {
-        className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
-        "data-cy": `${finalDataCy}-wrapper`,
-        "data-testid": `${finalTestId}-wrapper`,
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: id,
-              className: "input__label",
-              "data-cy": `${finalDataCy}-label`,
-              "data-testid": `${finalTestId}-label`,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              id,
-              type: "text",
-              className: cn(
-                "input",
-                displayError && "input--error",
-                fullWidth && "input--full-width",
-                className
-              ),
-              "aria-invalid": displayError ? "true" : "false",
-              "aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
-              "data-cy": finalDataCy,
-              "data-testid": finalTestId,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              onKeyDown: handleKeyDown,
-              maxLength,
-              ...props
-            }
-          ),
-          displayError && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: errorId,
-              className: "input__error",
-              role: "alert",
-              "data-cy": `${finalDataCy}-error`,
-              "data-testid": `${finalTestId}-error`,
-              children: displayError
-            }
-          ),
-          helperText && !displayError && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: helperId,
-              className: "input__helper",
-              "data-cy": `${finalDataCy}-helper`,
-              "data-testid": `${finalTestId}-helper`,
-              children: helperText
-            }
-          )
-        ]
+        ref: mergedRef,
+        type: "text",
+        minLength,
+        maxLength,
+        validate: combinedValidation,
+        onChange: handleChange,
+        "data-cy": dataCy || "alphanumeric-input",
+        "data-testid": dataTestId || "alphanumeric-input",
+        ...props
       }
     );
   }

package/dist/src/components/forms/alphanumeric-input/AlphanumericInput.component.d.ts

@@ -1,22 +1,18 @@
-import { InputHTMLAttributes } from 'react';
+import { InputProps } from '../input/Input.component';
 
-export interface AlphanumericInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    label?: string;
-    error?: string;
-    helperText?: string;
-    fullWidth?: boolean;
+export interface AlphanumericInputProps extends Omit<InputProps, 'type'> {
     /**
-     * Allow hyphen (-) character
+     * Allow hyphens in the input
      * @default false
      */
     allowHyphen?: boolean;
     /**
-     * Allow underscore (_) character
+     * Allow underscores in the input
      * @default false
      */
     allowUnderscore?: boolean;
     /**
-     * Allow space character
+     * Allow spaces in the input
      * @default false
      */
     allowSpace?: boolean;
@@ -28,35 +24,24 @@ export interface AlphanumericInputProps extends Omit<InputHTMLAttributes<HTMLInp
      * Maximum length
      */
     maxLength?: number;
-    /**
-     * Custom validation message for invalid format
-     * @default "Only letters and numbers are allowed"
-     */
-    invalidFormatMessage?: string;
-    /**
-     * Custom validation message for min length
-     * @default "Must be at least {minLength} characters"
-     */
-    minLengthMessage?: string;
-    /**
-     * Custom validation message for max length
-     * @default "Must be at most {maxLength} characters"
-     */
-    maxLengthMessage?: string;
-    /**
-     * Callback when validation changes
-     */
-    onValidationChange?: (isValid: boolean) => void;
-    /**
-     * Custom data-cy attribute for Cypress testing
-     * Auto-generates as "alphanumeric-input" if not provided
-     */
-    'data-cy'?: string;
-    /**
-     * Custom data-testid attribute for unit testing
-     * Auto-generates as "alphanumeric-input" if not provided
-     */
-    'data-testid'?: string;
 }
+/**
+ * AlphanumericInput - Specialized input component for alphanumeric values
+ *
+ * A wrapper around the base Input component that only allows letters and numbers,
+ * with optional support for hyphens, underscores, and spaces.
+ *
+ * @example
+ * ```tsx
+ * <AlphanumericInput
+ *   label="Username"
+ *   placeholder="Enter username"
+ *   minLength={3}
+ *   maxLength={20}
+ *   allowUnderscore={true}
+ *   required
+ * />
+ * ```
+ */
 export declare const AlphanumericInput: import('react').ForwardRefExoticComponent<AlphanumericInputProps & import('react').RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=AlphanumericInput.component.d.ts.map

package/dist/src/components/forms/alphanumeric-input/AlphanumericInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlphanumericInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/alphanumeric-input/AlphanumericInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAEf,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,qHAgO7B,CAAC"}
+{"version":3,"file":"AlphanumericInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/alphanumeric-input/AlphanumericInput.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG7D,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IACtE;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,qHAwJ7B,CAAC"}

package/dist/src/components/forms/email-input/EmailInput.component.d.ts

@@ -1,10 +1,6 @@
-import { InputHTMLAttributes } from 'react';
+import { InputProps } from '../input/Input.component';
 
-export interface EmailInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    label?: string;
-    error?: string;
-    helperText?: string;
-    fullWidth?: boolean;
+export interface EmailInputProps extends Omit<InputProps, 'type'> {
     /**
      * Enable client-side email validation
      * @default true
@@ -15,20 +11,21 @@ export interface EmailInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
      * @default "Not a valid email address"
      */
     invalidEmailMessage?: string;
-    /**
-     * Callback when email validation changes
-     */
-    onValidationChange?: (isValid: boolean) => void;
-    /**
-     * Custom data-cy attribute for Cypress testing
-     * Auto-generates as "email-input" if not provided
-     */
-    'data-cy'?: string;
-    /**
-     * Custom data-testid attribute for unit testing
-     * Auto-generates as "email-input" if not provided
-     */
-    'data-testid'?: string;
 }
+/**
+ * EmailInput - Specialized input component for email addresses
+ *
+ * A wrapper around the base Input component with built-in email validation.
+ *
+ * @example
+ * ```tsx
+ * <EmailInput
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   required
+ *   validateEmail={true}
+ * />
+ * ```
+ */
 export declare const EmailInput: import('react').ForwardRefExoticComponent<EmailInputProps & import('react').RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=EmailInput.component.d.ts.map

package/dist/src/components/forms/email-input/EmailInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/email-input/EmailInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAA4C,MAAM,OAAO,CAAC;AAEtF,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAQD,eAAO,MAAM,UAAU,8GAuHtB,CAAC"}
+{"version":3,"file":"EmailInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/email-input/EmailInput.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAC/D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,8GA4CtB,CAAC"}

package/dist/src/components/forms/input/Input.component.d.ts

@@ -0,0 +1,105 @@
+import { InputHTMLAttributes } from 'react';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Error message to display below the input
+     */
+    error?: string;
+    /**
+     * Helper text to display below the input (only shown when no error)
+     */
+    helperText?: string;
+    /**
+     * Whether the input should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Show password visibility toggle (only for type="password")
+     * @default true for password inputs
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Show last character preview for password inputs
+     * When enabled, only the last typed character is visible, all others are masked with bullets (•)
+     * NOTE: Only works in uncontrolled mode (without value prop)
+     * @default true for password inputs
+     */
+    showLastChar?: boolean;
+    /**
+     * Delay in milliseconds before fully masking the last character
+     * @default 500
+     */
+    lastCharDelay?: number;
+    /**
+     * Custom validation function
+     * Returns error message if invalid, undefined if valid
+     */
+    validate?: (value: string) => string | undefined;
+    /**
+     * Callback when validation state changes
+     */
+    onValidationChange?: (isValid: boolean) => void;
+    /**
+     * Custom data-cy attribute for Cypress testing
+     * Auto-generates as "input" if not provided
+     */
+    'data-cy'?: string;
+    /**
+     * Custom data-testid attribute for unit testing
+     * Auto-generates as "input" if not provided
+     */
+    'data-testid'?: string;
+}
+/**
+ * Input - Generic input component for the Saas Design System
+ *
+ * A flexible input component that can be configured for different use cases:
+ * - Text input
+ * - Email input with custom validation
+ * - Password input with visibility toggle and last character preview
+ * - Any other HTML input type
+ *
+ * Features:
+ * - Automatically adds asterisk (*) to label when required={true}
+ * - Adds aria-required attribute for accessibility
+ * - Custom validation with error messages
+ * - Password visibility toggle
+ * - Last character preview for password inputs (shows ONLY last typed char, masks rest with •)
+ * - Helper text support
+ * - Full keyboard accessibility
+ *
+ * @example
+ * ```tsx
+ * // Simple text input
+ * <Input label="Name" placeholder="Enter your name" />
+ *
+ * // Email with validation (asterisk added automatically)
+ * <Input
+ *   type="email"
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   required
+ *   validate={(value) => {
+ *     if (!value.includes('@')) return 'Not a valid email';
+ *   }}
+ * />
+ *
+ * // Password with toggle and last char preview (asterisk added automatically)
+ * <Input
+ *   type="password"
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   required
+ *   showPasswordToggle
+ *   showLastChar
+ *   lastCharDelay={500}
+ * />
+ * ```
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.component.d.ts.map

package/dist/src/components/forms/input/Input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/input/Input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAQpB,MAAM,OAAO,CAAC;AAEf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAEjD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,KAAK,yGAsWjB,CAAC"}

package/dist/src/components/forms/numeric-input/NumericInput.component.d.ts

@@ -1,62 +1,44 @@
-import { InputHTMLAttributes } from 'react';
+import { InputProps } from '../input/Input.component';
 
-export interface NumericInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'min' | 'max' | 'step'> {
-    label?: string;
-    error?: string;
-    helperText?: string;
-    fullWidth?: boolean;
+export interface NumericInputProps extends Omit<InputProps, 'type'> {
     /**
-     * Allow decimal numbers (e.g., 3.14)
-     * @default false
-     */
-    allowDecimal?: boolean;
-    /**
-     * Allow negative numbers
-     * @default false
-     */
-    allowNegative?: boolean;
-    /**
-     * Minimum value (inclusive)
+     * Minimum value allowed
      */
     min?: number;
     /**
-     * Maximum value (inclusive)
+     * Maximum value allowed
      */
     max?: number;
     /**
-     * Maximum number of decimal places
-     * @default 2
-     */
-    decimalPlaces?: number;
-    /**
-     * Custom validation message for invalid number
-     * @default "Please enter a valid number"
+     * Step increment for the number input
+     * @default 1
      */
-    invalidNumberMessage?: string;
+    step?: number;
     /**
-     * Custom validation message for min value
-     * @default "Value must be at least {min}"
-     */
-    minValueMessage?: string;
-    /**
-     * Custom validation message for max value
-     * @default "Value must be at most {max}"
-     */
-    maxValueMessage?: string;
-    /**
-     * Callback when validation changes
-     */
-    onValidationChange?: (isValid: boolean) => void;
-    /**
-     * Custom data-cy attribute for Cypress testing
-     * Auto-generates as "numeric-input" if not provided
-     */
-    'data-cy'?: string;
-    /**
-     * Custom data-testid attribute for unit testing
-     * Auto-generates as "numeric-input" if not provided
+     * Allow decimal numbers
+     * @default false
      */
-    'data-testid'?: string;
+    allowDecimals?: boolean;
 }
+/**
+ * NumericInput - Specialized input component for numeric values
+ *
+ * A wrapper around the base Input component with number-specific features:
+ * - Type="number" by default
+ * - Min/max validation
+ * - Step increments
+ * - Optional decimal support
+ *
+ * @example
+ * ```tsx
+ * <NumericInput
+ *   label="Age"
+ *   placeholder="Enter age"
+ *   min={0}
+ *   max={120}
+ *   required
+ * />
+ * ```
+ */
 export declare const NumericInput: import('react').ForwardRefExoticComponent<NumericInputProps & import('react').RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=NumericInput.component.d.ts.map

package/dist/src/components/forms/numeric-input/NumericInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/numeric-input/NumericInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAEf,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAChC;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,gHAqNxB,CAAC"}
+{"version":3,"file":"NumericInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/numeric-input/NumericInput.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IACjE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,gHAmExB,CAAC"}