@idealyst/mcp-server 1.0.84

package/src/data/components/Progress.ts

@@ -0,0 +1,95 @@
+export const Progress = {
+  category: "feedback",
+  description: "Progress indicator showing completion status of tasks or operations",
+      props: `
+- \`value\`: number - The current progress value (0 to max)
+- \`max\`: number - The maximum value representing 100% completion
+- \`variant\`: ProgressVariant - The visual variant (linear or circular)
+- \`intent\`: ProgressIntentVariant - The intent/color scheme of the progress bar
+- \`size\`: ProgressSizeVariant - The size variant of the progress indicator
+- \`indeterminate\`: boolean - Whether to show indeterminate/loading animation
+- \`showLabel\`: boolean - Whether to display the percentage label
+- \`label\`: string - Custom label text (overrides percentage)
+- \`rounded\`: boolean - Whether to use rounded ends for linear progress
+`,
+  features: [
+    "Linear and circular variants",
+    "Determinate and indeterminate modes",
+    "Five intent colors",
+    "Three sizes",
+    "Percentage label support",
+    "Custom label text",
+    "Rounded ends option",
+  ],
+  bestPractices: [
+    "Use determinate progress when percentage is known",
+    "Use indeterminate progress for unknown duration",
+    "Show label for user feedback",
+    "Use circular variant for compact spaces",
+    "Match intent to operation context",
+  ],
+  usage: `
+import { Progress } from '@idealyst/components';
+
+<Progress
+  value={65}
+  type="linear"
+  intent="primary"
+  showLabel
+/>
+`,
+  examples: {
+    basic: `import { Progress } from '@idealyst/components';
+
+<Progress value={50} />`,
+
+    variants: `import { Progress, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Progress value={30} type="linear" intent="primary" />
+  <Progress value={60} type="linear" intent="success" />
+  <Progress value={value} type="circular" size="lg" showLabel />
+</View>`,
+
+    "with-icons": `import { Progress, View, Text } from '@idealyst/components';
+
+<View spacing="sm">
+  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+    <Text>Uploading...</Text>
+    <Text>{progress}%</Text>
+  </View>
+  <Progress value={progress} intent="primary" />
+</View>`,
+
+    interactive: `import { Progress, Button, View, Text } from '@idealyst/components';
+import { useState, useEffect } from 'react';
+
+function Example() {
+  const [progress, setProgress] = useState(0);
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    if (running && progress < 100) {
+      const timer = setTimeout(() => setProgress(progress + 10), 500);
+      return () => clearTimeout(timer);
+    } else if (progress >= 100) {
+      setRunning(false);
+    }
+  }, [progress, running]);
+
+  const handleStart = () => {
+    setProgress(0);
+    setRunning(true);
+  };
+
+  return (
+    <View spacing="md">
+      <Progress value={progress} intent="success" showLabel />
+      <Button onPress={handleStart} disabled={running}>
+        Start
+      </Button>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/RadioButton.ts

@@ -0,0 +1,130 @@
+export const RadioButton = {
+  category: "form",
+  description: "Radio button for single-choice selection within a group",
+      props: `
+- \`value\`: string - The value of this radio button option
+- \`checked\`: boolean - Whether this radio button is selected
+- \`onPress\`: function - Called when the radio button is pressed
+- \`disabled\`: boolean - Whether the radio button is disabled
+- \`label\`: string - Label text to display next to the radio button
+- \`size\`: RadioButtonSizeVariant - The size variant of the radio button
+- \`intent\`: RadioButtonIntentVariant - The intent/color scheme of the radio button
+`,
+  features: [
+    "Single selection within group",
+    "Horizontal and vertical layouts",
+    "Label support",
+    "Three sizes",
+    "Five intent colors",
+    "Disabled state (individual or group)",
+    "Controlled component",
+  ],
+  bestPractices: [
+    "Use RadioGroup to manage selection state",
+    "Always provide labels for accessibility",
+    "Use for mutually exclusive options (3-5 choices)",
+    "For 2 options, consider Switch or Checkbox",
+    "For many options (>5), consider Select",
+    "Group related options visually",
+  ],
+  usage: `
+import { RadioGroup, RadioButton } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState('option1');
+
+  return (
+    <RadioGroup value={value} onValueChange={setValue}>
+      <RadioButton value="option1" label="Option 1" />
+      <RadioButton value="option2" label="Option 2" />
+      <RadioButton value="option3" label="Option 3" />
+    </RadioGroup>
+  );
+}
+`,
+  examples: {
+    basic: `import { RadioGroup, RadioButton } from '@idealyst/components';
+
+<RadioGroup value={selected} onValueChange={setSelected}>
+  <RadioButton value="a" label="Choice A" />
+  <RadioButton value="b" label="Choice B" />
+</RadioGroup>`,
+
+    variants: `import { RadioGroup, RadioButton, View } from '@idealyst/components';
+
+<View spacing="md">
+  {/* Vertical (default) */}
+  <RadioGroup value={value} onValueChange={setValue}>
+    <RadioButton value="1" label="Option 1" />
+    <RadioButton value="2" label="Option 2" />
+  </RadioGroup>
+
+  {/* Horizontal */}
+  <RadioGroup value={value} onValueChange={setValue} orientation="horizontal">
+    <RadioButton value="1" label="Small" size="sm" />
+    <RadioButton value="2" label="Medium" size="md" />
+    <RadioButton value="3" label="Large" size="lg" />
+  </RadioGroup>
+</View>`,
+
+    "with-icons": `import { RadioGroup, RadioButton } from '@idealyst/components';
+
+<RadioGroup value={plan} onValueChange={setPlan}>
+  <RadioButton
+    value="free"
+    label="Free Plan"
+    intent="neutral"
+  />
+  <RadioButton
+    value="pro"
+    label="Pro Plan"
+    intent="primary"
+  />
+  <RadioButton
+    value="enterprise"
+    label="Enterprise Plan"
+    intent="success"
+  />
+</RadioGroup>`,
+
+    interactive: `import { RadioGroup, RadioButton, View, Text, Card } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [shipping, setShipping] = useState('standard');
+
+  const options = [
+    { value: 'standard', label: 'Standard (5-7 days)', price: 'Free' },
+    { value: 'express', label: 'Express (2-3 days)', price: '$10' },
+    { value: 'overnight', label: 'Overnight', price: '$25' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Text weight="bold">Select Shipping Method</Text>
+      <RadioGroup value={shipping} onValueChange={setShipping}>
+        {options.map((option) => (
+          <Card
+            key={option.value}
+            variant={shipping === option.value ? 'outlined' : 'default'}
+            padding="sm"
+            clickable
+            onPress={() => setShipping(option.value)}
+          >
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+              <RadioButton
+                value={option.value}
+                label={option.label}
+                checked={shipping === option.value}
+              />
+              <Text weight="bold">{option.price}</Text>
+            </View>
+          </Card>
+        ))}
+      </RadioGroup>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/SVGImage.ts

@@ -0,0 +1,114 @@
+export const SVGImage = {
+  category: "media",
+  description: "SVG image component with color, size, and intent support",
+  props: `
+- \`source\`: string | { uri: string } | React.FC<SvgProps> - SVG source (local file, URL, or component)
+- \`width\`: number | string - Image width
+- \`height\`: number | string - Image height
+- \`size\`: number | string - Sets both width and height
+- \`color\`: string - Custom color override
+- \`intent\`: IntentNames - Theme intent color
+- \`resizeMode\`: 'contain' | 'cover' | 'stretch' - How SVG fits container
+- \`style\`: ViewProps - Additional styles
+`,
+  features: [
+    "Multiple source types (file, URL, component)",
+    "Size and dimension control",
+    "Color customization",
+    "Theme intent colors",
+    "Resize modes",
+    "Cross-platform support",
+  ],
+  bestPractices: [
+    "Use local SVG files for icons and logos",
+    "Use remote URLs for dynamic SVGs",
+    "Set explicit size for consistent rendering",
+    "Use intent colors for theme consistency",
+    "Prefer 'contain' resizeMode to preserve aspect ratio",
+    "Optimize SVG files for web performance",
+  ],
+  usage: `
+import { SVGImage } from '@idealyst/components';
+import LogoIcon from './assets/logo.svg';
+
+// Local SVG file
+<SVGImage source={LogoIcon} size={48} intent="primary" />
+
+// Remote SVG
+<SVGImage
+  source={{ uri: 'https://cdn.example.com/icon.svg' }}
+  width={32}
+  height={32}
+  color="#FF0000"
+/>
+`,
+  examples: {
+    basic: `import { SVGImage } from '@idealyst/components';
+import Icon from './icon.svg';
+
+<SVGImage source={Icon} size={24} />`,
+
+    variants: `import { SVGImage, View } from '@idealyst/components';
+import Logo from './logo.svg';
+
+<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+  <SVGImage source={Logo} size={24} />
+  <SVGImage source={Logo} size={32} />
+  <SVGImage source={Logo} size={48} />
+  <SVGImage source={Logo} size={64} />
+</View>`,
+
+    "with-icons": `import { SVGImage, View, Text } from '@idealyst/components';
+import ReactLogo from './react-logo.svg';
+
+<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+  <SVGImage source={ReactLogo} size={32} color="#61dafb" />
+  <View spacing="xs">
+    <Text weight="bold">React Application</Text>
+    <Text size="sm">Built with React & React Native</Text>
+  </View>
+</View>`,
+
+    interactive: `import { SVGImage, View, Button, Text } from '@idealyst/components';
+import { useState } from 'react';
+import AppIcon from './app-icon.svg';
+
+function Example() {
+  const [size, setSize] = useState(48);
+  const [intent, setIntent] = useState('primary');
+
+  const intents = ['primary', 'neutral', 'success', 'error', 'warning'];
+
+  return (
+    <View spacing="md" style={{ alignItems: 'center' }}>
+      <SVGImage source={AppIcon} size={size} intent={intent} />
+
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <Button size="sm" onPress={() => setSize(Math.max(24, size - 12))}>
+          Smaller
+        </Button>
+        <Button size="sm" onPress={() => setSize(Math.min(96, size + 12))}>
+          Larger
+        </Button>
+      </View>
+
+      <View spacing="xs">
+        <Text size="sm">Intent:</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          {intents.map((i) => (
+            <Button
+              key={i}
+              size="sm"
+              variant={intent === i ? 'contained' : 'outlined'}
+              onPress={() => setIntent(i)}
+            >
+              {i}
+            </Button>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Screen.ts

@@ -0,0 +1,103 @@
+export const Screen = {
+  category: "layout",
+  description: "Full-screen container component with background variants, padding, and safe area support",
+      props: `
+- \`children\`: React.ReactNode - The content to display inside the screen
+- \`background\`: Surface | 'transparent' - Background variant - controls the background color
+- \`padding\`: Size | 'none' - Screen padding variant
+- \`safeArea\`: boolean - Safe area padding for mobile devices
+- \`top\`: number - Content inset padding for scrollable content (mobile only) Adds padding to the scroll view's content container Useful for adding safe area insets or additional spacing
+- \`bottom\`: number - Bottom content inset padding for scrollable content
+- \`left\`: number - Left content inset padding for scrollable content
+- \`right\`: number - Right content inset padding for scrollable content
+- \`scrollable\`: boolean - Whether the screen content is scrollable
+`,
+  features: [
+    "Four background color variants",
+    "Five padding options",
+    "Safe area support for notches/home indicators",
+    "Optional scrollable content",
+    "Full-screen container",
+    "Cross-platform support",
+  ],
+  bestPractices: [
+    "Use as root container for app screens",
+    "Enable safeArea for mobile apps",
+    "Use 'primary' background for main content",
+    "Use 'inverse' background for dark mode or special screens",
+    "Combine with View for internal spacing",
+    "Enable scrollable for long content",
+  ],
+  usage: `
+import { Screen, View, Text } from '@idealyst/components';
+
+<Screen background="primary" padding="md" safeArea>
+  <View spacing="lg">
+    <Text size="xl" weight="bold">Screen Title</Text>
+    <Text>Screen content goes here</Text>
+  </View>
+</Screen>
+`,
+  examples: {
+    basic: `import { Screen, Text } from '@idealyst/components';
+
+<Screen background="primary" padding="md">
+  <Text>Basic screen content</Text>
+</Screen>`,
+
+    variants: `import { Screen, Text } from '@idealyst/components';
+
+// Different backgrounds
+<Screen background="primary"><Text>Primary</Text></Screen>
+<Screen background="secondary"><Text>Secondary</Text></Screen>
+<Screen background="tertiary"><Text>Tertiary</Text></Screen>
+<Screen background="inverse"><Text>Inverse</Text></Screen>`,
+
+    "with-icons": `import { Screen, View, Icon, Text } from '@idealyst/components';
+
+<Screen background="primary" padding="lg" safeArea>
+  <View spacing="md">
+    <View style={{ alignItems: 'center' }}>
+      <Icon name="check-circle" size="xl" color="success" />
+    </View>
+    <Text align="center" size="xl" weight="bold">
+      Success!
+    </Text>
+    <Text align="center">
+      Your action was completed successfully
+    </Text>
+  </View>
+</Screen>`,
+
+    interactive: `import { Screen, View, Text, Button } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <Screen
+      background={darkMode ? 'inverse' : 'primary'}
+      padding="md"
+      safeArea
+      scrollable
+    >
+      <View spacing="lg">
+        <Text size="xl" weight="bold">
+          Settings
+        </Text>
+        <Button
+          onPress={() => setDarkMode(!darkMode)}
+          type="outlined"
+        >
+          Toggle {darkMode ? 'Light' : 'Dark'} Mode
+        </Button>
+        <Text>
+          Current theme: {darkMode ? 'Dark' : 'Light'}
+        </Text>
+      </View>
+    </Screen>
+  );
+}`,
+  },
+};

package/src/data/components/Select.ts

@@ -0,0 +1,140 @@
+export const Select = {
+  category: "form",
+  description: "Dropdown select component for choosing from a list of options",
+      props: `
+- \`options\`: SelectOption[] - Array of options to display in the select
+- \`value\`: string - The currently selected value
+- \`onValueChange\`: function - Called when the selected value changes
+- \`placeholder\`: string - Placeholder text when no value is selected
+- \`disabled\`: boolean - Whether the select is disabled
+- \`error\`: boolean - Whether the select shows an error state
+- \`helperText\`: string - Helper text to display below the select
+- \`label\`: string - Label text to display above the select
+- \`intent\`: SelectIntentVariant - The visual type of the select The intent/color scheme of the select
+- \`size\`: SelectSizeVariant - The size of the select
+- \`searchable\`: boolean - Whether to show a search/filter input (web only)
+- \`filterOption\`: (option: SelectOption, searchTerm: string) => boolean - Custom search filter function (used with searchable)
+- \`presentationMode\`: 'dropdown' | 'actionSheet' - Native iOS presentation mode (native only) 'dropdown' uses a standard dropdown overlay 'actionSheet' uses iOS ActionSheet for selection
+- \`maxHeight\`: number - Maximum height for the dropdown content
+`,
+  features: [
+    "Single selection from options",
+    "Searchable dropdown (web)",
+    "Icon support for options",
+    "Two visual variants",
+    "Label and helper text",
+    "Error state",
+    "Disabled options",
+    "Custom filtering",
+    "Platform-specific presentation modes",
+  ],
+  bestPractices: [
+    "Use for 5+ options (use RadioGroup for fewer)",
+    "Enable searchable for long option lists",
+    "Provide clear placeholder text",
+    "Group related options visually",
+    "Show error states inline with helperText",
+    "Consider icons for visual categorization",
+  ],
+  usage: `
+import { Select } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState('');
+
+  const options = [
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'uk', label: 'United Kingdom' },
+  ];
+
+  return (
+    <Select
+      label="Country"
+      options={options}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Select a country"
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { Select } from '@idealyst/components';
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+];
+
+<Select options={options} placeholder="Choose..." />`,
+
+    variants: `import { Select, View } from '@idealyst/components';
+
+const options = [{ value: '1', label: 'Option' }];
+
+<View spacing="md">
+  <Select options={options} type="outlined" size="sm" />
+  <Select options={options} type="filled" size="md" />
+  <Select options={options} type="outlined" size="lg" />
+</View>`,
+
+    "with-icons": `import { Select } from '@idealyst/components';
+
+const options = [
+  { value: 'light', label: 'Light Mode', icon: <Icon name="white-balance-sunny" /> },
+  { value: 'dark', label: 'Dark Mode', icon: <Icon name="weather-night" /> },
+  { value: 'auto', label: 'Auto', icon: <Icon name="brightness-auto" /> },
+];
+
+<Select
+  label="Theme"
+  options={options}
+  value={theme}
+  onValueChange={setTheme}
+/>`,
+
+    interactive: `import { Select, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [country, setCountry] = useState('');
+  const [error, setError] = useState('');
+
+  const countries = [
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'au', label: 'Australia' },
+  ];
+
+  const handleChange = (value: string) => {
+    setCountry(value);
+    setError('');
+  };
+
+  const handleSubmit = () => {
+    if (!country) {
+      setError('Please select a country');
+    }
+  };
+
+  return (
+    <View spacing="md">
+      <Select
+        label="Country"
+        options={countries}
+        value={country}
+        onValueChange={handleChange}
+        placeholder="Select your country"
+        error={!!error}
+        helperText={error || 'Choose your country of residence'}
+        searchable
+      />
+      <Button onPress={handleSubmit}>Submit</Button>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Skeleton.ts

@@ -0,0 +1,102 @@
+export const Skeleton = {
+  category: "feedback",
+  description: "Loading placeholder that mimics content structure while data loads",
+      props: `
+- \`width\`: number | string - Width of the skeleton (number in pixels or string with units)
+- \`height\`: number | string - Height of the skeleton (number in pixels or string with units)
+- \`shape\`: SkeletonShape - Shape of the skeleton
+- \`borderRadius\`: number - Border radius for 'rounded' shape (in pixels)
+- \`animation\`: SkeletonAnimation - Animation type
+`,
+  features: [
+    "Three shapes: rectangle, circle, rounded",
+    "Three animation types",
+    "Configurable dimensions",
+    "Group component for multiple skeletons",
+    "Customizable spacing",
+    "Mimics content structure",
+  ],
+  bestPractices: [
+    "Match skeleton shape to actual content",
+    "Use pulse animation for general loading",
+    "Use wave animation for feed-like content",
+    "Show skeleton while data is loading",
+    "Replace skeleton with actual content smoothly",
+    "Use SkeletonGroup for consistent layouts",
+  ],
+  usage: `
+import { Skeleton, SkeletonGroup } from '@idealyst/components';
+
+// Single skeleton
+<Skeleton width={200} height={20} shape="rounded" />
+
+// Multiple skeletons
+<SkeletonGroup
+  count={3}
+  spacing={16}
+  skeletonProps={{ width: '100%', height: 60, shape: 'rounded' }}
+/>
+`,
+  examples: {
+    basic: `import { Skeleton } from '@idealyst/components';
+
+<Skeleton width={150} height={20} />`,
+
+    variants: `import { Skeleton, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Skeleton width="100%" height={20} shape="rectangle" />
+  <Skeleton width={100} height={100} shape="circle" />
+  <Skeleton width={200} height={40} shape="rounded" />
+</View>`,
+
+    "with-icons": `import { Skeleton, View } from '@idealyst/components';
+
+// Mimicking a user card
+<View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+  <Skeleton width={48} height={48} shape="circle" />
+  <View spacing="sm" style={{ flex: 1 }}>
+    <Skeleton width="60%" height={16} />
+    <Skeleton width="40%" height={14} />
+  </View>
+</View>`,
+
+    interactive: `import { Skeleton, SkeletonGroup, View, Card, Text, Button } from '@idealyst/components';
+import { useState, useEffect } from 'react';
+
+function Example() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setData({ title: 'Article Title', content: 'Article content...' });
+      setLoading(false);
+    }, 2000);
+  }, []);
+
+  if (loading) {
+    return (
+      <Card padding="md">
+        <View spacing="md">
+          <Skeleton width="80%" height={24} shape="rounded" />
+          <SkeletonGroup
+            count={3}
+            skeletonProps={{ width: '100%', height: 16 }}
+          />
+        </View>
+      </Card>
+    );
+  }
+
+  return (
+    <Card padding="md">
+      <View spacing="md">
+        <Text size="lg" weight="bold">{data.title}</Text>
+        <Text>{data.content}</Text>
+      </View>
+    </Card>
+  );
+}`,
+  },
+};