@idealyst/components 1.1.7 → 1.1.9

package/src/Dialog/Dialog.styles.tsx

@@ -1,73 +1,29 @@
+/**
+ * Dialog styles using defineStyle with dynamic props.
+ */
 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';
+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,
-        },
-        confirmation: {
-            borderTopWidth: 4,
-            borderTopColor: theme.colors.border.primary,
-        },
-    } as const;
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createBackdropStyles() {
-    return () => ({
+export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
+    backdrop: (_props: DialogDynamicProps) => ({
         position: 'absolute' as const,
         top: 0,
         left: 0,
@@ -82,37 +38,47 @@ function createBackdropStyles() {
             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',
-        },
-    });
-}
+    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];
 
-function createHeaderStyles(theme: Theme) {
-    return () => ({
+        // Type-specific styles
+        const typeStyles = type !== 'default' ? {
+            borderTopWidth: 4,
+            borderTopColor: theme.colors.border.primary,
+        } : {};
+
+        return {
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 12,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 10 },
+            shadowOpacity: 0.25,
+            shadowRadius: 20,
+            elevation: 10,
+            maxHeight: '90%',
+            ...sizeStyles,
+            ...typeStyles,
+            _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',
+            },
+        } as const;
+    },
+
+    header: (_props: DialogDynamicProps) => ({
         borderBottomWidth: 1,
         borderBottomColor: theme.colors.border.primary,
         display: 'flex' as const,
@@ -122,11 +88,9 @@ function createHeaderStyles(theme: Theme) {
         _web: {
             borderBottomStyle: 'solid',
         },
-    });
-}
+    }),
 
-function createTitleStyles(theme: Theme) {
-    return () => ({
+    title: (_props: DialogDynamicProps) => ({
         marginLeft: 24,
         fontSize: 18,
         paddingVertical: 16,
@@ -136,11 +100,9 @@ function createTitleStyles(theme: Theme) {
         _web: {
             paddingVertical: 4,
         },
-    });
-}
+    }),
 
-function createCloseButtonStyles(theme: Theme) {
-    return () => ({
+    closeButton: (_props: DialogDynamicProps) => ({
         width: 32,
         height: 32,
         marginRight: 16,
@@ -156,51 +118,25 @@ function createCloseButtonStyles(theme: Theme) {
                 backgroundColor: theme.colors.surface.secondary,
             },
         },
-    });
-}
+    }),
 
-function createCloseButtonTextStyles(theme: Theme) {
-    return () => ({
+    closeButtonText: (_props: DialogDynamicProps) => ({
         fontSize: 18,
         color: theme.colors.text.secondary,
         fontWeight: '500' as const,
-    });
-}
+    }),
 
-function createContentStyles() {
-    return () => ({
+    content: (_props: DialogDynamicProps) => ({
         padding: 24,
         _web: {
             overflow: 'visible',
             maxHeight: 'none',
         },
-    });
-}
+    }),
 
