@idealyst/mcp-server 1.0.84

package/dist/data/components/SVGImage.js

@@ -0,0 +1,112 @@
+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="small">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="small" onPress={() => setSize(Math.max(24, size - 12))}>
+          Smaller
+        </Button>
+        <Button size="small" onPress={() => setSize(Math.min(96, size + 12))}>
+          Larger
+        </Button>
+      </View>
+
+      <View spacing="xs">
+        <Text size="small">Intent:</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          {intents.map((i) => (
+            <Button
+              key={i}
+              size="small"
+              variant={intent === i ? 'contained' : 'outlined'}
+              onPress={() => setIntent(i)}
+            >
+              {i}
+            </Button>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=SVGImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SVGImage.js","sourceRoot":"","sources":["../../../src/data/components/SVGImage.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,OAAO;IACjB,WAAW,EAAE,0DAA0D;IACvE,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,4BAA4B;QAC5B,qBAAqB;QACrB,qBAAqB;QACrB,cAAc;QACd,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,kCAAkC;QAClC,4CAA4C;QAC5C,yCAAyC;QACzC,sDAAsD;QACtD,wCAAwC;KACzC;IACD,KAAK,EAAE;;;;;;;;;;;;;;CAcR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;qCAG0B;QAEjC,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Screen.js

@@ -0,0 +1,99 @@
+export const Screen = {
+    category: "layout",
+    description: "Full-screen container component with background variants, padding, and safe area support",
+    props: `
+- \`children\`: ReactNode - Content to display inside the screen
+- \`background\`: 'primary' | 'secondary' | 'tertiary' | 'inverse' - Background color variant
+- \`padding\`: 'none' | 'sm' | 'md' | 'lg' | 'xl' - Screen padding variant
+- \`safeArea\`: boolean - Apply safe area padding for mobile devices
+- \`style\`: any - Additional custom styles
+- \`testID\`: string - Test identifier
+- \`scrollable\`: boolean - Make content 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="xlarge" 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="xlarge" 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="xlarge" weight="bold">
+          Settings
+        </Text>
+        <Button
+          onPress={() => setDarkMode(!darkMode)}
+          variant="outlined"
+        >
+          Toggle {darkMode ? 'Light' : 'Dark'} Mode
+        </Button>
+        <Text>
+          Current theme: {darkMode ? 'Dark' : 'Light'}
+        </Text>
+      </View>
+    </Screen>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/data/components/Screen.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,WAAW,EAAE,0FAA0F;IACvG,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,gCAAgC;QAChC,sBAAsB;QACtB,+CAA+C;QAC/C,6BAA6B;QAC7B,uBAAuB;QACvB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,iCAAiC;QACjC,2CAA2C;QAC3C,2DAA2D;QAC3D,wCAAwC;QACxC,oCAAoC;KACrC;IACD,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;UAID;QAEN,QAAQ,EAAE;;;;;;2DAM6C;QAEvD,YAAY,EAAE;;;;;;;;;;;;;;UAcR;QAEN,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Select.js

@@ -0,0 +1,146 @@
+export const Select = {
+    category: "form",
+    description: "Dropdown select component for choosing from a list of options",
+    props: `
+- \`options\`: SelectOption[] - Array of select options
+  - \`value\`: string - Unique value
+  - \`label\`: string - Display label
+  - \`disabled\`: boolean - Whether disabled
+  - \`icon\`: ReactNode - Optional icon
+- \`value\`: string - Currently selected value
+- \`onValueChange\`: (value: string) => void - Selection change handler
+- \`placeholder\`: string - Placeholder text when no value
+- \`disabled\`: boolean - Whether the select is disabled
+- \`error\`: boolean - Whether to show error state
+- \`helperText\`: string - Helper text below select
+- \`label\`: string - Label text above select
+- \`variant\`: 'outlined' | 'filled' - Visual style
+- \`intent\`: IntentVariant - Color scheme
+- \`size\`: 'small' | 'medium' | 'large' - Select size
+- \`searchable\`: boolean - Enable search/filter (web only)
+- \`filterOption\`: (option, searchTerm) => boolean - Custom filter function
+- \`presentationMode\`: 'dropdown' | 'actionSheet' - iOS presentation (native only)
+- \`maxHeight\`: number - Maximum height for dropdown
+- \`style\`: any - Additional styles
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label
+`,
+    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} variant="outlined" size="small" />
+  <Select options={options} variant="filled" size="medium" />
+  <Select options={options} variant="outlined" size="large" />
+</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>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/data/components/Select.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,+DAA+D;IAC5E,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,2BAA2B;QAC3B,0BAA0B;QAC1B,qBAAqB;QACrB,uBAAuB;QACvB,aAAa;QACb,kBAAkB;QAClB,kBAAkB;QAClB,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,+CAA+C;QAC/C,yCAAyC;QACzC,gCAAgC;QAChC,gCAAgC;QAChC,0CAA0C;QAC1C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;qDAO0C;QAEjD,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;GAaf;QAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Skeleton.js

@@ -0,0 +1,110 @@
+export const Skeleton = {
+    category: "feedback",
+    description: "Loading placeholder that mimics content structure while data loads",
+    props: `
+Skeleton Props:
+- \`width\`: number | string - Width of skeleton (default: '100%')
+- \`height\`: number | string - Height of skeleton (default: 20)
+- \`shape\`: 'rectangle' | 'circle' | 'rounded' - Shape of skeleton (default: 'rectangle')
+- \`borderRadius\`: number - Border radius for 'rounded' shape (default: 8)
+- \`animation\`: 'pulse' | 'wave' | 'none' - Animation type (default: 'pulse')
+- \`style\`: ViewStyle - Additional custom styles
+- \`testID\`: string - Test identifier
+
+SkeletonGroup Props:
+- \`count\`: number - Number of skeleton items (default: 3)
+- \`spacing\`: number - Spacing between items in pixels (default: 12)
+- \`skeletonProps\`: Omit<SkeletonProps, 'testID'> - Props for each skeleton
+- \`style\`: ViewStyle - Container styles
+- \`testID\`: string - Test identifier
+`,
+    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="medium">
+        <View spacing="md">
+          <Skeleton width="80%" height={24} shape="rounded" />
+          <SkeletonGroup
+            count={3}
+            skeletonProps={{ width: '100%', height: 16 }}
+          />
+        </View>
+      </Card>
+    );
+  }
+
+  return (
+    <Card padding="medium">
+      <View spacing="md">
+        <Text size="large" weight="bold">{data.title}</Text>
+        <Text>{data.content}</Text>
+      </View>
+    </Card>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/data/components/Skeleton.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,oEAAoE;IACjF,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,0CAA0C;QAC1C,uBAAuB;QACvB,yBAAyB;QACzB,wCAAwC;QACxC,sBAAsB;QACtB,0BAA0B;KAC3B;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,yCAAyC;QACzC,0CAA0C;QAC1C,qCAAqC;QACrC,+CAA+C;QAC/C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;qCAE0B;QAEjC,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCf;KACC;CACF,CAAC"}

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

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

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

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