@idealyst/components 1.0.94 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.94",
+  "version": "1.0.96",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -41,7 +41,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.94",
+    "@idealyst/theme": "^1.0.96",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -91,7 +91,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.0.94",
+    "@idealyst/theme": "^1.0.96",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Input/Input.native.tsx

@@ -9,6 +9,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   onChangeText,
   onFocus,
   onBlur,
+  onPress,
   placeholder,
   disabled = false,
   inputType = 'text',
@@ -50,6 +51,12 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     }
   };
 
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    }
+  }
+
   const handleBlur = () => {
     setIsFocused(false);
     if (onBlur) {
@@ -121,6 +128,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
 
       {/* Input */}
       <TextInput
+        onPress={handlePress}
         ref={ref}
         value={value}
         onChangeText={onChangeText}

package/src/Input/Input.styles.tsx

@@ -86,7 +86,8 @@ function createFocusedCompoundVariants(theme: Theme) {
         styles: {
             borderColor: focusColor,
             _web: {
-                border: `2px solid ${focusColor}`,
+                border: `1px solid ${focusColor}`,
+                boxShadow: `0 0 0 2px ${focusColor}20`,
             },
         },
     });

package/src/Input/Input.web.tsx

@@ -1,16 +1,17 @@
-import React, { useState, isValidElement, useRef } from 'react';
+import React, { isValidElement, useState } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { InputProps } from './types';
-import { inputStyles } from './Input.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName, resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { inputStyles } from './Input.styles';
+import { InputProps } from './types';
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   value,
   onChangeText,
   onFocus,
   onBlur,
+  onPress,
   placeholder,
   disabled = false,
   inputType = 'text',
@@ -58,7 +59,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     }
   };
 
