@idealyst/components 1.1.7 → 1.1.8

package/src/Progress/Progress.styles.old.tsx

@@ -0,0 +1,200 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ProgressSize = Size;
+type ProgressIntent = Intent;
+
+export type ProgressVariants = {
+    size: ProgressSize;
+    intent: ProgressIntent;
+    rounded: boolean;
+}
+
+type ProgressDynamicProps = {
+    intent?: ProgressIntent;
+};
+
+function createLinearTrackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        height: size.linearHeight,
+    }));
+}
+
+function createCircularContainerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        width: size.circularSize,
+        height: size.circularSize,
+    }));
+}
+
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.labelFontSize,
+    }));
+}
+
+function createCircularLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.circularLabelFontSize,
+    }));
+}
+
+/**
+ * Get bar background color based on intent
+ */
+function getBarBackgroundColor(theme: Theme, intent: ProgressIntent): string {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create dynamic linear bar styles
+ */
+function createLinearBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            height: '100%' as const,
+            backgroundColor: getBarBackgroundColor(theme, intent),
+            variants: {
+                rounded: {
+                    true: { borderRadius: 9999 },
+                    false: { borderRadius: 0 },
+                },
+            },
+            _web: {
+                transition: 'width 0.3s ease' as const,
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic indeterminate bar styles
+ */
+function createIndeterminateBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            position: 'absolute' as const,
+            height: '100%' as const,
+            width: '40%' as const,
+            backgroundColor: getBarBackgroundColor(theme, intent),
+            variants: {
+                rounded: {
+                    true: { borderRadius: 9999 },
+                    false: { borderRadius: 0 },
+                },
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic circular bar styles
+ */
+function createCircularBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            _web: {
+                stroke: getBarBackgroundColor(theme, intent),
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create container styles
+ */
+function createContainerStyles() {
+    return () => ({
+        gap: 4 as const,
+    });
+}
+
+/**
+ * Create linear track styles
+ */
+function createLinearTrackStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.border.secondary,
+        overflow: 'hidden' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createLinearTrackSizeVariants(theme),
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
+            },
+        },
+    });
+}
+
+/**
+ * Create circular container styles
+ */
+function createCircularContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createCircularContainerSizeVariants(theme),
+        } as const,
+    });
+}
+
+/**
+ * Create circular track styles
+ */
+function createCircularTrackStyles(theme: Theme) {
+    return () => ({
+        _web: {
+            stroke: theme.colors.border.secondary,
+        },
+    });
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        color: theme.colors.text.primary,
+        textAlign: 'center' as const,
+        variants: {
+            size: createLabelSizeVariants(theme),
+        },
+    });
+}
+
+/**
+ * Create circular label styles
+ */
+function createCircularLabelStyles(theme: Theme) {
+    return () => ({
+        position: 'absolute' as const,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCircularLabelSizeVariants(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 progressStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+
+  return applyExtensions('Progress', theme, {container: createContainerStyles(),
+    linearTrack: createLinearTrackStyles(theme),
+    linearBar: createLinearBarStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+    indeterminateBar: createIndeterminateBarStyles(theme),
+    circularContainer: createCircularContainerStyles(theme)(),
+    circularTrack: createCircularTrackStyles(theme)(),
+    circularBar: createCircularBarStyles(theme),
+    label: createLabelStyles(theme)(),
+    circularLabel: createCircularLabelStyles(theme)()});
+});

package/src/Progress/Progress.styles.tsx

@@ -1,204 +1,115 @@
+/**
+ * Progress styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-type ProgressSize = Size;
-type ProgressIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ProgressVariants = {
-    size: ProgressSize;
-    intent: ProgressIntent;
-    rounded: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ProgressDynamicProps = {
-    intent?: ProgressIntent;
+export type ProgressDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    rounded?: boolean;
 };
 
-function createLinearTrackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        height: size.linearHeight,
-    }));
-}
-
-function createCircularContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        width: size.circularSize,
-        height: size.circularSize,
-    }));
-}
-
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.labelFontSize,
-    }));
-}
-
-function createCircularLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.circularLabelFontSize,
-    }));
-}
-
 /**
- * Get bar background color based on intent
+ * Progress styles with intent-based coloring.
  */
-function getBarBackgroundColor(theme: Theme, intent: ProgressIntent): string {
-    return theme.intents[intent].primary;
-}
+export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
+    container: (_props: ProgressDynamicProps) => ({
+        gap: 4 as const,
+    }),
 
-/**
- * Create dynamic linear bar styles
- */
-function createLinearBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            height: '100%' as const,
-            backgroundColor: getBarBackgroundColor(theme, intent),
-            variants: {
-                rounded: {
-                    true: { borderRadius: 9999 },
-                    false: { borderRadius: 0 },
-                },
-            },
-            _web: {
-                transition: 'width 0.3s ease' as const,
+    linearTrack: (_props: ProgressDynamicProps) => ({
+        backgroundColor: theme.colors.border.secondary,
+        overflow: 'hidden' as const,
+        position: 'relative' as const,
+        variants: {
+            // $iterator expands for each progress size
+            size: {
+                height: theme.sizes.$progress.linearHeight,
             },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic indeterminate bar styles
- */
-function createIndeterminateBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            position: 'absolute' as const,
-            height: '100%' as const,
-            width: '40%' as const,
-            backgroundColor: getBarBackgroundColor(theme, intent),
-            variants: {
-                rounded: {
-                    true: { borderRadius: 9999 },
-                    false: { borderRadius: 0 },
-                },
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
             },
-        } as const;
-    };
-}
+        },
+    }),
 
