@idealyst/mcp-server 1.0.84

package/src/data/components/Input.ts

@@ -0,0 +1,150 @@
+export const Input = {
+category: "form",
+    description: "Text input field with icons, password visibility toggle, and various input types",
+        props: `
+- \`value\`: string - The current value of the input
+- \`onChangeText\`: function - Called when the text changes
+- \`onFocus\`: function - Called when the input receives focus
+- \`onBlur\`: function - Called when the input loses focus
+- \`placeholder\`: string - Placeholder text
+- \`disabled\`: boolean - Whether the input is disabled
+- \`inputType\`: InputInputType - The type of input (affects keyboard type on mobile)
+- \`secureTextEntry\`: boolean - Whether to show the password
+- \`leftIcon\`: IconName | React.ReactNode - Icon to display on the left side of the input
+- \`rightIcon\`: IconName | React.ReactNode - Icon to display on the right side of the input
+- \`showPasswordToggle\`: boolean - Show password visibility toggle for password inputs (defaults to true for password type)
+- \`autoCapitalize\`: 'none' | 'sentences' | 'words' | 'characters' - Auto-capitalization behavior
+- \`size\`: InputSize - Size variant of the input
+- \`type\`: InputType - Style variant of the input
+- \`intent\`: InputIntent - The intent/color scheme of the input (for focus states, validation, etc.)
+- \`hasError\`: boolean - Whether the input has an error state
+`,
+    features: [
+      "Left and right icon support with MDI icons",
+      "Password visibility toggle with eye/eye-off icons",
+      "Multiple input types (text, email, password, number)",
+      "Three size variants",
+      "Four style variants (default, outlined, filled, bare)",
+      "Disabled state",
+      "Auto-capitalization control",
+      "Focus and blur event handlers",
+    ],
+    bestPractices: [
+      "Use leftIcon for contextual hints (e.g., email icon for email input)",
+      "Password inputs automatically show visibility toggle",
+      "Use inputType='email' for email fields to get proper keyboard on mobile",
+      "Use inputType='number' for numeric input",
+      "Disable password toggle with showPasswordToggle={false} if needed",
+    ],
+    usage: `
+import { Input } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [email, setEmail] = useState('');
+
+  return (
+    <Input
+      leftIcon="email"
+      value={email}
+      onChangeText={setEmail}
+      placeholder="Enter your email"
+      inputType="email"
+    />
+  );
+}
+`,
+    examples: {
+      basic: `import { Input } from '@idealyst/components';
+
+<Input
+  placeholder="Enter username"
+/>`,
+      variants: `import { Input } from '@idealyst/components';
+
+// Small size
+<Input size="sm" placeholder="Small input" />
+
+// Medium size (default)
+<Input size="md" placeholder="Medium input" />
+
+// Large size
+<Input size="lg" placeholder="Large input" />
+
+// Outlined variant
+<Input type="outlined" placeholder="Outlined" />
+
+// Filled variant
+<Input type="filled" placeholder="Filled" />
+
+// Bare variant
+<Input type="bare" placeholder="Bare" />`,
+      "with-icons": `import { Input } from '@idealyst/components';
+
+// Left icon
+<Input
+  leftIcon="email"
+  placeholder="Email address"
+  inputType="email"
+/>
+
+// Right icon
+<Input
+  rightIcon="magnify"
+  placeholder="Search"
+/>
+
+// Both icons
+<Input
+  leftIcon="lock"
+  rightIcon="check"
+  placeholder="Secure field"
+/>
+
+// Password with visibility toggle (default)
+<Input
+  inputType="password"
+  placeholder="Password"
+/>
+
+// Password without visibility toggle
+<Input
+  inputType="password"
+  showPasswordToggle={false}
+  placeholder="Password"
+/>
+
+// Custom icons with password toggle
+<Input
+  leftIcon="lock"
+  inputType="password"
+  placeholder="Enter password"
+/>`,
+      interactive: `import { Input } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <View spacing="md">
+      <Input
+        leftIcon="email"
+        value={email}
+        onChangeText={setEmail}
+        placeholder="Email"
+        inputType="email"
+      />
+      <Input
+        leftIcon="lock"
+        value={password}
+        onChangeText={setPassword}
+        placeholder="Password"
+        inputType="password"
+      />
+    </View>
+  );
+}`,
+    }
+};

package/src/data/components/List.ts

