npm - @idealyst/components - Versions diffs - 1.0.0 - Mend

@idealyst/components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/README.md +568 -0
package/package.json +107 -0
package/plugin/web.js +186 -0
package/src/Avatar/Avatar.native.tsx +44 -0
package/src/Avatar/Avatar.styles.tsx +67 -0
package/src/Avatar/Avatar.web.tsx +51 -0
package/src/Avatar/index.native.ts +2 -0
package/src/Avatar/index.ts +2 -0
package/src/Avatar/index.web.ts +2 -0
package/src/Avatar/types.ts +43 -0
package/src/Badge/Badge.native.tsx +43 -0
package/src/Badge/Badge.styles.tsx +154 -0
package/src/Badge/Badge.web.tsx +45 -0
package/src/Badge/index.native.ts +2 -0
package/src/Badge/index.ts +2 -0
package/src/Badge/index.web.ts +2 -0
package/src/Badge/types.ts +34 -0
package/src/Button/Button.native.tsx +39 -0
package/src/Button/Button.styles.tsx +215 -0
package/src/Button/Button.types.ts +12 -0
package/src/Button/Button.web.tsx +56 -0
package/src/Button/index.native.ts +3 -0
package/src/Button/index.ts +5 -0
package/src/Button/index.web.ts +3 -0
package/src/Button/types.ts +49 -0
package/src/Card/Card.native.tsx +52 -0
package/src/Card/Card.styles.tsx +240 -0
package/src/Card/Card.web.tsx +62 -0
package/src/Card/index.native.ts +3 -0
package/src/Card/index.ts +5 -0
package/src/Card/index.web.ts +3 -0
package/src/Card/types.ts +59 -0
package/src/Checkbox/Checkbox.native.tsx +99 -0
package/src/Checkbox/Checkbox.styles.tsx +292 -0
package/src/Checkbox/Checkbox.web.tsx +131 -0
package/src/Checkbox/index.native.ts +3 -0
package/src/Checkbox/index.ts +5 -0
package/src/Checkbox/index.web.ts +3 -0
package/src/Checkbox/types.ts +79 -0
package/src/Divider/Divider.native.tsx +145 -0
package/src/Divider/Divider.styles.tsx +602 -0
package/src/Divider/Divider.web.tsx +73 -0
package/src/Divider/index.native.ts +3 -0
package/src/Divider/index.ts +5 -0
package/src/Divider/index.web.ts +3 -0
package/src/Divider/types.ts +54 -0
package/src/Icon/Icon.native.tsx +39 -0
package/src/Icon/Icon.styles.tsx +50 -0
package/src/Icon/Icon.web.tsx +47 -0
package/src/Icon/icon-types.ts +7452 -0
package/src/Icon/index.native.ts +3 -0
package/src/Icon/index.ts +5 -0
package/src/Icon/index.web.ts +3 -0
package/src/Icon/types.ts +36 -0
package/src/Input/Input.native.tsx +75 -0
package/src/Input/Input.styles.tsx +177 -0
package/src/Input/Input.web.tsx +71 -0
package/src/Input/index.native.ts +3 -0
package/src/Input/index.ts +5 -0
package/src/Input/index.web.ts +3 -0
package/src/Input/types.ts +69 -0
package/src/Screen/Screen.native.tsx +41 -0
package/src/Screen/Screen.styles.tsx +60 -0
package/src/Screen/Screen.web.tsx +33 -0
package/src/Screen/index.native.ts +2 -0
package/src/Screen/index.ts +2 -0
package/src/Screen/index.web.ts +2 -0
package/src/Screen/types.ts +38 -0
package/src/Text/Text.native.tsx +36 -0
package/src/Text/Text.styles.tsx +67 -0
package/src/Text/Text.web.tsx +41 -0
package/src/Text/index.native.ts +3 -0
package/src/Text/index.ts +5 -0
package/src/Text/index.web.ts +3 -0
package/src/Text/types.ts +39 -0
package/src/View/View.native.tsx +56 -0
package/src/View/View.styles.tsx +103 -0
package/src/View/View.web.tsx +60 -0
package/src/View/index.native.ts +3 -0
package/src/View/index.ts +5 -0
package/src/View/index.web.ts +3 -0
package/src/View/types.ts +73 -0
package/src/examples/AllExamples.tsx +72 -0
package/src/examples/AvatarExamples.tsx +97 -0
package/src/examples/BadgeExamples.tsx +200 -0
package/src/examples/ButtonExamples.tsx +150 -0
package/src/examples/CardExamples.tsx +176 -0
package/src/examples/CheckboxExamples.tsx +217 -0
package/src/examples/DividerExamples.tsx +218 -0
package/src/examples/IconExamples.tsx +342 -0
package/src/examples/InputExamples.tsx +134 -0
package/src/examples/README.md +136 -0
package/src/examples/ScreenExamples.tsx +154 -0
package/src/examples/TextExamples.tsx +89 -0
package/src/examples/ThemeExtensionExamples.tsx +91 -0
package/src/examples/ValidationExamples.tsx +95 -0
package/src/examples/ViewExamples.tsx +129 -0
package/src/examples/extendedTheme.ts +331 -0
package/src/examples/index.ts +15 -0
package/src/index.native.ts +52 -0
package/src/index.ts +48 -0
package/src/theme/breakpoints.ts +8 -0
package/src/theme/colorResolver.ts +218 -0
package/src/theme/colors.ts +315 -0
package/src/theme/defaultThemes.ts +326 -0
package/src/theme/index.ts +188 -0
package/src/theme/themeBuilder.ts +602 -0
package/src/theme/unistyles.d.ts +6 -0
package/src/theme/variantHelpers.ts +584 -0
package/src/theme/variants.ts +56 -0
package/src/unistyles.d.ts +108 -0
package/src/unistyles.ts +43 -0

