@idealyst/components 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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.3.2",
+    "@idealyst/theme": "^1.3.4",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.3.2",
-    "@idealyst/tooling": "^1.3.2",
+    "@idealyst/theme": "^1.3.4",
+    "@idealyst/tooling": "^1.3.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -17,34 +17,26 @@ interface BreadcrumbItemProps {
 }
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, intent, itemStyle }) => {
-  const isClickable = !!item.onPress && !item.disabled;
   const isDisabled = item.disabled || false;
 
-  // Apply size variant
   breadcrumbStyles.useVariants({
     size,
-  });
-
-  // Get dynamic item text style
-  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
-    isLast,
+    active: isLast,
     disabled: isDisabled,
-    clickable: isClickable,
   });
 
-  const iconStyle = (breadcrumbStyles.icon as any)({});
+  const iconSize = (breadcrumbStyles.icon as any).width || 16;
 
   const renderIcon = () => {
     if (!item.icon) return null;
 
     if (typeof item.icon === 'string') {
-      const iconSize = iconStyle.width || 16;
       return (
         <Icon
           name={item.icon as IconName}
           size={iconSize}
-          style={iconStyle}
+          style={breadcrumbStyles.icon}
         />
       );
     } else if (isValidElement(item.icon)) {
@@ -54,16 +46,14 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
-  const itemContainerStyle = (breadcrumbStyles.item as any)({});
-
   const content = (
-    <View style={[itemContainerStyle, itemStyle]}>
-      {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
-      <Text style={itemTextStyle}>{item.label}</Text>
+    <View style={[breadcrumbStyles.item, itemStyle]}>
+      {item.icon && <View style={breadcrumbStyles.icon}>{renderIcon()}</View>}
+      <Text style={breadcrumbStyles.itemText}>{item.label}</Text>
     </View>
   );
 
-  if (isClickable) {
+  if (!!item.onPress && !item.disabled) {
     return (
       <Pressable
         onPress={item.onPress}
@@ -89,12 +79,12 @@ interface BreadcrumbSeparatorProps {
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
   breadcrumbStyles.useVariants({ size });
-  const sepStyle = (breadcrumbStyles.separator as any)({});
 
   if (typeof separator === 'string') {
-    return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
+    return <Text style={[breadcrumbStyles.separator, separatorStyle]}>{separator}</Text>;
   }
-  return <View style={[sepStyle, separatorStyle]}>{separator}</View>;
+
+  return <View style={[breadcrumbStyles.separatorIcon, separatorStyle]}>{separator}</View>;
 };
 
 interface BreadcrumbEllipsisProps {
@@ -103,13 +93,11 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbStyles.useVariants({ size });
-  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
-  const iconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
+  breadcrumbStyles.useVariants({ size, intent });
 
   return (
-    <View style={ellipsisStyle}>
-      <Icon name="dots-horizontal" style={iconStyle} />
+    <View style={breadcrumbStyles.ellipsis}>
+      <Icon name="dots-horizontal" style={breadcrumbStyles.ellipsisIcon} />
     </View>
   );
 };
@@ -130,11 +118,7 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
 }, ref) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Apply variants
-  breadcrumbStyles.useVariants({ size });
-  const containerStyle = (breadcrumbStyles.container as any)({});
-  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
-  const menuIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
+  breadcrumbStyles.useVariants({ size, intent });
 
   // Handle responsive collapsing
   let displayItems = items;
@@ -172,7 +156,7 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
     <View
       ref={ref as any}
       nativeID={id}
-      style={[containerStyle, style]}
+      style={[breadcrumbStyles.container, style]}
       testID={testID}
       accessibilityLabel="Breadcrumb"
     >
@@ -200,11 +184,11 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
                   size={size}
                 >
                   <Pressable
-                    style={menuButtonStyle}
+                    style={breadcrumbStyles.menuButton}
                     accessibilityRole="button"
                     accessibilityLabel="Show more breadcrumb items"
                   >
-                    <Icon name="dots-horizontal" style={menuIconStyle} />
+                    <Icon name="dots-horizontal" style={breadcrumbStyles.menuButtonIcon} />
                   </Pressable>
                 </Menu>
                 <BreadcrumbSeparator separator={separator} size={size} separatorStyle={separatorStyle} />

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -1,9 +1,10 @@
 /**
- * Breadcrumb styles using defineStyle with $iterator expansion.
+ * Breadcrumb styles using defineStyle with static variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -11,59 +12,61 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type BreadcrumbIntent = 'primary' | 'neutral';
-
-export type BreadcrumbDynamicProps = {
-    size?: Size;
-    intent?: BreadcrumbIntent;
+export type BreadcrumbVariants = {
+    size?: ViewStyleSize;
+    intent?: 'primary' | 'neutral';
+    active?: boolean;
     disabled?: boolean;
-    isLast?: boolean;
-    clickable?: boolean;
 };
 
 /**
- * Breadcrumb styles with intent and state handling.
+ * Breadcrumb styles with static variants.
  */
 export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
-    container: (_props: BreadcrumbDynamicProps) => ({
+    container: {
         display: 'flex' as const,
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         flexWrap: 'wrap' as const,
-        gap: 8,
-    }),
+        gap: 4,
+    },
 
-    item: (_props: BreadcrumbDynamicProps) => ({
+    item: {
         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;
+        opacity: 0.7,
+        variants: {
+            active: {
+                true: { opacity: 1 },
+                false: { _web: { _hover: { opacity: 1 } } },
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: {},
+            },
+        },
+        _web: {
+            transition: 'opacity 0.2s ease',
+        },
+    },
 
-        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,
-                },
+    itemText: {
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$breadcrumb.fontSize,
+                lineHeight: theme.sizes.$breadcrumb.lineHeight,
+            },
+            disabled: {
+                true: { color: theme.colors.text.secondary },
+                false: {},
             },
-        } as const;
+        },
     },
 
-    icon: (_props: BreadcrumbDynamicProps) => ({
+    icon: {
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
@@ -71,48 +74,72 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
         },
-    }),
+    },
 
-    separator: (_props: BreadcrumbDynamicProps) => ({
+    separator: {
         color: theme.colors.text.tertiary,
+        opacity: 0.9,
         variants: {
             size: {
                 fontSize: theme.sizes.$breadcrumb.fontSize,
                 lineHeight: theme.sizes.$breadcrumb.lineHeight,
             },
         },
-    }),
+    },
 
-    ellipsis: (_props: BreadcrumbDynamicProps) => ({
+    separatorIcon: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-    }),
+        color: theme.colors.text.tertiary,
+        opacity: 0.9,
+        variants: {
+            size: {
+                width: theme.sizes.$breadcrumb.iconSize,
+                height: theme.sizes.$breadcrumb.iconSize,
+                fontSize: theme.sizes.$breadcrumb.iconSize,
+            },
+        },
+    },
+
+    ellipsis: {
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+    },
 
