@idealyst/components 1.1.6 → 1.1.7

package/src/RadioButton/RadioButton.web.tsx

@@ -87,9 +87,9 @@ 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 containerProps = getWebProps([(radioButtonStyles.container as any)({}), style]);
+  const radioProps = getWebProps([(radioButtonStyles.radio as any)({ intent })]);
+  const dotProps = getWebProps([(radioButtonStyles.radioDot as any)({ intent })]);
   const labelProps = getWebProps([radioButtonStyles.label]);
 
   return (

package/src/SVGImage/SVGImage.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type SVGImageIntent = Intent;
 
@@ -47,14 +48,11 @@ function createContainerNativeIntentVariants(theme: Theme) {
     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',
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         variants: {
             intent: createContainerIntentVariants(theme),
         },
@@ -66,13 +64,27 @@ export const svgImageStyles = StyleSheet.create((theme: Theme) => {
                 intent: createContainerNativeIntentVariants(theme),
             },
         },
-    },
-    image: {
-        _web: {
-            display: 'block',
-            maxWidth: '100%',
-            height: 'auto',
+    });
+}
+
+// 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
+    const extended = applyExtensions('SVGImage', theme, {
+        container: createContainerStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        image: {
+            _web: {
+                display: 'block',
+                maxWidth: '100%',
+                height: 'auto',
+            },
         },
-    },
-  };
+    };
 });

package/src/Screen/Screen.native.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, SafeAreaView } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 
@@ -21,6 +22,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   testID,
   id,
 }, ref) => {
+  const insets = useSafeAreaInsets();
 
   screenStyles.useVariants({
     background,
@@ -34,6 +36,14 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     marginHorizontal,
   });
 
+  // Calculate safe area padding
+  const safeAreaStyle = safeArea ? {
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left,
+    paddingRight: insets.right,
+  } : undefined;
+
   if (scrollable) {
     // For ScrollView, flex: 1 goes on the ScrollView style
     // Background and padding go on contentContainerStyle (without flex: 1)
@@ -41,11 +51,12 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
 
     const contentContainerStyleArray = [
       screenStyles.screenContent,
+      safeAreaStyle,
       contentInset ? {
-        paddingTop: contentInset.top,
-        paddingBottom: contentInset.bottom,
-        paddingLeft: contentInset.left,
-        paddingRight: contentInset.right,
+        paddingTop: (safeArea ? insets.top : 0) + (contentInset.top ?? 0),
+        paddingBottom: (safeArea ? insets.bottom : 0) + (contentInset.bottom ?? 0),
+        paddingLeft: (safeArea ? insets.left : 0) + (contentInset.left ?? 0),
+        paddingRight: (safeArea ? insets.right : 0) + (contentInset.right ?? 0),
       } : undefined,
     ];
 
@@ -62,19 +73,18 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     );
   }
 
-  const containerStyle = [screenStyles.screen, style];
+  const screenStyle = (screenStyles.screen as any)({});
+  const containerStyle = [
+    screenStyle,
+    safeAreaStyle,
+    style,
+  ];
 
-  const view = (
+  return (
     <RNView ref={ref as any} nativeID={id} style={containerStyle} testID={testID}>
       {children}
     </RNView>
   );
-
-  if (safeArea) {
-    return <SafeAreaView style={{ flex: 1 }}>{view}</SafeAreaView>;
-  }
-
-  return view;
 });
 
 Screen.displayName = 'Screen';

package/src/Screen/Screen.styles.tsx

@@ -9,6 +9,7 @@ import {
   buildMarginVerticalVariants,
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 function generateBackgroundVariants(theme: Theme) {
   return {
@@ -22,55 +23,65 @@ function generateBackgroundVariants(theme: Theme) {
   };
 }
 
+// Style creators for extension support
+function createScreenStyles(theme: Theme) {
+    return () => ({
+        flex: 1,
+        variants: {
+            background: generateBackgroundVariants(theme),
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            // Spacing variants from ContainerStyleProps
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100%',
+            boxSizing: 'border-box',
+        },
+    });
+}
+
 // 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 screenStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    screen: {
-      flex: 1,
-      backgroundColor: theme.colors.surface.primary,
-      variants: {
-        background: generateBackgroundVariants(theme),
-        safeArea: {
-          true: {},
-          false: {},
-        },
-        // Spacing variants from ContainerStyleProps
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-      _web: {
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '100%',
-        boxSizing: 'border-box',
-      },
-    },
-    // Content style for ScrollView - no flex: 1 so content can grow
-    screenContent: {
-      backgroundColor: theme.colors.surface.primary,
-      variants: {
-        background: generateBackgroundVariants(theme),
-        safeArea: {
-          true: {},
-          false: {},
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Screen', theme, {
+        screen: createScreenStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        // Content style for ScrollView - no flex: 1 so content can grow
+        screenContent: {
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                background: generateBackgroundVariants(theme),
+                safeArea: {
+                    true: {},
+                    false: {},
+                },
+                // Spacing variants from ContainerStyleProps
+                gap: buildGapVariants(theme),
+                padding: buildPaddingVariants(theme),
+                paddingVertical: buildPaddingVerticalVariants(theme),
+                paddingHorizontal: buildPaddingHorizontalVariants(theme),
+                margin: buildMarginVariants(theme),
+                marginVertical: buildMarginVerticalVariants(theme),
+                marginHorizontal: buildMarginHorizontalVariants(theme),
+            },
         },
-        // Spacing variants from ContainerStyleProps
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-    },
-  };
+    };
 });

