@idealyst/components 1.1.6 → 1.1.8

package/src/Select/Select.styles.tsx

@@ -1,339 +1,290 @@
+/**
+ * Select styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { SelectIntentVariant } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-// Type definitions
-type SelectSize = Size;
-type SelectType = 'outlined' | 'filled';
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type SelectTriggerVariants = {
-    type: SelectType;
-    size: SelectSize;
-    intent: SelectIntentVariant;
-    disabled: boolean;
-    error: boolean;
-    focused: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
+type SelectType = 'outlined' | 'filled';
 
-export type ExpandedSelectTriggerStyles = StylesheetStyles<keyof SelectTriggerVariants>;
-export type ExpandedSelectStyles = StylesheetStyles<never>;
+export type SelectDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    type?: SelectType;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
-function createTriggerTypeVariants(theme: Theme) {
-    return {
-        outlined: {
-            backgroundColor: theme.colors.surface.primary,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
+/**
+ * Select styles with type/intent/error/focused handling.
+ */
+export const selectStyles = defineStyle('Select', (theme: Theme) => ({
+    container: (_props: SelectDynamicProps) => ({
+        position: 'relative' as const,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
             },
-        },
-        filled: {
-            backgroundColor: theme.colors.surface.secondary,
-            borderColor: 'transparent',
-            _web: {
-                border: '1px solid transparent',
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    } as const;
-}
+    }),
 
-function createTriggerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'select', (size) => ({
-        paddingHorizontal: size.paddingHorizontal,
-        minHeight: size.minHeight,
-    }));
-}
+    label: (_props: SelectDynamicProps) => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        marginBottom: 4,
+    }),
 
-function createIntentVariants(theme: Theme, type: SelectType, intent: SelectIntentVariant) {
-    if (intent === 'neutral') {
-        return {};
-    }
+    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const primaryIntent = theme.intents.primary;
+        const errorColor = theme.intents.error.primary;
 
-    const intentValue = (theme.intents as any)[intent];
+        // Background based on type
+        const backgroundColor = type === 'filled'
+            ? theme.colors.surface.secondary
+            : theme.colors.surface.primary;
 
-    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);
+        // Border color based on state
+        let borderColor = type === 'filled' ? 'transparent' : theme.colors.border.primary;
+        if (error) {
+            borderColor = errorColor;
+        } else if (focused) {
+            borderColor = primaryIntent.primary;
+        } else if (intent !== 'neutral') {
+            borderColor = intentValue.primary;
+        }
 
         return {
-            position: 'relative',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            position: 'relative' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'space-between' as const,
             borderRadius: 8,
             borderWidth: 1,
-            borderStyle: 'solid',
-            ...intentStyles,
+            borderStyle: 'solid' as const,
+            backgroundColor,
+            borderColor,
+            opacity: disabled ? 0.6 : 1,
             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: `1px solid ${theme.intents.primary.primary}`,
-                            boxShadow: `0 0 0 2px ${theme.intents.primary.primary}20`,
-                            outline: 'none',
-                        },
-                    },
-                    false: {},
+                size: {
+                    paddingHorizontal: theme.sizes.$select.paddingHorizontal,
+                    minHeight: theme.sizes.$select.minHeight,
                 },
             },
             _web: {
                 display: 'flex',
                 boxSizing: 'border-box',
-                _focus: {
-                    outline: 'none',
-                },
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                border: `1px solid ${borderColor}`,
+                boxShadow: focused ? `0 0 0 2px ${primaryIntent.primary}20` : 'none',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                _hover: disabled ? {} : { opacity: 0.9 },
+                _active: disabled ? {} : { opacity: 0.8 },
+                _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',
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
-        },
-        label: {
-            fontSize: 14,
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            marginBottom: 4,
-        },
-        trigger: buildDynamicTriggerStyles(theme),
-        triggerContent: {
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-        triggerText: {
-            color: theme.colors.text.primary,
-            flex: 1,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
+    triggerContent: (_props: SelectDynamicProps) => ({
+        flex: 1,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+    }),
+
+    triggerText: (_props: SelectDynamicProps) => ({
+        color: theme.colors.text.primary,
+        flex: 1,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$select.fontSize,
             },
         },
-        placeholder: {
-            color: theme.colors.text.secondary,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
+    }),
+
+    placeholder: (_props: SelectDynamicProps) => ({
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$select.fontSize,
             },
         },
-        icon: {
-            marginLeft: 4,
-            color: theme.colors.text.secondary,
-        },
-        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',
+    }),
+
+    icon: (_props: SelectDynamicProps) => ({
+        marginLeft: 4,
+        color: theme.colors.text.secondary,
+    }),
+
+    chevron: (_props: SelectDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 4,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                width: theme.sizes.$select.iconSize,
+                height: theme.sizes.$select.iconSize,
             },
         },
