@idealyst/components 1.0.24 → 1.0.25

package/src/examples/ThemeExtensionExamples.tsx

@@ -1,91 +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>
-  );
+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

@@ -1,95 +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>
-  );
-}
-
+/**
+ * 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

@@ -1,129 +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>
-  );
+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>
+  );
 };