@idealyst/mcp-server 1.0.84

package/dist/data/components/Popover.js

@@ -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\`: (open: boolean) => void - Called when popover should open/close
+- \`anchor\`: ReactNode | React.RefObject<Element> - Anchor element to position relative to
+- \`children\`: ReactNode - Content to display inside popover
+- \`placement\`: PopoverPlacement - Preferred placement (top, bottom, left, right with -start, -end modifiers)
+- \`offset\`: number - Distance from anchor element in pixels
+- \`closeOnClickOutside\`: boolean - Close when clicking outside (default: true)
+- \`closeOnEscapeKey\`: boolean - Close on Escape key press (web only, default: true)
+- \`showArrow\`: boolean - Show arrow pointing to anchor
+- \`style\`: any - Additional custom styles
+- \`testID\`: string - Test identifier
+`,
+    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" variant="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="small">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
+              variant="outlined"
+              size="small"
+              onPress={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="small"
+              onPress={() => {
+                handleSave(value);
+                setOpen(false);
+              }}
+            >
+              Save
+            </Button>
+          </View>
+        </View>
+      </Popover>
+    </View>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/data/components/Popover.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,uHAAuH;IACpI,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,6CAA6C;QAC7C,0CAA0C;QAC1C,wBAAwB;QACxB,2BAA2B;QAC3B,0BAA0B;QAC1B,gBAAgB;QAChB,kCAAkC;KACnC;IACD,aAAa,EAAE;QACb,sEAAsE;QACtE,0CAA0C;QAC1C,sDAAsD;QACtD,gDAAgD;QAChD,qBAAqB;QACrB,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;WAWA;QAEP,QAAQ,EAAE;;;;;;;;;;;WAWH;QAEP,YAAY,EAAE;;;;;;;;;;;;;;;;;WAiBP;QAEP,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Pressable.js

@@ -0,0 +1,125 @@
+export const Pressable = {
+    category: "utility",
+    description: "Wrapper component that detects various press interactions on children",
+    props: `
+- \`children\`: ReactNode - Content to render inside pressable area
+- \`onPress\`: () => void - Called when press gesture is activated
+- \`onPressIn\`: () => void - Called when press gesture starts
+- \`onPressOut\`: () => void - Called when press gesture ends
+- \`disabled\`: boolean - Whether the pressable is disabled
+- \`style\`: any - Additional styles to apply
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label for screen readers
+- \`accessibilityRole\`: string - Accessibility role (web)
+`,
+    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="small">Tap to {selected ? 'deselect' : 'select'}</Text>
+          </View>
+          {selected && (
+            <Icon name="check-circle" size="lg" color="primary" />
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Pressable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.js","sourceRoot":"","sources":["../../../src/data/components/Pressable.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,uEAAuE;IACpF,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,sCAAsC;QACtC,gBAAgB;QAChB,uBAAuB;QACvB,gBAAgB;QAChB,wBAAwB;QACxB,gBAAgB;KACjB;IACD,aAAa,EAAE;QACb,qCAAqC;QACrC,gDAAgD;QAChD,+CAA+C;QAC/C,4CAA4C;QAC5C,8BAA8B;QAC9B,qCAAqC;KACtC;IACD,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;aAIE;QAET,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBZ;QAEE,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;aAoBL;QAET,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Progress.js

@@ -0,0 +1,95 @@
+export const Progress = {
+    category: "feedback",
+    description: "Progress indicator showing completion status of tasks or operations",
+    props: `
+- \`value\`: number - Current progress value (0-max)
+- \`max\`: number - Maximum value (default: 100)
+- \`variant\`: 'linear' | 'circular' - Progress bar style
+- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
+- \`size\`: 'small' | 'medium' | 'large' - Size of progress indicator
+- \`indeterminate\`: boolean - Show indeterminate/loading state
+- \`showLabel\`: boolean - Show percentage label
+- \`label\`: string - Custom label text
+- \`rounded\`: boolean - Rounded ends (linear variant)
+- \`style\`: ViewStyle - Additional custom styles
+- \`testID\`: string - Test identifier
+`,
+    features: [
+        "Linear and circular variants",
+        "Determinate and indeterminate modes",
+        "Five intent colors",
+        "Three sizes",
+        "Percentage label support",
+        "Custom label text",
+        "Rounded ends option",
+    ],
+    bestPractices: [
+        "Use determinate progress when percentage is known",
+        "Use indeterminate progress for unknown duration",
+        "Show label for user feedback",
+        "Use circular variant for compact spaces",
+        "Match intent to operation context",
+    ],
+    usage: `
+import { Progress } from '@idealyst/components';
+
+<Progress
+  value={65}
+  variant="linear"
+  intent="primary"
+  showLabel
+/>
+`,
+    examples: {
+        basic: `import { Progress } from '@idealyst/components';
+
+<Progress value={50} />`,
+        variants: `import { Progress, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Progress value={30} variant="linear" intent="primary" />
+  <Progress value={60} variant="linear" intent="success" />
+  <Progress value={value} variant="circular" size="large" showLabel />
+</View>`,
+        "with-icons": `import { Progress, View, Text } from '@idealyst/components';
+
+<View spacing="sm">
+  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+    <Text>Uploading...</Text>
+    <Text>{progress}%</Text>
+  </View>
+  <Progress value={progress} intent="primary" />
+</View>`,
+        interactive: `import { Progress, Button, View, Text } from '@idealyst/components';
+import { useState, useEffect } from 'react';
+
+function Example() {
+  const [progress, setProgress] = useState(0);
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    if (running && progress < 100) {
+      const timer = setTimeout(() => setProgress(progress + 10), 500);
+      return () => clearTimeout(timer);
+    } else if (progress >= 100) {
+      setRunning(false);
+    }
+  }, [progress, running]);
+
+  const handleStart = () => {
+    setProgress(0);
+    setRunning(true);
+  };
+
+  return (
+    <View spacing="md">
+      <Progress value={progress} intent="success" showLabel />
+      <Button onPress={handleStart} disabled={running}>
+        Start
+      </Button>
+    </View>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/data/components/Progress.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,qEAAqE;IAClF,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,8BAA8B;QAC9B,qCAAqC;QACrC,oBAAoB;QACpB,aAAa;QACb,0BAA0B;QAC1B,mBAAmB;QACnB,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,iDAAiD;QACjD,8BAA8B;QAC9B,yCAAyC;QACzC,mCAAmC;KACpC;IACD,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;wBAEa;QAEpB,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;QAQV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/RadioButton.js

@@ -0,0 +1,140 @@
+export const RadioButton = {
+    category: "form",
+    description: "Radio button for single-choice selection within a group",
+    props: `
+RadioButton Props:
+- \`value\`: string - The value of this radio button
+- \`checked\`: boolean - Whether the radio is checked
+- \`onPress\`: () => void - Press handler
+- \`disabled\`: boolean - Whether disabled
+- \`label\`: string - Label text
+- \`size\`: 'small' | 'medium' | 'large' - Radio size
+- \`intent\`: 'primary' | 'success' | 'error' | 'warning' | 'neutral' - Color scheme
+- \`style\`: ViewStyle - Additional styles
+- \`testID\`: string - Test identifier
+
+RadioGroup Props:
+- \`value\`: string - Currently selected value
+- \`onValueChange\`: (value: string) => void - Selection change handler
+- \`disabled\`: boolean - Disable all radio buttons
+- \`orientation\`: 'horizontal' | 'vertical' - Layout orientation
+- \`children\`: ReactNode - Radio button children
+- \`style\`: ViewStyle - Additional styles
+- \`testID\`: string - Test identifier
+`,
+    features: [
+        "Single selection within group",
+        "Horizontal and vertical layouts",
+        "Label support",
+        "Three sizes",
+        "Five intent colors",
+        "Disabled state (individual or group)",
+        "Controlled component",
+    ],
+    bestPractices: [
+        "Use RadioGroup to manage selection state",
+        "Always provide labels for accessibility",
+        "Use for mutually exclusive options (3-5 choices)",
+        "For 2 options, consider Switch or Checkbox",
+        "For many options (>5), consider Select",
+        "Group related options visually",
+    ],
+    usage: `
+import { RadioGroup, RadioButton } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState('option1');
+
+  return (
+    <RadioGroup value={value} onValueChange={setValue}>
+      <RadioButton value="option1" label="Option 1" />
+      <RadioButton value="option2" label="Option 2" />
+      <RadioButton value="option3" label="Option 3" />
+    </RadioGroup>
+  );
+}
+`,
+    examples: {
+        basic: `import { RadioGroup, RadioButton } from '@idealyst/components';
+
+<RadioGroup value={selected} onValueChange={setSelected}>
+  <RadioButton value="a" label="Choice A" />
+  <RadioButton value="b" label="Choice B" />
+</RadioGroup>`,
+        variants: `import { RadioGroup, RadioButton, View } from '@idealyst/components';
+
+<View spacing="md">
+  {/* Vertical (default) */}
+  <RadioGroup value={value} onValueChange={setValue}>
+    <RadioButton value="1" label="Option 1" />
+    <RadioButton value="2" label="Option 2" />
+  </RadioGroup>
+
+  {/* Horizontal */}
+  <RadioGroup value={value} onValueChange={setValue} orientation="horizontal">
+    <RadioButton value="1" label="Small" size="small" />
+    <RadioButton value="2" label="Medium" size="medium" />
+    <RadioButton value="3" label="Large" size="large" />
+  </RadioGroup>
+</View>`,
+        "with-icons": `import { RadioGroup, RadioButton } from '@idealyst/components';
+
+<RadioGroup value={plan} onValueChange={setPlan}>
+  <RadioButton
+    value="free"
+    label="Free Plan"
+    intent="neutral"
+  />
+  <RadioButton
+    value="pro"
+    label="Pro Plan"
+    intent="primary"
+  />
+  <RadioButton
+    value="enterprise"
+    label="Enterprise Plan"
+    intent="success"
+  />
+</RadioGroup>`,
+        interactive: `import { RadioGroup, RadioButton, View, Text, Card } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [shipping, setShipping] = useState('standard');
+
+  const options = [
+    { value: 'standard', label: 'Standard (5-7 days)', price: 'Free' },
+    { value: 'express', label: 'Express (2-3 days)', price: '$10' },
+    { value: 'overnight', label: 'Overnight', price: '$25' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Text weight="bold">Select Shipping Method</Text>
+      <RadioGroup value={shipping} onValueChange={setShipping}>
+        {options.map((option) => (
+          <Card
+            key={option.value}
+            variant={shipping === option.value ? 'outlined' : 'default'}
+            padding="small"
+            clickable
+            onPress={() => setShipping(option.value)}
+          >
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+              <RadioButton
+                value={option.value}
+                label={option.label}
+                checked={shipping === option.value}
+              />
+              <Text weight="bold">{option.price}</Text>
+            </View>
+          </Card>
+        ))}
+      </RadioGroup>
+    </View>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=RadioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/data/components/RadioButton.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,yDAAyD;IACtE,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;CAoBR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,iCAAiC;QACjC,eAAe;QACf,aAAa;QACb,oBAAoB;QACpB,sCAAsC;QACtC,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,yCAAyC;QACzC,kDAAkD;QAClD,4CAA4C;QAC5C,wCAAwC;QACxC,gCAAgC;KACjC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;CAeR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;cAKG;QAEV,QAAQ,EAAE;;;;;;;;;;;;;;;QAeN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;cAkBJ;QAEV,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCf;KACC;CACF,CAAC"}

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

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

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

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