@idealyst/components 1.0.83 → 1.0.84

package/src/examples/AccordionExamples.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Screen, View, Text } from '../index';
+import Accordion from '../Accordion';
+import type { AccordionItem } from '../Accordion/types';
+
+export const AccordionExamples: React.FC = () => {
+  const basicItems: AccordionItem[] = [
+    {
+      id: 'item1',
+      title: 'What is React?',
+      content: 'React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.',
+    },
+    {
+      id: 'item2',
+      title: 'What is TypeScript?',
+      content: 'TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.',
+    },
+    {
+      id: 'item3',
+      title: 'What is Unistyles?',
+      content: 'Unistyles is a cross-platform styling library that works with both React and React Native, providing a unified API for styling components.',
+    },
+  ];
+
+  const richContentItems: AccordionItem[] = [
+    {
+      id: 'rich1',
+      title: 'Rich Content Example',
+      content: (
+        <View spacing="sm">
+          <Text weight="semibold">Features:</Text>
+          <Text>• Cross-platform support</Text>
+          <Text>• Type-safe styling</Text>
+          <Text>• Theme variants</Text>
+        </View>
+      ),
+    },
+    {
+      id: 'rich2',
+      title: 'Another Section',
+      content: (
+        <View>
+          <Text>This section contains rich content with multiple paragraphs.</Text>
+          <Text style={{ marginTop: 8 }}>You can include any React components here.</Text>
+        </View>
+      ),
+    },
+  ];
+
+  const disabledItems: AccordionItem[] = [
+    { id: 'enabled1', title: 'Enabled Item', content: 'This item is enabled.' },
+    { id: 'disabled', title: 'Disabled Item', content: 'This item is disabled.', disabled: true },
+    { id: 'enabled2', title: 'Another Enabled Item', content: 'This item is also enabled.' },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Accordion Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Accordion</Text>
+        <Accordion items={basicItems} />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Allow Multiple Expanded</Text>
+        <Accordion items={basicItems} allowMultiple />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Default Expanded</Text>
+        <Accordion items={basicItems} defaultExpanded={['item1', 'item2']} allowMultiple />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Default</Text>
+            <Accordion items={basicItems} type="standard" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Separated</Text>
+            <Accordion items={basicItems} type="separated" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Bordered</Text>
+            <Accordion items={basicItems} type="bordered" />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Small</Text>
+            <Accordion items={basicItems} size="sm" type="separated" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Medium (default)</Text>
+            <Accordion items={basicItems} size="md" type="separated" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Large</Text>
+            <Accordion items={basicItems} size="lg" type="separated" />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rich Content</Text>
+        <Accordion items={richContentItems} type="bordered" />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Items</Text>
+        <Accordion items={disabledItems} type="separated" />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default AccordionExamples;

package/src/examples/AlertExamples.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import { Alert, Screen, View, Text, Divider, Button } from '../index';
+export const AlertExamples = () => {
+  const [successVisible, setSuccessVisible] = useState(true);
+  const [errorVisible, setErrorVisible] = useState(true);
+
+  return (
+    <Screen background="primary" safeArea>
+      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text size="xl" weight="bold">Alert Examples</Text>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Intent Variants</Text>
+
+          <View spacing="sm">
+            <Alert
+              intent="primary"
+              title="Primary"
+              message="This is a primary alert for main actions and information."
+            />
+
+            <Alert
+              intent="success"
+              title="Success"
+              message="Your changes have been saved successfully."
+            />
+
+            <Alert
+              intent="error"
+              title="Error"
+              message="There was an error processing your request."
+            />
+
+            <Alert
+              intent="warning"
+              title="Warning"
+              message="Your session will expire in 5 minutes."
+            />
+
+            <Alert
+              intent="info"
+              title="Information"
+              message="A new version of the app is available."
+            />
+
+            <Alert
+              intent="neutral"
+              title="Note"
+              message="This is a general informational message."
+            />
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Style Variants</Text>
+
+          <View spacing="sm">
+            <Text size="md" weight="semibold">Filled</Text>
+            <Alert
+              type="filled"
+              intent="primary"
+              title="Filled Alert"
+              message="This is a filled alert with solid background."
+            />
+          </View>
+
+          <View spacing="sm">
+            <Text size="md" weight="semibold">Outlined</Text>
+            <Alert
+              type="outlined"
+              intent="primary"
+              title="Outlined Alert"
+              message="This is an outlined alert with border."
+            />
+          </View>
+
+          <View spacing="sm">
+            <Text size="md" weight="semibold">Soft (Default)</Text>
+            <Alert
+              type="soft"
+              intent="primary"
+              title="Soft Alert"
+              message="This is a soft alert with subtle background."
+            />
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Without Icons</Text>
+
+          <Alert
+            intent="success"
+            title="No Icon"
+            message="This alert does not display an icon."
+            showIcon={false}
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Custom Icons</Text>
+
+          <View spacing="sm">
+            <Alert
+              intent="info"
+              title="Custom Icon"
+              message="This alert uses a custom icon."
+              icon="🚀"
+            />
+
+            <Alert
+              intent="warning"
+              title="Custom Component Icon"
+              message="You can also use custom React components as icons."
+              icon={<Text style={{ fontSize: 20 }}>⭐</Text>}
+            />
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Dismissible Alerts</Text>
+
+          <View spacing="sm">
+            {successVisible && (
+              <Alert
+                intent="success"
+                title="Dismissible Success"
+                message="Click the X button to dismiss this alert."
+                dismissible
+                onDismiss={() => setSuccessVisible(false)}
+              />
+            )}
+
+            {!successVisible && (
+              <Button onPress={() => setSuccessVisible(true)}>
+                Show Success Alert
+              </Button>
+            )}
+
+            {errorVisible && (
+              <Alert
+                type="outlined"
+                intent="error"
+                title="Dismissible Error"
+                message="This outlined alert can also be dismissed."
+                dismissible
+                onDismiss={() => setErrorVisible(false)}
+              />
+            )}
+
+            {!errorVisible && (
+              <Button onPress={() => setErrorVisible(true)}>
+                Show Error Alert
+              </Button>
+            )}
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">With Actions</Text>
+
+          <View spacing="sm">
+            <Alert
+              intent="warning"
+              title="Unsaved Changes"
+              message="You have unsaved changes. Do you want to save them?"
+              actions={
+                <View style={{ flexDirection: 'row', gap: 8 }}>
+                  <Button type="contained" intent="primary" size="sm">
+                    Save
+                  </Button>
+                  <Button type="outlined" intent="neutral" size="sm">
+                    Discard
+                  </Button>
+                </View>
+              }
+            />
+
+            <Alert
+              type="outlined"
+              intent="info"
+              title="New Feature Available"
+              message="Check out our new collaboration features."
+              actions={
+                <Button type="text" intent="primary" size="sm">
+                  Learn More
+                </Button>
+              }
+            />
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">With Children</Text>
+
+          <Alert
+            intent="info"
+            title="Custom Content"
+          >
+            <View spacing="sm">
+              <Text size="sm">You can use children to add custom content:</Text>
+              <View style={{ paddingLeft: 16 }}>
+                <Text size="sm">• Custom formatted text</Text>
+                <Text size="sm">• Lists and structured content</Text>
+                <Text size="sm">• Any React components</Text>
+              </View>
+            </View>
+          </Alert>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">Complex Example</Text>
+
+          <Alert
+            type="filled"
+            intent="success"
+            title="Payment Successful"
+            message="Your order has been confirmed and will be shipped soon."
+            dismissible
+            onDismiss={() => console.log('Dismissed')}
+            actions={
+              <View style={{ flexDirection: 'row', gap: 8 }}>
+                <Button type="outlined" size="sm" onPress={() => console.log('View order')}>
+                  View Order
+                </Button>
+                <Button type="outlined" size="sm" onPress={() => console.log('Track')}>
+                  Track Shipment
+                </Button>
+              </View>
+            }
+          />
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">All Intent Colors (Soft Variant)</Text>
+
+          <View spacing="sm">
+            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+              <Alert
+                key={intent}
+                type="soft"
+                intent={intent}
+                message={`${intent.charAt(0).toUpperCase() + intent.slice(1)} alert message`}
+              />
+            ))}
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">All Intent Colors (Outlined Variant)</Text>
+
+          <View spacing="sm">
+            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+              <Alert
+                key={intent}
+                type="outlined"
+                intent={intent}
+                message={`${intent.charAt(0).toUpperCase() + intent.slice(1)} alert message`}
+              />
+            ))}
+          </View>
+        </View>
+
+        <View spacing="md">
+          <Text size="lg" weight="semibold">All Intent Colors (Filled Variant)</Text>
+
+          <View spacing="sm">
+            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+              <Alert
+                key={intent}
+                type="filled"
+                intent={intent}
+                message={`${intent.charAt(0).toUpperCase() + intent.slice(1)} alert message`}
+              />
+            ))}
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/AvatarExamples.tsx

