@idealyst/mcp-server 1.0.84

package/src/data/components/Card.ts

@@ -0,0 +1,67 @@
+export const Card = {
+category: "display",
+    description: "Container component for grouping related content with various visual styles",
+        props: `
+- \`children\`: React.ReactNode - The content to display inside the card
+- \`type\`: CardType - The visual style variant of the card
+- \`padding\`: CardPaddingVariant - The padding size inside the card
+- \`radius\`: CardRadiusVariant - The border radius of the card
+- \`intent\`: CardIntentVariant - The intent/color scheme of the card
+- \`clickable\`: boolean - Whether the card is clickable
+- \`onPress\`: function - Called when the card is pressed (if clickable)
+- \`disabled\`: boolean - Whether the card is disabled
+`,
+    features: [
+      "Four visual variants",
+      "Intent-based color schemes",
+      "Configurable padding and border radius",
+      "Clickable with press handler",
+      "Flexible content container",
+    ],
+    bestPractices: [
+      "Use 'elevated' variant for prominent content",
+      "Group related content within cards",
+      "Use appropriate padding for content density",
+      "Make cards clickable only when they represent an action",
+    ],
+    usage: `
+import { Card, Text, View } from '@idealyst/components';
+
+<Card type="elevated" padding="md">
+  <View spacing="sm">
+    <Text weight="bold">Card Title</Text>
+    <Text size="sm">Card content goes here</Text>
+  </View>
+</Card>
+`,
+    examples: {
+      basic: `import { Card, Text } from '@idealyst/components';
+
+<Card>
+  <Text>Simple card content</Text>
+</Card>`,
+      variants: `import { Card, Text } from '@idealyst/components';
+
+<Card type="default"><Text>Default</Text></Card>
+<Card type="outlined"><Text>Outlined</Text></Card>
+<Card type="elevated"><Text>Elevated</Text></Card>
+<Card type="filled"><Text>Filled</Text></Card>`,
+      "with-icons": `import { Card, View, Text, Icon } from '@idealyst/components';
+
+<Card type="outlined">
+  <View spacing="sm">
+    <Icon name="information" size="lg" />
+    <Text>Card with icon header</Text>
+  </View>
+</Card>`,
+      interactive: `import { Card, Text } from '@idealyst/components';
+
+<Card
+  clickable
+  onPress={() => console.log('Card clicked')}
+  type="outlined"
+>
+  <Text>Click this card</Text>
+</Card>`,
+    }
+};

package/src/data/components/Checkbox.ts

