@idealyst/components 1.0.0

package/src/examples/BadgeExamples.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { Screen, View, Text, Badge, Button } from '../index';
+
+export const BadgeExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Badge Examples
+      </Text>
+      
+      {/* Badge Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge variant="filled" color="blue">
+            Filled
+          </Badge>
+          <Badge variant="outlined" color="blue">
+            Outlined
+          </Badge>
+          <Badge variant="dot" color="blue" />
+        </View>
+      </View>
+
+      {/* Badge Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge size="small" color="blue">
+            Small
+          </Badge>
+          <Badge size="medium" color="blue">
+            Medium
+          </Badge>
+          <Badge size="large" color="blue">
+            Large
+          </Badge>
+        </View>
+      </View>
+
+      {/* Badge Colors */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Colors</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue">
+            Blue
+          </Badge>
+          <Badge color="green">
+            Green
+          </Badge>
+          <Badge color="red">
+            Red
+          </Badge>
+          <Badge color="orange">
+            Orange
+          </Badge>
+          <Badge color="gray">
+            Gray
+          </Badge>
+          <Badge color="purple">
+            Purple
+          </Badge>
+        </View>
+      </View>
+
+      {/* Badge Color Shades */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Shades</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue.200">
+            Blue 200
+          </Badge>
+          <Badge color="blue.500">
+            Blue 500
+          </Badge>
+          <Badge color="blue.800">
+            Blue 800
+          </Badge>
+        </View>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="green.100">
+            Green 100
+          </Badge>
+          <Badge color="green.600">
+            Green 600
+          </Badge>
+          <Badge color="green.900">
+            Green 900
+          </Badge>
+        </View>
+      </View>
+
+      {/* Dot Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Dot Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge variant="dot" color="blue" size="small" />
+          <Badge variant="dot" color="green" size="medium" />
+          <Badge variant="dot" color="red" size="large" />
+          <Badge variant="dot" color="orange" size="medium" />
+          <Badge variant="dot" color="gray" size="medium" />
+        </View>
+      </View>
+
+      {/* Number Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Number Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="red" size="small">
+            1
+          </Badge>
+          <Badge color="red" size="medium">
+            5
+          </Badge>
+          <Badge color="red" size="large">
+            99+
+          </Badge>
+          <Badge color="blue" size="medium">
+            42
+          </Badge>
+        </View>
+      </View>
+
+      {/* Status Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Status Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="green" variant="filled">
+            ACTIVE
+          </Badge>
+          <Badge color="orange" variant="filled">
+            PENDING
+          </Badge>
+          <Badge color="red" variant="filled">
+            INACTIVE
+          </Badge>
+          <Badge color="gray" variant="outlined">
+            DRAFT
+          </Badge>
+          <Badge color="blue" variant="outlined">
+            REVIEW
+          </Badge>
+        </View>
+      </View>
+
+      {/* Combined with Other Components */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Other Components</Text>
+        <View spacing="sm">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Notifications</Text>
+            <Badge color="red" size="small">3</Badge>
+          </View>
+          
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Messages</Text>
+            <Badge color="blue" size="small">12</Badge>
+          </View>
+          
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Status</Text>
+            <Badge color="green" variant="dot" />
+            <Text size="small" color="secondary">Online</Text>
+          </View>
+          
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Button size="small" variant="outlined">
+              Inbox
+            </Button>
+            <Badge color="red" size="small">99+</Badge>
+          </View>
+        </View>
+      </View>
+
+      {/* Category Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Category Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <Badge color="blue" variant="outlined">
+            React
+          </Badge>
+          <Badge color="green" variant="outlined">
+            TypeScript
+          </Badge>
+          <Badge color="yellow" variant="outlined">
+            JavaScript
+          </Badge>
+          <Badge color="orange" variant="outlined">
+            CSS
+          </Badge>
+          <Badge color="gray" variant="outlined">
+            HTML
+          </Badge>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+}; 

package/src/examples/ButtonExamples.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Screen, View, Button, Text } from '../index';
+
+export const ButtonExamples = () => {
+  const handlePress = (buttonType: string) => {
+    console.log(`Button pressed: ${buttonType}`);
+  };
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Button Examples
+      </Text>
+      
+      {/* Button Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button 
+            variant="contained" 
+            intent="primary"
+            onPress={() => handlePress('contained')}
+          >
+            Contained
+          </Button>
+          <Button 
+            variant="outlined" 
+            intent="primary"
+            onPress={() => handlePress('outlined')}
+          >
+            Outlined
+          </Button>
+          <Button 
+            variant="text" 
+            intent="primary"
+            onPress={() => handlePress('text')}
+          >
+            Text
+          </Button>
+        </View>
+      </View>
+
+      {/* Button Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Button 
+            size="small" 
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('small')}
+          >
+            Small
+          </Button>
+          <Button 
+            size="medium" 
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('medium')}
+          >
+            Medium
+          </Button>
+          <Button 
+            size="large" 
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('large')}
+          >
+            Large
+          </Button>
+        </View>
+      </View>
+
+      {/* Button Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button 
+            intent="primary"
+            variant="contained"
+            onPress={() => handlePress('primary')}
+          >
+            Primary
+          </Button>
+          <Button 
+            intent="neutral"
+            variant="contained"
+            onPress={() => handlePress('neutral')}
+          >
+            Neutral
+          </Button>
+          <Button 
+            intent="success"
+            variant="contained"
+            onPress={() => handlePress('success')}
+          >
+            Success
+          </Button>
+          <Button 
+            intent="error"
+            variant="contained"
+            onPress={() => handlePress('error')}
+          >
+            Error
+          </Button>
+          <Button 
+            intent="warning"
+            variant="contained"
+            onPress={() => handlePress('warning')}
+          >
+            Warning
+          </Button>
+        </View>
+      </View>
+
+      {/* Disabled States */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Disabled States</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button 
+            variant="contained" 
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-contained')}
+          >
+            Disabled Contained
+          </Button>
+          <Button 
+            variant="outlined" 
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-outlined')}
+          >
+            Disabled Outlined
+          </Button>
+          <Button 
+            variant="text" 
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-text')}
+          >
+            Disabled Text
+          </Button>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+}; 

package/src/examples/CardExamples.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Screen, View, Text, Card, Button } from '../index';
+
+export const CardExamples = () => {
+  const handleCardPress = (cardType: string) => {
+    console.log(`Card pressed: ${cardType}`);
+  };
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Card Examples
+      </Text>
+      
+      {/* Card Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Card variant="default" padding="medium">
+            <Text>Default Card</Text>
+            <Text size="small" color="secondary">
+              This is a default card with standard styling
+            </Text>
+          </Card>
+          
+          <Card variant="outlined" padding="medium">
+            <Text>Outlined Card</Text>
+            <Text size="small" color="secondary">
+              This is an outlined card with border
+            </Text>
+          </Card>
+          
+          <Card variant="elevated" padding="medium">
+            <Text>Elevated Card</Text>
+            <Text size="small" color="secondary">
+              This is an elevated card with shadow
+            </Text>
+          </Card>
+          
+          <Card variant="filled" padding="medium">
+            <Text>Filled Card</Text>
+            <Text size="small" color="secondary">
+              This is a filled card with background
+            </Text>
+          </Card>
+        </View>
+      </View>
+
+      {/* Card Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Card intent="neutral" padding="medium" variant="outlined">
+            <Text>Neutral Card</Text>
+          </Card>
+          
+          <Card intent="primary" padding="medium" variant="outlined">
+            <Text>Primary Card</Text>
+          </Card>
+          
+          <Card intent="success" padding="medium" variant="outlined">
+            <Text>Success Card</Text>
+          </Card>
+          
+          <Card intent="error" padding="medium" variant="outlined">
+            <Text>Error Card</Text>
+          </Card>
+          
+          <Card intent="warning" padding="medium" variant="outlined">
+            <Text>Warning Card</Text>
+          </Card>
+          
+          <Card intent="info" padding="medium" variant="outlined">
+            <Text>Info Card</Text>
+          </Card>
+        </View>
+      </View>
+
+      {/* Card Padding */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Padding</Text>
+        <View spacing="sm">
+          <Card padding="none" variant="outlined">
+            <Text>No Padding</Text>
+          </Card>
+          
+          <Card padding="small" variant="outlined">
+            <Text>Small Padding</Text>
+          </Card>
+          
+          <Card padding="medium" variant="outlined">
+            <Text>Medium Padding</Text>
+          </Card>
+          
+          <Card padding="large" variant="outlined">
+            <Text>Large Padding</Text>
+          </Card>
+        </View>
+      </View>
+
+      {/* Card Radius */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Border Radius</Text>
+        <View spacing="sm">
+          <Card radius="none" variant="outlined" padding="medium">
+            <Text>No Radius</Text>
+          </Card>
+          
+          <Card radius="small" variant="outlined" padding="medium">
+            <Text>Small Radius</Text>
+          </Card>
+          
+          <Card radius="medium" variant="outlined" padding="medium">
+            <Text>Medium Radius</Text>
+          </Card>
+          
+          <Card radius="large" variant="outlined" padding="medium">
+            <Text>Large Radius</Text>
+          </Card>
+        </View>
+      </View>
+
+      {/* Clickable Cards */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Interactive Cards</Text>
+        <View spacing="sm">
+          <Card 
+            clickable 
+            onPress={() => handleCardPress('clickable')} 
+            variant="outlined" 
+            padding="medium"
+          >
+            <Text weight="semibold">Clickable Card</Text>
+            <Text size="small" color="secondary">
+              Click me to see interaction
+            </Text>
+          </Card>
+          
+          <Card 
+            clickable 
+            disabled 
+            onPress={() => handleCardPress('disabled')} 
+            variant="outlined" 
+            padding="medium"
+          >
+            <Text weight="semibold">Disabled Card</Text>
+            <Text size="small" color="secondary">
+              This card is disabled
+            </Text>
+          </Card>
+        </View>
+      </View>
+
+      {/* 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 }}>
+            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">
+              Buy Now
+            </Button>
+            <Button size="small" variant="outlined" intent="neutral">
+              Add to Cart
+            </Button>
+          </View>
+        </Card>
+      </View>
+    </View>
+    </Screen>
+  );
+};