@idealyst/components 1.1.1 → 1.1.3

package/src/Divider/types.ts

@@ -1,6 +1,7 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type DividerIntentVariant = Intent;
@@ -10,7 +11,7 @@ export type DividerThicknessVariant = 'thin' | 'md' | 'thick';
 export type DividerLengthVariant = 'full' | 'auto' | number;
 export type DividerSpacingVariant = 'none' | Size;
 
-export interface DividerProps {
+export interface DividerProps extends BaseProps {
   /**
    * The orientation of the divider
    */

package/src/Icon/Icon.native.tsx

@@ -11,6 +11,7 @@ const Icon = forwardRef<any, IconProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }: IconProps, ref) => {
 
 
@@ -22,6 +23,7 @@ const Icon = forwardRef<any, IconProps>(({
   return (
     <MaterialCommunityIcons
       ref={ref}
+      nativeID={id}
       name={name}
       style={[iconStyle, style]}
       testID={testID}

package/src/Icon/Icon.web.tsx

@@ -19,6 +19,7 @@ const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, re
     style,
     testID,
     accessibilityLabel,
+    id,
     ...restProps
   } = props;
 
@@ -32,7 +33,8 @@ const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, re
   return (
     <div
       {...iconProps}
-      ref={mergedRef}>
+      ref={mergedRef}
+      id={id}>
       <MdiIcon
         path={path}
         size={'100%'}

package/src/Icon/types.ts

@@ -2,10 +2,11 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from "./icon-types";
 import type { Size } from '@idealyst/theme';
 import { Color, Intent } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export type IconSizeVariant = Size | number;
 
-export interface IconProps {
+export interface IconProps extends BaseProps {
   /**
    * The name of the icon to display
    */

package/src/Image/Image.native.tsx

@@ -19,6 +19,7 @@ const Image = forwardRef<View, ImageProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
 
   const [isLoading, setIsLoading] = useState(true);
@@ -56,7 +57,7 @@ const Image = forwardRef<View, ImageProps>(({
   ];
 
   return (
-    <View ref={ref} style={containerStyle as any} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID}>
       <RNImage
         source={imageSource as any}
         style={[imageStyles.image, { borderRadius }]}

package/src/Image/Image.web.tsx

@@ -20,6 +20,7 @@ const Image: React.FC<ImageProps> = ({
   style,
   testID,
   accessibilityLabel,
+  id,
 }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
@@ -62,6 +63,7 @@ const Image: React.FC<ImageProps> = ({
   return (
     <div
       {...containerProps}
+      id={id}
       data-testid={testID}
     >
       <img

package/src/Image/types.ts

@@ -1,8 +1,9 @@
 import type { StyleProp, ImageStyle, ImageSourcePropType } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 
-export interface ImageProps {
+export interface ImageProps extends BaseProps {
   source: ImageSourcePropType | string;
   alt?: string;
   width?: number | string;

package/src/Input/Input.native.tsx

@@ -27,6 +27,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -125,7 +126,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   };
 
   return (
-    <View style={[inputStyles.container, style]} testID={testID}>
+    <View style={[inputStyles.container, style]} testID={testID} nativeID={id}>
       {/* Left Icon */}
       {leftIcon && (
         <View style={inputStyles.leftIconContainer}>

package/src/Input/Input.styles.tsx

@@ -121,6 +121,7 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
         flexDirection: 'row',
         alignItems: 'center',
         width: '100%',
+        minWidth: 0,
         borderRadius: 8,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({

package/src/Input/Input.web.tsx

@@ -29,6 +29,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
@@ -179,7 +180,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   };
 
   return (
-    <div onClick={handleContainerPress} {...containerProps} data-testid={testID}>
+    <div onClick={handleContainerPress} {...containerProps} id={id} data-testid={testID}>
       {/* Left Icon */}
       {leftIcon && (
         <span {...leftIconContainerProps}>

package/src/Link/Link.native.tsx

@@ -12,6 +12,7 @@ const Link: React.FC<LinkProps> = ({
   testID,
   accessibilityLabel,
   onPress,
+  id,
 }) => {
   const navigator = useNavigator();
 
@@ -28,6 +29,7 @@ const Link: React.FC<LinkProps> = ({
       disabled={disabled}
       style={style}
       testID={testID}
+      id={id}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="link"
     >

package/src/Link/Link.web.tsx

@@ -12,6 +12,7 @@ const Link: React.FC<LinkProps> = ({
   testID,
   accessibilityLabel,
   onPress,
+  id,
 }) => {
   const navigator = useNavigator();
 
@@ -30,6 +31,7 @@ const Link: React.FC<LinkProps> = ({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="link"
+      id={id}
     >
       {children}
     </Pressable>

package/src/Link/types.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
-export interface LinkProps {
+export interface LinkProps extends BaseProps {
   /** The destination path to navigate to */
   to: string;
   /** Variables to substitute in the path (e.g., { id: '123' } for '/user/:id') */

package/src/List/List.native.tsx

@@ -20,6 +20,7 @@ const List = forwardRef<View, ListProps>(({
   testID,
   scrollable = false,
   maxHeight,
+  id,
 }, ref) => {
   // Apply types
   listStyles.useVariants({
@@ -50,6 +51,7 @@ const List = forwardRef<View, ListProps>(({
     return (
       <ScrollView
         ref={ref as any}
+        nativeID={id}
         style={containerStyle as any}
         testID={testID}
         showsVerticalScrollIndicator={true}
@@ -60,7 +62,7 @@ const List = forwardRef<View, ListProps>(({
   }
 
   return (
-    <View ref={ref} style={containerStyle as any} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID}>
       {content}
     </View>
   );

package/src/List/List.web.tsx

@@ -20,6 +20,7 @@ const List: React.FC<ListProps> = ({
   testID,
   scrollable = false,
   maxHeight,
+  id,
 }) => {
   // Apply types
   listStyles.useVariants({
@@ -47,6 +48,7 @@ const List: React.FC<ListProps> = ({
       <div
         {...containerProps}
         role="list"
+        id={id}
         data-testid={testID}
       >
         {children}

package/src/Menu/Menu.native.tsx

@@ -21,6 +21,7 @@ const Menu = forwardRef<View, MenuProps>(({
   style,
   size,
   testID,
+  id,
 }, ref) => {
   const {
     position: menuPosition,
@@ -136,7 +137,7 @@ const Menu = forwardRef<View, MenuProps>(({
 
   return (
     <>
-      <View ref={mergedTriggerRef} collapsable={false}>
+      <View ref={mergedTriggerRef} nativeID={id} collapsable={false}>
         {trigger}
       </View>
 

package/src/Menu/Menu.web.tsx

@@ -16,6 +16,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
   size = 'md',
   style,
   testID,
+  id,
 }, ref) => {
   const triggerRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -65,6 +66,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
           {...menuProps}
           ref={mergedMenuRef}
           role="menu"
+          id={id}
           data-testid={testID}
         >
           {items.map((item, index) => {

package/src/Menu/types.ts

@@ -1,6 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Intent, Size } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type MenuIntentVariant = Intent;
@@ -17,7 +18,7 @@ export interface MenuItem {
   separator?: boolean;
 }
 
-export interface MenuProps {
+export interface MenuProps extends BaseProps {
   children: React.ReactNode;
   items: MenuItem[];
   open?: boolean;

package/src/Popover/Popover.native.tsx

@@ -17,6 +17,7 @@ const Popover = forwardRef<View, PopoverProps>(({
   showArrow = false,
   style,
   testID,
+  id,
 }, ref) => {
   const popoverRef = useRef<View>(null);
   const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
@@ -128,6 +129,7 @@ const Popover = forwardRef<View, PopoverProps>(({
       animationType="fade"
       onRequestClose={() => onOpenChange(false)}
       testID={testID}
+      nativeID={id}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <View style={popoverStyles.backdrop}>

package/src/Popover/Popover.web.tsx

@@ -16,6 +16,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   closeOnEscapeKey = true,
   showArrow = false,
   testID,
+  id,
 }, ref) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
@@ -47,7 +48,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
       onEscapeKey={closeOnEscapeKey ? () => onOpenChange(false) : undefined}
       zIndex={9999}
     >
-      <div ref={mergedPopoverRef} data-testid={testID}>
+      <div ref={mergedPopoverRef} id={id} data-testid={testID}>
         <div {...containerProps}>
           <div {...contentProps}>
             {children}

package/src/Popover/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export type PopoverPlacement =
   | 'top' | 'top-start' | 'top-end'
@@ -7,7 +8,7 @@ export type PopoverPlacement =
   | 'left' | 'left-start' | 'left-end'
   | 'right' | 'right-start' | 'right-end';
 
-export interface PopoverProps {
+export interface PopoverProps extends BaseProps {
   /**
    * Whether the popover is open/visible
    */

package/src/Pressable/Pressable.native.tsx

@@ -17,6 +17,7 @@ const Pressable = forwardRef<View, PressableProps>(({
   testID,
   accessibilityLabel,
   accessibilityRole,
+  id,
 }, ref) => {
   // Apply spacing variants
   pressableStyles.useVariants({
@@ -34,7 +35,7 @@ const Pressable = forwardRef<View, PressableProps>(({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref} style={[pressableStyles.pressable, style]}>
+      <View ref={ref} nativeID={id} style={[pressableStyles.pressable, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>

package/src/Pressable/Pressable.web.tsx

@@ -18,6 +18,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   testID,
   accessibilityLabel,
   accessibilityRole = 'button',
+  id,
 }, ref) => {
   const [isPressed, setIsPressed] = useState(false);
 
@@ -74,6 +75,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
     <div
       {...webProps}
       ref={mergedRef}
+      id={id}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
       style={{ ...baseStyle, ...webProps.style }}

package/src/Progress/Progress.native.tsx

@@ -29,6 +29,7 @@ const Progress = forwardRef<View, ProgressProps>(({
   rounded = true,
   style,
   testID,
+  id,
 }, ref) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
   const { theme }: { theme: Theme } = useUnistyles();
@@ -104,7 +105,7 @@ const Progress = forwardRef<View, ProgressProps>(({
     });
 
     return (
-      <View style={[progressStyles.circularContainer, style]} testID={testID}>
+      <View nativeID={id} style={[progressStyles.circularContainer, style]} testID={testID}>
         <Animated.View style={indeterminate ? rotationStyle : {}}>
           <Svg width={circularSize} height={circularSize} style={{ transform: [{ rotate: '-90deg' }] }}>
             {/* Track circle (background) */}
@@ -157,7 +158,7 @@ const Progress = forwardRef<View, ProgressProps>(({
   });
 
   return (
-    <View ref={ref} style={[progressStyles.container, style]} testID={testID} accessibilityRole="progressbar">
+    <View ref={ref} nativeID={id} style={[progressStyles.container, style]} testID={testID} accessibilityRole="progressbar">
       <View style={progressStyles.linearTrack}>
         {indeterminate ? (
           <Animated.View style={[progressStyles.indeterminateBar, indeterminateAnimatedStyle]} />

package/src/Progress/Progress.web.tsx

@@ -15,6 +15,7 @@ const Progress: React.FC<ProgressProps> = ({
   rounded = true,
   style,
   testID,
+  id,
 }) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
 
@@ -56,7 +57,7 @@ const Progress: React.FC<ProgressProps> = ({
     console.log(trackColorProps)
 
     return (
-      <div {...computedContainerProps} data-testid={testID}>
+      <div {...computedContainerProps} id={id} data-testid={testID}>
         <svg
           width={circularSize}
           height={circularSize}
@@ -106,7 +107,7 @@ const Progress: React.FC<ProgressProps> = ({
 
   return (
     <>
-      <div {...containerProps} data-testid={testID}>
+      <div {...containerProps} id={id} data-testid={testID}>
         <div
           {...trackProps}
           role="progressbar"

package/src/Progress/types.ts

@@ -1,12 +1,13 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Intent, Size } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type ProgressIntentVariant = Intent;
 export type ProgressSizeVariant = Size;
 export type ProgressVariant = 'linear' | 'circular';
 
-export interface ProgressProps {
+export interface ProgressProps extends BaseProps {
   value?: number;
   max?: number;
   variant?: ProgressVariant;

package/src/RadioButton/RadioButton.native.tsx

@@ -19,6 +19,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const group = useRadioGroup();
 
@@ -64,6 +65,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
   return (
     <Pressable
       ref={ref}
+      nativeID={id}
       onPress={handlePress}
       disabled={disabled}
       style={[radioButtonStyles.container, style]}

package/src/RadioButton/RadioButton.web.tsx

@@ -18,6 +18,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   marginHorizontal,
   style,
   testID,
+  id,
 }) => {
   const group = useRadioGroup();
 
@@ -54,6 +55,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
       {...containerProps}
       onClick={handleClick}
       disabled={disabled}
+      id={id}
       data-testid={testID}
       role="radio"
       aria-checked={checked}

package/src/RadioButton/RadioGroup.native.tsx

@@ -19,12 +19,14 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(({
   children,
   style,
   testID,
+  id,
 }, ref) => {
 
   return (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <View
         ref={ref}
+        nativeID={id}
         style={[
           radioButtonStyles.groupContainer,
           style as any,

package/src/RadioButton/RadioGroup.web.tsx

@@ -19,6 +19,7 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   children,
   style,
   testID,
+  id,
 }) => {
   // Apply variants
   radioButtonStyles.useVariants({
@@ -35,6 +36,7 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
       <div
         {...groupProps}
         role="radiogroup"
+        id={id}
         data-testid={testID}
         style={{
           display: 'flex',

package/src/RadioButton/types.ts

@@ -1,7 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Intent, Size } from '@idealyst/theme';
-import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { FormInputStyleProps, BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type RadioButtonIntentVariant = Intent;
@@ -19,7 +19,7 @@ export interface RadioButtonProps extends FormInputStyleProps {
   testID?: string;
 }
 
-export interface RadioGroupProps {
+export interface RadioGroupProps extends BaseProps {
   value?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;

package/src/SVGImage/SVGImage.native.tsx

@@ -13,6 +13,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   intent,
   style,
   testID,
+  id,
   ...props
 }, ref) => {
   // Apply variants using Unistyles 3.0 pattern
@@ -30,7 +31,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   if (typeof source === 'function') {
     const SvgComponent = source;
     return (
-      <View ref={ref} style={[svgImageStyles.container, style]} testID={testID} {...props}>
+      <View ref={ref} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
         <SvgComponent
           width={finalWidth}
           height={finalHeight}
@@ -45,7 +46,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   const sourceUri = typeof source === 'string' ? source : source.uri;
 
   return (
-    <View ref={ref} style={[svgImageStyles.container, style]} testID={testID} {...props}>
+    <View ref={ref} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
       <SvgUri
         uri={sourceUri}
         width={finalWidth}

package/src/SVGImage/SVGImage.web.tsx

@@ -14,6 +14,7 @@ const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
   resizeMode = 'contain',
   style,
   testID,
+  id,
   ...props
 }, ref) => {
   // Apply variants using Unistyles 3.0 pattern
@@ -33,7 +34,7 @@ const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
     const componentContainerProps = getWebProps([svgImageStyles.container, style as any]);
     const mergedRefForComponent = useMergeRefs(ref, componentContainerProps.ref);
     return (
-      <div {...componentContainerProps} ref={mergedRefForComponent} {...(props as any)} data-testid={testID}>
+      <div {...componentContainerProps} ref={mergedRefForComponent} {...(props as any)} id={id} data-testid={testID}>
         <SvgComponent
           width={finalWidth || 24}
           height={finalHeight || 24}
@@ -80,7 +81,7 @@ const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
   const mergedRef = useMergeRefs(ref, containerWebProps.ref);
 
   return (
-    <div {...containerWebProps} ref={mergedRef} {...(props as any)} data-testid={testID}>
+    <div {...containerWebProps} ref={mergedRef} {...(props as any)} id={id} data-testid={testID}>
       <img
         {...imageWebProps}
         src={sourceUrl}

package/src/SVGImage/types.ts

@@ -2,12 +2,13 @@ import { Intent } from '@idealyst/theme';
 import React from 'react';
 import { ViewProps } from 'react-native';
 import { SvgProps } from 'react-native-svg';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type SVGImageIntentVariant = Intent;
 export type SVGImageResizeMode = 'contain' | 'cover' | 'stretch';
 
-export interface SVGImageProps extends Omit<ViewProps, 'children'> {
+export interface SVGImageProps extends Omit<ViewProps, 'children'>, BaseProps {
   source: string | { uri: string } | React.FC<SvgProps>;
   width?: number | string;
   height?: number | string;

package/src/Screen/Screen.native.tsx

@@ -19,6 +19,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
 
   screenStyles.useVariants({
@@ -51,6 +52,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     return (
       <RNScrollView
         ref={ref as any}
+        nativeID={id}
         style={scrollViewStyle}
         contentContainerStyle={contentContainerStyleArray}
         testID={testID}
@@ -63,7 +65,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   const containerStyle = [screenStyles.screen, style];
 
   const view = (
-    <RNView ref={ref as any} style={containerStyle} testID={testID}>
+    <RNView ref={ref as any} nativeID={id} style={containerStyle} testID={testID}>
       {children}
     </RNView>
   );

package/src/Screen/Screen.web.tsx

@@ -18,6 +18,7 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   screenStyles.useVariants({
     background,
@@ -40,6 +41,7 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
     <div
       {...webProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
     >
       {children}

package/src/Select/Select.native.tsx

@@ -40,6 +40,7 @@ const Select = forwardRef<View, SelectProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -298,7 +299,7 @@ const Select = forwardRef<View, SelectProps>(({
   };
 
   return (
-    <View ref={ref} style={[selectStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[selectStyles.container, style]} testID={testID}>
       {label && (
         <Text style={selectStyles.label}>
           {label}