@idealyst/components 1.0.0

package/src/examples/ScreenExamples.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Screen, View, Text } from '../index';
+
+export const ScreenExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <Text size="large" weight="bold" align="center">
+          Screen Examples
+        </Text>
+        
+        {/* Background Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Background Variants</Text>
+          <Text size="small" color="secondary">
+            Each Screen should have a different background color
+          </Text>
+          
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="primary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Primary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Secondary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Tertiary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="inverse" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold" color="primary">Inverse</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+
+        {/* Padding Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Padding Variants</Text>
+          <Text size="small" color="secondary">
+            Different padding options for Screen content
+          </Text>
+          
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="none">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">None</Text>
+                  <Text size="small" color="secondary">No padding</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="sm">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Small</Text>
+                  <Text size="small" color="secondary">8px</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="md">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Medium</Text>
+                  <Text size="small" color="secondary">16px</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="lg">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Large</Text>
+                  <Text size="small" color="secondary">24px</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+
+        {/* Safe Area Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Safe Area</Text>
+          <Text size="small" color="secondary">
+            Safe area padding for mobile devices
+          </Text>
+          
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm" safeArea={false}>
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
+                  <Text size="small" weight="bold">No Safe Area</Text>
+                  <Text size="small" color="secondary">Standard</Text>
+                </View>
+              </Screen>
+            </View>
+            
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm" safeArea={true}>
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
+                  <Text size="small" weight="bold">Safe Area</Text>
+                  <Text size="small" color="secondary">Mobile</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+
+        {/* Usage Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Common Usage</Text>
+          <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
+            <Screen background="primary" padding="lg">
+              <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                <Text size="large" weight="bold" align="center">
+                  App Screen Layout
+                </Text>
+                <Text size="medium" color="secondary" align="center">
+                  Primary background with large padding
+                </Text>
+                <Text size="small" color="secondary" align="center">
+                  Perfect for main app screens
+                </Text>
+              </View>
+            </Screen>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+}; 

package/src/examples/TextExamples.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Screen, View, Text } from '../index';
+
+export const TextExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Text Examples
+      </Text>
+      
+      {/* Text Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text size="small">Small text - Lorem ipsum dolor sit amet</Text>
+          <Text size="medium">Medium text - Lorem ipsum dolor sit amet</Text>
+          <Text size="large">Large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="xlarge">Extra large text - Lorem ipsum dolor sit amet</Text>
+        </View>
+      </View>
+
+      {/* Text Weights */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Weights</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text weight="light">Light weight text</Text>
+          <Text weight="normal">Normal weight text</Text>
+          <Text weight="medium">Medium weight text</Text>
+          <Text weight="semibold">Semibold weight text</Text>
+          <Text weight="bold">Bold weight text</Text>
+        </View>
+      </View>
+
+      {/* Text Colors */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text color="primary">Primary color text</Text>
+          <Text color="secondary">Secondary color text</Text>
+          <Text color="blue">Blue color text</Text>
+          <Text color="green">Green color text</Text>
+          <Text color="red">Red color text</Text>
+          <Text color="orange">Orange color text</Text>
+        </View>
+      </View>
+
+      {/* Text Color Shades */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Shades</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text color="blue.300">Blue 300 text</Text>
+          <Text color="blue.500">Blue 500 text</Text>
+          <Text color="blue.700">Blue 700 text</Text>
+          <Text color="red.200">Red 200 text</Text>
+          <Text color="red.600">Red 600 text</Text>
+          <Text color="red.900">Red 900 text</Text>
+        </View>
+      </View>
+
+      {/* Text Alignment */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Alignment</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text align="left">Left aligned text</Text>
+          <Text align="center">Center aligned text</Text>
+          <Text align="right">Right aligned text</Text>
+        </View>
+      </View>
+
+      {/* Combined Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Combined Examples</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text size="large" weight="bold" color="primary" align="center">
+            Large Bold Primary Centered
+          </Text>
+          <Text size="small" weight="light" color="secondary" align="right">
+            Small Light Secondary Right
+          </Text>
+          <Text size="medium" weight="semibold" color="green">
+            Medium Semibold Green
+          </Text>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+}; 

package/src/examples/ThemeExtensionExamples.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import { Screen, View, Button, Text, Badge, Card, Input, Checkbox } from '../index';
+
+export const ThemeExtensionExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <Text size="large" weight="bold" align="center">
+          Extended Theme Test
+        </Text>
+        
+        {/* Extended Colors */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Extended Colors</Text>
+                     <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+             <Badge color={"orange" as any}>Orange</Badge>
+             <Badge color={"teal" as any}>Teal</Badge>
+             <Badge color={"indigo" as any}>Indigo</Badge>
+             <Badge color={"violet" as any}>Violet</Badge>
+             <Badge color={"emerald" as any}>Emerald</Badge>
+           </View>
+           
+           <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+             <Text color={"orange" as any}>Orange Text</Text>
+             <Text color={"teal" as any}>Teal Text</Text>
+             <Text color={"indigo" as any}>Indigo Text</Text>
+             <Text color={"violet" as any}>Violet Text</Text>
+             <Text color={"emerald" as any}>Emerald Text</Text>
+           </View>
+        </View>
+
+        {/* Extended Intents */}
+                          <View spacing="md">
+           <Text size="medium" weight="semibold">Extended Intents</Text>
+           <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+             <Button intent={"accent" as any}>Accent Button</Button>
+             <Button intent={"feature" as any}>Feature Button</Button>
+             <Button intent={"highlight" as any}>Highlight Button</Button>
+           </View>
+           
+           <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+             <Button intent={"accent" as any} variant="outlined">Accent Outlined</Button>
+             <Button intent={"feature" as any} variant="outlined">Feature Outlined</Button>
+             <Button intent={"highlight" as any} variant="outlined">Highlight Outlined</Button>
+           </View>
+         </View>
+
+         {/* Mixed Usage */}
+         <View spacing="md">
+           <Text size="medium" weight="semibold">Mixed Extended Usage</Text>
+           
+           <Card>
+             <View spacing="sm">
+               <Text color={"orange" as any} weight="bold">Orange Card Header</Text>
+               <Text color="secondary">This card uses extended orange color for the header</Text>
+               <Button intent={"accent" as any} size="small">Accent Action</Button>
+             </View>
+           </Card>
+           
+           <Card>
+             <View spacing="sm">
+               <Text color={"teal" as any} weight="bold">Teal Card Header</Text>
+               <Text color="secondary">This card uses extended teal color for the header</Text>
+               <Button intent={"feature" as any} size="small">Feature Action</Button>
+             </View>
+           </Card>
+         </View>
+
+         {/* Form with Extended Colors */}
+         <View spacing="md">
+           <Text size="medium" weight="semibold">Form with Extended Styling</Text>
+           
+           <Input 
+             placeholder="Input with accent intent" 
+             intent={"accent" as any}
+           />
+           
+           <Input 
+             placeholder="Input with feature intent" 
+             intent={"feature" as any}
+           />
+           
+           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+             <Checkbox intent={"accent" as any}>Accent Checkbox</Checkbox>
+             <Checkbox intent={"feature" as any}>Feature Checkbox</Checkbox>
+           </View>
+         </View>
+      </View>
+    </Screen>
+  );
+}; 

package/src/examples/ValidationExamples.tsx

@@ -0,0 +1,95 @@
+/**
+ * Validation Examples
+ * 
+ * This file demonstrates how the theme validation system works
+ * and how components can use it to validate their props.
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+import Text from '../Text';
+import Button from '../Button';
+import Badge from '../Badge';
+import { validateColorProp, validateIntentProp } from '../theme';
+
+export function ValidationExamples() {
+  const { theme } = useUnistyles();
+
+  // Example: Valid usage
+  const handleValidUsage = () => {
+    console.log('=== Valid Usage Examples ===');
+    
+    // These should not produce warnings
+    validateColorProp(theme, 'blue', 'Text');
+    validateColorProp(theme, 'primary', 'Text');
+    validateIntentProp(theme, 'primary', 'Button');
+    validateIntentProp(theme, 'success', 'Button');
+  };
+
+  // Example: Invalid usage
+  const handleInvalidUsage = () => {
+    console.log('=== Invalid Usage Examples ===');
+    
+    // These should produce warnings in development
+    validateColorProp(theme, 'invalidColor', 'Text');
+    validateColorProp(theme, 'neonPink', 'Text'); 
+    validateIntentProp(theme, 'invalidIntent', 'Button');
+    validateIntentProp(theme, 'danger', 'Button'); // 'danger' doesn't exist, should be 'error'
+  };
+
+  return (
+    <View style={{ padding: 20, gap: 16 }}>
+      <Text size="large" weight="bold">
+        Theme Validation Examples
+      </Text>
+      
+      <Text>
+        Open the browser console to see validation warnings when using invalid colors or intents.
+      </Text>
+
+      {/* Valid examples */}
+      <View style={{ gap: 8 }}>
+        <Text weight="semibold">✅ Valid Usage (no warnings):</Text>
+        <Text color="blue">Blue text (valid palette color)</Text>
+        <Text color="blue">Blue text (valid palette color)</Text>
+        <Button intent="primary" onPress={handleValidUsage}>
+          Valid Button
+        </Button>
+        <Badge color="green">Valid Badge</Badge>
+      </View>
+
+      {/* Invalid examples that would show warnings */}
+      <View style={{ gap: 8 }}>
+        <Text weight="semibold">⚠️ Invalid Usage (shows warnings):</Text>
+        <Button onPress={handleInvalidUsage}>
+          Click to Test Invalid Props (check console)
+        </Button>
+        
+        <Text size="small" color="secondary">
+          Note: The invalid examples are triggered programmatically to avoid 
+          runtime TypeScript errors. In real usage, TypeScript would catch 
+          most of these at compile time.
+        </Text>
+      </View>
+
+      {/* Extensibility example */}
+      <View style={{ gap: 8 }}>
+        <Text weight="semibold">🔧 Extensibility:</Text>
+        <Text size="small">
+          When you add new colors to your theme palette (e.g., 'orange', 'teal'), 
+          they automatically become available in all components that use ColorVariant.
+          The validation system will recognize them as valid options.
+        </Text>
+        
+        <Text size="small">
+          Example: If you add 'orange' to your theme.palettes, then 
+          &lt;Text color="orange"&gt; and &lt;Badge color="orange"&gt; 
+          will work without any code changes to the components.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default ValidationExamples; 

package/src/examples/ViewExamples.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Screen, View, Text } from '../index';
+
+export const ViewExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        View Examples
+      </Text>
+      
+      {/* Spacing Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Spacing Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <View spacing="none" background="surface" border="thin">
+            <Text size="small">None</Text>
+          </View>
+          <View spacing="xs" background="surface" border="thin">
+            <Text size="small">XS</Text>
+          </View>
+          <View spacing="sm" background="surface" border="thin">
+            <Text size="small">SM</Text>
+          </View>
+          <View spacing="md" background="surface" border="thin">
+            <Text size="small">MD</Text>
+          </View>
+          <View spacing="lg" background="surface" border="thin">
+            <Text size="small">LG</Text>
+          </View>
+          <View spacing="xl" background="surface" border="thin">
+            <Text size="small">XL</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Background Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Background Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <View background="transparent" border="thin" spacing="sm">
+            <Text size="small">Transparent</Text>
+          </View>
+          <View background="surface" spacing="sm">
+            <Text size="small">Surface</Text>
+          </View>
+          <View background="primary" spacing="sm">
+            <Text size="small" color="primary">Primary</Text>
+          </View>
+          <View background="secondary" spacing="sm">
+            <Text size="small" color="secondary">Secondary</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Border Radius Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Border Radius</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <View radius="none" background="surface" spacing="sm" border="thin">
+            <Text size="small">None</Text>
+          </View>
+          <View radius="xs" background="surface" spacing="sm" border="thin">
+            <Text size="small">XS</Text>
+          </View>
+          <View radius="sm" background="surface" spacing="sm" border="thin">
+            <Text size="small">SM</Text>
+          </View>
+          <View radius="md" background="surface" spacing="sm" border="thin">
+            <Text size="small">MD</Text>
+          </View>
+          <View radius="lg" background="surface" spacing="sm" border="thin">
+            <Text size="small">LG</Text>
+          </View>
+          <View radius="xl" background="surface" spacing="sm" border="thin">
+            <Text size="small">XL</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Border Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Border Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <View border="none" background="surface" spacing="sm" radius="sm">
+            <Text size="small">None</Text>
+          </View>
+          <View border="thin" background="surface" spacing="sm" radius="sm">
+            <Text size="small">Thin</Text>
+          </View>
+          <View border="thick" background="surface" spacing="sm" radius="sm">
+            <Text size="small">Thick</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Layout Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Layout Examples</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <View 
+            background="surface" 
+            spacing="md" 
+            radius="md" 
+            border="thin"
+            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+          >
+            <Text>Left</Text>
+            <Text>Center</Text>
+            <Text>Right</Text>
+          </View>
+          
+          <View 
+            background="surface" 
+            spacing="md" 
+            radius="md" 
+            border="thin"
+            style={{ flexDirection: 'column', alignItems: 'center' }}
+          >
+            <Text>Centered</Text>
+            <Text>Column</Text>
+            <Text>Layout</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};