@fadyshawky/react-native-magic 2.2.1 → 2.3.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 (138) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +90 -56
  3. package/index.js +4 -0
  4. package/package.json +8 -2
  5. package/scripts/askPackageName.js +10 -5
  6. package/template/.env.development +8 -6
  7. package/template/.env.example +15 -5
  8. package/template/.env.production +8 -6
  9. package/template/.env.staging +8 -6
  10. package/template/.eslintrc.js +14 -0
  11. package/template/.husky/pre-commit +1 -0
  12. package/template/App.tsx +47 -16
  13. package/template/__tests__/App.test.tsx +28 -10
  14. package/template/babel.config.js +20 -1
  15. package/template/docs/ARCHITECTURE.md +40 -10
  16. package/template/docs/BEST_PRACTICES.md +10 -1
  17. package/template/docs/CUSTOMIZATION.md +118 -5
  18. package/template/docs/design-system.html +1164 -0
  19. package/template/docs/wireframes.html +411 -0
  20. package/template/index.js +10 -0
  21. package/template/jest.config.js +16 -1
  22. package/template/jest.setup.js +61 -0
  23. package/template/package-lock.json +12178 -8293
  24. package/template/package.json +53 -20
  25. package/template/react-native.config.js +3 -0
  26. package/template/resources/fonts/.gitkeep +0 -0
  27. package/template/scripts/ci-sync-env.cjs +71 -0
  28. package/template/src/assets/brand/logo-mark.svg +8 -0
  29. package/template/src/assets/brand/logo-mono.svg +9 -0
  30. package/template/src/assets/brand/logo-primary.svg +15 -0
  31. package/template/src/assets/brand/wordmark-dark.svg +18 -0
  32. package/template/src/common/components/AppBottomSheet.tsx +87 -0
  33. package/template/src/common/components/AppSwitch.tsx +75 -0
  34. package/template/src/common/components/AppTextInput.tsx +161 -0
  35. package/template/src/common/components/Avatar.tsx +75 -0
  36. package/template/src/common/components/Badge.tsx +66 -0
  37. package/template/src/common/components/CardScroller.tsx +58 -0
  38. package/template/src/common/components/Cards.tsx +13 -7
  39. package/template/src/common/components/Carousel.tsx +196 -0
  40. package/template/src/common/components/Checkbox.tsx +85 -0
  41. package/template/src/common/components/Chip.tsx +55 -0
  42. package/template/src/common/components/Dropdown.tsx +202 -0
  43. package/template/src/common/components/ErrorBoundary.tsx +82 -0
  44. package/template/src/common/components/FlatListWrapper.tsx +4 -5
  45. package/template/src/common/components/ListItem.tsx +90 -0
  46. package/template/src/common/components/LoadingComponent.tsx +8 -2
  47. package/template/src/common/components/Logo.tsx +77 -0
  48. package/template/src/common/components/ModalDialog.tsx +141 -0
  49. package/template/src/common/components/NetworkBanner.tsx +47 -0
  50. package/template/src/common/components/OTPInput.tsx +0 -1
  51. package/template/src/common/components/PrimaryButton.tsx +0 -14
  52. package/template/src/common/components/PrimaryTextInput.tsx +66 -130
  53. package/template/src/common/components/RadioGroup.tsx +95 -0
  54. package/template/src/common/components/SafeText.tsx +4 -3
  55. package/template/src/common/components/SearchBar.tsx +7 -5
  56. package/template/src/common/components/SegmentedControl.tsx +77 -0
  57. package/template/src/common/components/Skeleton.tsx +47 -0
  58. package/template/src/common/components/TryAgain.tsx +4 -2
  59. package/template/src/common/helpers/arrayHelpers.ts +2 -2
  60. package/template/src/common/helpers/defaultKeyIdExtractor.ts +1 -1
  61. package/template/src/common/helpers/regexHelpers.ts +1 -2
  62. package/template/src/common/helpers/stringsHelpers.ts +0 -1
  63. package/template/src/common/hooks/useBackHandler.ts +5 -2
  64. package/template/src/common/hooks/useEventRegister.ts +1 -1
  65. package/template/src/common/hooks/useFlatListActions.ts +1 -1
  66. package/template/src/common/hooks/useWhyDidYouUpdate.ts +1 -1
  67. package/template/src/common/localization/LocalizationProvider.tsx +1 -1
  68. package/template/src/common/localization/RTLInitializer.tsx +1 -1
  69. package/template/src/common/localization/dateFormatter.ts +0 -1
  70. package/template/src/common/localization/intlFormatter.ts +0 -1
  71. package/template/src/common/localization/localization.ts +2 -2
  72. package/template/src/common/localization/translations/homeLocalization.ts +14 -0
  73. package/template/src/common/localization/translations/loginLocalization.ts +8 -0
  74. package/template/src/common/localization/translations/mainNavigationLocalization.ts +2 -0
  75. package/template/src/common/localization/translations/profileLocalization.ts +16 -0
  76. package/template/src/common/utils/index.tsx +0 -6
  77. package/template/src/common/validations/commonValidations.ts +2 -2
  78. package/template/src/core/api/errorHandler.ts +1 -1
  79. package/template/src/core/api/responseHandlers.ts +1 -3
  80. package/template/src/core/api/serverHeaders.ts +61 -12
  81. package/template/src/core/notifications/notificationAuth.ts +6 -0
  82. package/template/src/core/notifications/notificationService.ts +125 -0
  83. package/template/src/core/notifications/routeFromNotificationData.ts +32 -0
  84. package/template/src/core/store/categories/categoriesActions.ts +25 -0
  85. package/template/src/core/store/categories/categoriesSlice.ts +51 -0
  86. package/template/src/core/store/categories/categoriesState.ts +19 -0
  87. package/template/src/core/store/rootReducer.ts +2 -0
  88. package/template/src/core/store/store.tsx +6 -1
  89. package/template/src/core/store/user/userActions.ts +75 -14
  90. package/template/src/core/store/user/userSlice.ts +49 -26
  91. package/template/src/core/store/user/userState.ts +6 -4
  92. package/template/src/core/theme/ThemeProvider.tsx +5 -3
  93. package/template/src/core/theme/brand.ts +50 -0
  94. package/template/src/core/theme/colors.ts +113 -99
  95. package/template/src/core/theme/commonConsts.ts +2 -2
  96. package/template/src/core/theme/commonStyles.ts +1 -1
  97. package/template/src/core/theme/themes.ts +2 -0
  98. package/template/src/core/theme/types.ts +4 -2
  99. package/template/src/core/utils/stringUtils.ts +1 -1
  100. package/template/src/design-system/index.ts +2 -0
  101. package/template/src/design-system/tokens/brand.ts +6 -0
  102. package/template/src/design-system/tokens/index.ts +3 -0
  103. package/template/src/design-system/tokens/palette.ts +4 -0
  104. package/template/src/design-system/tokens/typography-spacing.ts +2 -0
  105. package/template/src/navigation/AuthStack.tsx +1 -4
  106. package/template/src/navigation/HeaderComponents.tsx +6 -3
  107. package/template/src/navigation/MainStack.tsx +18 -6
  108. package/template/src/navigation/RootNavigation.tsx +4 -7
  109. package/template/src/navigation/TabBar.tsx +7 -6
  110. package/template/src/navigation/types.ts +10 -31
  111. package/template/src/screens/Login/Login.tsx +47 -47
  112. package/template/src/screens/OTP/OTPScreen.tsx +6 -9
  113. package/template/src/screens/components/ComponentsScreen.tsx +301 -0
  114. package/template/src/screens/home/HomeScreen.tsx +143 -1
  115. package/template/src/screens/home/hooks/useHomeData.ts +19 -5
  116. package/template/src/screens/index.tsx +1 -0
  117. package/template/src/screens/profile/Profile.tsx +139 -2
  118. package/template/src/screens/splash/Splash.tsx +44 -11
  119. package/template/src/sheetManager/sheets.tsx +1 -1
  120. package/template/tsconfig.json +14 -2
  121. package/template/types/globals.d.ts +43 -0
  122. package/template/types/index.ts +2 -6
  123. package/template/types/modules.d.ts +9 -0
  124. package/template/types/react-native-config.d.ts +0 -2
  125. package/.vscode/settings.json +0 -8
  126. package/CHANGELOG.md +0 -119
  127. package/CODE_OF_CONDUCT.md +0 -83
  128. package/CONTRIBUTING.md +0 -60
  129. package/local.properties +0 -1
  130. package/template/src/common/components/ImageCropPickerButton.tsx +0 -107
  131. package/template/src/common/components/PhotoTakingButton.tsx +0 -94
  132. package/template/src/common/helpers/imageHelpers.ts +0 -5
  133. package/template/src/common/helpers/inAppReviewHelper.ts +0 -30
  134. package/template/src/common/helpers/orientationHelpers.ts +0 -25
  135. package/template/src/common/helpers/shareHelpers.ts +0 -47
  136. package/template/src/common/utils/FeesCaalculation.tsx +0 -37
  137. package/template/src/common/utils/printData.tsx +0 -161
  138. package/template/src/common/validations/examples/TextInputWithValidation.tsx +0 -229
