@idealyst/mcp-server 1.0.84

package/src/data/components/Accordion.ts

@@ -0,0 +1,106 @@
+export const Accordion = {
+  category: "display",
+  description: "Expandable/collapsible content sections with support for single or multiple open items",
+      props: `
+- \`items\`: AccordionItem[] - Array of accordion items with title and content
+- \`allowMultiple\`: boolean - Whether multiple items can be expanded at once
+- \`defaultExpanded\`: string[] - Array of item IDs that should be expanded by default
+- \`type\`: AccordionType - The visual style variant of the accordion
+- \`size\`: AccordionSizeVariant - The size variant of accordion items
+`,
+  features: [
+    "Single or multiple item expansion modes",
+    "Default expanded items support",
+    "Three visual variants",
+    "Three size options",
+    "Disabled item state",
+    "Controlled and uncontrolled modes",
+  ],
+  bestPractices: [
+    "Use 'default' variant for standard content organization",
+    "Use 'separated' variant for distinct sections",
+    "Set allowMultiple to true for FAQs where users may need to compare answers",
+    "Keep accordion titles concise and descriptive",
+    "Use defaultExpanded sparingly to avoid overwhelming users",
+  ],
+  usage: `
+import { Accordion } from '@idealyst/components';
+
+const items = [
+  {
+    id: '1',
+    title: 'What is Idealyst?',
+    content: <Text>Idealyst is a cross-platform React framework...</Text>,
+  },
+  {
+    id: '2',
+    title: 'How do I get started?',
+    content: <Text>Install the CLI and create a new project...</Text>,
+  },
+];
+
+<Accordion
+  items={items}
+  type="bordered"
+  defaultExpanded={['1']}
+/>
+`,
+  examples: {
+    basic: `import { Accordion, Text } from '@idealyst/components';
+
+const items = [
+  { id: '1', title: 'Section 1', content: <Text>Content 1</Text> },
+  { id: '2', title: 'Section 2', content: <Text>Content 2</Text> },
+];
+
+<Accordion items={items} />`,
+
+    variants: `import { Accordion, Text } from '@idealyst/components';
+
+const items = [
+  { id: '1', title: 'Item', content: <Text>Content</Text> },
+];
+
+// Different variants
+<Accordion items={items} type="default" />
+<Accordion items={items} type="separated" />
+<Accordion items={items} type="bordered" />`,
+
+    "with-icons": `import { Accordion, View, Icon, Text } from '@idealyst/components';
+
+const items = [
+  {
+    id: '1',
+    title: 'Account Settings',
+    content: (
+      <View spacing="sm">
+        <Icon name="account" size="md" />
+        <Text>Manage your account preferences</Text>
+      </View>
+    ),
+  },
+];
+
+<Accordion items={items} intent="primary" />`,
+
+    interactive: `import { Accordion, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const items = [
+    { id: '1', title: 'FAQ 1', content: <Text>Answer 1</Text> },
+    { id: '2', title: 'FAQ 2', content: <Text>Answer 2</Text> },
+    { id: '3', title: 'FAQ 3', content: <Text>Answer 3</Text> },
+  ];
+
+  return (
+    <Accordion
+      items={items}
+      allowMultiple
+      defaultExpanded={['1']}
+      type="bordered"
+    />
+  );
+}`,
+  },
+};

package/src/data/components/ActivityIndicator.ts

