@idealyst/mcp-server 1.0.84

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

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

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

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

package/dist/data/components/Checkbox.js

@@ -0,0 +1,118 @@
+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\`: (checked: boolean) => void - Called when checkbox state changes
+- \`size\`: 'small' | 'medium' | 'large' - Checkbox size
+- \`intent\`: IntentVariant - Color scheme
+- \`variant\`: 'default' | 'outlined' - Visual style
+- \`label\`: string - Label text to display next to checkbox
+- \`children\`: ReactNode - Custom label content
+- \`style\`: any - Additional custom styles
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label
+- \`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="small" />
+  <Checkbox label="Medium" size="medium" />
+  <Checkbox label="Large" size="large" />
+</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>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/data/components/Checkbox.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,uEAAuE;IACpF,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,4CAA4C;QAC5C,aAAa;QACb,qBAAqB;QACrB,uBAAuB;QACvB,wBAAwB;QACxB,wCAAwC;KACzC;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,+EAA+E;QAC/E,4BAA4B;QAC5B,4CAA4C;QAC5C,mCAAmC;KACpC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;6CAEkC;QAEzC,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;QAaV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCf;KACC;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Chip.js

@@ -0,0 +1,76 @@
+export const Chip = {
+    category: "display",
+    description: "Compact element for tags, filters, and selections with optional delete action",
+    props: `
+- \`label\`: string - Chip text
+- \`variant\`: 'filled' | 'outlined' | 'soft' - Visual style
+- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
+- \`size\`: 'small' | 'medium' | 'large' - Chip size
+- \`icon\`: string | ReactNode - Leading icon
+- \`deletable\`: boolean - Show delete button
+- \`onDelete\`: () => void - Delete handler
+- \`selectable\`: boolean - Enable selection
+- \`selected\`: boolean - Selected state
+- \`onPress\`: () => void - Press handler
+- \`disabled\`: boolean - Disabled state
+`,
+    features: [
+        "Three variants: filled, outlined, soft",
+        "Five intent colors",
+        "Icon support",
+        "Deletable with onDelete handler",
+        "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" variant="filled" intent="primary" />
+<Chip label="Outlined" variant="outlined" intent="success" />
+<Chip label="Soft" variant="soft" intent="warning" />`,
+        "with-icons": `import { Chip } from '@idealyst/components';
+
+<Chip label="Star" icon="star" />
+<Chip label="Heart" icon="heart" intent="error" />`,
+        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>
+  );
+}`,
+    }
+};
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/data/components/Chip.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,+EAA+E;IAC5F,KAAK,EAAE;;;;;;;;;;;;CAYV;IACG,QAAQ,EAAE;QACR,wCAAwC;QACxC,oBAAoB;QACpB,cAAc;QACd,iCAAiC;QACjC,gCAAgC;QAChC,aAAa;QACb,gBAAgB;KACjB;IACD,aAAa,EAAE;QACb,iDAAiD;QACjD,wCAAwC;QACxC,yCAAyC;QACzC,0BAA0B;KAC3B;IACD,KAAK,EAAE;;;;;;;;;CASV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;qBAEQ;QACf,QAAQ,EAAE;;;;sDAIsC;QAChD,YAAY,EAAE;;;mDAG+B;QAC7C,WAAW,EAAE;;;;;;;;;;;;;;;;;;EAkBjB;KACG;CACJ,CAAC"}

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

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

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

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

package/dist/data/components/Dialog.js

