@idealyst/mcp-server 1.0.84

package/dist/data/components/Image.js

@@ -0,0 +1,122 @@
+export const Image = {
+    category: "media",
+    description: "Image component with loading states, fallback support, and various object-fit modes",
+    props: `
+- \`source\`: ImageSourcePropType | string - Image source (URL, require(), or URI object)
+- \`alt\`: string - Alt text for accessibility
+- \`width\`: number | string - Image width
+- \`height\`: number | string - Image height
+- \`aspectRatio\`: number - Aspect ratio (width/height)
+- \`objectFit\`: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' - How image fits container
+- \`loading\`: 'lazy' | 'eager' - Loading strategy (web)
+- \`placeholder\`: ReactNode - Content shown while loading
+- \`fallback\`: ReactNode - Content shown on error
+- \`onLoad\`: () => void - Called when image loads successfully
+- \`onError\`: (error: any) => void - Called on image load error
+- \`borderRadius\`: number - Border radius in pixels
+- \`style\`: ImageStyle - Additional custom styles
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label
+`,
+    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 variant="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="small">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>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Image.js.map

package/dist/data/components/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/data/components/Image.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,OAAO;IACjB,WAAW,EAAE,qFAAqF;IAClG,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,gCAAgC;QAChC,4BAA4B;QAC5B,qBAAqB;QACrB,gBAAgB;QAChB,2BAA2B;QAC3B,sBAAsB;QACtB,uBAAuB;QACvB,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,2CAA2C;QAC3C,4CAA4C;QAC5C,sDAAsD;QACtD,0CAA0C;QAC1C,uCAAuC;QACvC,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;GAOR;QAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;QAiBN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;QAeV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;EAuBf;KACC;CACF,CAAC"}

package/dist/data/components/Input.d.ts

@@ -0,0 +1,15 @@
+export declare const Input: {
+    category: string;
+    description: string;
+    props: string;
+    features: string[];
+    bestPractices: string[];
+    usage: string;
+    examples: {
+        basic: string;
+        variants: string;
+        "with-icons": string;
+        interactive: string;
+    };
+};
+//# sourceMappingURL=Input.d.ts.map

package/dist/data/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/data/components/Input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CA2GjB,CAAC"}

package/dist/data/components/Input.js

@@ -0,0 +1,109 @@
+export const Input = {
+    category: "form",
+    description: "Text input field with label, validation, and various input types",
+    props: `
+- \`label\`: string - Input label text
+- \`value\`: string - Current input value
+- \`onChangeText\`: (text: string) => void - Text change handler
+- \`placeholder\`: string - Placeholder text
+- \`error\`: string - Error message to display
+- \`helperText\`: string - Helper text below input
+- \`disabled\`: boolean - Disable input
+- \`multiline\`: boolean - Allow multiple lines
+- \`secureTextEntry\`: boolean - Hide input (for passwords)
+- \`autoFocus\`: boolean - Focus input on mount
+`,
+    features: [
+        "Label and placeholder support",
+        "Error and helper text states",
+        "Multiline text area mode",
+        "Secure text entry for passwords",
+        "Disabled state",
+        "Auto-focus capability",
+    ],
+    bestPractices: [
+        "Always provide a label for accessibility",
+        "Use helperText to guide users",
+        "Show error messages inline",
+        "Use secureTextEntry for password fields",
+    ],
+    usage: `
+import { Input } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [email, setEmail] = useState('');
+
+  return (
+    <Input
+      label="Email"
+      value={email}
+      onChangeText={setEmail}
+      placeholder="Enter your email"
+      helperText="We'll never share your email"
+    />
+  );
+}
+`,
+    examples: {
+        basic: `import { Input } from '@idealyst/components';
+
+<Input
+  label="Username"
+  placeholder="Enter username"
+/>`,
+        variants: `import { Input } from '@idealyst/components';
+
+// With error
+<Input
+  label="Email"
+  error="Invalid email address"
+/>
+
+// Disabled
+<Input
+  label="Locked Field"
+  disabled
+/>
+
+// Multiline
+<Input
+  label="Description"
+  multiline
+/>`,
+        "with-icons": `import { Input } from '@idealyst/components';
+
+// Password input
+<Input
+  label="Password"
+  secureTextEntry
+  placeholder="Enter password"
+/>`,
+        interactive: `import { Input } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState('');
+  const [error, setError] = useState('');
+
+  const validate = (text: string) => {
+    setValue(text);
+    if (text.length < 3) {
+      setError('Must be at least 3 characters');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <Input
+      label="Username"
+      value={value}
+      onChangeText={validate}
+      error={error}
+    />
+  );
+}`,
+    }
+};
+//# sourceMappingURL=Input.js.map

package/dist/data/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/data/components/Input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACrB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,kEAAkE;IAC/E,KAAK,EAAE;;;;;;;;;;;CAWV;IACG,QAAQ,EAAE;QACR,+BAA+B;QAC/B,8BAA8B;QAC9B,0BAA0B;QAC1B,iCAAiC;QACjC,gBAAgB;QAChB,uBAAuB;KACxB;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,+BAA+B;QAC/B,4BAA4B;QAC5B,yCAAyC;KAC1C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;GAKV;QACG,QAAQ,EAAE;;;;;;;;;;;;;;;;;;GAkBb;QACG,YAAY,EAAE;;;;;;;GAOjB;QACG,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;EAwBjB;KACG;CACJ,CAAC"}

package/dist/data/components/List.d.ts

@@ -0,0 +1,15 @@
+export declare const List: {
+    category: string;
+    description: string;
+    props: string;
+    features: string[];
+    bestPractices: string[];
+    usage: string;
+    examples: {
+        basic: string;
+        variants: string;
+        "with-icons": string;
+        interactive: string;
+    };
+};
+//# sourceMappingURL=List.d.ts.map

package/dist/data/components/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA+GhB,CAAC"}

package/dist/data/components/List.js

@@ -0,0 +1,113 @@
+export const List = {
+    category: "display",
+    description: "Vertical list container with support for sections, icons, and interactive items",
+    props: `
+List Props:
+- \`variant\`: 'default' | 'bordered' | 'divided' - Visual style
+- \`size\`: 'small' | 'medium' | 'large' - Item size
+- \`children\`: ListItem | ListSection - List content
+
+ListItem Props:
+- \`label\`: string - Item label text
+- \`leading\`: string | ReactNode - Leading icon or element
+- \`trailing\`: string | ReactNode - Trailing icon or element
+- \`selected\`: boolean - Selected state
+- \`active\`: boolean - Active state
+- \`disabled\`: boolean - Disabled state
+- \`indent\`: number - Indentation level
+- \`onPress\`: () => void - Press handler
+`,
+    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 variant="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 variant="divided">
+  <ListItem label="Item 1" />
+  <ListItem label="Item 2" />
+  <ListItem label="Item 3" />
+</List>`,
+        variants: `import { List, ListItem } from '@idealyst/components';
+
+<List variant="default">
+  <ListItem label="Default" />
+</List>
+
+<List variant="bordered">
+  <ListItem label="Bordered" />
+</List>
+
+<List variant="divided">
+  <ListItem label="Divided" />
+</List>`,
+        "with-icons": `import { List, ListItem, Badge } from '@idealyst/components';
+
+<List variant="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 variant="bordered">
+      <ListItem
+        label="Home"
+        leading="home"
+        selected={selected === 'home'}
+        onPress={() => setSelected('home')}
+      />
+      <ListItem
+        label="Profile"
+        leading="account"
+        selected={selected === 'profile'}
+        onPress={() => setSelected('profile')}
+      />
+    </List>
+  );
+}`,
+    }
+};
+//# sourceMappingURL=List.js.map

package/dist/data/components/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,iFAAiF;IAC9F,KAAK,EAAE;;;;;;;;;;;;;;;CAeV;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,yBAAyB;QACzB,qDAAqD;QACrD,4BAA4B;QAC5B,8BAA8B;QAC9B,2BAA2B;QAC3B,+BAA+B;KAChC;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,6CAA6C;QAC7C,+CAA+C;QAC/C,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;QAML;QACF,QAAQ,EAAE;;;;;;;;;;;;QAYR;QACF,YAAY,EAAE;;;;;;;;;;;;;QAaZ;QACF,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBjB;KACG;CACJ,CAAC"}

package/dist/data/components/Menu.d.ts

@@ -0,0 +1,15 @@
+export declare const Menu: {
+    category: string;
+    description: string;
+    props: string;
+    features: string[];
+    bestPractices: string[];
+    usage: string;
+    examples: {
+        basic: string;
+        variants: string;
+        "with-icons": string;
+        interactive: string;
+    };
+};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/data/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAqIhB,CAAC"}

package/dist/data/components/Menu.js

@@ -0,0 +1,132 @@
+export const Menu = {
+    category: "overlay",
+    description: "Contextual menu with list of actions, typically triggered by a button or other element",
+    props: `
+- \`items\`: MenuItem[] - Array of menu items
+  - \`id\`: string - Unique identifier
+  - \`label\`: string - Menu item label
+  - \`onClick\`: () => void - Click handler
+  - \`disabled\`: boolean - Whether item is disabled
+  - \`icon\`: IconName | ReactNode - Icon (string name or custom element)
+  - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
+  - \`separator\`: boolean - Show separator after this item
+- \`open\`: boolean - Whether menu is open
+- \`onOpenChange\`: (open: boolean) => void - Open state change handler
+- \`anchor\`: React.RefObject<HTMLElement> - Anchor element to position menu
+- \`placement\`: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right' - Menu placement
+- \`closeOnSelection\`: boolean - Close menu when item selected (default: true)
+- \`size\`: 'small' | 'medium' | 'large' - Menu item size
+- \`style\`: ViewStyle - Additional custom styles
+- \`testID\`: string - Test identifier
+`,
+    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="small" />
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="medium" />
+<Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="large" />`,
+        "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>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Menu.js.map

package/dist/data/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,wFAAwF;IACrG,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBR;IACC,QAAQ,EAAE;QACR,6BAA6B;QAC7B,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB;QAChB,4BAA4B;QAC5B,yBAAyB;QACzB,oBAAoB;KACrB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,2DAA2D;QAC3D,qCAAqC;QACrC,+BAA+B;QAC/B,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;;;;6EAckE;QAEzE,QAAQ,EAAE;;;;;oFAKsE;QAEhF,YAAY,EAAE;;;;;;;;;6EAS2D;QAEzE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}

package/dist/data/components/Popover.d.ts

@@ -0,0 +1,15 @@
+export declare const Popover: {
+    category: string;
+    description: string;
+    props: string;
+    features: string[];
+    bestPractices: string[];
+    usage: string;
+    examples: {
+        basic: string;
+        variants: string;
+        "with-icons": string;
+        interactive: string;
+    };
+};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/data/components/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/data/components/Popover.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAgKnB,CAAC"}