@idealyst/components 1.1.6 → 1.1.8

package/src/TextArea/TextArea.styles.tsx

@@ -1,106 +1,96 @@
+/**
+ * TextArea 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 { TextAreaIntentVariant } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-/**
- * Create size variants for textarea
- */
-function createTextareaSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'textarea', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-        lineHeight: size.lineHeight,
-        minHeight: size.minHeight,
-    }));
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type ResizeMode = 'none' | 'vertical' | 'horizontal' | 'both';
+
+export type TextAreaDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    disabled?: boolean;
+    hasError?: boolean;
+    resize?: ResizeMode;
+    isNearLimit?: boolean;
+    isAtLimit?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Get textarea styles based on intent, disabled, and hasError state
+ * TextArea styles with intent/disabled/error handling.
  */
-function getTextareaIntentStyles(theme: Theme, intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean) {
-    if (disabled || hasError) {
-        return {} as const;
-    }
+export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
+    container: (_props: TextAreaDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
 
-    const intentValue = theme.intents[intent];
-    const baseStyles: any = {};
+    label: ({ disabled = false }: TextAreaDynamicProps) => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        opacity: disabled ? 0.5 : 1,
+    }),
 
-    // For success and warning, set border color
-    if (intent === 'success' || intent === 'warning') {
-        baseStyles.borderColor = intentValue.primary;
-    }
+    textareaContainer: (_props: TextAreaDynamicProps) => ({
+        position: 'relative' as const,
+    }),
 
-    // Focus styles for all intents when not disabled and not in error
-    baseStyles._web = {
-        _focus: {
-            borderColor: intentValue.primary,
-            boxShadow: `0 0 0 2px ${intentValue.primary}33`,
-        },
-    };
+    textarea: ({ intent = 'primary', disabled = false, hasError = false, resize = 'none' }: TextAreaDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const errorColor = theme.intents.error.primary;
 
-    return baseStyles;
-}
+        // Get border color based on state
+        let borderColor = theme.colors.border.primary;
+        if (hasError) {
+            borderColor = errorColor;
+        } else if (intent === 'success' || intent === 'warning') {
+            borderColor = intentValue.primary;
+        }
 
-const createTextareaStyles = (theme: Theme) => {
-    return ({ intent, disabled, hasError }: { intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean }) => {
-        const intentStyles = getTextareaIntentStyles(theme, intent, disabled, hasError);
+        // Get web-specific styles
+        const webFocusStyles = hasError
+            ? { borderColor: errorColor, boxShadow: `0 0 0 2px ${errorColor}33` }
+            : { borderColor: intentValue.primary, boxShadow: `0 0 0 2px ${intentValue.primary}33` };
 
         return {
             width: '100%',
             color: theme.colors.text.primary,
-            backgroundColor: theme.colors.surface.primary,
+            backgroundColor: disabled ? theme.colors.surface.secondary : theme.colors.surface.primary,
             borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
+            borderStyle: 'solid' as const,
+            borderColor,
             borderRadius: 8,
-            lineHeight: 'normal',
-            ...intentStyles,
+            opacity: disabled ? 0.5 : 1,
             variants: {
-                size: createTextareaSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        backgroundColor: theme.colors.surface.secondary,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-                hasError: {
-                    true: {
-                        borderColor: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
-                resize: {
-                    none: {
-                        _web: {
-                            resize: 'none',
-                        },
-                    },
-                    vertical: {
-                        _web: {
-                            resize: 'vertical',
-                        },
-                    },
-                    horizontal: {
-                        _web: {
-                            resize: 'horizontal',
-                        },
-                    },
-                    both: {
-                        _web: {
-                            resize: 'both',
-                        },
-                    },
+                size: {
+                    fontSize: theme.sizes.$textarea.fontSize,
+                    padding: theme.sizes.$textarea.padding,
+                    lineHeight: theme.sizes.$textarea.lineHeight,
+                    minHeight: theme.sizes.$textarea.minHeight,
                 },
             },
             _web: {
@@ -109,78 +99,32 @@ const createTextareaStyles = (theme: Theme) => {
                 transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
                 boxSizing: 'border-box',
                 overflowY: 'hidden',
+                cursor: disabled ? 'not-allowed' : 'text',
+                resize: resize,
+                _focus: disabled ? {} : webFocusStyles,
             },
         } 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 textAreaStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
-        },
-        label: {
-            fontSize: 14,
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            variants: {
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                    },
-                    false: {},
-                },
-            },
-        },
-        textareaContainer: {
-            position: 'relative',
-        },
-        textarea: createTextareaStyles(theme),
-        helperText: {
-            fontSize: 12,
-            color: theme.colors.text.secondary,
-            variants: {
-                hasError: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
-            },
-        },
-        footer: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            gap: 4,
-        },
-        characterCount: {
-            fontSize: 12,
-            color: theme.colors.text.secondary,
-            variants: {
-                isNearLimit: {
-                    true: {
-                        color: theme.intents.warning.primary,
-                    },
-                    false: {},
-                },
-                isAtLimit: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
-            },
-        },
-    };
-});
+    helperText: ({ hasError = false }: TextAreaDynamicProps) => ({
+        fontSize: 12,
+        color: hasError ? theme.intents.error.primary : theme.colors.text.secondary,
+    }),
+
+    footer: (_props: TextAreaDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    }),
+
+    characterCount: ({ isNearLimit = false, isAtLimit = false }: TextAreaDynamicProps) => ({
+        fontSize: 12,
+        color: isAtLimit
+            ? theme.intents.error.primary
+            : isNearLimit
+                ? theme.intents.warning.primary
+                : theme.colors.text.secondary,
+    }),
+}));

