@idealyst/components 1.0.83 → 1.0.84

package/src/examples/MenuExamples.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Button, Menu, MenuItem } from '@idealyst/components';
+
+export const MenuExamples: React.FC = () => {
+  const [basicMenuOpen, setBasicMenuOpen] = useState(false);
+  const [placementMenuOpen, setPlacementMenuOpen] = useState(false);
+  const [iconNameMenuOpen, setIconNameMenuOpen] = useState(false);
+  const [intentMenuOpen, setIntentMenuOpen] = useState(false);
+  const [separatorMenuOpen, setSeparatorMenuOpen] = useState(false);
+  const [disabledMenuOpen, setDisabledMenuOpen] = useState(false);
+
+  const [selectedAction, setSelectedAction] = useState<string>('');
+
+  const basicItems: MenuItem[] = [
+    { id: 'action1', label: 'Action 1', onClick: () => setSelectedAction('Action 1') },
+    { id: 'action2', label: 'Action 2', onClick: () => setSelectedAction('Action 2') },
+    { id: 'action3', label: 'Action 3', onClick: () => setSelectedAction('Action 3') },
+  ];
+
+  const iconNameItems: MenuItem[] = [
+    { id: 'edit', label: 'Edit', icon: 'pencil', onClick: () => setSelectedAction('Edit') },
+    { id: 'copy', label: 'Copy', icon: 'content-copy', onClick: () => setSelectedAction('Copy') },
+    { id: 'share', label: 'Share', icon: 'share-variant', onClick: () => setSelectedAction('Share'), intent: 'primary' },
+    { id: 'delete', label: 'Delete', icon: 'delete', onClick: () => setSelectedAction('Delete'), intent: 'error' },
+  ];
+
+  const intentItems: MenuItem[] = [
+    { id: 'save', label: 'Save', intent: 'success', onClick: () => setSelectedAction('Save') },
+    { id: 'cancel', label: 'Cancel', intent: 'neutral', onClick: () => setSelectedAction('Cancel') },
+    { id: 'delete', label: 'Delete', intent: 'error', onClick: () => setSelectedAction('Delete') },
+    { id: 'warn', label: 'Warning Action', intent: 'warning', onClick: () => setSelectedAction('Warning') },
+  ];
+
+  const separatorItems: MenuItem[] = [
+    { id: 'new', label: 'New', onClick: () => setSelectedAction('New') },
+    { id: 'open', label: 'Open', onClick: () => setSelectedAction('Open') },
+    { id: 'sep1', label: '', separator: true },
+    { id: 'save', label: 'Save', onClick: () => setSelectedAction('Save') },
+    { id: 'saveas', label: 'Save As...', onClick: () => setSelectedAction('Save As') },
+    { id: 'sep2', label: '', separator: true },
+    { id: 'close', label: 'Close', onClick: () => setSelectedAction('Close') },
+  ];
+
+  const disabledItems: MenuItem[] = [
+    { id: 'enabled1', label: 'Enabled Action', onClick: () => setSelectedAction('Enabled') },
+    { id: 'disabled', label: 'Disabled Action', disabled: true },
+    { id: 'enabled2', label: 'Another Action', onClick: () => setSelectedAction('Another') },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Menu Examples</Text>
+
+      {selectedAction && (
+        <View spacing="sm" style={{ padding: 12, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
+          <Text>Last selected action: <Text weight="bold">{selectedAction}</Text></Text>
+        </View>
+      )}
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Menu</Text>
+        <Menu
+          items={basicItems}
+          open={basicMenuOpen}
+          onOpenChange={setBasicMenuOpen}
+        >
+          <Button type="outlined">
+            Open Menu
+          </Button>
+        </Menu>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Placement Options</Text>
+        <Menu
+          items={basicItems}
+          open={placementMenuOpen}
+          onOpenChange={setPlacementMenuOpen}
+          placement="bottom-start"
+        >
+          <Button type="outlined">
+            Bottom Start (default)
+          </Button>
+        </Menu>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Icons</Text>
+        <Menu
+          items={iconNameItems}
+          open={iconNameMenuOpen}
+          onOpenChange={setIconNameMenuOpen}
+        >
+          <Button type="outlined">
+            Menu with Icons
+          </Button>
+        </Menu>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <Menu
+          items={intentItems}
+          open={intentMenuOpen}
+          onOpenChange={setIntentMenuOpen}
+        >
+          <Button type="outlined">
+            Intent Menu
+          </Button>
+        </Menu>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Separators</Text>
+        <Menu
+          items={separatorItems}
+          open={separatorMenuOpen}
+          onOpenChange={setSeparatorMenuOpen}
+        >
+          <Button type="outlined">
+            File Menu
+          </Button>
+        </Menu>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Items</Text>
+        <Menu
+          items={disabledItems}
+          open={disabledMenuOpen}
+          onOpenChange={setDisabledMenuOpen}
+        >
+          <Button type="outlined">
+            Menu with Disabled
+          </Button>
+        </Menu>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default MenuExamples;

package/src/examples/PopoverExamples.tsx

@@ -6,32 +6,34 @@ export const PopoverExamples = () => {
   const [placementOpen, setPlacementOpen] = useState<string | null>(null);
   const [arrowOpen, setArrowOpen] = useState(false);
 
-  const basicButtonRef = useRef<HTMLDivElement>(null);
-  const placementButtonRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
-  const arrowButtonRef = useRef<HTMLDivElement>(null);
+  const basicButtonRef = useRef<any>(null);
+  const placementButtonRefs = useRef<{ [key: string]: any }>({});
+  const arrowButtonRef = useRef<any>(null);
 
   const placements = [
-    'top', 'top-start', 'top-end',
-    'bottom', 'bottom-start', 'bottom-end',
-    'left', 'left-start', 'left-end',
-    'right', 'right-start', 'right-end',
+    { id: 'top', label: 'Top' },
+    { id: 'top-start', label: 'Top Start' },
+    { id: 'top-end', label: 'Top End' },
+    { id: 'bottom', label: 'Bottom' },
+    { id: 'bottom-start', label: 'Bottom Start' },
+    { id: 'bottom-end', label: 'Bottom End' },
   ];
 
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-        <Text size="large" weight="bold" align="center">
+      <View spacing="lg">
+        <Text size="lg" weight="bold" align="center">
           Popover Examples
         </Text>
-        
+
         {/* Basic Popover */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Basic Popover</Text>
-          <div ref={basicButtonRef} style={{ display: 'inline-block' }}>
-            <Button onPress={() => setBasicOpen(true)}>
+          <Text size="md" weight="semibold">Basic Popover</Text>
+            <Button
+              ref={basicButtonRef}
+              onPress={() => setBasicOpen(true)}>
               Open Basic Popover
             </Button>
-          </div>
           <Popover
             open={basicOpen}
             onOpenChange={setBasicOpen}
@@ -40,8 +42,8 @@ export const PopoverExamples = () => {
           >
             <View spacing="sm">
               <Text weight="bold">Basic Popover</Text>
-              <Text size="small">This is a basic popover with some content.</Text>
-              <Button size="small" onPress={() => setBasicOpen(false)}>
+              <Text size="sm">This is a basic popover with some content.</Text>
+              <Button size="sm" onPress={() => setBasicOpen(false)}>
                 Close
               </Button>
             </View>
@@ -50,62 +52,56 @@ export const PopoverExamples = () => {
 
         {/* Placement Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Placement Options</Text>
-          <View style={{ 
-            display: 'grid', 
-            gridTemplateColumns: 'repeat(3, 1fr)', 
-            gap: 8, 
-            maxWidth: 400 
-          }}>
+          <Text size="md" weight="semibold">Placement Options</Text>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {placements.map((placement) => (
-              <div 
-                key={placement}
-                ref={(ref) => placementButtonRefs.current[placement] = ref}
-                style={{ display: 'inline-block' }}
-              >
-                <Button
-                  size="small"
-                  variant="outlined"
-                  onPress={() => setPlacementOpen(placement)}
+              <View key={placement.id}>
+                <View
+                  ref={(ref) => (placementButtonRefs.current[placement.id] = ref) as any}
+                  style={{ display: 'inline-block' }}
                 >
-                  {placement}
-                </Button>
-              </div>
+                  <Button
+                    size="sm"
+                    type="outlined"
+                    onPress={() => setPlacementOpen(placement.id)}
+                  >
+                    {placement.label}
+                  </Button>
+                </View>
+                {placementOpen === placement.id && (
+                  <Popover
+                    open={true}
+                    onOpenChange={() => setPlacementOpen(null)}
+                    anchor={{ current: placementButtonRefs.current[placement.id] }}
+                    placement={placement.id as any}
+                  >
+                    <View spacing="sm">
+                      <Text weight="bold">{placement.label} placement</Text>
+                      <Text size="sm">
+                        Positioned {placement.id} relative to the button
+                      </Text>
+                      <Button size="sm" onPress={() => setPlacementOpen(null)}>
+                        Close
+                      </Button>
+                    </View>
+                  </Popover>
+                )}
+              </View>
             ))}
           </View>
-          
-          {placementOpen && (
-            <Popover
-              open={!!placementOpen}
-              onOpenChange={() => setPlacementOpen(null)}
-              anchor={{ current: placementButtonRefs.current[placementOpen] }}
-              placement={placementOpen as any}
-            >
-              <View spacing="sm">
-                <Text weight="bold">{placementOpen} placement</Text>
-                <Text size="small">
-                  Positioned {placementOpen} relative to the button
-                </Text>
-                <Button size="small" onPress={() => setPlacementOpen(null)}>
-                  Close
-                </Button>
-              </View>
-            </Popover>
-          )}
         </View>
 
         {/* Arrow Example */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">With Arrow</Text>
-          <div ref={arrowButtonRef} style={{ display: 'inline-block' }}>
-            <Button 
-              variant="contained"
-              intent="success"
-              onPress={() => setArrowOpen(true)}
-            >
-              Popover with Arrow
-            </Button>
-          </div>
+          <Text size="md" weight="semibold">With Arrow</Text>
+          <Button
+            ref={arrowButtonRef}
+            type="contained"
+            intent="success"
+            onPress={() => setArrowOpen(true)}
+          >
+            Popover with Arrow
+          </Button>
           <Popover
             open={arrowOpen}
             onOpenChange={setArrowOpen}
@@ -115,10 +111,10 @@ export const PopoverExamples = () => {
           >
             <View spacing="sm">
               <Text weight="bold">Arrow Popover</Text>
-              <Text size="small">
+              <Text size="sm">
                 This popover includes an arrow pointing to the anchor element.
               </Text>
-              <Button size="small" onPress={() => setArrowOpen(false)}>
+              <Button size="sm" onPress={() => setArrowOpen(false)}>
                 Close
               </Button>
             </View>
@@ -127,24 +123,24 @@ export const PopoverExamples = () => {
 
         {/* Features Description */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Features</Text>
+          <Text size="md" weight="semibold">Features</Text>
           <View spacing="sm">
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Automatically positions within viewport bounds
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • 12 placement options (top, bottom, left, right with start/end variants)
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Optional arrow pointing to anchor element
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Click outside or escape key to close
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Smooth animations and transitions
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Follows anchor element on scroll/resize (web)
             </Text>
           </View>

package/src/examples/ProgressExamples.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import Progress from '../Progress';
+
+export const ProgressExamples: React.FC = () => {
+  const [dynamicValue, setDynamicValue] = useState(0);
+  const [interactiveValue, setInteractiveValue] = useState(50);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDynamicValue((prev) => (prev >= 100 ? 0 : prev + 10));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Progress Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Linear Progress</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Progress value={25} />
+          <Progress value={50} />
+          <Progress value={75} />
+          <Progress value={100} />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Progress value={60} size="sm" />
+          <Progress value={60} size="md" />
+          <Progress value={60} size="lg" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Progress value={70} intent="primary" />
+          <Progress value={70} intent="success" />
+          <Progress value={70} intent="warning" />
+          <Progress value={70} intent="error" />
+          <Progress value={70} intent="neutral" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Labels</Text>
+        <View spacing="sm">
+          <Progress value={30} showLabel />
+          <Progress value={60} showLabel label="Loading..." />
+          <Progress value={90} showLabel label="Almost done!" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Indeterminate</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Progress indeterminate />
+          <Progress indeterminate intent="success" />
+          <Progress indeterminate size="lg" intent="warning" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Circular Progress</Text>
+        <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
+          <Progress variant="circular" value={25} size="sm" />
+          <Progress variant="circular" value={50} size="md" />
+          <Progress variant="circular" value={75} size="lg" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Circular with Labels</Text>
+        <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
+          <Progress variant="circular" value={30} showLabel size="md" />
+          <Progress variant="circular" value={60} showLabel size="lg" intent="success" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Circular Indeterminate</Text>
+        <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
+          <Progress variant="circular" indeterminate size="sm" />
+          <Progress variant="circular" indeterminate size="md" intent="primary" />
+          <Progress variant="circular" indeterminate size="lg" intent="warning" />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rounded vs Straight</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <View spacing="xs">
+            <Text size="sm">Rounded (default)</Text>
+            <Progress value={70} rounded={true} />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Straight edges</Text>
+            <Progress value={70} rounded={false} />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Dynamic Progress</Text>
+        <Progress value={dynamicValue} showLabel />
+        <Text size="sm" color="secondary">Automatically updating every second</Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Interactive Circular Progress</Text>
+        <View spacing="sm">
+          <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+            <Progress variant="circular" value={interactiveValue} showLabel size="lg" />
+            <View spacing="sm">
+              <Button size="sm" onPress={() => setInteractiveValue(Math.max(0, interactiveValue - 10))}>
+                -10
+              </Button>
+              <Button size="sm" onPress={() => setInteractiveValue(Math.min(100, interactiveValue + 10))}>
+                +10
+              </Button>
+            </View>
+          </View>
+          <Text size="sm" color="secondary">Click buttons to change value</Text>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default ProgressExamples;

package/src/examples/RadioButtonExamples.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import { RadioButton, RadioGroup } from '../RadioButton';
+
+export const RadioButtonExamples: React.FC = () => {
+  const [selectedValue, setSelectedValue] = useState('option1');
+  const [selectedColor, setSelectedColor] = useState('blue');
+  const [selectedSize, setSelectedSize] = useState('md');
+  const [selectedIntent, setSelectedIntent] = useState('primary');
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <Text size="xl" weight="bold">RadioButton Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic RadioGroup</Text>
+        <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+          <RadioButton value="option1" label="Option 1" />
+          <RadioButton value="option2" label="Option 2" />
+          <RadioButton value="option3" label="Option 3" />
+        </RadioGroup>
+        <Text size="sm" color="secondary">Selected: {selectedValue}</Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Horizontal RadioGroup</Text>
+        <RadioGroup
+          value={selectedColor}
+          onValueChange={setSelectedColor}
+          orientation="horizontal"
+        >
+          <RadioButton value="red" label="Red" />
+          <RadioButton value="green" label="Green" />
+          <RadioButton value="blue" label="Blue" />
+        </RadioGroup>
+        <Text size="sm" color="secondary">Selected: {selectedColor}</Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Disabled Options</Text>
+        <RadioGroup value={selectedSize} onValueChange={setSelectedSize}>
+          <RadioButton value="sm" label="Small" />
+          <RadioButton value="md" label="Medium" />
+          <RadioButton value="lg" label="Large" disabled />
+          <RadioButton value="xl" label="Extra Large" />
+        </RadioGroup>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Group</Text>
+        <RadioGroup value="option1" disabled>
+          <RadioButton value="option1" label="Option A" />
+          <RadioButton value="option2" label="Option B" />
+          <RadioButton value="option3" label="Option C" />
+        </RadioGroup>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <RadioButton
+            value="sm"
+            label="Small"
+            size="sm"
+            checked={selectedSize === 'sm'}
+            onPress={() => setSelectedSize('sm')}
+          />
+          <RadioButton
+            value="md"
+            label="Medium"
+            size="md"
+            checked={selectedSize === 'md'}
+            onPress={() => setSelectedSize('md')}
+          />
+          <RadioButton
+            value="lg"
+            label="Large"
+            size="lg"
+            checked={selectedSize === 'lg'}
+            onPress={() => setSelectedSize('lg')}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intents</Text>
+        <View spacing="sm">
+          <RadioButton
+            value="primary"
+            label="Primary"
+            intent="primary"
+            checked={selectedIntent === 'primary'}
+            onPress={() => setSelectedIntent('primary')}
+          />
+          <RadioButton
+            value="success"
+            label="Success"
+            intent="success"
+            checked={selectedIntent === 'success'}
+            onPress={() => setSelectedIntent('success')}
+          />
+          <RadioButton
+            value="error"
+            label="Error"
+            intent="error"
+            checked={selectedIntent === 'error'}
+            onPress={() => setSelectedIntent('error')}
+          />
+          <RadioButton
+            value="warning"
+            label="Warning"
+            intent="warning"
+            checked={selectedIntent === 'warning'}
+            onPress={() => setSelectedIntent('warning')}
+          />
+          <RadioButton
+            value="neutral"
+            label="Neutral"
+            intent="neutral"
+            checked={selectedIntent === 'neutral'}
+            onPress={() => setSelectedIntent('neutral')}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Standalone RadioButtons</Text>
+        <View spacing="sm">
+          <RadioButton
+            value="standalone1"
+            label="Unchecked"
+            checked={false}
+            onPress={() => console.log('Pressed')}
+          />
+          <RadioButton
+            value="standalone2"
+            label="Checked"
+            checked={true}
+            onPress={() => console.log('Pressed')}
+          />
+          <RadioButton
+            value="standalone3"
+            label="Disabled Unchecked"
+            checked={false}
+            disabled
+          />
+          <RadioButton
+            value="standalone4"
+            label="Disabled Checked"
+            checked={true}
+            disabled
+          />
+        </View>
+      </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default RadioButtonExamples;