-/**
- * Create dynamic circular bar styles
- */
-function createCircularBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            _web: {
-                stroke: getBarBackgroundColor(theme, intent),
+    linearBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+        height: '100%' as const,
+        backgroundColor: theme.intents[intent].primary,
+        variants: {
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
             },
-        } as const;
-    };
-}
-
-/**
- * Create container styles
- */
-function createContainerStyles() {
-    return () => ({
-        gap: 4 as const,
-    });
-}
+        },
+        _web: {
+            transition: 'width 0.3s ease' as const,
+        },
+    }),
 
-/**
- * Create linear track styles
- */
-function createLinearTrackStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.border.secondary,
-        overflow: 'hidden' as const,
-        position: 'relative' as const,
+    indeterminateBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+        position: 'absolute' as const,
+        height: '100%' as const,
+        width: '40%' as const,
+        backgroundColor: theme.intents[intent].primary,
         variants: {
-            size: createLinearTrackSizeVariants(theme),
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
         },
-    });
-}
+    }),
 
-/**
- * Create circular container styles
- */
-function createCircularContainerStyles(theme: Theme) {
-    return () => ({
+    circularContainer: (_props: ProgressDynamicProps) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         position: 'relative' as const,
         variants: {
-            size: createCircularContainerSizeVariants(theme),
-        } as const,
-    });
-}
+            size: {
+                width: theme.sizes.$progress.circularSize,
+                height: theme.sizes.$progress.circularSize,
+            },
+        },
+    }),
 
-/**
- * Create circular track styles
- */
-function createCircularTrackStyles(theme: Theme) {
-    return () => ({
+    circularTrack: (_props: ProgressDynamicProps) => ({
         _web: {
             stroke: theme.colors.border.secondary,
         },
-    });
-}
+    }),
 
-/**
- * Create label styles
- */
-function createLabelStyles(theme: Theme) {
-    return () => ({
+    circularBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+        _web: {
+            stroke: theme.intents[intent].primary,
+        },
+    }),
+
+    label: (_props: ProgressDynamicProps) => ({
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
         variants: {
-            size: createLabelSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$progress.labelFontSize,
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create circular label styles
- */
-function createCircularLabelStyles(theme: Theme) {
-    return () => ({
+    circularLabel: (_props: ProgressDynamicProps) => ({
         position: 'absolute' as const,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
         variants: {
-            size: createCircularLabelSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$progress.circularLabelFontSize,
+            },
         },
-    });
-}
-
-// 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 progressStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-  const extended = applyExtensions('Progress', theme, {
-    container: createContainerStyles(),
-    linearTrack: createLinearTrackStyles(theme),
-    linearBar: createLinearBarStyles(theme),
-  });
-
-  return {
-    ...extended,
-    // Minor utility styles (not extended)
-    indeterminateBar: createIndeterminateBarStyles(theme),
-    circularContainer: createCircularContainerStyles(theme)(),
-    circularTrack: createCircularTrackStyles(theme)(),
-    circularBar: createCircularBarStyles(theme),
-    label: createLabelStyles(theme)(),
-    circularLabel: createCircularLabelStyles(theme)(),
-  };
-});
+    }),
+}));