@@ -0,0 +1,103 @@
+export const List = {
+category: "display",
+    description: "Vertical list container with support for sections, icons, and interactive items",
+        props: `
+- \`children\`: React.ReactNode - List items and sections to display
+- \`type\`: ListType - The visual style variant of the list
+- \`size\`: ListSizeVariant - The size variant of list items
+- \`scrollable\`: boolean - Whether the list is scrollable
+- \`maxHeight\`: number | string - Maximum height of the scrollable list
+`,
+    features: [
+      "Three visual variants",
+      "Configurable item sizes",
+      "Leading and trailing elements (icons, badges, etc.)",
+      "Selected and active states",
+      "Section grouping with titles",
+      "Indentation for hierarchy",
+      "Icon support via string names",
+    ],
+    bestPractices: [
+      "Use sections to organize related items",
+      "Use leading icons for visual categorization",
+      "Use trailing elements for metadata or actions",
+      "Keep list items concise and scannable",
+    ],
+    usage: `
+import { List, ListItem, ListSection } from '@idealyst/components';
+
+<List type="bordered">
+  <ListSection title="Main">
+    <ListItem
+      label="Dashboard"
+      leading="home"
+      onPress={() => navigate('/dashboard')}
+    />
+    <ListItem
+      label="Settings"
+      leading="cog"
+      onPress={() => navigate('/settings')}
+    />
+  </ListSection>
+</List>
+`,
+    examples: {
+      basic: `import { List, ListItem } from '@idealyst/components';
+
+<List type="divided">
+  <ListItem label="Item 1" />
+  <ListItem label="Item 2" />
+  <ListItem label="Item 3" />
+</List>`,
+      variants: `import { List, ListItem } from '@idealyst/components';
+
+<List type="default">
+  <ListItem label="Default" />
+</List>
+
+<List type="bordered">
+  <ListItem label="Bordered" />
+</List>
+
+<List type="divided">
+  <ListItem label="Divided" />
+</List>`,
+      "with-icons": `import { List, ListItem, Badge } from '@idealyst/components';
+
+<List type="bordered">
+  <ListItem
+    label="Notifications"
+    leading="bell"
+    trailing={<Badge>3</Badge>}
+  />
+  <ListItem
+    label="Messages"
+    leading="email"
+    trailing={<Badge>12</Badge>}
+  />
+</List>`,
+      interactive: `import { List, ListItem } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [selected, setSelected] = useState('home');
+
+  return (
+    <List type="bordered">
+      <ListItem
+        label="Home"
+        leading="home"
+        selected={selected === 'home'}
+        onPress={() => setSelected('home')}
+      />
+      <ListItem
+        label="Profile"
+        leading="account"
+        selected={selected === 'profile'}
+        onPress={() => setSelected('profile')}
+      />
+    </List>
+  );
+}`,
+    }
+};

package/src/data/components/Menu.ts

