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

@idealyst/components 1.0.24 → 1.0.26

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/ScreenExamples.tsx CHANGED Viewed

@@ -1,154 +1,154 @@
-import React from 'react';
-import { Screen, View, Text } from '../index';
-export const ScreenExamples = () => {
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="lg">
-        <Text size="large" weight="bold" align="center">
-          Screen Examples
-        </Text>
-        {/* Background Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">Background Variants</Text>
-          <Text size="small" color="secondary">
-            Each Screen should have a different background color
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="primary" padding="sm">
-                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Primary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="secondary" padding="sm">
-                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Secondary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="tertiary" padding="sm">
-                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Tertiary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="inverse" padding="sm">
-                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold" color="primary">Inverse</Text>
-                  <Text size="small" color="secondary">Surface</Text>
-                </View>
-              </Screen>
-            </View>
-          </View>
-        </View>
-        {/* Padding Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">Padding Variants</Text>
-          <Text size="small" color="secondary">
-            Different padding options for Screen content
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="secondary" padding="none">
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">None</Text>
-                  <Text size="small" color="secondary">No padding</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="secondary" padding="sm">
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Small</Text>
-                  <Text size="small" color="secondary">8px</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="secondary" padding="md">
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Medium</Text>
-                  <Text size="small" color="secondary">16px</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="secondary" padding="lg">
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Large</Text>
-                  <Text size="small" color="secondary">24px</Text>
-                </View>
-              </Screen>
-            </View>
-          </View>
-        </View>
-        {/* Safe Area Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">Safe Area</Text>
-          <Text size="small" color="secondary">
-            Safe area padding for mobile devices
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="tertiary" padding="sm" safeArea={false}>
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
-                  <Text size="small" weight="bold">No Safe Area</Text>
-                  <Text size="small" color="secondary">Standard</Text>
-                </View>
-              </Screen>
-            </View>
-            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
-              <Screen background="tertiary" padding="sm" safeArea={true}>
-                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
-                  <Text size="small" weight="bold">Safe Area</Text>
-                  <Text size="small" color="secondary">Mobile</Text>
-                </View>
-              </Screen>
-            </View>
-          </View>
-        </View>
-        {/* Usage Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">Common Usage</Text>
-          <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
-            <Screen background="primary" padding="lg">
-              <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                <Text size="large" weight="bold" align="center">
-                  App Screen Layout
-                </Text>
-                <Text size="medium" color="secondary" align="center">
-                  Primary background with large padding
-                </Text>
-                <Text size="small" color="secondary" align="center">
-                  Perfect for main app screens
-                </Text>
-              </View>
-            </Screen>
-          </View>
-        </View>
-      </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text } from '../index';
+export const ScreenExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <Text size="large" weight="bold" align="center">
+          Screen Examples
+        </Text>
+        {/* Background Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Background Variants</Text>
+          <Text size="small" color="secondary">
+            Each Screen should have a different background color
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="primary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Primary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Secondary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold">Tertiary</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="inverse" padding="sm">
+                <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                  <Text size="small" weight="bold" color="primary">Inverse</Text>
+                  <Text size="small" color="secondary">Surface</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+        {/* Padding Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Padding Variants</Text>
+          <Text size="small" color="secondary">
+            Different padding options for Screen content
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="none">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">None</Text>
+                  <Text size="small" color="secondary">No padding</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="sm">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Small</Text>
+                  <Text size="small" color="secondary">8px</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="md">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Medium</Text>
+                  <Text size="small" color="secondary">16px</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="secondary" padding="lg">
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
+                  <Text size="small" weight="bold">Large</Text>
+                  <Text size="small" color="secondary">24px</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+        {/* Safe Area Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Safe Area</Text>
+          <Text size="small" color="secondary">
+            Safe area padding for mobile devices
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm" safeArea={false}>
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
+                  <Text size="small" weight="bold">No Safe Area</Text>
+                  <Text size="small" color="secondary">Standard</Text>
+                </View>
+              </Screen>
+            </View>
+            <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
+              <Screen background="tertiary" padding="sm" safeArea={true}>
+                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
+                  <Text size="small" weight="bold">Safe Area</Text>
+                  <Text size="small" color="secondary">Mobile</Text>
+                </View>
+              </Screen>
+            </View>
+          </View>
+        </View>
+        {/* Usage Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Common Usage</Text>
+          <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
+            <Screen background="primary" padding="lg">
+              <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                <Text size="large" weight="bold" align="center">
+                  App Screen Layout
+                </Text>
+                <Text size="medium" color="secondary" align="center">
+                  Primary background with large padding
+                </Text>
+                <Text size="small" color="secondary" align="center">
+                  Perfect for main app screens
+                </Text>
+              </View>
+            </Screen>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
 };

package/src/examples/TextExamples.tsx CHANGED Viewed

@@ -1,89 +1,89 @@
-import React from 'react';
-import { Screen, View, Text } from '../index';
-export const TextExamples = () => {
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Text Examples
-      </Text>
-      {/* Text Sizes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="small">Small text - Lorem ipsum dolor sit amet</Text>
-          <Text size="medium">Medium text - Lorem ipsum dolor sit amet</Text>
-          <Text size="large">Large text - Lorem ipsum dolor sit amet</Text>
-          <Text size="xlarge">Extra large text - Lorem ipsum dolor sit amet</Text>
-        </View>
-      </View>
-      {/* Text Weights */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Weights</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text weight="light">Light weight text</Text>
-          <Text weight="normal">Normal weight text</Text>
-          <Text weight="medium">Medium weight text</Text>
-          <Text weight="semibold">Semibold weight text</Text>
-          <Text weight="bold">Bold weight text</Text>
-        </View>
-      </View>
-      {/* Text Colors */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Color Variants</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="primary">Primary color text</Text>
-          <Text color="secondary">Secondary color text</Text>
-          <Text color="blue">Blue color text</Text>
-          <Text color="green">Green color text</Text>
-          <Text color="red">Red color text</Text>
-          <Text color="orange">Orange color text</Text>
-        </View>
-      </View>
-      {/* Text Color Shades */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Color Shades</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="blue.300">Blue 300 text</Text>
-          <Text color="blue.500">Blue 500 text</Text>
-          <Text color="blue.700">Blue 700 text</Text>
-          <Text color="red.200">Red 200 text</Text>
-          <Text color="red.600">Red 600 text</Text>
-          <Text color="red.900">Red 900 text</Text>
-        </View>
-      </View>
-      {/* Text Alignment */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Alignment</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text align="left">Left aligned text</Text>
-          <Text align="center">Center aligned text</Text>
-          <Text align="right">Right aligned text</Text>
-        </View>
-      </View>
-      {/* Combined Examples */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Combined Examples</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="large" weight="bold" color="primary" align="center">
-            Large Bold Primary Centered
-          </Text>
-          <Text size="small" weight="light" color="secondary" align="right">
-            Small Light Secondary Right
-          </Text>
-          <Text size="medium" weight="semibold" color="green">
-            Medium Semibold Green
-          </Text>
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text } from '../index';
+export const TextExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Text Examples
+      </Text>
+      {/* Text Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text size="small">Small text - Lorem ipsum dolor sit amet</Text>
+          <Text size="medium">Medium text - Lorem ipsum dolor sit amet</Text>
+          <Text size="large">Large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="xlarge">Extra large text - Lorem ipsum dolor sit amet</Text>
+        </View>
+      </View>
+      {/* Text Weights */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Weights</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text weight="light">Light weight text</Text>
+          <Text weight="normal">Normal weight text</Text>
+          <Text weight="medium">Medium weight text</Text>
+          <Text weight="semibold">Semibold weight text</Text>
+          <Text weight="bold">Bold weight text</Text>
+        </View>
+      </View>
+      {/* Text Colors */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text color="primary">Primary color text</Text>
+          <Text color="secondary">Secondary color text</Text>
+          <Text color="blue">Blue color text</Text>
+          <Text color="green">Green color text</Text>
+          <Text color="red">Red color text</Text>
+          <Text color="orange">Orange color text</Text>
+        </View>
+      </View>
+      {/* Text Color Shades */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Color Shades</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text color="blue.300">Blue 300 text</Text>
+          <Text color="blue.500">Blue 500 text</Text>
+          <Text color="blue.700">Blue 700 text</Text>
+          <Text color="red.200">Red 200 text</Text>
+          <Text color="red.600">Red 600 text</Text>
+          <Text color="red.900">Red 900 text</Text>
+        </View>
+      </View>
+      {/* Text Alignment */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Alignment</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text align="left">Left aligned text</Text>
+          <Text align="center">Center aligned text</Text>
+          <Text align="right">Right aligned text</Text>
+        </View>
+      </View>
+      {/* Combined Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Combined Examples</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Text size="large" weight="bold" color="primary" align="center">
+            Large Bold Primary Centered
+          </Text>
+          <Text size="small" weight="light" color="secondary" align="right">
+            Small Light Secondary Right
+          </Text>
+          <Text size="medium" weight="semibold" color="green">
+            Medium Semibold Green
+          </Text>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 };