@idealyst/components 1.1.6 → 1.1.8

package/src/Chip/Chip.styles.tsx

@@ -1,15 +1,31 @@
+/**
+ * Chip styles using defineStyle with dynamic size/intent/type/selected handling.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent} from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-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) => {
+export type ChipDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    type?: ChipType;
+    selected?: boolean;
+    disabled?: boolean;
+};
+
+/**
+ * Chip styles with size/intent/type/selected handling.
+ */
+export const chipStyles = defineStyle('Chip', (theme: Theme) => ({
+    container: ({ size = 'md', intent = 'primary', type = 'filled', selected = false, disabled = false }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
@@ -50,13 +66,12 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
         } as const;
     },
 
-    label: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    label: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
         // Compute color based on type and selected state
         let color: string;
-
         if (type === 'filled') {
             color = selected ? intentValue.primary : intentValue.contrast;
         } else if (type === 'outlined') {
@@ -66,7 +81,7 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
         }
 
         return {
-            fontFamily: 'inherit',
+            fontFamily: 'inherit' as const,
             fontWeight: '500' as const,
             fontSize: sizeValue.fontSize as number,
             lineHeight: sizeValue.lineHeight as number,
@@ -74,18 +89,17 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
         } as const;
     },
 
-    icon: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    icon: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
-        // Compute color based on type and selected state (same logic as label)
+        // Same color logic as label
         let color: string;
-
         if (type === 'filled') {
             color = selected ? intentValue.primary : intentValue.contrast;
         } else if (type === 'outlined') {
             color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
+        } else {
             color = selected ? theme.colors.text.inverse : intentValue.dark;
         }
 
@@ -99,7 +113,7 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
         } as const;
     },
 
-    deleteButton: (size: ChipSize) => {
+    deleteButton: ({ size = 'md' }: ChipDynamicProps) => {
         const sizeValue = theme.sizes.chip[size];
 
         return {
@@ -114,18 +128,17 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
         } as const;
     },
 
-    deleteIcon: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+    deleteIcon: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
         const intentValue = theme.intents[intent];
         const sizeValue = theme.sizes.chip[size];
 
-        // Compute color based on type and selected state (same logic as label/icon)
+        // Same color logic as label/icon
         let color: string;
-
         if (type === 'filled') {
             color = selected ? intentValue.primary : intentValue.contrast;
         } else if (type === 'outlined') {
             color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
+        } else {
             color = selected ? theme.colors.text.inverse : intentValue.dark;
         }
 
@@ -134,5 +147,4 @@ export const chipStyles = StyleSheet.create((theme: Theme) => {
             color,
         } as const;
     },
-  } as const;
-});
+}));

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,15 @@ const Dialog = forwardRef<View, DialogProps>(({
     };
   });
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const backdropStyle = (dialogStyles.backdrop as any)({});
+  const containerStyle = (dialogStyles.container as any)({});
+  const headerStyle = (dialogStyles.header as any)({});
+  const titleStyle = (dialogStyles.title as any)({});
+  const closeButtonStyle = (dialogStyles.closeButton as any)({});
+  const closeButtonTextStyle = (dialogStyles.closeButtonText as any)({});
+  const contentStyle = (dialogStyles.content as any)({});
+
   return (
     <Modal
       visible={open}
@@ -125,29 +134,29 @@ 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}>
+                    <Text style={titleStyle}>
                       {title}
                     </Text>
                   )}
                   {showCloseButton && (
                     <TouchableOpacity
-                      style={dialogStyles.closeButton}
+                      style={closeButtonStyle}
                       onPress={handleClosePress}
                       accessibilityLabel="Close dialog"
                       accessibilityRole="button"
                     >
-                      <Text style={dialogStyles.closeButtonText}>×</Text>
+                      <Text style={closeButtonTextStyle}>×</Text>
                     </TouchableOpacity>
                   )}
                 </View>
               )}
-              <View style={dialogStyles.content}>
+              <View style={contentStyle}>
                 {children}
               </View>
             </Animated.View>

package/src/Dialog/Dialog.styles.old.tsx

@@ -0,0 +1,202 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+type DialogType = 'default' | 'alert' | 'confirmation';
+
+type DialogVariants = {
+    size: DialogSize;
+    type: DialogType;
+}
+
+export type ExpandedDialogStyles = StylesheetStyles<keyof DialogVariants>;
+
+export type DialogStylesheet = {
+    backdrop: ExpandedDialogStyles;
+    container: ExpandedDialogStyles;
+    header: ExpandedDialogStyles;
+    title: ExpandedDialogStyles;
+    closeButton: ExpandedDialogStyles;
+    closeButtonText: ExpandedDialogStyles;
+    content: ExpandedDialogStyles;
+    modal: ExpandedDialogStyles;
+}
+
+/**
+ * Create size variants for container
+ */
+function createContainerSizeVariants() {
+    return {
+        sm: {
+            width: '90%',
+            maxWidth: 400,
+        },
+        md: {
+            width: '90%',
+            maxWidth: 600,
+        },
+        lg: {
+            width: '90%',
+            maxWidth: 800,
+        },
+        fullscreen: {
+            width: '100%',
+            height: '100%',
+            borderRadius: 0,
+            maxHeight: '100%',
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        alert: {
+            borderTopWidth: 4,
+            borderTopColor: theme.colors.border.primary,
+        },
+        confirmation: {
+            borderTopWidth: 4,
+            borderTopColor: theme.colors.border.primary,
+        },
+    } as const;
+}
+
+// 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',
+        },
+    });
+}
+
+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),
+        },
+        _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 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',
+        },
+    });
+}
+
+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,
+        },
+    });
+}
+
+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,
+            },
+        },
+    });
+}
+
+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
+
+    return applyExtensions('Dialog', theme, {backdrop: createBackdropStyles(),
+        container: createDialogContainerStyles(theme),
+        header: createHeaderStyles(theme),
+        content: createContentStyles(),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        title: createTitleStyles(theme)(),
+        closeButton: createCloseButtonStyles(theme)(),
+        closeButtonText: createCloseButtonTextStyles(theme)(),
+        modal: createModalStyles()()});
+});