@@ -0,0 +1,117 @@
+export const Checkbox = {
+  category: "form",
+  description: "Form checkbox for boolean selection with label and validation support",
+      props: `
+- \`checked\`: boolean - Whether the checkbox is checked
+- \`indeterminate\`: boolean - Whether the checkbox is in an indeterminate state
+- \`disabled\`: boolean - Whether the checkbox is disabled
+- \`onCheckedChange\`: function - Called when the checkbox state changes
+- \`size\`: CheckboxSizeVariant - The size of the checkbox
+- \`intent\`: CheckboxIntentVariant - The intent/color scheme of the checkbox
+- \`variant\`: CheckboxVariant - The visual style variant of the checkbox
+- \`label\`: string - Label text to display next to the checkbox
+- \`children\`: React.ReactNode - Custom label content (ReactNode)
+- \`required\`: boolean - Whether the checkbox is required
+- \`error\`: string - Error message to display
+- \`helperText\`: string - Helper text to display
+`,
+  features: [
+    "Checked, unchecked, and indeterminate states",
+    "Label support (string or custom ReactNode)",
+    "Three sizes",
+    "Intent-based colors",
+    "Error and helper text",
+    "Required field support",
+    "Accessible with proper ARIA attributes",
+  ],
+  bestPractices: [
+    "Always provide a label for accessibility",
+    "Use indeterminate state for parent checkboxes with partial children selection",
+    "Show error messages inline",
+    "Use helperText to clarify checkbox meaning",
+    "Group related checkboxes visually",
+  ],
+  usage: `
+import { Checkbox } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={setChecked}
+      label="Accept terms and conditions"
+      required
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { Checkbox } from '@idealyst/components';
+
+<Checkbox label="Subscribe to newsletter" />`,
+
+    variants: `import { Checkbox, View } from '@idealyst/components';
+
+<View spacing="sm">
+  <Checkbox label="Small" size="sm" />
+  <Checkbox label="Medium" size="md" />
+  <Checkbox label="Large" size="lg" />
+</View>`,
+
+    "with-icons": `import { Checkbox, View } from '@idealyst/components';
+
+<View spacing="sm">
+  <Checkbox
+    label="Enable notifications"
+    intent="primary"
+    checked
+  />
+  <Checkbox
+    label="Dark mode"
+    intent="success"
+    checked
+  />
+</View>`,
+
+    interactive: `import { Checkbox, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [options, setOptions] = useState({
+    email: false,
+    sms: false,
+    push: false,
+  });
+
+  return (
+    <View spacing="md">
+      <Text weight="bold">Notification Preferences</Text>
+      <Checkbox
+        label="Email notifications"
+        checked={options.email}
+        onCheckedChange={(checked) =>
+          setOptions({ ...options, email: checked })
+        }
+      />
+      <Checkbox
+        label="SMS notifications"
+        checked={options.sms}
+        onCheckedChange={(checked) =>
+          setOptions({ ...options, sms: checked })
+        }
+      />
+      <Checkbox
+        label="Push notifications"
+        checked={options.push}
+        onCheckedChange={(checked) =>
+          setOptions({ ...options, push: checked })
+        }
+      />
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Chip.ts

@@ -0,0 +1,93 @@
+export const Chip = {
+category: "display",
+    description: "Compact element for tags, filters, and selections with optional delete action",
+        props: `
+- \`label\`: string - The text content of the chip
+- \`type\`: ChipType - Visual style variant
+- \`intent\`: ChipIntent - Color intent/semantic meaning
+- \`size\`: ChipSize - Size of the chip
+- \`icon\`: IconName | React.ReactNode - Icon to display before the label. Can be an icon name (string) or a custom React element
+- \`deletable\`: boolean - Whether the chip can be deleted
+- \`onDelete\`: function - Callback when delete button is pressed
+- \`deleteIcon\`: IconName | React.ReactNode - Icon to display in the delete button. Defaults to 'close'
+- \`selectable\`: boolean - Whether the chip is selectable
+- \`selected\`: boolean - Whether the chip is selected (when selectable)
+- \`onPress\`: function - Callback when chip is pressed
+- \`disabled\`: boolean - Whether the chip is disabled
+`,
+    features: [
+      "Three variants: filled, outlined, soft",
+      "Five intent colors",
+      "Icon support with MDI icons",
+      "Deletable with onDelete handler",
+      "Customizable delete icon (defaults to MDI 'close')",
+      "Selectable with selected state",
+      "Three sizes",
+      "Disabled state",
+    ],
+    bestPractices: [
+      "Use for tags, filters, and multi-select options",
+      "Use deletable chips for removable tags",
+      "Use selectable chips for filter options",
+      "Keep chip labels concise",
+    ],
+    usage: `
+import { Chip } from '@idealyst/components';
+
+<Chip
+  label="React"
+  icon="check"
+  deletable
+  onDelete={() => removeTag('React')}
+/>
+`,
+    examples: {
+      basic: `import { Chip } from '@idealyst/components';
+
+<Chip label="Tag" />`,
+      variants: `import { Chip } from '@idealyst/components';
+
+<Chip label="Filled" type="filled" intent="primary" />
+<Chip label="Outlined" type="outlined" intent="success" />
+<Chip label="Soft" type="soft" intent="warning" />`,
+      "with-icons": `import { Chip } from '@idealyst/components';
+
+<Chip label="Star" icon="star" />
+<Chip label="Heart" icon="heart" intent="error" />
+
+// Custom delete icon
+<Chip
+  label="Custom Delete"
+  deletable
+  deleteIcon="close-circle"
+  onDelete={() => console.log('deleted')}
+/>
+
+// Alternative delete icons
+<Chip
+  label="Remove"
+  deletable
+  deleteIcon="delete"
+  onDelete={() => console.log('deleted')}
+/>`,
+      interactive: `import { Chip, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [tags, setTags] = useState(['React', 'TypeScript', 'Node.js']);
+
+  return (
+    <View spacing="sm">
+      {tags.map(tag => (
+        <Chip
+          key={tag}
+          label={tag}
+          deletable
+          onDelete={() => setTags(tags.filter(t => t !== tag))}
+        />
+      ))}
+    </View>
+  );
+}`,
+    }
+};

