@idealyst/components 1.1.7 → 1.1.8

package/src/View/View.native.tsx

@@ -26,6 +26,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   testID,
   id,
 }, ref) => {
+  // Set active variants for this render
   viewStyles.useVariants({
     background,
     radius,
@@ -39,25 +40,22 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
     marginHorizontal,
   });
 
-  const getStyles = (): ViewStyle => {
-    const baseStyles: ViewStyle = {};
-
-    if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
-    if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
-    if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
-    if (borderColor) baseStyles.borderColor = borderColor;
-
-    return baseStyles;
-  };
-
+  // Call style as function to get theme-reactive styles
   const viewStyle = (viewStyles.view as any)({});
 
+  // Override styles for direct prop values
+  const overrideStyles: ViewStyle = {};
+  if (backgroundColor) overrideStyles.backgroundColor = backgroundColor;
+  if (borderRadius !== undefined) overrideStyles.borderRadius = borderRadius;
+  if (borderWidth !== undefined) overrideStyles.borderWidth = borderWidth;
+  if (borderColor) overrideStyles.borderColor = borderColor;
+
   if (scrollable) {
     return (
       <RNScrollView
         ref={ref as any}
-        style={[{ flex: 1 }, style]}
-        contentContainerStyle={[viewStyle, getStyles()]}
+        style={[viewStyle, { flex: 1 }, overrideStyles, style]}
+        contentContainerStyle={[viewStyle, overrideStyles]}
         testID={testID}
         nativeID={id}
       >
@@ -67,7 +65,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyle, getStyles(), style]} testID={testID} nativeID={id}>
+    <RNView ref={ref as any} style={[viewStyle, overrideStyles, style]} testID={testID} nativeID={id}>
       {children}
     </RNView>
   );

package/src/View/View.styles.old.tsx

@@ -0,0 +1,125 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Surface } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant } from './types';
+import { ViewStyleSize } from '../utils/viewStyleProps';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ViewVariants = {
+  background: ViewBackgroundVariant;
+  radius: ViewRadiusVariant;
+  border: ViewBorderVariant;
+  gap: ViewStyleSize;
+  padding: ViewStyleSize;
+  paddingVertical: ViewStyleSize;
+  paddingHorizontal: ViewStyleSize;
+  margin: ViewStyleSize;
+  marginVertical: ViewStyleSize;
+  marginHorizontal: ViewStyleSize;
+};
+
+export type ExpandedViewStyles = StylesheetStyles<keyof ViewVariants>;
+
+export type ViewStylesheet = {
+  view: ExpandedViewStyles;
+};
+
+/**
+ * Create background variants for view
+ */
+function createBackgroundVariants(theme: Theme) {
+  const variants: any = {
+    transparent: {
+      backgroundColor: 'transparent',
+    },
+  };
+
+  // Add all surface colors programmatically
+  for (const surface in theme.colors.surface) {
+    variants[surface] = {
+      backgroundColor: theme.colors.surface[surface as Surface],
+    };
+  }
+
+  return variants;
+}
+
+/**
+ * Create radius variants for view
+ */
+function createRadiusVariants() {
+  return {
+    none: { borderRadius: 0 },
+    xs: { borderRadius: 2 },
+    sm: { borderRadius: 4 },
+    md: { borderRadius: 8 },
+    lg: { borderRadius: 12 },
+    xl: { borderRadius: 16 },
+  } as const;
+}
+
+/**
+ * Create border variants for view
+ */
+function createBorderVariants(theme: Theme) {
+  return {
+    none: {
+      borderWidth: 0,
+    },
+    thin: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.colors['gray.300'],
+    },
+    thick: {
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderColor: theme.colors['gray.300'],
+    },
+  } as const;
+}
+
+/**
+ * Create dynamic view styles.
+ * Returns a function to ensure Unistyles can track theme changes.
+ * All styles must be dynamic functions (not static objects) to work with
+ * Unistyles' Babel transform and theme reactivity on native.
+ */
+function createViewStyles(theme: Theme) {
+    return (_props?: {}) => ({
+        display: 'flex' as const,
+        variants: {
+            background: createBackgroundVariants(theme),
+            radius: createRadiusVariants(),
+            border: createBorderVariants(theme),
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+        },
+    });
+}
+
+// Styles use applyExtensions to enable theme extensions and ensure proper
+// reactivity with Unistyles' native Shadow Tree updates.
+export const viewStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('View', theme, {
+        view: createViewStyles(theme),
+    });
+});

