@idealyst/components 1.1.6 → 1.1.7

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.tsx

@@ -1,6 +1,7 @@
 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';
 
@@ -112,29 +113,49 @@ function createTextStyles(theme: Theme) {
     };
 }
 
-// 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',
+/**
+ * Create content styles
+ */
+function createContentStyles() {
+    return () => ({
+        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',
+    });
+}
+
+/**
+ * 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
+  const extended = applyExtensions('Badge', theme, {
+    badge: createBadgeStyles(theme),
     text: createTextStyles(theme),
+  });
+
+  return {
+    ...extended,
+    // Minor utility styles (not extended)
+    content: createContentStyles()(),
+    icon: createIconStyles(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.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type BreadcrumbSize = Size;
 type BreadcrumbIntent = 'primary' | 'neutral';
@@ -27,6 +28,13 @@ export type BreadcrumbStylesheet = {
     menuButtonIcon: ExpandedBreadcrumbStyles;
 }
 
+type ItemTextDynamicProps = {
+    intent?: BreadcrumbIntent;
+    isLast?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+};
+
 /**
  * Create size variants for item text
  */
@@ -38,31 +46,19 @@ function createItemTextSizeVariants(theme: Theme) {
 }
 
 /**
- * Create compound variants for item text
+ * Get item text color based on state
  */
-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 },
-        },
-    ];
+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;
 }
 
 /**
@@ -86,25 +82,16 @@ function getIconColor(theme: Theme, intent: BreadcrumbIntent) {
 }
 
 const createItemTextStyles = (theme: Theme) => {
-    return {
-        variants: {
-            size: createItemTextSizeVariants(theme),
-            intent: { primary: {}, neutral: {} },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    color: theme.colors.text.secondary,
-                },
-                false: {},
-            },
-            isLast: {
-                true: { color: theme.colors.text.primary },
-                false: {},
+    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),
             },
-            clickable: { true: {}, false: {} },
-        },
-        compoundVariants: createItemTextCompoundVariants(theme),
-    } as const;
+        } as const;
+    };
 }
 
 const createIconStyles = (theme: Theme) => {
@@ -146,24 +133,38 @@ const createMenuButtonIconStyles = (theme: Theme) => {
     }
 }
 
+// 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.
-// @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,
-        },
+    // 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: {

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -22,17 +22,24 @@ 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 itemProps = getWebProps([breadcrumbItemStyles.item]);
-  const itemTextProps = getWebProps([breadcrumbItemStyles.itemText, itemStyle]);
+  const itemTextProps = getWebProps([itemTextStyle, itemStyle]);
   const iconProps = getWebProps([breadcrumbItemStyles.icon]);
 
   const handleClick = () => {
@@ -80,7 +87,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     </div>
   );
 
-  if (item.onPress && !item.disabled) {
+  if (isClickable) {
     return (
       <button
         onClick={handleClick}
@@ -91,7 +98,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}

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}