@idealyst/components 1.0.83 → 1.0.84

package/src/Select/Select.styles.tsx

@@ -1,325 +1,335 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { SelectIntentVariant } from './types';
 
-export const selectStyles = StyleSheet.create((theme) => ({
-  container: {
-    position: 'relative',
-  },
+// Type definitions
+type SelectSize = Size;
+type SelectType = 'outlined' | 'filled';
 
-  label: {
-    fontSize: theme.typography?.sm?.fontSize || 14,
-    fontWeight: theme.typography?.sm?.fontWeight || '500',
-    color: theme.colors?.text?.primary || theme.palettes?.gray?.[700] || '#374151',
-    marginBottom: theme.spacing?.xs || 4,
-  },
+type SelectTriggerVariants = {
+    type: SelectType;
+    size: SelectSize;
+    intent: SelectIntentVariant;
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+}
 
-  trigger: {
-    position: 'relative',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: theme.spacing?.sm || 12,
-    borderRadius: theme.borderRadius?.md || 8,
-    borderWidth: 1,
-    minHeight: 44,
-    cursor: 'pointer',
 
-    variants: {
-      variant: {
+export type ExpandedSelectTriggerStyles = StylesheetStyles<keyof SelectTriggerVariants>;
+export type ExpandedSelectStyles = StylesheetStyles<never>;
+
+function createTriggerTypeVariants(theme: Theme) {
+    return {
         outlined: {
-          backgroundColor: 'transparent',
-          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
-          _web: {
-            border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-          },
+            backgroundColor: theme.colors.surface.primary,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
         },
         filled: {
-          backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
-          borderColor: 'transparent',
-          _web: {
-            border: '1px solid transparent',
-          },
+            backgroundColor: theme.colors.surface.secondary,
+            borderColor: 'transparent',
+            _web: {
+                border: '1px solid transparent',
+            },
         },
-      },
-      size: {
-        small: {
-          paddingHorizontal: theme.spacing?.xs || 8,
-          minHeight: 36,
+    } as const;
+}
+
+function createTriggerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'select', (size) => ({
+        paddingHorizontal: size.paddingHorizontal,
+        minHeight: size.minHeight,
+    }));
+}
+
+function createIntentVariants(theme: Theme, type: SelectType, intent: SelectIntentVariant) {
+    if (intent === 'neutral') {
+        return {};
+    }
+
+    const intentValue = (theme.intents as any)[intent];
+
+    if (type === 'outlined') {
+        return {
+            borderColor: intentValue.primary,
+            _web: {
+                border: `1px solid ${intentValue.primary}`,
+            },
+        } as const;
+    }
+
+    return {} as const;
+}
+
+function buildDynamicTriggerStyles(theme: Theme) {
+    return ({ type, intent }: Partial<SelectTriggerVariants>) => {
+        const intentStyles = createIntentVariants(theme, type, intent);
+
+        return {
+            position: 'relative',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            ...intentStyles,
+            variants: {
+                type: createTriggerTypeVariants(theme),
+                size: createTriggerSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.6,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.9,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+                error: {
+                    true: {
+                        borderColor: theme.intents.error.primary,
+                        _web: {
+                            border: `1px solid ${theme.intents.error.primary}`,
+                        },
+                    },
+                    false: {},
+                },
+                focused: {
+                    true: {
+                        borderColor: theme.intents.primary.primary,
+                        _web: {
+                            border: `2px solid ${theme.intents.primary.primary}`,
+                            outline: 'none',
+                        },
+                    },
+                    false: {},
+                },
+            },
+            _web: {
+                display: 'flex',
+                boxSizing: 'border-box',
+                _focus: {
+                    outline: 'none',
+                },
+            },
+        } 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 selectStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            position: 'relative',
+            backgroundColor: theme.colors.surface.primary,
         },
-        medium: {
-          paddingHorizontal: theme.spacing?.sm || 12,
-          minHeight: 44,
+        label: {
+            fontSize: 14,
+            fontWeight: '500',
+            color: theme.colors.text.primary,
+            marginBottom: 4,
         },
-        large: {
-          paddingHorizontal: theme.spacing?.md || 16,
-          minHeight: 52,
+        trigger: buildDynamicTriggerStyles(theme),
+        triggerContent: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
         },
-      },
-      intent: {
-        neutral: {},
-        primary: {},
-        success: {},
-        error: {},
-        warning: {},
-        info: {},
-      },
-      disabled: {
-        true: {
-          opacity: 0.6,
-          cursor: 'not-allowed',
+        triggerText: {
+            color: theme.colors.text.primary,
+            flex: 1,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
         },
-        false: {},
-      },
-      error: {
-        true: {
-          borderColor: theme.intents?.error?.main || '#ef4444',
-          _web: {
-            border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
-          },
+        placeholder: {
+            color: theme.colors.text.secondary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
         },
-        false: {},
-      },
-      focused: {
-        true: {
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          _web: {
-            border: `2px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
-            outline: 'none',
-          },
+        icon: {
+            marginLeft: 4,
+            color: theme.colors.text.secondary,
         },
-        false: {},
-      },
-    },
-
-    compoundVariants: [
-      {
-        variant: 'outlined',
-        intent: 'primary',
-        styles: {
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          _web: {
-            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
+        chevron: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: 4,
+            color: theme.colors.text.secondary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+            },
+            _web: {
+                transition: 'transform 0.2s ease',
+            },
         },
-      },
-      {
-        variant: 'outlined',
-        intent: 'success',
-        styles: {
-          borderColor: theme.intents?.success?.main || '#22c55e',
-          _web: {
-            border: `1px solid ${theme.intents?.success?.main || '#22c55e'}`,
-          },
+        chevronOpen: {
+            _web: {
+                transform: 'rotate(180deg)',
+            }
         },
-      },
-      {
-        variant: 'outlined',
-        intent: 'error',
-        styles: {
-          borderColor: theme.intents?.error?.main || '#ef4444',
-          _web: {
-            border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
-          },
+        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',
+            },
         },
-      },
-      {
-        variant: 'outlined',
-        intent: 'warning',
-        styles: {
-          borderColor: theme.intents?.warning?.main || '#f59e0b',
-          _web: {
-            border: `1px solid ${theme.intents?.warning?.main || '#f59e0b'}`,
-          },
+        searchContainer: {
+            padding: 8,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+            },
         },
-      },
-      {
-        variant: 'outlined',
-        intent: 'info',
-        styles: {
-          borderColor: theme.intents?.info?.main || '#06b6d4',
-          _web: {
-            border: `1px solid ${theme.intents?.info?.main || '#06b6d4'}`,
-          },
+        searchInput: {
+            padding: 4,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+                outline: 'none',
+                _focus: {
+                    borderColor: theme.intents.primary.primary,
+                },
+            },
         },
-      },
-    ],
-
-    _web: {
-      display: 'flex',
-      boxSizing: 'border-box',
-      _focus: {
-        outline: 'none',
-      },
-      _hover: {
-        borderColor: theme.intents?.primary?.main || '#3b82f6',
-      },
-    },
-  },
-
-  triggerContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  triggerText: {
-    fontSize: theme.typography?.base?.fontSize || 16,
-    color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
-    flex: 1,
-  },
-
-  placeholder: {
-    fontSize: theme.typography?.base?.fontSize || 16,
-    color: theme.colors?.text?.disabled || theme.palettes?.gray?.[500] || '#6b7280',
-  },
-
-  icon: {
-    marginLeft: theme.spacing?.xs || 4,
-    color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
-  },
-
-  chevron: {
-    marginLeft: theme.spacing?.xs || 4,
-    color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
-    transition: 'transform 0.2s ease',
-  },
-
-  chevronOpen: {
-    transform: 'rotate(180deg)',
-  },
-
-  dropdown: {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    borderRadius: theme.borderRadius?.md || 8,
-    borderWidth: 1,
-    borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
-    shadowColor: theme.shadows?.lg?.shadowColor || '#000',
-    shadowOffset: theme.shadows?.lg?.shadowOffset || { width: 0, height: 8 },
-    shadowOpacity: theme.shadows?.lg?.shadowOpacity || 0.15,
-    shadowRadius: theme.shadows?.lg?.shadowRadius || 12,
-    elevation: theme.shadows?.lg?.elevation || 8,
-    zIndex: 9999, // Higher z-index to float above other content
-    maxHeight: 240,
-    overflow: 'hidden',
-
-    _web: {
-      border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
-      boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
-      overflowY: 'auto',
-    },
-  },
-
-  searchContainer: {
-    padding: theme.spacing?.sm || 12,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
-
-    _web: {
-      borderBottom: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
-    },
-  },
-
-  searchInput: {
-    padding: theme.spacing?.xs || 8,
-    borderRadius: theme.borderRadius?.sm || 4,
-    borderWidth: 1,
-    borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
-    fontSize: theme.typography?.sm?.fontSize || 14,
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-
-    _web: {
-      border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
-      outline: 'none',
-      _focus: {
-        borderColor: theme.intents?.primary?.main || '#3b82f6',
-      },
-    },
-  },
-
-  optionsList: {
-    paddingVertical: theme.spacing?.xs || 4,
-  },
-
-  option: {
-    paddingHorizontal: theme.spacing?.sm || 12,
-    paddingVertical: theme.spacing?.sm || 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-    cursor: 'pointer',
-    minHeight: 44,
-
-    variants: {
-      selected: {
-        true: {
-          backgroundColor: theme.intents?.primary?.container || theme.palettes?.blue?.[50] || '#eff6ff',
+        optionsList: {
+            paddingVertical: 4,
         },
-        false: {},
-      },
-      disabled: {
-        true: {
-          opacity: 0.5,
-          cursor: 'not-allowed',
+        option: {
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: 36,
+            variants: {
+                selected: {
+                    true: {
+                        backgroundColor: theme.intents.primary.light,
+                    },
+                    false: {},
+                },
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                backgroundColor: theme.colors.surface.secondary,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+            },
+            _web: {
+                display: 'flex',
+            },
         },
-        false: {},
-      },
-    },
-
-    _web: {
-      display: 'flex',
-      _hover: {
-        backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
-      },
-    },
-  },
-
-  optionContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-
-  optionIcon: {
-    marginRight: theme.spacing?.xs || 8,
-  },
-
-  optionText: {
-    fontSize: theme.typography?.base?.fontSize || 16,
-    color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
-    flex: 1,
-  },
-
-  optionTextDisabled: {
-    color: theme.colors?.text?.disabled || theme.palettes?.gray?.[500] || '#6b7280',
-  },
-
-  helperText: {
-    fontSize: theme.typography?.xs?.fontSize || 12,
-    marginTop: theme.spacing?.xs || 4,
-    color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
-
-    variants: {
-      error: {
-        true: {
-          color: theme.intents?.error?.main || '#ef4444',
+        optionContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
         },
-        false: {},
-      },
-    },
-  },
-
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999,
-
-    _web: {
-      position: 'fixed',
-    },
-  },
-}));
+        optionIcon: {
+            marginRight: 4,
+        },
+        optionText: {
+            color: theme.colors.text.primary,
+            flex: 1,
+            variants: {
+                size: buildSizeVariants(theme, 'select', (size: any) => ({
+                    fontSize: size.fontSize,
+                })),
+            },
+        },
+        optionTextDisabled: {
+            color: theme.colors.text.secondary,
+        },
+        helperText: {
+            fontSize: 12,
+            marginTop: 4,
+            color: theme.colors.text.secondary,
+            variants: {
+                error: {
+                    true: {
+                        color: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+            },
+        },
+        overlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+            _web: {
+                position: 'fixed',
+            },
+        },
+    } as const;
+});