@idealyst/components 1.1.6 → 1.1.8

package/src/Slider/Slider.styles.tsx

@@ -1,252 +1,182 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size, Styles} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { SliderIntentVariant } from './types';
-
-/**
- * Create size variants for track
- */
-function createTrackSizeVariants(theme: Theme) {
-    const variants = {} as Record<Size, Styles>;
-    for (const sizeKey in theme.sizes.slider) {
-        const size = sizeKey as Size;
-        variants[size] = {
-            height: theme.sizes.slider[size].trackHeight,
-        };
-    }
-    return variants;
-}
-
 /**
- * Get filled track color based on intent
+ * Slider styles using defineStyle with dynamic props.
  */
-function getFilledTrackColor(theme: Theme, intent: SliderIntentVariant) {
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create size variants for thumb
- */
-function createThumbSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        width: size.thumbSize,
-        height: size.thumbSize,
-    }));
-}
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-/**
- * Get thumb border color based on intent
- */
-function getThumbBorderColor(theme: Theme, intent: SliderIntentVariant) {
-    return theme.intents[intent].primary;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-/**
- * Create size variants for thumb icon
- */
-function createThumbIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        width: size.thumbIconSize,
-        height: size.thumbIconSize,
-        minWidth: size.thumbIconSize,
-        maxWidth: size.thumbIconSize,
-        minHeight: size.thumbIconSize,
-        maxHeight: size.thumbIconSize,
-    }));
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-/**
- * Get thumb icon color based on intent
- */
-function getThumbIconColor(theme: Theme, intent: SliderIntentVariant){
-    return theme.intents[intent].primary;
-}
+export type SliderDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    disabled?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Create size variants for mark
+ * Slider styles with intent/disabled handling.
  */
-function createMarkSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        height: size.markHeight,
-    }));
-}
-
-const createFilledTrackStyles = (theme: Theme) => {
-    return ({ intent }: { intent: SliderIntentVariant }) => {
-        return {
-            position: 'absolute',
-            height: '100%',
-            borderRadius: 9999,
-            top: 0,
-            left: 0,
-            backgroundColor: getFilledTrackColor(theme, intent),
-        } as const;
-    }
-}
-
-const createThumbStyles = (theme: Theme) => {
-    return ({ intent, disabled }: { intent: SliderIntentVariant, disabled: boolean }) => {
-        return {
-            position: 'absolute',
-            backgroundColor: theme.colors.surface.primary,
-            borderRadius: 9999,
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderColor: getThumbBorderColor(theme, intent),
-            top: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.2,
-            shadowRadius: 4,
-            elevation: 2,
-            variants: {
-                size: createThumbSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.6,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'grab',
-                            _hover: {
-                                transform: 'translate(-50%, -50%) scale(1.05)',
-                            },
-                            _active: {
-                                cursor: 'grabbing',
-                                transform: 'translate(-50%, -50%) scale(1.1)',
-                            },
-                        },
-                    },
-                },
+export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
+    container: (_props: SliderDynamicProps) => ({
+        gap: 4,
+        paddingVertical: 8,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
             },
-            _web: {
-                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-                transform: 'translate(-50%, -50%)',
-                transition: 'transform 0.15s ease, box-shadow 0.2s ease',
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
             },
-        } as const;
-    }
-}
-
-const createThumbIconStyles = (theme: Theme) => {
-    return ({ intent }: { intent: SliderIntentVariant }) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            color: getThumbIconColor(theme, intent),
-            variants: {
-                size: createThumbIconSizeVariants(theme),
+        },
+    }),
+
+    sliderWrapper: (_props: SliderDynamicProps) => ({
+        position: 'relative' as const,
+        paddingVertical: 4,
+    }),
+
+    track: ({ disabled = false }: SliderDynamicProps) => ({
+        backgroundColor: theme.colors.surface.tertiary,
+        borderRadius: 9999,
+        position: 'relative' as const,
+        opacity: disabled ? 0.5 : 1,
+        variants: {
+            size: {
+                height: theme.sizes.$slider.trackHeight,
             },
-        } 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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const sliderStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            gap: 4,
-            paddingVertical: 8,
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            cursor: disabled ? 'not-allowed' : 'pointer',
+        },
+    }),
+
+    filledTrack: ({ intent = 'primary' }: SliderDynamicProps) => ({
+        position: 'absolute' as const,
+        height: '100%',
+        borderRadius: 9999,
+        top: 0,
+        left: 0,
+        backgroundColor: theme.intents[intent].primary,
+    }),
+
+    thumb: ({ intent = 'primary', disabled = false }: SliderDynamicProps) => ({
+        position: 'absolute' as const,
+        backgroundColor: theme.colors.surface.primary,
+        borderRadius: 9999,
+        borderWidth: 2,
+        borderStyle: 'solid' as const,
+        borderColor: theme.intents[intent].primary,
+        top: '50%',
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        elevation: 2,
+        opacity: disabled ? 0.6 : 1,
+        variants: {
+            size: {
+                width: theme.sizes.$slider.thumbSize,
+                height: theme.sizes.$slider.thumbSize,
             },
         },
-        sliderWrapper: {
-            position: 'relative',
-            paddingVertical: 4,
+        _web: {
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+            transform: 'translate(-50%, -50%)',
+            transition: 'transform 0.15s ease, box-shadow 0.2s ease',
+            cursor: disabled ? 'not-allowed' : 'grab',
+            _hover: disabled ? {} : { transform: 'translate(-50%, -50%) scale(1.05)' },
+            _active: disabled ? {} : { cursor: 'grabbing', transform: 'translate(-50%, -50%) scale(1.1)' },
         },
-        track: {
-            backgroundColor: theme.colors.surface.tertiary,
-            borderRadius: 9999,
-            position: 'relative',
-            variants: {
-                size: createTrackSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'pointer',
-                        },
-                    },
-                },
-            } as const,
-        } as const,
-        filledTrack: createFilledTrackStyles(theme),
-        thumb: createThumbStyles(theme),
-        thumbActive: {
-            _web: {
-                transform: 'translate(-50%, -50%) scale(1.1)',
+    }),
+
+    thumbActive: (_props: SliderDynamicProps) => ({
+        _web: {
+            transform: 'translate(-50%, -50%) scale(1.1)',
+        },
+    }),
+
+    thumbIcon: ({ intent = 'primary' }: SliderDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        color: theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$slider.thumbIconSize,
+                height: theme.sizes.$slider.thumbIconSize,
+                minWidth: theme.sizes.$slider.thumbIconSize,
+                maxWidth: theme.sizes.$slider.thumbIconSize,
+                minHeight: theme.sizes.$slider.thumbIconSize,
+                maxHeight: theme.sizes.$slider.thumbIconSize,
             },
         },
