@idealyst/components 1.1.6 → 1.1.7

package/src/Checkbox/Checkbox.native.tsx

@@ -99,6 +99,10 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   const labelContent = children || label;
   const displayHelperText = error || helperText;
 
+  const containerStyle = (checkboxStyles.container as any)({});
+  const checkboxStyle = (checkboxStyles.checkbox as any)({ intent });
+  const checkmarkStyle = (checkboxStyles.checkmark as any)({});
+
   return (
     <View ref={ref} nativeID={id} style={[checkboxStyles.wrapper, style]}>
       <Pressable
@@ -106,15 +110,15 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
         disabled={disabled}
         testID={testID}
         {...nativeA11yProps}
-        style={checkboxStyles.container}
+        style={containerStyle}
       >
-        <View style={checkboxStyles.checkbox({ intent })}>
+        <View style={checkboxStyle}>
           {(internalChecked || indeterminate) && (
             <MaterialCommunityIcons
               name={indeterminate ? 'minus' : 'check'}
               size={14}
               color="#ffffff"
-              style={checkboxStyles.checkmark}
+              style={checkmarkStyle}
             />
           )}
         </View>

package/src/Checkbox/Checkbox.styles.tsx

@@ -1,10 +1,11 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
 import {
   buildMarginVariants,
   buildMarginVerticalVariants,
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type CheckboxSize = Size;
 type CheckboxIntent = Intent | 'info';
@@ -169,11 +170,11 @@ function createCheckboxStyles(theme: Theme) {
 }
 
 function createCheckmarkStyles(_theme: Theme) {
-    return {
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    return () => ({
+        position: 'absolute' as const,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         color: '#ffffff',
         variants: {
             size: createCheckmarkSizeVariants(),
@@ -182,15 +183,13 @@ function createCheckmarkStyles(_theme: Theme) {
                 false: { opacity: 0 },
             },
         },
-    } 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 checkboxStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    wrapper: {
-        flexDirection: 'column',
+// Helper functions to create static styles wrapped in dynamic functions
+function createWrapperStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'column' as const,
         gap: 4,
         variants: {
             // Spacing variants from FormInputStyleProps
@@ -204,10 +203,13 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
             alignItems: 'flex-start',
             width: 'auto',
         },
-    },
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
+    });
+}
+
+function createContainerStyles() {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
         gap: 8,
         _web: {
             display: 'flex',
@@ -217,9 +219,11 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
             width: 'fit-content',
             cursor: 'pointer',
         },
-    },
-    checkbox: createCheckboxStyles(theme),
-    label: {
+    });
+}
+
+function createLabelStyles(theme: Theme) {
+    return () => ({
         color: theme.colors.text.primary,
         variants: {
             size: createLabelSizeVariants(),
@@ -234,9 +238,11 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
             margin: 0,
             padding: 0,
         },
-    },
-    checkmark: createCheckmarkStyles(theme),
-    helperText: {
+    });
+}
+
+function createHelperTextStyles(theme: Theme) {
+    return () => ({
         fontSize: 14,
         color: theme.colors.text.secondary,
         marginTop: 2,
@@ -246,6 +252,24 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
                 false: { color: theme.colors.text.secondary },
             },
         },
-    },
-  };
+    });
+}
+
+// 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 checkboxStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Checkbox', theme, {
+        container: createContainerStyles(),
+        checkbox: createCheckboxStyles(theme),
+        checkmark: createCheckmarkStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        wrapper: createWrapperStyles(theme)(),
+        label: createLabelStyles(theme)(),
+        helperText: createHelperTextStyles(theme)(),
+    };
 });

package/src/Checkbox/Checkbox.web.tsx

@@ -126,11 +126,11 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
 
   // Create style arrays
   const wrapperStyleArray = [checkboxStyles.wrapper, style as any];