package/src/View/View.styles.tsx

@@ -1,125 +1,95 @@
+/**
+ * View styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Surface } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant } from './types';
 import { ViewStyleSize } from '../utils/viewStyleProps';
-import { applyExtensions } from '../extensions/applyExtension';
 
-type ViewVariants = {
-  background: ViewBackgroundVariant;
-  radius: ViewRadiusVariant;
-  border: ViewBorderVariant;
-  gap: ViewStyleSize;
-  padding: ViewStyleSize;
-  paddingVertical: ViewStyleSize;
-  paddingHorizontal: ViewStyleSize;
-  margin: ViewStyleSize;
-  marginVertical: ViewStyleSize;
-  marginHorizontal: ViewStyleSize;
-};
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedViewStyles = StylesheetStyles<keyof ViewVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ViewStylesheet = {
-  view: ExpandedViewStyles;
+export type ViewVariants = {
+    background: ViewBackgroundVariant;
+    radius: ViewRadiusVariant;
+    border: ViewBorderVariant;
+    gap: ViewStyleSize;
+    padding: ViewStyleSize;
+    paddingVertical: ViewStyleSize;
+    paddingHorizontal: ViewStyleSize;
+    margin: ViewStyleSize;
+    marginVertical: ViewStyleSize;
+    marginHorizontal: ViewStyleSize;
 };
 
-/**
- * Create background variants for view
- */
-function createBackgroundVariants(theme: Theme) {
-  const variants: any = {
-    transparent: {
-      backgroundColor: 'transparent',
-    },
-  };
-
-  // Add all surface colors programmatically
-  for (const surface in theme.colors.surface) {
-    variants[surface] = {
-      backgroundColor: theme.colors.surface[surface as Surface],
-    };
-  }
-
-  return variants;
-}
+export type ViewDynamicProps = Partial<ViewVariants>;
 
 /**
- * Create radius variants for view
+ * View styles with $iterator expansion for spacing variants.
+ *
+ * NOTE: At least one top-level theme access is required for Unistyles to trace
+ * theme dependencies. We use a transparent borderColor as a marker.
  */
-function createRadiusVariants() {
-  return {
-    none: { borderRadius: 0 },
-    xs: { borderRadius: 2 },
-    sm: { borderRadius: 4 },
-    md: { borderRadius: 8 },
-    lg: { borderRadius: 12 },
-    xl: { borderRadius: 16 },
-  } as const;
-}
-
-/**
- * Create border variants for view
- */
-function createBorderVariants(theme: Theme) {
-  return {
-    none: {
-      borderWidth: 0,
-    },
-    thin: {
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: theme.colors['gray.300'],
-    },
-    thick: {
-      borderWidth: 2,
-      borderStyle: 'solid',
-      borderColor: theme.colors['gray.300'],
-    },
-  } as const;
-}
-
-// Style creators for extension support
-function createViewStyles(theme: Theme) {
-    return () => ({
+export const viewStyles = defineStyle('View', (theme: Theme) => ({
+    view: (_props: ViewDynamicProps) => ({
         display: 'flex' as const,
+        // Theme marker for Unistyles reactivity (invisible, overridden by variants)
+        borderColor: theme.colors.border.primary,
+        borderWidth: 0,
         variants: {
-            background: createBackgroundVariants(theme),
-            radius: createRadiusVariants(),
-            border: createBorderVariants(theme),
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
+            background: {
+                transparent: { backgroundColor: 'transparent' },
+                primary: { backgroundColor: theme.colors.surface.primary },
+                secondary: { backgroundColor: theme.colors.surface.secondary },
+                tertiary: { backgroundColor: theme.colors.surface.tertiary },
+                inverse: { backgroundColor: theme.colors.surface.inverse },
+                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
+                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+            },
+            radius: {
+                none: { borderRadius: 0 },
+                xs: { borderRadius: 2 },
+                sm: { borderRadius: 4 },
+                md: { borderRadius: 8 },
+                lg: { borderRadius: 12 },
+                xl: { borderRadius: 16 },
+            },
+            border: {
+                none: { borderWidth: 0 },
+                thin: { borderWidth: 1, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
+                thick: { borderWidth: 2, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
+            },
+            // $iterator expands for each view size
+            gap: {
+                gap: theme.sizes.$view.spacing,
+            },
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
         _web: {
             display: 'flex',
             flexDirection: 'column',
             boxSizing: 'border-box',
         },
-    });
-}
-
-// 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 viewStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('View', theme, {
-        view: createViewStyles(theme),
-    });
-
-    return {
-        ...extended,
-    };
-});
+    }),
+}));

