@idealyst/components 1.0.83 → 1.0.84

package/src/examples/ButtonExamples.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Screen, View, Button, Text } from '../index';
+import { Screen, View, Button, Text } from '@idealyst/components';
 
 export const ButtonExamples = () => {
   const handlePress = (buttonType: string) => {
@@ -7,32 +7,32 @@ export const ButtonExamples = () => {
   };
 
   return (
-    <Screen background="primary" padding="lg">
+    <Screen background="primary">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Button Examples
       </Text>
       
       {/* Button Variants */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
+        <Text size="md" weight="semibold">Variants</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button 
-            variant="contained" 
+            type="contained" 
             intent="primary"
             onPress={() => handlePress('contained')}
           >
             Contained
           </Button>
           <Button 
-            variant="outlined" 
+            type="outlined" 
             intent="primary"
             onPress={() => handlePress('outlined')}
           >
             Outlined
           </Button>
           <Button 
-            variant="text" 
+            type="text" 
             intent="primary"
             onPress={() => handlePress('text')}
           >
@@ -43,29 +43,29 @@ export const ButtonExamples = () => {
 
       {/* Button Sizes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
+        <Text size="md" weight="semibold">Sizes</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Button 
-            size="small" 
-            variant="contained"
+          <Button
+            size="sm"
+            type="contained"
             intent="primary"
-            onPress={() => handlePress('small')}
+            onPress={() => handlePress('sm')}
           >
             Small
           </Button>
-          <Button 
-            size="medium" 
-            variant="contained"
+          <Button
+            size="md"
+            type="contained"
             intent="primary"
-            onPress={() => handlePress('medium')}
+            onPress={() => handlePress('md')}
           >
             Medium
           </Button>
-          <Button 
-            size="large" 
-            variant="contained"
+          <Button
+            size="lg"
+            type="contained"
             intent="primary"
-            onPress={() => handlePress('large')}
+            onPress={() => handlePress('lg')}
           >
             Large
           </Button>
@@ -74,39 +74,39 @@ export const ButtonExamples = () => {
 
       {/* Button Intents */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
+        <Text size="md" weight="semibold">Intents</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
           <Button 
             intent="primary"
-            variant="contained"
+            type="contained"
             onPress={() => handlePress('primary')}
           >
             Primary
           </Button>
           <Button 
             intent="neutral"
-            variant="contained"
+            type="contained"
             onPress={() => handlePress('neutral')}
           >
             Neutral
           </Button>
           <Button 
             intent="success"
-            variant="contained"
+            type="contained"
             onPress={() => handlePress('success')}
           >
             Success
           </Button>
           <Button 
             intent="error"
-            variant="contained"
+            type="contained"
             onPress={() => handlePress('error')}
           >
             Error
           </Button>
           <Button 
             intent="warning"
-            variant="contained"
+            type="contained"
             onPress={() => handlePress('warning')}
           >
             Warning
@@ -116,26 +116,26 @@ export const ButtonExamples = () => {
 
       {/* Disabled States */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Disabled States</Text>
+        <Text size="md" weight="semibold">Disabled States</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-          <Button 
-            variant="contained" 
+          <Button
+            type="contained"
             intent="primary"
             disabled
             onPress={() => handlePress('disabled-contained')}
           >
             Disabled Contained
           </Button>
-          <Button 
-            variant="outlined" 
+          <Button
+            type="outlined"
             intent="primary"
             disabled
             onPress={() => handlePress('disabled-outlined')}
           >
             Disabled Outlined
           </Button>
-          <Button 
-            variant="text" 
+          <Button
+            type="text"
             intent="primary"
             disabled
             onPress={() => handlePress('disabled-text')}
@@ -144,6 +144,133 @@ export const ButtonExamples = () => {
           </Button>
         </View>
       </View>
+
+      {/* Buttons with Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Buttons with Icons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            leftIcon="plus"
+            onPress={() => handlePress('icon-left')}
+          >
+            Add Item
+          </Button>
+          <Button
+            type="contained"
+            intent="success"
+            rightIcon="check"
+            onPress={() => handlePress('icon-right')}
+          >
+            Save
+          </Button>
+          <Button
+            type="contained"
+            intent="error"
+            leftIcon="delete"
+            rightIcon="alert"
+            onPress={() => handlePress('icon-both')}
+          >
+            Delete
+          </Button>
+          <Button
+            type="outlined"
+            intent="primary"
+            leftIcon="download"
+            onPress={() => handlePress('icon-outlined')}
+          >
+            Download
+          </Button>
+          <Button
+            type="text"
+            intent="primary"
+            leftIcon="pencil"
+            onPress={() => handlePress('icon-text')}
+          >
+            Edit
+          </Button>
+        </View>
+      </View>
+
+      {/* Icon-only Buttons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Icon-only Buttons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            leftIcon="home"
+            size="sm"
+            onPress={() => handlePress('icon-only-small')}
+          />
+          <Button
+            type="contained"
+            intent="primary"
+            leftIcon="cog"
+            size="md"
+            onPress={() => handlePress('icon-only-medium')}
+          />
+          <Button
+            type="contained"
+            intent="primary"
+            leftIcon="heart"
+            size="lg"
+            onPress={() => handlePress('icon-only-large')}
+          />
+          <Button
+            type="outlined"
+            intent="success"
+            leftIcon="check-circle"
+            onPress={() => handlePress('icon-only-outlined')}
+          />
+          <Button
+            type="text"
+            intent="error"
+            leftIcon="close-circle"
+            onPress={() => handlePress('icon-only-text')}
+          />
+        </View>
+      </View>
+
+      {/* Different Intents with Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Icons with Different Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            leftIcon="information"
+            onPress={() => handlePress('info')}
+          >
+            Info
+          </Button>
+          <Button
+            type="contained"
+            intent="success"
+            leftIcon="check-circle"
+            onPress={() => handlePress('success')}
+          >
+            Success
+          </Button>
+          <Button
+            type="contained"
+            intent="warning"
+            leftIcon="alert"
+            onPress={() => handlePress('warning')}
+          >
+            Warning
+          </Button>
+          <Button
+            type="contained"
+            intent="error"
+            leftIcon="alert-circle"
+            onPress={() => handlePress('error')}
+          >
+            Error
+          </Button>
+        </View>
+      </View>
     </View>
     </Screen>
   );

package/src/examples/CardExamples.tsx

@@ -9,38 +9,38 @@ export const CardExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Card Examples
       </Text>
       
       {/* Card Variants */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
+        <Text size="md" weight="semibold">Variants</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Card variant="default" padding="medium">
+          <Card type="default" padding="md">
             <Text>Default Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               This is a default card with standard styling
             </Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Outlined Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               This is an outlined card with border
             </Text>
           </Card>
           
-          <Card variant="elevated" padding="medium">
+          <Card type="elevated" padding="md">
             <Text>Elevated Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               This is an elevated card with shadow
             </Text>
           </Card>
           
-          <Card variant="filled" padding="medium">
+          <Card type="filled" padding="md">
             <Text>Filled Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               This is a filled card with background
             </Text>
           </Card>
@@ -49,29 +49,29 @@ export const CardExamples = () => {
 
       {/* Card Intents */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
+        <Text size="md" weight="semibold">Intents</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Card intent="neutral" padding="medium" variant="outlined">
+          <Card intent="neutral" padding="md" type="outlined">
             <Text>Neutral Card</Text>
           </Card>
           
-          <Card intent="primary" padding="medium" variant="outlined">
+          <Card intent="primary" padding="md" type="outlined">
             <Text>Primary Card</Text>
           </Card>
           
-          <Card intent="success" padding="medium" variant="outlined">
+          <Card intent="success" padding="md" type="outlined">
             <Text>Success Card</Text>
           </Card>
           
-          <Card intent="error" padding="medium" variant="outlined">
+          <Card intent="error" padding="md" type="outlined">
             <Text>Error Card</Text>
           </Card>
           
-          <Card intent="warning" padding="medium" variant="outlined">
+          <Card intent="warning" padding="md" type="outlined">
             <Text>Warning Card</Text>
           </Card>
           
-          <Card intent="info" padding="medium" variant="outlined">
+          <Card intent="info" padding="md" type="outlined">
             <Text>Info Card</Text>
           </Card>
         </View>
@@ -79,21 +79,21 @@ export const CardExamples = () => {
 
       {/* Card Padding */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Padding</Text>
+        <Text size="md" weight="semibold">Padding</Text>
         <View spacing="sm">
-          <Card padding="none" variant="outlined">
+          <Card padding="none" type="outlined">
             <Text>No Padding</Text>
           </Card>
           
-          <Card padding="small" variant="outlined">
+          <Card padding="sm" type="outlined">
             <Text>Small Padding</Text>
           </Card>
           
-          <Card padding="medium" variant="outlined">
+          <Card padding="md" type="outlined">
             <Text>Medium Padding</Text>
           </Card>
           
-          <Card padding="large" variant="outlined">
+          <Card padding="lg" type="outlined">
             <Text>Large Padding</Text>
           </Card>
         </View>
@@ -101,21 +101,21 @@ export const CardExamples = () => {
 
       {/* Card Radius */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Border Radius</Text>
+        <Text size="md" weight="semibold">Border Radius</Text>
         <View spacing="sm">
-          <Card radius="none" variant="outlined" padding="medium">
+          <Card radius="none" type="outlined" padding="md">
             <Text>No Radius</Text>
           </Card>
           
-          <Card radius="small" variant="outlined" padding="medium">
+          <Card radius="sm" type="outlined" padding="md">
             <Text>Small Radius</Text>
           </Card>
           
-          <Card radius="medium" variant="outlined" padding="medium">
+          <Card radius="md" type="outlined" padding="md">
             <Text>Medium Radius</Text>
           </Card>
           
-          <Card radius="large" variant="outlined" padding="medium">
+          <Card radius="lg" type="outlined" padding="md">
             <Text>Large Radius</Text>
           </Card>
         </View>
@@ -123,16 +123,16 @@ export const CardExamples = () => {
 
       {/* Clickable Cards */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Interactive Cards</Text>
+        <Text size="md" weight="semibold">Interactive Cards</Text>
         <View spacing="sm">
           <Card 
             clickable 
             onPress={() => handleCardPress('clickable')} 
-            variant="outlined" 
-            padding="medium"
+            type="outlined" 
+            padding="md"
           >
             <Text weight="semibold">Clickable Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Click me to see interaction
             </Text>
           </Card>
@@ -141,11 +141,11 @@ export const CardExamples = () => {
             clickable 
             disabled 
             onPress={() => handleCardPress('disabled')} 
-            variant="outlined" 
-            padding="medium"
+            type="outlined" 
+            padding="md"
           >
             <Text weight="semibold">Disabled Card</Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               This card is disabled
             </Text>
           </Card>
@@ -154,17 +154,17 @@ export const CardExamples = () => {
 
       {/* Complex Card Layout */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Complex Layout</Text>
-        <Card variant="elevated" padding="large" radius="medium">
-          <Text size="large" weight="bold">Product Card</Text>
-          <Text size="small" color="secondary" style={{ marginVertical: 8 }}>
+        <Text size="md" weight="semibold">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 }}>
             This is a more complex card layout with multiple elements
           </Text>
           <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
-            <Button size="small" variant="contained" intent="primary">
+            <Button size="sm" type="contained" intent="primary">
               Buy Now
             </Button>
-            <Button size="small" variant="outlined" intent="neutral">
+            <Button size="sm" type="outlined" intent="neutral">
               Add to Cart
             </Button>
           </View>

package/src/examples/CheckboxExamples.tsx

@@ -11,13 +11,13 @@ export const CheckboxExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Checkbox Examples
       </Text>
       
       {/* Basic Checkbox */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Basic Checkbox</Text>
+        <Text size="md" weight="semibold">Basic Checkbox</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={basicChecked}
@@ -39,22 +39,22 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox Sizes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
+        <Text size="md" weight="semibold">Sizes</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
-            size="small"
+            size="sm"
             checked={true}
             onCheckedChange={() => {}}
             label="Small checkbox"
           />
           <Checkbox
-            size="medium"
+            size="md"
             checked={true}
             onCheckedChange={() => {}}
             label="Medium checkbox"
           />
           <Checkbox
-            size="large"
+            size="lg"
             checked={true}
             onCheckedChange={() => {}}
             label="Large checkbox"
@@ -64,7 +64,7 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox Intents */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
+        <Text size="md" weight="semibold">Intents</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             intent="primary"
@@ -107,7 +107,7 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox Variants */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
+        <Text size="md" weight="semibold">Variants</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             variant="default"
@@ -126,7 +126,7 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox States */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">States</Text>
+        <Text size="md" weight="semibold">States</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={false}
@@ -161,7 +161,7 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox with Custom Children */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Custom Content</Text>
+        <Text size="md" weight="semibold">Custom Content</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={true}
@@ -177,7 +177,7 @@ export const CheckboxExamples = () => {
           >
             <View>
               <Text weight="semibold">Multi-line Label</Text>
-              <Text size="small" color="secondary">
+              <Text size="sm" color="secondary">
                 This checkbox has a more complex label with multiple lines
               </Text>
             </View>
@@ -187,7 +187,7 @@ export const CheckboxExamples = () => {
 
       {/* Checkbox with Helper Text and Errors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">With Helper Text</Text>
+        <Text size="md" weight="semibold">With Helper Text</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={true}