@idealyst/components 1.0.83 → 1.0.84

package/src/examples/SkeletonExamples.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import { Screen, View, Text, Skeleton, SkeletonGroup, Divider, Card } from '../index';
+
+export const SkeletonExamples = () => {
+  return (
+    <Screen background="primary" safeArea>
+      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text size="xl" weight="bold">Skeleton Examples</Text>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Basic Shapes</Text>
+
+        <Text size="md" weight="semibold">Rectangle (Default)</Text>
+        <Skeleton width="100%" height={40} shape="rectangle" />
+
+        <Text size="md" weight="semibold">Rounded</Text>
+        <Skeleton width="100%" height={40} shape="rounded" />
+
+        <Text size="md" weight="semibold">Circle</Text>
+        <Skeleton width={64} height={64} shape="circle" />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Custom Border Radius</Text>
+
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={4} />
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={16} />
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={24} />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Animation Types</Text>
+
+        <Text size="md" weight="semibold">Pulse (Default)</Text>
+        <Skeleton width="100%" height={40} animation="pulse" />
+
+        <Text size="md" weight="semibold">Wave</Text>
+        <Skeleton width="100%" height={40} animation="wave" />
+
+        <Text size="md" weight="semibold">None</Text>
+        <Skeleton width="100%" height={40} animation="none" />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Skeleton Groups</Text>
+
+        <Text size="md" weight="semibold">Default Group (3 items)</Text>
+        <SkeletonGroup />
+
+        <Text size="md" weight="semibold">Custom Count (5 items)</Text>
+        <SkeletonGroup count={5} />
+
+        <Text size="md" weight="semibold">Custom Spacing</Text>
+        <SkeletonGroup count={3} spacing={20} />
+
+        <Text size="md" weight="semibold">Custom Skeleton Props</Text>
+        <SkeletonGroup
+          count={4}
+          spacing={16}
+          skeletonProps={{
+            height: 60,
+            shape: 'rounded',
+            animation: 'wave',
+          }}
+        />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Profile Card Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+              <Skeleton width={64} height={64} shape="circle" />
+              <View style={{ flex: 1, gap: 8 }}>
+                <Skeleton width="60%" height={24} shape="rounded" />
+                <Skeleton width="40%" height={16} shape="rounded" />
+              </View>
+            </View>
+            <SkeletonGroup count={3} skeletonProps={{ height: 16, shape: 'rounded' }} />
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Article Card Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            <Skeleton width="100%" height={200} shape="rounded" />
+            <Skeleton width="80%" height={28} shape="rounded" />
+            <SkeletonGroup
+              count={3}
+              spacing={8}
+              skeletonProps={{ height: 16, shape: 'rounded' }}
+            />
+            <View style={{ flexDirection: 'row', gap: 12, marginTop: 8 }}>
+              <Skeleton width={32} height={32} shape="circle" />
+              <Skeleton width={120} height={16} shape="rounded" />
+            </View>
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">List Item Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            {[1, 2, 3].map((item) => (
+              <View key={item} style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+                <Skeleton width={48} height={48} shape="rounded" />
+                <View style={{ flex: 1, gap: 8 }}>
+                  <Skeleton width="70%" height={18} shape="rounded" />
+                  <Skeleton width="50%" height={14} shape="rounded" />
+                </View>
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Table Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="sm">
+            {/* Header */}
+            <View style={{ flexDirection: 'row', gap: 12 }}>
+              <Skeleton width={40} height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+            </View>
+            <Divider spacing="sm" />
+            {/* Rows */}
+            {[1, 2, 3, 4, 5].map((row) => (
+              <View key={row} style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+                <Skeleton width={40} height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Dashboard Card Loading</Text>
+
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          {[1, 2, 3, 4].map((card) => (
+            <Card key={card} type="outlined" style={{ flex: 1, minWidth: 180 }}>
+              <View spacing="sm">
+                <Skeleton width="60%" height={16} shape="rounded" />
+                <Skeleton width="80%" height={32} shape="rounded" />
+                <Skeleton width="40%" height={12} shape="rounded" />
+              </View>
+            </Card>
+          ))}
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Comment Thread Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            {[1, 2, 3].map((comment) => (
+              <View key={comment} style={{ paddingLeft: comment > 1 ? 32 : 0 }}>
+                <View style={{ flexDirection: 'row', gap: 12 }}>
+                  <Skeleton width={40} height={40} shape="circle" />
+                  <View style={{ flex: 1, gap: 8 }}>
+                    <Skeleton width="30%" height={16} shape="rounded" />
+                    <SkeletonGroup
+                      count={2}
+                      spacing={6}
+                      skeletonProps={{ height: 14, shape: 'rounded' }}
+                    />
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Mixed Shapes and Sizes</Text>
+
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Skeleton width={80} height={80} shape="circle" />
+          <Skeleton width={80} height={80} shape="rounded" borderRadius={16} />
+          <Skeleton width={80} height={80} shape="rectangle" />
+        </View>
+
+        <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+          <Skeleton width={24} height={24} shape="circle" />
+          <Skeleton width={32} height={32} shape="circle" />
+          <Skeleton width={48} height={48} shape="circle" />
+          <Skeleton width={64} height={64} shape="circle" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Custom Widths</Text>
+
+        <Skeleton width={100} height={20} shape="rounded" />
+        <Skeleton width="25%" height={20} shape="rounded" />
+        <Skeleton width="50%" height={20} shape="rounded" />
+        <Skeleton width="75%" height={20} shape="rounded" />
+        <Skeleton width="100%" height={20} shape="rounded" />
+      </View>
+    </Screen>
+  );
+};

package/src/examples/SliderExamples.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import Slider from '../Slider';
+
+export const SliderExamples: React.FC = () => {
+  const [basicValue, setBasicValue] = useState(50);
+  const [volumeValue, setVolumeValue] = useState(75);
+  const [temperatureValue, setTemperatureValue] = useState(20);
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <Text size="xl" weight="bold">Slider Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Slider</Text>
+        <Slider
+          value={basicValue}
+          onValueChange={setBasicValue}
+          showValue
+        />
+        <Text size="sm" color="secondary">Value: {basicValue}</Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <View spacing="xs">
+            <Text size="sm">Small</Text>
+            <Slider defaultValue={30} size="sm" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Medium (default)</Text>
+            <Slider defaultValue={50} size="md" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Large</Text>
+            <Slider defaultValue={70} size="lg" />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <View spacing="xs">
+            <Text size="sm">Primary</Text>
+            <Slider defaultValue={60} intent="primary" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Success</Text>
+            <Slider defaultValue={60} intent="success" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Error</Text>
+            <Slider defaultValue={60} intent="error" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Warning</Text>
+            <Slider defaultValue={60} intent="warning" />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Neutral</Text>
+            <Slider defaultValue={60} intent="neutral" />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Min/Max Labels</Text>
+        <Slider
+          defaultValue={50}
+          showMinMax
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Range & Step</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <View spacing="xs">
+            <Text size="sm">Range: 0-10, Step: 1</Text>
+            <Slider
+              min={0}
+              max={10}
+              step={1}
+              defaultValue={5}
+              showValue
+              showMinMax
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Range: -50 to 50, Step: 5</Text>
+            <Slider
+              min={-50}
+              max={50}
+              step={5}
+              defaultValue={0}
+              showValue
+              showMinMax
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Marks</Text>
+        <Slider
+          min={0}
+          max={100}
+          defaultValue={50}
+          marks={[
+            { value: 0, label: '0%' },
+            { value: 25, label: '25%' },
+            { value: 50, label: '50%' },
+            { value: 75, label: '75%' },
+            { value: 100, label: '100%' },
+          ]}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Volume Control</Text>
+        <Slider
+          value={volumeValue}
+          onValueChange={setVolumeValue}
+          min={0}
+          max={100}
+          showValue
+          intent="primary"
+          marks={[
+            { value: 0, label: 'Mute' },
+            { value: 50 },
+            { value: 100, label: 'Max' },
+          ]}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Icons</Text>
+        <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <View spacing="xs">
+            <Text size="sm">Volume with icon</Text>
+            <Slider
+              defaultValue={60}
+              icon="volume-high"
+              intent="primary"
+              showMinMax
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Brightness with icon</Text>
+            <Slider
+              defaultValue={75}
+              icon="brightness-6"
+              intent="warning"
+              showMinMax
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm">Temperature with icon</Text>
+            <Slider
+              defaultValue={22}
+              min={10}
+              max={30}
+              icon="thermometer"
+              intent="error"
+              showMinMax
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Temperature Control</Text>
+        <Slider
+          value={temperatureValue}
+          onValueChange={setTemperatureValue}
+          min={10}
+          max={30}
+          step={0.5}
+          showValue
+          showMinMax
+          intent="warning"
+        />
+        <Text size="sm" color="secondary">Temperature: {temperatureValue}°C</Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled</Text>
+        <Slider
+          defaultValue={60}
+          disabled
+        />
+      </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default SliderExamples;

package/src/examples/SwitchExamples.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import Switch from '../Switch';
+
+export const SwitchExamples: React.FC = () => {
+  const [basicChecked, setBasicChecked] = useState(false);
+  const [labelledChecked, setLabelledChecked] = useState(false);
+  const [intentChecked, setIntentChecked] = useState({
+    primary: false,
+    success: false,
+    error: false,
+    warning: false,
+    neutral: false,
+  });
+  const [iconChecked, setIconChecked] = useState({
+    basic: false,
+    notifications: true,
+    visibility: false,
+    volume: true,
+    wifi: false,
+  });
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Switch Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Switch</Text>
+        <Switch
+          checked={basicChecked}
+          onCheckedChange={setBasicChecked}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Label</Text>
+        <Switch
+          checked={labelledChecked}
+          onCheckedChange={setLabelledChecked}
+          label="Enable notifications"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Label Position</Text>
+        <Switch
+          checked={labelledChecked}
+          onCheckedChange={setLabelledChecked}
+          label="Left label"
+          labelPosition="left"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <Switch
+            checked={basicChecked}
+            onCheckedChange={setBasicChecked}
+            size="sm"
+            label="Small"
+          />
+          <Switch
+            checked={basicChecked}
+            onCheckedChange={setBasicChecked}
+            size="md"
+            label="Medium (default)"
+          />
+          <Switch
+            checked={basicChecked}
+            onCheckedChange={setBasicChecked}
+            size="lg"
+            label="Large"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View spacing="sm">
+          <Switch
+            checked={intentChecked.primary}
+            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, primary: checked }))}
+            intent="primary"
+            label="Primary"
+          />
+          <Switch
+            checked={intentChecked.success}
+            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, success: checked }))}
+            intent="success"
+            label="Success"
+          />
+          <Switch
+            checked={intentChecked.error}
+            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, error: checked }))}
+            intent="error"
+            label="Error"
+          />
+          <Switch
+            checked={intentChecked.warning}
+            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, warning: checked }))}
+            intent="warning"
+            label="Warning"
+          />
+          <Switch
+            checked={intentChecked.neutral}
+            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, neutral: checked }))}
+            intent="neutral"
+            label="Neutral"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Icons</Text>
+        <View spacing="sm">
+          <Switch
+            checked={iconChecked.basic}
+            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, basic: checked }))}
+            enabledIcon="check"
+            disabledIcon="close"
+            label="On/Off"
+          />
+          <Switch
+            checked={iconChecked.notifications}
+            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, notifications: checked }))}
+            enabledIcon="bell"
+            disabledIcon="bell-off"
+            intent="success"
+            label="Notifications"
+          />
+          <Switch
+            checked={iconChecked.visibility}
+            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, visibility: checked }))}
+            enabledIcon="eye"
+            disabledIcon="eye-off"
+            intent="primary"
+            label="Visibility"
+          />
+          <Switch
+            checked={iconChecked.volume}
+            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, volume: checked }))}
+            enabledIcon="volume-high"
+            disabledIcon="volume-off"
+            intent="warning"
+            label="Sound"
+            size="lg"
+          />
+          <Switch
+            checked={iconChecked.wifi}
+            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, wifi: checked }))}
+            enabledIcon="wifi"
+            disabledIcon="wifi-off"
+            intent="error"
+            label="WiFi Connection"
+            size="sm"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled States</Text>
+        <View spacing="sm">
+          <Switch
+            checked={false}
+            disabled
+            label="Disabled unchecked"
+          />
+          <Switch
+            checked={true}
+            disabled
+            label="Disabled checked"
+          />
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default SwitchExamples;