package/src/Tooltip/Tooltip.native.tsx

@@ -159,14 +159,14 @@ const Tooltip = forwardRef<View, TooltipProps>(({
           <Pressable style={{ flex: 1 }} onPress={() => setVisible(false)}>
             <View
               style={[
-                tooltipStyles.tooltip,
+                (tooltipStyles.tooltip as any)({}),
                 { position: 'absolute' },
                 getPositionStyle(),
               ]}
               pointerEvents="none"
             >
               {typeof content === 'string' ? (
-                <Text style={tooltipStyles.tooltip}>{content}</Text>
+                <Text style={(tooltipStyles.tooltip as any)({})}>{content}</Text>
               ) : (
                 content
               )}

package/src/Tooltip/Tooltip.styles.old.tsx

@@ -0,0 +1,82 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type TooltipSize = Size;
+type TooltipIntent = Intent;
+
+type TooltipTooltipVariants = {
+    size: TooltipSize;
+    intent: TooltipIntent;
+}
+
+export type ExpandedTooltipTooltipStyles = StylesheetStyles<keyof TooltipTooltipVariants>;
+export type ExpandedTooltipStyles = StylesheetStyles<never>;
+
+export type TooltipStylesheet = {
+    container: ExpandedTooltipStyles;
+    tooltip: ExpandedTooltipTooltipStyles;
+}
+
+function createTooltipSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'tooltip', (size) => ({
+        fontSize: size.fontSize,
+        padding: size.padding,
+    }));
+}
+
+function createTooltipIntentVariants(theme: Theme) {
+    const intents: Record<string, any> = {};
+
+    for (const [intentName, intentValue] of Object.entries(theme.intents)) {
+        intents[intentName] = {
+            backgroundColor: intentValue.primary,
+            color: intentValue.contrast,
+        };
+    }
+
+    return intents;
+}
+
+// Style creators for extension support
+function createContainerStyles() {
+    return () => ({
+        position: 'relative' as const,
+        _web: {
+            display: 'inline-flex',
+            width: 'fit-content',
+        },
+    });
+}
+
+function createTooltipStyles(theme: Theme) {
+    return () => ({
+        borderRadius: 8,
+        maxWidth: 300,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 4,
+        variants: {
+            size: createTooltipSizeVariants(theme),
+            intent: createTooltipIntentVariants(theme),
+        },
+        _web: {
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            pointerEvents: 'none',
+            width: 'max-content',
+            wordWrap: 'break-word',
+        },
+    });
+}
+
+// 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 tooltipStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Tooltip', theme, {
+        container: createContainerStyles(),
+        tooltip: createTooltipStyles(theme),
+    });
+});

package/src/Tooltip/Tooltip.styles.tsx

