@idealyst/components 1.1.6 → 1.1.8

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',
+                    },
+                },
+            },
+        }});
+});

package/src/RadioButton/RadioButton.styles.tsx

@@ -1,172 +1,108 @@
+/**
+ * RadioButton styles using defineStyle with dynamic props.
+ */
 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 { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-type RadioButtonSize = Size;
-type RadioButtonIntent = Intent;
-type RadioGroupOrientation = 'horizontal' | 'vertical';
-
-type RadioButtonVariants = {
-    size: RadioButtonSize;
-    intent: RadioButtonIntent;
-    checked: boolean;
-    disabled: boolean;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type RadioGroupVariants = {
-    orientation: RadioGroupOrientation;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-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;
-}
+type RadioGroupOrientation = 'horizontal' | 'vertical';
 
-function createRadioSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'radioButton', (size) => ({
-        width: size.radioSize,
-        height: size.radioSize,
-    }));
-}
+export type RadioButtonDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    checked?: boolean;
+    disabled?: boolean;
+    orientation?: RadioGroupOrientation;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
-function createCheckedVariants(theme: Theme, intent: RadioButtonIntent) {
-    const intentValue = theme.intents[intent];
-    return {
-        true: {
-            borderColor: intentValue.primary,
-        },
-        false: {
-            borderColor: theme.colors.border.primary,
+/**
+ * RadioButton styles with intent/checked/disabled handling.
+ */
+export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
+    container: (_props: RadioButtonDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        paddingVertical: 4,
+        variants: {
+            size: {
+                gap: theme.sizes.$radioButton.gap,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
-    } 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;
-}
+    radio: ({ intent = 'primary', checked = false, disabled = false }: RadioButtonDynamicProps) => {
+        const intentValue = theme.intents[intent];
 
-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,
+            borderStyle: 'solid' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            backgroundColor: disabled
+                ? theme.colors.surface.tertiary
+                : theme.colors.surface.primary,
+            borderColor: checked ? intentValue.primary : theme.colors.border.primary,
+            opacity: disabled ? 0.5 : 1,
             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,
-                            },
-                        },
-                    },
+                size: {
+                    width: theme.sizes.$radioButton.radioSize,
+                    height: theme.sizes.$radioButton.radioSize,
                 },
             },
             _web: {
                 transition: 'all 0.2s ease',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                _hover: disabled ? {} : { opacity: 0.8 },
+                _active: disabled ? {} : { opacity: 0.6 },
             },
         } as const;
-    }
-}
+    },
 
-function createRadioDotStyles(theme: Theme) {
-    return ({ intent }: Partial<RadioButtonVariants>) => {
-        return {
-            borderRadius: 9999,
-            backgroundColor: createRadioDotIntentColor(theme, intent),
-            variants: {
-                size: createRadioDotSizeVariants(theme),
+    radioDot: ({ intent = 'primary' }: RadioButtonDynamicProps) => ({
+        borderRadius: 9999,
+        backgroundColor: theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$radioButton.radioDotSize,
+                height: theme.sizes.$radioButton.radioDotSize,
             },
-        } 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) => {
-  return {
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 4,
-        variants: {
-            size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                gap: size.gap,
-            })),
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        } as const,
-    },
-    radio: createRadioStyles(theme),
-    radioDot: createRadioDotStyles(theme),
-    label: {
+    label: ({ disabled = false }: RadioButtonDynamicProps) => ({
         color: theme.colors.text.primary,
+        opacity: disabled ? 0.5 : 1,
         variants: {
-            size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                fontSize: size.fontSize,
-            })),
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {
-                    opacity: 1,
-                },
+            size: {
+                fontSize: theme.sizes.$radioButton.fontSize,
             },
         },
-    },
-    groupContainer: {
+    }),
+
+    groupContainer: ({ orientation = 'vertical' }: RadioButtonDynamicProps) => ({
         gap: 4,
-        variants: {
-            orientation: {
-                horizontal: {
-                    flexDirection: 'row',
-                    flexWrap: 'wrap',
-                    gap: 16,
-                },
-                vertical: {
-                    flexDirection: 'column',
-                },
-            },
-        },
-    },
-  };
-});
+        flexDirection: orientation === 'horizontal' ? ('row' as const) : ('column' as const),
+        flexWrap: orientation === 'horizontal' ? ('wrap' as const) : undefined,
+        ...(orientation === 'horizontal' ? { gap: 16 } : {}),
+    }),
+}));

package/src/RadioButton/RadioButton.web.tsx

