@idealyst/components 1.0.82 → 1.0.84

package/src/examples/ImageExamples.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import Image from '../Image';
+
+export const ImageExamples: React.FC = () => {
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Image Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Image</Text>
+        <Image
+          source="https://picsum.photos/400/300"
+          alt="Random placeholder image"
+          width={400}
+          height={300}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Object Fit Variants</Text>
+        <View spacing="sm">
+          <Text size="sm" weight="medium">Cover (default)</Text>
+          <Image
+            source="https://picsum.photos/800/400"
+            alt="Cover example"
+            width={300}
+            height={200}
+            objectFit="cover"
+          />
+
+          <Text size="sm" weight="medium">Contain</Text>
+          <Image
+            source="https://picsum.photos/800/400"
+            alt="Contain example"
+            width={300}
+            height={200}
+            objectFit="contain"
+          />
+
+          <Text size="sm" weight="medium">Fill</Text>
+          <Image
+            source="https://picsum.photos/800/400"
+            alt="Fill example"
+            width={300}
+            height={200}
+            objectFit="fill"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Aspect Ratio</Text>
+        <View spacing="sm">
+          <Text size="sm" weight="medium">16:9 Aspect Ratio</Text>
+          <Image
+            source="https://picsum.photos/1600/900"
+            alt="16:9 aspect ratio"
+            width="100%"
+            aspectRatio={16 / 9}
+          />
+
+          <Text size="sm" weight="medium">1:1 Square</Text>
+          <Image
+            source="https://picsum.photos/600/600"
+            alt="Square aspect ratio"
+            width={200}
+            aspectRatio={1}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Border Radius</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Rounded (8px)</Text>
+            <Image
+              source="https://picsum.photos/200/200?random=1"
+              alt="Rounded corners"
+              width={150}
+              height={150}
+              borderRadius={8}
+            />
+          </View>
+
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Very Rounded (24px)</Text>
+            <Image
+              source="https://picsum.photos/200/200?random=2"
+              alt="Very rounded corners"
+              width={150}
+              height={150}
+              borderRadius={24}
+            />
+          </View>
+
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Circle (50%)</Text>
+            <Image
+              source="https://picsum.photos/200/200?random=3"
+              alt="Circle"
+              width={150}
+              height={150}
+              borderRadius={75}
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Lazy Loading</Text>
+        <Text size="sm" color="secondary">Images load as they scroll into view</Text>
+        <View spacing="sm">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Image
+              key={i}
+              source={`https://picsum.photos/400/200?random=${i + 10}`}
+              alt={`Lazy loaded image ${i}`}
+              width="100%"
+              height={200}
+              loading="lazy"
+            />
+          ))}
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Custom Placeholder</Text>
+        <Image
+          source="https://picsum.photos/400/300?random=20"
+          alt="Custom placeholder"
+          width={400}
+          height={300}
+          placeholder={
+            <View style={{ padding: 20 }}>
+              <Text>Loading custom image...</Text>
+            </View>
+          }
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Error Handling</Text>
+        <Text size="sm" color="secondary">Image with broken URL shows fallback</Text>
+        <Image
+          source="https://broken-url-that-does-not-exist.com/image.jpg"
+          alt="Broken image"
+          width={400}
+          height={300}
+          fallback={
+            <View style={{ padding: 20 }}>
+              <Text color="primary">❌ Failed to load image</Text>
+            </View>
+          }
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Responsive Width</Text>
+        <Image
+          source="https://picsum.photos/1200/400"
+          alt="Responsive image"
+          width="100%"
+          aspectRatio={3}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default ImageExamples;

package/src/examples/InputExamples.tsx

