@idealyst/components 1.0.82 → 1.0.84

package/src/examples/ChipExamples.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Chip, Divider } from '@idealyst/components';
+
+export const ChipExamples = () => {
+  const [selectedChips, setSelectedChips] = useState<Set<string>>(new Set());
+  const [tags, setTags] = useState(['React', 'TypeScript', 'JavaScript', 'Node.js']);
+
+  const toggleChip = (id: string) => {
+    const newSelected = new Set(selectedChips);
+    if (newSelected.has(id)) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    setSelectedChips(newSelected);
+  };
+
+  const removeTag = (tag: string) => {
+    setTags(tags.filter(t => t !== tag));
+  };
+
+  return (
+    <Screen background="primary" safeArea>
+      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text size="xl" weight="bold">Chip Examples</Text>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Basic Chips</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Default" />
+          <Chip label="Primary" intent="primary" />
+          <Chip label="Success" intent="success" />
+          <Chip label="Error" intent="error" />
+          <Chip label="Warning" intent="warning" />
+          <Chip label="Neutral" intent="neutral" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Variants</Text>
+
+        <Text size="md" weight="semibold">Filled (Default)</Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Filled Primary" type="filled" intent="primary" />
+          <Chip label="Filled Success" type="filled" intent="success" />
+          <Chip label="Filled Error" type="filled" intent="error" />
+        </View>
+
+        <Text size="md" weight="semibold">Outlined</Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Outlined Primary" type="outlined" intent="primary" />
+          <Chip label="Outlined Success" type="outlined" intent="success" />
+          <Chip label="Outlined Error" type="outlined" intent="error" />
+        </View>
+
+        <Text size="md" weight="semibold">Soft</Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Soft Primary" type="soft" intent="primary" />
+          <Chip label="Soft Success" type="soft" intent="success" />
+          <Chip label="Soft Error" type="soft" intent="error" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Sizes</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
+          <Chip label="Small" size="sm" />
+          <Chip label="Medium" size="md" />
+          <Chip label="Large" size="lg" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">With Icons</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Star" icon="star" />
+          <Chip label="Heart" icon="heart" intent="error" />
+          <Chip label="Check" icon="check" intent="success" />
+          <Chip label="Info" icon="information" type="outlined" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Deletable Chips</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {tags.map(tag => (
+            <Chip
+              key={tag}
+              label={tag}
+              deletable
+              onDelete={() => removeTag(tag)}
+              intent="primary"
+              type="outlined"
+            />
+          ))}
+        </View>
+        <Text size="sm" color="secondary">Click the X to remove tags</Text>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Selectable Chips</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {['Option 1', 'Option 2', 'Option 3', 'Option 4'].map(option => (
+            <Chip
+              key={option}
+              label={option}
+              selectable
+              selected={selectedChips.has(option)}
+              onPress={() => toggleChip(option)}
+              intent="primary"
+              type="outlined"
+            />
+          ))}
+        </View>
+        <Text size="sm" color="secondary">
+          Selected: {Array.from(selectedChips).join(', ') || 'None'}
+        </Text>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Clickable Chips</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip
+            label="Click me!"
+            onPress={() => alert('Chip clicked!')}
+            intent="primary"
+          />
+          <Chip
+            label="Another action"
+            onPress={() => console.log('Clicked')}
+            type="outlined"
+            intent="success"
+          />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Disabled State</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Disabled" disabled />
+          <Chip label="Disabled Outlined" type="outlined" disabled />
+          <Chip label="Disabled Deletable" deletable onDelete={() => {}} disabled />
+          <Chip label="Disabled Selectable" selectable onPress={() => {}} disabled />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Filter Example</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip
+            label="All"
+            selectable
+            selected={selectedChips.has('filter-all')}
+            onPress={() => toggleChip('filter-all')}
+            type="soft"
+            intent="neutral"
+          />
+          <Chip
+            label="Active"
+            selectable
+            selected={selectedChips.has('filter-active')}
+            onPress={() => toggleChip('filter-active')}
+            type="soft"
+            intent="success"
+          />
+          <Chip
+            label="Completed"
+            selectable
+            selected={selectedChips.has('filter-completed')}
+            onPress={() => toggleChip('filter-completed')}
+            type="soft"
+            intent="primary"
+          />
+          <Chip
+            label="Archived"
+            selectable
+            selected={selectedChips.has('filter-archived')}
+            onPress={() => toggleChip('filter-archived')}
+            type="soft"
+            intent="neutral"
+          />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Category Tags</Text>
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Chip label="Design" type="soft" intent="primary" size="sm" />
+          <Chip label="Development" type="soft" intent="success" size="sm" />
+          <Chip label="Marketing" type="soft" intent="warning" size="sm" />
+          <Chip label="Sales" type="soft" intent="error" size="sm" />
+          <Chip label="Support" type="soft" intent="neutral" size="sm" />
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/DialogExamples.tsx

@@ -10,13 +10,13 @@ export const DialogExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           Dialog Examples
         </Text>
         
         {/* Basic Dialog */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Basic Dialog</Text>
+          <Text size="md" weight="semibold">Basic Dialog</Text>
           <Button onPress={() => setBasicOpen(true)}>
             Open Basic Dialog
           </Button>
@@ -28,7 +28,7 @@ export const DialogExamples = () => {
             <Text>This is a basic dialog with a title and some content.</Text>
             <View spacing="md" style={{ marginTop: 16 }}>
               <Button 
-                variant="contained" 
+                type="contained" 
                 intent="primary"
                 onPress={() => setBasicOpen(false)}
               >
@@ -40,7 +40,7 @@ export const DialogExamples = () => {
 
         {/* Dialog Variants */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Dialog Variants</Text>
+          <Text size="md" weight="semibold">Dialog Variants</Text>
           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
             <Button onPress={() => setAlertOpen(true)}>
               Alert Dialog
@@ -55,12 +55,12 @@ export const DialogExamples = () => {
             open={alertOpen}
             onOpenChange={setAlertOpen}
             title="Important Alert"
-            variant="alert"
+            type="alert"
           >
             <Text>This is an alert dialog. It has a top border to indicate importance.</Text>
             <View spacing="md" style={{ marginTop: 16 }}>
               <Button 
-                variant="contained" 
+                type="contained" 
                 intent="primary"
                 onPress={() => setAlertOpen(false)}
               >
@@ -74,20 +74,20 @@ export const DialogExamples = () => {
             open={confirmationOpen}
             onOpenChange={setConfirmationOpen}
             title="Confirm Action"
-            variant="confirmation"
+            type="confirmation"
             closeOnBackdropClick={false}
           >
             <Text>Are you sure you want to delete this item? This action cannot be undone.</Text>
             <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
               <Button 
-                variant="outlined" 
+                type="outlined" 
                 intent="neutral"
                 onPress={() => setConfirmationOpen(false)}
               >
                 Cancel
               </Button>
               <Button 
-                variant="contained" 
+                type="contained" 
                 intent="error"
                 onPress={() => setConfirmationOpen(false)}
               >
@@ -99,31 +99,31 @@ export const DialogExamples = () => {
 
         {/* Dialog Sizes */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Dialog Sizes</Text>
+          <Text size="md" weight="semibold">Dialog Sizes</Text>
           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-            {['small', 'medium', 'large'].map((size) => (
-              <Button 
+            {['sm', 'md', 'lg'].map((size) => (
+              <Button
                 key={size}
                 onPress={() => setSizesOpen(size)}
               >
-                {size.charAt(0).toUpperCase() + size.slice(1)} Dialog
+                {size === 'sm' ? 'Small' : size === 'md' ? 'Medium' : 'Large'} Dialog
               </Button>
             ))}
           </View>
-          
+
           {sizesOpen && (
             <Dialog
               open={!!sizesOpen}
               onOpenChange={() => setSizesOpen(null)}
-              title={`${sizesOpen.charAt(0).toUpperCase() + sizesOpen.slice(1)} Dialog`}
-              size={sizesOpen as 'small' | 'medium' | 'large'}
+              title={`${sizesOpen === 'sm' ? 'Small' : sizesOpen === 'md' ? 'Medium' : 'Large'} Dialog`}
+              size={sizesOpen as 'sm' | 'md' | 'lg'}
             >
               <Text>
                 This is a {sizesOpen} dialog. The width and maximum width are adjusted based on the size prop.
               </Text>
               <View spacing="md" style={{ marginTop: 16 }}>
                 <Button 
-                  variant="contained" 
+                  type="contained" 
                   intent="primary"
                   onPress={() => setSizesOpen(null)}
                 >
@@ -137,17 +137,17 @@ export const DialogExamples = () => {
 
         {/* Dialog Options */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Dialog Options</Text>
-          <Text size="small" color="secondary">
+          <Text size="md" weight="semibold">Dialog Options</Text>
+          <Text size="sm" color="secondary">
             • Close on backdrop click: Enabled by default, disabled for confirmation dialog above
           </Text>
-          <Text size="small" color="secondary">
+          <Text size="sm" color="secondary">
             • Close on escape key: Enabled by default (web only)
           </Text>
-          <Text size="small" color="secondary">
+          <Text size="sm" color="secondary">
             • Hardware back button: Handled automatically (native only)
           </Text>
-          <Text size="small" color="secondary">
+          <Text size="sm" color="secondary">
             • Focus management: Automatic focus trapping and restoration (web only)
           </Text>
         </View>

package/src/examples/DividerExamples.tsx

@@ -5,27 +5,27 @@ export const DividerExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Divider Examples
       </Text>
       
       {/* Horizontal Dividers */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Horizontal Dividers</Text>
+        <Text size="md" weight="semibold">Horizontal Dividers</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Content above</Text>
             <Divider orientation="horizontal" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Content above</Text>
-            <Divider orientation="horizontal" variant="dashed" />
+            <Divider orientation="horizontal" type="dashed" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Content above</Text>
-            <Divider orientation="horizontal" variant="dotted" />
+            <Divider orientation="horizontal" type="dotted" />
             <Text>Content below</Text>
           </Card>
         </View>
@@ -33,21 +33,21 @@ export const DividerExamples = () => {
 
       {/* Divider Variants */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
+        <Text size="md" weight="semibold">Variants</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Solid divider</Text>
-            <Divider variant="solid" />
+            <Divider type="solid" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Dashed divider</Text>
-            <Divider variant="dashed" />
+            <Divider type="dashed" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Dotted divider</Text>
-            <Divider variant="dotted" />
+            <Divider type="dotted" />
             <Text>Content below</Text>
           </Card>
         </View>
@@ -55,19 +55,19 @@ export const DividerExamples = () => {
 
       {/* Divider Thickness */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Thickness</Text>
+        <Text size="md" weight="semibold">Thickness</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Thin divider</Text>
             <Divider thickness="thin" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Medium divider</Text>
-            <Divider thickness="medium" />
+            <Divider thickness="md" />
             <Text>Content below</Text>
           </Card>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Thick divider</Text>
             <Divider thickness="thick" />
             <Text>Content below</Text>
@@ -77,45 +77,45 @@ export const DividerExamples = () => {
 
       {/* Divider Intents */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
+        <Text size="md" weight="semibold">Intents</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Primary divider</Text>
             <Divider intent="primary" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
                     <Text>Neutral divider</Text>
         <Divider intent="neutral" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Neutral divider</Text>
             <Divider intent="neutral" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Success divider</Text>
             <Divider intent="success" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Error divider</Text>
             <Divider intent="error" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Warning divider</Text>
             <Divider intent="warning" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Info divider</Text>
             <Divider intent="info" />
             <Text>Content below</Text>
@@ -125,29 +125,29 @@ export const DividerExamples = () => {
 
       {/* Divider Spacing */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Spacing</Text>
+        <Text size="md" weight="semibold">Spacing</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>No spacing</Text>
             <Divider spacing="none" />
             <Text>Content immediately after</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Small spacing</Text>
-            <Divider spacing="small" />
+            <Divider spacing="sm" />
             <Text>Content with small spacing</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Medium spacing</Text>
-            <Divider spacing="medium" />
+            <Divider spacing="md" />
             <Text>Content with medium spacing</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Large spacing</Text>
-            <Divider spacing="large" />
+            <Divider spacing="lg" />
             <Text>Content with large spacing</Text>
           </Card>
         </View>
@@ -155,20 +155,20 @@ export const DividerExamples = () => {
 
       {/* Divider with Content */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">With Content</Text>
+        <Text size="md" weight="semibold">With Content</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Content above</Text>
-            <Divider spacing="medium">
-              <Text size="small" color="secondary">OR</Text>
+            <Divider spacing="md">
+              <Text size="sm" color="secondary">OR</Text>
             </Divider>
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Content above</Text>
-            <Divider spacing="medium" intent="primary">
-              <Text size="small" color="primary" weight="semibold">SECTION</Text>
+            <Divider spacing="md" intent="primary">
+              <Text size="sm" color="primary" weight="semibold">SECTION</Text>
             </Divider>
             <Text>Content below</Text>
           </Card>
@@ -177,13 +177,13 @@ export const DividerExamples = () => {
 
       {/* Vertical Dividers */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Vertical Dividers</Text>
-        <Card variant="outlined" padding="medium">
+        <Text size="md" weight="semibold">Vertical Dividers</Text>
+        <Card type="outlined" padding="md">
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text>Left</Text>
             <Divider orientation="vertical" />
             <Text>Center</Text>
-            <Divider orientation="vertical" variant="dashed" />
+            <Divider orientation="vertical" type="dashed" />
             <Text>Right</Text>
           </View>
         </Card>
@@ -191,21 +191,21 @@ export const DividerExamples = () => {
 
       {/* Custom Length */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Custom Length</Text>
+        <Text size="md" weight="semibold">Custom Length</Text>
         <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Auto length</Text>
             <Divider length="auto" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>Full length</Text>
             <Divider length="full" />
             <Text>Content below</Text>
           </Card>
           
-          <Card variant="outlined" padding="medium">
+          <Card type="outlined" padding="md">
             <Text>50% length</Text>
             <Divider length={50} />
             <Text>Content below</Text>