@idealyst/components 1.1.6 → 1.1.8

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -1,234 +1,118 @@
+/**
+ * Breadcrumb styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-
-type BreadcrumbSize = Size;
-type BreadcrumbIntent = 'primary' | 'neutral';
-
-type BreadcrumbVariants = {
-    size: BreadcrumbSize;
-    intent: BreadcrumbIntent;
-    disabled: boolean;
-    isLast: boolean;
-    clickable: boolean;
-}
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
 
-export type ExpandedBreadcrumbStyles = StylesheetStyles<keyof BreadcrumbVariants>;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type BreadcrumbStylesheet = {
-    container: ExpandedBreadcrumbStyles;
-    item: ExpandedBreadcrumbStyles;
-    itemText: ExpandedBreadcrumbStyles;
-    icon: ExpandedBreadcrumbStyles;
-    separator: ExpandedBreadcrumbStyles;
-    ellipsis: ExpandedBreadcrumbStyles;
-    ellipsisIcon: ExpandedBreadcrumbStyles;
-    menuButton: ExpandedBreadcrumbStyles;
-    menuButtonIcon: ExpandedBreadcrumbStyles;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-/**
- * Create size variants for item text
- */
-function createItemTextSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create compound variants for item text
- */
-function createItemTextCompoundVariants(theme: Theme): CompoundVariants<keyof BreadcrumbVariants> {
-    return [
-        {
-            clickable: true,
-            intent: 'primary',
-            isLast: false,
-            disabled: false,
-            styles: { color: theme.intents.primary.primary },
-        },
-        {
-            clickable: true,
-            intent: 'neutral',
-            isLast: false,
-            disabled: false,
-            styles: { color: theme.colors.text.secondary },
-        },
-        {
-            clickable: false,
-            isLast: false,
-            disabled: false,
-            styles: { color: theme.colors.text.secondary },
-        },
-    ];
-}
+type BreadcrumbIntent = 'primary' | 'neutral';
 
-/**
- * Create size variants for icons
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-    }));
-}
+export type BreadcrumbDynamicProps = {
+    size?: Size;
+    intent?: BreadcrumbIntent;
+    disabled?: boolean;
+    isLast?: boolean;
+    clickable?: boolean;
+};
 
 /**
- * Get icon color based on intent
+ * Breadcrumb styles with intent and state handling.
  */
-function getIconColor(theme: Theme, intent: BreadcrumbIntent) {
-    if (intent === 'primary') {
-        return theme.intents.primary.primary;
-    }
-    return theme.colors.text.secondary;
-}
+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,
+    }),
+
+    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 {
-        variants: {
-            size: createItemTextSizeVariants(theme),
-            intent: { primary: {}, neutral: {} },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    color: theme.colors.text.secondary,
+        return {
+            color,
+            opacity: disabled ? 0.5 : 1,
+            variants: {
+                // $iterator expands for each breadcrumb size
+                size: {
+                    fontSize: theme.sizes.$breadcrumb.fontSize,
+                    lineHeight: theme.sizes.$breadcrumb.lineHeight,
                 },
-                false: {},
-            },
-            isLast: {
-                true: { color: theme.colors.text.primary },
-                false: {},
             },
-            clickable: { true: {}, false: {} },
-        },
-        compoundVariants: createItemTextCompoundVariants(theme),
-    } as const;
-}
+        } 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;
-    }
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const breadcrumbStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            gap: 8,
-        },
-        item: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-        },
-        itemText: createItemTextStyles(theme),
-        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,
-        },
-    };
-});
+    ellipsis: (_props: BreadcrumbDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        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;
-});
+    }),
 
-export const breadcrumbEllipsisStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        ellipsis: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        icon: createEllipsisIconStyles(theme),
-    } as const;
-});
+    menuButton: (_props: BreadcrumbDynamicProps) => ({
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+    }),
 