package/src/data/components/Dialog.ts

@@ -0,0 +1,136 @@
+export const Dialog = {
+category: "overlay",
+    description: "Modal overlay for focused user interactions and important information",
+        props: `
+- \`open\`: boolean - Whether the dialog is open/visible
+- \`onOpenChange\`: function - Called when the dialog should be opened or closed
+- \`title\`: string - Optional title for the dialog
+- \`children\`: React.ReactNode - The content to display inside the dialog
+- \`size\`: DialogSizeVariant - The size of the dialog
+- \`showCloseButton\`: boolean - The visual style variant of the dialog Whether to show the close button in the header
+- \`closeOnBackdropClick\`: boolean - Whether clicking the backdrop should close the dialog
+- \`closeOnEscapeKey\`: boolean - Whether pressing escape key should close the dialog (web only)
+- \`animationType\`: DialogAnimationType - Animation type for the dialog (native only)
+`,
+    features: [
+      "Controlled open state",
+      "Multiple sizes including fullscreen",
+      "Alert variant for important messages",
+      "Optional close button",
+      "Backdrop click and Escape key handling",
+      "Focus trap and accessibility support",
+    ],
+    bestPractices: [
+      "Use for actions requiring user attention",
+      "Keep dialog content focused and concise",
+      "Provide clear action buttons",
+      "Use alert variant for critical confirmations",
+      "Always provide a way to close the dialog",
+    ],
+    usage: `
+import { Dialog, Button, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>
+        Open Dialog
+      </Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Confirm Action"
+        size="md"
+      >
+        <View spacing="md">
+          <Text>Are you sure you want to proceed?</Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Button type="outlined" onPress={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button onPress={() => { handleConfirm(); setOpen(false); }}>
+              Confirm
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+`,
+    examples: {
+      basic: `import { Dialog, Button, Text } from '@idealyst/components';
+
+<Dialog open={true} onOpenChange={setOpen} title="Simple Dialog">
+  <Text>Dialog content here</Text>
+</Dialog>`,
+      variants: `import { Dialog, Text } from '@idealyst/components';
+
+// Default dialog
+<Dialog open={open} onOpenChange={setOpen} title="Information">
+  <Text>Information content</Text>
+</Dialog>
+
+// Alert dialog
+<Dialog open={open} onOpenChange={setOpen} title="Warning" type="alert">
+  <Text>This action cannot be undone</Text>
+</Dialog>`,
+      "with-icons": `import { Dialog, View, Icon, Text, Button } from '@idealyst/components';
+
+<Dialog open={open} onOpenChange={setOpen} title="Delete Item">
+  <View spacing="md">
+    <View style={{ alignItems: 'center' }}>
+      <Icon name="delete" size="xl" color="error" />
+    </View>
+    <Text>This action cannot be undone. Continue?</Text>
+    <Button intent="error" onPress={handleDelete}>Delete</Button>
+  </View>
+</Dialog>`,
+      interactive: `import { Dialog, Button, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+
+  const handleConfirm = () => {
+    setConfirmed(true);
+    setOpen(false);
+  };
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>
+        Open Dialog
+      </Button>
+
+      {confirmed && <Text>Action confirmed!</Text>}
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Confirm Action"
+        closeOnBackdropClick
+        closeOnEscapeKey
+      >
+        <View spacing="md">
+          <Text>Proceed with this action?</Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Button type="outlined" onPress={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button intent="primary" onPress={handleConfirm}>
+              Confirm
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </View>
+  );
+}`,
+    }
+};

package/src/data/components/Divider.ts

