npm - @idealyst/components - Versions diffs - 1.0.23 → 1.0.25 - Mend

@idealyst/components 1.0.23 → 1.0.25

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 (110) hide show

package/README.md +567 -567
package/package.json +2 -6
package/plugin/web.js +319 -185
package/src/Avatar/Avatar.native.tsx +43 -43
package/src/Avatar/Avatar.styles.tsx +66 -66
package/src/Avatar/Avatar.web.tsx +50 -50
package/src/Avatar/index.native.ts +1 -1
package/src/Avatar/index.ts +1 -1
package/src/Avatar/index.web.ts +1 -1
package/src/Avatar/types.ts +42 -42
package/src/Badge/Badge.native.tsx +42 -42
package/src/Badge/Badge.styles.tsx +153 -153
package/src/Badge/Badge.web.tsx +44 -44
package/src/Badge/index.native.ts +1 -1
package/src/Badge/index.ts +1 -1
package/src/Badge/index.web.ts +1 -1
package/src/Badge/types.ts +33 -33
package/src/Button/Button.native.tsx +38 -38
package/src/Button/Button.styles.tsx +214 -214
package/src/Button/Button.types.ts +11 -11
package/src/Button/Button.web.tsx +55 -55
package/src/Button/index.native.ts +2 -2
package/src/Button/index.ts +4 -4
package/src/Button/index.web.ts +2 -2
package/src/Button/types.ts +48 -48
package/src/Card/Card.native.tsx +51 -51
package/src/Card/Card.styles.tsx +239 -239
package/src/Card/Card.web.tsx +61 -61
package/src/Card/index.native.ts +2 -2
package/src/Card/index.ts +4 -4
package/src/Card/index.web.ts +2 -2
package/src/Card/types.ts +58 -58
package/src/Checkbox/Checkbox.native.tsx +98 -98
package/src/Checkbox/Checkbox.styles.tsx +291 -291
package/src/Checkbox/Checkbox.web.tsx +130 -130
package/src/Checkbox/index.native.ts +2 -2
package/src/Checkbox/index.ts +4 -4
package/src/Checkbox/index.web.ts +2 -2
package/src/Checkbox/types.ts +78 -78
package/src/Divider/Divider.native.tsx +144 -144
package/src/Divider/Divider.styles.tsx +601 -601
package/src/Divider/Divider.web.tsx +72 -72
package/src/Divider/index.native.ts +2 -2
package/src/Divider/index.ts +4 -4
package/src/Divider/index.web.ts +2 -2
package/src/Divider/types.ts +53 -53
package/src/Icon/Icon.native.tsx +38 -38
package/src/Icon/Icon.styles.tsx +49 -49
package/src/Icon/Icon.web.tsx +46 -46
package/src/Icon/icon-types.ts +7452 -7452
package/src/Icon/index.native.ts +2 -2
package/src/Icon/index.ts +4 -4
package/src/Icon/index.web.ts +2 -2
package/src/Icon/types.ts +35 -35
package/src/Input/Input.native.tsx +74 -74
package/src/Input/Input.styles.tsx +176 -176
package/src/Input/Input.web.tsx +70 -70
package/src/Input/index.native.ts +2 -2
package/src/Input/index.ts +4 -4
package/src/Input/index.web.ts +2 -2
package/src/Input/types.ts +68 -68
package/src/Screen/Screen.native.tsx +40 -40
package/src/Screen/Screen.styles.tsx +59 -59
package/src/Screen/Screen.web.tsx +32 -32
package/src/Screen/index.native.ts +1 -1
package/src/Screen/index.ts +1 -1
package/src/Screen/index.web.ts +1 -1
package/src/Screen/types.ts +37 -37
package/src/Text/Text.native.tsx +35 -35
package/src/Text/Text.styles.tsx +66 -66
package/src/Text/Text.web.tsx +40 -40
package/src/Text/index.native.ts +2 -2
package/src/Text/index.ts +4 -4
package/src/Text/index.web.ts +2 -2
package/src/Text/types.ts +38 -38
package/src/View/View.native.tsx +55 -55
package/src/View/View.styles.tsx +102 -102
package/src/View/View.web.tsx +59 -59
package/src/View/index.native.ts +2 -2
package/src/View/index.ts +4 -4
package/src/View/index.web.ts +2 -2
package/src/View/types.ts +72 -72
package/src/examples/AllExamples.tsx +71 -71
package/src/examples/AvatarExamples.tsx +96 -96
package/src/examples/BadgeExamples.tsx +199 -199
package/src/examples/ButtonExamples.tsx +149 -149
package/src/examples/CardExamples.tsx +175 -175
package/src/examples/CheckboxExamples.tsx +216 -216
package/src/examples/DividerExamples.tsx +217 -217
package/src/examples/IconExamples.tsx +341 -341
package/src/examples/InputExamples.tsx +133 -133
package/src/examples/README.md +135 -135
package/src/examples/ScreenExamples.tsx +153 -153
package/src/examples/TextExamples.tsx +88 -88
package/src/examples/ThemeExtensionExamples.tsx +90 -90
package/src/examples/ValidationExamples.tsx +94 -94
package/src/examples/ViewExamples.tsx +128 -128
package/src/examples/extendedTheme.ts +328 -328
package/src/examples/index.ts +14 -14
package/src/index.native.ts +48 -48
package/src/index.ts +47 -47
package/src/theme/breakpoints.ts +8 -8
package/src/theme/colorResolver.ts +217 -217
package/src/theme/colors.ts +314 -314
package/src/theme/defaultThemes.ts +325 -325
package/src/theme/index.ts +187 -187
package/src/theme/themeBuilder.ts +601 -601
package/src/theme/unistyles.d.ts +5 -5
package/src/theme/variantHelpers.ts +583 -583
package/src/theme/variants.ts +55 -55

package/src/examples/IconExamples.tsx CHANGED Viewed

@@ -1,342 +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>
-  );
+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>
+  );
 };