@idealyst/components 1.0.83 → 1.0.84

package/src/examples/BadgeExamples.tsx

@@ -5,35 +5,35 @@ export const BadgeExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Badge Examples
       </Text>
       
       {/* Badge 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', alignItems: 'center' }}>
-          <Badge variant="filled" color="blue">
+          <Badge type="filled" color="blue">
             Filled
           </Badge>
-          <Badge variant="outlined" color="blue">
+          <Badge type="outlined" color="blue">
             Outlined
           </Badge>
-          <Badge variant="dot" color="blue" />
+          <Badge type="dot" color="blue" />
         </View>
       </View>
 
       {/* Badge 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' }}>
-          <Badge size="small" color="blue">
+          <Badge size="sm" color="blue">
             Small
           </Badge>
-          <Badge size="medium" color="blue">
+          <Badge size="md" color="blue">
             Medium
           </Badge>
-          <Badge size="large" color="blue">
+          <Badge size="lg" color="blue">
             Large
           </Badge>
         </View>
@@ -41,7 +41,7 @@ export const BadgeExamples = () => {
 
       {/* Badge Colors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Colors</Text>
+        <Text size="md" weight="semibold">Colors</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue">
             Blue
@@ -66,7 +66,7 @@ export const BadgeExamples = () => {
 
       {/* Badge Color Shades */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Color Shades</Text>
+        <Text size="md" weight="semibold">Color Shades</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Badge color="blue.200">
             Blue 200
@@ -93,30 +93,30 @@ export const BadgeExamples = () => {
 
       {/* Dot Badges */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Dot Badges</Text>
+        <Text size="md" 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" />
+          <Badge type="dot" color="blue" size="sm" />
+          <Badge type="dot" color="green" size="md" />
+          <Badge type="dot" color="red" size="lg" />
+          <Badge type="dot" color="orange" size="md" />
+          <Badge type="dot" color="gray" size="md" />
         </View>
       </View>
 
       {/* Number Badges */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Number Badges</Text>
+        <Text size="md" weight="semibold">Number Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="red" size="small">
+          <Badge color="red" size="sm">
             1
           </Badge>
-          <Badge color="red" size="medium">
+          <Badge color="red" size="md">
             5
           </Badge>
-          <Badge color="red" size="large">
+          <Badge color="red" size="lg">
             99+
           </Badge>
-          <Badge color="blue" size="medium">
+          <Badge color="blue" size="md">
             42
           </Badge>
         </View>
@@ -124,21 +124,21 @@ export const BadgeExamples = () => {
 
       {/* Status Badges */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Status Badges</Text>
+        <Text size="md" weight="semibold">Status Badges</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="green" variant="filled">
+          <Badge color="green" type="filled">
             ACTIVE
           </Badge>
-          <Badge color="orange" variant="filled">
+          <Badge color="orange" type="filled">
             PENDING
           </Badge>
-          <Badge color="red" variant="filled">
+          <Badge color="red" type="filled">
             INACTIVE
           </Badge>
-          <Badge color="gray" variant="outlined">
+          <Badge color="gray" type="outlined">
             DRAFT
           </Badge>
-          <Badge color="blue" variant="outlined">
+          <Badge color="blue" type="outlined">
             REVIEW
           </Badge>
         </View>
@@ -146,54 +146,122 @@ export const BadgeExamples = () => {
 
       {/* Combined with Other Components */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">With Other Components</Text>
+        <Text size="md" 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>
+            <Badge color="red" size="sm">3</Badge>
           </View>
           
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text>Messages</Text>
-            <Badge color="blue" size="small">12</Badge>
+            <Badge color="blue" size="sm">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>
+            <Badge color="green" type="dot" />
+            <Text size="sm" color="secondary">Online</Text>
           </View>
           
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Button size="small" variant="outlined">
+            <Button size="sm" type="outlined">
               Inbox
             </Button>
-            <Badge color="red" size="small">99+</Badge>
+            <Badge color="red" size="sm">99+</Badge>
           </View>
         </View>
       </View>
 
       {/* Category Badges */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Category Badges</Text>
+        <Text size="md" weight="semibold">Category Badges</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <Badge color="blue" variant="outlined">
+          <Badge color="blue" type="outlined">
             React
           </Badge>
-          <Badge color="green" variant="outlined">
+          <Badge color="green" type="outlined">
             TypeScript
           </Badge>
-          <Badge color="yellow" variant="outlined">
+          <Badge color="yellow" type="outlined">
             JavaScript
           </Badge>
-          <Badge color="orange" variant="outlined">
+          <Badge color="orange" type="outlined">
             CSS
           </Badge>
-          <Badge color="gray" variant="outlined">
+          <Badge color="gray" type="outlined">
             HTML
           </Badge>
         </View>
       </View>
+
+      {/* Badges with Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Badges with Icons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue" icon="information">
+            Info
+          </Badge>
+          <Badge color="green" icon="check-circle">
+            Success
+          </Badge>
+          <Badge color="red" icon="alert-circle">
+            Error
+          </Badge>
+          <Badge color="orange" icon="alert">
+            Warning
+          </Badge>
+        </View>
+      </View>
+
+      {/* Icon-only Badges */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Icon-only Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue" icon="star" size="sm" />
+          <Badge color="green" icon="heart" size="md" />
+          <Badge color="red" icon="fire" size="lg" />
+          <Badge color="purple" icon="lightning-bolt" type="outlined" />
+        </View>
+      </View>
+
+      {/* Status Badges with Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Status with Icons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="green" icon="check">
+            VERIFIED
+          </Badge>
+          <Badge color="blue" icon="clock">
+            PENDING
+          </Badge>
+          <Badge color="red" icon="close">
+            REJECTED
+          </Badge>
+          <Badge color="gray" icon="email">
+            SENT
+          </Badge>
+        </View>
+      </View>
+
+      {/* Outlined Badges with Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">Outlined with Icons</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue" type="outlined" icon="download">
+            Download
+          </Badge>
+          <Badge color="green" type="outlined" icon="upload">
+            Upload
+          </Badge>
+          <Badge color="red" type="outlined" icon="delete">
+            Delete
+          </Badge>
+          <Badge color="purple" type="outlined" icon="share">
+            Share
+          </Badge>
+        </View>
+      </View>
     </View>
     </Screen>
   );

package/src/examples/BreadcrumbExamples.tsx

@@ -0,0 +1,312 @@
+import React from 'react';
+import { Screen, View , Text, Breadcrumb, Divider, Icon, BreadcrumbItem } from '../index';
+
+export const BreadcrumbExamples = () => {
+  const basicItems: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => console.log('Home') },
+    { label: 'Products', onPress: () => console.log('Products') },
+    { label: 'Category', onPress: () => console.log('Category') },
+    { label: 'Item' },
+  ];
+
+  const withIconsItems: BreadcrumbItem[] = [
+    {
+      label: 'Home',
+      icon: <Icon name="home" size="sm" />,
+      onPress: () => console.log('Home'),
+    },
+    {
+      label: 'Documents',
+      icon: <Icon name="folder" size="sm" />,
+      onPress: () => console.log('Documents'),
+    },
+    {
+      label: 'Projects',
+      icon: <Icon name="folder-open" size="sm" />,
+      onPress: () => console.log('Projects'),
+    },
+    {
+      label: 'Current File',
+      icon: <Icon name="file-document" size="sm" />,
+    },
+  ];
+
+  const withIconNamesItems: BreadcrumbItem[] = [
+    {
+      label: 'Home',
+      icon: 'home',
+      onPress: () => console.log('Home'),
+    },
+    {
+      label: 'Documents',
+      icon: 'folder',
+      onPress: () => console.log('Documents'),
+    },
+    {
+      label: 'Projects',
+      icon: 'folder-open',
+      onPress: () => console.log('Projects'),
+    },
+    {
+      label: 'Current File',
+      icon: 'file-document',
+    },
+  ];
+
+  const longPathItems: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => console.log('Home') },
+    { label: 'Level 1', onPress: () => console.log('Level 1') },
+    { label: 'Level 2', onPress: () => console.log('Level 2') },
+    { label: 'Level 3', onPress: () => console.log('Level 3') },
+    { label: 'Level 4', onPress: () => console.log('Level 4') },
+    { label: 'Level 5', onPress: () => console.log('Level 5') },
+    { label: 'Current Page' },
+  ];
+
+  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 spacing="md">
+          <Text size="lg" weight="semibold">Basic Breadcrumb</Text>
+          <Breadcrumb items={basicItems} />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">With Icons (Components)</Text>
+          <Breadcrumb items={withIconsItems} />
+          <Text size="sm" color="secondary">Using Icon components</Text>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">With Icons (Icon Names)</Text>
+          <Breadcrumb items={withIconNamesItems} />
+          <Text size="sm" color="secondary">Using icon name strings (recommended)</Text>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Custom Separator</Text>
+          <View spacing="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>
+              <Breadcrumb items={basicItems} size="sm" />
+            </View>
+            <View spacing="xs">
+              <Text size="md" weight="semibold">Medium (Default)</Text>
+              <Breadcrumb items={basicItems} size="md" />
+            </View>
+            <View spacing="xs">
+              <Text size="md" weight="semibold">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>
+              <Breadcrumb items={basicItems} intent="primary" />
+            </View>
+            <View spacing="xs">
+              <Text size="md" weight="semibold">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>
+              <Breadcrumb items={longPathItems} />
+            </View>
+            <View spacing="xs">
+              <Text size="sm" 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>
+              <Breadcrumb items={longPathItems} maxItems={3} />
+            </View>
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">With Disabled Items</Text>
+          <Breadcrumb
+            items={[
+              { label: 'Home', onPress: () => console.log('Home') },
+              { label: 'Disabled Level', onPress: () => console.log('Disabled'), disabled: true },
+              { label: 'Active Level', onPress: () => console.log('Active') },
+              { label: 'Current Page' },
+            ]}
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Non-clickable Items</Text>
+          <Breadcrumb
+            items={[
+              { label: 'Home' },
+              { label: 'Products' },
+              { label: 'Category' },
+              { label: 'Item' },
+            ]}
+          />
+          <Text size="sm" color="secondary">None of these items are clickable</Text>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Mixed Clickable & Non-clickable</Text>
+          <Breadcrumb
+            items={[
+              { label: 'Home', onPress: () => console.log('Home') },
+              { label: 'Static Section' },
+              { label: 'Products', onPress: () => console.log('Products') },
+              { label: 'Current Product' },
+            ]}
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">File System Example</Text>
+          <Breadcrumb
+            items={[
+              {
+                label: 'Root',
+                icon: <Icon name="harddisk" size="sm" />,
+                onPress: () => console.log('Root'),
+              },
+              {
+                label: 'Users',
+                icon: <Icon name="account-group" size="sm" />,
+                onPress: () => console.log('Users'),
+              },
+              {
+                label: 'Documents',
+                icon: <Icon name="folder" size="sm" />,
+                onPress: () => console.log('Documents'),
+              },
+              {
+                label: 'project-files',
+                icon: <Icon name="folder-open" size="sm" />,
+                onPress: () => console.log('project-files'),
+              },
+              {
+                label: 'index.tsx',
+                icon: <Icon name="file-document" size="sm" />,
+              },
+            ]}
+            separator="/"
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">E-commerce Example</Text>
+          <Breadcrumb
+            items={[
+              { label: 'Shop', onPress: () => console.log('Shop') },
+              { label: 'Electronics', onPress: () => console.log('Electronics') },
+              { label: 'Computers', onPress: () => console.log('Computers') },
+              { label: 'Laptops', onPress: () => console.log('Laptops') },
+              { label: 'Gaming Laptops' },
+            ]}
+            size="sm"
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Responsive Breadcrumbs</Text>
+          <Text size="sm" 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>
+              <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>
+              <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>
+              <Breadcrumb
+                items={longPathItems}
+                responsive
+                minVisibleItems={2}
+              />
+            </View>
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Responsive with Icons</Text>
+          <Breadcrumb
+            items={[
+              {
+                label: 'Root',
+                icon: 'harddisk',
+                onPress: () => console.log('Root'),
+              },
+              {
+                label: 'Users',
+                icon: 'account-group',
+                onPress: () => console.log('Users'),
+              },
+              {
+                label: 'Documents',
+                icon: 'folder',
+                onPress: () => console.log('Documents'),
+              },
+              {
+                label: 'Projects',
+                icon: 'folder',
+                onPress: () => console.log('Projects'),
+              },
+              {
+                label: 'Work',
+                icon: 'folder',
+                onPress: () => console.log('Work'),
+              },
+              {
+                label: 'project-files',
+                icon: 'folder-open',
+                onPress: () => console.log('project-files'),
+              },
+              {
+                label: 'index.tsx',
+                icon: 'file-document',
+              },
+            ]}
+            responsive
+            separator="/"
+          />
+        </View>
+      </View>
+    </Screen>
+  );
+};