@idealyst/components 1.1.7 → 1.1.8

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;
+});

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -1,235 +1,118 @@
+/**
+ * Breadcrumb styles using defineStyle with $iterator expansion.
+ */
 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';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
 
-type BreadcrumbVariants = {
-    size: BreadcrumbSize;
-    intent: BreadcrumbIntent;
-    disabled: boolean;
-    isLast: boolean;
-    clickable: boolean;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedBreadcrumbStyles = StylesheetStyles<keyof BreadcrumbVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type BreadcrumbStylesheet = {
-    container: ExpandedBreadcrumbStyles;
-    item: ExpandedBreadcrumbStyles;
-    itemText: ExpandedBreadcrumbStyles;
-    icon: ExpandedBreadcrumbStyles;
-    separator: ExpandedBreadcrumbStyles;
-    ellipsis: ExpandedBreadcrumbStyles;
-    ellipsisIcon: ExpandedBreadcrumbStyles;
-    menuButton: ExpandedBreadcrumbStyles;
-    menuButtonIcon: ExpandedBreadcrumbStyles;
-}
+type BreadcrumbIntent = 'primary' | 'neutral';
 
-type ItemTextDynamicProps = {
+export type BreadcrumbDynamicProps = {
+    size?: Size;
     intent?: BreadcrumbIntent;
-    isLast?: boolean;
     disabled?: boolean;
+    isLast?: boolean;
     clickable?: boolean;
 };
 
 /**
- * Create size variants for item text
+ * Breadcrumb styles with intent and state handling.
  */
-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,
-    }));
-}
+export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
+    container: (_props: BreadcrumbDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        flexWrap: 'wrap' as const,
+        gap: 8,
+    }),
 