@@ -0,0 +1,137 @@
+export const Dialog = {
+    category: "overlay",
+    description: "Modal overlay for focused user interactions and important information",
+    props: `
+- \`open\`: boolean - Control dialog visibility
+- \`onOpenChange\`: (open: boolean) => void - Open state change handler
+- \`title\`: string - Dialog title
+- \`size\`: 'small' | 'medium' | 'large' | 'fullscreen' - Dialog size
+- \`variant\`: 'default' | 'alert' - Visual style
+- \`showCloseButton\`: boolean - Show close button
+- \`closeOnBackdropClick\`: boolean - Close when clicking backdrop
+- \`closeOnEscapeKey\`: boolean - Close on Escape key
+- \`children\`: ReactNode - Dialog content
+`,
+    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="medium"
+      >
+        <View spacing="md">
+          <Text>Are you sure you want to proceed?</Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Button variant="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" variant="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="xlarge" 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 variant="outlined" onPress={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button intent="primary" onPress={handleConfirm}>
+              Confirm
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </View>
+  );
+}`,
+    }
+};
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/data/components/Dialog.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACtB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,uEAAuE;IACpF,KAAK,EAAE;;;;;;;;;;CAUV;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,qCAAqC;QACrC,sCAAsC;QACtC,uBAAuB;QACvB,wCAAwC;QACxC,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,yCAAyC;QACzC,8BAA8B;QAC9B,8CAA8C;QAC9C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;UAIH;QACJ,QAAQ,EAAE;;;;;;;;;;UAUN;QACJ,YAAY,EAAE;;;;;;;;;;UAUV;QACJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCjB;KACG;CACJ,CAAC"}

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

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

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

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

package/dist/data/components/Divider.js

@@ -0,0 +1,71 @@
+export const Divider = {
+    category: "layout",
+    description: "Visual separator for content sections with horizontal or vertical orientation",
+    props: `
+- \`orientation\`: 'horizontal' | 'vertical' - The orientation of the divider
+- \`variant\`: 'solid' | 'dashed' | 'dotted' - The visual style
+- \`thickness\`: 'thin' | 'medium' | 'thick' - The thickness of the divider
+- \`intent\`: IntentVariant - The color intent
+- \`length\`: 'full' | 'auto' | number - The length (percentage or fixed)
+- \`spacing\`: 'none' | 'small' | 'medium' | 'large' - Spacing around divider
+- \`children\`: ReactNode - Content in center (horizontal dividers)
+- \`style\`: any - Additional custom styles
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label
+`,
+    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 'medium' 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="medium" />
+  <Text>Content below</Text>
+</View>
+`,
+    examples: {
+        basic: `import { Divider } from '@idealyst/components';
+
+<Divider />`,
+        variants: `import { Divider, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Divider variant="solid" />
+  <Divider variant="dashed" />
+  <Divider variant="dotted" />
+</View>`,
+        "with-icons": `import { Divider, View, Text } from '@idealyst/components';
+
+<View spacing="lg">
+  <Text>Section 1</Text>
+  <Divider spacing="medium">
+    <Text size="small" 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>`,
+    },
+};
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/data/components/Divider.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,QAAQ,EAAE,QAAQ;IAClB,WAAW,EAAE,+EAA+E;IAC5F,KAAK,EAAE;;;;;;;;;;;CAWR;IACC,QAAQ,EAAE;QACR,sCAAsC;QACtC,2CAA2C;QAC3C,yBAAyB;QACzB,sBAAsB;QACtB,qCAAqC;QACrC,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,sDAAsD;QACtD,+DAA+D;QAC/D,6DAA6D;QAC7D,sDAAsD;QACtD,yDAAyD;KAC1D;IACD,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;YAEC;QAER,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;QAQV;QAEJ,WAAW,EAAE;;;;;;;;QAQT;KACL;CACF,CAAC"}

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

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

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

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

package/dist/data/components/Icon.js

@@ -0,0 +1,70 @@
+export const Icon = {
+    category: "display",
+    description: "Material Design icon display component with size and color variants",
+    props: `
+- \`name\`: IconName - The name of the Material Design icon
+- \`size\`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number - Icon size variant or custom number
+- \`color\`: DisplayColorVariant - Predefined theme color variant
+- \`style\`: any - Additional custom styles
+- \`testID\`: string - Test identifier
+- \`accessibilityLabel\`: string - Accessibility label for screen readers
+`,
+    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'}
+      variant="text"
+      onPress={() => setFavorited(!favorited)}
+    >
+      {favorited ? 'Favorited' : 'Favorite'}
+    </Button>
+  );
+}`,
+    },
+};
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/data/components/Icon.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,qEAAqE;IAClF,KAAK,EAAE;;;;;;;CAOR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,gDAAgD;QAChD,sBAAsB;QACtB,sBAAsB;QACtB,wBAAwB;QACxB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,qDAAqD;QACrD,+CAA+C;QAC/C,0CAA0C;QAC1C,0CAA0C;QAC1C,gEAAgE;KACjE;IACD,KAAK,EAAE;;;;CAIR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;+BAEoB;QAE3B,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;QAKV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;EAgBf;KACC;CACF,CAAC"}

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

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

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

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