@idealyst/components 1.0.99 → 1.1.0

package/src/examples/BreadcrumbExamples.tsx

@@ -65,87 +65,87 @@ export const BreadcrumbExamples = () => {
 
   return (
     <Screen background="primary" safeArea padding="lg">
-      <View spacing="xl" style={{ maxWidth: 800, width: '100%', marginHorizontal: 'auto' }}>
-        <Text size="xl" weight="bold">Breadcrumb Examples</Text>
+      <View gap="xl" style={{ maxWidth: 800, width: '100%', marginHorizontal: 'auto' }}>
+        <Text typography="h3">Breadcrumb Examples</Text>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Basic Breadcrumb</Text>
+        <View gap="md">
+          <Text typography="h5">Basic Breadcrumb</Text>
           <Breadcrumb items={basicItems} />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">With Icons (Components)</Text>
+        <View gap="md">
+          <Text typography="h5">With Icons (Components)</Text>
           <Breadcrumb items={withIconsItems} />
-          <Text size="sm" color="secondary">Using Icon components</Text>
+          <Text typography="caption" color="secondary">Using Icon components</Text>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">With Icons (Icon Names)</Text>
+        <View gap="md">
+          <Text typography="h5">With Icons (Icon Names)</Text>
           <Breadcrumb items={withIconNamesItems} />
-          <Text size="sm" color="secondary">Using icon name strings (recommended)</Text>
+          <Text typography="caption" color="secondary">Using icon name strings (recommended)</Text>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Custom Separator</Text>
-          <View spacing="sm">
+        <View gap="md">
+          <Text typography="h5">Custom Separator</Text>
+          <View gap="sm">
             <Breadcrumb items={basicItems} separator=">" />
             <Breadcrumb items={basicItems} separator="•" />
             <Breadcrumb items={basicItems} separator={<Icon name="chevron-right" size="sm" />} />
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Sizes</Text>
-          <View spacing="sm">
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Small</Text>
+        <View gap="md">
+          <Text typography="h5">Sizes</Text>
+          <View gap="sm">
+            <View gap="xs">
+              <Text typography="subtitle1">Small</Text>
               <Breadcrumb items={basicItems} size="sm" />
             </View>
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Medium (Default)</Text>
+            <View gap="xs">
+              <Text typography="subtitle1">Medium (Default)</Text>
               <Breadcrumb items={basicItems} size="md" />
             </View>
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Large</Text>
+            <View gap="xs">
+              <Text typography="subtitle1">Large</Text>
               <Breadcrumb items={basicItems} size="lg" />
             </View>
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Intent Colors</Text>
-          <View spacing="sm">
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Primary (Default)</Text>
+        <View gap="md">
+          <Text typography="h5">Intent Colors</Text>
+          <View gap="sm">
+            <View gap="xs">
+              <Text typography="subtitle1">Primary (Default)</Text>
               <Breadcrumb items={basicItems} intent="primary" />
             </View>
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Neutral</Text>
+            <View gap="xs">
+              <Text typography="subtitle1">Neutral</Text>
               <Breadcrumb items={basicItems} intent="neutral" />
             </View>
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Truncation</Text>
-          <View spacing="sm">
-            <View spacing="xs">
-              <Text size="sm" color="secondary">Full path (7 items):</Text>
+        <View gap="md">
+          <Text typography="h5">Truncation</Text>
+          <View gap="sm">
+            <View gap="xs">
+              <Text typography="caption" color="secondary">Full path (7 items):</Text>
               <Breadcrumb items={longPathItems} />
             </View>
-            <View spacing="xs">
-              <Text size="sm" color="secondary">Truncated to 4 items (shows first + last 3):</Text>
+            <View gap="xs">
+              <Text typography="caption" color="secondary">Truncated to 4 items (shows first + last 3):</Text>
               <Breadcrumb items={longPathItems} maxItems={4} />
             </View>
-            <View spacing="xs">
-              <Text size="sm" color="secondary">Truncated to 3 items (shows first + last 2):</Text>
+            <View gap="xs">
+              <Text typography="caption" color="secondary">Truncated to 3 items (shows first + last 2):</Text>
               <Breadcrumb items={longPathItems} maxItems={3} />
             </View>
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">With Disabled Items</Text>
+        <View gap="md">
+          <Text typography="h5">With Disabled Items</Text>
           <Breadcrumb
             items={[
               { label: 'Home', onPress: () => console.log('Home') },
@@ -156,8 +156,8 @@ export const BreadcrumbExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Non-clickable Items</Text>
+        <View gap="md">
+          <Text typography="h5">Non-clickable Items</Text>
           <Breadcrumb
             items={[
               { label: 'Home' },
@@ -166,11 +166,11 @@ export const BreadcrumbExamples = () => {
               { label: 'Item' },
             ]}
           />
-          <Text size="sm" color="secondary">None of these items are clickable</Text>
+          <Text typography="caption" color="secondary">None of these items are clickable</Text>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Mixed Clickable & Non-clickable</Text>
+        <View gap="md">
+          <Text typography="h5">Mixed Clickable & Non-clickable</Text>
           <Breadcrumb
             items={[
               { label: 'Home', onPress: () => console.log('Home') },
@@ -181,8 +181,8 @@ export const BreadcrumbExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">File System Example</Text>
+        <View gap="md">
+          <Text typography="h5">File System Example</Text>
           <Breadcrumb
             items={[
               {
@@ -214,8 +214,8 @@ export const BreadcrumbExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">E-commerce Example</Text>
+        <View gap="md">
+          <Text typography="h5">E-commerce Example</Text>
           <Breadcrumb
             items={[
               { label: 'Shop', onPress: () => console.log('Shop') },
@@ -228,32 +228,32 @@ export const BreadcrumbExamples = () => {
           />
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Responsive Breadcrumbs</Text>
-          <Text size="sm" color="secondary">
+        <View gap="md">
+          <Text typography="h5">Responsive Breadcrumbs</Text>
+          <Text typography="caption" color="secondary">
             Automatically collapses middle items into a dropdown menu on narrow screens
           </Text>
-          <View spacing="sm">
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Default (minVisibleItems: 3)</Text>
-              <Text size="sm" color="secondary">Shows first item + dropdown + last item</Text>
+          <View gap="sm">
+            <View gap="xs">
+              <Text typography="subtitle1">Default (minVisibleItems: 3)</Text>
+              <Text typography="caption" color="secondary">Shows first item + dropdown + last item</Text>
               <Breadcrumb
                 items={longPathItems}
                 responsive
               />
             </View>
-            <View spacing="xs">
-              <Text size="md" weight="semibold">More Visible Items (minVisibleItems: 4)</Text>
-              <Text size="sm" color="secondary">Shows first item + dropdown + last 2 items</Text>
+            <View gap="xs">
+              <Text typography="subtitle1">More Visible Items (minVisibleItems: 4)</Text>
+              <Text typography="caption" color="secondary">Shows first item + dropdown + last 2 items</Text>
               <Breadcrumb
                 items={longPathItems}
                 responsive
                 minVisibleItems={4}
               />
             </View>
-            <View spacing="xs">
-              <Text size="md" weight="semibold">Fewer Items (minVisibleItems: 2)</Text>
-              <Text size="sm" color="secondary">Shows first item + dropdown (all items collapsed)</Text>
+            <View gap="xs">
+              <Text typography="subtitle1">Fewer Items (minVisibleItems: 2)</Text>
+              <Text typography="caption" color="secondary">Shows first item + dropdown (all items collapsed)</Text>
               <Breadcrumb
                 items={longPathItems}
                 responsive
@@ -263,8 +263,8 @@ export const BreadcrumbExamples = () => {
           </View>
         </View>
 
-        <View spacing="md">
-          <Text size="lg" weight="semibold">Responsive with Icons</Text>
+        <View gap="md">
+          <Text typography="h5">Responsive with Icons</Text>
           <Breadcrumb
             items={[
               {

package/src/examples/ButtonExamples.tsx

@@ -8,14 +8,14 @@ export const ButtonExamples = () => {
 
   return (
     <Screen background="primary">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         Button Examples
       </Text>
       
       {/* Button Variants */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Variants</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Variants</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button 
             type="contained" 
@@ -42,8 +42,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Button 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' }}>
           <Button
             size="sm"
@@ -73,8 +73,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Button Intents */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Intents</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Intents</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button 
             intent="primary"
@@ -115,8 +115,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Disabled States */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Disabled States</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Disabled States</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button
             type="contained"
@@ -146,8 +146,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Buttons with Icons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Buttons with Icons</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Buttons with Icons</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button
             type="contained"
@@ -194,8 +194,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Icon-only Buttons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Icon-only Buttons</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Icon-only Buttons</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Button
             type="contained"
@@ -234,8 +234,8 @@ export const ButtonExamples = () => {
       </View>
 
       {/* Different Intents with Icons */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Icons with Different Intents</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Icons with Different Intents</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button
             type="contained"
@@ -271,6 +271,118 @@ export const ButtonExamples = () => {
           </Button>
         </View>
       </View>
+
+      {/* Gradient Overlay */}
+      <View gap="md">
+        <Text typography="subtitle1">Gradient Overlay</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            onPress={() => handlePress('no-gradient')}
+          >
+            No Gradient
+          </Button>
+          <Button
+            type="contained"
+            intent="primary"
+            gradient="darken"
+            onPress={() => handlePress('gradient-darken')}
+          >
+            Darken
+          </Button>
+          <Button
+            type="contained"
+            intent="primary"
+            gradient="lighten"
+            onPress={() => handlePress('gradient-lighten')}
+          >
+            Lighten
+          </Button>
+        </View>
+      </View>
+
+      {/* Gradient with Different Intents */}
+      <View gap="md">
+        <Text typography="subtitle1">Gradient Intents (Darken)</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            gradient="darken"
+            onPress={() => handlePress('gradient-primary')}
+          >
+            Primary
+          </Button>
+          <Button
+            type="contained"
+            intent="success"
+            gradient="darken"
+            onPress={() => handlePress('gradient-success')}
+          >
+            Success
+          </Button>
+          <Button
+            type="contained"
+            intent="error"
+            gradient="darken"
+            onPress={() => handlePress('gradient-error')}
+          >
+            Error
+          </Button>
+          <Button
+            type="contained"
+            intent="warning"
+            gradient="darken"
+            onPress={() => handlePress('gradient-warning')}
+          >
+            Warning
+          </Button>
+          <Button
+            type="contained"
+            intent="neutral"
+            gradient="darken"
+            onPress={() => handlePress('gradient-neutral')}
+          >
+            Neutral
+          </Button>
+        </View>
+      </View>
+
+      {/* Gradient with Icons */}
+      <View gap="md">
+        <Text typography="subtitle1">Gradient with Icons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            gradient="darken"
+            leftIcon="rocket-launch"
+            onPress={() => handlePress('gradient-icon-launch')}
+          >
+            Launch
+          </Button>
+          <Button
+            type="contained"
+            intent="success"
+            gradient="lighten"
+            leftIcon="check"
+            rightIcon="arrow-right"
+            onPress={() => handlePress('gradient-icon-submit')}
+          >
+            Submit
+          </Button>
+          <Button
+            type="contained"
+            intent="error"
+            gradient="darken"
+            leftIcon="delete"
+            onPress={() => handlePress('gradient-icon-delete')}
+          >
+            Delete
+          </Button>
+        </View>
+      </View>
     </View>
     </Screen>
   );

package/src/examples/CardExamples.tsx

@@ -8,39 +8,39 @@ export const CardExamples = () => {
 
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         Card Examples
       </Text>
       
       {/* Card Variants */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Variants</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Variants</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Card type="default" padding="md">
             <Text>Default Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               This is a default card with standard styling
             </Text>
           </Card>
           
           <Card type="outlined" padding="md">
             <Text>Outlined Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               This is an outlined card with border
             </Text>
           </Card>
           
           <Card type="elevated" padding="md">
             <Text>Elevated Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               This is an elevated card with shadow
             </Text>
           </Card>
           
           <Card type="filled" padding="md">
             <Text>Filled Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               This is a filled card with background
             </Text>
           </Card>
@@ -48,9 +48,9 @@ export const CardExamples = () => {
       </View>
 
       {/* Card Intents */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Intents</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Intents</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Card intent="neutral" padding="md" type="outlined">
             <Text>Neutral Card</Text>
           </Card>
@@ -78,10 +78,10 @@ export const CardExamples = () => {
       </View>
 
       {/* Card Padding */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Padding</Text>
-        <View spacing="sm">
-          <Card padding="none" type="outlined">
+      <View gap="md">
+        <Text typography="subtitle1">Padding</Text>
+        <View gap="sm">
+          <Card type="outlined">
             <Text>No Padding</Text>
           </Card>
           
@@ -100,9 +100,9 @@ export const CardExamples = () => {
       </View>
 
       {/* Card Radius */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Border Radius</Text>
-        <View spacing="sm">
+      <View gap="md">
+        <Text typography="subtitle1">Border Radius</Text>
+        <View gap="sm">
           <Card radius="none" type="outlined" padding="md">
             <Text>No Radius</Text>
           </Card>
@@ -122,9 +122,9 @@ export const CardExamples = () => {
       </View>
 
       {/* Clickable Cards */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Interactive Cards</Text>
-        <View spacing="sm">
+      <View gap="md">
+        <Text typography="subtitle1">Interactive Cards</Text>
+        <View gap="sm">
           <Card 
             clickable 
             onPress={() => handleCardPress('clickable')} 
@@ -132,7 +132,7 @@ export const CardExamples = () => {
             padding="md"
           >
             <Text weight="semibold">Clickable Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               Click me to see interaction
             </Text>
           </Card>
@@ -145,7 +145,7 @@ export const CardExamples = () => {
             padding="md"
           >
             <Text weight="semibold">Disabled Card</Text>
-            <Text size="sm" color="secondary">
+            <Text typography="caption" color="secondary">
               This card is disabled
             </Text>
           </Card>
@@ -153,11 +153,11 @@ export const CardExamples = () => {
       </View>
 
       {/* Complex Card Layout */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Complex Layout</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Complex Layout</Text>
         <Card type="elevated" padding="lg" radius="md">
-          <Text size="lg" weight="bold">Product Card</Text>
-          <Text size="sm" color="secondary" style={{ marginVertical: 8 }}>
+          <Text typography="h4">Product Card</Text>
+          <Text typography="caption" color="secondary" style={{ marginVertical: 8 }}>
             This is a more complex card layout with multiple elements
           </Text>
           <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>