@@ -5,33 +5,33 @@ export const AvatarExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Avatar Examples
       </Text>
       
       {/* Avatar 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' }}>
-          <Avatar size="small" fallback="S" />
-          <Avatar size="medium" fallback="M" />
-          <Avatar size="large" fallback="L" />
-          <Avatar size="xlarge" fallback="XL" />
+          <Avatar size="sm" fallback="S" />
+          <Avatar size="md" fallback="M" />
+          <Avatar size="lg" fallback="L" />
+          <Avatar size="xl" fallback="XL" />
         </View>
       </View>
 
       {/* Avatar Shapes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Shapes</Text>
+        <Text size="md" weight="semibold">Shapes</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Avatar shape="circle" fallback="C" size="large" />
-          <Avatar shape="square" fallback="S" size="large" />
+          <Avatar shape="circle" fallback="C" size="lg" />
+          <Avatar shape="square" fallback="S" size="lg" />
         </View>
       </View>
 
       {/* Avatar with Fallbacks */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Fallback Text</Text>
+        <Text size="md" weight="semibold">Fallback Text</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar fallback="JD" alt="John Doe" />
           <Avatar fallback="AB" alt="Alice Brown" />
@@ -42,7 +42,7 @@ export const AvatarExamples = () => {
 
       {/* Avatar with Images */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">With Images</Text>
+        <Text size="md" weight="semibold">With Images</Text>
         <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
           <Avatar 
             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
@@ -64,30 +64,30 @@ export const AvatarExamples = () => {
 
       {/* Avatar Group */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Avatar Group</Text>
+        <Text size="md" weight="semibold">Avatar Group</Text>
         <View style={{ flexDirection: 'row', gap: -8, alignItems: 'center' }}>
-          <Avatar fallback="JD" size="medium" />
-          <Avatar fallback="AB" size="medium" />
-          <Avatar fallback="MJ" size="medium" />
-          <Avatar fallback="+3" size="medium" />
+          <Avatar fallback="JD" size="md" />
+          <Avatar fallback="AB" size="md" />
+          <Avatar fallback="MJ" size="md" />
+          <Avatar fallback="+3" size="md" />
         </View>
       </View>
 
       {/* Different Size Combinations */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Size Combinations</Text>
+        <Text size="md" weight="semibold">Size Combinations</Text>
         <View spacing="sm">
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="small" fallback="S" />
-            <Text size="small">Small avatar with text</Text>
+            <Avatar size="sm" fallback="S" />
+            <Text size="sm">Small avatar with text</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="medium" fallback="M" />
-            <Text size="medium">Medium avatar with text</Text>
+            <Avatar size="md" fallback="M" />
+            <Text size="md">Medium avatar with text</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="large" fallback="L" />
-            <Text size="large">Large avatar with text</Text>
+            <Avatar size="lg" fallback="L" />
+            <Text size="lg">Large avatar with text</Text>
           </View>
         </View>
       </View>