@idealyst/components 1.0.99 → 1.1.0

package/src/Text/Text.native.tsx

@@ -5,24 +5,35 @@ import { textStyles } from './Text.styles';
 
 const Text = forwardRef<RNText, TextProps>(({
   children,
+  typography,
   size = 'md',
   weight = 'normal',
   color,
   align = 'left',
+  // Spacing variants from TextSpacingStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
   style,
   testID,
 }, ref) => {
+  // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
-    size,
-    weight,
+    size: typography ? 'md' : size, // Use default when typography is set (will be overridden)
+    weight: typography ? 'normal' : weight, // Use default when typography is set (will be overridden)
     align,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
   });
 
   return (
     <RNText
       ref={ref}
       style={[
-        textStyles.text({ color }),
+        textStyles.text({ color, typography }),
         style,
       ]}
       testID={testID}

package/src/Text/Text.styles.tsx

@@ -1,21 +1,23 @@
 import { StyleSheet } from "react-native-unistyles";
-import { Theme, StylesheetStyles, Styles, DynamicStyles } from '@idealyst/theme';
+import { Theme } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { TextAlignVariant, TextColorVariant, TextSizeVariant, TextWeightVariant } from "./types";
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { TextAlignVariant, TextColorVariant, TextSizeVariant, TextWeightVariant, TextTypographyVariant } from "./types";
 
 type TextVariants = {
     size: TextSizeVariant;
     weight: TextWeightVariant;
     align: TextAlignVariant;
-    color: TextColorVariant;
-}
-
-export type TextStylesheet = {
-    text: DynamicStyles<keyof TextVariants>;
 }
 
 /**
- * Create size variants for text
+ * Create size variants for text (legacy)
+ * @deprecated Use typography prop instead
  */
 function createSizeVariants(theme: Theme): any {
     return buildSizeVariants(theme, 'text', (size) => ({
@@ -24,10 +26,17 @@ function createSizeVariants(theme: Theme): any {
     }));
 }
 
+type TextStyleParams = {
+    color?: TextColorVariant;
+    typography?: TextTypographyVariant;
+}
+
 function createTextStyles(theme: Theme) {
-    return ({ color }: Partial<TextVariants>) => {
+    return ({ color, typography }: TextStyleParams) => {
         const colorValue = theme.colors.text[color] || theme.colors.text.primary;
-        return {
+
+        // Base styles
+        const baseStyles: any = {
             margin: 0,
             padding: 0,
             color: colorValue,
@@ -61,12 +70,27 @@ function createTextStyles(theme: Theme) {
                         textAlign: 'right',
                     },
                 } as const,
+                // Spacing variants from TextSpacingStyleProps
+                gap: buildGapVariants(theme),
+                padding: buildPaddingVariants(theme),
+                paddingVertical: buildPaddingVerticalVariants(theme),
+                paddingHorizontal: buildPaddingHorizontalVariants(theme),
             } as const,
             _web: {
                 fontFamily: 'inherit',
                 lineHeight: 'inherit',
             },
-        } as const;
+        };
+
+        // If typography is set, apply typography styles (overrides size/weight variants)
+        if (typography && theme.sizes.typography[typography]) {
+            const typo = theme.sizes.typography[typography];
+            baseStyles.fontSize = typo.fontSize;
+            baseStyles.lineHeight = typo.lineHeight;
+            baseStyles.fontWeight = typo.fontWeight;
+        }
+
+        return baseStyles;
     }
 }
 
@@ -75,5 +99,5 @@ function createTextStyles(theme: Theme) {
 export const textStyles = StyleSheet.create((theme: Theme) => {
   return {
         text: createTextStyles(theme),
-    } as TextStylesheet;
+    };
 });

package/src/Text/Text.web.tsx

@@ -6,22 +6,33 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const Text = forwardRef<HTMLSpanElement, TextProps>(({
   children,
+  typography,
   size = 'md',
   weight = 'normal',
   color = 'primary',
   align = 'left',
+  // Spacing variants from TextSpacingStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
   style,
   testID,
 }, ref) => {
+  // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
-    size,
-    weight,
+    size: typography ? 'md' : size, // Use default when typography is set (will be overridden)
+    weight: typography ? 'normal' : weight, // Use default when typography is set (will be overridden)
     align,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
   });
 
-  // Create the style array following the official documentation pattern
+  // Create the style array - pass typography to dynamic style function
   const textStyleArray = [
-    textStyles.text({ color }),
+    textStyles.text({ color, typography }),
     style,
   ];
 

package/src/Text/types.ts

@@ -1,26 +1,37 @@
-import { Text } from '@idealyst/theme';
+import { Text, Typography } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
+import { TextSpacingStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TextColorVariant = Text;
 export type TextSizeVariant = 'sm' | 'md' | 'lg' | 'xl';  // Using sm/md/lg/xl for consistency
 export type TextWeightVariant = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
 export type TextAlignVariant = 'left' | 'center' | 'right';
+export type TextTypographyVariant = Typography;
 
-export interface TextProps {
+export interface TextProps extends TextSpacingStyleProps {
   /**
    * The text content to display
    */
   children: ReactNode;
 
+  /**
+   * Typography variant for semantic text styling.
+   * Automatically sets fontSize, lineHeight, and fontWeight.
+   * When set, overrides size and weight props.
+   */
+  typography?: TextTypographyVariant;
+
   /**
    * The size variant of the text
+   * @deprecated Use `typography` prop instead for semantic text styling (e.g., 'h1', 'body1', 'caption')
    */
   size?: TextSizeVariant;
 
   /**
-   * The weight of the text
+   * The weight of the text.
+   * Note: When `typography` is set, this is ignored as typography includes fontWeight.
    */
   weight?: TextWeightVariant;
 
@@ -43,4 +54,4 @@ export interface TextProps {
    * Test ID for testing
    */
   testID?: string;
-} 
+}

package/src/TextArea/TextArea.native.tsx

@@ -21,6 +21,10 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   showCharacterCount = false,
   intent = 'primary',
   size = 'md',
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   textareaStyle,
   testID,
@@ -40,6 +44,9 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
     resize: 'none',
     isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
     isAtLimit: maxLength ? value.length >= maxLength : false,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const handleChange = (newValue: string) => {

package/src/TextArea/TextArea.styles.tsx

@@ -1,6 +1,11 @@
 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';
 
 
@@ -116,6 +121,12 @@ export const textAreaStyles = StyleSheet.create((theme: Theme) => {
             display: 'flex',
             flexDirection: 'column',
             gap: 4,
+            variants: {
+                // Spacing variants from FormInputStyleProps
+                margin: buildMarginVariants(theme),
+                marginVertical: buildMarginVerticalVariants(theme),
+                marginHorizontal: buildMarginHorizontalVariants(theme),
+            },
         },
         label: {
             fontSize: 14,

package/src/TextArea/TextArea.web.tsx

@@ -22,6 +22,10 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   showCharacterCount = false,
   intent = 'primary',
   size = 'md',
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   textareaStyle,
   testID,
@@ -41,6 +45,9 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
     resize,
     isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
     isAtLimit: maxLength ? value.length >= maxLength : false,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerProps = getWebProps([textAreaStyles.container, style as any]);

package/src/TextArea/types.ts

@@ -1,12 +1,13 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { FormInputStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TextAreaIntentVariant = Intent;
 export type TextAreaSizeVariant = Size;
 export type TextAreaResizeVariant = 'none' | 'vertical' | 'horizontal' | 'both';
 
-export interface TextAreaProps {
+export interface TextAreaProps extends FormInputStyleProps {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;

package/src/View/View.native.tsx

@@ -1,46 +1,69 @@
 import React, { forwardRef } from 'react';
-import { View as RNView, ViewStyle } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView, ViewStyle } from 'react-native';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 
-const View = forwardRef<RNView, ViewProps>(({
+const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   children,
-  spacing = 'none',
-  marginVariant = 'none',
   background = 'transparent',
   radius = 'none',
   border = 'none',
-  backgroundColor,
+  // Spacing variants from ContainerStyleProps
+  gap,
   padding,
+  paddingVertical,
+  paddingHorizontal,
   margin,
+  marginVertical,
+  marginHorizontal,
+  // Override props
+  backgroundColor,
   borderRadius,
   borderWidth,
   borderColor,
+  scrollable = false,
   style,
   testID,
 }, ref) => {
   viewStyles.useVariants({
-    spacing,
     background,
     radius,
     border,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const getStyles = (): ViewStyle => {
     const baseStyles: ViewStyle = {};
-    
+
     if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
-    if (padding !== undefined) baseStyles.padding = padding;
-    if (margin !== undefined) baseStyles.margin = margin;
     if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
     if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
     if (borderColor) baseStyles.borderColor = borderColor;
-    
+
     return baseStyles;
   };
 
+  if (scrollable) {
+    return (
+      <RNScrollView
+        ref={ref as any}
+        style={[{ flex: 1 }, style]}
+        contentContainerStyle={[viewStyles.view, getStyles()]}
+        testID={testID}
+      >
+        {children}
+      </RNScrollView>
+    );
+  }
+
   return (
-    <RNView ref={ref} style={[viewStyles.view, getStyles(), style]} testID={testID}>
+    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID}>
       {children}
     </RNView>
   );
@@ -48,4 +71,4 @@ const View = forwardRef<RNView, ViewProps>(({
 
 View.displayName = 'View';
 
-export default View; 
+export default View;

package/src/View/View.styles.tsx

@@ -1,92 +1,89 @@
-
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Surface} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant, ViewSpacingVariant } from './types';
+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';
 
 type ViewVariants = {
-    spacing: ViewSpacingVariant;
-    background: ViewBackgroundVariant;
-    radius: ViewRadiusVariant;
-    border: ViewBorderVariant;
-}
+  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 spacing variants for view
- */
-function createSpacingVariants(theme: Theme) {
-    const spacingVariants = buildSizeVariants(theme, 'view', (size) => ({
-        padding: size.padding,
-        gap: size.spacing,
-    }));
-
-    spacingVariants['none'] = {
-        padding: 0,
-        gap: 0,
-    };
-
-    return spacingVariants as Record<ViewSpacingVariant, Partial<ExpandedViewStyles>>;
-}
+  view: ExpandedViewStyles;
+};
 
 /**
  * Create background variants for view
  */
 function createBackgroundVariants(theme: Theme) {
-    const variants: any = {
-        transparent: {
-            backgroundColor: 'transparent',
-        },
-    };
+  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],
-        };
-    }
+  // Add all surface colors programmatically
+  for (const surface in theme.colors.surface) {
+    variants[surface] = {
+      backgroundColor: theme.colors.surface[surface as Surface],
+    };
+  }
 
-    return variants;
+  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;
+  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;
+  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
@@ -94,18 +91,24 @@ function createBorderVariants(theme: Theme) {
 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',
-        variants: {
-            spacing: createSpacingVariants(theme),
-            background: createBackgroundVariants(theme),
-            radius: createRadiusVariants(),
-            border: createBorderVariants(theme),
-        },
-        _web: {
-            display: 'flex',
-            flexDirection: 'column',
-            boxSizing: 'border-box',
-        },
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+      },
     },
   };
-});
+});

package/src/View/View.web.tsx

@@ -6,17 +6,23 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const View = forwardRef<HTMLDivElement, ViewProps>(({
   children,
-  spacing = 'none',
-  marginVariant = 'none',
   background = 'transparent',
   radius = 'none',
   border = 'none',
-  backgroundColor,
+  // Spacing variants from ContainerStyleProps
+  gap,
   padding,
+  paddingVertical,
+  paddingHorizontal,
   margin,
+  marginVertical,
+  marginHorizontal,
+  // Override props
+  backgroundColor,
   borderRadius,
   borderWidth,
   borderColor,
+  scrollable, // accepted but no-op on web - layout handles scrolling
   style,
   testID,
 }, ref) => {
@@ -24,28 +30,31 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     background,
     radius,
     border,
-    spacing,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Create dynamic styles based on custom props (overrides variants)
   const dynamicStyles: any = {};
 
   if (backgroundColor) dynamicStyles.backgroundColor = backgroundColor;
-  if (padding !== undefined) dynamicStyles.padding = padding;
-  if (margin !== undefined) dynamicStyles.margin = margin;
   if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
   if (borderWidth !== undefined) dynamicStyles.borderWidth = borderWidth;
   if (borderColor) dynamicStyles.borderColor = borderColor;
 
   /** @ts-ignore */
-  const webProps = getWebProps(viewStyles.view);
+  const webProps = getWebProps([viewStyles.view, dynamicStyles, style as any]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
       {...webProps}
-      style={style as any}
       ref={mergedRef}
       data-testid={testID}
     >
@@ -56,4 +65,4 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
 
 View.displayName = 'View';
 
-export default View; 
+export default View;