-function createModalStyles() {
-    return () => ({
+    modal: (_props: DialogDynamicProps) => ({
         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

@@ -13,7 +13,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   title,
   children,
   size = 'md',
-  type = 'standard',
+  type = 'default',
   showCloseButton = true,
   closeOnBackdropClick = true,
   closeOnEscapeKey = true,
@@ -144,8 +144,8 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
   ]);
   const headerProps = getWebProps([(dialogStyles.header as any)({})]);
-  const titleProps = getWebProps([dialogStyles.title]);
-  const closeButtonProps = getWebProps([dialogStyles.closeButton]);
+  const titleProps = getWebProps([(dialogStyles.title as any)({})]);
+  const closeButtonProps = getWebProps([(dialogStyles.closeButton as any)({})]);
   const contentProps = getWebProps([(dialogStyles.content as any)({})]);
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);

package/src/Dialog/types.ts

@@ -5,7 +5,7 @@ import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
-export type DialogType = 'standard' | 'alert' | 'confirmation';
+export type DialogType = 'default' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
 export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {

package/src/Divider/Divider.styles.old.tsx

@@ -0,0 +1,172 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerThickness = 'thin' | 'md' | 'thick';
+type DividerType = 'solid' | 'dashed' | 'dotted';
+type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
+type DividerLength = 'full' | 'auto';
+type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+
+type DividerDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+    type?: DividerType;
+    intent?: DividerIntent;
+    spacing?: DividerSpacing;
+};
+
+type LineDynamicProps = {
+    orientation?: DividerOrientation;
+    thickness?: DividerThickness;
+};
+
+function getIntentColor(theme: Theme, intent: DividerIntent): string {
+    if (intent === 'secondary') return theme.colors.border.primary;
+    if (intent === 'neutral') return theme.colors.border.secondary;
+    if (intent === 'info') return theme.intents.primary.primary;
+    return theme.intents[intent as Intent].primary;
+}
+
+function getThicknessValue(thickness: DividerThickness): number {
+    switch (thickness) {
+        case 'thin': return 1;
+        case 'md': return 2;
+        case 'thick': return 4;
+        default: return 1;
+    }
+}
+
+function getSpacingValue(spacing: DividerSpacing): number {
+    switch (spacing) {
+        case 'none': return 0;
+        case 'sm': return 8;
+        case 'md': return 16;
+        case 'lg': return 24;
+        default: return 0;
+    }
+}
+
+/**
+ * Create dynamic divider styles
+ */
+function createDividerStyles(theme: Theme) {
+    return ({
+        orientation = 'horizontal',
+        thickness = 'thin',
+        type = 'solid',
+        intent = 'neutral',
+        spacing = 'md'
+    }: DividerDynamicProps) => {
+        const color = getIntentColor(theme, intent);
+        const thicknessValue = getThicknessValue(thickness);
+        const spacingValue = getSpacingValue(spacing);
+
+        const isHorizontal = orientation === 'horizontal';
+        const isDashedOrDotted = type === 'dashed' || type === 'dotted';
+
+        // Base dimension styles based on orientation and thickness
+        const dimensionStyles = isHorizontal
+            ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
+            : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
+
+        // Spacing styles based on orientation
+        const spacingStyles = isHorizontal
+            ? { marginVertical: spacingValue }
+            : { marginHorizontal: spacingValue };
+
+        // Web-specific border styles for dashed/dotted
+        const webBorderStyles = isDashedOrDotted ? {
+            border: 'none',
+            backgroundColor: 'transparent',
+            ...(isHorizontal
+                ? { borderTop: `${thicknessValue}px ${type} ${color}` }
+                : { borderLeft: `${thicknessValue}px ${type} ${color}` }
+            ),
+        } : {};
+
+        return {
+            backgroundColor: isDashedOrDotted ? 'transparent' : color,
+            ...dimensionStyles,
+            ...spacingStyles,
+            variants: {
+                length: {
+                    full: {},
+                    auto: {},
+                },
+            },
+            _web: webBorderStyles,
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic line styles (for dividers with content)
+ */
+function createLineStyles(theme: Theme) {
+    return ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
+        const thicknessValue = getThicknessValue(thickness);
+        const isHorizontal = orientation === 'horizontal';
+
+        return {
+            backgroundColor: theme.colors.border.secondary,
+            flex: 1,
+            ...(isHorizontal
+                ? { height: thicknessValue }
+                : { width: thicknessValue }
+            ),
+        } 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 dividerStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Divider', theme, {divider: createDividerStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        container: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            variants: {
+                orientation: {
+                    horizontal: {
+                        flexDirection: 'row',
+                        width: '100%',
+                    },
+                    vertical: {
+                        flexDirection: 'column',
+                        height: '100%',
+                    },
+                },
+                spacing: {
+                    none: { gap: 0 },
+                    xs: { gap: 4 },
+                    sm: { gap: 8 },
+                    md: { gap: 16 },
+                    lg: { gap: 24 },
+                    xl: { gap: 32 },
+                },
+            },
+        },
+        content: {
+            backgroundColor: theme.colors.surface.primary,
+            color: theme.colors.text.secondary,
+            fontSize: 14,
+            variants: {
+                orientation: {
+                    horizontal: {
+                        paddingHorizontal: 8,
+                    },
+                    vertical: {
+                        paddingVertical: 8,
+                    },
+                },
+            },
+        },
+        line: createLineStyles(theme)});
+});

package/src/Divider/Divider.styles.tsx

@@ -1,15 +1,24 @@
+/**
+ * Divider styles using defineStyle with dynamic functions.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } 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 DividerOrientation = 'horizontal' | 'vertical';
 type DividerThickness = 'thin' | 'md' | 'thick';
 type DividerType = 'solid' | 'dashed' | 'dotted';
 type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
-type DividerLength = 'full' | 'auto';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+type DividerLength = 'full' | 'auto';
 
-type DividerDynamicProps = {
+export type DividerDynamicProps = {
     orientation?: DividerOrientation;
     thickness?: DividerThickness;
     type?: DividerType;
@@ -17,18 +26,11 @@ type DividerDynamicProps = {
     spacing?: DividerSpacing;
 };
 
-type LineDynamicProps = {
+export type LineDynamicProps = {
     orientation?: DividerOrientation;
     thickness?: DividerThickness;
 };
 
-function getIntentColor(theme: Theme, intent: DividerIntent): string {
-    if (intent === 'secondary') return theme.colors.border.primary;
-    if (intent === 'neutral') return theme.colors.border.secondary;
-    if (intent === 'info') return theme.intents.primary.primary;
-    return theme.intents[intent as Intent].primary;
-}
-
 function getThicknessValue(thickness: DividerThickness): number {
     switch (thickness) {
         case 'thin': return 1;
@@ -49,34 +51,38 @@ function getSpacingValue(spacing: DividerSpacing): number {
 }
 
 /**
- * Create dynamic divider styles
+ * Divider styles with dynamic functions for orientation/thickness/intent combinations.
  */