@@ -0,0 +1,70 @@
+export const Divider = {
+  category: "layout",
+  description: "Visual separator for content sections with horizontal or vertical orientation",
+      props: `
+- \`orientation\`: DividerOrientationVariant - The orientation of the divider
+- \`type\`: DividerType - The visual style type of the divider
+- \`thickness\`: DividerThicknessVariant - The thickness of the divider
+- \`intent\`: DividerIntentVariant - The color intent of the divider
+- \`length\`: DividerLengthVariant - The length of the divider (percentage or fixed)
+- \`spacing\`: DividerSpacingVariant - Spacing around the divider
+- \`children\`: React.ReactNode - Content to display in the center of the divider (for horizontal dividers)
+`,
+  features: [
+    "Horizontal and vertical orientations",
+    "Three line styles (solid, dashed, dotted)",
+    "Three thickness options",
+    "Configurable spacing",
+    "Text content in center (horizontal)",
+    "Intent-based colors",
+  ],
+  bestPractices: [
+    "Use horizontal dividers to separate vertical content",
+    "Use vertical dividers in horizontal layouts (toolbars, menus)",
+    "Keep divider thickness subtle unless emphasizing separation",
+    "Use 'md' spacing for standard content separation",
+    "Add text content sparingly for important section breaks",
+  ],
+  usage: `
+import { Divider, View, Text } from '@idealyst/components';
+
+<View spacing="md">
+  <Text>Content above</Text>
+  <Divider spacing="md" />
+  <Text>Content below</Text>
+</View>
+`,
+  examples: {
+    basic: `import { Divider } from '@idealyst/components';
+
+<Divider />`,
+
+    variants: `import { Divider, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Divider type="solid" />
+  <Divider type="dashed" />
+  <Divider type="dotted" />
+</View>`,
+
+    "with-icons": `import { Divider, View, Text } from '@idealyst/components';
+
+<View spacing="lg">
+  <Text>Section 1</Text>
+  <Divider spacing="md">
+    <Text size="sm" color="secondary">OR</Text>
+  </Divider>
+  <Text>Section 2</Text>
+</View>`,
+
+    interactive: `import { Divider, View, Text } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+  <Text>Left</Text>
+  <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
+  <Text>Center</Text>
+  <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
+  <Text>Right</Text>
+</View>`,
+  },
+};

package/src/data/components/Icon.ts

@@ -0,0 +1,70 @@
+export const Icon = {
+  category: "display",
+  description: "Material Design icon display component with size and color variants",
+      props: `
+- \`name\`: IconName | `mdi:${IconName}` - The name of the icon to display
+- \`size\`: IconSizeVariant - The size variant of the icon
+- \`color\`: Color - Predefined color variant based on theme
+- \`intent\`: Intent - Intent variant for the icon
+`,
+  features: [
+    "Material Design Icons library",
+    "Five predefined sizes plus custom numeric size",
+    "Theme color variants",
+    "Custom color support",
+    "Accessible with labels",
+    "Cross-platform support",
+  ],
+  bestPractices: [
+    "Use semantic icon names that clearly convey meaning",
+    "Provide accessibilityLabel for screen readers",
+    "Use theme color variants for consistency",
+    "Match icon size to surrounding text size",
+    "Don't rely solely on icons - provide text labels when possible",
+  ],
+  usage: `
+import { Icon } from '@idealyst/components';
+
+<Icon name="home" size="md" color="primary" />
+`,
+  examples: {
+    basic: `import { Icon } from '@idealyst/components';
+
+<Icon name="star" size="md" />`,
+
+    variants: `import { Icon, View } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+  <Icon name="check" size="xs" />
+  <Icon name="check" size="sm" />
+  <Icon name="check" size="md" />
+  <Icon name="check" size="lg" />
+  <Icon name="check" size="xl" />
+</View>`,
+
+    "with-icons": `import { Icon, View, Text } from '@idealyst/components';
+
+<View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+  <Icon name="information" size="md" color="primary" />
+  <Text>Informational message with icon</Text>
+</View>`,
+
+    interactive: `import { Icon, Button, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [favorited, setFavorited] = useState(false);
+
+  return (
+    <Button
+      icon={favorited ? 'heart' : 'heart-outline'}
+      intent={favorited ? 'error' : 'neutral'}
+      type="text"
+      onPress={() => setFavorited(!favorited)}
+    >
+      {favorited ? 'Favorited' : 'Favorite'}
+    </Button>
+  );
+}`,
+  },
+};