package/template/docs/design-system.html ADDED
@@ -0,0 +1,1164 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>React Native Magic — Design System</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet" />
10
+ <style>
11
+ :root{
12
+ /* ramp */
13
+ --indigo-50:#EAF1FF; --indigo-100:#B6D0FF; --indigo-200:#6193FF; --indigo-300:#3E7BFF;
14
+ --indigo-400:#2F6BFF; --indigo-500:#2356D6; --indigo-600:#1B45B8; --indigo-700:#143186;
15
+ --cyan:#6193FF; --cyan-soft:#A6C4FF; --violet:#6353F2;
16
+ /* ink */
17
+ --bg:#06080F; --surface:#0D1124; --raised:#1A2142;
18
+ /* neutrals */
19
+ --white:#FFFFFF; --near-white:#F4F6FE; --n-100:#EAEDF7; --n-200:#D7DCEC; --n-300:#D7DCEC;
20
+ --muted:#828BB0; --n-500:#59618A; --n-600:#343C63;
21
+ /* status */
22
+ --success:#0E9C72; --warning:#D98E1E; --error:#DC2A52; --info:#2F6BFF;
23
+ /* effects */
24
+ --grad:linear-gradient(135deg,#1B45B8,#3E7BFF);
25
+ --grad-violet:linear-gradient(135deg,#6353F2,#2F6BFF);
26
+ --glow-indigo:0 8px 18px rgba(47,107,255,.5);
27
+ --glow-cyan:0 8px 18px rgba(97,147,255,.42);
28
+ --hairline:rgba(130,139,176,.12);
29
+ --hairline-strong:rgba(130,139,176,.22);
30
+ --font:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
31
+ }
32
+ *{box-sizing:border-box;}
33
+ html{scroll-behavior:smooth;}
34
+ body{
35
+ margin:0; font-family:var(--font); color:var(--n-200);
36
+ background:
37
+ radial-gradient(1100px 700px at 82% -8%, rgba(97,147,255,.10), transparent 60%),
38
+ radial-gradient(1200px 800px at 6% 0%, rgba(47,107,255,.20), transparent 55%),
39
+ radial-gradient(900px 900px at 50% 120%, rgba(99,83,242,.10), transparent 60%),
40
+ var(--bg);
41
+ background-attachment:fixed;
42
+ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
43
+ line-height:1.5;
44
+ }
45
+ a{color:var(--cyan-soft); text-decoration:none;}
46
+ ::selection{background:rgba(47,107,255,.32); color:var(--white);}
47
+
48
+ .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
49
+ section{padding:78px 0; border-top:1px solid var(--hairline);}
50
+ section:first-of-type{border-top:0;}
51
+
52
+ .eyebrow{
53
+ font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
54
+ color:var(--cyan-soft); margin:0 0 14px;
55
+ display:inline-flex; align-items:center; gap:9px;
56
+ }
57
+ .eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--indigo-400),transparent);}
58
+ h2.sec{font-size:32px; line-height:1.25; font-weight:700; color:var(--white); margin:0 0 10px; letter-spacing:-.01em;}
59
+ .sec-sub{font-size:15px; color:var(--muted); max-width:620px; margin:0 0 38px;}
60
+
61
+ /* ---------- HERO ---------- */
62
+ .hero{
63
+ position:relative; overflow:hidden;
64
+ padding:96px 0 84px; border-top:0;
65
+ }
66
+ .hero-grid{position:absolute; inset:0; opacity:.5; pointer-events:none;
67
+ background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
68
+ background-size:46px 46px; -webkit-mask-image:radial-gradient(700px 460px at 30% 24%, #000 30%, transparent 78%);
69
+ mask-image:radial-gradient(700px 460px at 30% 24%, #000 30%, transparent 78%);}
70
+ /* (color tokens updated to Midnight palette) */
71
+ .hero-inner{position:relative; display:grid; grid-template-columns:1.25fr .9fr; gap:48px; align-items:center;}
72
+ .hero h1{font-size:60px; line-height:1.04; font-weight:700; letter-spacing:-.025em; color:var(--white); margin:18px 0 0;}
73
+ .hero h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
74
+ .hero p.lede{font-size:17px; color:var(--n-300); max-width:520px; margin:20px 0 0;}
75
+ .hero .pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
76
+ .meta-pill{font-size:12.5px; padding:7px 13px; border-radius:1000px; border:1px solid var(--hairline-strong);
77
+ background:rgba(13,17,36,.6); color:var(--n-200); display:inline-flex; gap:7px; align-items:center;}
78
+ .meta-pill b{color:var(--white); font-weight:500;}
79
+ .hero-logo{display:flex; justify-content:center;}
80
+ .logo-stage{
81
+ position:relative; width:300px; height:300px; border-radius:36px;
82
+ display:flex; align-items:center; justify-content:center;
83
+ background:
84
+ radial-gradient(140px 140px at 50% 38%, rgba(62,123,255,.24), transparent 70%),
85
+ linear-gradient(160deg, rgba(26,33,66,.85), rgba(6,8,15,.6));
86
+ border:1px solid var(--hairline-strong);
87
+ box-shadow:var(--glow-indigo), inset 0 1px 0 rgba(255,255,255,.06);
88
+ }
89
+ .logo-stage .ring{position:absolute; inset:26px; border-radius:28px; border:1px dashed rgba(47,107,255,.4);}
90
+ .logo-stage .ring.two{inset:46px; border-color:rgba(97,147,255,.26);}
91
+
92
+ .toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:38px;}
93
+ .toc a{font-size:13px; padding:8px 14px; border-radius:1000px; border:1px solid var(--hairline);
94
+ color:var(--n-300); background:rgba(13,17,36,.45); transition:.18s;}
95
+ .toc a:hover{border-color:rgba(47,107,255,.55); color:var(--white); transform:translateY(-1px);}
96
+
97
+ /* ---------- CARDS / PANELS ---------- */
98
+ .panel{background:linear-gradient(180deg, rgba(13,17,36,.66), rgba(13,17,36,.4));
99
+ border:1px solid var(--hairline); border-radius:18px; padding:22px;}
100
+ .grid{display:grid; gap:18px;}
101
+ .cols-2{grid-template-columns:repeat(2,1fr);}
102
+ .cols-3{grid-template-columns:repeat(3,1fr);}
103
+ .cols-4{grid-template-columns:repeat(4,1fr);}
104
+ .label-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
105
+ .panel h3{font-size:15px; font-weight:500; color:var(--white); margin:0; letter-spacing:.01em;}
106
+ .tag{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
107
+ border:1px solid var(--hairline-strong); padding:3px 9px; border-radius:1000px;}
108
+
109
+ /* ---------- LOGO VARIANTS ---------- */
110
+ .logo-variants{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
111
+ .lv{background:rgba(13,17,36,.5); border:1px solid var(--hairline); border-radius:16px; padding:24px 18px; text-align:center;}
112
+ .lv .stagebox{height:128px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
113
+ .lv .name{font-size:13.5px; color:var(--white); font-weight:500;}
114
+ .lv .desc{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.45;}
115
+ .checker{background-image:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.05) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.05) 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0px; border-radius:12px;}
116
+
117
+ /* wordmark */
118
+ .wordmark{display:flex; align-items:center; gap:18px; padding:26px; border:1px solid var(--hairline); border-radius:16px; background:rgba(13,17,36,.45);}
119
+ .wordmark .wm-text .big{font-size:26px; font-weight:700; letter-spacing:.04em; color:var(--white); line-height:1;}
120
+ .wordmark .wm-text .small{font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; margin-top:8px;
121
+ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500;}
122
+
123
+ /* clearspace */
124
+ .clearspace{position:relative; display:flex; align-items:center; justify-content:center; height:170px;
125
+ border:1px solid var(--hairline); border-radius:16px; background:rgba(6,8,15,.5); overflow:hidden;}
126
+ .cs-box{position:relative; padding:30px; border:1px dashed rgba(97,147,255,.4); border-radius:24px;}
127
+ .cs-tick{position:absolute; font-size:11px; color:var(--cyan-soft); background:rgba(6,8,15,.85); padding:1px 6px; border-radius:6px;}
128
+ .cs-tick.t{top:-9px; left:50%; transform:translateX(-50%);}
129
+ .cs-tick.l{left:-14px; top:50%; transform:translateY(-50%) rotate(-90deg);}
130
+
131
+ /* do / dont */
132
+ .dd{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px;}
133
+ .dd-card{border-radius:14px; padding:18px; border:1px solid var(--hairline); background:rgba(13,17,36,.4);}
134
+ .dd-head{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; margin-bottom:12px;}
135
+ .dd-ico{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
136
+ .do .dd-ico{background:rgba(14,156,114,.18); color:#3FE0A8; border:1px solid rgba(14,156,114,.5);}
137
+ .dont .dd-ico{background:rgba(220,42,82,.16); color:#FF6E8C; border:1px solid rgba(220,42,82,.5);}
138
+ .dd-card ul{margin:0; padding-left:18px;}
139
+ .dd-card li{font-size:13px; color:var(--n-300); margin:7px 0; line-height:1.5;}
140
+
141
+ /* ---------- COLOR ---------- */
142
+ .ramp{display:grid; grid-template-columns:repeat(8,1fr); border-radius:14px; overflow:hidden; border:1px solid var(--hairline);}
143
+ .sw{height:96px; padding:11px 12px; display:flex; flex-direction:column; justify-content:flex-end; position:relative;}
144
+ .sw .hex{font-size:12.5px; font-weight:500; letter-spacing:.02em;}
145
+ .sw .tok{font-size:10.5px; opacity:.82; margin-top:2px; line-height:1.25;}
146
+ .sw.dark-txt{color:#0A1230;} .sw.light-txt{color:#fff;}
147
+ .ramp-meta{display:flex; align-items:baseline; gap:10px; margin:0 2px 12px;}
148
+ .ramp-meta .nm{font-size:14px; color:var(--white); font-weight:500;}
149
+ .ramp-meta .role{font-size:12px; color:var(--muted);}
150
+
151
+ .swatch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
152
+ .scard{border-radius:14px; border:1px solid var(--hairline); overflow:hidden;}
153
+ .scard .chip{height:74px;}
154
+ .scard .info{padding:11px 13px; background:rgba(13,17,36,.5);}
155
+ .scard .info .hex{font-size:13px; color:var(--white); font-weight:500;}
156
+ .scard .info .tok{font-size:11px; color:var(--muted); margin-top:2px;}
157
+
158
+ .status-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
159
+ .stat{border-radius:14px; border:1px solid var(--hairline); padding:16px; background:rgba(13,17,36,.45);}
160
+ .stat .dot{width:34px; height:34px; border-radius:11px; margin-bottom:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
161
+ .stat .nm{font-size:13.5px; color:var(--white); font-weight:500;}
162
+ .stat .hex{font-size:12px; color:var(--muted); margin-top:2px;}
163
+
164
+ .grad-strip{height:120px; border-radius:16px; display:flex; align-items:flex-end; padding:18px; color:#FFFFFF; font-weight:700; font-size:14px;}
165
+ .grad-info{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
166
+ .grad-info code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--cyan-soft);
167
+ background:rgba(97,147,255,.08); border:1px solid rgba(97,147,255,.22); padding:6px 10px; border-radius:9px;}
168
+
169
+ /* ---------- TYPOGRAPHY ---------- */
170
+ .type-list .row{display:grid; grid-template-columns:160px 1fr; gap:22px; align-items:baseline;
171
+ padding:18px 0; border-top:1px solid var(--hairline);}
172
+ .type-list .row:first-child{border-top:0;}
173
+ .type-list .meta .tk{font-size:13px; color:var(--white); font-weight:500;}
174
+ .type-list .meta .px{font-size:12px; color:var(--muted); margin-top:3px;}
175
+ .type-list .sample{color:var(--n-100); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
176
+ .h1s{font-size:64px; line-height:72px; font-weight:700; letter-spacing:-.02em;}
177
+ .h2s{font-size:48px; line-height:56px; font-weight:700; letter-spacing:-.015em;}
178
+ .h3s{font-size:32px; line-height:40px; font-weight:500;}
179
+ .h4s{font-size:24px; line-height:32px; font-weight:500;}
180
+ .h6s{font-size:18px; line-height:24px; font-weight:500;}
181
+ .bxl{font-size:18px; line-height:26px; font-weight:400;}
182
+ .bl{font-size:16px; line-height:24px; font-weight:400;}
183
+ .bm{font-size:14px; line-height:20px; font-weight:400;}
184
+ .bs{font-size:12px; line-height:16px; font-weight:400;}
185
+ .weights{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px;}
186
+ .wcard{border:1px solid var(--hairline); border-radius:14px; padding:18px; background:rgba(13,17,36,.45);}
187
+ .wcard .ag{font-size:38px; color:var(--white); line-height:1;}
188
+ .wcard .nm{font-size:13px; color:var(--cyan-soft); margin-top:12px; font-weight:500;}
189
+ .wcard .v{font-size:11.5px; color:var(--muted); margin-top:3px;}
190
+ .w300{font-weight:300;} .w400{font-weight:400;} .w700{font-weight:700;}
191
+ .w800{font-weight:700; letter-spacing:.005em;}
192
+
193
+ /* ---------- SPACING / RADIUS ---------- */
194
+ .space-row{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;}
195
+ .sp{text-align:center;}
196
+ .sp .bar{width:46px; background:var(--grad); border-radius:6px 6px 0 0; box-shadow:0 0 16px rgba(47,107,255,.3);}
197
+ .sp .v{font-size:12px; color:var(--white); margin-top:8px; font-weight:500;}
198
+ .sp .u{font-size:10.5px; color:var(--muted);}
199
+ .radius-row{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
200
+ .rad{text-align:center;}
201
+ .rad .box{height:84px; border:1.5px solid var(--indigo-300); background:rgba(47,107,255,.12);}
202
+ .rad .v{font-size:12.5px; color:var(--white); margin-top:10px; font-weight:500;}
203
+ .rad .u{font-size:11px; color:var(--muted);}
204
+
205
+ /* ---------- ELEVATION ---------- */
206
+ .elev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
207
+ .elev{border-radius:16px; padding:22px; min-height:128px; display:flex; flex-direction:column; justify-content:space-between;
208
+ background:linear-gradient(180deg, rgba(26,33,66,.7), rgba(13,17,36,.6)); border:1px solid var(--hairline);}
209
+ .elev .t{font-size:14px; color:var(--white); font-weight:500;}
210
+ .elev .d{font-size:11.5px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; line-height:1.5;}
211
+ .e0{box-shadow:none;}
212
+ .e1{box-shadow:0 2px 8px rgba(0,0,0,.4);}
213
+ .e-indigo{box-shadow:var(--glow-indigo); border-color:rgba(47,107,255,.45);}
214
+ .e-cyan{box-shadow:var(--glow-cyan); border-color:rgba(97,147,255,.4);}
215
+ .e-violet{box-shadow:0 6px 16px rgba(99,83,242,.42); border-color:rgba(99,83,242,.4);}
216
+
217
+ /* ---------- COMPONENTS ---------- */
218
+ .comp-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
219
+ .cnote{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--cyan-soft);
220
+ background:rgba(97,147,255,.08); border:1px solid rgba(97,147,255,.22); padding:3px 9px; border-radius:1000px; display:inline-block;}
221
+ .stack{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
222
+
223
+ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 22px;
224
+ border-radius:14px; font-family:var(--font); font-size:15px; font-weight:500; cursor:pointer; border:0; width:100%;
225
+ transition:transform .12s ease, box-shadow .2s ease;}
226
+ .btn:hover{transform:translateY(-1px);}
227
+ .btn-solid{background:var(--grad); color:#FFFFFF; box-shadow:var(--glow-indigo);}
228
+ .btn-outline{background:transparent; color:var(--white); border:1.5px solid rgba(47,107,255,.55); box-shadow:inset 0 0 18px rgba(47,107,255,.08);}
229
+ .btn-outline:hover{border-color:var(--cyan); box-shadow:inset 0 0 22px rgba(97,147,255,.12);}
230
+ .btn-ghost{background:transparent; color:var(--cyan-soft); height:44px; font-weight:500;}
231
+ .btn-ghost:hover{background:rgba(97,147,255,.07);}
232
+ .btn-danger{background:linear-gradient(135deg,#E23A5F,#DC2A52); color:#fff; box-shadow:0 6px 16px rgba(220,42,82,.4);}
233
+ .btn-arrow{font-size:18px; line-height:1;}
234
+
235
+ .field{display:flex; flex-direction:column; gap:7px;}
236
+ .field label{font-size:12.5px; color:var(--n-300); font-weight:500;}
237
+ .input{height:52px; border-radius:14px; background:rgba(6,8,15,.6); border:1.5px solid var(--hairline-strong);
238
+ color:var(--white); padding:0 16px; font-family:var(--font); font-size:15px; display:flex; align-items:center; gap:10px;}
239
+ .input.focus{border-color:var(--cyan); box-shadow:0 0 0 4px rgba(97,147,255,.14);}
240
+ .input .ph{color:var(--n-500);}
241
+ .input .ico{color:var(--muted); font-size:16px;}
242
+ .field .help{font-size:11.5px; color:var(--muted);}
243
+ .field.err .input{border-color:var(--error); box-shadow:0 0 0 4px rgba(220,42,82,.14);}
244
+ .field.err .help{color:#FF6E8C;}
245
+
246
+ .surface-card{border-radius:18px; padding:22px; background:linear-gradient(150deg, rgba(47,107,255,.16), rgba(97,147,255,.08)), var(--surface);
247
+ border:1px solid rgba(47,107,255,.4); box-shadow:var(--glow-indigo);}
248
+ .surface-card .ttl{font-size:13px; color:var(--n-200); letter-spacing:.04em; text-transform:uppercase;}
249
+ .surface-card .val{font-size:34px; color:var(--white); font-weight:700; margin-top:8px; letter-spacing:-.01em;}
250
+ .surface-card .sub{font-size:13px; color:var(--cyan-soft); margin-top:6px;}
251
+
252
+ .badges{display:flex; flex-wrap:wrap; gap:10px;}
253
+ .badge{font-size:12.5px; padding:6px 13px; border-radius:1000px; font-weight:500; display:inline-flex; align-items:center; gap:7px;}
254
+ .b-solid{background:var(--grad); color:#FFFFFF;}
255
+ .b-indigo{background:rgba(47,107,255,.16); color:#A6C4FF; border:1px solid rgba(47,107,255,.4);}
256
+ .b-cyan{background:rgba(97,147,255,.14); color:#B6D0FF; border:1px solid rgba(97,147,255,.4);}
257
+ .b-success{background:rgba(14,156,114,.16); color:#48E2AC; border:1px solid rgba(14,156,114,.45);}
258
+ .b-warn{background:rgba(217,142,30,.16); color:#F2B65B; border:1px solid rgba(217,142,30,.45);}
259
+ .b-error{background:rgba(220,42,82,.16); color:#FF7B96; border:1px solid rgba(220,42,82,.45);}
260
+ .b-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
261
+
262
+ .state-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
263
+ .state{border:1px dashed var(--hairline-strong); border-radius:16px; padding:24px 18px; text-align:center; min-height:170px;
264
+ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(6,8,15,.4);}
265
+ .state .ring{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
266
+ .state .glyph{font-size:24px;}
267
+ .state .st{font-size:14px; color:var(--white); font-weight:500;}
268
+ .state .sd{font-size:12px; color:var(--muted); line-height:1.45; max-width:200px;}
269
+ .empty .ring{background:rgba(47,107,255,.12); color:var(--indigo-200); border:1px solid rgba(47,107,255,.4);}
270
+ .loading .ring{border:3px solid rgba(97,147,255,.18); border-top-color:var(--cyan); animation:spin 1s linear infinite;}
271
+ .error-s .ring{background:rgba(220,42,82,.14); color:#FF7B96; border:1px solid rgba(220,42,82,.45);}
272
+ @keyframes spin{to{transform:rotate(360deg);}}
273
+
274
+ .shimmer-rows{display:flex; flex-direction:column; gap:12px;}
275
+ .sh-row{display:flex; align-items:center; gap:14px;}
276
+ .sh-chip{width:44px; height:44px; border-radius:13px; flex-shrink:0;}
277
+ .sh-lines{flex:1; display:flex; flex-direction:column; gap:8px;}
278
+ .sh{border-radius:7px; background:linear-gradient(90deg, rgba(47,107,255,.10) 0%, rgba(47,107,255,.22) 50%, rgba(47,107,255,.10) 100%);
279
+ background-size:200% 100%; animation:shim 1.5s ease-in-out infinite; height:11px;}
280
+ .sh.tall{height:44px; border-radius:13px;}
281
+ .sh.w70{width:70%;} .sh.w40{width:40%;}
282
+ @keyframes shim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
283
+
284
+ /* ---------- NEW COMPONENTS ---------- */
285
+ /* group heading inside components section */
286
+ .comp-group{font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-soft);
287
+ margin:46px 0 4px; display:flex; align-items:center; gap:11px;}
288
+ .comp-group::before{content:""; width:18px; height:1px; background:linear-gradient(90deg,var(--indigo-400),transparent);}
289
+ .comp-group:first-child{margin-top:0;}
290
+ .comp-group-sub{font-size:13px; color:var(--muted); margin:0 0 20px; max-width:640px;}
291
+
292
+ /* shared mini mockup helpers */
293
+ .mini-row{display:flex; align-items:center; gap:12px;}
294
+ .mini-label{font-size:13.5px; color:var(--n-200);}
295
+ .mini-label.sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
296
+
297
+ /* AppTextInput — adds focus/error/password rows on top of .input */
298
+ .ati-eye{margin-left:auto; color:var(--muted); font-size:16px;}
299
+
300
+ /* Dropdown */
301
+ .dd-field{height:52px; border-radius:14px; background:rgba(6,8,15,.6); border:1.5px solid var(--hairline-strong);
302
+ color:var(--white); padding:0 16px; display:flex; align-items:center; gap:10px; font-size:15px;}
303
+ .dd-field .chev{margin-left:auto; color:var(--muted); font-size:13px;}
304
+ .dd-menu{margin-top:10px; border-radius:14px; background:var(--surface); border:1px solid var(--hairline-strong);
305
+ overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.5);}
306
+ .dd-opt{display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:14.5px; color:var(--n-200);
307
+ border-top:1px solid var(--hairline);}
308
+ .dd-opt:first-child{border-top:0;}
309
+ .dd-opt .ok{margin-left:auto; color:var(--indigo-200); font-size:14px;}
310
+ .dd-opt.sel{background:rgba(47,107,255,.16); color:var(--white);}
311
+
312
+ /* Checkbox */
313
+ .cbx-row{display:flex; align-items:center; gap:12px;}
314
+ .cbx{width:24px; height:24px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
315
+ border:1.5px solid var(--n-500); color:#fff; font-size:14px; font-weight:700;}
316
+ .cbx.on{background:var(--indigo-400); border-color:var(--indigo-400); box-shadow:0 4px 12px rgba(47,107,255,.4);}
317
+
318
+ /* AppSwitch */
319
+ .sw-track{width:50px; height:30px; border-radius:1000px; padding:3px; display:flex; align-items:center; flex-shrink:0;
320
+ background:var(--n-600); transition:.2s;}
321
+ .sw-track .knob{width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.4);}
322
+ .sw-track.on{background:var(--indigo-400); justify-content:flex-end; box-shadow:0 4px 12px rgba(47,107,255,.4);}
323
+
324
+ /* RadioGroup */
325
+ .radio{width:22px; height:22px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--n-500);
326
+ display:flex; align-items:center; justify-content:center;}
327
+ .radio.on{border-color:var(--indigo-400);}
328
+ .radio.on::after{content:""; width:11px; height:11px; border-radius:50%; background:var(--indigo-400);
329
+ box-shadow:0 0 10px rgba(47,107,255,.6);}
330
+
331
+ /* SegmentedControl */
332
+ .seg{display:flex; padding:4px; gap:4px; border-radius:14px; background:rgba(6,8,15,.6);
333
+ border:1px solid var(--hairline-strong);}
334
+ .seg .sgm{flex:1; text-align:center; padding:9px 0; font-size:13.5px; font-weight:500; color:var(--muted); border-radius:10px;}
335
+ .seg .sgm.on{background:var(--grad); color:#fff; box-shadow:var(--glow-indigo);}
336
+
337
+ /* Chip */
338
+ .chips{display:flex; flex-wrap:wrap; gap:10px;}
339
+ .chp{font-size:13px; font-weight:500; padding:8px 15px; border-radius:1000px;
340
+ border:1px solid var(--hairline-strong); color:var(--n-200); background:rgba(13,17,36,.5);
341
+ display:inline-flex; align-items:center; gap:7px;}
342
+ .chp.on{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow-indigo);}
343
+
344
+ /* Avatar */
345
+ .avas{display:flex; align-items:center; gap:18px;}
346
+ .ava{border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
347
+ background:var(--grad); box-shadow:var(--glow-indigo);}
348
+ .ava.lg{width:64px; height:64px; font-size:23px;}
349
+ .ava.sm{width:42px; height:42px; font-size:15px;}
350
+
351
+ /* ListItem */
352
+ .li-card{border-radius:16px; border:1px solid var(--hairline); background:rgba(13,17,36,.5); overflow:hidden;}
353
+ .li{display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--hairline);}
354
+ .li:first-child{border-top:0;}
355
+ .li .li-body{flex:1; min-width:0;}
356
+ .li .li-title{font-size:14.5px; color:var(--white); font-weight:500;}
357
+ .li .li-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
358
+ .li .chev{color:var(--n-500); font-size:15px;}
359
+
360
+ /* Carousel */
361
+ .carousel{border-radius:18px; min-height:150px; padding:22px; display:flex; flex-direction:column; justify-content:space-between;
362
+ background:linear-gradient(135deg,#1B45B8,#3E7BFF); box-shadow:var(--glow-indigo);}
363
+ .carousel .c-kicker{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#EAF1FF; opacity:.85;}
364
+ .carousel .c-ttl{font-size:21px; font-weight:700; color:#fff; margin-top:8px; max-width:300px; line-height:1.25;}
365
+ .dots{display:flex; gap:7px; margin-top:18px;}
366
+ .dots .d{width:7px; height:7px; border-radius:1000px; background:rgba(255,255,255,.4);}
367
+ .dots .d.on{width:22px; background:#fff;}
368
+
369
+ /* CardScroller */
370
+ .scroller{display:flex; gap:14px; overflow:hidden; padding-bottom:4px;}
371
+ .sc-card{flex:0 0 64%; border-radius:16px; padding:18px; min-height:128px;
372
+ background:linear-gradient(180deg, rgba(26,33,66,.85), rgba(13,17,36,.7)); border:1px solid var(--hairline-strong);
373
+ display:flex; flex-direction:column; justify-content:space-between;}
374
+ .sc-card:nth-child(2){flex-basis:54%;}
375
+ .sc-card:nth-child(3){flex-basis:42%;}
376
+ .sc-card .sc-ico{width:38px; height:38px; border-radius:11px; background:rgba(47,107,255,.16);
377
+ border:1px solid rgba(47,107,255,.4); display:flex; align-items:center; justify-content:center; color:var(--indigo-200); font-size:18px;}
378
+ .sc-card .sc-ttl{font-size:14.5px; color:var(--white); font-weight:500;}
379
+ .sc-card .sc-sub{font-size:12px; color:var(--muted); margin-top:3px;}
380
+
381
+ /* AppBottomSheet */
382
+ .sheet-stage{border-radius:18px; background:rgba(6,8,15,.55); border:1px solid var(--hairline);
383
+ padding:28px 14px 0; display:flex; justify-content:center; align-items:flex-end; min-height:230px; overflow:hidden;}
384
+ .sheet{width:100%; max-width:400px; border-radius:22px 22px 0 0; background:var(--surface);
385
+ border:1px solid var(--hairline-strong); border-bottom:0; padding:14px 18px 24px;
386
+ box-shadow:0 -14px 40px rgba(0,0,0,.5);}
387
+ .sheet .grabber{width:42px; height:5px; border-radius:1000px; background:var(--n-600); margin:0 auto 16px;}
388
+ .sheet .sh-ttl{font-size:17px; font-weight:500; color:var(--white); margin-bottom:14px;}
389
+ .sheet .sh-opt{display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--hairline); font-size:14.5px; color:var(--n-200);}
390
+ .sheet .sh-opt:first-of-type{border-top:0;}
391
+ .sheet .sh-opt .ico{width:34px; height:34px; border-radius:11px; flex-shrink:0; background:rgba(47,107,255,.14);
392
+ border:1px solid rgba(47,107,255,.34); display:flex; align-items:center; justify-content:center; color:var(--indigo-200); font-size:16px;}
393
+ .sheet .sh-opt .chev{margin-left:auto; color:var(--n-500); font-size:14px;}
394
+
395
+ /* ModalDialog */
396
+ .modal-stage{position:relative; border-radius:18px; overflow:hidden; min-height:240px;
397
+ display:flex; align-items:center; justify-content:center; padding:24px;
398
+ background:repeating-linear-gradient(45deg, rgba(6,8,15,.85), rgba(6,8,15,.85) 12px, rgba(13,17,36,.85) 12px, rgba(13,17,36,.85) 24px);
399
+ border:1px solid var(--hairline);}
400
+ .modal-stage::before{content:""; position:absolute; inset:0; background:rgba(6,8,15,.55); backdrop-filter:blur(2px);}
401
+ .modal{position:relative; width:100%; max-width:330px; border-radius:18px; padding:24px 22px;
402
+ background:linear-gradient(180deg, rgba(26,33,66,.92), rgba(13,17,36,.96)); border:1px solid var(--hairline-strong);
403
+ box-shadow:0 20px 50px rgba(0,0,0,.6); text-align:center;}
404
+ .modal .m-ttl{font-size:18px; font-weight:700; color:var(--white);}
405
+ .modal .m-msg{font-size:13.5px; color:var(--muted); margin-top:9px; line-height:1.5;}
406
+ .modal .m-actions{display:flex; gap:11px; margin-top:22px;}
407
+ .modal .m-actions .btn{height:46px; font-size:14px;}
408
+
409
+ /* Skeleton (uses existing .sh shimmer) */
410
+ .sk-card{display:flex; flex-direction:column; gap:13px; padding:18px; border-radius:16px;
411
+ background:rgba(13,17,36,.5); border:1px solid var(--hairline);}
412
+
413
+ /* tab bar */
414
+ .tabbar-wrap{max-width:430px; margin:0 auto;}
415
+ .tabbar{display:grid; grid-template-columns:repeat(5,1fr); background:rgba(6,8,15,.82); backdrop-filter:blur(8px);
416
+ border:1px solid var(--hairline-strong); border-radius:22px; padding:10px 8px; box-shadow:0 12px 34px rgba(0,0,0,.5);}
417
+ .tab{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0; color:var(--n-500); position:relative;}
418
+ .tab .ti-ico{width:24px; height:24px;}
419
+ .tab .lbl{font-size:10.5px; font-weight:500; letter-spacing:.02em;}
420
+ .tab.active{color:var(--white);}
421
+ .tab.active .ti-ico path, .tab.active .ti-ico circle{stroke:url(#tabgrad);}
422
+ .tab.active::before{content:""; position:absolute; top:-10px; width:30px; height:3px; border-radius:1000px; background:var(--grad); box-shadow:var(--glow-cyan);}
423
+
424
+ .foot{padding:54px 0 80px; border-top:1px solid var(--hairline); text-align:center;}
425
+ .foot .fl{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:16px;}
426
+ .foot .ft{font-size:13px; color:var(--muted);}
427
+ .foot .ft b{color:var(--n-200); font-weight:500;}
428
+
429
+ @media (max-width:920px){
430
+ .hero-inner{grid-template-columns:1fr;}
431
+ .hero-logo{order:-1;}
432
+ .hero h1{font-size:46px;}
433
+ .cols-2,.comp-grid{grid-template-columns:1fr;}
434
+ .cols-3,.cols-4,.logo-variants,.swatch-grid,.status-grid,.weights,.state-grid,.elev-grid,.dd,.radius-row{grid-template-columns:1fr 1fr;}
435
+ .ramp{grid-template-columns:repeat(4,1fr);}
436
+ .h1s{font-size:46px; line-height:54px;} .h2s{font-size:38px; line-height:46px;}
437
+ }
438
+ @media (max-width:560px){
439
+ .wrap{padding:0 18px;} section{padding:54px 0;}
440
+ .cols-3,.cols-4,.logo-variants,.swatch-grid,.status-grid,.weights,.state-grid,.elev-grid,.radius-row,.dd{grid-template-columns:1fr;}
441
+ .type-list .row{grid-template-columns:1fr;}
442
+ }
443
+ </style>
444
+ </head>
445
+ <body>
446
+
447
+ <!-- Shared gradient defs for tab icons -->
448
+ <svg width="0" height="0" style="position:absolute"><defs>
449
+ <linearGradient id="tabgrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#3E7BFF"/><stop offset="1" stop-color="#A6C4FF"/></linearGradient>
450
+ </defs></svg>
451
+
452
+ <!-- ============ HERO ============ -->
453
+ <header class="hero">
454
+ <div class="hero-grid"></div>
455
+ <div class="wrap hero-inner">
456
+ <div>
457
+ <div class="eyebrow">Brand &amp; UI Reference</div>
458
+ <h1>React Native <span class="grad">Magic</span><br/>Design System</h1>
459
+ <p class="lede">The visual language for apps scaffolded from <b style="color:var(--white);font-weight:500">@fadyshawky/react-native-magic</b> — a premium Midnight system of electric blue on deep black, built dark-first for clarity and depth.</p>
460
+ <div class="pills">
461
+ <span class="meta-pill"><b>Author</b> Fady Shawky</span>
462
+ <span class="meta-pill"><b>Tokens</b> Colors · Fonts · CommonSizes</span>
463
+ <span class="meta-pill"><b>App font</b> Almarai</span>
464
+ </div>
465
+ <nav class="toc">
466
+ <a href="#logo">Logo</a>
467
+ <a href="#color">Color</a>
468
+ <a href="#type">Typography</a>
469
+ <a href="#space">Spacing &amp; Radius</a>
470
+ <a href="#elevation">Elevation</a>
471
+ <a href="#components">Components</a>
472
+ </nav>
473
+ </div>
474
+ <div class="hero-logo">
475
+ <div class="logo-stage">
476
+ <span class="ring"></span><span class="ring two"></span>
477
+ <svg width="150" height="150" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS monogram">
478
+ <defs><linearGradient id="chipHero" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
479
+ <rect width="120" height="120" rx="30" fill="url(#chipHero)"/>
480
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
481
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
482
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
483
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
484
+ </svg>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </header>
489
+
490
+ <!-- ============ LOGO ============ -->
491
+ <section id="logo">
492
+ <div class="wrap">
493
+ <div class="eyebrow">01 — Identity</div>
494
+ <h2 class="sec">The FS monogram</h2>
495
+ <p class="sec-sub">A forward-leaning "FS" mark — the italic stance signals motion and momentum. Four official variants cover dark, mono, light, and mark-only placements.</p>
496
+
497
+ <div class="logo-variants">
498
+ <div class="lv">
499
+ <div class="stagebox">
500
+ <svg width="92" height="92" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS gradient logo">
501
+ <defs><linearGradient id="chip1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
502
+ <rect width="120" height="120" rx="30" fill="url(#chip1)"/>
503
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
504
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
505
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
506
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
507
+ </svg>
508
+ </div>
509
+ <div class="name">Primary</div>
510
+ <div class="desc">Gradient chip, ink strokes. Default everywhere.</div>
511
+ </div>
512
+
513
+ <div class="lv">
514
+ <div class="stagebox">
515
+ <svg width="92" height="92" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS mono logo">
516
+ <rect width="120" height="120" rx="30" fill="#0D1124" stroke="#1A2142" stroke-width="1.5"/>
517
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#FFFFFF"/>
518
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#FFFFFF"/>
519
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#FFFFFF"/>
520
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#FFFFFF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
521
+ </svg>
522
+ </div>
523
+ <div class="name">Mono</div>
524
+ <div class="desc">#0D1124 chip, white strokes. Dark surfaces.</div>
525
+ </div>
526
+
527
+ <div class="lv">
528
+ <div class="stagebox">
529
+ <svg width="92" height="92" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS light logo">
530
+ <rect width="120" height="120" rx="30" fill="#F4F6FE" stroke="#D7DCEC" stroke-width="1.5"/>
531
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#0A1230"/>
532
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#0A1230"/>
533
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#0A1230"/>
534
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#0A1230" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
535
+ </svg>
536
+ </div>
537
+ <div class="name">Light</div>
538
+ <div class="desc">#F4F6FE chip, ink strokes. Print &amp; light UI.</div>
539
+ </div>
540
+
541
+ <div class="lv">
542
+ <div class="stagebox">
543
+ <svg width="92" height="92" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS mark only">
544
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#2F6BFF"/>
545
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#2F6BFF"/>
546
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#2F6BFF"/>
547
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#2F6BFF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
548
+ </svg>
549
+ </div>
550
+ <div class="name">Mark only</div>
551
+ <div class="desc">#2F6BFF strokes, no chip. Watermarks &amp; favicons.</div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- wordmark + clearspace -->
556
+ <div class="grid cols-2" style="margin-top:18px;">
557
+ <div class="wordmark">
558
+ <svg width="68" height="68" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS wordmark logo">
559
+ <defs><linearGradient id="chip2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
560
+ <rect width="120" height="120" rx="30" fill="url(#chip2)"/>
561
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
562
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
563
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
564
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
565
+ </svg>
566
+ <div class="wm-text">
567
+ <div class="big">FADY SHAWKY</div>
568
+ <div class="small">react native magic</div>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="clearspace">
573
+ <span class="cs-tick t">½ chip</span>
574
+ <span class="cs-tick l">½ chip</span>
575
+ <div class="cs-box">
576
+ <svg width="58" height="58" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS clearspace">
577
+ <defs><linearGradient id="chip3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
578
+ <rect width="120" height="120" rx="30" fill="url(#chip3)"/>
579
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
580
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
581
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
582
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
583
+ </svg>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <!-- do / dont -->
589
+ <div class="dd">
590
+ <div class="dd-card do">
591
+ <div class="dd-head"><span class="dd-ico">&#10003;</span> Do</div>
592
+ <ul>
593
+ <li>Preserve clear-space of at least half the chip width on every side.</li>
594
+ <li>Use the mono or light variant when the gradient lacks contrast.</li>
595
+ <li>Keep the chip's 30/120 corner radius ratio when scaling.</li>
596
+ </ul>
597
+ </div>
598
+ <div class="dd-card dont">
599
+ <div class="dd-head"><span class="dd-ico">&times;</span> Don't</div>
600
+ <ul>
601
+ <li>Recolor the gradient or swap stop order (always blue_600 &rarr; blue_300).</li>
602
+ <li>Stretch, skew, or rotate the mark away from its lean.</li>
603
+ <li>Place the gradient chip on busy or low-contrast photography.</li>
604
+ </ul>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- ============ COLOR ============ -->
611
+ <section id="color">
612
+ <div class="wrap">
613
+ <div class="eyebrow">02 — Color</div>
614
+ <h2 class="sec">Palette</h2>
615
+ <p class="sec-sub">An electric-blue primary ramp anchored by light-blue and discover accents, grounded on a deep-black neutral set. Token names map to the app's <code style="color:var(--cyan-soft)">Colors</code> module.</p>
616
+
617
+ <!-- Blue ramp -->
618
+ <div class="ramp-meta"><span class="nm">Primary · Blue</span><span class="role">PlatinateBlue_400 = #2F6BFF</span></div>
619
+ <div class="ramp" style="margin-bottom:30px;">
620
+ <div class="sw dark-txt" style="background:#EAF1FF"><span class="hex">#EAF1FF</span><span class="tok">blue_50</span></div>
621
+ <div class="sw dark-txt" style="background:#B6D0FF"><span class="hex">#B6D0FF</span><span class="tok">blue_100</span></div>
622
+ <div class="sw dark-txt" style="background:#6193FF"><span class="hex">#6193FF</span><span class="tok">blue_200</span></div>
623
+ <div class="sw light-txt" style="background:#3E7BFF"><span class="hex">#3E7BFF</span><span class="tok">blue_300</span></div>
624
+ <div class="sw light-txt" style="background:#2F6BFF"><span class="hex">#2F6BFF</span><span class="tok">PlatinateBlue_400</span></div>
625
+ <div class="sw light-txt" style="background:#2356D6"><span class="hex">#2356D6</span><span class="tok">blue_500</span></div>
626
+ <div class="sw light-txt" style="background:#1B45B8"><span class="hex">#1B45B8</span><span class="tok">blue_600</span></div>
627
+ <div class="sw light-txt" style="background:#143186"><span class="hex">#143186</span><span class="tok">blue_700</span></div>
628
+ </div>
629
+
630
+ <!-- accents + ink in two columns -->
631
+ <div class="grid cols-2">
632
+ <div>
633
+ <div class="ramp-meta"><span class="nm">Accents</span><span class="role">lightBlue · lightBlueSoft · discover</span></div>
634
+ <div class="swatch-grid" style="grid-template-columns:repeat(3,1fr);">
635
+ <div class="scard"><div class="chip" style="background:#6193FF"></div><div class="info"><div class="hex">#6193FF</div><div class="tok">BrandColors.lightBlue</div></div></div>
636
+ <div class="scard"><div class="chip" style="background:#A6C4FF"></div><div class="info"><div class="hex">#A6C4FF</div><div class="tok">lightBlueSoft</div></div></div>
637
+ <div class="scard"><div class="chip" style="background:#6353F2"></div><div class="info"><div class="hex">#6353F2</div><div class="tok">discover_300</div></div></div>
638
+ </div>
639
+ </div>
640
+ <div>
641
+ <div class="ramp-meta"><span class="nm">Black · Dark surfaces</span><span class="role">bg · surface · raised</span></div>
642
+ <div class="swatch-grid" style="grid-template-columns:repeat(3,1fr);">
643
+ <div class="scard"><div class="chip" style="background:#06080F"></div><div class="info"><div class="hex">#06080F</div><div class="tok">midnightBlack_900</div></div></div>
644
+ <div class="scard"><div class="chip" style="background:#0D1124"></div><div class="info"><div class="hex">#0D1124</div><div class="tok">surface</div></div></div>
645
+ <div class="scard"><div class="chip" style="background:#1A2142"></div><div class="info"><div class="hex">#1A2142</div><div class="tok">raised</div></div></div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- cool neutrals -->
651
+ <div class="ramp-meta" style="margin-top:30px;"><span class="nm">Cool neutrals</span><span class="role">grayScale_0 &rarr; grayScale_200 / 600</span></div>
652
+ <div class="ramp" style="margin-bottom:30px;">
653
+ <div class="sw dark-txt" style="background:#FFFFFF;box-shadow:inset 0 0 0 1px #E5E9F7"><span class="hex">#FFFFFF</span><span class="tok">grayScale_0</span></div>
654
+ <div class="sw dark-txt" style="background:#F4F6FE"><span class="hex">#F4F6FE</span><span class="tok">nearWhite</span></div>
655
+ <div class="sw dark-txt" style="background:#EAEDF7"><span class="hex">#EAEDF7</span><span class="tok">n_100</span></div>
656
+ <div class="sw dark-txt" style="background:#D7DCEC"><span class="hex">#D7DCEC</span><span class="tok">n_200</span></div>
657
+ <div class="sw light-txt" style="background:#828BB0"><span class="hex">#828BB0</span><span class="tok">muted · grayScale_200</span></div>
658
+ <div class="sw light-txt" style="background:#59618A"><span class="hex">#59618A</span><span class="tok">n_500</span></div>
659
+ <div class="sw light-txt" style="background:#343C63"><span class="hex">#343C63</span><span class="tok">n_600</span></div>
660
+ <div class="sw light-txt" style="background:#1A2142"><span class="hex">#1A2142</span><span class="tok">raised</span></div>
661
+ </div>
662
+
663
+ <!-- status -->
664
+ <div class="ramp-meta"><span class="nm">Status</span><span class="role">semantic feedback</span></div>
665
+ <div class="status-grid" style="margin-bottom:30px;">
666
+ <div class="stat"><div class="dot" style="background:#0E9C72"></div><div class="nm">Success</div><div class="hex">#0E9C72</div></div>
667
+ <div class="stat"><div class="dot" style="background:#D98E1E"></div><div class="nm">Warning</div><div class="hex">#D98E1E</div></div>
668
+ <div class="stat"><div class="dot" style="background:#DC2A52"></div><div class="nm">Error</div><div class="hex">#DC2A52</div></div>
669
+ <div class="stat"><div class="dot" style="background:#2F6BFF"></div><div class="nm">Info</div><div class="hex">#2F6BFF</div></div>
670
+ </div>
671
+
672
+ <!-- gradient -->
673
+ <div class="ramp-meta"><span class="nm">Signature gradient</span><span class="role">brand surfaces, CTAs, glow</span></div>
674
+ <div class="grad-strip" style="background:linear-gradient(135deg,#1B45B8,#3E7BFF)">blue_600 &rarr; blue_300</div>
675
+ <div class="grad-info">
676
+ <code>linear-gradient(135deg, #1B45B8, #3E7BFF)</code>
677
+ <code>glow · 0 8px 18px rgba(47,107,255,.5)</code>
678
+ <code>discover · #6353F2</code>
679
+ </div>
680
+ </div>
681
+ </section>
682
+
683
+ <!-- ============ TYPOGRAPHY ============ -->
684
+ <section id="type">
685
+ <div class="wrap">
686
+ <div class="eyebrow">03 — Typography</div>
687
+ <h2 class="sec">Type scale</h2>
688
+ <p class="sec-sub">Sizes ship in the <code style="color:var(--cyan-soft)">CommonSizes</code> token set as <em>size / line-height</em> pairs. The product font is Almarai; this reference renders in Space Grotesk.</p>
689
+
690
+ <div class="type-list panel">
691
+ <div class="row"><div class="meta"><div class="tk">heading1</div><div class="px">64 / 72 · bold</div></div><div class="sample h1s">Magic</div></div>
692
+ <div class="row"><div class="meta"><div class="tk">heading2</div><div class="px">48 / 56 · bold</div></div><div class="sample h2s">Build faster</div></div>
693
+ <div class="row"><div class="meta"><div class="tk">heading3</div><div class="px">32 / 40 · regular</div></div><div class="sample h3s">Futuristic by default</div></div>
694
+ <div class="row"><div class="meta"><div class="tk">heading4</div><div class="px">24 / 32 · regular</div></div><div class="sample h4s">Section headings stay crisp</div></div>
695
+ <div class="row"><div class="meta"><div class="tk">heading6</div><div class="px">18 / 24 · regular</div></div><div class="sample h6s">Compact subsection titles for dense layouts</div></div>
696
+ <div class="row"><div class="meta"><div class="tk">bodyXLarge</div><div class="px">18 / 26 · regular</div></div><div class="sample bxl">Lead paragraphs introduce a screen with room to breathe.</div></div>
697
+ <div class="row"><div class="meta"><div class="tk">bodyLarge</div><div class="px">16 / 24 · regular</div></div><div class="sample bl">The default reading size across most content and list rows.</div></div>
698
+ <div class="row"><div class="meta"><div class="tk">bodyMedium</div><div class="px">14 / 20 · regular</div></div><div class="sample bm">Supporting copy, captions, and secondary metadata.</div></div>
699
+ <div class="row"><div class="meta"><div class="tk">bodySmall</div><div class="px">12 / 16 · regular</div></div><div class="sample bs">Fine print, timestamps, and helper text at the smallest size.</div></div>
700
+ </div>
701
+
702
+ <div class="weights">
703
+ <div class="wcard"><div class="ag w300">Aa</div><div class="nm">Light</div><div class="v">weight 300</div></div>
704
+ <div class="wcard"><div class="ag w400">Aa</div><div class="nm">Regular</div><div class="v">weight 400</div></div>
705
+ <div class="wcard"><div class="ag w700">Aa</div><div class="nm">Bold</div><div class="v">weight 700</div></div>
706
+ <div class="wcard"><div class="ag w800">Aa</div><div class="nm">Extra Bold</div><div class="v">weight 800</div></div>
707
+ </div>
708
+ </div>
709
+ </section>
710
+
711
+ <!-- ============ SPACING & RADIUS ============ -->
712
+ <section id="space">
713
+ <div class="wrap">
714
+ <div class="eyebrow">04 — Layout</div>
715
+ <h2 class="sec">Spacing &amp; radius</h2>
716
+ <p class="sec-sub">A consistent step scale keeps rhythm predictable. Spacing and radius both live in <code style="color:var(--cyan-soft)">CommonSizes</code>.</p>
717
+
718
+ <div class="grid cols-2">
719
+ <div class="panel">
720
+ <div class="label-row"><h3>Spacing scale</h3><span class="tag">px steps</span></div>
721
+ <div class="space-row">
722
+ <div class="sp"><div class="bar" style="height:6px"></div><div class="v">2</div><div class="u">spacing.xxs</div></div>
723
+ <div class="sp"><div class="bar" style="height:12px"></div><div class="v">4</div><div class="u">spacing.xs</div></div>
724
+ <div class="sp"><div class="bar" style="height:22px"></div><div class="v">8</div><div class="u">spacing.s</div></div>
725
+ <div class="sp"><div class="bar" style="height:34px"></div><div class="v">12</div><div class="u">spacing.sm</div></div>
726
+ <div class="sp"><div class="bar" style="height:46px"></div><div class="v">16</div><div class="u">spacing.m</div></div>
727
+ <div class="sp"><div class="bar" style="height:66px"></div><div class="v">24</div><div class="u">spacing.l</div></div>
728
+ <div class="sp"><div class="bar" style="height:88px"></div><div class="v">32</div><div class="u">spacing.xl</div></div>
729
+ <div class="sp"><div class="bar" style="height:118px"></div><div class="v">48</div><div class="u">spacing.xxl</div></div>
730
+ </div>
731
+ <div class="space-row" style="margin-top:20px;">
732
+ <div class="sp"><div class="bar" style="height:150px"></div><div class="v">64</div><div class="u">spacing.huge</div></div>
733
+ <div class="sp"><div class="bar" style="height:182px"></div><div class="v">80</div><div class="u">spacing.giant</div></div>
734
+ </div>
735
+ </div>
736
+
737
+ <div class="panel">
738
+ <div class="label-row"><h3>Corner radius</h3><span class="tag">radius</span></div>
739
+ <div class="radius-row" style="grid-template-columns:repeat(3,1fr);">
740
+ <div class="rad"><div class="box" style="border-radius:4px"></div><div class="v">4</div><div class="u">radius.xs</div></div>
741
+ <div class="rad"><div class="box" style="border-radius:8px"></div><div class="v">8</div><div class="u">radius.s</div></div>
742
+ <div class="rad"><div class="box" style="border-radius:12px"></div><div class="v">12</div><div class="u">radius.m</div></div>
743
+ <div class="rad"><div class="box" style="border-radius:16px"></div><div class="v">16</div><div class="u">radius.l</div></div>
744
+ <div class="rad"><div class="box" style="border-radius:24px"></div><div class="v">24</div><div class="u">radius.xl</div></div>
745
+ <div class="rad"><div class="box" style="border-radius:1000px"></div><div class="v">full</div><div class="u">radius.full · 1000</div></div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </section>
751
+
752
+ <!-- ============ ELEVATION ============ -->
753
+ <section id="elevation">
754
+ <div class="wrap">
755
+ <div class="eyebrow">05 — Depth</div>
756
+ <h2 class="sec">Elevation &amp; glow</h2>
757
+ <p class="sec-sub">Depth comes from soft shadow plus a colored glow on brand surfaces. Use glow sparingly — reserve it for primary actions and hero cards.</p>
758
+ <div class="elev-grid">
759
+ <div class="elev e0"><div class="t">Flat</div><div class="d">box-shadow: none<br/>base surfaces</div></div>
760
+ <div class="elev e1"><div class="t">Raised</div><div class="d">0 2px 8px<br/>rgba(0,0,0,.4)</div></div>
761
+ <div class="elev e-indigo"><div class="t">Blue glow</div><div class="d">0 8px 18px<br/>rgba(47,107,255,.5)</div></div>
762
+ <div class="elev e-cyan"><div class="t">Light-blue glow</div><div class="d">0 8px 18px<br/>rgba(97,147,255,.42)</div></div>
763
+ <div class="elev e-violet"><div class="t">Discover glow</div><div class="d">0 8px 18px<br/>rgba(99,83,242,.42)</div></div>
764
+ <div class="elev" style="background:linear-gradient(135deg,#1B45B8,#3E7BFF); box-shadow:var(--glow-indigo); border-color:transparent;">
765
+ <div class="t" style="color:#FFFFFF">Gradient + glow</div><div class="d" style="color:#EAF1FF;opacity:.8">primary CTA recipe</div>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </section>
770
+
771
+ <!-- ============ COMPONENTS ============ -->
772
+ <section id="components">
773
+ <div class="wrap">
774
+ <div class="eyebrow">06 — Components</div>
775
+ <h2 class="sec">Component library</h2>
776
+ <p class="sec-sub">Reference styling for the core UI primitives. Each block notes the matching React Native component name from the template.</p>
777
+
778
+ <div class="comp-grid">
779
+ <!-- BUTTONS -->
780
+ <div class="panel">
781
+ <div class="label-row"><h3>Buttons</h3><span class="cnote">PrimaryButton</span></div>
782
+ <div class="stack">
783
+ <button class="btn btn-solid">Continue <span class="btn-arrow">&rarr;</span></button>
784
+ <button class="btn btn-outline">Outline action</button>
785
+ <button class="btn btn-ghost">Borderless link</button>
786
+ <button class="btn btn-danger">Delete account</button>
787
+ </div>
788
+ </div>
789
+
790
+ <!-- TEXT INPUT -->
791
+ <div class="panel">
792
+ <div class="label-row"><h3>Text input</h3><span class="cnote">PrimaryTextInput</span></div>
793
+ <div class="stack">
794
+ <div class="field">
795
+ <label>Email</label>
796
+ <div class="input"><span class="ico">&#9993;</span><span>you@studio.dev</span></div>
797
+ <span class="help">We never share your address.</span>
798
+ </div>
799
+ <div class="field">
800
+ <label>Password</label>
801
+ <div class="input focus"><span class="ico">&#128274;</span><span class="ph">Enter password</span></div>
802
+ <span class="help" style="color:var(--cyan-soft)">Focused state · blue ring</span>
803
+ </div>
804
+ <div class="field err">
805
+ <label>Phone</label>
806
+ <div class="input"><span class="ico">&#9742;</span><span>+20 100 000</span></div>
807
+ <span class="help">Enter a valid phone number.</span>
808
+ </div>
809
+ </div>
810
+ </div>
811
+
812
+ <!-- SURFACE / CARD -->
813
+ <div class="panel">
814
+ <div class="label-row"><h3>Surface card</h3><span class="cnote">Container</span></div>
815
+ <div class="stack">
816
+ <div class="surface-card">
817
+ <div class="ttl">Available balance</div>
818
+ <div class="val">$ 12,480.00</div>
819
+ <div class="sub">&#8599; +4.2% this month</div>
820
+ </div>
821
+ </div>
822
+ </div>
823
+
824
+ <!-- BADGES -->
825
+ <div class="panel">
826
+ <div class="label-row"><h3>Badges &amp; pills</h3><span class="cnote">Badge</span></div>
827
+ <div class="badges" style="margin-top:6px;">
828
+ <span class="badge b-solid">Pro</span>
829
+ <span class="badge b-indigo b-dot">Active</span>
830
+ <span class="badge b-cyan b-dot">New</span>
831
+ <span class="badge b-success b-dot">Paid</span>
832
+ <span class="badge b-warn b-dot">Pending</span>
833
+ <span class="badge b-error b-dot">Failed</span>
834
+ </div>
835
+ <div class="badges" style="margin-top:16px;">
836
+ <span class="badge b-indigo">#design-system</span>
837
+ <span class="badge b-indigo">#mobile</span>
838
+ <span class="badge b-indigo">#react-native</span>
839
+ </div>
840
+ </div>
841
+
842
+ <!-- LIST STATES -->
843
+ <div class="panel" style="grid-column:1 / -1;">
844
+ <div class="label-row"><h3>List states</h3><span class="cnote">FlatListWrapper</span></div>
845
+ <div class="state-grid">
846
+ <div class="state empty">
847
+ <div class="ring"><span class="glyph">&#9783;</span></div>
848
+ <div class="st">Nothing here yet</div>
849
+ <div class="sd">Empty state — your first item will appear here.</div>
850
+ </div>
851
+ <div class="state loading">
852
+ <div class="ring"></div>
853
+ <div class="st">Loading</div>
854
+ <div class="sd">Fetching the latest data from the server.</div>
855
+ </div>
856
+ <div class="state error-s">
857
+ <div class="ring"><span class="glyph">&#9888;</span></div>
858
+ <div class="st">Something went wrong</div>
859
+ <div class="sd">Error state — pull to refresh or retry.</div>
860
+ </div>
861
+ </div>
862
+ <div class="shimmer-rows" style="margin-top:20px;">
863
+ <div class="sh-row"><div class="sh tall sh-chip"></div><div class="sh-lines"><div class="sh w70"></div><div class="sh w40"></div></div></div>
864
+ <div class="sh-row"><div class="sh tall sh-chip"></div><div class="sh-lines"><div class="sh w70"></div><div class="sh w40"></div></div></div>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- TAB BAR -->
869
+ <div class="panel" style="grid-column:1 / -1;">
870
+ <div class="label-row"><h3>Bottom tab bar</h3><span class="cnote">TabBar</span></div>
871
+ <div class="tabbar-wrap" style="margin-top:6px;">
872
+ <div class="tabbar">
873
+ <div class="tab active">
874
+ <svg class="ti-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l-2 0 9-9 9 9-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/><path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"/></svg>
875
+ <span class="lbl">Home</span>
876
+ </div>
877
+ <div class="tab">
878
+ <svg class="ti-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="M21 21l-6-6"/></svg>
879
+ <span class="lbl">Search</span>
880
+ </div>
881
+ <div class="tab">
882
+ <svg class="ti-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19a8 8 0 0 1 16 0"/><circle cx="12" cy="7" r="4"/></svg>
883
+ <span class="lbl">Wallet</span>
884
+ </div>
885
+ <div class="tab">
886
+ <svg class="ti-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg>
887
+ <span class="lbl">Alerts</span>
888
+ </div>
889
+ <div class="tab">
890
+ <svg class="ti-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
891
+ <span class="lbl">Profile</span>
892
+ </div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+
898
+ <!-- ===== Form controls ===== -->
899
+ <div class="comp-group">Form controls</div>
900
+ <p class="comp-group-sub">Inputs and selections that capture data — built on the same dark field surface with a blue focus ring and red error state.</p>
901
+ <div class="comp-grid">
902
+
903
+ <!-- AppTextInput -->
904
+ <div class="panel">
905
+ <div class="label-row"><h3>App text input</h3><span class="cnote">AppTextInput</span></div>
906
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Label + field with default, focused, error, and password states.</p>
907
+ <div class="stack">
908
+ <div class="field">
909
+ <label>Full name</label>
910
+ <div class="input"><span>Jane Cooper</span></div>
911
+ </div>
912
+ <div class="field">
913
+ <label>Email</label>
914
+ <div class="input focus"><span>jane@studio.dev</span></div>
915
+ <span class="help" style="color:var(--cyan-soft)">Focused · blue border #2F6BFF</span>
916
+ </div>
917
+ <div class="field err">
918
+ <label>Phone</label>
919
+ <div class="input"><span>+20 100</span></div>
920
+ <span class="help">Enter a valid phone number.</span>
921
+ </div>
922
+ <div class="field">
923
+ <label>Password</label>
924
+ <div class="input"><span class="ph">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span><span class="ati-eye">&#128065;</span></div>
925
+ </div>
926
+ </div>
927
+ </div>
928
+
929
+ <!-- Dropdown -->
930
+ <div class="panel">
931
+ <div class="label-row"><h3>Dropdown</h3><span class="cnote">Dropdown</span></div>
932
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Selected value + chevron; opens a menu card with the active row in blue.</p>
933
+ <div class="stack">
934
+ <div class="field">
935
+ <label>Country</label>
936
+ <div class="dd-field"><span>Egypt</span><span class="chev">&#9662;</span></div>
937
+ </div>
938
+ <div class="dd-menu">
939
+ <div class="dd-opt">United States</div>
940
+ <div class="dd-opt sel">Egypt <span class="ok">&#10003;</span></div>
941
+ <div class="dd-opt">United Kingdom</div>
942
+ </div>
943
+ </div>
944
+ </div>
945
+
946
+ <!-- Checkbox -->
947
+ <div class="panel">
948
+ <div class="label-row"><h3>Checkbox</h3><span class="cnote">Checkbox</span></div>
949
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Blue fill + white check when on; hairline outline when off.</p>
950
+ <div class="stack">
951
+ <div class="cbx-row"><span class="cbx on">&#10003;</span><span class="mini-label">Email me product updates</span></div>
952
+ <div class="cbx-row"><span class="cbx"></span><span class="mini-label">Subscribe to the newsletter</span></div>
953
+ </div>
954
+ </div>
955
+
956
+ <!-- AppSwitch -->
957
+ <div class="panel">
958
+ <div class="label-row"><h3>Switch</h3><span class="cnote">AppSwitch</span></div>
959
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Blue track when on, neutral track when off.</p>
960
+ <div class="stack">
961
+ <div class="mini-row"><span class="sw-track on"><span class="knob"></span></span><span class="mini-label">Push notifications</span></div>
962
+ <div class="mini-row"><span class="sw-track"><span class="knob"></span></span><span class="mini-label">Face ID unlock</span></div>
963
+ </div>
964
+ </div>
965
+
966
+ <!-- RadioGroup -->
967
+ <div class="panel">
968
+ <div class="label-row"><h3>Radio group</h3><span class="cnote">RadioGroup</span></div>
969
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">One option selected with a glowing blue dot.</p>
970
+ <div class="stack">
971
+ <div class="mini-row"><span class="radio on"></span><span class="mini-label">Standard delivery</span></div>
972
+ <div class="mini-row"><span class="radio"></span><span class="mini-label">Express delivery</span></div>
973
+ <div class="mini-row"><span class="radio"></span><span class="mini-label">Pick up in store</span></div>
974
+ </div>
975
+ </div>
976
+
977
+ <!-- SegmentedControl -->
978
+ <div class="panel">
979
+ <div class="label-row"><h3>Segmented control</h3><span class="cnote">SegmentedControl</span></div>
980
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Active segment filled with the signature gradient + white label.</p>
981
+ <div class="stack">
982
+ <div class="seg">
983
+ <div class="sgm on">Day</div>
984
+ <div class="sgm">Week</div>
985
+ <div class="sgm">Month</div>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <!-- ===== Selection & display ===== -->
992
+ <div class="comp-group">Selection &amp; display</div>
993
+ <p class="comp-group-sub">Compact elements that summarize, filter, or identify — chips, avatars, badges, and rows.</p>
994
+ <div class="comp-grid">
995
+
996
+ <!-- Chip -->
997
+ <div class="panel">
998
+ <div class="label-row"><h3>Chip</h3><span class="cnote">Chip</span></div>
999
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Filter pills — one selected in blue, the rest outlined.</p>
1000
+ <div class="chips">
1001
+ <span class="chp on">All</span>
1002
+ <span class="chp">Design</span>
1003
+ <span class="chp">Mobile</span>
1004
+ <span class="chp">Web</span>
1005
+ <span class="chp">AI</span>
1006
+ </div>
1007
+ </div>
1008
+
1009
+ <!-- Avatar -->
1010
+ <div class="panel">
1011
+ <div class="label-row"><h3>Avatar</h3><span class="cnote">Avatar</span></div>
1012
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Initials on the blue gradient, in two sizes.</p>
1013
+ <div class="avas">
1014
+ <span class="ava lg">JC</span>
1015
+ <span class="ava sm">FS</span>
1016
+ </div>
1017
+ </div>
1018
+
1019
+ <!-- Badge -->
1020
+ <div class="panel">
1021
+ <div class="label-row"><h3>Badge</h3><span class="cnote">Badge</span></div>
1022
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Status counters — primary, success, error, and neutral.</p>
1023
+ <div class="badges" style="margin-top:6px;">
1024
+ <span class="badge b-solid">Primary</span>
1025
+ <span class="badge b-success">Success</span>
1026
+ <span class="badge b-error">Error</span>
1027
+ <span class="badge" style="background:rgba(130,139,176,.16);color:var(--n-200);border:1px solid var(--hairline-strong);">128</span>
1028
+ </div>
1029
+ </div>
1030
+
1031
+ <!-- ListItem -->
1032
+ <div class="panel">
1033
+ <div class="label-row"><h3>List item</h3><span class="cnote">ListItem</span></div>
1034
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Leading avatar/icon, title + subtitle, trailing chevron or switch.</p>
1035
+ <div class="li-card">
1036
+ <div class="li">
1037
+ <span class="ava sm" style="width:40px;height:40px;font-size:14px;">JC</span>
1038
+ <div class="li-body"><div class="li-title">Jane Cooper</div><div class="li-sub">Product designer</div></div>
1039
+ <span class="chev">&#8250;</span>
1040
+ </div>
1041
+ <div class="li">
1042
+ <span class="ava sm" style="width:40px;height:40px;font-size:14px;background:var(--grad-violet);">RT</span>
1043
+ <div class="li-body"><div class="li-title">Robert Fox</div><div class="li-sub">Last seen 2h ago</div></div>
1044
+ <span class="chev">&#8250;</span>
1045
+ </div>
1046
+ <div class="li">
1047
+ <span class="sc-ico" style="width:40px;height:40px;">&#128276;</span>
1048
+ <div class="li-body"><div class="li-title">Notifications</div><div class="li-sub">Push, email &amp; SMS</div></div>
1049
+ <span class="sw-track on" style="margin-left:auto;"><span class="knob"></span></span>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+ </div>
1054
+
1055
+ <!-- ===== Carousel ===== -->
1056
+ <div class="comp-group">Carousel</div>
1057
+ <p class="comp-group-sub">Horizontally paged and scrolling surfaces for featured content and card decks.</p>
1058
+ <div class="comp-grid">
1059
+
1060
+ <!-- Carousel -->
1061
+ <div class="panel">
1062
+ <div class="label-row"><h3>Carousel</h3><span class="cnote">Carousel</span></div>
1063
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Full-bleed gradient slide with pagination — active dot elongated in blue.</p>
1064
+ <div class="carousel">
1065
+ <div>
1066
+ <div class="c-kicker">Featured</div>
1067
+ <div class="c-ttl">Ship your next idea with Magic</div>
1068
+ </div>
1069
+ <div class="dots"><span class="d on"></span><span class="d"></span><span class="d"></span></div>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <!-- CardScroller -->
1074
+ <div class="panel">
1075
+ <div class="label-row"><h3>Card scroller</h3><span class="cnote">CardScroller</span></div>
1076
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Horizontally arranged cards that peek to hint at scroll.</p>
1077
+ <div class="scroller">
1078
+ <div class="sc-card">
1079
+ <span class="sc-ico">&#9889;</span>
1080
+ <div><div class="sc-ttl">Quick start</div><div class="sc-sub">Scaffold in seconds</div></div>
1081
+ </div>
1082
+ <div class="sc-card">
1083
+ <span class="sc-ico">&#9670;</span>
1084
+ <div><div class="sc-ttl">Tokens</div><div class="sc-sub">Colors &amp; sizes</div></div>
1085
+ </div>
1086
+ <div class="sc-card">
1087
+ <span class="sc-ico">&#9788;</span>
1088
+ <div><div class="sc-ttl">Themes</div><div class="sc-sub">Light &amp; dark</div></div>
1089
+ </div>
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <!-- ===== Overlays & feedback ===== -->
1095
+ <div class="comp-group">Overlays &amp; feedback</div>
1096
+ <p class="comp-group-sub">Sheets, dialogs, and loading placeholders that layer over content or stand in while it loads.</p>
1097
+ <div class="comp-grid">
1098
+
1099
+ <!-- AppBottomSheet -->
1100
+ <div class="panel">
1101
+ <div class="label-row"><h3>Bottom sheet</h3><span class="cnote">AppBottomSheet</span></div>
1102
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Rounded-top dark card with a grabber handle, title, and rows.</p>
1103
+ <div class="sheet-stage">
1104
+ <div class="sheet">
1105
+ <div class="grabber"></div>
1106
+ <div class="sh-ttl">Share to</div>
1107
+ <div class="sh-opt"><span class="ico">&#128279;</span>Copy link<span class="chev">&#8250;</span></div>
1108
+ <div class="sh-opt"><span class="ico">&#9993;</span>Send via email<span class="chev">&#8250;</span></div>
1109
+ <div class="sh-opt"><span class="ico">&#11015;</span>Download<span class="chev">&#8250;</span></div>
1110
+ </div>
1111
+ </div>
1112
+ </div>
1113
+
1114
+ <!-- ModalDialog -->
1115
+ <div class="panel">
1116
+ <div class="label-row"><h3>Modal dialog</h3><span class="cnote">ModalDialog</span></div>
1117
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Centered card over a dim backdrop with a destructive primary action.</p>
1118
+ <div class="modal-stage">
1119
+ <div class="modal">
1120
+ <div class="m-ttl">Delete account?</div>
1121
+ <div class="m-msg">This permanently removes your account and all associated data. This action can't be undone.</div>
1122
+ <div class="m-actions">
1123
+ <button class="btn btn-outline">Cancel</button>
1124
+ <button class="btn btn-danger">Delete</button>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <!-- Skeleton -->
1131
+ <div class="panel">
1132
+ <div class="label-row"><h3>Skeleton</h3><span class="cnote">Skeleton</span></div>
1133
+ <p style="font-size:12px;color:var(--muted);margin:0 0 14px;">Shimmering placeholder bars in the muted surface colour.</p>
1134
+ <div class="sk-card">
1135
+ <div class="sh" style="height:14px;width:55%;"></div>
1136
+ <div class="sh" style="height:11px;"></div>
1137
+ <div class="sh" style="height:11px;width:80%;"></div>
1138
+ <div class="sh" style="height:11px;width:40%;"></div>
1139
+ </div>
1140
+ </div>
1141
+ </div>
1142
+ </div>
1143
+ </section>
1144
+
1145
+ <!-- ============ FOOTER ============ -->
1146
+ <footer class="foot">
1147
+ <div class="wrap">
1148
+ <div class="fl">
1149
+ <svg width="40" height="40" viewBox="0 0 120 120" fill="none" role="img" aria-label="FS logo">
1150
+ <defs><linearGradient id="chipFoot" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
1151
+ <rect width="120" height="120" rx="30" fill="url(#chipFoot)"/>
1152
+ <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
1153
+ <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
1154
+ <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
1155
+ <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
1156
+ </svg>
1157
+ </div>
1158
+ <div class="ft"><b>React Native Magic</b> · Design System · by Fady Shawky</div>
1159
+ <div class="ft" style="margin-top:6px; font-size:12px;">@fadyshawky/react-native-magic</div>
1160
+ </div>
1161
+ </footer>
1162
+
1163
+ </body>
1164
+ </html>