@@ -87,10 +87,10 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([radioButtonStyles.container, style]);
-  const radioProps = getWebProps([radioButtonStyles.radio({ intent })]);
-  const dotProps = getWebProps([radioButtonStyles.radioDot({ intent })]);
-  const labelProps = getWebProps([radioButtonStyles.label]);
+  const containerProps = getWebProps([(radioButtonStyles.container as any)({}), style]);
+  const radioProps = getWebProps([(radioButtonStyles.radio as any)({ intent, checked, disabled })]);
+  const dotProps = getWebProps([(radioButtonStyles.radioDot as any)({ intent })]);
+  const labelProps = getWebProps([(radioButtonStyles.label as any)({ disabled })]);
 
   return (
     <button

package/src/SVGImage/SVGImage.styles.old.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type SVGImageIntent = Intent;
+
+type SVGImageVariants = {
+    intent: SVGImageIntent;
+}
+
+export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
+
+export type SVGImageStylesheet = {
+    container: ExpandedSVGImageStyles;
+    image: ExpandedSVGImageStyles;
+}
+
+function createContainerIntentVariants(theme: Theme) {
+    return {
+        primary: {
+            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
+        },
+        success: {
+            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
+        },
+        error: {
+            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
+        },
+        warning: {
+            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
+        },
+        neutral: {
+            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
+        },
+        info: {
+            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
+        },
+    };
+}
+
+function createContainerNativeIntentVariants(theme: Theme) {
+    const variants: Record<SVGImageIntent, any> = {} as any;
+    for (const intent in theme.intents) {
+        variants[intent as SVGImageIntent] = {
+            tintColor: theme.intents[intent as SVGImageIntent].primary,
+        };
+    }
+    return variants;
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            intent: createContainerIntentVariants(theme),
+        },
+        _web: {
+            userSelect: 'none',
+        },
+        _native: {
+            variants: {
+                intent: createContainerNativeIntentVariants(theme),
+            },
+        },
+    });
+}
+
+// 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 svgImageStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('SVGImage', theme, {container: createContainerStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        image: {
+            _web: {
+                display: 'block',
+                maxWidth: '100%',
+                height: 'auto',
+            },
+        }});
+});

package/src/SVGImage/SVGImage.styles.tsx

@@ -1,78 +1,47 @@
+/**
+ * SVGImage styles using defineStyle with dynamic intent handling.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
 
-type SVGImageIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type SVGImageVariants = {
-    intent: SVGImageIntent;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
+export type SVGImageDynamicProps = {
+    intent?: Intent;
+};
 
-export type SVGImageStylesheet = {
-    container: ExpandedSVGImageStyles;
-    image: ExpandedSVGImageStyles;
-}
-
-function createContainerIntentVariants(theme: Theme) {
-    return {
-        primary: {
-            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
-        },
-        success: {
-            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
-        },
-        error: {
-            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
-        },
-        warning: {
-            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
-        },
-        neutral: {
-            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
-        },
-        info: {
-            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
-        },
-    };
-}
-
-function createContainerNativeIntentVariants(theme: Theme) {
-    const variants: Record<SVGImageIntent, any> = {} as any;
-    for (const intent in theme.intents) {
-        variants[intent as SVGImageIntent] = {
-            tintColor: theme.intents[intent as SVGImageIntent].primary,
-        };
-    }
-    return variants;
-}
-
-// 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 svgImageStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        variants: {
-            intent: createContainerIntentVariants(theme),
-        },
+/**
+ * SVGImage styles with intent-based coloring.
+ * Uses CSS filters on web and tintColor on native.
+ */
+export const svgImageStyles = defineStyle('SVGImage', (theme: Theme) => ({
+    container: ({ intent }: SVGImageDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        // Native: use tintColor for intent
+        ...(intent ? { tintColor: theme.intents[intent].primary } : {}),
         _web: {
             userSelect: 'none',
-        },
-        _native: {
-            variants: {
-                intent: createContainerNativeIntentVariants(theme),
-            },
-        },
-    },
-    image: {
+            // Web: use CSS filters for intent coloring
+            ...(intent === 'primary' ? { filter: 'brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)' } : {}),
+            ...(intent === 'success' ? { filter: 'brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)' } : {}),
+            ...(intent === 'error' ? { filter: 'brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)' } : {}),
+            ...(intent === 'warning' ? { filter: 'brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)' } : {}),
+            ...(intent === 'neutral' ? { filter: 'brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)' } : {}),
+            ...(intent === 'info' ? { filter: 'brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)' } : {}),
+        },
+    }),
+
+    image: (_props: SVGImageDynamicProps) => ({
         _web: {
             display: 'block',
             maxWidth: '100%',
             height: 'auto',
         },
-    },
-  };
-});
+    }),
+}));