@idealyst/components 1.1.7 → 1.1.8

package/src/Avatar/Avatar.styles.tsx

@@ -1,103 +1,58 @@
+/**
+ * Avatar 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 AvatarSize = Size;
-type AvatarShape = 'circle' | 'square';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
 
-type AvatarVariants = {
-    size: AvatarSize;
-    shape: AvatarShape;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedAvatarStyles = StylesheetStyles<keyof AvatarVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type AvatarStylesheet = {
-    avatar: ExpandedAvatarStyles;
-    image: ExpandedAvatarStyles;
-    fallback: ExpandedAvatarStyles;
-}
-
-function createAvatarSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        width: size.width,
-        height: size.height,
-    }));
-}
-
-function createAvatarShapeVariants(theme: Theme) {
-    return {
-        circle: {
-            borderRadius: 9999,
-        },
-        square: {
-            borderRadius: 8,
-        },
-    } as const;
-}
+type AvatarShape = 'circle' | 'square';
 
-function createFallbackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        fontSize: size.fontSize,
-    }));
-}
+export type AvatarDynamicProps = {
+    size?: Size;
+    shape?: AvatarShape;
+};
 
 /**
- * Create container styles
+ * Avatar styles with size and shape variants.
  */
-function createContainerStyles(theme: Theme) {
-    return () => ({
+export const avatarStyles = defineStyle('Avatar', (theme: Theme) => ({
+    avatar: (_props: AvatarDynamicProps) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         backgroundColor: theme.colors.surface.secondary,
         overflow: 'hidden' as const,
         variants: {
-            size: createAvatarSizeVariants(theme),
-            shape: createAvatarShapeVariants(theme),
+            // $iterator expands for each avatar size
+            size: {
+                width: theme.sizes.$avatar.width,
+                height: theme.sizes.$avatar.height,
+            },
+            shape: {
+                circle: { borderRadius: 9999 },
+                square: { borderRadius: 8 },
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create image styles
- */
-function createImageStyles() {
-    return () => ({
+    image: (_props: AvatarDynamicProps) => ({
         width: '100%' as const,
         height: '100%' as const,
-    });
-}
+    }),
 
-/**
- * Create fallback styles
- */
-function createFallbackStyles(theme: Theme) {
-    return () => ({
+    fallback: (_props: AvatarDynamicProps) => ({
         color: theme.colors.text.primary,
         fontWeight: '600' as const,
         variants: {
-            size: createFallbackSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$avatar.fontSize,
+            },
         },
-    });
-}
-
-// 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 avatarStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-  const extended = applyExtensions('Avatar', theme, {
-    avatar: createContainerStyles(theme),
-    fallback: createFallbackStyles(theme),
-  });
-
-  return {
-    ...extended,
-    // Minor utility styles (not extended)
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-  };
-});
+    }),
+}));

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,86 +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 { applyExtensions } from '../extensions/applyExtension';
+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',
@@ -91,71 +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;
-    };
-}
+    },
 
-/**
- * Create content styles
- */
-function createContentStyles() {
-    return () => ({
+    content: (_props: BadgeDynamicProps) => ({
         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 () => ({
+    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,
+            },
         },
-    });
-}
-
-// 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)(),
-  };
-});
+    }),
+}));