@idealyst/components 1.1.6 → 1.1.8

package/src/Avatar/Avatar.web.tsx

@@ -38,11 +38,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
     shape,
   });
 
-  const avatarStyleArray = [avatarStyles.avatar, style];
+  const avatarStyleArray = [(avatarStyles.avatar as any)({}), style];
   const avatarProps = getWebProps(avatarStyleArray);
 
   // Generate fallback text styles with proper theming and size
-  const fallbackStyleArray = [avatarStyles.fallback];
+  const fallbackStyleArray = [(avatarStyles.fallback as any)({})];
   const fallbackProps = getWebProps(fallbackStyleArray);
 
   const handleImageError = () => {

package/src/Badge/Badge.native.tsx

@@ -21,8 +21,8 @@ const Badge = forwardRef<View, BadgeProps>(({
   });
 
   // Call dynamic styles with color variant
-  const badgeStyle = badgeStyles.badge({ color });
-  const textStyle = badgeStyles.text({ color });
+  const badgeStyle = (badgeStyles.badge as any)({ color });
+  const textStyle = (badgeStyles.text as any)({ color });
 
   // Map badge size to icon size
   const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;

package/src/Badge/Badge.styles.old.tsx

@@ -0,0 +1,157 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, getColorFromString, Size, Color } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type BadgeType = 'filled' | 'outlined' | 'dot';
+
+type BadgeVariants = {
+    size: Size;
+    type: BadgeType;
+    color: Color;
+}
+
+export type ExpandedBadgeStyles = StylesheetStyles<keyof BadgeVariants>;
+
+export type BadgeStylesheet = {
+    badge: ExpandedBadgeStyles;
+    content: ExpandedBadgeStyles;
+    icon: ExpandedBadgeStyles;
+    text: ExpandedBadgeStyles;
+}
+
+/**
+ * Create type variants for badge
+ */
+function createBadgeTypeVariants(theme: Theme, color: Color) {
+    const colorValue = getColorFromString(theme, color);
+    return {
+        filled: {
+            borderWidth: 0,
+            backgroundColor: colorValue,
+        },
+        outlined: {
+            backgroundColor: 'transparent',
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: colorValue,
+        },
+        dot: {
+            minWidth: 8,
+            width: 8,
+            height: 8,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            backgroundColor: colorValue,
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for badge text
+ */
+function createTextTypeVariants(theme: Theme, color: Color){
+    const colorValue = getColorFromString(theme, color);
+    return {
+        filled: {
+            color: theme.colors.text.inverse,
+        },
+        outlined: {
+            color: colorValue,
+        },
+        dot: {
+            display: 'none',
+        },
+    } as const;
+}
+
+/**
+ * Generate badge container styles
+ */
+function createBadgeStyles(theme: Theme) {
+    return ({ color }: Partial<BadgeVariants>) => {
+        return {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 9999,
+            variants: {
+                size: buildSizeVariants(theme, 'badge', (size) => ({
+                    minWidth: size.minWidth,
+                    height: size.height,
+                    paddingHorizontal: size.paddingHorizontal,
+                })),
+                type: createBadgeTypeVariants(theme, color),
+            },
+            _web: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                fontWeight: '600',
+                lineHeight: 1,
+            },
+        } as const;
+    }
+}
+
+/**
+ * Generate badge text styles
+ */
+function createTextStyles(theme: Theme) {
+    return ({ color }: Partial<BadgeVariants>) => {
+        return {
+            fontWeight: '600',
+            textAlign: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'badge', (size) => ({
+                    fontSize: size.fontSize,
+                    lineHeight: size.lineHeight,
+                })),
+                type: createTextTypeVariants(theme, color),
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create content styles
+ */
+function createContentStyles() {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        gap: 4,
+    });
+}
+
+/**
+ * Create icon styles
+ */
+function createIconStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            size: buildSizeVariants(theme, 'badge', (size) => ({
+                width: size.iconSize,
+                height: size.iconSize,
+            })),
+        },
+    });
+}
+
+// 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 badgeStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+
+  return applyExtensions('Badge', theme, {badge: createBadgeStyles(theme),
+    text: createTextStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+    content: createContentStyles()(),
+    icon: createIconStyles(theme)()});
+});