-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';
@@ -22,18 +16,27 @@ interface BreadcrumbItemProps {
 }
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, intent, itemStyle }) => {
-  // Apply variants for this item only
-  breadcrumbItemStyles.useVariants({
+  const isClickable = !!item.onPress && !item.disabled;
+  const isDisabled = item.disabled || false;
+
+  // Apply size variant
+  breadcrumbStyles.useVariants({
     size,
+  });
+
+  // Get dynamic styles - call as functions for theme reactivity
+  const itemStyle_ = (breadcrumbStyles.item as any)({});
+  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
-    disabled: item.disabled || false,
     isLast,
-    clickable: !!item.onPress && !item.disabled,
+    disabled: isDisabled,
+    clickable: isClickable,
   });
+  const iconStyle = (breadcrumbStyles.icon as any)({});
 
-  const itemProps = getWebProps([breadcrumbItemStyles.item]);
-  const itemTextProps = getWebProps([breadcrumbItemStyles.itemText, itemStyle]);
-  const iconProps = getWebProps([breadcrumbItemStyles.icon]);
+  const itemProps = getWebProps([itemStyle_]);
+  const itemTextProps = getWebProps([itemTextStyle, itemStyle]);
+  const iconProps = getWebProps([iconStyle]);
 
   const handleClick = () => {
     if (!item.disabled && item.onPress) {
@@ -46,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}
         />
       );
@@ -80,7 +83,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     </div>
   );
 
-  if (item.onPress && !item.disabled) {
+  if (isClickable) {
     return (
       <button
         onClick={handleClick}
@@ -91,7 +94,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
           cursor: 'pointer',
           textDecoration: 'none',
         }}
-        disabled={item.disabled}
+        disabled={isDisabled}
         aria-current={isLast ? 'page' : undefined}
       >
         {content}
@@ -113,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">
@@ -129,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 (
@@ -160,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;

package/src/Button/Button.native.tsx

@@ -34,29 +34,30 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     accessibilityPressed,
   } = props;
 
-  // Apply variants
+  // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
-    type,
-    intent,
     size,
     disabled,
     gradient,
   });
 
-  // Compute dynamic styles
-  const buttonStyle = buttonStyles.button;
-  const textStyle = buttonStyles.text;
-  const iconStyle = buttonStyles.icon;
+  // Compute dynamic styles with all props for full flexibility
+  const dynamicProps = { intent, type, size, disabled, gradient };
+  const buttonStyle = (buttonStyles.button as any)(dynamicProps);
+  const textStyle = (buttonStyles.text as any)(dynamicProps);
+  const iconStyle = (buttonStyles.icon as any)(dynamicProps);
+  const iconContainerStyle = (buttonStyles.iconContainer as any)(dynamicProps);
 
   // Gradient is only applicable to contained buttons
   const showGradient = gradient && type === 'contained';
 
   // Get gradient overlay colors (transparent to semi-transparent black/white)
+  // Note: Use explicit rgba(0,0,0,0) instead of 'transparent' for RN SVG compatibility
   const getGradientColors = (): [string, string] => {
     switch (gradient) {
-      case 'darken': return ['transparent', 'rgba(0, 0, 0, 0.15)'];
-      case 'lighten': return ['transparent', 'rgba(255, 255, 255, 0.2)'];
-      default: return ['transparent', 'transparent'];
+      case 'darken': return ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.15)'];
+      case 'lighten': return ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.2)'];
+      default: return ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)'];
     }
   };
 
@@ -133,14 +134,38 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   const renderGradientLayer = () => {
     if (!showGradient) return null;
 
-    const [startColor, endColor] = getGradientColors();
+    const [startColor, endColor] = useMemo(() => {
+      switch (gradient) {
+        case 'darken': return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0.15,
+        }];
+        case 'lighten': return [{
+          stopColor: 'white',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'white',
+          stopOpacity: 0.2,
+        }];
+        default: return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0,
+        }];
+      }
+    }, [gradient]);
 
     return (
       <Svg style={RNStyleSheet.absoluteFill}>
         <Defs>
           <LinearGradient id="buttonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <Stop offset="0%" stopColor={startColor} />
-            <Stop offset="100%" stopColor={endColor} />
+            <Stop offset="0%" {...startColor} />
+            <Stop offset="100%" {...endColor} />
           </LinearGradient>
         </Defs>
         <Rect
@@ -174,7 +199,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     <TouchableOpacity {...touchableProps as any}>
       {renderGradientLayer()}
       {hasIcons ? (
-        <View style={buttonStyles.iconContainer}>
+        <View style={iconContainerStyle}>
           {leftIcon && renderIcon(leftIcon)}
           <Text style={textStyle}>
             {buttonContent}