-function createDividerStyles(theme: Theme) {
-    return ({
+export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
+    divider: ({
         orientation = 'horizontal',
         thickness = 'thin',
         type = 'solid',
         intent = 'neutral',
         spacing = 'md'
     }: DividerDynamicProps) => {
-        const color = getIntentColor(theme, intent);
         const thicknessValue = getThicknessValue(thickness);
         const spacingValue = getSpacingValue(spacing);
-
         const isHorizontal = orientation === 'horizontal';
         const isDashedOrDotted = type === 'dashed' || type === 'dotted';
 
-        // Base dimension styles based on orientation and thickness
+        // Get color based on intent - inline for Unistyles to trace
+        const color = intent === 'secondary'
+            ? theme.colors.border.primary
+            : intent === 'neutral'
+                ? theme.colors.border.secondary
+                : intent === 'info'
+                    ? theme.intents.primary.primary
+                    : theme.intents[intent as Intent].primary;
+
         const dimensionStyles = isHorizontal
             ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
             : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
 
-        // Spacing styles based on orientation
         const spacingStyles = isHorizontal
             ? { marginVertical: spacingValue }
             : { marginHorizontal: spacingValue };
 
-        // Web-specific border styles for dashed/dotted
         const webBorderStyles = isDashedOrDotted ? {
             border: 'none',
             backgroundColor: 'transparent',
@@ -98,14 +104,41 @@ function createDividerStyles(theme: Theme) {
             },
             _web: webBorderStyles,
         } as const;
-    };
-}
+    },
+
+    container: (_props: { orientation?: DividerOrientation; spacing?: DividerSpacing }) => ({
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        variants: {
+            orientation: {
+                horizontal: { flexDirection: 'row', width: '100%' },
+                vertical: { flexDirection: 'column', height: '100%' },
+            },
+            spacing: {
+                none: { gap: 0 },
+                xs: { gap: 4 },
+                sm: { gap: 8 },
+                md: { gap: 16 },
+                lg: { gap: 24 },
+                xl: { gap: 32 },
+            },
+        },
+    }),
+
+    content: (_props: { orientation?: DividerOrientation }) => ({
+        backgroundColor: theme.colors.surface.primary,
+        color: theme.colors.text.secondary,
+        fontSize: 14,
+        variants: {
+            orientation: {
+                horizontal: { paddingHorizontal: 8 },
+                vertical: { paddingVertical: 8 },
+            },
+        },
+    }),
 
-/**
- * Create dynamic line styles (for dividers with content)
- */
-function createLineStyles(theme: Theme) {
-    return ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
+    line: ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
         const thicknessValue = getThicknessValue(thickness);
         const isHorizontal = orientation === 'horizontal';
 
@@ -117,60 +150,5 @@ function createLineStyles(theme: Theme) {
                 : { width: thicknessValue }
             ),
         } 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 dividerStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Divider', theme, {
-        divider: createDividerStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        container: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            variants: {
-                orientation: {
-                    horizontal: {
-                        flexDirection: 'row',
-                        width: '100%',
-                    },
-                    vertical: {
-                        flexDirection: 'column',
-                        height: '100%',
-                    },
-                },
-                spacing: {
-                    none: { gap: 0 },
-                    xs: { gap: 4 },
-                    sm: { gap: 8 },
-                    md: { gap: 16 },
-                    lg: { gap: 24 },
-                    xl: { gap: 32 },
-                },
-            },
-        },
-        content: {
-            backgroundColor: theme.colors.surface.primary,
-            color: theme.colors.text.secondary,
-            fontSize: 14,
-            variants: {
-                orientation: {
-                    horizontal: {
-                        paddingHorizontal: 8,
-                    },
-                    vertical: {
-                        paddingVertical: 8,
-                    },
-                },
-            },
-        },
-        line: createLineStyles(theme),
-    };
-});
+    },
+}));