package/src/Badge/Badge.styles.tsx

@@ -1,85 +1,49 @@
+/**
+ * Badge styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, getColorFromString, Size, Color } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { defineStyle, ThemeStyleWrapper, getColorFromString } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size, Color } from '@idealyst/theme';
 
-type BadgeType = 'filled' | 'outlined' | 'dot';
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type BadgeVariants = {
-    size: Size;
-    type: BadgeType;
-    color: Color;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedBadgeStyles = StylesheetStyles<keyof BadgeVariants>;
+type BadgeType = 'filled' | 'outlined' | 'dot';
 
-export type BadgeStylesheet = {
-    badge: ExpandedBadgeStyles;
-    content: ExpandedBadgeStyles;
-    icon: ExpandedBadgeStyles;
-    text: ExpandedBadgeStyles;
-}
+export type BadgeDynamicProps = {
+    size?: Size;
+    type?: BadgeType;
+    color?: Color;
+};
 
 /**
- * Create type variants for badge
+ * Badge styles with color-based type variants.
  */
-function createBadgeTypeVariants(theme: Theme, color: Color) {
-    const colorValue = getColorFromString(theme, color);
-    return {
-        filled: {
-            borderWidth: 0,
-            backgroundColor: colorValue,
-        },
-        outlined: {
-            backgroundColor: 'transparent',
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderColor: colorValue,
-        },
-        dot: {
-            minWidth: 8,
-            width: 8,
-            height: 8,
-            paddingHorizontal: 0,
-            paddingVertical: 0,
-            backgroundColor: colorValue,
-        },
-    } as const;
-}
+export const badgeStyles = defineStyle('Badge', (theme: Theme) => ({
+    badge: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
 
-/**
- * Create type variants for badge text
- */
-function createTextTypeVariants(theme: Theme, color: Color){
-    const colorValue = getColorFromString(theme, color);
-    return {
-        filled: {
-            color: theme.colors.text.inverse,
-        },
-        outlined: {
-            color: colorValue,
-        },
-        dot: {
-            display: 'none',
-        },
-    } as const;
-}
+        const typeStyles = type === 'filled'
+            ? { borderWidth: 0, backgroundColor: colorValue }
+            : type === 'outlined'
+                ? { backgroundColor: 'transparent', borderWidth: 2, borderStyle: 'solid' as const, borderColor: colorValue }
+                : { minWidth: 8, width: 8, height: 8, paddingHorizontal: 0, paddingVertical: 0, backgroundColor: colorValue };
 
-/**
- * Generate badge container styles
- */
-function createBadgeStyles(theme: Theme) {
-    return ({ color }: Partial<BadgeVariants>) => {
         return {
-            alignItems: 'center',
-            justifyContent: 'center',
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
             borderRadius: 9999,
+            ...typeStyles,
             variants: {
-                size: buildSizeVariants(theme, 'badge', (size) => ({
-                    minWidth: size.minWidth,
-                    height: size.height,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                type: createBadgeTypeVariants(theme, color),
+                // $iterator expands for each badge size
+                size: {
+                    minWidth: theme.sizes.$badge.minWidth,
+                    height: theme.sizes.$badge.height,
+                    paddingHorizontal: theme.sizes.$badge.paddingHorizontal,
+                },
             },
             _web: {
                 display: 'flex',
@@ -90,51 +54,48 @@ function createBadgeStyles(theme: Theme) {
                 lineHeight: 1,
             },
         } as const;
-    }
-}
+    },
+
+    text: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
+
+        const textColor = type === 'filled'
+            ? theme.colors.text.inverse
+            : type === 'outlined'
+                ? colorValue
+                : 'transparent'; // dot type hides text
 
-/**
- * Generate badge text styles
- */
-function createTextStyles(theme: Theme) {
-    return ({ color }: Partial<BadgeVariants>) => {
         return {
-            fontWeight: '600',
-            textAlign: 'center',
+            fontWeight: '600' as const,
+            textAlign: 'center' as const,
+            color: textColor,
+            ...(type === 'dot' ? { display: 'none' as const } : {}),
             variants: {
-                size: buildSizeVariants(theme, 'badge', (size) => ({
-                    fontSize: size.fontSize,
-                    lineHeight: size.lineHeight,
-                })),
-                type: createTextTypeVariants(theme, color),
+                size: {
+                    fontSize: theme.sizes.$badge.fontSize,
+                    lineHeight: theme.sizes.$badge.lineHeight,
+                },
             },
         } as const;
-    };
-}
+    },
 
-// 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 badgeStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    badge: createBadgeStyles(theme),
-    content: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
+    content: (_props: BadgeDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         gap: 4,
-    },
-    icon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    icon: (_props: BadgeDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         variants: {
-            size: buildSizeVariants(theme, 'badge', (size) => ({
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
+            size: {
+                width: theme.sizes.$badge.iconSize,
+                height: theme.sizes.$badge.iconSize,
+            },
         },
-    },
-    text: createTextStyles(theme),
-  };
-});
+    }),
+}));