package/src/View/View.web.tsx

@@ -58,6 +58,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     return style;
   }, [style]);
 
+  // Call style as function to get theme-reactive styles
   /** @ts-ignore */
   const webProps = getWebProps([(viewStyles.view as any)({}), dynamicStyles]);
 

package/src/examples/CardExamples.tsx

@@ -17,12 +17,6 @@ export const CardExamples = () => {
       <View gap="md">
         <Text typography="subtitle1">Variants</Text>
         <View gap="sm" style={{ gap: 10 }}>
-          <Card type="default" padding="md">
-            <Text>Default Card</Text>
-            <Text typography="caption" color="secondary">
-              This is a default card with standard styling
-            </Text>
-          </Card>
           
           <Card type="outlined" padding="md">
             <Text>Outlined Card</Text>

package/src/extensions/extendComponent.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@idealyst/theme';
+import { UnistylesRuntime } from 'react-native-unistyles';
 import {
     ComponentStyleElements,
     ComponentName,
@@ -18,6 +19,57 @@ const extensionRegistry = new Map<ComponentName, StyleExtension<any>[]>();
  */
 const replacementRegistry = new Map<ComponentName, StyleExtension<any>>();
 
+/**
+ * Compute all extensions for a given theme.
+ * Returns an object with component names as keys and merged element extensions as values.
+ */
+function computeExtensionsForTheme(theme: Theme): Record<string, Record<string, any>> {
+    const result: Record<string, Record<string, any>> = {};
+
+    for (const [component, extensions] of extensionRegistry) {
+        if (!extensions || extensions.length === 0) continue;
+
+        // Resolve all extensions (call functions with theme)
+        const resolved = extensions.map(ext =>
+            typeof ext === 'function' ? ext(theme) : ext
+        );
+
+        // Merge all extensions in order (later ones win)
+        result[component] = deepMergeAll(...resolved);
+    }
+
+    return result;
+}
+
+/**
+ * Update theme's __extensions to trigger Unistyles reactivity.
+ * This is called whenever extensions change.
+ */
+function syncExtensionsToThemes(): void {
+    try {
+        // Update both light and dark themes with computed extensions
+        UnistylesRuntime.updateTheme('light', (currentTheme) => {
+            const extensions = computeExtensionsForTheme(currentTheme);
+            return {
+                ...currentTheme,
+                __extensions: extensions,
+            };
+        });
+
+        UnistylesRuntime.updateTheme('dark', (currentTheme) => {
+            const extensions = computeExtensionsForTheme(currentTheme);
+            return {
+                ...currentTheme,
+                __extensions: extensions,
+            };
+        });
+    } catch (error) {
+        // UnistylesRuntime may not be available in all contexts (e.g., SSR)
+        // Silently ignore errors - extensions will still work via getExtension
+        console.warn('Unable to sync extensions to theme:', error);
+    }
+}
+
 /**
  * Completely replace the styles of a component.
  *
@@ -249,6 +301,9 @@ export function extendComponent<K extends ComponentName>(
     const existing = extensionRegistry.get(component) ?? [];
     existing.push(extension);
     extensionRegistry.set(component, existing);
+
+    // Sync extensions to theme for Unistyles reactivity
+    syncExtensionsToThemes();
 }
 
 /**
@@ -298,6 +353,9 @@ export function getExtension<K extends ComponentName>(
  */
 export function clearExtension<K extends ComponentName>(component: K): void {
     extensionRegistry.delete(component);
+
+    // Sync extensions to theme for Unistyles reactivity
+    syncExtensionsToThemes();
 }
 
 /**
@@ -313,6 +371,9 @@ export function clearExtension<K extends ComponentName>(component: K): void {
  */
 export function clearAllExtensions(): void {
     extensionRegistry.clear();
+
+    // Sync extensions to theme for Unistyles reactivity
+    syncExtensionsToThemes();
 }
 
 /**