package/src/examples/IconExamples.tsx ADDED Viewed

@@ -0,0 +1,342 @@
+import React from 'react';
+import { Screen, View, Icon, Text, Button } from '../index';
+import type { IconName } from '../Icon/icon-types';
+export const IconExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+        <Text size="large" weight="bold" align="center">
+          Icon Examples
+        </Text>
+        {/* Color Variants */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Color Variants</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home-account" size="md" color="primary" />
+              <Text size="small">Primary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="check" size="md" color="secondary" />
+              <Text size="small">Secondary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="alert-circle" size="md" color="blue" />
+              <Text size="small">Blue</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="alert" size="md" color="green" />
+              <Text size="small">Green</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="cog" size="md" color="red" />
+              <Text size="small">Red</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="text" size="md" color="orange" />
+              <Text size="small">Orange</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="text" size="md" color="disabled" />
+              <Text size="small">Disabled</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="text" size="md" color="muted" />
+              <Text size="small">Muted</Text>
+            </View>
+          </View>
+        </View>
+        {/* Color Shades */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Color Shades</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="star" size="md" color="blue.200" />
+              <Text size="small">Blue 200</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="star" size="md" color="blue.500" />
+              <Text size="small">Blue 500</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="star" size="md" color="blue.800" />
+              <Text size="small">Blue 800</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="md" color="red.300" />
+              <Text size="small">Red 300</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="md" color="red.600" />
+              <Text size="small">Red 600</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="md" color="red.900" />
+              <Text size="small">Red 900</Text>
+            </View>
+          </View>
+        </View>
+        {/* Basic Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Basic Icons</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="home" />
+            <Icon name="cog" />
+            <Icon name="account" />
+            <Icon name="magnify" />
+            <Icon name="heart" />
+            <Icon name="star" />
+            <Icon name="bell" />
+            <Icon name="mail" />
+          </View>
+        </View>
+        {/* Icon Sizes */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Sizes</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home" size="xs" />
+              <Text size="small">XS (12px)</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home" size="sm" />
+              <Text size="small">SM (16px)</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home" size="md" />
+              <Text size="small">MD (24px)</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home" size="lg" />
+              <Text size="small">LG (32px)</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="home" size="xl" />
+              <Text size="small">XL (48px)</Text>
+            </View>
+          </View>
+        </View>
+        {/* Custom Colors vs Variants */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Custom Colors vs Variants</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="lg" style={{ color: '#FF0000' }} />
+              <Text size="small">Custom Red</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="lg" color="red" />
+              <Text size="small">Red Variant</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="lg" style={{ color: '#00FF00' }} />
+              <Text size="small">Custom Green</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="heart" size="lg" color="green" />
+              <Text size="small">Green Variant</Text>
+            </View>
+          </View>
+        </View>
+        {/* Navigation Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Navigation & Movement</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="arrow-left" size="md" />
+            <Icon name="arrow-right" size="md" />
+            <Icon name="arrow-up" size="md" />
+            <Icon name="arrow-down" size="md" />
+            <Icon name="chevron-left" size="md" />
+            <Icon name="chevron-right" size="md" />
+            <Icon name="arrow-left" size="md" />
+            <Icon name="forward" size="md" />
+            <Icon name="compass" size="md" />
+            <Icon name="map-marker" size="md" />
+          </View>
+        </View>
+        {/* Action Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Actions & Controls</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="play" size="md" />
+            <Icon name="pause" size="md" />
+            <Icon name="stop" size="md" />
+            <Icon name="plus" size="md" />
+            <Icon name="minus" size="md" />
+            <Icon name="pencil" size="md" />
+            <Icon name="delete" size="md" />
+            <Icon name="content-save" size="md" />
+            <Icon name="content-copy" size="md" />
+            <Icon name="refresh" size="md" />
+          </View>
+        </View>
+        {/* Communication Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Communication</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="mail" size="md" />
+            <Icon name="message" size="md" />
+            <Icon name="chat" size="md" />
+            <Icon name="phone" size="md" />
+            <Icon name="video" size="md" />
+            <Icon name="bell" size="md" />
+            <Icon name="bell" size="md" />
+            <Icon name="bullhorn" size="md" />
+          </View>
+        </View>
+        {/* Social Media Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Social Media</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="facebook" size="md" />
+            <Icon name="twitter" size="md" />
+            <Icon name="instagram" size="md" />
+            <Icon name="linkedin" size="md" />
+            <Icon name="youtube" size="md" />
+            <Icon name="github" size="md" />
+            <Icon name="github" size="md" />
+            <Icon name="slack" size="md" />
+          </View>
+        </View>
+        {/* Status & Alert Icons with Variants */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Status & Alerts (Using Variants)</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="check-circle" size="md" color="green" />
+              <Text size="small">Success</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="alert" size="md" color="orange" />
+              <Text size="small">Warning</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="alert-circle" size="md" color="red" />
+              <Text size="small">Error</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="information" size="md" color="blue" />
+              <Text size="small">Info</Text>
+            </View>
+          </View>
+        </View>
+        {/* File & Document Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Files & Documents</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="file-document" size="md" />
+            <Icon name="folder" size="md" />
+            <Icon name="file-document" size="md" />
+            <Icon name="file-pdf-box" size="md" />
+            <Icon name="file-word" size="md" />
+            <Icon name="file-excel" size="md" />
+            <Icon name="zip-box" size="md" />
+            <Icon name="attachment" size="md" />
+          </View>
+        </View>
+        {/* Media Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Media & Content</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="image" size="md" />
+            <Icon name="camera" size="md" />
+            <Icon name="video" size="md" />
+            <Icon name="music" size="md" />
+            <Icon name="headphones" size="md" />
+            <Icon name="microphone" size="md" />
+            <Icon name="television" size="md" />
+            <Icon name="monitor" size="md" />
+          </View>
+        </View>
+        {/* Technology Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Technology & Devices</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="cellphone" size="md" />
+            <Icon name="laptop" size="md" />
+            <Icon name="monitor" size="md" />
+            <Icon name="tablet" size="md" />
+            <Icon name="wifi" size="md" />
+            <Icon name="bluetooth" size="md" />
+            <Icon name="battery" size="md" />
+            <Icon name="usb" size="md" />
+          </View>
+        </View>
+        {/* Weather Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Weather</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="weather-sunny" size="md" />
+            <Icon name="weather-night" size="md" />
+            <Icon name="cloud" size="md" />
+            <Icon name="weather-rainy" size="md" />
+            <Icon name="weather-snowy" size="md" />
+            <Icon name="weather-lightning" size="md" />
+            <Icon name="weather-windy" size="md" />
+            <Icon name="umbrella" size="md" />
+          </View>
+        </View>
+        {/* Gaming & Entertainment Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Gaming & Entertainment</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="gamepad" size="md" />
+            <Icon name="trophy" size="md" />
+            <Icon name="medal" size="md" />
+            <Icon name="target" size="md" />
+            <Icon name="rocket" size="md" />
+            <Icon name="crown" size="md" />
+            <Icon name="diamond" size="md" />
+            <Icon name="dice-6" size="md" />
+          </View>
+        </View>
+        {/* Business & Work Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Business & Work</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="briefcase" size="md" />
+            <Icon name="presentation" size="md" />
+            <Icon name="chart-line" size="md" />
+            <Icon name="chart-bar" size="md" />
+            <Icon name="view-dashboard" size="md" />
+            <Icon name="table-large" size="md" />
+            <Icon name="file-document" size="md" />
+            <Icon name="stamper" size="md" />
+          </View>
+        </View>
+        {/* Tool Icons */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Tools & Utilities</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Icon name="tools" size="md" />
+            <Icon name="hammer" size="md" />
+            <Icon name="wrench" size="md" />
+            <Icon name="screwdriver" size="md" />
+            <Icon name="cog" size="md" />
+            <Icon name="cog" size="md" />
+            <Icon name="toolbox" size="md" />
+            <Icon name="hammer-wrench" size="md" />
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/InputExamples.tsx ADDED Viewed

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Input } from '../index';
+export const InputExamples = () => {
+  const [textValue, setTextValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [passwordValue, setPasswordValue] = useState('');
+  const [numberValue, setNumberValue] = useState('');
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Input Examples
+      </Text>
+      {/* Input Types */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Input Types</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            value={textValue}
+            onChangeText={setTextValue}
+            placeholder="Text input"
+            inputType="text"
+          />
+          <Input
+            value={emailValue}
+            onChangeText={setEmailValue}
+            placeholder="Email input"
+            inputType="email"
+          />
+          <Input
+            value={passwordValue}
+            onChangeText={setPasswordValue}
+            placeholder="Password input"
+            inputType="password"
+            secureTextEntry
+          />
+          <Input
+            value={numberValue}
+            onChangeText={setNumberValue}
+            placeholder="Number input"
+            inputType="number"
+          />
+        </View>
+      </View>
+      {/* Input Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Small input"
+            size="small"
+          />
+          <Input
+            placeholder="Medium input"
+            size="medium"
+          />
+          <Input
+            placeholder="Large input"
+            size="large"
+          />
+        </View>
+      </View>
+      {/* Input Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Default variant"
+            variant="default"
+          />
+          <Input
+            placeholder="Outlined variant"
+            variant="outlined"
+          />
+          <Input
+            placeholder="Filled variant"
+            variant="filled"
+          />
+        </View>
+      </View>
+      {/* Input States */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">States</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Normal state"
+          />
+          <Input
+            placeholder="Disabled state"
+            disabled
+          />
+          <Input
+            placeholder="Error state"
+            hasError
+          />
+          <Input
+            value="Pre-filled value"
+            onChangeText={() => {}}
+          />
+        </View>
+      </View>
+      {/* Auto-capitalization Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Auto-capitalization</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="No capitalization"
+            autoCapitalize="none"
+          />
+          <Input
+            placeholder="Sentences capitalization"
+            autoCapitalize="sentences"
+          />
+          <Input
+            placeholder="Words capitalization"
+            autoCapitalize="words"
+          />
+          <Input
+            placeholder="Characters capitalization"
+            autoCapitalize="characters"
+          />
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};

package/src/examples/README.md ADDED Viewed

@@ -0,0 +1,136 @@
+# Component Examples
+This directory contains comprehensive examples showcasing all components from the Idealyst component library. Each example demonstrates the various props, variants, and use cases for each component.
+## Available Examples
+### Individual Component Examples
+- **ButtonExamples**: Demonstrates all button variants, sizes, intents, and states
+- **TextExamples**: Shows text sizes, weights, colors, and alignment options
+- **ViewExamples**: Displays layout capabilities with spacing, backgrounds, and borders
+- **InputExamples**: Covers input types, sizes, variants, and states
+- **CardExamples**: Showcases card layouts, variants, intents, and interactive features
+- **CheckboxExamples**: Demonstrates checkbox states, sizes, intents, and custom content
+- **DividerExamples**: Shows divider orientations, variants, and styling options
+- **BadgeExamples**: Displays badge variants, intents, and use cases
+- **AvatarExamples**: Demonstrates avatar sizes, shapes, and fallback options
+### Master Example
+- **AllExamples**: A comprehensive showcase of all components in one scrollable view
+## Usage
+### Import Individual Examples
+```typescript
+import { ButtonExamples, TextExamples, CardExamples } from '@idealyst/components/examples';
+// Use in your component
+<ButtonExamples />
+```
+### Import All Examples
+```typescript
+import { AllExamples } from '@idealyst/components/examples';
+// Display all examples at once
+<AllExamples />
+```
+## Example Structure
+Each example component follows this structure:
+- **Header**: Component name and description
+- **Grouped Sections**: Related variants and properties
+- **Interactive Elements**: Demonstrating user interactions
+- **Edge Cases**: Disabled states, error states, etc.
+- **Real-world Usage**: Practical implementation examples
+## Features Demonstrated
+### Button Examples
+- Variants: contained, outlined, text
+- Sizes: small, medium, large
+- Intents: primary, neutral, success, error, warning
+- States: normal, disabled
+### Text Examples
+- Sizes: small, medium, large, xlarge
+- Weights: light, normal, medium, semibold, bold
+- Colors: primary, secondary, success, warning, error
+- Alignment: left, center, right
+### View Examples
+- Spacing: none, xs, sm, md, lg, xl
+- Backgrounds: transparent, surface, primary, secondary
+- Border radius: none, xs, sm, md, lg, xl
+- Borders: none, thin, thick
+- Layout patterns: flex layouts, positioning
+### Input Examples
+- Types: text, email, password, number
+- Sizes: small, medium, large
+- Variants: default, outlined, filled
+- States: normal, disabled, error, pre-filled
+- Auto-capitalization: none, sentences, words, characters
+### Card Examples
+- Variants: default, outlined, elevated, filled
+- Intents: neutral, primary, success, error, warning, info
+- Padding: none, small, medium, large
+- Radius: none, small, medium, large
+- Interactive: clickable, disabled states
+- Complex layouts: multi-element cards
+### Checkbox Examples
+- Basic states: checked, unchecked, indeterminate
+- Sizes: small, medium, large
+- Intents: primary, neutral, success, error, warning, info
+- Variants: default, outlined
+- States: normal, disabled
+- Custom content: complex labels, helper text, errors
+### Divider Examples
+- Orientations: horizontal, vertical
+- Variants: solid, dashed, dotted
+- Thickness: thin, medium, thick
+- Intents: primary, secondary, neutral, success, error, warning, info
+- Spacing: none, small, medium, large
+- With content: text labels, sections
+### Badge Examples
+- Variants: filled, outlined, dot
+- Sizes: small, medium, large
+- Intents: primary, success, error, warning, neutral, info
+- Use cases: numbers, status, categories, notifications
+### Avatar Examples
+- Sizes: small, medium, large, xlarge
+- Shapes: circle, square
+- Fallbacks: initials, placeholder text
+- Images: with proper fallbacks
+- Groups: overlapping avatars
+## Best Practices
+1. **Interactive Testing**: All examples include interactive elements to test functionality
+2. **Accessibility**: Examples demonstrate proper labeling and accessibility features
+3. **Responsive Design**: Components adapt to different screen sizes
+4. **Theme Integration**: All examples use the theme system properly
+5. **Real-world Context**: Examples show practical usage scenarios
+## Development Notes
+- Examples are built using the same components they demonstrate
+- All examples use TypeScript for type safety
+- Components follow the established design system patterns
+- Examples are optimized for both web and native platforms
+## Contributing
+When adding new components:
+1. Create a new example file: `ComponentNameExamples.tsx`
+2. Follow the established pattern of grouped sections
+3. Include all variants, sizes, and states
+4. Add interactive elements where applicable
+5. Export the component in `index.ts`
+6. Update the `AllExamples` component to include the new example