package/src/Badge/Badge.web.tsx

@@ -28,13 +28,13 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps
     type,
   });
   
-  const badgeStyle = badgeStyles.badge({ color });
+  const badgeStyle = (badgeStyles.badge as any)({ color });
   const contentStyle = badgeStyles.content;
-  const textStyle = badgeStyles.text({ color });
-  
-  const badgeProps = getWebProps(badgeStyle);
-  const contentProps = getWebProps(contentStyle);
-  const textProps = getWebProps(textStyle);
+  const textStyle = (badgeStyles.text as any)({ color });
+
+  const badgeProps = getWebProps([badgeStyle]);
+  const contentProps = getWebProps([contentStyle]);
+  const textProps = getWebProps([textStyle]);
   const iconProps = getWebProps([badgeStyles.icon, textStyle]);
 
   // Helper to render icon

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -22,13 +22,20 @@ interface BreadcrumbItemProps {
 }
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, intent, itemStyle }) => {
-  // Apply variants for this item only
+  const isClickable = !!item.onPress && !item.disabled;
+  const isDisabled = item.disabled || false;
+
+  // Apply size variant
   breadcrumbItemStyles.useVariants({
     size,
+  });
+
+  // Get dynamic item text style
+  const itemTextStyle = (breadcrumbItemStyles.itemText as any)({
     intent,
-    disabled: item.disabled || false,
     isLast,
-    clickable: !!item.onPress && !item.disabled,
+    disabled: isDisabled,
+    clickable: isClickable,
   });
 
   const iconStyle = breadcrumbItemStyles.icon;
@@ -55,11 +62,11 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
   const content = (
     <View style={[breadcrumbItemStyles.item, itemStyle]}>
       {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
-      <Text style={breadcrumbItemStyles.itemText}>{item.label}</Text>
+      <Text style={itemTextStyle}>{item.label}</Text>
     </View>
   );
 
-  if (item.onPress && !item.disabled) {
+  if (isClickable) {
     return (
       <Pressable
         onPress={item.onPress}

package/src/Breadcrumb/Breadcrumb.styles.old.tsx

@@ -0,0 +1,231 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type BreadcrumbSize = Size;
+type BreadcrumbIntent = 'primary' | 'neutral';
+
+type BreadcrumbVariants = {
+    size: BreadcrumbSize;
+    intent: BreadcrumbIntent;
+    disabled: boolean;
+    isLast: boolean;
+    clickable: boolean;
+}
+
+export type ExpandedBreadcrumbStyles = StylesheetStyles<keyof BreadcrumbVariants>;
+
+export type BreadcrumbStylesheet = {
+    container: ExpandedBreadcrumbStyles;
+    item: ExpandedBreadcrumbStyles;
+    itemText: ExpandedBreadcrumbStyles;
+    icon: ExpandedBreadcrumbStyles;
+    separator: ExpandedBreadcrumbStyles;
+    ellipsis: ExpandedBreadcrumbStyles;
+    ellipsisIcon: ExpandedBreadcrumbStyles;
+    menuButton: ExpandedBreadcrumbStyles;
+    menuButtonIcon: ExpandedBreadcrumbStyles;
+}
+
+type ItemTextDynamicProps = {
+    intent?: BreadcrumbIntent;
+    isLast?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+};
+
+/**
+ * Create size variants for item text
+ */
+function createItemTextSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Get item text color based on state
+ */
+function getItemTextColor(theme: Theme, intent: BreadcrumbIntent, isLast: boolean, disabled: boolean, clickable: boolean): string {
+    if (disabled) {
+        return theme.colors.text.secondary;
+    }
+    if (isLast) {
+        return theme.colors.text.primary;
+    }
+    if (clickable) {
+        return intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary;
+    }
+    return theme.colors.text.secondary;
+}
+
+/**
+ * Create size variants for icons
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
+        width: size.iconSize,
+        height: size.iconSize,
+    }));
+}
+
+/**
+ * Get icon color based on intent
+ */
+function getIconColor(theme: Theme, intent: BreadcrumbIntent) {
+    if (intent === 'primary') {
+        return theme.intents.primary.primary;
+    }
+    return theme.colors.text.secondary;
+}
+
+const createItemTextStyles = (theme: Theme) => {
+    return ({ intent = 'primary', isLast = false, disabled = false, clickable = true }: ItemTextDynamicProps) => {
+        const color = getItemTextColor(theme, intent, isLast, disabled, clickable);
+        return {
+            color,
+            opacity: disabled ? 0.5 : 1,
+            variants: {
+                size: createItemTextSizeVariants(theme),
+            },
+        } as const;
+    };
+}
+
+const createIconStyles = (theme: Theme) => {
+    return {
+        variants: {
+            size: createIconSizeVariants(theme),
+        },
+    } as const;
+}
+
+const createSeparatorStyles = (theme: Theme) => {
+    return {
+        color: theme.colors.text.tertiary,
+        variants: {
+            size: createItemTextSizeVariants(theme),
+        },
+    } as const;
+}
+
+const createEllipsisIconStyles = (theme: Theme) => {
+    return ({ intent }: Partial<BreadcrumbVariants>) => {
+        return {
+            color: getIconColor(theme, intent),
+            variants: {
+                size: createIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+const createMenuButtonIconStyles = (theme: Theme) => {
+    return ({ intent }: Partial<BreadcrumbVariants>) => {
+        return {
+            color: getIconColor(theme, intent),
+            variants: {
+                size: createIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+// Style creators for extension support
+function createContainerStyles() {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        flexWrap: 'wrap' as const,
+        gap: 8,
+    });
+}
+
+function createItemStyles() {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    });
+}
+
+// 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 breadcrumbStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Breadcrumb', theme, {container: createContainerStyles(),
+        item: createItemStyles(),
+        itemText: createItemTextStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        icon: createIconStyles(theme),
+        separator: createSeparatorStyles(theme),
+        ellipsis: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        ellipsisIcon: createEllipsisIconStyles(theme),
+        menuButton: {
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+        },
+        menuButtonIcon: createMenuButtonIconStyles(theme)});
+});
+
+// Export individual style sheets for backwards compatibility
+export const breadcrumbContainerStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 8,
+        },
+    };
+});
+
+export const breadcrumbItemStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        item: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
+        itemText: createItemTextStyles(theme),
+        icon: createIconStyles(theme),
+    } as const;
+});
+
+export const breadcrumbSeparatorStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        separator: createSeparatorStyles(theme),
+    } as const;
+});
+
+export const breadcrumbEllipsisStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        ellipsis: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        icon: createEllipsisIconStyles(theme),
+    } as const;
+});
+
+export const breadcrumbMenuButtonStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        button: {
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+        },
+        icon: createMenuButtonIconStyles(theme),
+    } as const;
+});