package/src/RadioButton/RadioButton.native.tsx

@@ -101,10 +101,11 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
     outputRange: [0, 1],
   });
 
-  // Get dynamic styles
+  // Get dynamic styles - call as functions for theme reactivity
   const containerStyle = (radioButtonStyles.container as any)({});
-  const radioStyle = (radioButtonStyles.radio as any)({ intent });
+  const radioStyle = (radioButtonStyles.radio as any)({ intent, checked, disabled });
   const radioDotStyle = (radioButtonStyles.radioDot as any)({ intent });
+  const labelStyle = (radioButtonStyles.label as any)({ disabled });
 
   return (
     <Pressable
@@ -127,7 +128,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
         />
       </View>
       {label && (
-        <Text style={radioButtonStyles.label}>
+        <Text style={labelStyle}>
           {label}
         </Text>
       )}

package/src/RadioButton/RadioButton.styles.old.tsx

@@ -0,0 +1,175 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type RadioButtonSize = Size;
+type RadioButtonIntent = Intent;
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+
+type RadioButtonVariants = {
+    size: RadioButtonSize;
+    intent: RadioButtonIntent;
+    checked: boolean;
+    disabled: boolean;
+}
+
+type RadioGroupVariants = {
+    orientation: RadioGroupOrientation;
+}
+
+export type ExpandedRadioButtonStyles = StylesheetStyles<keyof RadioButtonVariants>;
+export type ExpandedRadioGroupStyles = StylesheetStyles<keyof RadioGroupVariants>;
+
+export type RadioButtonStylesheet = {
+    container: ExpandedRadioButtonStyles;
+    radio: ExpandedRadioButtonStyles;
+    radioDot: ExpandedRadioButtonStyles;
+    label: ExpandedRadioButtonStyles;
+    groupContainer: ExpandedRadioGroupStyles;
+}
+
+function createRadioSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'radioButton', (size) => ({
+        width: size.radioSize,
+        height: size.radioSize,
+    }));
+}
+
+function createCheckedVariants(theme: Theme, intent: RadioButtonIntent) {
+    const intentValue = theme.intents[intent];
+    return {
+        true: {
+            borderColor: intentValue.primary,
+        },
+        false: {
+            borderColor: theme.colors.border.primary,
+        },
+    } as const;
+}
+
+function createRadioDotSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'radioButton', (size) => ({
+        width: size.radioDotSize,
+        height: size.radioDotSize,
+    }));
+}
+
+function createRadioDotIntentColor(theme: Theme, intent: RadioButtonIntent) {
+    return theme.intents[intent].primary;
+}
+
+function createRadioStyles(theme: Theme) {
+    return ({ intent }: Partial<RadioButtonVariants>) => {
+        return {
+            borderRadius: 9999,
+            borderWidth: 1.5,
+            borderStyle: 'solid',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                size: createRadioSizeVariants(theme),
+                checked: createCheckedVariants(theme, intent),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        backgroundColor: theme.colors.surface.tertiary,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        backgroundColor: theme.colors.surface.primary,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.8,
+                            },
+                            _active: {
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                },
+            },
+            _web: {
+                transition: 'all 0.2s ease',
+            },
+        } as const;
+    }
+}
+
+function createRadioDotStyles(theme: Theme) {
+    return ({ intent }: Partial<RadioButtonVariants>) => {
+        return {
+            borderRadius: 9999,
+            backgroundColor: createRadioDotIntentColor(theme, intent),
+            variants: {
+                size: createRadioDotSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+// Container style creator for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        paddingVertical: 4,
+        variants: {
+            size: buildSizeVariants(theme, 'radioButton', (size) => ({
+                gap: size.gap,
+            })),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(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.
+export const radioButtonStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('RadioButton', theme, {container: createContainerStyles(theme),
+        radio: createRadioStyles(theme),
+        radioDot: createRadioDotStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles
+        label: {
+            color: theme.colors.text.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'radioButton', (size) => ({
+                    fontSize: size.fontSize,
+                })),
+                disabled: {
+                    true: { opacity: 0.5 },
+                    false: { opacity: 1 },
+                },
+            },
+        },
+        groupContainer: {
+            gap: 4,
+            variants: {
+                orientation: {
+                    horizontal: {
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        gap: 16,
+                    },
+                    vertical: {
+                        flexDirection: 'column',
+                    },
+                },
+            },
+        }});
+});