@idealyst/components 1.1.7 → 1.1.9

package/src/View/View.native.tsx

@@ -1,8 +1,27 @@
 import React, { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, ViewStyle } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView, ViewStyle, StyleSheet } from 'react-native';
+import { useResponsiveStyle, ResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 
+/**
+ * Check if a style object contains any responsive values
+ */
+function hasResponsiveValues(style: any): style is ResponsiveStyle {
+  if (!style || typeof style !== 'object' || Array.isArray(style)) return false;
+  for (const key in style) {
+    const value = style[key];
+    if (value && typeof value === 'object' && !Array.isArray(value) && !('$$typeof' in value)) {
+      // Check if it looks like a breakpoint map (has breakpoint-like keys)
+      const keys = Object.keys(value);
+      if (keys.some(k => ['xs', 'sm', 'md', 'lg', 'xl'].includes(k))) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   children,
   background = 'transparent',
@@ -26,6 +45,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   testID,
   id,
 }, ref) => {
+  // Set active variants for this render
   viewStyles.useVariants({
     background,
     radius,
@@ -39,25 +59,33 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
     marginHorizontal,
   });
 
-  const getStyles = (): ViewStyle => {
-    const baseStyles: ViewStyle = {};
+  // 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 (backgroundColor) baseStyles.backgroundColor = backgroundColor;
-    if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
-    if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
-    if (borderColor) baseStyles.borderColor = borderColor;
+  // Flatten style array if needed and check for responsive values
+  const flattenedStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
 
-    return baseStyles;
-  };
+  // Resolve responsive values if present (this hook is reactive to breakpoint changes)
+  const resolvedStyle = useResponsiveStyle(
+    hasResponsiveValues(flattenedStyle) ? flattenedStyle : {}
+  );
 
-  const viewStyle = (viewStyles.view as any)({});
+  // Use resolved style if responsive, otherwise use original
+  const finalStyle = hasResponsiveValues(flattenedStyle) ? resolvedStyle : style;
 
   if (scrollable) {
     return (
       <RNScrollView
         ref={ref as any}
-        style={[{ flex: 1 }, style]}
-        contentContainerStyle={[viewStyle, getStyles()]}
+        style={[viewStyle, { flex: 1 }, overrideStyles, finalStyle]}
+        contentContainerStyle={[viewStyle, overrideStyles]}
         testID={testID}
         nativeID={id}
       >
@@ -67,7 +95,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, finalStyle]} 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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
@@ -41,31 +41,15 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     marginHorizontal,
   });
 
-  // Create dynamic styles based on custom props (overrides variants)
-  const dynamicStyles: any = {};
-
-  if (backgroundColor) dynamicStyles.backgroundColor = backgroundColor;
-  if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
-  if (borderWidth !== undefined) dynamicStyles.borderWidth = borderWidth;
-  if (borderColor) dynamicStyles.borderColor = borderColor;
-
-  // Flatten style array to object (HTML divs don't support style arrays)
-  const flattenedStyle = useMemo(() => {
-    if (!style) return undefined;
-    if (Array.isArray(style)) {
-      return StyleSheet.flatten(style);
-    }
-    return style;
-  }, [style]);
-
+  // Call style as function to get theme-reactive styles
   /** @ts-ignore */
-  const webProps = getWebProps([(viewStyles.view as any)({}), dynamicStyles]);
-
+  const webProps = getWebProps((viewStyles.view as any)({}));
+  
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
-      style={flattenedStyle as any}
+      style={style as any}
       {...webProps}
       ref={mergedRef}
       id={id}

package/src/View/types.ts

@@ -1,8 +1,28 @@
-import { Size, Surface } from '@idealyst/theme';
+import { Size, Surface, ResponsiveStyle } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
+/**
+ * Style prop type that accepts both regular styles and responsive styles.
+ * Responsive styles allow breakpoint-based values:
+ * @example
+ * ```tsx
+ * // Regular style
+ * <View style={{ flexDirection: 'column' }} />
+ *
+ * // Responsive style
+ * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />
+ *
+ * // Style array (native only)
+ * <View style={[styles.container, { padding: 10 }]} />
+ *
+ * // Web-only CSS properties
+ * <View style={{ display: 'inline-block' }} />
+ * ```
+ */
+export type ViewStyleProp = StyleProp<ViewStyle> | ResponsiveStyle | React.CSSProperties;
+
 // Component-specific type aliases for future extensibility
 export type ViewBackgroundVariant = Surface | 'transparent';
 export type ViewRadiusVariant = Size | 'none';
@@ -50,9 +70,17 @@ export interface ViewProps extends ContainerStyleProps {
   borderColor?: string;
 
   /**
-   * Additional styles (platform-specific)
+   * Additional styles. Supports responsive values for any property.
+   * @example
+   * ```tsx
+   * // Responsive flexDirection
+   * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />
+   *
+   * // Mix responsive and static values
+   * <View style={{ padding: { xs: 8, lg: 16 }, backgroundColor: '#fff' }} />
+   * ```
    */
-  style?: React.CSSProperties | StyleProp<ViewStyle>;
+  style?: ViewStyleProp;
 
   /**
    * Enable scrollable content (uses ScrollView on native, overflow:auto on web)

package/src/examples/ButtonExamples.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Screen, View, Button, Text } from '@idealyst/components';
+import { useUnistyles } from 'react-native-unistyles';
 
 export const ButtonExamples = () => {
   const handlePress = (buttonType: string) => {
     console.log(`Button pressed: ${buttonType}`);
   };
 
+  const { theme } = useUnistyles()
+
   return (
     <Screen background="primary">
       <View gap="xl">
@@ -41,6 +44,23 @@ export const ButtonExamples = () => {
         </View>
       </View>
 
+       {/* Show all intents in theme (including extended intents) */}
+      <View gap="md">
+        <Text typography="subtitle1">All Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          { (Object.keys(theme.intents) as Array<keyof typeof theme.intents>).map((intent) => (
+            <Button 
+              key={intent}
+              type="contained" 
+              intent={intent}
+              onPress={() => handlePress(`intent-${intent}`)}
+            >
+              {intent.charAt(0).toUpperCase() + intent.slice(1)}
+            </Button>
+          )) }
+        </View>
+      </View>
+
       {/* Button Sizes */}
       <View gap="md">
         <Text typography="subtitle1">Sizes</Text>

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();
 }
 
 /**

package/src/index.ts

@@ -40,7 +40,7 @@ export * from './Avatar/types';
 export { default as Screen } from './Screen';
 export * from './Screen/types';
 
-export { default as Icon } from './Icon';
+export { default as Icon, IconRegistry } from './Icon';
 export * from './Icon/types';
 
 export { default as SVGImage } from './SVGImage';