package/src/data/components/Image.ts

@@ -0,0 +1,121 @@
+export const Image = {
+  category: "media",
+  description: "Image component with loading states, fallback support, and various object-fit modes",
+      props: `
+- \`source\`: ImageSourcePropType | string - The image source URL or source object
+- \`alt\`: string - Alternative text for accessibility
+- \`width\`: number | string - The width of the image
+- \`height\`: number | string - The height of the image
+- \`aspectRatio\`: number - The aspect ratio of the image
+- \`objectFit\`: ImageObjectFit - How the image should be fitted (cover, contain, fill, none, scale-down)
+- \`loading\`: 'lazy' | 'eager' - When to load the image (lazy for below the fold, eager for above)
+- \`placeholder\`: React.ReactNode - Content to show while the image is loading
+- \`fallback\`: React.ReactNode - Content to show if the image fails to load
+- \`onLoad\`: function - Called when the image successfully loads
+- \`onError\`: function - Called when the image fails to load
+- \`borderRadius\`: number - The border radius of the image
+`,
+  features: [
+    "Remote and local image sources",
+    "Lazy loading support (web)",
+    "Loading placeholder",
+    "Error fallback",
+    "Multiple object-fit modes",
+    "Aspect ratio control",
+    "Border radius support",
+    "Load/error callbacks",
+  ],
+  bestPractices: [
+    "Always provide alt text for accessibility",
+    "Use lazy loading for images below the fold",
+    "Provide placeholder for better perceived performance",
+    "Use fallback for graceful error handling",
+    "Use objectFit: 'cover' for thumbnails",
+    "Use objectFit: 'contain' to show full image",
+  ],
+  usage: `
+import { Image, ActivityIndicator } from '@idealyst/components';
+
+<Image
+  source="https://example.com/image.jpg"
+  alt="Product photo"
+  width={300}
+  height={200}
+  objectFit="cover"
+  borderRadius={8}
+  placeholder={<ActivityIndicator />}
+  fallback={<Text>Failed to load</Text>}
+/>
+`,
+  examples: {
+    basic: `import { Image } from '@idealyst/components';
+
+<Image
+  source="https://picsum.photos/200/300"
+  alt="Random image"
+  width={200}
+  height={300}
+/>`,
+
+    variants: `import { Image, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Image
+    source="https://picsum.photos/300/200"
+    alt="Cover"
+    width={300}
+    height={200}
+    objectFit="cover"
+  />
+  <Image
+    source="https://picsum.photos/300/200"
+    alt="Contain"
+    width={300}
+    height={200}
+    objectFit="contain"
+  />
+</View>`,
+
+    "with-icons": `import { Image, Card, View, Text } from '@idealyst/components';
+
+<Card type="outlined">
+  <Image
+    source="https://picsum.photos/400/250"
+    alt="Card image"
+    width="100%"
+    aspectRatio={16 / 9}
+    objectFit="cover"
+    borderRadius={8}
+  />
+  <View spacing="sm" style={{ padding: 16 }}>
+    <Text weight="bold">Image Title</Text>
+    <Text size="sm">Description text</Text>
+  </View>
+</Card>`,
+
+    interactive: `import { Image, ActivityIndicator, Text, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  return (
+    <View spacing="sm">
+      <Image
+        source="https://picsum.photos/300/200"
+        alt="Example"
+        width={300}
+        height={200}
+        onLoad={() => setLoaded(true)}
+        onError={() => setError(true)}
+        placeholder={<ActivityIndicator />}
+        fallback={<Text>Failed to load image</Text>}
+      />
+      {loaded && <Text color="success">Image loaded!</Text>}
+      {error && <Text color="error">Failed to load</Text>}
+    </View>
+  );
+}`,
+  },
+};