@idealyst/components 1.1.6 → 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,23 +40,22 @@ 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)({});
 
-    if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
-    if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
-    if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
-    if (borderColor) baseStyles.borderColor = borderColor;
-
-    return baseStyles;
-  };
+  // 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={[viewStyles.view, getStyles()]}
+        style={[viewStyle, { flex: 1 }, overrideStyles, style]}
+        contentContainerStyle={[viewStyle, overrideStyles]}
         testID={testID}
         nativeID={id}
       >
@@ -65,7 +65,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyles.view, 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,114 +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';
 
-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;
-}
-
-// 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) => {
-  return {
-    view: {
-      display: 'flex',
-      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',
-      },
-    },
-  };
-});
+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: {
+                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',
+        },
+    }),
+}));

package/src/View/View.web.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
@@ -48,13 +49,24 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   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, dynamicStyles, style as any]);
+  const webProps = getWebProps([(viewStyles.view as any)({}), dynamicStyles]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
+      style={flattenedStyle as any}
       {...webProps}
       ref={mergedRef}
       id={id}

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/applyExtension.ts

@@ -0,0 +1,210 @@
+import { deepMerge } from '../utils/deepMerge';
+import { Styles, ElementStyle, ComponentName } from './types';
+import { getExtension, getReplacement } from './extendComponent';
+import { Theme } from '@idealyst/theme';
+
+/**
+ * Wrap a dynamic style function to merge with extension styles.
+ *
+ * All styles in Unistyles must be dynamic functions (not static objects)
+ * to avoid Babel transform issues. This utility wraps a style function
+ * to automatically merge extension styles when the function is called.
+ *
+ * @param styleFn - The original dynamic style function
+ * @param elementExtension - Extension styles for this element (can be undefined).
+ *        Can be either a static styles object or a function (props) => styles
+ *        for prop-aware extensions.
+ * @returns A new function that returns merged styles
+ *
+ * @example
+ * ```typescript
+ * import { withExtension } from '../extensions/applyExtension';
+ * import { getExtension } from '../extensions/extendComponent';
+ *
+ * export const buttonStyles = StyleSheet.create((theme: Theme) => {
+ *   const ext = getExtension('Button', theme);
+ *
+ *   return {
+ *     button: withExtension(createButtonStyles(theme), ext?.button),
+ *     text: withExtension(createTextStyles(theme), ext?.text),
+ *   };
+ * });
+ * ```
+ *
+ * @remarks
+ * - If no extension is provided, returns the original function unchanged
+ * - Extension styles take priority over base styles (deep merged)
+ * - Works with any style function signature
+ * - If extension is a function, it receives the same props as the base style function
+ */
+export function withExtension<TProps, TResult extends Styles>(
+    styleFn: (props: TProps) => TResult,
+    elementExtension: Styles | ((props: TProps) => Styles) | undefined
+): (props: TProps) => TResult {
+    // If no extension, return original function unchanged
+    if (!elementExtension) {
+        return styleFn;
+    }
+
+    // Return wrapped function that merges extension
+    return (props: TProps): TResult => {
+        const baseStyles = styleFn(props);
+        // If extension is a function, call it with props; otherwise use as-is
+        const extStyles = typeof elementExtension === 'function'
+            ? elementExtension(props)
+            : elementExtension;
+        return deepMerge(baseStyles, extStyles) as TResult;
+    };
+}
+
+/**
+ * Wrap a parameterless style function with extension.
+ *
+ * Use this for style functions that don't take any parameters.
+ * This is common for simpler elements like iconContainer.
+ *
+ * @param styleFn - The original style function (no parameters)
+ * @param elementExtension - Extension styles for this element
+ * @returns A new function that returns merged styles
+ *
+ * @example
+ * ```typescript
+ * const createIconContainerStyles = (theme: Theme) => {
+ *   return () => ({
+ *     display: 'flex',
+ *     flexDirection: 'row',
+ *     gap: 4,
+ *   });
+ * };
+ *
+ * // In StyleSheet.create:
+ * iconContainer: withSimpleExtension(
+ *   createIconContainerStyles(theme),
+ *   ext?.iconContainer
+ * ),
+ * ```
+ */
+export function withSimpleExtension<TResult extends Styles>(
+    styleFn: () => TResult,
+    elementExtension: Styles | undefined
+): () => TResult {
+    if (!elementExtension) {
+        return styleFn;
+    }
+
+    return (): TResult => {
+        const baseStyles = styleFn();
+        return deepMerge(baseStyles, elementExtension) as TResult;
+    };
+}
+
+/**
+ * Normalize a style value (from replacement) into a dynamic function.
+ *
+ * Replacements can be either:
+ * - A function (props) => styles - used directly
+ * - A static styles object - wrapped in a function
+ *
+ * @param value - The replacement value (function or static object)
+ * @param defaultFn - Default function to use if value is undefined
+ * @returns The default function (type-safe) - replacement handling is done at runtime
+ *
+ * @example
+ * ```typescript
+ * const replacement = getReplacement('Button', theme);
+ *
+ * // If replacement.button is a function, use it directly
+ * // If replacement.button is an object, wrap it in () => replacement.button
+ * // If undefined, use createButtonStyles(theme)
+ * button: withExtension(
+ *   normalizeStyleFn(replacement?.button, createButtonStyles(theme)),
+ *   ext?.button
+ * ),
+ * ```
+ */
+export function normalizeStyleFn<TProps, TResult>(
+    value: unknown,
+    defaultFn: (props: TProps) => TResult
+): (props: TProps) => TResult {
+    if (value === undefined || value === null) {
+        return defaultFn;
+    }
+    if (typeof value === 'function') {
+        return value as (props: TProps) => TResult;
+    }
+    // Static object - wrap in a function that ignores props
+    return (() => value) as (props: TProps) => TResult;
+}
+
+/**
+ * Normalize a simple style value (no props) into a parameterless function.
+ *
+ * @param value - The replacement value (function or static object)
+ * @param defaultFn - Default function to use if value is undefined
+ * @returns A parameterless function that returns styles
+ */
+export function normalizeSimpleStyleFn<TResult>(
+    value: unknown,
+    defaultFn: () => TResult
+): () => TResult {
+    if (value === undefined || value === null) {
+        return defaultFn;
+    }
+    if (typeof value === 'function') {
+        return value as () => TResult;
+    }
+    // Static object - wrap in a function
+    return (() => value) as () => TResult;
+}
+
+/**
+ * Apply extensions and replacements to a set of style creators.
+ *
+ * This is a simplified helper that handles the common pattern of:
+ * 1. Getting extensions and replacements for a component
+ * 2. Applying normalizeStyleFn for each element
+ * 3. Merging extensions on top
+ *
+ * @param component - The component name
+ * @param theme - The current theme
+ * @param styleCreators - Object mapping element names to their style creator functions
+ * @returns Object with the same keys, but with extensions/replacements applied
+ *
+ * @example
+ * ```typescript
+ * export const buttonStyles = StyleSheet.create((theme: Theme) => {
+ *     return applyExtensions('Button', theme, {
+ *         button: createButtonStyles(theme),
+ *         text: createTextStyles(theme),
+ *         icon: createIconStyles(theme),
+ *     });
+ * });
+ * ```
+ */
+export function applyExtensions<
+    K extends ComponentName,
+    T extends Record<string, ((...args: any[]) => any)>
+>(
+    component: K,
+    theme: Theme,
+    styleCreators: T
+): T {
+    const ext = getExtension(component, theme);
+    const replacement = getReplacement(component, theme);
+
+    const result = {} as T;
+
+    for (const key in styleCreators) {
+        const creator = styleCreators[key];
+        const elementExt = ext?.[key as string as keyof typeof ext] as ElementStyle | undefined;
+        const elementReplacement = replacement?.[key as string as keyof typeof replacement];
+
+        // Apply replacement (if any) then extension (if any)
+        result[key] = withExtension(
+            normalizeStyleFn(elementReplacement, creator),
+            elementExt
+        ) as T[typeof key];
+    }
+
+    return result;
+}