@@ -0,0 +1,125 @@
+export const Menu = {
+  category: "overlay",
+  description: "Contextual menu with list of actions, typically triggered by a button or other element",
+      props: `
+- \`children\`: React.ReactNode - The trigger element that opens the menu
+- \`items\`: MenuItem[] - Array of menu items to display
+- \`open\`: boolean - Whether the menu is currently open (controlled)
+- \`onOpenChange\`: function - Called when the menu open state changes
+- \`placement\`: MenuPlacement - The placement of the menu relative to the trigger
+- \`closeOnSelection\`: boolean - Whether to close the menu when an item is selected
+- \`size\`: MenuSizeVariant - The size variant of the menu
+`,
+  features: [
+    "Icon support for menu items",
+    "Intent colors for items",
+    "Separators between items",
+    "Disabled items",
+    "Multiple placement options",
+    "Auto-close on selection",
+    "Three size options",
+  ],
+  bestPractices: [
+    "Use separators to group related actions",
+    "Place destructive actions at the bottom with error intent",
+    "Keep menu items concise (1-3 words)",
+    "Use icons for visual scanning",
+    "Close menu after action unless multi-select",
+  ],
+  usage: `
+import { Menu, Button } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+
+  const items = [
+    { id: '1', label: 'Edit', icon: 'pencil', onClick: () => handleEdit() },
+    { id: '2', label: 'Duplicate', icon: 'content-copy', onClick: () => handleDuplicate() },
+    { id: '3', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => handleDelete(), separator: true },
+  ];
+
+  return (
+    <>
+      <div ref={buttonRef}>
+        <Button onPress={() => setOpen(true)}>Actions</Button>
+      </div>
+      <Menu
+        items={items}
+        open={open}
+        onOpenChange={setOpen}
+        anchor={buttonRef}
+        placement="bottom-start"
+      />
+    </>
+  );
+}
+`,
+  examples: {
+    basic: `import { Menu, Button } from '@idealyst/components';
+import { useRef, useState } from 'react';
+
+const buttonRef = useRef(null);
+const [open, setOpen] = useState(false);
+
+const items = [
+  { id: '1', label: 'Option 1', onClick: () => console.log('1') },
+  { id: '2', label: 'Option 2', onClick: () => console.log('2') },
+];
+
+<div ref={buttonRef}>
+  <Button onPress={() => setOpen(true)}>Menu</Button>
+</div>
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
+
+    variants: `import { Menu } from '@idealyst/components';
+
+// Different sizes
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="sm" />
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="md" />
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="lg" />`,
+
+    "with-icons": `import { Menu, Button } from '@idealyst/components';
+import { useRef, useState } from 'react';
+
+const items = [
+  { id: '1', label: 'Profile', icon: 'account', onClick: () => navigate('/profile') },
+  { id: '2', label: 'Settings', icon: 'cog', onClick: () => navigate('/settings') },
+  { id: '3', label: 'Logout', icon: 'logout', intent: 'error', onClick: () => logout(), separator: true },
+];
+
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
+
+    interactive: `import { Menu, Button, Text, View } from '@idealyst/components';
+import { useRef, useState } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState('');
+  const buttonRef = useRef(null);
+
+  const items = [
+    { id: 'edit', label: 'Edit', icon: 'pencil', onClick: () => setSelected('edit') },
+    { id: 'share', label: 'Share', icon: 'share', onClick: () => setSelected('share') },
+    { id: 'delete', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => setSelected('delete') },
+  ];
+
+  return (
+    <View spacing="md">
+      <div ref={buttonRef}>
+        <Button onPress={() => setOpen(true)}>Actions</Button>
+      </div>
+      <Menu
+        items={items}
+        open={open}
+        onOpenChange={setOpen}
+        anchor={buttonRef}
+        placement="bottom-start"
+      />
+      {selected && <Text>Selected: {selected}</Text>}
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Popover.ts

@@ -0,0 +1,159 @@
+export const Popover = {
+  category: "overlay",
+  description: "Floating overlay that displays content anchored to an element, useful for tooltips, menus, and contextual information",
+      props: `
+- \`open\`: boolean - Whether the popover is open/visible
+- \`onOpenChange\`: function - Called when the popover should be opened or closed
+- \`anchor\`: React.ReactNode | React.RefObject<Element> - The anchor element to position the popover relative to Can be a React element or a ref to a DOM element
+- \`children\`: React.ReactNode - The content to display inside the popover
+- \`placement\`: PopoverPlacement - Preferred placement of the popover relative to anchor
+- \`offset\`: number - Distance from the anchor element in pixels
+- \`closeOnClickOutside\`: boolean - Whether clicking outside should close the popover
+- \`closeOnEscapeKey\`: boolean - Whether pressing escape key should close the popover (web only)
+- \`showArrow\`: boolean - Whether to show an arrow pointing to the anchor
+`,
+  features: [
+    "12 placement options with smart positioning",
+    "Automatic repositioning on scroll/resize",
+    "Click outside to close",
+    "Escape key to close (web)",
+    "Optional arrow indicator",
+    "Offset control",
+    "Accessible with focus management",
+  ],
+  bestPractices: [
+    "Use for contextual information that doesn't require immediate action",
+    "Keep popover content focused and concise",
+    "Use arrow to clearly indicate relationship to anchor",
+    "Allow closing via click outside and Escape key",
+    "Don't nest popovers",
+    "Consider using Dialog for critical content",
+  ],
+  usage: `
+import { Popover, Button, View, Text } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+
+  return (
+    <>
+      <div ref={buttonRef}>
+        <Button onPress={() => setOpen(true)}>Show Info</Button>
+      </div>
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        anchor={buttonRef}
+        placement="bottom"
+        showArrow
+      >
+        <View spacing="sm" style={{ padding: 16 }}>
+          <Text weight="bold">Information</Text>
+          <Text>Additional context or help text</Text>
+        </View>
+      </Popover>
+    </>
+  );
+}
+`,
+  examples: {
+    basic: `import { Popover, Button, Text } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+const [open, setOpen] = useState(false);
+const buttonRef = useRef(null);
+
+<div ref={buttonRef}>
+  <Button onPress={() => setOpen(true)}>Open</Button>
+</div>
+<Popover open={open} onOpenChange={setOpen} anchor={buttonRef}>
+  <Text>Popover content</Text>
+</Popover>`,
+
+    variants: `import { Popover, Button, View } from '@idealyst/components';
+
+// Different placements
+<Popover open={open} onOpenChange={setOpen} anchor={ref} placement="top">
+  <View>Top</View>
+</Popover>
+<Popover open={open} onOpenChange={setOpen} anchor={ref} placement="bottom-start">
+  <View>Bottom Start</View>
+</Popover>
+<Popover open={open} onOpenChange={setOpen} anchor={ref} placement="right-end">
+  <View>Right End</View>
+</Popover>`,
+
+    "with-icons": `import { Popover, Button, View, Icon, Text } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+const buttonRef = useRef(null);
+const [open, setOpen] = useState(false);
+
+<div ref={buttonRef}>
+  <Button icon="help-circle" type="text" onPress={() => setOpen(true)} />
+</div>
+<Popover open={open} onOpenChange={setOpen} anchor={buttonRef} showArrow>
+  <View spacing="sm" style={{ padding: 12, maxWidth: 250 }}>
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Icon name="information" size="md" color="primary" />
+      <Text weight="bold">Help</Text>
+    </View>
+    <Text size="sm">This feature allows you to...</Text>
+  </View>
+</Popover>`,
+
+    interactive: `import { Popover, Button, View, Text, Input } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('');
+  const buttonRef = useRef(null);
+
+  return (
+    <View spacing="md">
+      <div ref={buttonRef}>
+        <Button onPress={() => setOpen(true)}>Edit Name</Button>
+      </div>
+
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        anchor={buttonRef}
+        placement="bottom-start"
+        closeOnClickOutside={false}
+      >
+        <View spacing="md" style={{ padding: 16, minWidth: 250 }}>
+          <Text weight="bold">Edit Name</Text>
+          <Input
+            value={value}
+            onChangeText={setValue}
+            placeholder="Enter name"
+          />
+          <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+            <Button
+              type="outlined"
+              size="sm"
+              onPress={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              onPress={() => {
+                handleSave(value);
+                setOpen(false);
+              }}
+            >
+              Save
+            </Button>
+          </View>
+        </View>
+      </Popover>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Pressable.ts

@@ -0,0 +1,123 @@
+export const Pressable = {
+  category: "utility",
+  description: "Wrapper component that detects various press interactions on children",
+      props: `
+- \`children\`: React.ReactNode - Content to render inside the pressable area
+- \`onPress\`: function - Called when the press gesture is activated
+- \`onPressIn\`: function - Called when the press gesture starts
+- \`onPressOut\`: function - Called when the press gesture ends
+- \`disabled\`: boolean - Whether the pressable is disabled
+`,
+  features: [
+    "Press, press-in, press-out callbacks",
+    "Disabled state",
+    "Accessibility support",
+    "Custom styling",
+    "Cross-platform support",
+    "Touch feedback",
+  ],
+  bestPractices: [
+    "Use for custom interactive elements",
+    "Prefer Button for standard button interactions",
+    "Provide accessibilityLabel for screen readers",
+    "Use accessibilityRole for semantic meaning",
+    "Add visual feedback on press",
+    "Ensure minimum 44x44px touch target",
+  ],
+  usage: `
+import { Pressable, Text, View } from '@idealyst/components';
+
+<Pressable onPress={() => console.log('Pressed')}>
+  <View style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
+    <Text>Press me</Text>
+  </View>
+</Pressable>
+`,
+  examples: {
+    basic: `import { Pressable, Text } from '@idealyst/components';
+
+<Pressable onPress={() => console.log('Pressed')}>
+  <Text>Tap here</Text>
+</Pressable>`,
+
+    variants: `import { Pressable, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <Pressable
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+    >
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: pressed ? '#e0e0e0' : '#f5f5f5',
+          borderRadius: 8,
+        }}
+      >
+        <Text>{pressed ? 'Pressing...' : 'Press me'}</Text>
+      </View>
+    </Pressable>
+  );
+}`,
+
+    "with-icons": `import { Pressable, View, Icon, Text } from '@idealyst/components';
+
+<Pressable
+  onPress={() => handleAction()}
+  accessibilityLabel="Perform action"
+  accessibilityRole="button"
+>
+  <View
+    style={{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      padding: 12,
+      backgroundColor: '#f0f0f0',
+      borderRadius: 8,
+    }}
+  >
+    <Icon name="star" size="md" color="primary" />
+    <Text>Custom Button</Text>
+  </View>
+</Pressable>`,
+
+    interactive: `import { Pressable, View, Text, Icon } from '@idealyst/components';
+import { useState } from 'react';
+
+function CustomCard() {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <Pressable
+      onPress={() => setSelected(!selected)}
+      accessibilityLabel="Toggle selection"
+    >
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: selected ? '#e3f2fd' : '#fff',
+          borderWidth: 2,
+          borderColor: selected ? '#2196f3' : '#e0e0e0',
+          borderRadius: 8,
+        }}
+      >
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <View spacing="xs">
+            <Text weight="bold">Custom Card</Text>
+            <Text size="sm">Tap to {selected ? 'deselect' : 'select'}</Text>
+          </View>
+          {selected && (
+            <Icon name="check-circle" size="lg" color="primary" />
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+}`,
+  },
+};