-  const handleFocus = () => {
+  const handlePress = (e: React.MouseEvent<HTMLDivElement>) => {
+    // For web compatibility, we can trigger onFocus when pressed
+    e.preventDefault();
+    e.stopPropagation();
+    if (onPress) {
+      onPress();
+    }
+  }
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     setIsFocused(true);
     if (onFocus) {
       onFocus();
@@ -97,6 +109,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   // Get input props
   const inputWebProps = getWebProps([inputStyles.input]);
 
+  const handleContainerPress = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    inputWebProps.ref?.current?.focus();
+  }
+
   // Merge the forwarded ref with unistyles ref for the input
   const mergedInputRef = useMergeRefs(ref, inputWebProps.ref);
 
@@ -154,7 +172,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   };
 
   return (
-    <div {...containerProps} data-testid={testID}>
+    <div onClick={handleContainerPress} {...containerProps} data-testid={testID}>
       {/* Left Icon */}
       {leftIcon && (
         <span {...leftIconContainerProps}>
@@ -168,6 +186,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
         ref={mergedInputRef}
         type={getInputType()}
         value={value}
+        onClick={handlePress}
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}

package/src/Input/types.ts

@@ -29,6 +29,12 @@ export interface InputProps {
    */
   onBlur?: () => void;
 
+  /**
+   * Called when the input is pressed (for web compatibility)
+   * @returns 
+   */
+  onPress?: () => void;
+
   /**
    * Placeholder text
    */

package/src/Select/Select.styles.tsx

@@ -113,7 +113,8 @@ function buildDynamicTriggerStyles(theme: Theme) {
                     true: {
                         borderColor: theme.intents.primary.primary,
                         _web: {
-                            border: `2px solid ${theme.intents.primary.primary}`,
+                            border: `1px solid ${theme.intents.primary.primary}`,
+                            boxShadow: `0 0 0 2px ${theme.intents.primary.primary}20`,
                             outline: 'none',
                         },
                     },
@@ -137,7 +138,6 @@ export const selectStyles = StyleSheet.create((theme: Theme) => {
     return {
         container: {
             position: 'relative',
-            backgroundColor: theme.colors.surface.primary,
         },
         label: {
             fontSize: 14,
@@ -256,35 +256,28 @@ export const selectStyles = StyleSheet.create((theme: Theme) => {
             flexDirection: 'row',
             alignItems: 'center',
             minHeight: 36,
-            variants: {
-                selected: {
-                    true: {
-                        backgroundColor: theme.intents.primary.light,
-                    },
-                    false: {},
+            _web: {
+                display: 'flex',
+                cursor: 'pointer',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
                 },
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                backgroundColor: theme.colors.surface.secondary,
-                            },
-                            _active: {
-                                opacity: 0.8,
-                            },
-                        },
-                    },
+                _active: {
+                    opacity: 0.8,
                 },
             },
+        },
+        optionFocused: {
+            backgroundColor: theme.interaction.focusedBackground,
             _web: {
-                display: 'flex',
+                outline: `1px solid ${theme.interaction.focusBorder}`,
+                outlineOffset: -1,
+            },
+        },
+        optionDisabled: {
+            opacity: theme.interaction.opacity.disabled,
+            _web: {
+                cursor: 'not-allowed',
             },
         },
         optionContent: {

package/src/Select/Select.web.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 // @ts-ignore - web-specific import
 import { getWebProps } from 'react-native-unistyles/web';
-import { SelectProps, SelectOption } from './types';
-import { selectStyles } from './Select.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath } from '../Icon/icon-resolver';
-import { PositionedPortal } from '../internal/PositionedPortal';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { PositionedPortal } from '../internal/PositionedPortal';
+import { selectStyles } from './Select.styles';
+import { SelectOption, SelectProps } from './types';
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(({
   options,
@@ -45,6 +45,13 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
       })
     : options;
 
+  // Get the index of the currently selected option
+  const getSelectedIndex = () => {
+    if (!value) return 0;
+    const index = filteredOptions.findIndex(option => option.value === value);
+    return index >= 0 ? index : 0;
+  };
+
   // Apply styles with variants
   selectStyles.useVariants({
     type,
@@ -54,10 +61,17 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
     focused: isOpen,
   });
 
-
-  // Handle keyboard navigation
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (!isOpen) return;
+  // Handle keyboard navigation on the trigger button
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    // Handle opening with arrow keys when closed
+    if (!isOpen) {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex(getSelectedIndex());
+      }
+      return;
+    }
 
     switch (event.key) {
       case 'ArrowDown':
@@ -72,7 +86,34 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           prev > 0 ? prev - 1 : filteredOptions.length - 1
         );
         break;
+      case 'Tab':
+        if (event.shiftKey) {
+          // Shift+Tab: go to previous option or exit
+          if (focusedIndex <= 0) {
+            setIsOpen(false);
+          } else {
+            event.preventDefault();
+            setFocusedIndex(prev => prev - 1);
+          }
+        } else {
+          // Tab: go to next option or exit
+          if (focusedIndex >= filteredOptions.length - 1) {
+            setIsOpen(false);
+          } else {
+            event.preventDefault();
+            setFocusedIndex(prev => prev < 0 ? 0 : prev + 1);
+          }
+        }
+        break;
       case 'Enter':
+        event.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          const option = filteredOptions[focusedIndex];
+          if (!option.disabled) {
+            handleOptionSelect(option);
+          }
+        }
+        break;
       case ' ':
         event.preventDefault();
         if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
@@ -82,36 +123,39 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           }
         }
         break;
+      case 'Escape':
+        event.preventDefault();
+        setIsOpen(false);
+        break;
     }
   };
 
-  useEffect(() => {
-    if (!isOpen) return;
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, focusedIndex, filteredOptions]);
-
   // Focus search input when dropdown opens
   useEffect(() => {
     if (isOpen && searchable && searchInputRef.current) {
-      // Delay to ensure dropdown is positioned
       setTimeout(() => {
         searchInputRef.current?.focus();
       }, 50);
     }
   }, [isOpen, searchable]);
 
-  const handleTriggerClick = () => {
-    if (!disabled) {
-      setIsOpen(!isOpen);
+  const handleTriggerClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleTriggerFocus = () => {
+    if (!disabled && !isOpen) {
+      setIsOpen(true);
       setSearchTerm('');
-      setFocusedIndex(-1);
+      // Focus on selected option, or first option if none selected
+      setFocusedIndex(getSelectedIndex());
     }
   };
 
   const handleOptionSelect = (option: SelectOption) => {
     if (!option.disabled) {
-      onValueChange(option.value);
+      onValueChange?.(option.value);
       setIsOpen(false);
       setSearchTerm('');
       triggerRef.current?.focus();
@@ -151,6 +195,8 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
         <button
           {...triggerWebProps}
           onClick={handleTriggerClick}
+          onFocus={handleTriggerFocus}
+          onKeyDown={handleKeyDown}
           disabled={disabled}
           aria-label={accessibilityLabel || label}
           aria-expanded={isOpen}
@@ -196,7 +242,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           {...getWebProps([selectStyles.dropdown])}
           style={{
             maxHeight: maxHeight,
-            // Override positioning since PositionedPortal handles it
             position: 'relative',
             top: 'auto',
             left: 'auto',
@@ -219,16 +264,20 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
             <div {...getWebProps([selectStyles.optionsList])}>
               {filteredOptions.map((option, index) => {
-                const isSelected = option.value === value;
+                const isFocused = index === focusedIndex;
 
                 return (
                   <div
                     key={option.value}
                     onClick={() => handleOptionSelect(option)}
                     role="option"
-                    aria-selected={isSelected}
+                    aria-selected={option.value === value}
                     onMouseEnter={() => setFocusedIndex(index)}
-                    {...getWebProps([selectStyles.option])}
+                    {...getWebProps([
+                      selectStyles.option,
+                      isFocused && selectStyles.optionFocused,
+                      option.disabled && selectStyles.optionDisabled,
+                    ])}
                   >
                     <div {...getWebProps([selectStyles.optionContent])}>
                       {option.icon && (
@@ -273,4 +322,4 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
 Select.displayName = 'Select';
 
-export default Select;
+export default Select;

package/src/index.native.ts

@@ -134,4 +134,7 @@ export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimatio
 export type { ChipProps, ChipSize, ChipIntent } from './Chip/types';
 export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
 
+// Event utilities
+export * from './utils/events';
+
 export type { AppTheme } from '@idealyst/theme'; 

package/src/index.ts

@@ -142,4 +142,7 @@ export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
 
 export { useMergeRefs };
 
+// Event utilities
+export * from './utils/events';
+
 export type { AppTheme } from '@idealyst/theme';

package/src/utils/events/events.native.ts

@@ -0,0 +1,212 @@
+/**
+ * Native-specific event wrappers
+ *
+ * Converts React Native events to standardized cross-platform events.
+ * Note: preventDefault() and stopPropagation() are no-ops on native since
+ * React Native's event system doesn't have these concepts in the same way.
+ */
+
+import type {
+  GestureResponderEvent,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  TextInputFocusEventData,
+  TextInputChangeEventData,
+} from 'react-native';
+
+import type {
+  PressEvent,
+  FocusEvent,
+  ChangeEvent,
+  TextChangeEvent,
+  ToggleEvent,
+  KeyboardEvent,
+  ScrollEvent,
+  SubmitEvent,
+} from './types';
+
+// No-op functions for native (these concepts don't apply)
+const noop = () => {};
+
+/**
+ * Wraps a React Native GestureResponderEvent into a standardized PressEvent
+ */
+export function createPressEvent(
+  event: GestureResponderEvent,
+  type: PressEvent['type'] = 'press'
+): PressEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.nativeEvent.timestamp,
+    defaultPrevented: false,
+    propagationStopped: false,
+    type,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Wraps a React Native focus event into a standardized FocusEvent
+ */
+export function createFocusEvent(
+  event: NativeSyntheticEvent<TextInputFocusEventData>,
+  type: FocusEvent['type']
+): FocusEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Creates a standardized FocusEvent without a native event (for simple focus tracking)
+ */
+export function createSimpleFocusEvent(type: FocusEvent['type']): FocusEvent {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Wraps a value change into a standardized ChangeEvent
+ */
+export function createChangeEvent<V = string>(value: V): ChangeEvent<V> {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type: 'change',
+    value,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Wraps a React Native text change event into a standardized TextChangeEvent
+ */
+export function createTextChangeEvent(
+  event: NativeSyntheticEvent<TextInputChangeEventData>
+): TextChangeEvent {
+  const text = event.nativeEvent.text;
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type: 'change',
+    value: text,
+    text,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Creates a TextChangeEvent from a simple text value (for onChangeText)
+ */
+export function createSimpleTextChangeEvent(text: string): TextChangeEvent {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type: 'change',
+    value: text,
+    text,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Creates a standardized ToggleEvent for switch/checkbox changes
+ */
+export function createToggleEvent(checked: boolean): ToggleEvent {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type: 'change',
+    value: checked,
+    checked,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Creates a standardized KeyboardEvent
+ * Note: React Native's keyboard events are more limited than web
+ */
+export function createKeyboardEvent(
+  key: string,
+  type: KeyboardEvent['type']
+): KeyboardEvent {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type,
+    key,
+    keyCode: 0,
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Wraps a React Native scroll event into a standardized ScrollEvent
+ */
+export function createScrollEvent(
+  event: NativeSyntheticEvent<NativeScrollEvent>,
+  type: ScrollEvent['type'] = 'scroll'
+): ScrollEvent {
+  const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type,
+    contentOffset,
+    contentSize,
+    layoutMeasurement,
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}
+
+/**
+ * Creates a standardized SubmitEvent
+ */
+export function createSubmitEvent(): SubmitEvent {
+  return {
+    nativeEvent: null,
+    timestamp: Date.now(),
+    defaultPrevented: false,
+    propagationStopped: false,
+    type: 'submit',
+    preventDefault: noop,
+    stopPropagation: noop,
+  };
+}

package/src/utils/events/events.web.ts

@@ -0,0 +1,184 @@
+/**
+ * Web-specific event wrappers
+ *
+ * Converts React web events to standardized cross-platform events
+ */
+
+import type {
+  PressEvent,
+  FocusEvent,
+  ChangeEvent,
+  TextChangeEvent,
+  ToggleEvent,
+  KeyboardEvent,
+  ScrollEvent,
+  SubmitEvent,
+} from './types';
+
+type ReactMouseEvent = React.MouseEvent<HTMLElement>;
+type ReactFocusEvent = React.FocusEvent<HTMLElement>;
+type ReactChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+type ReactKeyboardEvent = React.KeyboardEvent<HTMLElement>;
+type ReactFormEvent = React.FormEvent<HTMLFormElement>;
+type ReactUIEvent = React.UIEvent<HTMLElement>;
+
+/**
+ * Wraps a React mouse/click event into a standardized PressEvent
+ */
+export function createPressEvent(
+  event: ReactMouseEvent,
+  type: PressEvent['type'] = 'press'
+): PressEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React focus event into a standardized FocusEvent
+ */
+export function createFocusEvent(
+  event: ReactFocusEvent,
+  type: FocusEvent['type']
+): FocusEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React change event into a standardized ChangeEvent
+ */
+export function createChangeEvent<V = string>(
+  event: ReactChangeEvent,
+  value: V
+): ChangeEvent<V> {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type: 'change',
+    value,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React change event for text inputs into a standardized TextChangeEvent
+ */
+export function createTextChangeEvent(event: ReactChangeEvent): TextChangeEvent {
+  const value = event.target.value;
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type: 'change',
+    value,
+    text: value,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React change event for checkboxes/switches into a standardized ToggleEvent
+ */
+export function createToggleEvent(event: ReactChangeEvent): ToggleEvent {
+  const checked = (event.target as HTMLInputElement).checked;
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type: 'change',
+    value: checked,
+    checked,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React keyboard event into a standardized KeyboardEvent
+ */
+export function createKeyboardEvent(
+  event: ReactKeyboardEvent,
+  type: KeyboardEvent['type']
+): KeyboardEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type,
+    key: event.key,
+    keyCode: event.keyCode,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React scroll event into a standardized ScrollEvent
+ */
+export function createScrollEvent(
+  event: ReactUIEvent,
+  type: ScrollEvent['type'] = 'scroll'
+): ScrollEvent {
+  const target = event.target as HTMLElement;
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type,
+    contentOffset: {
+      x: target.scrollLeft,
+      y: target.scrollTop,
+    },
+    contentSize: {
+      width: target.scrollWidth,
+      height: target.scrollHeight,
+    },
+    layoutMeasurement: {
+      width: target.clientWidth,
+      height: target.clientHeight,
+    },
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}
+
+/**
+ * Wraps a React form submit event into a standardized SubmitEvent
+ */
+export function createSubmitEvent(event: ReactFormEvent): SubmitEvent {
+  return {
+    nativeEvent: event.nativeEvent,
+    timestamp: event.timeStamp,
+    defaultPrevented: event.defaultPrevented,
+    propagationStopped: false,
+    type: 'submit',
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => event.stopPropagation(),
+  };
+}

package/src/utils/events/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Cross-platform event utilities
+ *
+ * This module provides standardized event types and creation functions
+ * that work consistently across web and native platforms.
+ */
+
+// Re-export all types
+export type {
+  SyntheticEvent,
+  PressEvent,
+  FocusEvent,
+  ChangeEvent,
+  TextChangeEvent,
+  SelectChangeEvent,
+  ToggleEvent,
+  KeyboardEvent,
+  ScrollEvent,
+  SubmitEvent,
+  PressEventHandler,
+  FocusEventHandler,
+  ChangeEventHandler,
+  TextChangeEventHandler,
+  SelectChangeEventHandler,
+  ToggleEventHandler,
+  KeyboardEventHandler,
+  ScrollEventHandler,
+  SubmitEventHandler,
+} from './types';
+
+// Re-export base utility
+export { createBaseSyntheticEvent } from './types';
+
+// Re-export platform-specific functions (native by default)
+export {
+  createPressEvent,
+  createFocusEvent,
+  createSimpleFocusEvent,
+  createChangeEvent,
+  createTextChangeEvent,
+  createSimpleTextChangeEvent,
+  createToggleEvent,
+  createKeyboardEvent,
+  createScrollEvent,
+  createSubmitEvent,
+} from './events.native';

package/src/utils/events/index.web.ts

@@ -0,0 +1,44 @@
+/**
+ * Cross-platform event utilities (Web)
+ *
+ * This module provides standardized event types and creation functions
+ * that work consistently across web and native platforms.
+ */
+
+// Re-export all types
+export type {
+  SyntheticEvent,
+  PressEvent,
+  FocusEvent,
+  ChangeEvent,
+  TextChangeEvent,
+  SelectChangeEvent,
+  ToggleEvent,
+  KeyboardEvent,
+  ScrollEvent,
+  SubmitEvent,
+  PressEventHandler,
+  FocusEventHandler,
+  ChangeEventHandler,
+  TextChangeEventHandler,
+  SelectChangeEventHandler,
+  ToggleEventHandler,
+  KeyboardEventHandler,
+  ScrollEventHandler,
+  SubmitEventHandler,
+} from './types';
+
+// Re-export base utility
+export { createBaseSyntheticEvent } from './types';
+
+// Re-export platform-specific functions (web)
+export {
+  createPressEvent,
+  createFocusEvent,
+  createChangeEvent,
+  createTextChangeEvent,
+  createToggleEvent,
+  createKeyboardEvent,
+  createScrollEvent,
+  createSubmitEvent,
+} from './events.web';

package/src/utils/events/types.ts

@@ -0,0 +1,231 @@
+/**
+ * Standardized cross-platform event system
+ *
+ * Provides unified event interfaces that work consistently across web and native.
+ * On native, methods like preventDefault() and stopPropagation() are no-ops since
+ * React Native's event system doesn't have these concepts in the same way.
+ */
+
+/**
+ * Base synthetic event interface that normalizes web and native events
+ */
+export interface SyntheticEvent<T = unknown> {
+  /**
+   * The native event (platform-specific)
+   * - Web: React.SyntheticEvent
+   * - Native: GestureResponderEvent or NativeSyntheticEvent
+   */
+  nativeEvent: T;
+
+  /**
+   * Prevents the default behavior of the event.
+   * On native, this is a no-op as there's no default behavior concept.
+   */
+  preventDefault: () => void;
+
+  /**
+   * Stops the event from propagating to parent elements.
+   * On native, this is a no-op.
+   */
+  stopPropagation: () => void;
+
+  /**
+   * Whether preventDefault() has been called
+   */
+  defaultPrevented: boolean;
+
+  /**
+   * Whether stopPropagation() has been called
+   */
+  propagationStopped: boolean;
+
+  /**
+   * Timestamp of when the event occurred
+   */
+  timestamp: number;
+}
+
+/**
+ * Press/Click event - for buttons, pressables, touchable elements
+ */
+export interface PressEvent extends SyntheticEvent {
+  /**
+   * The type of press event
+   */
+  type: 'press' | 'pressIn' | 'pressOut' | 'longPress';
+}
+
+/**
+ * Focus event - for inputs and focusable elements
+ */
+export interface FocusEvent extends SyntheticEvent {
+  /**
+   * The type of focus event
+   */
+  type: 'focus' | 'blur';
+}
+
+/**
+ * Change event - for inputs, selects, checkboxes, etc.
+ */
+export interface ChangeEvent<V = string> extends SyntheticEvent {
+  /**
+   * The new value after the change
+   */
+  value: V;
+
+  /**
+   * The type of change event
+   */
+  type: 'change';
+}
+
+/**
+ * Text change event - specifically for text inputs
+ */
+export interface TextChangeEvent extends ChangeEvent<string> {
+  /**
+   * The text value
+   */
+  text: string;
+}
+
+/**
+ * Selection change event - for selects, dropdowns
+ */
+export interface SelectChangeEvent<V = string> extends ChangeEvent<V> {
+  /**
+   * The selected value(s)
+   */
+  selected: V;
+}
+
+/**
+ * Toggle event - for switches, checkboxes
+ */
+export interface ToggleEvent extends ChangeEvent<boolean> {
+  /**
+   * Whether the toggle is now checked/on
+   */
+  checked: boolean;
+}
+
+/**
+ * Keyboard event - for keyboard interactions
+ */
+export interface KeyboardEvent extends SyntheticEvent {
+  /**
+   * The key that was pressed
+   */
+  key: string;
+
+  /**
+   * The key code
+   */
+  keyCode: number;
+
+  /**
+   * Whether the alt/option key was pressed
+   */
+  altKey: boolean;
+
+  /**
+   * Whether the control key was pressed
+   */
+  ctrlKey: boolean;
+
+  /**
+   * Whether the meta/command key was pressed
+   */
+  metaKey: boolean;
+
+  /**
+   * Whether the shift key was pressed
+   */
+  shiftKey: boolean;
+
+  /**
+   * The type of keyboard event
+   */
+  type: 'keyDown' | 'keyUp' | 'keyPress';
+}
+
+/**
+ * Scroll event - for scrollable containers
+ */
+export interface ScrollEvent extends SyntheticEvent {
+  /**
+   * Current scroll position
+   */
+  contentOffset: {
+    x: number;
+    y: number;
+  };
+
+  /**
+   * Size of the scrollable content
+   */
+  contentSize: {
+    width: number;
+    height: number;
+  };
+
+  /**
+   * Size of the visible container
+   */
+  layoutMeasurement: {
+    width: number;
+    height: number;
+  };
+
+  /**
+   * The type of scroll event
+   */
+  type: 'scroll' | 'scrollBegin' | 'scrollEnd';
+}
+
+/**
+ * Submit event - for forms
+ */
+export interface SubmitEvent extends SyntheticEvent {
+  /**
+   * The type of submit event
+   */
+  type: 'submit';
+}
+
+// Event handler type aliases for convenience
+export type PressEventHandler = (event: PressEvent) => void;
+export type FocusEventHandler = (event: FocusEvent) => void;
+export type ChangeEventHandler<V = string> = (event: ChangeEvent<V>) => void;
+export type TextChangeEventHandler = (event: TextChangeEvent) => void;
+export type SelectChangeEventHandler<V = string> = (event: SelectChangeEvent<V>) => void;
+export type ToggleEventHandler = (event: ToggleEvent) => void;
+export type KeyboardEventHandler = (event: KeyboardEvent) => void;
+export type ScrollEventHandler = (event: ScrollEvent) => void;
+export type SubmitEventHandler = (event: SubmitEvent) => void;
+
+/**
+ * Creates a base synthetic event object with default implementations
+ */
+export function createBaseSyntheticEvent<T>(nativeEvent: T): SyntheticEvent<T> {
+  let defaultPrevented = false;
+  let propagationStopped = false;
+
+  return {
+    nativeEvent,
+    timestamp: Date.now(),
+    get defaultPrevented() {
+      return defaultPrevented;
+    },
+    get propagationStopped() {
+      return propagationStopped;
+    },
+    preventDefault() {
+      defaultPrevented = true;
+    },
+    stopPropagation() {
+      propagationStopped = true;
+    },
+  };
+}