@idealyst/components 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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.1.1",
+    "@idealyst/theme": "^1.1.2",
     "@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.1.1",
+    "@idealyst/theme": "^1.1.2",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -142,6 +142,7 @@ const Accordion = forwardRef<View, AccordionProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
 
@@ -175,7 +176,7 @@ const Accordion = forwardRef<View, AccordionProps>(({
   };
 
   return (
-    <View ref={ref} style={[accordionStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[accordionStyles.container, style]} testID={testID}>
       {items.map((item, index) => (
         <AccordionItem
           key={item.id}

package/src/Accordion/Accordion.web.tsx

@@ -108,6 +108,7 @@ const Accordion: React.FC<AccordionProps> = ({
   marginHorizontal,
   style,
   testID,
+  id,
 }) => {
   const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
 
@@ -143,7 +144,7 @@ const Accordion: React.FC<AccordionProps> = ({
   };
 
   return (
-    <div {...containerProps} data-testid={testID}>
+    <div {...containerProps} id={id} data-testid={testID}>
       {items.map((item) => (
         <AccordionItem
           key={item.id}

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -11,6 +11,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   style,
   testID,
   hidesWhenStopped = true,
+  id,
 }, ref) => {
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
@@ -41,6 +42,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
         style
       ]}
       ref={ref}
+      nativeID={id}
       testID={testID}
     >
       <RNActivityIndicator

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -12,6 +12,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   style,
   testID,
   hidesWhenStopped = true,
+  id,
 }, ref) => {
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
@@ -71,7 +72,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
           }
         `}
       </style>
-      <div {...containerProps} ref={mergedRef} data-testid={testID}>
+      <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
         <div {...spinnerProps} />
       </div>
     </>

package/src/ActivityIndicator/types.ts

@@ -1,11 +1,12 @@
 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 ActivityIndicatorIntentVariant = Intent;
 export type ActivityIndicatorSizeVariant = Size;
 
-export interface ActivityIndicatorProps {
+export interface ActivityIndicatorProps extends BaseProps {
   /**
    * Whether the indicator is animating (visible)
    * @default true

package/src/Alert/Alert.native.tsx

@@ -28,6 +28,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   actions,
   style,
   testID,
+  id,
 }, ref) => {
   // Apply variants to stylesheet
   alertStyles.useVariants({
@@ -58,6 +59,7 @@ const Alert = forwardRef<ComponentRef<typeof View>, AlertProps>(({
   return (
     <View
       ref={ref}
+      nativeID={id}
       style={[alertStyles.container, style]}
       testID={testID}
       accessibilityRole="alert"

package/src/Alert/Alert.web.tsx

@@ -29,6 +29,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   actions,
   style,
   testID,
+  id,
 }, ref) => {
   // Apply variants to stylesheet
   alertStyles.useVariants({
@@ -73,6 +74,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
     <div
       {...containerProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
       role="alert"
     >

package/src/Alert/types.ts

@@ -1,11 +1,12 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Intent } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type AlertIntentVariant = Intent;
 export type AlertType= 'filled' | 'outlined' | 'soft';
 
-export interface AlertProps {
+export interface AlertProps extends BaseProps {
   title?: string;
   message?: string;
   children?: React.ReactNode;

package/src/Avatar/Avatar.native.tsx

@@ -11,6 +11,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
   shape = 'circle',
   style,
   testID,
+  id,
 }, ref) => {
   const [hasError, setHasError] = useState(false);
 
@@ -24,7 +25,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
   };
 
   return (
-    <View ref={ref} style={[avatarStyles.avatar, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[avatarStyles.avatar, style]} testID={testID}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}

package/src/Avatar/Avatar.web.tsx

@@ -12,6 +12,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   shape = 'circle',
   style,
   testID,
+  id,
 }, ref) => {
   const [hasError, setHasError] = useState(false);
 
@@ -34,7 +35,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   const mergedRef = useMergeRefs(ref, avatarProps.ref);
 
   return (
-    <div {...avatarProps} ref={mergedRef} data-testid={testID}>
+    <div {...avatarProps} ref={mergedRef} id={id} data-testid={testID}>
       {src && !hasError ? (
         <img
           src={src as any}

package/src/Avatar/types.ts

@@ -1,12 +1,13 @@
 import { Color } from '@idealyst/theme';
 import type { StyleProp, ViewStyle, ImageSourcePropType } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type AvatarColorVariant = Color;
 export type AvatarSizeVariant = 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShapeVariant = 'circle' | 'square';
 
-export interface AvatarProps {
+export interface AvatarProps extends BaseProps {
   /**
    * Image source (URL or require())
    */

package/src/Badge/Badge.native.tsx

@@ -13,6 +13,7 @@ const Badge = forwardRef<View, BadgeProps>(({
   color = 'blue',
   style,
   testID,
+  id,
 }, ref) => {
   badgeStyles.useVariants({
     size,
@@ -48,6 +49,7 @@ const Badge = forwardRef<View, BadgeProps>(({
   if (type === 'dot') {
     return (
       <View
+        nativeID={id}
         style={[badgeStyle, style]}
         testID={testID}
         accessibilityLabel="status indicator"
@@ -61,6 +63,7 @@ const Badge = forwardRef<View, BadgeProps>(({
   return (
     <View
       ref={ref}
+      nativeID={id}
       style={[badgeStyle, style]}
       testID={testID}
       accessibilityLabel="badge"

package/src/Badge/Badge.web.tsx

@@ -20,6 +20,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
     iconPath,
     style,
     testID,
+    id,
   } = props;
 
   badgeStyles.useVariants({
@@ -63,6 +64,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
         {...badgeProps}
         style={style as React.CSSProperties}
         ref={mergedRef}
+        id={id}
         data-testid={testID}
         role="status"
         aria-label="status indicator"
@@ -77,6 +79,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
       {...badgeProps}
       style={style as React.CSSProperties}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
       role="status"
     >

package/src/Badge/types.ts

@@ -2,13 +2,14 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Color, Size } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type BadgeColorVariant = Color;
 export type BadgeSizeVariant = Size;
 export type BadgeType = 'filled' | 'outlined' | 'dot';
 
-export interface BadgeProps {
+export interface BadgeProps extends BaseProps {
   /**
    * The content to display inside the badge
    */

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -121,6 +121,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
   testID,
   responsive = false,
   minVisibleItems = 3,
+  id,
 }, ref) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -163,6 +164,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
   return (
     <View
       ref={ref}
+      nativeID={id}
       style={[breadcrumbContainerStyles.container, style]}
       testID={testID}
       accessibilityLabel="Breadcrumb"

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -157,6 +157,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   testID,
   responsive = false,
   minVisibleItems = 3,
+  id,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const containerProps = getWebProps([breadcrumbContainerStyles.container, style as any]);
@@ -200,7 +201,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   }));
 
   return (
-    <nav {...containerProps} aria-label="Breadcrumb" data-testid={testID}>
+    <nav {...containerProps} aria-label="Breadcrumb" id={id} data-testid={testID}>
       {displayItems.map((item, index) => {
         const isLast = index === displayItems.length - 1;
         const shouldShowEllipsis = showEllipsis && index === 1;

package/src/Breadcrumb/types.ts

@@ -1,6 +1,7 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Size } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type BreadcrumbIntentVariant = 'primary' | 'neutral';
@@ -20,7 +21,7 @@ export interface BreadcrumbItem {
   disabled?: boolean;
 }
 
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends BaseProps {
   /** Array of breadcrumb items */
   items: BreadcrumbItem[];
 

package/src/Button/Button.native.tsx

@@ -19,6 +19,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     rightIcon,
     style,
     testID,
+    id,
   } = props;
 
   // Apply variants
@@ -107,19 +108,23 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     );
   };
 
+  // TouchableOpacity types don't include nativeID but it's a valid RN prop
+  const touchableProps = {
+    ref,
+    onPress,
+    disabled,
+    testID,
+    nativeID: id,
+    activeOpacity: 0.7,
+    style: [
+      buttonStyle,
+      showGradient && { overflow: 'hidden' },
+      style,
+    ],
+  };
+
   return (
-    <TouchableOpacity
-      ref={ref}
-      onPress={onPress}
-      disabled={disabled}
-      testID={testID}
-      activeOpacity={0.7}
-      style={[
-        buttonStyle,
-        showGradient && { overflow: 'hidden' },
-        style,
-      ]}
-    >
+    <TouchableOpacity {...touchableProps as any}>
       {renderGradientLayer()}
       {hasIcons ? (
         <View style={buttonStyles.iconContainer}>

package/src/Button/Button.styles.tsx

@@ -35,9 +35,9 @@ function createTypeVariants(theme: Theme) {
             borderWidth: 0,
         },
         outlined: {
-            borderWidth: 2,
+            borderWidth: 1,
             borderStyle: 'solid' ,
-            backgroundColor: 'transparent',
+            backgroundColor: theme.colors.surface.primary,
         },
         text: {
             borderWidth: 0,

package/src/Button/Button.web.tsx

@@ -28,6 +28,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     rightIconPath,
     style,
     testID,
+    id,
   } = props;
 
   buttonStyles.useVariants({
@@ -95,6 +96,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     <button
       {...webProps}
       ref={mergedRef}
+      id={id}
       onClick={handleClick}
       disabled={disabled}
       data-testid={testID}

package/src/Button/types.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 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 ButtonType = 'contained' | 'outlined' | 'text';
@@ -16,7 +17,7 @@ export type ButtonSizeVariant = Size;
  */
 export type ButtonGradient = 'darken' | 'lighten';
 
-export interface ButtonProps {
+export interface ButtonProps extends BaseProps {
   /**
    * The text or content to display inside the button
    */

package/src/Card/Card.native.tsx

@@ -22,6 +22,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   // Apply variants
   cardStyles.useVariants({
@@ -44,6 +45,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
 
   const componentProps = {
     ref,
+    nativeID: id,
     style: [cardStyles.card, style],
     testID,
     accessibilityLabel,

package/src/Card/Card.web.tsx

@@ -23,6 +23,7 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   const handleClick = () => {
     if (!disabled && clickable && onPress) {
@@ -58,6 +59,7 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
     <Component
       {...webProps}
       ref={mergedRef as any}
+      id={id}
       onClick={clickable ? handleClick : undefined}
       disabled={clickable && disabled}
       data-testid={testID}

package/src/Checkbox/Checkbox.native.tsx

@@ -24,6 +24,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   required = false,
   error,
   helperText,
+  id,
 }, ref) => {
   const [internalChecked, setInternalChecked] = useState(checked);
 
@@ -56,7 +57,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   const displayHelperText = error || helperText;
 
   return (
-    <View ref={ref} style={[checkboxStyles.wrapper, style]}>
+    <View ref={ref} nativeID={id} style={[checkboxStyles.wrapper, style]}>
       <Pressable
         onPress={handlePress}
         disabled={disabled}

package/src/Checkbox/Checkbox.web.tsx

@@ -26,6 +26,7 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   required = false,
   error,
   helperText,
+  id,
 }, ref) => {
   const [internalChecked, setInternalChecked] = useState(checked);
 
@@ -76,7 +77,7 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   const mergedRef = useMergeRefs(ref, wrapperProps.ref);
 
   return (
-    <div {...wrapperProps} ref={mergedRef}>
+    <div {...wrapperProps} ref={mergedRef} id={id}>
       <label {...containerProps}>
         <div style={{ position: 'relative' }}>
           <input

package/src/Chip/Chip.native.tsx

@@ -19,6 +19,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   disabled = false,
   style,
   testID,
+  id,
 }, ref) => {
   const handlePress = () => {
     if (disabled) return;
@@ -99,6 +100,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
     return (
       <Pressable
         ref={ref}
+        nativeID={id}
         onPress={handlePress}
         disabled={disabled}
         accessibilityRole="button"
@@ -115,7 +117,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   }
 
   return (
-    <View ref={ref} style={[containerStyle, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {innerContent}
     </View>
   );

package/src/Chip/Chip.web.tsx

@@ -21,6 +21,7 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   disabled = false,
   style,
   testID,
+  id,
 }, ref) => {
   // Compute actual selected state
   const isSelected = selectable ? selected : false;
@@ -93,6 +94,7 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
     <div
       {...containerProps}
       ref={mergedRef}
+      id={id}
       style={{
         cursor: isClickable ? 'pointer' : 'default',
         userSelect: 'none',

package/src/Chip/types.ts

@@ -1,12 +1,13 @@
 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';
 
 export type ChipSize = Size;
 export type ChipType = 'filled' | 'outlined' | 'soft';
 export type ChipIntent = Intent;
 
-export interface ChipProps {
+export interface ChipProps extends BaseProps {
   /** The text content of the chip */
   label: string;
 

package/src/Dialog/Dialog.native.tsx

@@ -16,6 +16,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   animationType = 'fade',
   style,
   testID,
+  id,
 }, ref) => {
   const backdropOpacity = useSharedValue(0);
   const containerScale = useSharedValue(0.9);
@@ -104,6 +105,7 @@ const Dialog = forwardRef<View, DialogProps>(({
       onRequestClose={() => onOpenChange(false)}
       statusBarTranslucent
       testID={testID}
+      nativeID={id}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <Animated.View style={[dialogStyles.backdrop, backdropAnimatedStyle]}>

package/src/Dialog/Dialog.web.tsx

@@ -18,6 +18,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   closeOnEscapeKey = true,
   style,
   testID,
+  id,
 }, ref) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const previousActiveElementRef = useRef<HTMLElement | null>(null);
@@ -129,6 +130,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
     <div
       {...backdropProps}
       ref={mergedBackdropRef}
+      id={id}
       onClick={handleBackdropClick}
       data-testid={testID}
     >

package/src/Dialog/types.ts

@@ -1,12 +1,13 @@
 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 DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type DialogType = 'standard' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
-export interface DialogProps {
+export interface DialogProps extends BaseProps {
   /**
    * Whether the dialog is open/visible
    */

package/src/Divider/Divider.native.tsx

@@ -14,6 +14,7 @@ const Divider = forwardRef<View, DividerProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   // Apply variants for main divider
   dividerStyles.useVariants({
@@ -73,6 +74,7 @@ const Divider = forwardRef<View, DividerProps>(({
       return (
         <View
           ref={ref}
+          nativeID={id}
           style={[
             dividerStyle,
             getDashedStyle(),
@@ -87,6 +89,7 @@ const Divider = forwardRef<View, DividerProps>(({
     return (
       <View
         ref={ref}
+        nativeID={id}
         style={[dividerStyles.divider, style]}
         testID={testID}
         accessibilityLabel={accessibilityLabel || "divider"}
@@ -132,6 +135,7 @@ const Divider = forwardRef<View, DividerProps>(({
   return (
     <View
       ref={ref}
+      nativeID={id}
       style={dividerStyles.container}
       testID={testID}
       accessibilityLabel={accessibilityLabel || "divider with content"}

package/src/Divider/Divider.web.tsx

@@ -15,6 +15,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   // Apply variants for main divider
   dividerStyles.useVariants({
@@ -50,6 +51,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
       <div
         {...dividerProps}
         ref={mergedDividerRef}
+        id={id}
         data-testid={testID}
         aria-label={accessibilityLabel}
         role="separator"
@@ -62,6 +64,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
     <div
       {...containerProps}
       ref={mergedContainerRef}
+      id={id}
       data-testid={testID}
       aria-label={accessibilityLabel}
       role="separator"

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
    */