@idealyst/components 1.1.1 → 1.1.2

package/src/Skeleton/Skeleton.native.tsx

@@ -19,6 +19,7 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   animation = 'pulse',
   style,
   testID,
+  id,
 }, ref) => {
   skeletonStyles.useVariants({
     shape,
@@ -78,6 +79,7 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   return (
     <Animated.View
       ref={ref as any}
+      nativeID={id}
       style={[
         skeletonStyles.skeleton,
         customStyles,
@@ -113,11 +115,13 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
   skeletonProps,
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({});
 
   return (
     <View
+      nativeID={id}
       style={[
         skeletonStyles.group,
         { gap: spacing },

package/src/Skeleton/Skeleton.web.tsx

@@ -11,6 +11,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   animation = 'pulse',
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({
     shape,
@@ -60,6 +61,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
           ...customStyles,
           ...animationStyles,
         }}
+        id={id}
         data-testid={testID}
       >
         {animation === 'wave' && (
@@ -86,6 +88,7 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
   skeletonProps,
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({});
   const groupProps = getWebProps([skeletonStyles.group, style as any]);
@@ -96,6 +99,7 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
       style={{
         gap: `${spacing}px`,
       }}
+      id={id}
       data-testid={testID}
     >
       {Array.from({ length: count }).map((_, index) => (

package/src/Skeleton/types.ts

@@ -1,9 +1,10 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
 export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
 
-export interface SkeletonProps {
+export interface SkeletonProps extends BaseProps {
   /**
    * Width of the skeleton (number in pixels or string with units)
    * @default '100%'
@@ -45,7 +46,7 @@ export interface SkeletonProps {
   testID?: string;
 }
 
-export interface SkeletonGroupProps {
+export interface SkeletonGroupProps extends BaseProps {
   /**
    * Number of skeleton items to render
    * @default 3

package/src/Slider/Slider.native.tsx

@@ -29,6 +29,7 @@ const Slider = forwardRef<View, SliderProps>(({
   onValueCommit,
   style,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [trackWidthState, setTrackWidthState] = useState(0);
@@ -166,7 +167,7 @@ const Slider = forwardRef<View, SliderProps>(({
   };
 
   return (
-    <View ref={ref} style={[sliderStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>

package/src/Slider/Slider.web.tsx

@@ -27,6 +27,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   onValueCommit,
   style,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
@@ -165,7 +166,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
       {showValue && (
         <div {...valueLabelProps}>
           {value}

package/src/Switch/Switch.native.tsx

@@ -19,6 +19,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   switchStyles.useVariants({
     size,
@@ -81,6 +82,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   const switchElement = (
     <Pressable
       ref={!label ? ref : undefined}
+      nativeID={!label ? id : undefined}
       onPress={handlePress}
       disabled={disabled}
       style={switchStyles.switchContainer}
@@ -115,6 +117,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     return (
       <Pressable
         ref={ref}
+        nativeID={id}
         onPress={handlePress}
         disabled={disabled}
         style={[switchStyles.container, style]}

package/src/Switch/Switch.web.tsx

@@ -22,6 +22,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const handleClick = () => {
     if (!disabled && onCheckedChange) {
@@ -90,6 +91,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}
+      id={id}
       data-testid={testID}
       role="switch"
       aria-checked={checked}

package/src/TabBar/TabBar.native.tsx

@@ -27,6 +27,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
@@ -104,7 +105,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ position: 'relative' }}
     >
-      <View ref={ref} style={[tabBarContainerStyles.container, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[tabBarContainerStyles.container, style]} testID={testID}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[

package/src/TabBar/TabBar.web.tsx

@@ -89,6 +89,7 @@ const TabBar: React.FC<TabBarProps> = ({
   marginHorizontal,
   style,
   testID,
+  id,
 }) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
@@ -186,6 +187,7 @@ const TabBar: React.FC<TabBarProps> = ({
       {...containerProps}
       ref={mergedContainerRef}
       role="tablist"
+      id={id}
       data-testid={testID}
     >
       {/* Sliding indicator */}

package/src/Table/Table.native.tsx

@@ -20,6 +20,7 @@ function TableInner<T = any>({
   marginHorizontal,
   style,
   testID,
+  id,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
   // Apply variants
   tableStyles.useVariants({
@@ -49,6 +50,7 @@ function TableInner<T = any>({
   return (
     <ScrollView
       ref={ref}
+      nativeID={id}
       horizontal
       style={[tableStyles.container, style]}
       testID={testID}

package/src/Table/Table.web.tsx

@@ -20,6 +20,7 @@ function Table<T = any>({
   marginHorizontal,
   style,
   testID,
+  id,
 }: TableProps<T>) {
   // Apply variants
   tableStyles.useVariants({
@@ -49,7 +50,7 @@ function Table<T = any>({
   const isClickable = !!onRowPress;
 
   return (
-    <div {...containerProps} data-testid={testID}>
+    <div {...containerProps} id={id} data-testid={testID}>
       <table {...tableProps}>
         <thead {...getWebProps([tableStyles.thead])}>
           <tr>

package/src/Text/Text.native.tsx

@@ -17,6 +17,7 @@ const Text = forwardRef<RNText, TextProps>(({
   paddingHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
@@ -32,6 +33,7 @@ const Text = forwardRef<RNText, TextProps>(({
   return (
     <RNText
       ref={ref}
+      nativeID={id}
       style={[
         textStyles.text({ color, typography }),
         style,

package/src/Text/Text.web.tsx

@@ -18,6 +18,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   paddingHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
@@ -45,6 +46,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
     <span
       {...webProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
     >
       {children}

package/src/TextArea/TextArea.native.tsx

@@ -28,6 +28,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   style,
   textareaStyle,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
@@ -81,7 +82,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   return (
-    <View style={[textAreaStyles.container, style]} testID={testID}>
+    <View nativeID={id} style={[textAreaStyles.container, style]} testID={testID}>
       {label && (
         <Text style={textAreaStyles.label}>{label}</Text>
       )}

package/src/TextArea/TextArea.web.tsx

@@ -29,6 +29,7 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   style,
   textareaStyle,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -112,7 +113,7 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
         <label {...labelProps}>{label}</label>
       )}

package/src/Tooltip/Tooltip.native.tsx

@@ -12,6 +12,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
   size = 'md',
   style,
   testID,
+  id,
 }, ref) => {
   const [visible, setVisible] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0, width: 0 });
@@ -126,7 +127,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
 
   return (
     <>
-      <View ref={ref} collapsable={false} style={style}>
+      <View ref={ref} nativeID={id} collapsable={false} style={style}>
         {trigger}
       </View>
 

package/src/Tooltip/Tooltip.web.tsx

@@ -13,6 +13,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   size = 'md',
   style,
   testID,
+  id,
 }) => {
   const [visible, setVisible] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -60,6 +61,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         {...containerProps}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        id={id}
         data-testid={testID}
       >
         {children}

package/src/Tooltip/types.ts

@@ -1,12 +1,13 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TooltipIntentVariant = Intent;
 export type TooltipSizeVariant = Size;
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps {
+export interface TooltipProps extends BaseProps {
   content: string | React.ReactNode;
   children: React.ReactNode;
   placement?: TooltipPlacement;

package/src/Video/Video.native.tsx

@@ -32,11 +32,12 @@ const Video = React.forwardRef<View, VideoProps>(({
   borderRadius,
   style,
   testID,
+  id,
 }, ref) => {
 
   if (!RNVideo) {
     return (
-      <View ref={ref} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
         <View style={videoStyles.fallback}>
           {/* Fallback when react-native-video is not installed */}
         </View>
@@ -79,7 +80,7 @@ const Video = React.forwardRef<View, VideoProps>(({
   };
 
   return (
-    <View ref={ref} style={containerStyle} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle} testID={testID}>
       <RNVideo
         source={videoSource}
         poster={poster}

package/src/Video/Video.web.tsx

@@ -25,6 +25,7 @@ const Video: React.FC<VideoProps> = ({
   borderRadius,
   style,
   testID,
+  id,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
@@ -85,6 +86,7 @@ const Video: React.FC<VideoProps> = ({
     <div
       {...containerProps}
       style={containerStyle}
+      id={id}
       data-testid={testID}
     >
       <video

package/src/Video/types.ts

@@ -1,11 +1,12 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export interface VideoSource {
   uri: string;
   type?: string;
 }
 
-export interface VideoProps {
+export interface VideoProps extends BaseProps {
   source: VideoSource | string;
   poster?: string;
   width?: number | string;

package/src/View/View.native.tsx

@@ -24,6 +24,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   scrollable = false,
   style,
   testID,
+  id,
 }, ref) => {
   viewStyles.useVariants({
     background,
@@ -56,6 +57,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
         style={[{ flex: 1 }, style]}
         contentContainerStyle={[viewStyles.view, getStyles()]}
         testID={testID}
+        nativeID={id}
       >
         {children}
       </RNScrollView>
@@ -63,7 +65,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID}>
+    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID} nativeID={id}>
       {children}
     </RNView>
   );

package/src/View/View.web.tsx

@@ -25,6 +25,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   scrollable, // accepted but no-op on web - layout handles scrolling
   style,
   testID,
+  id,
 }, ref) => {
   viewStyles.useVariants({
     background,
@@ -56,6 +57,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     <div
       {...webProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
     >
       {children}

package/src/utils/viewStyleProps.ts

@@ -6,6 +6,14 @@ import { Size } from '@idealyst/theme';
  */
 export type ViewStyleSize = Size;
 
+/**
+ * Base props shared by all components
+ */
+export interface BaseProps {
+  /** Unique identifier for the element (maps to id on web, nativeID on native) */
+  id?: string;
+}
+
 /**
  * Gap style props - for controlling gap/spacing between children
  */
@@ -42,22 +50,22 @@ export interface MarginStyleProps {
  * Full container style props - includes all spacing options
  * For: View, Card, Screen, List, Accordion, Table, TabBar
  */
-export interface ContainerStyleProps extends GapStyleProps, PaddingStyleProps, MarginStyleProps {}
+export interface ContainerStyleProps extends BaseProps, GapStyleProps, PaddingStyleProps, MarginStyleProps {}
 
 /**
  * Text spacing style props - gap + padding only
  * For: Text (gap for inline elements, padding for block-level)
  */
-export interface TextSpacingStyleProps extends GapStyleProps, PaddingStyleProps {}
+export interface TextSpacingStyleProps extends BaseProps, GapStyleProps, PaddingStyleProps {}
 
 /**
  * Pressable style props - padding only
  * For: Pressable
  */
-export interface PressableSpacingStyleProps extends PaddingStyleProps {}
+export interface PressableSpacingStyleProps extends BaseProps, PaddingStyleProps {}
 
 /**
  * Form input style props - margin only
  * For: Input, Select, TextArea, Checkbox, RadioButton, Switch, Slider
  */
-export interface FormInputStyleProps extends MarginStyleProps {}
+export interface FormInputStyleProps extends BaseProps, MarginStyleProps {}