-    ellipsisIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
-        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+    ellipsisIcon: {
+        color: theme.colors.text.secondary,
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
                 height: theme.sizes.$breadcrumb.iconSize,
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
+            intent: {
+                primary: { color: theme.intents.primary.primary },
+                neutral: { color: theme.colors.text.secondary },
+            },
         },
-    }),
+    },
 
-    menuButton: (_props: BreadcrumbDynamicProps) => ({
+    menuButton: {
         paddingVertical: 4,
         paddingHorizontal: 8,
-    }),
+    },
 
-    menuButtonIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
-        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+    menuButtonIcon: {
+        color: theme.colors.text.secondary,
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
                 height: theme.sizes.$breadcrumb.iconSize,
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
+            intent: {
+                primary: { color: theme.intents.primary.primary },
+                neutral: { color: theme.colors.text.secondary },
+            },
         },
-    }),
+    },
 }));

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -19,24 +19,16 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
   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,
-    isLast,
+    active: isLast,
     disabled: isDisabled,
-    clickable: isClickable,
   });
-  const iconStyle = (breadcrumbStyles.icon as any)({});
 
-  const itemProps = getWebProps([itemStyle_]);
-  const itemTextProps = getWebProps([itemTextStyle, itemStyle]);
-  const iconProps = getWebProps([iconStyle]);
+  const itemProps = getWebProps([breadcrumbStyles.item]);
+  const itemTextProps = getWebProps([breadcrumbStyles.itemText, itemStyle]);
+  const iconProps = getWebProps([breadcrumbStyles.icon]);
 
   const handleClick = () => {
     if (!item.disabled && item.onPress) {
@@ -61,48 +53,60 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
-  const content = (
-    <div {...itemProps}>
-      {item.icon && (
-        <span
-          {...iconProps}
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          {renderIcon()}
-        </span>
-      )}
-      <span {...itemTextProps}>
-        {item.label}
-      </span>
-    </div>
-  );
-
   if (isClickable) {
     return (
       <button
+        {...itemProps}
         onClick={handleClick}
+        disabled={isDisabled}
+        aria-current={isLast ? 'page' : undefined}
         style={{
           background: 'none',
           border: 'none',
           padding: 0,
+          margin: 0,
           cursor: 'pointer',
           textDecoration: 'none',
+          font: 'inherit',
+          color: 'inherit',
         }}
-        disabled={isDisabled}
-        aria-current={isLast ? 'page' : undefined}
       >
-        {content}
+        {item.icon && (
+          <span
+            {...iconProps}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {renderIcon()}
+          </span>
+        )}
+        <span {...itemTextProps}>
+          {item.label}
+        </span>
       </button>
     );
   }
 
   return (
-    <div aria-current={isLast ? 'page' : undefined}>
-      {content}
+    <div {...itemProps} aria-current={isLast ? 'page' : undefined}>
+      {item.icon && (
+        <span
+          {...iconProps}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {renderIcon()}
+        </span>
+      )}
+      <span {...itemTextProps}>
+        {item.label}
+      </span>
     </div>
   );
 };
@@ -115,11 +119,20 @@ interface BreadcrumbSeparatorProps {
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
   breadcrumbStyles.useVariants({ size });
-  const separatorStyle_ = (breadcrumbStyles.separator as any)({});
-  const separatorProps = getWebProps([separatorStyle_, separatorStyle]);
+  const isTextSeparator = typeof separator === 'string';
+
+  if (isTextSeparator) {
+    const separatorProps = getWebProps([breadcrumbStyles.separator, separatorStyle]);
+    return (
+      <span {...separatorProps} aria-hidden="true">
+        {separator}
+      </span>
+    );
+  }
 
+  const separatorIconProps = getWebProps([breadcrumbStyles.separatorIcon, separatorStyle]);
   return (
-    <span {...separatorProps} aria-hidden="true">
+    <span {...separatorIconProps} aria-hidden="true">
       {separator}
     </span>
   );
@@ -131,11 +144,9 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, 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]);
+  breadcrumbStyles.useVariants({ size, intent });
+  const ellipsisProps = getWebProps([breadcrumbStyles.ellipsis]);
+  const iconProps = getWebProps([breadcrumbStyles.ellipsisIcon]);
 
   return (
     <span {...ellipsisProps}>
@@ -168,17 +179,10 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // 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]);
-
-  // Apply variants for menu button
-  breadcrumbStyles.useVariants({ size });
-  const menuButtonProps = getWebProps([menuButtonStyle]);
-  const menuIconProps = getWebProps([menuButtonIconStyle]);
+  breadcrumbStyles.useVariants({ size, intent });
+  const containerProps = getWebProps([breadcrumbStyles.container, style as any]);
+  const menuButtonProps = getWebProps([breadcrumbStyles.menuButton]);
+  const menuIconProps = getWebProps([breadcrumbStyles.menuButtonIcon]);
 
   // Handle responsive collapsing
   let displayItems = items;

package/src/Button/Button.styles.tsx

@@ -81,6 +81,14 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
                     backgroundColor: 'transparent',
                     borderColor: 'transparent',
                     borderWidth: 0,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                        _active: {
+                            backgroundColor: theme.colors.surface.tertiary,
+                        },
+                    },
                 }
             },
             size: {

package/src/IconButton/IconButton.styles.tsx

@@ -76,6 +76,14 @@ export const iconButtonStyles = defineStyle('IconButton', (theme: Theme) => ({
                     backgroundColor: 'transparent',
                     borderColor: 'transparent',
                     borderWidth: 0,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                        _active: {
+                            backgroundColor: theme.colors.surface.tertiary,
+                        },
+                    },
                 }
             },
             // Size variants - circular so width equals height

package/src/IconButton/docs.ts

@@ -0,0 +1,11 @@
+/**
+ * IconButton Documentation Sample Props
+ */
+
+import type { SampleProps } from '@idealyst/tooling';
+
+export const sampleProps: SampleProps = {
+  props: {
+    icon: 'heart',
+  },
+};