@@ -6,17 +6,63 @@ export const InputExamples = () => {
   const [emailValue, setEmailValue] = useState('');
   const [passwordValue, setPasswordValue] = useState('');
   const [numberValue, setNumberValue] = useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [usernameValue, setUsernameValue] = useState('');
 
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Input Examples
       </Text>
-      
+
+      {/* With Icons */}
+      <View spacing="md">
+        <Text size="md" weight="semibold">With Icons</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            leftIcon="email"
+            value={emailValue}
+            onChangeText={setEmailValue}
+            placeholder="Email with icon"
+            inputType="email"
+          />
+          <Input
+            leftIcon="account"
+            value={usernameValue}
+            onChangeText={setUsernameValue}
+            placeholder="Username with icon"
+          />
+          <Input
+            rightIcon="magnify"
+            value={searchValue}
+            onChangeText={setSearchValue}
+            placeholder="Search with icon"
+          />
+          <Input
+            leftIcon="lock"
+            rightIcon="check"
+            placeholder="Both icons"
+          />
+          <Input
+            leftIcon="lock"
+            value={passwordValue}
+            onChangeText={setPasswordValue}
+            placeholder="Password with toggle"
+            inputType="password"
+          />
+          <Input
+            leftIcon="lock"
+            placeholder="Password without toggle"
+            inputType="password"
+            showPasswordToggle={false}
+          />
+        </View>
+      </View>
+
       {/* Input Types */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Input Types</Text>
+        <Text size="md" weight="semibold">Input Types</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Input
             value={textValue}
@@ -25,19 +71,21 @@ export const InputExamples = () => {
             inputType="text"
           />
           <Input
+            leftIcon="email"
             value={emailValue}
             onChangeText={setEmailValue}
             placeholder="Email input"
             inputType="email"
           />
           <Input
+            leftIcon="lock"
             value={passwordValue}
             onChangeText={setPasswordValue}
             placeholder="Password input"
             inputType="password"
-            secureTextEntry
           />
           <Input
+            leftIcon="calculator"
             value={numberValue}
             onChangeText={setNumberValue}
             placeholder="Number input"
@@ -48,58 +96,68 @@ export const InputExamples = () => {
 
       {/* Input Sizes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
+        <Text size="md" weight="semibold">Sizes</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Input
+            leftIcon="email"
             placeholder="Small input"
-            size="small"
+            size="sm"
           />
           <Input
+            leftIcon="email"
             placeholder="Medium input"
-            size="medium"
+            size="md"
           />
           <Input
+            leftIcon="email"
             placeholder="Large input"
-            size="large"
+            size="lg"
           />
         </View>
       </View>
 
       {/* Input Variants */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
+        <Text size="md" weight="semibold">Variants</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Input
-            placeholder="Default variant"
-            variant="default"
-          />
-          <Input
+            leftIcon="magnify"
             placeholder="Outlined variant"
-            variant="outlined"
+            type="outlined"
           />
           <Input
+            leftIcon="magnify"
             placeholder="Filled variant"
-            variant="filled"
+            type="filled"
+          />
+          <Input
+            leftIcon="magnify"
+            placeholder="Bare variant"
+            type="bare"
           />
         </View>
       </View>
 
       {/* Input States */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">States</Text>
+        <Text size="md" weight="semibold">States</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Input
+            leftIcon="account"
             placeholder="Normal state"
           />
           <Input
+            leftIcon="account"
             placeholder="Disabled state"
             disabled
           />
           <Input
+            leftIcon="account"
             placeholder="Error state"
             hasError
           />
           <Input
+            leftIcon="account"
             value="Pre-filled value"
             onChangeText={() => {}}
           />
@@ -108,7 +166,7 @@ export const InputExamples = () => {
 
       {/* Auto-capitalization Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Auto-capitalization</Text>
+        <Text size="md" weight="semibold">Auto-capitalization</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Input
             placeholder="No capitalization"

package/src/examples/ListExamples.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Badge } from '@idealyst/components';
+import { List, ListItem, ListSection } from '../List';
+
+export const ListExamples: React.FC = () => {
+  const [selectedItem, setSelectedItem] = useState('home');
+  const [selectedNav, setSelectedNav] = useState('dashboard');
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">List Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic List</Text>
+        <List type="divided">
+          <ListItem label="Item 1" />
+          <ListItem label="Item 2" />
+          <ListItem label="Item 3" />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Default</Text>
+            <List type="default">
+              <ListItem label="Item 1" />
+              <ListItem label="Item 2" />
+              <ListItem label="Item 3" />
+            </List>
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Bordered</Text>
+            <List type="bordered">
+              <ListItem label="Item 1" />
+              <ListItem label="Item 2" />
+              <ListItem label="Item 3" />
+            </List>
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Divided</Text>
+            <List type="divided">
+              <ListItem label="Item 1" />
+              <ListItem label="Item 2" />
+              <ListItem label="Item 3" />
+            </List>
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <List type="bordered" size="sm">
+            <ListItem label="Small Item" />
+            <ListItem label="Small Item" />
+          </List>
+          <List type="bordered" size="md">
+            <ListItem label="Medium Item" />
+            <ListItem label="Medium Item" />
+          </List>
+          <List type="bordered" size="lg">
+            <ListItem label="Large Item" />
+            <ListItem label="Large Item" />
+          </List>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Clickable List</Text>
+        <List type="bordered">
+          <ListItem
+            label="Home"
+            selected={selectedItem === 'home'}
+            onPress={() => setSelectedItem('home')}
+          />
+          <ListItem
+            label="Settings"
+            selected={selectedItem === 'settings'}
+            onPress={() => setSelectedItem('settings')}
+          />
+          <ListItem
+            label="Profile"
+            selected={selectedItem === 'profile'}
+            onPress={() => setSelectedItem('profile')}
+          />
+        </List>
+        <Text size="sm" color="secondary">
+          Selected: {selectedItem}
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Leading Elements</Text>
+        <List type="divided">
+          <ListItem
+            label="Dashboard"
+            leading="home"
+            onPress={() => console.log('Dashboard')}
+          />
+          <ListItem
+            label="Settings"
+            leading="cog"
+            onPress={() => console.log('Settings')}
+          />
+          <ListItem
+            label="Profile"
+            leading="account"
+            onPress={() => console.log('Profile')}
+          />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Trailing Elements</Text>
+        <List type="bordered">
+          <ListItem
+            label="Notifications"
+            leading="bell"
+            trailing={<Badge type="filled" color="red">3</Badge>}
+          />
+          <ListItem
+            label="Messages"
+            leading="email"
+            trailing={<Badge type="filled" color="blue">12</Badge>}
+          />
+          <ListItem
+            label="Updates"
+            leading="refresh"
+            trailing={<Text size="sm" color="secondary">New</Text>}
+          />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Navigation Sidebar</Text>
+        <List type="bordered">
+          <ListItem
+            label="Dashboard"
+            leading="view-dashboard"
+            selected={selectedNav === 'dashboard'}
+            onPress={() => setSelectedNav('dashboard')}
+          />
+          <ListItem
+            label="Analytics"
+            leading="chart-line"
+            selected={selectedNav === 'analytics'}
+            onPress={() => setSelectedNav('analytics')}
+          />
+          <ListItem
+            label="Reports"
+            leading="file-document"
+            selected={selectedNav === 'reports'}
+            onPress={() => setSelectedNav('reports')}
+          />
+          <ListItem
+            label="Settings"
+            leading="cog"
+            selected={selectedNav === 'settings'}
+            onPress={() => setSelectedNav('settings')}
+          />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Sections</Text>
+        <List type="divided">
+          <ListSection title="Main">
+            <ListItem
+              label="Dashboard"
+              leading="home"
+            />
+            <ListItem
+              label="Analytics"
+              leading="chart-line"
+            />
+          </ListSection>
+
+          <ListSection title="Settings">
+            <ListItem
+              label="Profile"
+              leading="account"
+            />
+            <ListItem
+              label="Preferences"
+              leading="cog"
+            />
+            <ListItem
+              label="Security"
+              leading="lock"
+            />
+          </ListSection>
+
+          <ListSection title="Other">
+            <ListItem
+              label="Help"
+              leading="help-circle"
+            />
+            <ListItem
+              label="Logout"
+              leading="logout"
+            />
+          </ListSection>
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Indented Items</Text>
+        <List type="bordered">
+          <ListItem label="Parent Item 1" />
+          <ListItem label="Child Item 1.1" indent={1} />
+          <ListItem label="Child Item 1.2" indent={1} />
+          <ListItem label="Grandchild Item 1.2.1" indent={2} />
+          <ListItem label="Parent Item 2" />
+          <ListItem label="Child Item 2.1" indent={1} />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Items</Text>
+        <List type="bordered">
+          <ListItem
+            label="Enabled Item"
+            onPress={() => console.log('Clicked')}
+          />
+          <ListItem
+            label="Disabled Item"
+            disabled
+            onPress={() => console.log('This should not trigger')}
+          />
+          <ListItem
+            label="Another Enabled Item"
+            onPress={() => console.log('Clicked')}
+          />
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rich Content</Text>
+        <List type="bordered">
+          <ListItem
+            leading="account-circle"
+            trailing={<Text size="sm" color="secondary">Admin</Text>}
+          >
+            <View>
+              <Text weight="semibold">John Doe</Text>
+              <Text size="sm" color="secondary">john.doe@example.com</Text>
+            </View>
+          </ListItem>
+          <ListItem
+            leading="account-circle"
+            trailing={<Text size="sm" color="secondary">User</Text>}
+          >
+            <View>
+              <Text weight="semibold">Jane Smith</Text>
+              <Text size="sm" color="secondary">jane.smith@example.com</Text>
+            </View>
+          </ListItem>
+        </List>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Active States</Text>
+        <List type="bordered">
+          <ListItem
+            label="Normal Item"
+            onPress={() => console.log('Normal')}
+          />
+          <ListItem
+            label="Active Item"
+            active
+            onPress={() => console.log('Active')}
+          />
+          <ListItem
+            label="Selected Item"
+            selected
+            onPress={() => console.log('Selected')}
+          />
+        </List>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default ListExamples;