-  const containerStyleArray = [checkboxStyles.container];
-  const checkboxStyleArray = [checkboxStyles.checkbox({ intent })];
+  const containerStyleArray = [(checkboxStyles.container as any)({})];
+  const checkboxStyleArray = [(checkboxStyles.checkbox as any)({ intent })];
   const labelStyleArray = [checkboxStyles.label];
   const helperTextStyleArray = [checkboxStyles.helperText];
-  const checkmarkStyleArray = [checkboxStyles.checkmark];
+  const checkmarkStyleArray = [(checkboxStyles.checkmark as any)({})];
 
   // Generate web props
   const wrapperProps = getWebProps(wrapperStyleArray);

package/src/Chip/Chip.native.tsx

@@ -42,11 +42,11 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   const isSelected = selectable ? selected : false;
 
   // Compute dynamic styles
-  const containerStyle = chipStyles.container(size, intent, type, isSelected, disabled);
-  const labelStyle = chipStyles.label(size, intent, type, isSelected);
-  const iconStyle = chipStyles.icon(size, intent, type, isSelected);
-  const deleteButtonStyle = chipStyles.deleteButton(size);
-  const deleteIconStyle = chipStyles.deleteIcon(size, intent, type, isSelected);
+  const containerStyle = (chipStyles.container as any)({ size, intent, type, selected: isSelected, disabled });
+  const labelStyle = (chipStyles.label as any)({ size, intent, type, selected: isSelected });
+  const iconStyle = (chipStyles.icon as any)({ size, intent, type, selected: isSelected });
+  const deleteButtonStyle = (chipStyles.deleteButton as any)({ size });
+  const deleteIconStyle = (chipStyles.deleteIcon as any)({ size, intent, type, selected: isSelected });
 
   // Map chip size to icon size
   const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;

package/src/Chip/Chip.styles.tsx

@@ -1,15 +1,28 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent} from '@idealyst/theme';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ChipType = 'filled' | 'outlined' | 'soft';
 type ChipIntent = Intent;
 
-// 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 chipStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean, disabled: boolean) => {
+type ChipDynamicProps = {
+    size: ChipSize;
+    intent: ChipIntent;
+    type: ChipType;
+    selected: boolean;
+    disabled?: boolean;
+};
+
+type ChipDeleteButtonProps = {
+    size: ChipSize;
+};
+
+/**
+ * Create container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return ({ size, intent, type, selected, disabled = false }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
@@ -48,9 +61,14 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             borderStyle: borderWidth > 0 ? ('solid' as const) : undefined,
             opacity: disabled ? 0.5 : 1,
         } as const;
-    },
-
-    label: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    };
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
@@ -72,9 +90,14 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             lineHeight: sizeValue.lineHeight as number,
             color,
         } as const;
-    },
-
-    icon: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    };
+}
+
+/**
+ * Create icon styles
+ */
+function createIconStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
@@ -97,9 +120,14 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             height: sizeValue.iconSize as number,
             color,
         } as const;
-    },
-
-    deleteButton: (size: ChipSize) => {
+    };
+}
+
+/**
+ * Create delete button styles
+ */
+function createDeleteButtonStyles(theme: Theme) {
+    return ({ size }: ChipDeleteButtonProps) => {
         const sizeValue = theme.sizes.chip[size];
 
         return {
@@ -112,9 +140,14 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             width: sizeValue.iconSize as number,
             height: sizeValue.iconSize as number,
         } as const;
-    },
-
-    deleteIcon: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    };
+}
+
+/**
+ * Create delete icon styles
+ */
+function createDeleteIconStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
@@ -133,6 +166,23 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             fontSize: sizeValue.iconSize as number,
             color,
         } as const;
-    },
-  } 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 chipStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Chip', theme, {
+        container: createContainerStyles(theme),
+        label: createLabelStyles(theme),
+        icon: createIconStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        deleteButton: createDeleteButtonStyles(theme),
+        deleteIcon: createDeleteIconStyles(theme),
+    };
+});

