@idealyst/components 1.0.99 → 1.1.0

package/src/View/types.ts

@@ -1,29 +1,19 @@
 import { Size, Surface } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type ViewBackgroundVariant = Surface | 'transparent';
-export type ViewSpacingVariant = Size | 'none';
 export type ViewRadiusVariant = Size | 'none';
 export type ViewBorderVariant = 'none' | 'thin' | 'thick';
 
-export interface ViewProps {
+export interface ViewProps extends ContainerStyleProps {
   /**
    * The content to display inside the view
    */
   children?: ReactNode;
 
-  /**
-   * Padding/spacing variant
-   */
-  spacing?: ViewSpacingVariant;
-
-  /**
-   * Margin variant
-   */
-  marginVariant?: ViewSpacingVariant;
-
   /**
    * Background variant
    */
@@ -44,16 +34,6 @@ export interface ViewProps {
    */
   backgroundColor?: string;
 
-  /**
-   * Custom padding (overrides spacing variant)
-   */
-  padding?: number;
-
-  /**
-   * Custom margin (overrides marginVariant)
-   */
-  margin?: number;
-
   /**
    * Custom border radius (overrides radius variant)
    */
@@ -74,8 +54,13 @@ export interface ViewProps {
    */
   style?: React.CSSProperties | StyleProp<ViewStyle>;
 
+  /**
+   * Enable scrollable content (uses ScrollView on native, overflow:auto on web)
+   */
+  scrollable?: boolean;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-} 
+}

package/src/examples/AccordionExamples.tsx

@@ -27,7 +27,7 @@ export const AccordionExamples: React.FC = () => {
       id: 'rich1',
       title: 'Rich Content Example',
       content: (
-        <View spacing="sm">
+        <View gap="sm">
           <Text weight="semibold">Features:</Text>
           <Text>• Cross-platform support</Text>
           <Text>• Type-safe styling</Text>
@@ -39,7 +39,7 @@ export const AccordionExamples: React.FC = () => {
       id: 'rich2',
       title: 'Another Section',
       content: (
-        <View>
+        <View gap="xl">
           <Text>This section contains rich content with multiple paragraphs.</Text>
           <Text style={{ marginTop: 8 }}>You can include any React components here.</Text>
         </View>
@@ -55,67 +55,67 @@ export const AccordionExamples: React.FC = () => {
 
   return (
     <Screen background="primary" padding="lg">
-    <View spacing="lg">
-      <Text size="xl" weight="bold">Accordion Examples</Text>
+    <View gap="lg">
+      <Text typography="h3">Accordion Examples</Text>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Basic Accordion</Text>
+      <View gap="md">
+        <Text typography="h5">Basic Accordion</Text>
         <Accordion items={basicItems} />
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Allow Multiple Expanded</Text>
+      <View gap="md">
+        <Text typography="h5">Allow Multiple Expanded</Text>
         <Accordion items={basicItems} allowMultiple />
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Default Expanded</Text>
+      <View gap="md">
+        <Text typography="h5">Default Expanded</Text>
         <Accordion items={basicItems} defaultExpanded={['item1', 'item2']} allowMultiple />
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Variants</Text>
-        <View spacing="sm">
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Default</Text>
+      <View gap="md">
+        <Text typography="h5">Variants</Text>
+        <View gap="sm">
+          <View gap="xs">
+            <Text typography="body2">Default</Text>
             <Accordion items={basicItems} type="standard" />
           </View>
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Separated</Text>
+          <View gap="xs">
+            <Text typography="body2">Separated</Text>
             <Accordion items={basicItems} type="separated" />
           </View>
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Bordered</Text>
+          <View gap="xs">
+            <Text typography="body2">Bordered</Text>
             <Accordion items={basicItems} type="bordered" />
           </View>
         </View>
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Sizes</Text>
-        <View spacing="sm">
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Small</Text>
+      <View gap="md">
+        <Text typography="h5">Sizes</Text>
+        <View gap="sm">
+          <View gap="xs">
+            <Text typography="body2">Small</Text>
             <Accordion items={basicItems} size="sm" type="separated" />
           </View>
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Medium (default)</Text>
+          <View gap="xs">
+            <Text typography="body2">Medium (default)</Text>
             <Accordion items={basicItems} size="md" type="separated" />
           </View>
-          <View spacing="xs">
-            <Text size="sm" weight="medium">Large</Text>
+          <View gap="xs">
+            <Text typography="body2">Large</Text>
             <Accordion items={basicItems} size="lg" type="separated" />
           </View>
         </View>
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Rich Content</Text>
+      <View gap="md">
+        <Text typography="h5">Rich Content</Text>
         <Accordion items={richContentItems} type="bordered" />
       </View>
 
-      <View spacing="md">
-        <Text size="lg" weight="semibold">Disabled Items</Text>
+      <View gap="md">
+        <Text typography="h5">Disabled Items</Text>
         <Accordion items={disabledItems} type="separated" />
       </View>
     </View>

package/src/examples/AlertExamples.tsx

@@ -6,13 +6,13 @@ export const AlertExamples = () => {
 
   return (
     <Screen background="primary" safeArea>
-      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
-        <Text size="xl" weight="bold">Alert Examples</Text>
+      <View gap="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text typography="h3">Alert Examples</Text>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Intent Variants</Text>
+        <View gap="md">
+          <Text typography="h5">Intent Variants</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             <Alert
               intent="primary"
               title="Primary"
@@ -51,11 +51,11 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Style Variants</Text>
+        <View gap="md">
+          <Text typography="h5">Style Variants</Text>
 
-          <View spacing="sm">
-            <Text size="md" weight="semibold">Filled</Text>
+          <View gap="sm">
+            <Text typography="subtitle1">Filled</Text>
             <Alert
               type="filled"
               intent="primary"
@@ -64,8 +64,8 @@ export const AlertExamples = () => {
             />
           </View>
 
-          <View spacing="sm">
-            <Text size="md" weight="semibold">Outlined</Text>
+          <View gap="sm">
+            <Text typography="subtitle1">Outlined</Text>
             <Alert
               type="outlined"
               intent="primary"
@@ -74,8 +74,8 @@ export const AlertExamples = () => {
             />
           </View>
 
-          <View spacing="sm">
-            <Text size="md" weight="semibold">Soft (Default)</Text>
+          <View gap="sm">
+            <Text typography="subtitle1">Soft (Default)</Text>
             <Alert
               type="soft"
               intent="primary"
@@ -85,8 +85,8 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Without Icons</Text>
+        <View gap="md">
+          <Text typography="h5">Without Icons</Text>
 
           <Alert
             intent="success"
@@ -96,10 +96,10 @@ export const AlertExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Custom Icons</Text>
+        <View gap="md">
+          <Text typography="h5">Custom Icons</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             <Alert
               intent="info"
               title="Custom Icon"
@@ -116,10 +116,10 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Dismissible Alerts</Text>
+        <View gap="md">
+          <Text typography="h5">Dismissible Alerts</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             {successVisible && (
               <Alert
                 intent="success"
@@ -155,10 +155,10 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">With Actions</Text>
+        <View gap="md">
+          <Text typography="h5">With Actions</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             <Alert
               intent="warning"
               title="Unsaved Changes"
@@ -189,26 +189,26 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">With Children</Text>
+        <View gap="md">
+          <Text typography="h5">With Children</Text>
 
           <Alert
             intent="info"
             title="Custom Content"
           >
-            <View spacing="sm">
-              <Text size="sm">You can use children to add custom content:</Text>
+            <View gap="sm">
+              <Text typography="body2">You can use children to add custom content:</Text>
               <View style={{ paddingLeft: 16 }}>
-                <Text size="sm">• Custom formatted text</Text>
-                <Text size="sm">• Lists and structured content</Text>
-                <Text size="sm">• Any React components</Text>
+                <Text typography="body2">• Custom formatted text</Text>
+                <Text typography="body2">• Lists and structured content</Text>
+                <Text typography="body2">• Any React components</Text>
               </View>
             </View>
           </Alert>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Complex Example</Text>
+        <View gap="md">
+          <Text typography="h5">Complex Example</Text>
 
           <Alert
             type="filled"
@@ -230,10 +230,10 @@ export const AlertExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">All Intent Colors (Soft Variant)</Text>
+        <View gap="md">
+          <Text typography="h5">All Intent Colors (Soft Variant)</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}
@@ -245,10 +245,10 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">All Intent Colors (Outlined Variant)</Text>
+        <View gap="md">
+          <Text typography="h5">All Intent Colors (Outlined Variant)</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}
@@ -260,10 +260,10 @@ export const AlertExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">All Intent Colors (Filled Variant)</Text>
+        <View gap="md">
+          <Text typography="h5">All Intent Colors (Filled Variant)</Text>
 
-          <View spacing="sm">
+          <View gap="sm">
             {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}

package/src/examples/AvatarExamples.tsx

@@ -4,14 +4,14 @@ import { Screen, View, Text, Avatar } from '../index';
 export const AvatarExamples = () => {
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         Avatar Examples
       </Text>
       
       {/* Avatar Sizes */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Sizes</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Sizes</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar size="sm" fallback="S" />
           <Avatar size="md" fallback="M" />
@@ -21,8 +21,8 @@ export const AvatarExamples = () => {
       </View>
 
       {/* Avatar Shapes */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Shapes</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Shapes</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar shape="circle" fallback="C" size="lg" />
           <Avatar shape="square" fallback="S" size="lg" />
@@ -30,8 +30,8 @@ export const AvatarExamples = () => {
       </View>
 
       {/* Avatar with Fallbacks */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Fallback Text</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Fallback Text</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar fallback="JD" alt="John Doe" />
           <Avatar fallback="AB" alt="Alice Brown" />
@@ -41,8 +41,8 @@ export const AvatarExamples = () => {
       </View>
 
       {/* Avatar with Images */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">With Images</Text>
+      <View gap="md">
+        <Text typography="subtitle1">With Images</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar 
             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
@@ -63,8 +63,8 @@ export const AvatarExamples = () => {
       </View>
 
       {/* Avatar Group */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Avatar Group</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Avatar Group</Text>
         <View style={{ flexDirection: 'row', gap: -8, alignItems: 'center' }}>
           <Avatar fallback="JD" size="md" />
           <Avatar fallback="AB" size="md" />
@@ -74,20 +74,20 @@ export const AvatarExamples = () => {
       </View>
 
       {/* Different Size Combinations */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Size Combinations</Text>
-        <View spacing="sm">
+      <View gap="md">
+        <Text typography="subtitle1">Size Combinations</Text>
+        <View gap="sm">
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
             <Avatar size="sm" fallback="S" />
-            <Text size="sm">Small avatar with text</Text>
+            <Text typography="body2">Small avatar with text</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
             <Avatar size="md" fallback="M" />
-            <Text size="md">Medium avatar with text</Text>
+            <Text typography="body1">Medium avatar with text</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
             <Avatar size="lg" fallback="L" />
-            <Text size="lg">Large avatar with text</Text>
+            <Text typography="h5">Large avatar with text</Text>
           </View>
         </View>
       </View>

package/src/examples/BadgeExamples.tsx

@@ -4,14 +4,14 @@ import { Screen, View, Text, Badge, Button } from '../index';
 export const BadgeExamples = () => {
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="md">
+      <Text typography="h4" align="center">
         Badge Examples
       </Text>
       
       {/* Badge Variants */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Variants</Text>
+      <View gap="xs">
+        <Text typography="subtitle1">Variants</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge type="filled" color="blue">
             Filled
@@ -24,8 +24,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Badge Sizes */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Sizes</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Sizes</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge size="sm" color="blue">
             Small
@@ -40,8 +40,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Badge Colors */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Colors</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Colors</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue">
             Blue
@@ -65,8 +65,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Badge Color Shades */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Color Shades</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Color Shades</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue.200">
             Blue 200
@@ -92,8 +92,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Dot Badges */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Dot Badges</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Dot Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge type="dot" color="blue" size="sm" />
           <Badge type="dot" color="green" size="md" />
@@ -104,8 +104,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Number Badges */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Number Badges</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Number Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="red" size="sm">
             1
@@ -123,8 +123,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Status Badges */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Status Badges</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Status Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="green" type="filled">
             ACTIVE
@@ -145,9 +145,9 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Combined with Other Components */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">With Other Components</Text>
-        <View spacing="sm">
+      <View gap="sm">
+        <Text typography="subtitle1">With Other Components</Text>
+        <View gap="sm">
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text>Notifications</Text>
             <Badge color="red" size="sm">3</Badge>
@@ -161,7 +161,7 @@ export const BadgeExamples = () => {
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text>Status</Text>
             <Badge color="green" type="dot" />
-            <Text size="sm" color="secondary">Online</Text>
+            <Text typography="caption" color="secondary">Online</Text>
           </View>
           
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -174,8 +174,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Category Badges */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Category Badges</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Category Badges</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
           <Badge color="blue" type="outlined">
             React
@@ -196,8 +196,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Badges with Icons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Badges with Icons</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Badges with Icons</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue" icon="information">
             Info
@@ -215,8 +215,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Icon-only Badges */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Icon-only Badges</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Icon-only Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue" icon="star" size="sm" />
           <Badge color="green" icon="heart" size="md" />
@@ -226,8 +226,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Status Badges with Icons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Status with Icons</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Status with Icons</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="green" icon="check">
             VERIFIED
@@ -245,8 +245,8 @@ export const BadgeExamples = () => {
       </View>
 
       {/* Outlined Badges with Icons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Outlined with Icons</Text>
+      <View gap="sm">
+        <Text typography="subtitle1">Outlined with Icons</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue" type="outlined" icon="download">
             Download