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

@idealyst/components 1.0.24 → 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 -2
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/AvatarExamples.tsx CHANGED Viewed

@@ -1,97 +1,97 @@
-import React from 'react';
-import { Screen, View, Text, Avatar } from '../index';
-export const AvatarExamples = () => {
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Avatar Examples
-      </Text>
-      {/* Avatar Sizes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Avatar size="small" fallback="S" />
-          <Avatar size="medium" fallback="M" />
-          <Avatar size="large" fallback="L" />
-          <Avatar size="xlarge" fallback="XL" />
-        </View>
-      </View>
-      {/* Avatar Shapes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Shapes</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Avatar shape="circle" fallback="C" size="large" />
-          <Avatar shape="square" fallback="S" size="large" />
-        </View>
-      </View>
-      {/* Avatar with Fallbacks */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Fallback Text</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Avatar fallback="JD" alt="John Doe" />
-          <Avatar fallback="AB" alt="Alice Brown" />
-          <Avatar fallback="MJ" alt="Michael Johnson" />
-          <Avatar fallback="LW" alt="Lisa Wilson" />
-        </View>
-      </View>
-      {/* Avatar with Images */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">With Images</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Avatar
-            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
-            alt="Profile 1"
-            fallback="P1"
-          />
-          <Avatar
-            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
-            alt="Profile 2"
-            fallback="P2"
-          />
-          <Avatar
-            src="https://images.unsplash.com/photo-1494790108755-2616b9b5a24f?w=150&h=150&fit=crop&crop=face"
-            alt="Profile 3"
-            fallback="P3"
-          />
-        </View>
-      </View>
-      {/* Avatar Group */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Avatar Group</Text>
-        <View style={{ flexDirection: 'row', gap: -8, alignItems: 'center' }}>
-          <Avatar fallback="JD" size="medium" />
-          <Avatar fallback="AB" size="medium" />
-          <Avatar fallback="MJ" size="medium" />
-          <Avatar fallback="+3" size="medium" />
-        </View>
-      </View>
-      {/* Different Size Combinations */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Size Combinations</Text>
-        <View spacing="sm">
-          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="small" fallback="S" />
-            <Text size="small">Small avatar with text</Text>
-          </View>
-          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="medium" fallback="M" />
-            <Text size="medium">Medium avatar with text</Text>
-          </View>
-          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-            <Avatar size="large" fallback="L" />
-            <Text size="large">Large avatar with text</Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text, Avatar } from '../index';
+export const AvatarExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Avatar Examples
+      </Text>
+      {/* Avatar Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar size="small" fallback="S" />
+          <Avatar size="medium" fallback="M" />
+          <Avatar size="large" fallback="L" />
+          <Avatar size="xlarge" fallback="XL" />
+        </View>
+      </View>
+      {/* Avatar Shapes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Shapes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar shape="circle" fallback="C" size="large" />
+          <Avatar shape="square" fallback="S" size="large" />
+        </View>
+      </View>
+      {/* Avatar with Fallbacks */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Fallback Text</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar fallback="JD" alt="John Doe" />
+          <Avatar fallback="AB" alt="Alice Brown" />
+          <Avatar fallback="MJ" alt="Michael Johnson" />
+          <Avatar fallback="LW" alt="Lisa Wilson" />
+        </View>
+      </View>
+      {/* Avatar with Images */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Images</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Avatar
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 1"
+            fallback="P1"
+          />
+          <Avatar
+            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 2"
+            fallback="P2"
+          />
+          <Avatar
+            src="https://images.unsplash.com/photo-1494790108755-2616b9b5a24f?w=150&h=150&fit=crop&crop=face"
+            alt="Profile 3"
+            fallback="P3"
+          />
+        </View>
+      </View>
+      {/* Avatar Group */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Avatar Group</Text>
+        <View style={{ flexDirection: 'row', gap: -8, alignItems: 'center' }}>
+          <Avatar fallback="JD" size="medium" />
+          <Avatar fallback="AB" size="medium" />
+          <Avatar fallback="MJ" size="medium" />
+          <Avatar fallback="+3" size="medium" />
+        </View>
+      </View>
+      {/* Different Size Combinations */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Size Combinations</Text>
+        <View spacing="sm">
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="small" fallback="S" />
+            <Text size="small">Small avatar with text</Text>
+          </View>
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="medium" fallback="M" />
+            <Text size="medium">Medium avatar with text</Text>
+          </View>
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Avatar size="large" fallback="L" />
+            <Text size="large">Large avatar with text</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 };

package/src/examples/BadgeExamples.tsx CHANGED Viewed

@@ -1,200 +1,200 @@
-import React from 'react';
-import { Screen, View, Text, Badge, Button } from '../index';
-export const BadgeExamples = () => {
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Badge Examples
-      </Text>
-      {/* Badge Variants */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge variant="filled" color="blue">
-            Filled
-          </Badge>
-          <Badge variant="outlined" color="blue">
-            Outlined
-          </Badge>
-          <Badge variant="dot" color="blue" />
-        </View>
-      </View>
-      {/* Badge Sizes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge size="small" color="blue">
-            Small
-          </Badge>
-          <Badge size="medium" color="blue">
-            Medium
-          </Badge>
-          <Badge size="large" color="blue">
-            Large
-          </Badge>
-        </View>
-      </View>
-      {/* Badge Colors */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Colors</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="blue">
-            Blue
-          </Badge>
-          <Badge color="green">
-            Green
-          </Badge>
-          <Badge color="red">
-            Red
-          </Badge>
-          <Badge color="orange">
-            Orange
-          </Badge>
-          <Badge color="gray">
-            Gray
-          </Badge>
-          <Badge color="purple">
-            Purple
-          </Badge>
-        </View>
-      </View>
-      {/* Badge Color Shades */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Color Shades</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="blue.200">
-            Blue 200
-          </Badge>
-          <Badge color="blue.500">
-            Blue 500
-          </Badge>
-          <Badge color="blue.800">
-            Blue 800
-          </Badge>
-        </View>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="green.100">
-            Green 100
-          </Badge>
-          <Badge color="green.600">
-            Green 600
-          </Badge>
-          <Badge color="green.900">
-            Green 900
-          </Badge>
-        </View>
-      </View>
-      {/* Dot Badges */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Dot Badges</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge variant="dot" color="blue" size="small" />
-          <Badge variant="dot" color="green" size="medium" />
-          <Badge variant="dot" color="red" size="large" />
-          <Badge variant="dot" color="orange" size="medium" />
-          <Badge variant="dot" color="gray" size="medium" />
-        </View>
-      </View>
-      {/* Number Badges */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Number Badges</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="red" size="small">
-            1
-          </Badge>
-          <Badge color="red" size="medium">
-            5
-          </Badge>
-          <Badge color="red" size="large">
-            99+
-          </Badge>
-          <Badge color="blue" size="medium">
-            42
-          </Badge>
-        </View>
-      </View>
-      {/* Status Badges */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Status Badges</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Badge color="green" variant="filled">
-            ACTIVE
-          </Badge>
-          <Badge color="orange" variant="filled">
-            PENDING
-          </Badge>
-          <Badge color="red" variant="filled">
-            INACTIVE
-          </Badge>
-          <Badge color="gray" variant="outlined">
-            DRAFT
-          </Badge>
-          <Badge color="blue" variant="outlined">
-            REVIEW
-          </Badge>
-        </View>
-      </View>
-      {/* Combined with Other Components */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">With Other Components</Text>
-        <View spacing="sm">
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text>Notifications</Text>
-            <Badge color="red" size="small">3</Badge>
-          </View>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text>Messages</Text>
-            <Badge color="blue" size="small">12</Badge>
-          </View>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text>Status</Text>
-            <Badge color="green" variant="dot" />
-            <Text size="small" color="secondary">Online</Text>
-          </View>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Button size="small" variant="outlined">
-              Inbox
-            </Button>
-            <Badge color="red" size="small">99+</Badge>
-          </View>
-        </View>
-      </View>
-      {/* Category Badges */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Category Badges</Text>
-        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <Badge color="blue" variant="outlined">
-            React
-          </Badge>
-          <Badge color="green" variant="outlined">
-            TypeScript
-          </Badge>
-          <Badge color="yellow" variant="outlined">
-            JavaScript
-          </Badge>
-          <Badge color="orange" variant="outlined">
-            CSS
-          </Badge>
-          <Badge color="gray" variant="outlined">
-            HTML
-          </Badge>
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text, Badge, Button } from '../index';
+export const BadgeExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Badge Examples
+      </Text>
+      {/* Badge Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge variant="filled" color="blue">
+            Filled
+          </Badge>
+          <Badge variant="outlined" color="blue">
+            Outlined
+          </Badge>
+          <Badge variant="dot" color="blue" />
+        </View>
+      </View>
+      {/* Badge Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge size="small" color="blue">
+            Small
+          </Badge>
+          <Badge size="medium" color="blue">
+            Medium
+          </Badge>
+          <Badge size="large" color="blue">
+            Large
+          </Badge>
+        </View>
+      </View>
+      {/* Badge Colors */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Colors</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue">
+            Blue
+          </Badge>
+          <Badge color="green">
+            Green
+          </Badge>
+          <Badge color="red">
+            Red
+          </Badge>
+          <Badge color="orange">
+            Orange
+          </Badge>
+          <Badge color="gray">
+            Gray
+          </Badge>
+          <Badge color="purple">
+            Purple
+          </Badge>
+        </View>
+      </View>
+      {/* Badge Color Shades */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Shades</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="blue.200">
+            Blue 200
+          </Badge>
+          <Badge color="blue.500">
+            Blue 500
+          </Badge>
+          <Badge color="blue.800">
+            Blue 800
+          </Badge>
+        </View>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="green.100">
+            Green 100
+          </Badge>
+          <Badge color="green.600">
+            Green 600
+          </Badge>
+          <Badge color="green.900">
+            Green 900
+          </Badge>
+        </View>
+      </View>
+      {/* Dot Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Dot Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge variant="dot" color="blue" size="small" />
+          <Badge variant="dot" color="green" size="medium" />
+          <Badge variant="dot" color="red" size="large" />
+          <Badge variant="dot" color="orange" size="medium" />
+          <Badge variant="dot" color="gray" size="medium" />
+        </View>
+      </View>
+      {/* Number Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Number Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="red" size="small">
+            1
+          </Badge>
+          <Badge color="red" size="medium">
+            5
+          </Badge>
+          <Badge color="red" size="large">
+            99+
+          </Badge>
+          <Badge color="blue" size="medium">
+            42
+          </Badge>
+        </View>
+      </View>
+      {/* Status Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Status Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Badge color="green" variant="filled">
+            ACTIVE
+          </Badge>
+          <Badge color="orange" variant="filled">
+            PENDING
+          </Badge>
+          <Badge color="red" variant="filled">
+            INACTIVE
+          </Badge>
+          <Badge color="gray" variant="outlined">
+            DRAFT
+          </Badge>
+          <Badge color="blue" variant="outlined">
+            REVIEW
+          </Badge>
+        </View>
+      </View>
+      {/* Combined with Other Components */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Other Components</Text>
+        <View spacing="sm">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Notifications</Text>
+            <Badge color="red" size="small">3</Badge>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Messages</Text>
+            <Badge color="blue" size="small">12</Badge>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Status</Text>
+            <Badge color="green" variant="dot" />
+            <Text size="small" color="secondary">Online</Text>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Button size="small" variant="outlined">
+              Inbox
+            </Button>
+            <Badge color="red" size="small">99+</Badge>
+          </View>
+        </View>
+      </View>
+      {/* Category Badges */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Category Badges</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          <Badge color="blue" variant="outlined">
+            React
+          </Badge>
+          <Badge color="green" variant="outlined">
+            TypeScript
+          </Badge>
+          <Badge color="yellow" variant="outlined">
+            JavaScript
+          </Badge>
+          <Badge color="orange" variant="outlined">
+            CSS
+          </Badge>
+          <Badge color="gray" variant="outlined">
+            HTML
+          </Badge>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 };