-        thumbIcon: createThumbIconStyles(theme),
-        valueLabel: {
+    }),
+
+    valueLabel: (_props: SliderDynamicProps) => ({
         fontSize: 12,
-        fontWeight: '600',
+        fontWeight: '600' as const,
         color: theme.colors.text.primary,
-        textAlign: 'center',
-    },
-        minMaxLabels: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
+        textAlign: 'center' as const,
+    }),
+
+    minMaxLabels: (_props: SliderDynamicProps) => ({
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
         marginTop: 4,
-    },
-        minMaxLabel: {
+    }),
+
+    minMaxLabel: (_props: SliderDynamicProps) => ({
         fontSize: 12,
         color: theme.colors.text.secondary,
-    },
-        mark: {
-            position: 'absolute',
-            width: 2,
-            backgroundColor: theme.colors.border.secondary,
-            top: '50%',
-            variants: {
-                size: createMarkSizeVariants(theme),
-            },
-            _web: {
-                transform: 'translate(-50%, -50%)',
+    }),
+
+    marks: (_props: SliderDynamicProps) => ({
+        position: 'absolute' as const,
+        width: '100%',
+        height: '100%',
+        top: 0,
+        left: 0,
+    }),
+
+    mark: (_props: SliderDynamicProps) => ({
+        position: 'absolute' as const,
+        width: 2,
+        backgroundColor: theme.colors.border.secondary,
+        top: '50%',
+        variants: {
+            size: {
+                height: theme.sizes.$slider.markHeight,
             },
         },
-        marks: {
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            left: 0,
+        _web: {
+            transform: 'translate(-50%, -50%)',
         },
-        markLabel: {
-            position: 'absolute',
-            fontSize: 10,
-            color: theme.colors.text.secondary,
-            top: '100%',
-            marginTop: 4,
-            _web: {
-                transform: 'translateX(-50%)',
-                whiteSpace: 'nowrap',
-            },
+    }),
+
+    markLabel: (_props: SliderDynamicProps) => ({
+        position: 'absolute' as const,
+        fontSize: 10,
+        color: theme.colors.text.secondary,
+        top: '100%',
+        marginTop: 4,
+        _web: {
+            transform: 'translateX(-50%)',
+            whiteSpace: 'nowrap',
         },
-    };
-});
+    }),
+}));

package/src/Slider/Slider.web.tsx

@@ -57,10 +57,10 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([sliderStyles.container, style as any]);
+  const containerProps = getWebProps([(sliderStyles.container as any)({}), style as any]);
   const wrapperProps = getWebProps([sliderStyles.sliderWrapper]);
-  const trackProps = getWebProps([sliderStyles.track]);
-  const thumbIconProps = getWebProps([sliderStyles.thumbIcon({ intent })]);
+  const trackProps = getWebProps([(sliderStyles.track as any)({})]);
+  const thumbIconProps = getWebProps([(sliderStyles.thumbIcon as any)({ intent })]);
   const valueLabelProps = getWebProps([sliderStyles.valueLabel]);
   const minMaxLabelsProps = getWebProps([sliderStyles.minMaxLabels]);
   const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel]);
@@ -211,9 +211,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const percentage = ((value - min) / (max - min)) * 100;
 
   // Dynamic styles with percentage