-        chevronOpen: {
-            _web: {
-                transform: 'rotate(180deg)',
-            }
+        _web: {
+            transition: 'transform 0.2s ease',
         },
-        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,
-            borderBottomStyle: 'solid',
-            borderBottomColor: theme.colors.border.primary,
-            _web: {
-                borderBottom: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        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,
-                },
-            },
+    }),
+
+    chevronOpen: (_props: SelectDynamicProps) => ({
+        _web: {
+            transform: 'rotate(180deg)',
         },
-        optionsList: {
-            paddingVertical: 4,
+    }),
+
+    dropdown: (_props: SelectDynamicProps) => ({
+        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',
         },
-        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,
-                },
-            },
+    }),
+
+    searchContainer: (_props: SelectDynamicProps) => ({
+        padding: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border.primary,
+        _web: {
+            borderBottom: `1px solid ${theme.colors.border.primary}`,
         },
-        optionFocused: {
-            backgroundColor: theme.interaction.focusedBackground,
-            _web: {
-                outline: `1px solid ${theme.interaction.focusBorder}`,
-                outlineOffset: -1,
+    }),
+
+    searchInput: (_props: SelectDynamicProps) => ({
+        padding: 4,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        backgroundColor: theme.colors.surface.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$select.fontSize,
             },
         },
-        optionDisabled: {
-            opacity: theme.interaction.opacity.disabled,
-            _web: {
-                cursor: 'not-allowed',
+        _web: {
+            border: `1px solid ${theme.colors.border.primary}`,
+            outline: 'none',
+            _focus: {
+                borderColor: theme.intents.primary.primary,
             },
         },
-        optionContent: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-        },
-        optionIcon: {
-            marginRight: 4,
+    }),
+
+    optionsList: (_props: SelectDynamicProps) => ({
+        paddingVertical: 4,
+    }),
+
+    option: ({ disabled = false }: SelectDynamicProps) => ({
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        minHeight: 36,
+        opacity: disabled ? theme.interaction.opacity.disabled : 1,
+        _web: {
+            display: 'flex',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            _hover: disabled ? {} : { backgroundColor: theme.colors.surface.secondary },
+            _active: disabled ? {} : { opacity: 0.8 },
         },
-        optionText: {
-            color: theme.colors.text.primary,
-            flex: 1,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
-            },
+    }),
+
+    optionFocused: (_props: SelectDynamicProps) => ({
+        backgroundColor: theme.interaction.focusedBackground,
+        _web: {
+            outline: `1px solid ${theme.interaction.focusBorder}`,
+            outlineOffset: -1,
         },
-        optionTextDisabled: {
-            color: theme.colors.text.secondary,
+    }),
+
+    optionDisabled: (_props: SelectDynamicProps) => ({
+        opacity: theme.interaction.opacity.disabled,
+        _web: {
+            cursor: 'not-allowed',
         },
-        helperText: {
-            fontSize: 12,
-            marginTop: 4,
-            color: theme.colors.text.secondary,
-            variants: {
-                error: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
+    }),
+
+    optionContent: (_props: SelectDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        flex: 1,
+    }),
+
+    optionIcon: (_props: SelectDynamicProps) => ({
+        marginRight: 4,
+    }),
+
+    optionText: (_props: SelectDynamicProps) => ({
+        color: theme.colors.text.primary,
+        flex: 1,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$select.fontSize,
             },
         },
-        overlay: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 999,
-            _web: {
-                position: 'fixed',
-            },
+    }),
+
+    optionTextDisabled: (_props: SelectDynamicProps) => ({
+        color: theme.colors.text.secondary,
+    }),
+
+    helperText: ({ error = false }: SelectDynamicProps) => ({
+        fontSize: 12,
+        marginTop: 4,
+        color: error ? theme.intents.error.primary : theme.colors.text.secondary,
+    }),
+
+    overlay: (_props: SelectDynamicProps) => ({
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 999,
+        _web: {
+            position: 'fixed',
         },
-    } as const;
-});
+    }),
+}));

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>