@idealyst/components 1.2.13 → 1.2.14

package/package.json

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

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -15,17 +15,17 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
 }, ref) => {
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeLiveRegionAccessibilityProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? animating,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, animating]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -20,7 +20,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
   accessibilityAtomic,
   accessibilityRelevant,
@@ -29,12 +29,12 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   const ariaProps = useMemo(() => {
     return getWebLiveRegionAriaProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? animating,
       accessibilityAtomic,
       accessibilityRelevant,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating, accessibilityAtomic, accessibilityRelevant]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, animating, accessibilityAtomic, accessibilityRelevant]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;

package/src/Avatar/Avatar.native.tsx

@@ -27,7 +27,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
       accessibilityHint,
       accessibilityDisabled,
       accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? 'image',
+      accessibilityRole: accessibilityRole ?? 'img',
     });
   }, [accessibilityLabel, alt, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
   const [hasError, setHasError] = useState(false);

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -1,12 +1,6 @@
 import React, { forwardRef, isValidElement, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import {
-  breadcrumbContainerStyles,
-  breadcrumbItemStyles,
-  breadcrumbSeparatorStyles,
-  breadcrumbEllipsisStyles,
-  breadcrumbMenuButtonStyles
-} from './Breadcrumb.styles';
+import { breadcrumbStyles } from './Breadcrumb.styles';
 import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
 import Icon from '../Icon';
 import type { IconName } from '../Icon/icon-types';
@@ -26,19 +20,19 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
   const isDisabled = item.disabled || false;
 
   // Apply size variant
-  breadcrumbItemStyles.useVariants({
+  breadcrumbStyles.useVariants({
     size,
   });
 
   // Get dynamic item text style
-  const itemTextStyle = (breadcrumbItemStyles.itemText as any)({
+  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
     isLast,
     disabled: isDisabled,
     clickable: isClickable,
   });
 
-  const iconStyle = breadcrumbItemStyles.icon;
+  const iconStyle = (breadcrumbStyles.icon as any)({});
 
   const renderIcon = () => {
     if (!item.icon) return null;
@@ -59,8 +53,10 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
+  const itemContainerStyle = (breadcrumbStyles.item as any)({});
+
   const content = (
-    <View style={[breadcrumbItemStyles.item, itemStyle]}>
+    <View style={[itemContainerStyle, itemStyle]}>
       {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
       <Text style={itemTextStyle}>{item.label}</Text>
     </View>
@@ -91,8 +87,8 @@ interface BreadcrumbSeparatorProps {
 }
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
-  breadcrumbSeparatorStyles.useVariants({ size });
-  const sepStyle = breadcrumbSeparatorStyles.separator;
+  breadcrumbStyles.useVariants({ size });
+  const sepStyle = (breadcrumbStyles.separator as any)({});
 
   if (typeof separator === 'string') {
     return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
@@ -106,11 +102,12 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbEllipsisStyles.useVariants({ size });
-  const iconStyle = breadcrumbEllipsisStyles.icon({ intent });
+  breadcrumbStyles.useVariants({ size });
+  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
+  const iconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
 
   return (
-    <View style={breadcrumbEllipsisStyles.ellipsis}>
+    <View style={ellipsisStyle}>
       <Icon name="dots-horizontal" style={iconStyle} />
     </View>
   );
@@ -132,9 +129,11 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
 }, ref) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Apply variants for menu button
-  breadcrumbMenuButtonStyles.useVariants({ size });
-  const menuIconStyle = breadcrumbMenuButtonStyles.icon({ intent });
+  // Apply variants
+  breadcrumbStyles.useVariants({ size });
+  const containerStyle = (breadcrumbStyles.container as any)({});
+  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
+  const menuIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
 
   // Handle responsive collapsing
   let displayItems = items;
@@ -172,7 +171,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
     <View
       ref={ref}
       nativeID={id}
-      style={[breadcrumbContainerStyles.container, style]}
+      style={[containerStyle, style]}
       testID={testID}
       accessibilityLabel="Breadcrumb"
     >
@@ -200,7 +199,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
                   size={size}
                 >
                   <Pressable
-                    style={breadcrumbMenuButtonStyles.button}
+                    style={menuButtonStyle}
                     accessibilityRole="button"
                     accessibilityLabel="Show more breadcrumb items"
                   >

package/src/Dialog/Dialog.native.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
@@ -135,7 +135,7 @@ const Dialog = forwardRef<View, DialogProps>(({
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+          <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
             <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
               {(title || showCloseButton) && (
                 <View style={headerStyle}>

package/src/Icon/types.ts

@@ -4,6 +4,9 @@ import type { Size, Text } from '@idealyst/theme';
 import { Color, Intent } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
+// Re-export IconName for external consumers
+export type { IconName } from './icon-types';
+
 export type IconSizeVariant = Size | number;
 
 /**

package/src/Skeleton/Skeleton.native.tsx

@@ -23,17 +23,17 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
 }, ref) => {
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeLiveRegionAccessibilityProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading content',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? true,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy]);
   skeletonStyles.useVariants({
     shape,
     animation,

package/src/Skeleton/Skeleton.web.tsx

@@ -19,7 +19,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
   accessibilityAtomic,
   accessibilityRelevant,
@@ -28,12 +28,12 @@ const Skeleton: React.FC<SkeletonProps> = ({
   const ariaProps = useMemo(() => {
     return getWebLiveRegionAriaProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading content',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? true,
       accessibilityAtomic,
       accessibilityRelevant,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, accessibilityAtomic, accessibilityRelevant]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, accessibilityAtomic, accessibilityRelevant]);
   skeletonStyles.useVariants({
     shape,
     animation,

package/src/Slider/Slider.native.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, forwardRef, useMemo } from 'react';
-import { View } from 'react-native';
+import { View, LayoutChangeEvent } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
@@ -222,7 +222,7 @@ const Slider = forwardRef<View, SliderProps>(({
         <GestureDetector gesture={composedGesture}>
           <View
             style={trackStyle}
-            onLayout={(e) => {
+            onLayout={(e: LayoutChangeEvent) => {
               const width = e.nativeEvent.layout.width;
               trackWidth.value = width;
               setTrackWidthState(width);

package/src/TabBar/TabBar.native.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, forwardRef, ReactNode, useMemo } from 'react';
-import { View, TouchableOpacity, Text, ScrollView } from 'react-native';
+import { View, TouchableOpacity, Text, ScrollView, LayoutChangeEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
   tabBarContainerStyles,
@@ -187,7 +187,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
             return (
               <TouchableOpacity
                 key={item.value}
-                onLayout={(event) => {
+                onLayout={(event: LayoutChangeEvent) => {
                   const { x, width } = event.nativeEvent.layout;
                   handleTabLayout(item.value, x, width);
                 }}

package/src/index.native.ts

@@ -145,4 +145,4 @@ export type { PlatformAPI, PlatformSystem, PlatformSelectSpec } from './Platform
 // Event utilities
 export * from './utils/events';
 
-export type { AppTheme } from '@idealyst/theme'; 
+export type { Theme as AppTheme } from '@idealyst/theme'; 

package/src/index.ts

@@ -181,4 +181,4 @@ export type {
     SelectStyleableElements,
 } from './extensions';
 
-export type { AppTheme } from '@idealyst/theme';
+export type { Theme as AppTheme } from '@idealyst/theme';

package/src/Accordion/Accordion.styles.old.tsx

@@ -1,298 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { AccordionType } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type AccordionSize = Size;
-
-type AccordionVariants = {
-    size: AccordionSize;
-    type: AccordionType;
-    expanded: boolean;
-    disabled: boolean;
-    isLast: boolean;
-}
-
-export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
-
-type ItemDynamicProps = {
-    type?: AccordionType;
-    isLast?: boolean;
-};
-
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {
-            gap: 0,
-        },
-        separated: {
-            gap: 8,
-        },
-        bordered: {
-            gap: 0,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            overflow: 'hidden' as const,
-        },
-    } as const;
-}
-
-/**
- * Get item styles based on type and isLast
- */
-function getItemTypeStyles(theme: Theme, type: AccordionType, isLast: boolean) {
-    switch (type) {
-        case 'standard':
-            return {
-                borderBottomWidth: isLast ? 0 : 1,
-                borderBottomStyle: 'solid' as const,
-                borderBottomColor: theme.colors.border.primary,
-            };
-        case 'separated':
-            return {
-                borderWidth: 1,
-                borderStyle: 'solid' as const,
-                borderColor: theme.colors.border.primary,
-                borderRadius: 8,
-                overflow: 'hidden' as const,
-            };
-        case 'bordered':
-            return {
-                borderBottomWidth: isLast ? 0 : 1,
-                borderBottomStyle: 'solid' as const,
-                borderBottomColor: theme.colors.border.primary,
-            };
-        default:
-            return {};
-    }
-}
-
-/**
- * Create dynamic item styles
- */
-function createItemStyles(theme: Theme) {
-    return ({ type = 'standard', isLast = false }: ItemDynamicProps) => {
-        const typeStyles = getItemTypeStyles(theme, type, isLast);
-        return {
-            display: 'flex' as const,
-            flexDirection: 'column' as const,
-            ...typeStyles,
-            variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-            },
-        } as const;
-    };
-}
-
-/**
- * Create size variants for header
- */
-function createHeaderSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        fontSize: size.headerFontSize,
-        padding: size.headerPadding,
-    }));
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-    }));
-}
-
-/**
- * Create size variants for content inner
- */
-function createContentInnerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        fontSize: size.headerFontSize,
-        padding: size.contentPadding,
-        paddingTop: 0,
-    }));
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: createContainerTypeVariants(theme),
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-            // Spacing variants from ContainerStyleProps
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-function createHeaderStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'space-between' as const,
-        width: '100%' as const,
-        backgroundColor: 'transparent' as const,
-        color: theme.colors.text.primary,
-        textAlign: 'left' as const,
-        variants: {
-            size: createHeaderSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    fontWeight: '600' as const,
-                },
-                false: {
-                    fontWeight: '500' as const,
-                },
-            },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    _web: {
-                        cursor: 'not-allowed' as const,
-                    },
-                },
-                false: {
-                    _web: {
-                        cursor: 'pointer' as const,
-                        _hover: {
-                            backgroundColor: theme.colors.surface.secondary,
-                        },
-                    },
-                },
-            },
-            isLast: { true: {}, false: {} },
-        } as const,
-        _web: {
-            border: 'none' as const,
-            outline: 'none' as const,
-            transition: 'background-color 0.2s ease' as const,
-        },
-    });
-}
-
-function createTitleStyles() {
-    return () => ({
-        flex: 1,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-    });
-}
-
-function createIconStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        marginLeft: 8,
-        color: theme.intents.primary.primary,
-        variants: {
-            size: createIconSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    _web: {
-                        transform: 'rotate(180deg)' as const,
-                    },
-                },
-                false: {
-                    _web: {
-                        transform: 'rotate(0deg)' as const,
-                    },
-                },
-            },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-        _web: {
-            transition: 'transform 0.2s ease' as const,
-        },
-    });
-}
-
-function createContentStyles() {
-    return () => ({
-        overflow: 'hidden' as const,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    maxHeight: 2000,
-                },
-                false: {
-                    maxHeight: 0,
-                },
-            },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-        _web: {
-            transition: 'height 0.15s ease, padding 0.3s ease' as const,
-        },
-    });
-}
-
-function createContentInnerStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.secondary,
-        variants: {
-            size: createContentInnerSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-export const accordionStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Accordion', theme, {container: createContainerStyles(theme),
-        item: createItemStyles(theme),
-        header: createHeaderStyles(theme),
-        content: createContentStyles(),
-        icon: createIconStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        title: createTitleStyles()(),
-        contentInner: createContentInnerStyles(theme)()});
-});