@@ -1,56 +1,34 @@
+/**
+ * Tooltip styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-
-type TooltipSize = Size;
-type TooltipIntent = Intent;
-
-type TooltipTooltipVariants = {
-    size: TooltipSize;
-    intent: TooltipIntent;
-}
-
-export type ExpandedTooltipTooltipStyles = StylesheetStyles<keyof TooltipTooltipVariants>;
-export type ExpandedTooltipStyles = StylesheetStyles<never>;
-
-export type TooltipStylesheet = {
-    container: ExpandedTooltipStyles;
-    tooltip: ExpandedTooltipTooltipStyles;
-}
-
-function createTooltipSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tooltip', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-    }));
-}
-
-function createTooltipIntentVariants(theme: Theme) {
-    const intents: Record<string, any> = {};
-
-    for (const [intentName, intentValue] of Object.entries(theme.intents)) {
-        intents[intentName] = {
-            backgroundColor: intentValue.primary,
-            color: intentValue.contrast,
-        };
-    }
-
-    return intents;
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const tooltipStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
+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>;
+
+export type TooltipDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+};
+
+/**
+ * Tooltip styles with size and intent variants.
+ */
+export const tooltipStyles = defineStyle('Tooltip', (theme: Theme) => ({
+    container: (_props: TooltipDynamicProps) => ({
+        position: 'relative' as const,
         _web: {
             display: 'inline-flex',
             width: 'fit-content',
         },
-    } as const,
-    tooltip: {
+    }),
+
+    tooltip: (_props: TooltipDynamicProps) => ({
         borderRadius: 8,
         maxWidth: 300,
         shadowColor: '#000',
@@ -59,8 +37,16 @@ export const tooltipStyles = StyleSheet.create((theme: Theme) => {
         shadowRadius: 8,
         elevation: 4,
         variants: {
-            size: createTooltipSizeVariants(theme),
-            intent: createTooltipIntentVariants(theme),
+            // $iterator expands for each tooltip size
+            size: {
+                fontSize: theme.sizes.$tooltip.fontSize,
+                padding: theme.sizes.$tooltip.padding,
+            },
+            // $iterator expands for each intent
+            intent: {
+                backgroundColor: theme.$intents.primary,
+                color: theme.$intents.contrast,
+            },
         },
         _web: {
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
@@ -68,6 +54,5 @@ export const tooltipStyles = StyleSheet.create((theme: Theme) => {
             width: 'max-content',
             wordWrap: 'break-word',
         },
-    } as const,
-  } as const;
-});
+    }),
+}));

package/src/Tooltip/Tooltip.web.tsx

@@ -47,8 +47,8 @@ const Tooltip: React.FC<TooltipProps> = ({
     intent,
   });
 
-  const containerProps = getWebProps([tooltipStyles.container, style as any]);
-  const tooltipContentProps = getWebProps(tooltipStyles.tooltip);
+  const containerProps = getWebProps([(tooltipStyles.container as any)({}), style as any]);
+  const tooltipContentProps = getWebProps([(tooltipStyles.tooltip as any)({})]);
 
   const handleMouseEnter = () => {
     if (timeoutRef.current) {

package/src/Video/Video.styles.old.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+export type ExpandedVideoStyles = StylesheetStyles<never>;
+
+export type VideoStylesheet = {
+    container: ExpandedVideoStyles;
+    video: ExpandedVideoStyles;
+    fallback: ExpandedVideoStyles;
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        backgroundColor: theme.colors['black'],
+    });
+}
+
+function createVideoStyles() {
+    return () => ({
+        width: '100%' as const,
+        height: '100%' 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.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const videoStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Video', theme, {container: createContainerStyles(theme),
+        video: createVideoStyles(),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        fallback: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.300'],
+            color: theme.colors['gray.600'],
+        }});
+});

package/src/Video/Video.styles.tsx

@@ -1,39 +1,43 @@
+/**
+ * Video styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 
-export type ExpandedVideoStyles = StylesheetStyles<never>;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type VideoStylesheet = {
-    container: ExpandedVideoStyles;
-    video: ExpandedVideoStyles;
-    fallback: ExpandedVideoStyles;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const videoStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
+export type VideoDynamicProps = {};
+
+/**
+ * Video styles - container, video element, and fallback.
+ */
+export const videoStyles = defineStyle('Video', (theme: Theme) => ({
+    container: (_props: VideoDynamicProps) => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
         backgroundColor: theme.colors['black'],
-    },
-    video: {
-        width: '100%',
-        height: '100%',
-    },
-    fallback: {
-        position: 'absolute',
+    }),
+
+    video: (_props: VideoDynamicProps) => ({
+        width: '100%' as const,
+        height: '100%' as const,
+    }),
+
+    fallback: (_props: VideoDynamicProps) => ({
+        position: 'absolute' as const,
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         backgroundColor: theme.colors['gray.300'],
         color: theme.colors['gray.600'],
-    },
-  };
-});
+    }),
+}));