-/**
- * 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;
-}
+    item: (_props: BreadcrumbDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    }),
+
+    itemText: ({ intent = 'primary', isLast = false, disabled = false, clickable = true }: BreadcrumbDynamicProps) => {
+        // Get color based on state - inline for Unistyles to trace
+        const color = disabled
+            ? theme.colors.text.secondary
+            : isLast
+                ? theme.colors.text.primary
+                : clickable
+                    ? (intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary)
+                    : 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),
+                // $iterator expands for each breadcrumb size
+                size: {
+                    fontSize: theme.sizes.$breadcrumb.fontSize,
+                    lineHeight: theme.sizes.$breadcrumb.lineHeight,
+                },
             },
         } as const;
-    };
-}
+    },
 
-const createIconStyles = (theme: Theme) => {
-    return {
+    icon: (_props: BreadcrumbDynamicProps) => ({
         variants: {
-            size: createIconSizeVariants(theme),
+            size: {
+                width: theme.sizes.$breadcrumb.iconSize,
+                height: theme.sizes.$breadcrumb.iconSize,
+                fontSize: theme.sizes.$breadcrumb.iconSize,
+            },
         },
-    } as const;
-}
+    }),
 
-const createSeparatorStyles = (theme: Theme) => {
-    return {
+    separator: (_props: BreadcrumbDynamicProps) => ({
         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),
+            size: {
+                fontSize: theme.sizes.$breadcrumb.fontSize,
+                lineHeight: theme.sizes.$breadcrumb.lineHeight,
             },
-        } 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 () => ({
+    ellipsis: (_props: BreadcrumbDynamicProps) => ({
         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
-    const extended = applyExtensions('Breadcrumb', theme, {
-        container: createContainerStyles(),
-        item: createItemStyles(),
-        itemText: createItemTextStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // 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,
-        },
-    };
-});
+        justifyContent: 'center' as const,
+    }),
 
-export const breadcrumbItemStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        item: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
+    ellipsisIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
+        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+        variants: {
+            size: {
+                width: theme.sizes.$breadcrumb.iconSize,
+                height: theme.sizes.$breadcrumb.iconSize,
+                fontSize: theme.sizes.$breadcrumb.iconSize,
+            },
         },
-        itemText: createItemTextStyles(theme),
-        icon: createIconStyles(theme),
-    } as const;
-});
+    }),
 
-export const breadcrumbSeparatorStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        separator: createSeparatorStyles(theme),
-    } as const;
-});
+    menuButton: (_props: BreadcrumbDynamicProps) => ({
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+    }),
 
-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,
+    menuButtonIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
+        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+        variants: {
+            size: {
+                width: theme.sizes.$breadcrumb.iconSize,
+                height: theme.sizes.$breadcrumb.iconSize,
+                fontSize: theme.sizes.$breadcrumb.iconSize,
+            },
         },
-        icon: createMenuButtonIconStyles(theme),
-    } as const;
-});
+    }),
+}));

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -1,12 +1,6 @@
-import React, { isValidElement, useState, useRef, useEffect } from 'react';
+import React, { isValidElement, useState } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import {
-  breadcrumbContainerStyles,
-  breadcrumbItemStyles,
-  breadcrumbSeparatorStyles,
-  breadcrumbEllipsisStyles,
-  breadcrumbMenuButtonStyles
-} from './Breadcrumb.styles';
+import { breadcrumbStyles } from './Breadcrumb.styles';
 import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
@@ -26,21 +20,23 @@ 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)({
+  // Get dynamic styles - call as functions for theme reactivity
+  const itemStyle_ = (breadcrumbStyles.item as any)({});
+  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
     isLast,
     disabled: isDisabled,
     clickable: isClickable,
   });
+  const iconStyle = (breadcrumbStyles.icon as any)({});
 
-  const itemProps = getWebProps([breadcrumbItemStyles.item]);
+  const itemProps = getWebProps([itemStyle_]);
   const itemTextProps = getWebProps([itemTextStyle, itemStyle]);
-  const iconProps = getWebProps([breadcrumbItemStyles.icon]);
+  const iconProps = getWebProps([iconStyle]);
 
   const handleClick = () => {
     if (!item.disabled && item.onPress) {
@@ -53,10 +49,10 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
 
     if (isIconName(item.icon)) {
       const iconPath = resolveIconPath(item.icon);
+      // IconSvg uses size="1em" by default, sized by container's fontSize from styles
       return (
         <IconSvg
           path={iconPath}
-          {...iconProps}
           aria-label={item.icon}
         />
       );
@@ -120,8 +116,9 @@ interface BreadcrumbSeparatorProps {
 }
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
-  breadcrumbSeparatorStyles.useVariants({ size });
-  const separatorProps = getWebProps([breadcrumbSeparatorStyles.separator, separatorStyle]);
+  breadcrumbStyles.useVariants({ size });
+  const separatorStyle_ = (breadcrumbStyles.separator as any)({});
+  const separatorProps = getWebProps([separatorStyle_, separatorStyle]);
 
   return (
     <span {...separatorProps} aria-hidden="true">
@@ -136,9 +133,11 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbEllipsisStyles.useVariants({ size });
-  const ellipsisProps = getWebProps([breadcrumbEllipsisStyles.ellipsis]);
-  const iconProps = getWebProps([breadcrumbEllipsisStyles.icon({ intent })]);
+  breadcrumbStyles.useVariants({ size });
+  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
+  const ellipsisIconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
+  const ellipsisProps = getWebProps([ellipsisStyle]);
+  const iconProps = getWebProps([ellipsisIconStyle]);
   const ellipsisIconPath = resolveIconPath('dots-horizontal');
 
   return (
@@ -167,13 +166,19 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   id,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
-  const containerProps = getWebProps([breadcrumbContainerStyles.container, style as any]);
+
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (breadcrumbStyles.container as any)({});
+  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
+  const menuButtonIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
+
+  const containerProps = getWebProps([containerStyle, style as any]);
   const menuIconPath = resolveIconPath('dots-horizontal');
 
   // Apply variants for menu button
-  breadcrumbMenuButtonStyles.useVariants({ size });
-  const menuButtonProps = getWebProps([breadcrumbMenuButtonStyles.button]);
-  const menuIconProps = getWebProps([breadcrumbMenuButtonStyles.icon({ intent })]);
+  breadcrumbStyles.useVariants({ size });
+  const menuButtonProps = getWebProps([menuButtonStyle]);
+  const menuIconProps = getWebProps([menuButtonIconStyle]);
 
   // Handle responsive collapsing
   let displayItems = items;