add input props

Author: woobottle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "woosign-system",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "WooBottle 'Paper & Ink' design system — cross-platform React Native + Web components (cream canvas, ink surfaces, ember CTAs, ceremonial gold).",
   "keywords": [
     "react",

src/components/Input/Input.web.tsx

@@ -51,35 +51,51 @@ export const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputWeb
       maxLength,
       multiline = false,
       numberOfLines,
+      inputProps,
     },
     ref
   ) {
     const [isFocused, setIsFocused] = useState(false);
 
-    const handleFocus = useCallback(() => {
-      setIsFocused(true);
-      onFocus?.();
-    }, [onFocus]);
+    const userOnChange = inputProps?.onChange;
+    const userOnKeyDown = inputProps?.onKeyDown;
+    const userOnFocus = inputProps?.onFocus;
+    const userOnBlur = inputProps?.onBlur;
 
-    const handleBlur = useCallback(() => {
-      setIsFocused(false);
-      onBlur?.();
-    }, [onBlur]);
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setIsFocused(true);
+        onFocus?.();
+        (userOnFocus as ((e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined)?.(e);
+      },
+      [onFocus, userOnFocus]
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setIsFocused(false);
+        onBlur?.();
+        (userOnBlur as ((e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined)?.(e);
+      },
+      [onBlur, userOnBlur]
+    );
 
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         onChangeText?.(e.currentTarget.value);
+        (userOnChange as ((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined)?.(e);
       },
-      [onChangeText]
+      [onChangeText, userOnChange]
     );
 
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (e.key === 'Enter' && !multiline && onSubmitEditing) {
           onSubmitEditing();
         }
+        (userOnKeyDown as ((e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined)?.(e);
       },
-      [multiline, onSubmitEditing]
+      [multiline, onSubmitEditing, userOnKeyDown]
     );
 
     // Get variant styles
@@ -117,8 +133,13 @@ export const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputWeb
       color: placeholderColor,
     };
 
-    // Common props for input/textarea
+    // Common props for input/textarea.
+    // `inputProps` is spread first so user-provided pass-through props
+    // (onPaste, onCompositionStart, data-*, aria-*, ...) apply, then internal
+    // props/handlers override to keep variant behavior intact. The four
+    // chained handlers above already invoke the user-supplied versions.
     const commonProps = {
+      ...inputProps,
       placeholder,
       value,
       defaultValue,

src/components/Input/types.ts

@@ -84,6 +84,17 @@ export interface InputWebProps extends InputBaseProps {
   max?: number | string;
   /** Step value for number inputs */
   step?: number | string;
+  /**
+   * Pass-through props for the underlying <input>/<textarea>.
+   * Use this for handlers the component doesn't expose directly
+   * (onPaste, onCompositionStart, raw onChange/onKeyDown for OTP-style inputs, etc.).
+   * Internal handlers (focus tracking, onChangeText, onSubmitEditing) still run alongside.
+   */
+  inputProps?: Omit<
+    React.InputHTMLAttributes<HTMLInputElement> &
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'value' | 'defaultValue' | 'placeholder' | 'disabled' | 'readOnly' | 'style' | 'ref'
+  >;
 }
 
 // Native-specific props