@idealyst/components 1.1.7 → 1.1.9

package/src/TextArea/TextArea.styles.tsx

@@ -1,107 +1,86 @@
-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 { applyExtensions } from '../extensions/applyExtension';
-
-
 /**
- * Create size variants for textarea
+ * TextArea styles using defineStyle with dynamic props.
  */
-function createTextareaSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'textarea', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-        lineHeight: size.lineHeight,
-        minHeight: size.minHeight,
-    }));
-}
+import { StyleSheet } from 'react-native-unistyles';
+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;
+
+// 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;
-    }
-
-    const intentValue = theme.intents[intent];
-    const baseStyles: any = {};
-
-    // For success and warning, set border color
-    if (intent === 'success' || intent === 'warning') {
-        baseStyles.borderColor = intentValue.primary;
-    }
-
-    // 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`,
+export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
+    container: (_props: TextAreaDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        borderWidth: 1,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radii.md,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
-    };
+    }),
 
-    return baseStyles;
-}
+    label: ({ disabled = false }: TextAreaDynamicProps) => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+    }),
 
-const createTextareaStyles = (theme: Theme) => {
-    return ({ intent, disabled, hasError }: { intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean }) => {
-        const intentStyles = getTextareaIntentStyles(theme, intent, disabled, hasError);
+    textareaContainer: (_props: TextAreaDynamicProps) => ({
+        position: 'relative' as const,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 1,
+                },
+                false: {
+                    opacity: 0.8,
+                },
+            },
+        }
+    }),
 
-        return {
+    textarea: ({ disabled = false, resize = 'none' }: TextAreaDynamicProps) => ({
             width: '100%',
             color: theme.colors.text.primary,
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            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: {
@@ -110,109 +89,30 @@ 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,
             },
-        } as const;
-    }
-}
+    }),
 
-// Helper functions to create static styles wrapped in dynamic functions
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        gap: 4,
-        variants: {
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-function createLabelStyles(theme: Theme) {
-    return () => ({
-        fontSize: 14,
-        fontWeight: '500' as const,
-        color: theme.colors.text.primary,
-        variants: {
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {},
-            },
-        },
-    });
-}
-
-function createTextareaContainerStyles() {
-    return () => ({
-        position: 'relative' as const,
-    });
-}
-
-function createHelperTextStyles(theme: Theme) {
-    return () => ({
+    helperText: ({ hasError = false }: TextAreaDynamicProps) => ({
         fontSize: 12,
-        color: theme.colors.text.secondary,
-        variants: {
-            hasError: {
-                true: {
-                    color: theme.intents.error.primary,
-                },
-                false: {},
-            },
-        },
-    });
-}
+        color: hasError ? theme.intents.error.primary : theme.colors.text.secondary,
+    }),
 
-function createFooterStyles() {
-    return () => ({
+    footer: (_props: TextAreaDynamicProps) => ({
         display: 'flex' as const,
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         alignItems: 'center' as const,
         gap: 4,
-    });
-}
+    }),
 
-function createCharacterCountStyles(theme: Theme) {
-    return () => ({
+    characterCount: ({ isNearLimit = false, isAtLimit = false }: TextAreaDynamicProps) => ({
         fontSize: 12,
-        color: theme.colors.text.secondary,
-        variants: {
-            isNearLimit: {
-                true: {
-                    color: theme.intents.warning.primary,
-                },
-                false: {},
-            },
-            isAtLimit: {
-                true: {
-                    color: theme.intents.error.primary,
-                },
-                false: {},
-            },
-        },
-    });
-}
-
-// 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) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('TextArea', theme, {
-        container: createContainerStyles(theme),
-        textarea: createTextareaStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        label: createLabelStyles(theme)(),
-        textareaContainer: createTextareaContainerStyles()(),
-        helperText: createHelperTextStyles(theme)(),
-        footer: createFooterStyles()(),
-        characterCount: createCharacterCountStyles(theme)(),
-    };
-});
+        color: isAtLimit
+            ? theme.intents.error.primary
+            : isNearLimit
+                ? theme.intents.warning.primary
+                : theme.colors.text.secondary,
+    }),
+}));

package/src/TextArea/TextArea.web.tsx

@@ -127,12 +127,23 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([textAreaStyles.container, style as any]);
-  const labelProps = getWebProps([textAreaStyles.label]);
-  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer]);
-  const footerProps = getWebProps([textAreaStyles.footer]);
-  const helperTextProps = getWebProps([textAreaStyles.helperText]);
-  const characterCountProps = getWebProps([textAreaStyles.characterCount]);
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (textAreaStyles.container as any)({});
+  const labelStyle = (textAreaStyles.label as any)({ disabled });
+  const textareaContainerStyle = (textAreaStyles.textareaContainer as any)({});
+  const footerStyle = (textAreaStyles.footer as any)({});
+  const helperTextStyle = (textAreaStyles.helperText as any)({ hasError });
+  const characterCountStyle = (textAreaStyles.characterCount as any)({
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
+  const containerProps = getWebProps([containerStyle, style as any]);
+  const labelProps = getWebProps([labelStyle]);
+  const textareaContainerProps = getWebProps([textareaContainerStyle]);
+  const footerProps = getWebProps([footerStyle]);
+  const helperTextProps = getWebProps([helperTextStyle]);
+  const characterCountProps = getWebProps([characterCountStyle]);
 
   const adjustHeight = () => {
     if (!autoGrow || !textareaRef.current) return;

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,57 +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';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-type TooltipSize = Size;
-type TooltipIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type TooltipTooltipVariants = {
-    size: TooltipSize;
-    intent: TooltipIntent;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedTooltipTooltipStyles = StylesheetStyles<keyof TooltipTooltipVariants>;
-export type ExpandedTooltipStyles = StylesheetStyles<never>;
+export type TooltipDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+};
 
-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 () => ({
+/**
+ * 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',
         },
-    });
-}
+    }),
 
-function createTooltipStyles(theme: Theme) {
-    return () => ({
+    tooltip: (_props: TooltipDynamicProps) => ({
         borderRadius: 8,
         maxWidth: 300,
         shadowColor: '#000',
@@ -60,8 +37,16 @@ function createTooltipStyles(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)',
@@ -69,14 +54,5 @@ function createTooltipStyles(theme: Theme) {
             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/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,55 +1,43 @@
+/**
+ * Video styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+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>;
 
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
+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'],
-    });
-}
+    }),
 
-function createVideoStyles() {
-    return () => ({
+    video: (_props: VideoDynamicProps) => ({
         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
-    const extended = applyExtensions('Video', theme, {
-        container: createContainerStyles(theme),
-        video: createVideoStyles(),
-    });
+    }),
 
-    return {
-        ...extended,
-        // 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'],
-        },
-    };
-});
+    fallback: (_props: VideoDynamicProps) => ({
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: theme.colors['gray.300'],
+        color: theme.colors['gray.600'],
+    }),
+}));