package/src/Chip/Chip.web.tsx

@@ -30,11 +30,11 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   const isSelected = selectable ? selected : false;
 
   // Compute dynamic styles
-  const containerProps = getWebProps([chipStyles.container(size, intent, type, isSelected, disabled), style as any]);
-  const labelProps = getWebProps([chipStyles.label(size, intent, type, isSelected)]);
-  const iconProps = getWebProps([chipStyles.icon(size, intent, type, isSelected)]);
-  const deleteButtonProps = getWebProps([chipStyles.deleteButton(size)]);
-  const deleteIconProps = getWebProps([chipStyles.deleteIcon(size, intent, type, isSelected)]);
+  const containerProps = getWebProps([(chipStyles.container as any)({ size, intent, type, selected: isSelected, disabled }), style as any]);
+  const labelProps = getWebProps([(chipStyles.label as any)({ size, intent, type, selected: isSelected })]);
+  const iconProps = getWebProps([(chipStyles.icon as any)({ size, intent, type, selected: isSelected })]);
+  const deleteButtonProps = getWebProps([(chipStyles.deleteButton as any)({ size })]);
+  const deleteIconProps = getWebProps([(chipStyles.deleteIcon as any)({ size, intent, type, selected: isSelected })]);
 
   const handleClick = () => {
     if (disabled) return;

package/src/Dialog/Dialog.native.tsx

@@ -115,6 +115,12 @@ const Dialog = forwardRef<View, DialogProps>(({
     };
   });
 
+  // Get dynamic styles
+  const backdropStyle = (dialogStyles.backdrop as any)({});
+  const containerStyle = (dialogStyles.container as any)({});
+  const headerStyle = (dialogStyles.header as any)({});
+  const contentStyle = (dialogStyles.content as any)({});
+
   return (
     <Modal
       visible={open}
@@ -125,11 +131,11 @@ const Dialog = forwardRef<View, DialogProps>(({
       testID={testID}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        <Animated.View style={[dialogStyles.backdrop, backdropAnimatedStyle]}>
+        <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-            <Animated.View ref={ref as any} style={[dialogStyles.container, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+            <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
               {(title || showCloseButton) && (
-                <View style={dialogStyles.header}>
+                <View style={headerStyle}>
                   {title && (
                     <Text style={dialogStyles.title}>
                       {title}
@@ -147,7 +153,7 @@ const Dialog = forwardRef<View, DialogProps>(({
                   )}
                 </View>
               )}
-              <View style={dialogStyles.content}>
+              <View style={contentStyle}>
                 {children}
               </View>
             </Animated.View>

package/src/Dialog/Dialog.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 DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
 type DialogType = 'default' | 'alert' | 'confirmation';
 
@@ -64,103 +65,142 @@ function createContainerTypeVariants(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.
-export const dialogStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        backdrop: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 1000,
-            _web: {
-                position: 'fixed',
-                transition: 'opacity 150ms ease-out',
-            },
+// Helper functions to create static styles wrapped in dynamic functions
+function createBackdropStyles() {
+    return () => ({
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        zIndex: 1000,
+        _web: {
+            position: 'fixed',
+            transition: 'opacity 150ms ease-out',
         },
-        container: {
-            backgroundColor: theme.colors.surface.primary,
-            borderRadius: 12,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 10 },
-            shadowOpacity: 0.25,
-            shadowRadius: 20,
-            elevation: 10,
-            maxHeight: '90%',
-            variants: {
-                size: createContainerSizeVariants(),
-                type: createContainerTypeVariants(theme),
-            },
-            _web: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'auto',
-                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-                transition: 'opacity 150ms ease-out, transform 150ms ease-out',
-                transformOrigin: 'center center',
-            },
+    });
+}
+
+function createDialogContainerStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.surface.primary,
+        borderRadius: 12,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.25,
+        shadowRadius: 20,
+        elevation: 10,
+        maxHeight: '90%',
+        variants: {
+            size: createContainerSizeVariants(),
+            type: createContainerTypeVariants(theme),
         },
-        header: {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border.primary,
+        _web: {
+            position: 'relative',
             display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            _web: {
-                borderBottomStyle: 'solid',
-            },
-        },
-        title: {
-            marginLeft: 24,
-            fontSize: 18,
-            paddingVertical: 16,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-            flex: 1,
-            _web: {
-                paddingVertical: 4,
-            },
+            flexDirection: 'column',
+            overflow: 'auto',
+            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+            transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+            transformOrigin: 'center center',
         },
-        closeButton: {
-            width: 32,
-            height: 32,
-            marginRight: 16,
-            borderRadius: 16,
-            backgroundColor: 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            _web: {
-                border: 'none',
-                cursor: 'pointer',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
+    });
+}
+
+function createHeaderStyles(theme: Theme) {
+    return () => ({
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border.primary,
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'space-between' as const,
+        _web: {
+            borderBottomStyle: 'solid',
         },
-        closeButtonText: {
-            fontSize: 18,
-            color: theme.colors.text.secondary,
-            fontWeight: '500',
+    });
+}
+
+function createTitleStyles(theme: Theme) {
+    return () => ({
+        marginLeft: 24,
+        fontSize: 18,
+        paddingVertical: 16,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        flex: 1,
+        _web: {
+            paddingVertical: 4,
         },
-        content: {
-            padding: 24,
-            _web: {
-                overflow: 'visible',
-                maxHeight: 'none',
+    });
+}
+
+function createCloseButtonStyles(theme: Theme) {
+    return () => ({
+        width: 32,
+        height: 32,
+        marginRight: 16,
+        borderRadius: 16,
+        backgroundColor: 'transparent' as const,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        _web: {
+            border: 'none',
+            cursor: 'pointer',
+            _hover: {
+                backgroundColor: theme.colors.surface.secondary,
             },
         },
-        modal: {
-            margin: 0,
-            justifyContent: 'center',
-            alignItems: 'center',
+    });
+}
+
+function createCloseButtonTextStyles(theme: Theme) {
+    return () => ({
+        fontSize: 18,
+        color: theme.colors.text.secondary,
+        fontWeight: '500' as const,
+    });
+}
+
+function createContentStyles() {
+    return () => ({
+        padding: 24,
+        _web: {
+            overflow: 'visible',
+            maxHeight: 'none',
         },
+    });
+}
+
+function createModalStyles() {
+    return () => ({
+        margin: 0,
+        justifyContent: 'center' as const,
+        alignItems: 'center' 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 dialogStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Dialog', theme, {
+        backdrop: createBackdropStyles(),
+        container: createDialogContainerStyles(theme),
+        header: createHeaderStyles(theme),
+        content: createContentStyles(),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        title: createTitleStyles(theme)(),
+        closeButton: createCloseButtonStyles(theme)(),
+        closeButtonText: createCloseButtonTextStyles(theme)(),
+        modal: createModalStyles()(),
     };
 });

package/src/Dialog/Dialog.web.tsx

@@ -133,20 +133,20 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   });
 
   const backdropProps = getWebProps([
-    dialogStyles.backdrop,
+    (dialogStyles.backdrop as any)({}),
     { opacity: isVisible ? 1 : 0 }
   ]);
   const containerProps = getWebProps([
-    dialogStyles.container,
+    (dialogStyles.container as any)({}),
     style as any,
     isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
   ]);
-  const headerProps = getWebProps([dialogStyles.header]);
+  const headerProps = getWebProps([(dialogStyles.header as any)({})]);
   const titleProps = getWebProps([dialogStyles.title]);
   const closeButtonProps = getWebProps([dialogStyles.closeButton]);
-  const contentProps = getWebProps([dialogStyles.content]);
+  const contentProps = getWebProps([(dialogStyles.content as any)({})]);
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);