@@ -0,0 +1,82 @@
+export const ActivityIndicator = {
+  category: "feedback",
+  description: "Loading spinner/indicator for showing ongoing processes or loading states",
+      props: `
+- \`animating\`: boolean - Whether the indicator is animating (visible)
+- \`size\`: ActivityIndicatorSizeVariant - The size of the indicator
+- \`intent\`: ActivityIndicatorIntentVariant - The color/intent of the indicator
+- \`color\`: string - Custom color to override intent
+- \`hidesWhenStopped\`: boolean - Whether to hide the indicator when not animating
+`,
+  features: [
+    "Animated loading spinner",
+    "Three predefined sizes plus custom numeric size",
+    "Five intent colors",
+    "Custom color support",
+    "Auto-hide when stopped",
+    "Cross-platform support",
+  ],
+  bestPractices: [
+    "Use 'primary' intent for general loading states",
+    "Use 'sm' size for inline loading indicators",
+    "Use 'lg' size for full-screen loading overlays",
+    "Always provide context about what is loading",
+    "Consider using with overlay for blocking operations",
+  ],
+  usage: `
+import { ActivityIndicator, View, Text } from '@idealyst/components';
+
+<View spacing="md">
+  <ActivityIndicator size="lg" intent="primary" />
+  <Text>Loading data...</Text>
+</View>
+`,
+  examples: {
+    basic: `import { ActivityIndicator } from '@idealyst/components';
+
+<ActivityIndicator />`,
+
+    variants: `import { ActivityIndicator, View } from '@idealyst/components';
+
+<View spacing="md">
+  <ActivityIndicator size="sm" />
+  <ActivityIndicator size="md" />
+  <ActivityIndicator size="lg" />
+  <ActivityIndicator size={48} />
+</View>`,
+
+    "with-icons": `import { ActivityIndicator, View, Text } from '@idealyst/components';
+
+<View spacing="sm" style={{ alignItems: 'center' }}>
+  <ActivityIndicator intent="success" size="lg" />
+  <Text>Processing...</Text>
+</View>`,
+
+    interactive: `import { ActivityIndicator, Button, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [loading, setLoading] = useState(false);
+
+  const handleLoad = async () => {
+    setLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setLoading(false);
+  };
+
+  return (
+    <View spacing="md">
+      <Button onPress={handleLoad} disabled={loading}>
+        Load Data
+      </Button>
+      {loading && (
+        <View spacing="sm" style={{ alignItems: 'center' }}>
+          <ActivityIndicator size="lg" />
+          <Text>Loading...</Text>
+        </View>
+      )}
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Alert.ts

@@ -0,0 +1,132 @@
+export const Alert = {
+  category: "feedback",
+  description: "Message banner for displaying important information, warnings, errors, and success messages",
+      props: `
+- \`title\`: string - The title text of the alert
+- \`message\`: string - The message text of the alert
+- \`children\`: React.ReactNode - Custom content to display (overrides title and message)
+- \`intent\`: AlertIntentVariant - The intent/color scheme (success, error, warning, info, neutral)
+- \`type\`: AlertType - The visual style variant (filled, outlined, subtle)
+- \`icon\`: React.ReactNode - Custom icon to display (overrides default intent icon)
+- \`showIcon\`: boolean - Whether to show the icon (defaults to true)
+- \`dismissible\`: boolean - Whether the alert can be dismissed with a close button
+- \`onDismiss\`: function - Called when the alert is dismissed
+- \`actions\`: React.ReactNode - Action buttons to display in the alert
+`,
+  features: [
+    "Five intent types with semantic meaning",
+    "Three visual variants",
+    "Default icons for each intent",
+    "Custom icon support",
+    "Dismissible with close button",
+    "Action buttons support",
+    "Title and message or custom children",
+  ],
+  bestPractices: [
+    "Use 'error' intent for critical errors requiring immediate attention",
+    "Use 'warning' intent for important but non-critical information",
+    "Use 'success' intent for positive confirmations",
+    "Use 'info' intent for general informational messages",
+    "Keep alert messages concise and actionable",
+    "Make alerts dismissible unless they require action",
+  ],
+  usage: `
+import { Alert } from '@idealyst/components';
+
+<Alert
+  intent="error"
+  title="Error"
+  message="Failed to save changes. Please try again."
+  dismissible
+  onDismiss={() => setShowAlert(false)}
+/>
+`,
+  examples: {
+    basic: `import { Alert } from '@idealyst/components';
+
+<Alert
+  intent="info"
+  message="This is an informational message"
+/>`,
+
+    variants: `import { Alert, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Alert
+    intent="success"
+    type="filled"
+    message="Success message"
+  />
+  <Alert
+    intent="warning"
+    type="outlined"
+    message="Warning message"
+  />
+  <Alert
+    intent="error"
+    type="soft"
+    message="Error message"
+  />
+</View>`,
+
+    "with-icons": `import { Alert, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Alert
+    intent="success"
+    title="Success!"
+    message="Your changes have been saved"
+    showIcon
+  />
+  <Alert
+    intent="error"
+    title="Error"
+    message="Something went wrong"
+    showIcon
+    dismissible
+  />
+</View>`,
+
+    interactive: `import { Alert, Button, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setShowAlert(true)}>
+        Show Alert
+      </Button>
+
+      {showAlert && (
+        <Alert
+          intent="warning"
+          title="Unsaved Changes"
+          message="You have unsaved changes that will be lost."
+          dismissible
+          onDismiss={() => setShowAlert(false)}
+          actions={
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+              <Button size="sm" onPress={() => setShowAlert(false)}>
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                intent="warning"
+                onPress={() => {
+                  handleSave();
+                  setShowAlert(false);
+                }}
+              >
+                Save
+              </Button>
+            </View>
+          }
+        />
+      )}
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Avatar.ts

@@ -0,0 +1,93 @@
+export const Avatar = {
+  category: "display",
+  description: "Profile picture or user avatar with fallback text support",
+      props: `
+- \`src\`: string | ImageSourcePropType - Image source (URL or require())
+- \`alt\`: string - Alt text for the image
+- \`fallback\`: string - Fallback text (usually initials)
+- \`size\`: AvatarSizeVariant - Size of the avatar
+- \`shape\`: AvatarShapeVariant - Shape of the avatar
+- \`color\`: AvatarColorVariant - The color scheme of the avatar (for background when no image)
+`,
+  features: [
+    "Image display with automatic fallback",
+    "Fallback text (initials) support",
+    "Four size options",
+    "Circle and square shapes",
+    "Theme color variants for fallback backgrounds",
+    "Accessible with alt text",
+  ],
+  bestPractices: [
+    "Always provide alt text for accessibility",
+    "Use initials (2 characters) for fallback text",
+    "Use 'circle' shape for user avatars",
+    "Use 'square' shape for brands or organizations",
+    "Choose contrasting colors for fallback backgrounds",
+  ],
+  usage: `
+import { Avatar } from '@idealyst/components';
+
+<Avatar
+  src="https://example.com/avatar.jpg"
+  alt="John Doe"
+  fallback="JD"
+  size="lg"
+  shape="circle"
+/>
+`,
+  examples: {
+    basic: `import { Avatar } from '@idealyst/components';
+
+<Avatar
+  fallback="JD"
+  size="md"
+/>`,
+
+    variants: `import { Avatar, View } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', gap: 8 }}>
+  <Avatar fallback="SM" size="sm" />
+  <Avatar fallback="MD" size="md" />
+  <Avatar fallback="LG" size="lg" />
+  <Avatar fallback="XL" size="xl" />
+</View>`,
+
+    "with-icons": `import { Avatar, View } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', gap: 8 }}>
+  {/* Circle avatars */}
+  <Avatar
+    src="https://i.pravatar.cc/150?img=1"
+    alt="User 1"
+    fallback="U1"
+    shape="circle"
+  />
+
+  {/* Square avatars */}
+  <Avatar
+    src="https://i.pravatar.cc/150?img=2"
+    alt="User 2"
+    fallback="U2"
+    shape="square"
+  />
+</View>`,
+
+    interactive: `import { Avatar, View, Text } from '@idealyst/components';
+
+function UserProfile({ user }) {
+  return (
+    <View spacing="sm" style={{ alignItems: 'center' }}>
+      <Avatar
+        src={user.avatar}
+        alt={user.name}
+        fallback={user.initials}
+        size="xl"
+        color="primary"
+      />
+      <Text weight="bold">{user.name}</Text>
+      <Text size="sm" color="secondary">{user.email}</Text>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Badge.ts

@@ -0,0 +1,63 @@
+export const Badge = {
+category: "display",
+    description: "Small status indicator with various styles and colors",
+        props: `
+- \`children\`: React.ReactNode - The content to display inside the badge
+- \`size\`: BadgeSizeVariant - The size of the badge
+- \`type\`: BadgeType - The visual style variant of the badge
+- \`color\`: BadgeColorVariant - The color scheme of the badge
+- \`icon\`: IconName | React.ReactNode - Icon to display. Can be an icon name or custom component (ReactNode)
+`,
+    features: [
+      "Three visual variants",
+      "Theme palette color support",
+      "Three sizes",
+      "Icon support",
+      "Dot variant for minimal indicators",
+    ],
+    bestPractices: [
+      "Use 'dot' variant for minimal status indicators",
+      "Use 'filled' variant for prominent badges",
+      "Keep badge content short (numbers or 1-2 words)",
+      "Use appropriate colors for semantic meaning",
+    ],
+    usage: `
+import { Badge } from '@idealyst/components';
+
+<Badge type="filled" color="red">
+  3
+</Badge>
+`,
+    examples: {
+      basic: `import { Badge } from '@idealyst/components';
+
+<Badge>New</Badge>`,
+      variants: `import { Badge } from '@idealyst/components';
+
+<Badge type="filled" color="blue">5</Badge>
+<Badge type="outlined" color="green">Active</Badge>
+<Badge type="dot" color="red" />`,
+      "with-icons": `import { Badge } from '@idealyst/components';
+
+<Badge icon="star" color="yellow">
+  Featured
+</Badge>`,
+      interactive: `import { Badge, Button, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View spacing="sm">
+      <Badge type="filled" color="red">
+        {count}
+      </Badge>
+      <Button onPress={() => setCount(count + 1)}>
+        Increment
+      </Button>
+    </View>
+  );
+}`,
+    }
+};

package/src/data/components/Breadcrumb.ts

@@ -0,0 +1,94 @@
+export const Breadcrumb = {
+  category: "navigation",
+  description: "Navigation aid showing the current location within a hierarchy",
+      props: `
+- \`items\`: BreadcrumbItem[] - Array of breadcrumb items
+- \`separator\`: React.ReactNode - Custom separator between items (default: '/')
+- \`maxItems\`: number - Maximum number of items to show before truncating
+- \`intent\`: BreadcrumbIntentVariant - Intent color for links
+- \`size\`: BreadcrumbSizeVariant - Size of the breadcrumb text
+- \`itemStyle\`: StyleProp<ViewStyle> - Custom item style
+- \`separatorStyle\`: StyleProp<TextStyle> - Custom separator style
+- \`responsive\`: boolean - Enable responsive collapsing on narrow screens
+- \`minVisibleItems\`: number - Minimum number of items to show before collapsing (default: 3)
+`,
+  features: [
+    "Icon support with string names or custom components",
+    "Custom separators",
+    "Truncation with maxItems",
+    "Two intent colors",
+    "Three sizes",
+    "Disabled items",
+    "Click handlers for navigation",
+  ],
+  bestPractices: [
+    "Keep breadcrumb labels short and clear",
+    "Last item should represent current page (typically not clickable)",
+    "Use icons sparingly for visual clarity",
+    "Set maxItems for deep hierarchies to avoid overflow",
+    "Use 'neutral' intent for subtle breadcrumbs",
+  ],
+  usage: `
+import { Breadcrumb } from '@idealyst/components';
+
+const items = [
+  { label: 'Home', icon: 'home', onPress: () => navigate('/') },
+  { label: 'Products', onPress: () => navigate('/products') },
+  { label: 'Electronics', onPress: () => navigate('/products/electronics') },
+  { label: 'Laptop' }, // Current page, no onPress
+];
+
+<Breadcrumb items={items} intent="primary" />
+`,
+  examples: {
+    basic: `import { Breadcrumb } from '@idealyst/components';
+
+const items = [
+  { label: 'Home', onPress: () => console.log('Home') },
+  { label: 'Products', onPress: () => console.log('Products') },
+  { label: 'Item' },
+];
+
+<Breadcrumb items={items} />`,
+
+    variants: `import { Breadcrumb, View } from '@idealyst/components';
+
+const items = [
+  { label: 'Home', onPress: () => {} },
+  { label: 'Category', onPress: () => {} },
+  { label: 'Item' },
+];
+
+<View spacing="md">
+  <Breadcrumb items={items} size="sm" />
+  <Breadcrumb items={items} size="md" />
+  <Breadcrumb items={items} size="lg" />
+</View>`,
+
+    "with-icons": `import { Breadcrumb } from '@idealyst/components';
+
+const items = [
+  { label: 'Home', icon: 'home', onPress: () => navigate('/') },
+  { label: 'Settings', icon: 'cog', onPress: () => navigate('/settings') },
+  { label: 'Profile', icon: 'account' },
+];
+
+<Breadcrumb items={items} intent="primary" />`,
+
+    interactive: `import { Breadcrumb } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [path, setPath] = useState(['Home', 'Products', 'Electronics']);
+
+  const items = path.map((label, index) => ({
+    label,
+    onPress: index < path.length - 1
+      ? () => setPath(path.slice(0, index + 1))
+      : undefined,
+  }));
+
+  return <Breadcrumb items={items} maxItems={4} />;
+}`,
+  },
+};

package/src/data/components/Button.ts

@@ -0,0 +1,86 @@
+export const Button = {
+category: "form",
+    description: "Interactive button component with multiple variants, sizes, and icon support",
+        props: `
+- \`children\`: React.ReactNode - The text or content to display inside the button
+- \`title\`: string - The text title to display inside the button (for web)
+- \`onPress\`: function - Called when the button is pressed
+- \`disabled\`: boolean - Whether the button is disabled
+- \`type\`: ButtonType - The visual style type of the button
+- \`intent\`: ButtonIntentVariant - The intent/color scheme of the button
+- \`size\`: ButtonSizeVariant - The size of the button
+- \`leftIcon\`: IconName | React.ReactNode - Icon to display on the left side. Can be an icon name or custom component (ReactNode)
+- \`rightIcon\`: IconName | React.ReactNode - Icon to display on the right side. Can be an icon name or custom component (ReactNode)
+`,
+    features: [
+      "Three variants: contained, outlined, text",
+      "Five intent colors for semantic meaning",
+      "Three sizes: sm, md, lg",
+      "Icon support with string names or custom React elements",
+      "Loading and disabled states",
+      "Full width option",
+      "Cross-platform (React & React Native)",
+    ],
+    bestPractices: [
+      "Use 'primary' intent for main actions",
+      "Use 'contained' variant for prominent actions",
+      "Use icon names (strings) for consistency with design system",
+      "Keep button labels concise and action-oriented",
+    ],
+    usage: `
+import { Button } from '@idealyst/components';
+
+<Button
+  type="contained"
+  intent="primary"
+  icon="check"
+  onPress={() => console.log('Pressed')}
+>
+  Save Changes
+</Button>
+`,
+    examples: {
+      basic: `import { Button } from '@idealyst/components';
+
+// Basic button
+<Button onPress={() => console.log('Clicked')}>
+  Click Me
+</Button>`,
+      variants: `import { Button } from '@idealyst/components';
+
+// Different variants
+<Button type="contained" intent="primary">Contained</Button>
+<Button type="outlined" intent="primary">Outlined</Button>
+<Button type="text" intent="primary">Text</Button>`,
+      "with-icons": `import { Button } from '@idealyst/components';
+
+// Button with icon
+<Button icon="check" iconPosition="left">
+  Confirm
+</Button>
+
+// Icon-only button
+<Button icon="close" />`,
+      interactive: `import { Button } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [loading, setLoading] = useState(false);
+
+  const handlePress = async () => {
+    setLoading(true);
+    await someAsyncOperation();
+    setLoading(false);
+  };
+
+  return (
+    <Button
+      loading={loading}
+      onPress={handlePress}
+    >
+      Save
+    </Button>
+  );
+}`,
+    }
+};