-  const filledTrackProps = getWebProps([sliderStyles.filledTrack({ intent }), { width: `${percentage}%` }]);
+  const filledTrackProps = getWebProps([(sliderStyles.filledTrack as any)({ intent }), { width: `${percentage}%` }]);
   const thumbProps = getWebProps([
-    sliderStyles.thumb({ intent, disabled }),
+    (sliderStyles.thumb as any)({ intent, disabled }),
     isDragging && sliderStyles.thumbActive,
     { left: `${percentage}%` }
   ]);

package/src/Switch/Switch.native.tsx

@@ -118,17 +118,23 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     };
   });
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const switchTrackStyle = (switchStyles.switchTrack as any)({ checked, intent, disabled });
+  const containerStyle = (switchStyles.container as any)({});
+  const switchContainerStyle = (switchStyles.switchContainer as any)({});
+  const labelStyle = (switchStyles.label as any)({ disabled, labelPosition });
+
   const switchElement = (
     <Pressable
       ref={!label ? ref : undefined}
       nativeID={!label ? id : undefined}
       onPress={handlePress}
       disabled={disabled}
-      style={switchStyles.switchContainer}
+      style={switchContainerStyle}
       testID={testID}
       {...nativeA11yProps}
     >
-      <Animated.View style={switchStyles.switchTrack({ checked, intent })}>
+      <Animated.View style={switchTrackStyle}>
         <Animated.View
           style={[
             {
@@ -158,14 +164,14 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}
-        style={[switchStyles.container, style]}
+        style={[containerStyle, style]}
       >
         {labelPosition === 'left' && (
-          <Text style={switchStyles.label}>{label}</Text>
+          <Text style={labelStyle}>{label}</Text>
         )}
         {switchElement}
         {labelPosition === 'right' && (
-          <Text style={switchStyles.label}>{label}</Text>
+          <Text style={labelStyle}>{label}</Text>
         )}
       </Pressable>
     );

package/src/Switch/Switch.styles.old.tsx

@@ -0,0 +1,203 @@
+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 { SwitchIntentVariant, SwitchSizeVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
+
+function createTrackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.trackWidth,
+        height: size.trackHeight,
+    }));
+}
+
+function getTrackBackgroundColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
+    if (checked) {
+        return theme.intents[intent].primary;
+    }
+    return theme.colors.border.secondary;
+}
+
+function createThumbSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.thumbSize,
+        height: size.thumbSize,
+        left: 2,
+    }));
+}
+
+function getThumbTransform(theme: Theme, size: SwitchSizeVariant, checked: boolean) {
+    const sizeValue = theme.sizes.switch[size];
+    const translateX = checked ? sizeValue.translateX : 0;
+    return `translateY(-50%) translateX(${translateX}px)`;
+}
+
+function createThumbIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.thumbIconSize,
+        height: size.thumbIconSize,
+    }));
+}
+
+function getThumbIconColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
+    if (checked) {
+        return theme.intents[intent].primary;
+    }
+    return theme.colors.border.secondary;
+}
+
+function createSwitchTrackStyles(theme: Theme) {
+    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
+        return {
+            borderRadius: 9999,
+            position: 'relative',
+            backgroundColor: getTrackBackgroundColor(theme, checked, intent),
+            variants: {
+                size: createTrackSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.9,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+            } as const,
+            _web: {
+                transition: 'background-color 0.2s ease',
+            },
+        } as const;
+    }
+}
+
+function createSwitchThumbStyles(theme: Theme) {
+    return ({ size, checked }: { size: SwitchSizeVariant, checked: boolean }) => {
+        return {
+            position: 'absolute',
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 9999,
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.2,
+            shadowRadius: 3,
+            elevation: 2,
+            variants: {
+                size: createThumbSizeVariants(theme),
+            },
+            _web: {
+                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+                transition: 'transform 0.2s ease',
+                transform: getThumbTransform(theme, size, checked),
+            },
+        } as const;
+    }
+}
+
+function createThumbIconStyles(theme: Theme) {
+    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: getThumbIconColor(theme, checked, intent),
+            variants: {
+                size: createThumbIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+/**
+ * Create container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 8,
+        variants: {
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+/**
+ * Create switch container styles
+ */
+function createSwitchContainerStyles() {
+    return () => ({
+        justifyContent: 'center' as const,
+        _web: {
+            border: 'none',
+            padding: 0,
+            backgroundColor: 'transparent',
+            width: 'fit-content',
+        },
+    });
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        fontSize: 14,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {
+                    opacity: 1,
+                },
+            },
+            position: {
+                left: {
+                    marginRight: 8,
+                },
+                right: {
+                    marginLeft: 8,
+                },
+            },
+        } 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 switchStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+
+  return applyExtensions('Switch', theme, {container: createContainerStyles(theme),
+    switchTrack: createSwitchTrackStyles(theme),
+    switchThumb: createSwitchThumbStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+    switchContainer: createSwitchContainerStyles()(),
+    thumbIcon: createThumbIconStyles(theme),
+    label: createLabelStyles(theme)()});
+});