package/src/Dialog/Dialog.styles.tsx

@@ -1,89 +1,61 @@
+/**
+ * Dialog styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
-type DialogType = 'default' | 'alert' | 'confirmation';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 
-type DialogVariants = {
-    size: DialogSize;
-    type: DialogType;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedDialogStyles = StylesheetStyles<keyof DialogVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type DialogStylesheet = {
-    backdrop: ExpandedDialogStyles;
-    container: ExpandedDialogStyles;
-    header: ExpandedDialogStyles;
-    title: ExpandedDialogStyles;
-    closeButton: ExpandedDialogStyles;
-    closeButtonText: ExpandedDialogStyles;
-    content: ExpandedDialogStyles;
-    modal: ExpandedDialogStyles;
-}
+type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+type DialogType = 'default' | 'alert' | 'confirmation';
 
-/**
- * Create size variants for container
- */
-function createContainerSizeVariants() {
-    return {
-        sm: {
-            width: '90%',
-            maxWidth: 400,
-        },
-        md: {
-            width: '90%',
-            maxWidth: 600,
-        },
-        lg: {
-            width: '90%',
-            maxWidth: 800,
-        },
-        fullscreen: {
-            width: '100%',
-            height: '100%',
-            borderRadius: 0,
-            maxHeight: '100%',
-        },
-    } as const;
-}
+export type DialogDynamicProps = {
+    size?: DialogSize;
+    type?: DialogType;
+};
 
 /**
- * Create type variants for container
+ * Dialog styles with size/type handling.
  */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {},
-        alert: {
-            borderTopWidth: 4,
-            borderTopColor: theme.colors.border.primary,
+export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
+    backdrop: (_props: DialogDynamicProps) => ({
+        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',
         },
-        confirmation: {
+    }),
+
+    container: ({ size = 'md', type = 'default' }: DialogDynamicProps) => {
+        // Size dimensions
+        const sizeStyles = {
+            sm: { width: '90%', maxWidth: 400 },
+            md: { width: '90%', maxWidth: 600 },
+            lg: { width: '90%', maxWidth: 800 },
+            fullscreen: { width: '100%', height: '100%', borderRadius: 0, maxHeight: '100%' },
+        }[size];
+
+        // Type-specific styles
+        const typeStyles = type !== 'default' ? {
             borderTopWidth: 4,
             borderTopColor: theme.colors.border.primary,
-        },
-    } 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',
-            },
-        },
-        container: {
+        return {
             backgroundColor: theme.colors.surface.primary,
             borderRadius: 12,
             shadowColor: '#000',
@@ -92,10 +64,8 @@ export const dialogStyles = StyleSheet.create((theme: Theme) => {
             shadowRadius: 20,
             elevation: 10,
             maxHeight: '90%',
-            variants: {
-                size: createContainerSizeVariants(),
-                type: createContainerTypeVariants(theme),
-            },
+            ...sizeStyles,
+            ...typeStyles,
             _web: {
                 position: 'relative',
                 display: 'flex',
@@ -105,62 +75,68 @@ export const dialogStyles = StyleSheet.create((theme: Theme) => {
                 transition: 'opacity 150ms ease-out, transform 150ms ease-out',
                 transformOrigin: 'center center',
             },
+        } as const;
+    },
+
+    header: (_props: DialogDynamicProps) => ({
+        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',
         },
-        header: {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border.primary,
-            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,
-            },
-        },
-        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,
-                },
-            },
-        },
-        closeButtonText: {
-            fontSize: 18,
-            color: theme.colors.text.secondary,
-            fontWeight: '500',
+    }),
+
+    title: (_props: DialogDynamicProps) => ({
+        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',
+    }),
+
+    closeButton: (_props: DialogDynamicProps) => ({
+        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',
+    }),
+
+    closeButtonText: (_props: DialogDynamicProps) => ({
+        fontSize: 18,
+        color: theme.colors.text.secondary,
+        fontWeight: '500' as const,
+    }),
+
+    content: (_props: DialogDynamicProps) => ({
+        padding: 24,
+        _web: {
+            overflow: 'visible',
+            maxHeight: 'none',
         },
-    };
-});
+    }),
+
+    modal: (_props: DialogDynamicProps) => ({
+        margin: 0,
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+    }),
+}));