package/src/Screen/Screen.web.tsx

@@ -33,7 +33,7 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   });
 
   // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps([screenStyles.screen, style as any]);
+  const webProps = getWebProps([(screenStyles.screen as any)({}), style as any]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 

package/src/Select/Select.native.tsx

@@ -233,7 +233,7 @@ const Select = forwardRef<View, SelectProps>(({
           >
             <Animated.View
               style={[
-                selectStyles.dropdown,
+                (selectStyles.dropdown as any)({}),
                 {
                   position: 'relative', // Override absolute positioning from styles
                   top: 0, // Override top: '100%' from styles
@@ -264,7 +264,7 @@ const Select = forwardRef<View, SelectProps>(({
               {filteredOptions.map((option) => (
                   <Pressable
                     key={option.value}
-                    style={selectStyles.option}
+                    style={(selectStyles.option as any)({})}
                     onPress={() => handleOptionSelect(option)}
                     disabled={option.disabled}
                     android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
@@ -284,7 +284,7 @@ const Select = forwardRef<View, SelectProps>(({
                 ))}
 
               {filteredOptions.length === 0 && (
-                <View style={selectStyles.option}>
+                <View style={(selectStyles.option as any)({})}>
                   <Text style={selectStyles.optionText}>
                     No options found
                   </Text>
@@ -298,8 +298,14 @@ const Select = forwardRef<View, SelectProps>(({
     );
   };
 
+  // Get dynamic styles
+  const containerStyle = (selectStyles.container as any)({});
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent });
+  const dropdownStyle = (selectStyles.dropdown as any)({});
+  const optionStyle = (selectStyles.option as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[selectStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {label && (
         <Text style={selectStyles.label}>
           {label}
@@ -308,7 +314,7 @@ const Select = forwardRef<View, SelectProps>(({
 
       <Pressable
         ref={mergedTriggerRef}
-        style={selectStyles.trigger({ type, intent })}
+        style={triggerStyle}
         onPress={handleTriggerPress}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel || label}

package/src/Select/Select.styles.tsx

@@ -7,6 +7,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { SelectIntentVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 // Type definitions
 type SelectSize = Size;
@@ -137,26 +138,87 @@ function buildDynamicTriggerStyles(theme: Theme) {
     }
 }
 
+// Main element style creators (wrapped for extension support)
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        variants: {
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+function createDropdownStyles(theme: Theme) {
+    return () => ({
+        position: 'absolute' as const,
+        top: '100%',
+        left: 0,
+        right: 0,
+        backgroundColor: theme.colors.surface.primary,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.1,
+        shadowRadius: 24,
+        elevation: 8,
+        zIndex: 9999,
+        maxHeight: 240,
+        minWidth: 200,
+        overflow: 'hidden' as const,
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
+            overflowY: 'auto',
+        },
+    });
+}
+
+function createOptionStyles(theme: Theme) {
+    return () => ({
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        minHeight: 36,
+        _web: {
+            display: 'flex',
+            cursor: 'pointer',
+            _hover: {
+                backgroundColor: theme.colors.surface.secondary,
+            },
+            _active: {
+                opacity: 0.8,
+            },
+        },
+    });
+}
+
 // 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 selectStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extendedStyles = applyExtensions('Select', theme, {
+        container: createContainerStyles(theme),
+        trigger: buildDynamicTriggerStyles(theme),
+        dropdown: createDropdownStyles(theme),
+        option: createOptionStyles(theme),
+    });
+
     return {
-        container: {
-            position: 'relative',
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
-        },
+        // Extended main elements
+        ...extendedStyles,
+        // Minor utility styles (not extended)
         label: {
             fontSize: 14,
             fontWeight: '500',
             color: theme.colors.text.primary,
             marginBottom: 4,
         },
-        trigger: buildDynamicTriggerStyles(theme),
         triggerContent: {
             flex: 1,
             flexDirection: 'row',
@@ -204,31 +266,6 @@ export const selectStyles = StyleSheet.create((theme: Theme) => {
                 transform: 'rotate(180deg)',
             }
         },
-        dropdown: {
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            backgroundColor: theme.colors.surface.primary,
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 8 },
-            shadowOpacity: 0.1,
-            shadowRadius: 24,
-            elevation: 8,
-            zIndex: 9999,
-            maxHeight: 240,
-            minWidth: 200,
-            overflow: 'hidden',
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
-                overflowY: 'auto',
-            },
-        },
         searchContainer: {
             padding: 8,
             borderBottomWidth: 1,
@@ -261,23 +298,6 @@ export const selectStyles = StyleSheet.create((theme: Theme) => {
         optionsList: {
             paddingVertical: 4,
         },
-        option: {
-            paddingHorizontal: 8,
-            paddingVertical: 4,
-            flexDirection: 'row',
-            alignItems: 'center',
-            minHeight: 36,
-            _web: {
-                display: 'flex',
-                cursor: 'pointer',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-                _active: {
-                    opacity: 0.8,
-                },
-            },
-        },
         optionFocused: {
             backgroundColor: theme.interaction.focusedBackground,
             _web: {

package/src/Select/Select.web.tsx

@@ -176,12 +176,12 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   };
 
   const containerWebProps = getWebProps([
-    selectStyles.container,
+    (selectStyles.container as any)({}),
     style as any
   ]);
 
   const triggerWebProps = getWebProps([
-    selectStyles.trigger({ type, intent }),
+    (selectStyles.trigger as any)({ type, intent }),
   ]);
 
   const handleClose = () => {
@@ -247,7 +247,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
         zIndex={1000}
       >
         <div
-          {...getWebProps([selectStyles.dropdown])}
+          {...getWebProps([(selectStyles.dropdown as any)({})])}
           style={{
             maxHeight: maxHeight,
             position: 'relative',
@@ -282,7 +282,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     aria-selected={option.value === value}
                     onMouseEnter={() => setFocusedIndex(index)}
                     {...getWebProps([
-                      selectStyles.option,
+                      (selectStyles.option as any)({}),
                       isFocused && selectStyles.optionFocused,
                       option.disabled && selectStyles.optionDisabled,
                     ])}
@@ -305,7 +305,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
               })}
 
               {filteredOptions.length === 0 && (
-                <div {...getWebProps([selectStyles.option])} style={{ cursor: 'default' }}>
+                <div {...getWebProps([(selectStyles.option as any)({})])} style={{ cursor: 'default' }}>
                   <span {...getWebProps([selectStyles.optionText])}>
                     No options found
                   </span>

package/src/Skeleton/Skeleton.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
 type SkeletonAnimation = 'pulse' | 'wave' | 'none';
@@ -34,14 +35,11 @@ function createShapeVariants(theme: 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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const skeletonStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    skeleton: {
+// Style creators for extension support
+function createSkeletonStyles(theme: Theme) {
+    return () => ({
         backgroundColor: theme.colors.surface.tertiary,
-        overflow: 'hidden',
+        overflow: 'hidden' as const,
         variants: {
             shape: createShapeVariants(theme),
             animation: {
@@ -50,10 +48,24 @@ export const skeletonStyles = StyleSheet.create((theme: Theme) => {
                 none: {},
             },
         },
-    },
-    group: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-  };
+    });
+}
+
+// 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 skeletonStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Skeleton', theme, {
+        skeleton: createSkeletonStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        group: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    };
 });

package/src/Slider/Slider.native.tsx

@@ -193,7 +193,7 @@ const Slider = forwardRef<View, SliderProps>(({
     if (!icon) return null;
 
     if (typeof icon === 'string' && isIconName(icon)) {
-      const iconStyle = sliderStyles.thumbIcon({ intent });
+      const iconStyle = (sliderStyles.thumbIcon as any)({ intent });
       return (
         <MaterialCommunityIcons
           name={icon}
@@ -206,8 +206,12 @@ const Slider = forwardRef<View, SliderProps>(({
     return icon;
   };
 
+  // Get dynamic styles
+  const containerStyle = (sliderStyles.container as any)({});
+  const trackStyle = (sliderStyles.track as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>
@@ -217,7 +221,7 @@ const Slider = forwardRef<View, SliderProps>(({
       <View style={sliderStyles.sliderWrapper}>
         <GestureDetector gesture={composedGesture}>
           <View
-            style={sliderStyles.track}
+            style={trackStyle}
             onLayout={(e) => {
               const width = e.nativeEvent.layout.width;
               trackWidth.value = width;
@@ -226,7 +230,7 @@ const Slider = forwardRef<View, SliderProps>(({
           >
             {/* Filled track */}
             <Animated.View
-              style={[sliderStyles.filledTrack({ intent }), filledTrackAnimatedStyle]}
+              style={[(sliderStyles.filledTrack as any)({ intent }), filledTrackAnimatedStyle]}
             />
 
             {/* Marks */}
@@ -262,7 +266,7 @@ const Slider = forwardRef<View, SliderProps>(({
             {/* Thumb */}
             <Animated.View
               style={[
-                sliderStyles.thumb({ intent, disabled }),
+                (sliderStyles.thumb as any)({ intent, disabled }),
                 {
                   // Manual positioning/sizing for native layout
                   position: 'absolute',