@idealyst/components 1.0.82 → 1.0.84

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;

package/src/examples/TabBarExamples.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import TabBar from '../TabBar';
+import type { TabBarItem } from '../TabBar/types';
+
+export const TabBarExamples: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('tab1');
+  const [variantTab, setVariantTab] = useState('home');
+  const [pillTab, setPillTab] = useState('tab1');
+
+  const basicTabs: TabBarItem[] = [
+    { value: 'tab1', label: 'Tab 1' },
+    { value: 'tab2', label: 'Tab 2' },
+    { value: 'tab3', label: 'Tab 3' },
+  ];
+
+  const variantTabs: TabBarItem[] = [
+    { value: 'home', label: 'Home' },
+    { value: 'search', label: 'Search' },
+    { value: 'settings', label: 'Settings' },
+  ];
+
+  const disabledTabs: TabBarItem[] = [
+    { value: 'tab1', label: 'Enabled' },
+    { value: 'tab2', label: 'Disabled', disabled: true },
+    { value: 'tab3', label: 'Enabled' },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">TabBar Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic TabBar</Text>
+        <TabBar
+          items={basicTabs}
+          value={activeTab}
+          onChange={setActiveTab}
+        />
+        <Text size="sm" color="secondary">
+          Active tab: {activeTab}
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Standard</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="standard"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Pills</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="pills"
+              pillMode="light"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Underline</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="underline"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="sm"
+          />
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="md"
+          />
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="lg"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Pill Modes</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Light Mode (dark pill on light background)</Text>
+            <TabBar
+              items={basicTabs}
+              value={pillTab}
+              onChange={setPillTab}
+              type="pills"
+              pillMode="light"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Dark Mode (light pill on dark background)</Text>
+            <TabBar
+              items={basicTabs}
+              value={pillTab}
+              onChange={setPillTab}
+              type="pills"
+              pillMode="dark"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Tabs</Text>
+        <TabBar
+          items={disabledTabs}
+          value={activeTab}
+          onChange={setActiveTab}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TabBarExamples;