sdga-ui 1.0.5 → 1.0.7

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 (79) hide show
  1. package/.github/workflows/deploy.yml +15 -1
  2. package/README.md +16 -24
  3. package/css/dga-ui.css +4146 -1055
  4. package/css/dga-ui.css.map +1 -1
  5. package/demo-angular/README.md +34 -2
  6. package/demo-angular/angular.json +6 -1
  7. package/demo-angular/package-lock.json +191 -50
  8. package/demo-angular/package.json +14 -11
  9. package/demo-angular/public/404.html +35 -0
  10. package/demo-angular/public/i18n/ar.json +50 -0
  11. package/demo-angular/public/i18n/en.json +50 -0
  12. package/demo-angular/src/app/app.routes.ts +12 -4
  13. package/demo-angular/src/app/app.ts +8 -2
  14. package/demo-angular/src/app/views/alerts/alerts.component.html +10 -10
  15. package/demo-angular/src/app/views/alerts/alerts.component.ts +10 -10
  16. package/demo-angular/src/app/views/buttons/buttons.component.html +23 -23
  17. package/demo-angular/src/app/views/buttons/buttons.component.ts +14 -14
  18. package/demo-angular/src/app/views/cards/cards.component.html +6 -6
  19. package/demo-angular/src/app/views/cards/cards.component.ts +10 -10
  20. package/demo-angular/src/app/views/contexts/contexts.component.html +204 -0
  21. package/demo-angular/src/app/views/contexts/contexts.component.ts +10 -0
  22. package/demo-angular/src/app/views/footer/footer.html +282 -0
  23. package/demo-angular/src/app/views/footer/footer.spec.ts +23 -0
  24. package/demo-angular/src/app/views/footer/footer.ts +142 -0
  25. package/demo-angular/src/app/views/header/header.html +1 -0
  26. package/demo-angular/src/app/views/header/header.scss +0 -0
  27. package/demo-angular/src/app/views/header/header.spec.ts +23 -0
  28. package/demo-angular/src/app/views/header/header.ts +11 -0
  29. package/demo-angular/src/app/views/home/home.component.html +0 -5
  30. package/demo-angular/src/app/views/links/links.component.html +11 -130
  31. package/demo-angular/src/app/views/links/links.component.scss +1 -50
  32. package/demo-angular/src/app/views/links/links.component.ts +5 -109
  33. package/demo-angular/src/app/views/toasts/toasts.component.html +7 -7
  34. package/demo-angular/src/app/views/toasts/toasts.component.ts +7 -7
  35. package/demo-angular/src/index.html +15 -1
  36. package/package.json +3 -2
  37. package/sdga-ui/README.md +45 -0
  38. package/sdga-ui/content/docs/components/alerts.mdx +475 -0
  39. package/sdga-ui/content/docs/index.mdx +239 -0
  40. package/sdga-ui/next.config.mjs +10 -0
  41. package/sdga-ui/package-lock.json +5851 -0
  42. package/sdga-ui/package.json +32 -0
  43. package/sdga-ui/postcss.config.mjs +5 -0
  44. package/sdga-ui/source.config.ts +27 -0
  45. package/sdga-ui/src/app/(home)/layout.tsx +6 -0
  46. package/sdga-ui/src/app/(home)/page.tsx +202 -0
  47. package/sdga-ui/src/app/api/search/route.ts +7 -0
  48. package/sdga-ui/src/app/docs/[[...slug]]/page.tsx +54 -0
  49. package/sdga-ui/src/app/docs/layout.tsx +11 -0
  50. package/sdga-ui/src/app/global.css +3 -0
  51. package/sdga-ui/src/app/layout.tsx +25 -0
  52. package/sdga-ui/src/app/llms-full.txt/route.ts +10 -0
  53. package/sdga-ui/src/app/og/docs/[...slug]/route.tsx +34 -0
  54. package/sdga-ui/src/app/sdga-scoped.css +7 -0
  55. package/sdga-ui/src/components/sdga-preview.tsx +105 -0
  56. package/sdga-ui/src/lib/layout.shared.tsx +9 -0
  57. package/sdga-ui/src/lib/source.ts +27 -0
  58. package/sdga-ui/src/mdx-components.tsx +9 -0
  59. package/sdga-ui/tsconfig.json +46 -0
  60. package/theme/_variables.scss +7 -5
  61. package/theme/components/_buttons.scss +105 -0
  62. package/theme/components/_cards.scss +0 -1
  63. package/theme/components/_pagination.scss +2 -2
  64. package/theme/config/_base.scss +4 -33
  65. package/theme/config/_contexts.scss +471 -0
  66. package/theme/customizations/_alerts.scss +105 -125
  67. package/theme/customizations/_badges.scss +15 -0
  68. package/theme/customizations/_buttons.scss +288 -146
  69. package/theme/customizations/_cards.scss +52 -0
  70. package/theme/customizations/_contexts.scss +432 -0
  71. package/theme/customizations/_footer.scss +83 -0
  72. package/theme/customizations/_links.scss +88 -84
  73. package/theme/customizations/_toasts.scss +81 -101
  74. package/theme/dga-ui.scss +3 -2
  75. package/demo-angular/src/app/views/bootstrap/bootstrap.component.html +0 -14
  76. package/demo-angular/src/app/views/bootstrap/bootstrap.component.scss +0 -91
  77. package/demo-angular/src/app/views/bootstrap/bootstrap.component.ts +0 -23
  78. package/theme/customizations/_utilities.scss +0 -138
  79. /package/demo-angular/{public/.nojekyll → src/app/views/footer/footer.scss} +0 -0
package/demo-angular/src/index.html CHANGED
@@ -5,8 +5,22 @@
5
5
  <title>DemoAngular</title>
6
6
  <base href="/">
7
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
8
- <link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css" />
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
9
9
  <link rel="icon" type="image/x-icon" href="favicon.ico">
10
+ <script>
11
+ // Handle redirect from 404.html on GitHub Pages for SPA routes
12
+ (function() {
13
+ var redirect = sessionStorage.getItem('ghspa-redirect');
14
+ if (redirect) {
15
+ sessionStorage.removeItem('ghspa-redirect');
16
+ var data = JSON.parse(redirect);
17
+ if (data.path) {
18
+ var newUrl = data.path + (data.query || '') + (data.hash || '');
19
+ history.replaceState(null, '', newUrl);
20
+ }
21
+ }
22
+ })();
23
+ </script>
10
24
  </head>
11
25
  <body>
12
26
  <app-root></app-root>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdga-ui",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "DGA UI - Government-Style Bootstrap Theme",
5
5
  "keywords": [
6
6
  "sdga",
@@ -32,9 +32,10 @@
32
32
  "format:check": "prettier --check \"**/*.{js,json,md,css,scss}\"",
33
33
  "build-css": "sass --load-path=node_modules theme/dga-ui.scss css/dga-ui.css",
34
34
  "watch-css": "sass --load-path=node_modules --watch theme/dga-ui.scss css/dga-ui.css",
35
+ "update-demo-version": "node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json'));const demoPkg=JSON.parse(fs.readFileSync('demo-angular/package.json'));demoPkg.version=pkg.version;demoPkg.dependencies['sdga-ui']='^'+pkg.version;fs.writeFileSync('demo-angular/package.json',JSON.stringify(demoPkg,null,2)+'\\n');console.log('Synced demo-angular version to',pkg.version);\"",
35
36
  "prepublishOnly": "npm run build-css",
36
37
  "preversion": "npm run build-css",
37
- "version": "git add .",
38
+ "version": "npm run update-demo-version && git add .",
38
39
  "postversion": "git push --follow-tags"
39
40
  },
40
41
  "peerDependencies": {
package/sdga-ui/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # sdga-ui
2
+
3
+ This is a Next.js application generated with
4
+ [Create Fumadocs](https://github.com/fuma-nama/fumadocs).
5
+
6
+ Run development server:
7
+
8
+ ```bash
9
+ npm run dev
10
+ # or
11
+ pnpm dev
12
+ # or
13
+ yarn dev
14
+ ```
15
+
16
+ Open http://localhost:3000 with your browser to see the result.
17
+
18
+ ## Explore
19
+
20
+ In the project, you can see:
21
+
22
+ - `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
23
+ - `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
24
+
25
+ | Route | Description |
26
+ | ------------------------- | ------------------------------------------------------ |
27
+ | `app/(home)` | The route group for your landing page and other pages. |
28
+ | `app/docs` | The documentation layout and pages. |
29
+ | `app/api/search/route.ts` | The Route Handler for search. |
30
+
31
+ ### Fumadocs MDX
32
+
33
+ A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
34
+
35
+ Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
36
+
37
+ ## Learn More
38
+
39
+ To learn more about Next.js and Fumadocs, take a look at the following
40
+ resources:
41
+
42
+ - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
43
+ features and API.
44
+ - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
45
+ - [Fumadocs](https://fumadocs.dev) - learn about Fumadocs
package/sdga-ui/content/docs/components/alerts.mdx ADDED
@@ -0,0 +1,475 @@
1
+ ---
2
+ title: Alerts
3
+ description: Provide contextual feedback messages for typical user actions with alert components
4
+ ---
5
+
6
+ import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
7
+ import { Callout } from 'fumadocs-ui/components/callout';
8
+ import { SdgaPreview } from '@/components/sdga-preview';
9
+
10
+ # Alerts
11
+
12
+ Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
13
+
14
+ <Callout title="Bootstrap Based" type="info">
15
+ SDGA UI alerts are built on top of Bootstrap alerts with additional styling and variants.
16
+ </Callout>
17
+
18
+ ## Standard Alerts
19
+
20
+ Standard alerts with icon, title, content, action buttons, and dismiss functionality.
21
+
22
+ ### Success Alert
23
+
24
+ <SdgaPreview html={`
25
+ <div class="alert alert-success alert-dismissible fade show" role="alert">
26
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
27
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
28
+ </svg>
29
+ <div>
30
+ <strong class="alert-title">Success!</strong> Your action completed successfully.
31
+ <div class="alert-footer">
32
+ <button type="button" class="btn btn-subtle">Action</button>
33
+ <button type="button" class="btn btn-subtle">Cancel</button>
34
+ </div>
35
+ </div>
36
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
37
+ </div>
38
+ `} />
39
+
40
+ ```html
41
+ <div class="alert alert-success alert-dismissible fade show" role="alert">
42
+ <i class="alert-icon">✓</i>
43
+ <div>
44
+ <strong class="alert-title">Success!</strong> Your action completed successfully.
45
+ <div class="alert-footer">
46
+ <button type="button" class="btn btn-subtle">Action</button>
47
+ <button type="button" class="btn btn-subtle">Cancel</button>
48
+ </div>
49
+ </div>
50
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
51
+ </div>
52
+ ```
53
+
54
+ ### Danger Alert
55
+
56
+ <SdgaPreview html={`
57
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
58
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
59
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
60
+ </svg>
61
+ <div>
62
+ <strong class="alert-title">Error!</strong> Something went wrong with your request.
63
+ <div class="alert-footer">
64
+ <button type="button" class="btn btn-subtle">Retry</button>
65
+ <button type="button" class="btn btn-subtle">Cancel</button>
66
+ </div>
67
+ </div>
68
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
69
+ </div>
70
+ `} />
71
+
72
+ ```html
73
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
74
+ <i class="alert-icon">⚠</i>
75
+ <div>
76
+ <strong class="alert-title">Error!</strong> Something went wrong with your request.
77
+ <div class="alert-footer">
78
+ <button type="button" class="btn btn-subtle">Retry</button>
79
+ <button type="button" class="btn btn-subtle">Cancel</button>
80
+ </div>
81
+ </div>
82
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
83
+ </div>
84
+ ```
85
+
86
+ ### Warning Alert
87
+
88
+ <SdgaPreview html={`
89
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
90
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
91
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
92
+ </svg>
93
+ <div>
94
+ <strong class="alert-title">Warning!</strong> Please review before proceeding.
95
+ <div class="alert-footer">
96
+ <button type="button" class="btn btn-subtle">Review</button>
97
+ <button type="button" class="btn btn-subtle">Dismiss</button>
98
+ </div>
99
+ </div>
100
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
101
+ </div>
102
+ `} />
103
+
104
+ ```html
105
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
106
+ <i class="alert-icon">⚠</i>
107
+ <div>
108
+ <strong class="alert-title">Warning!</strong> Please review before proceeding.
109
+ <div class="alert-footer">
110
+ <button type="button" class="btn btn-subtle">Review</button>
111
+ <button type="button" class="btn btn-subtle">Dismiss</button>
112
+ </div>
113
+ </div>
114
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
115
+ </div>
116
+ ```
117
+
118
+ ### Info Alert
119
+
120
+ <SdgaPreview html={`
121
+ <div class="alert alert-info alert-dismissible fade show" role="alert">
122
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
123
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
124
+ </svg>
125
+ <div>
126
+ <strong class="alert-title">Info</strong> Here's some helpful information.
127
+ <div class="alert-footer">
128
+ <button type="button" class="btn btn-subtle">Learn More</button>
129
+ <button type="button" class="btn btn-subtle">Dismiss</button>
130
+ </div>
131
+ </div>
132
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
133
+ </div>
134
+ `} />
135
+
136
+ ```html
137
+ <div class="alert alert-info alert-dismissible fade show" role="alert">
138
+ <i class="alert-icon">ℹ</i>
139
+ <div>
140
+ <strong class="alert-title">Info</strong> Here's some helpful information.
141
+ <div class="alert-footer">
142
+ <button type="button" class="btn btn-subtle">Learn More</button>
143
+ <button type="button" class="btn btn-subtle">Dismiss</button>
144
+ </div>
145
+ </div>
146
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
147
+ </div>
148
+ ```
149
+
150
+ ### Neutral Alert
151
+
152
+ <SdgaPreview html={`
153
+ <div class="alert alert-neutral alert-dismissible fade show" role="alert">
154
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
155
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
156
+ </svg>
157
+ <div>
158
+ <strong class="alert-title">Neutral</strong> Standard notification message.
159
+ <div class="alert-footer">
160
+ <button type="button" class="btn btn-subtle">Action</button>
161
+ <button type="button" class="btn btn-subtle">Cancel</button>
162
+ </div>
163
+ </div>
164
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
165
+ </div>
166
+ `} />
167
+
168
+ ```html
169
+ <div class="alert alert-neutral alert-dismissible fade show" role="alert">
170
+ <i class="alert-icon">ℹ</i>
171
+ <div>
172
+ <strong class="alert-title">Neutral</strong> Standard notification message.
173
+ <div class="alert-footer">
174
+ <button type="button" class="btn btn-subtle">Action</button>
175
+ <button type="button" class="btn btn-subtle">Cancel</button>
176
+ </div>
177
+ </div>
178
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
179
+ </div>
180
+ ```
181
+
182
+ ---
183
+
184
+ ## Side-bordered Alerts
185
+
186
+ Add the `.alert-side` class for alerts with a colored side border instead of full background.
187
+
188
+ ### Success Side Alert
189
+
190
+ <SdgaPreview html={`
191
+ <div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
192
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
193
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
194
+ </svg>
195
+ <div>
196
+ <strong class="alert-title">Success!</strong> Your action completed successfully.
197
+ <div class="alert-footer">
198
+ <button type="button" class="btn btn-subtle">Action</button>
199
+ <button type="button" class="btn btn-subtle">Cancel</button>
200
+ </div>
201
+ </div>
202
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
203
+ </div>
204
+ `} />
205
+
206
+ ```html
207
+ <div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
208
+ <i class="alert-icon">✓</i>
209
+ <div>
210
+ <strong class="alert-title">Success!</strong> Your action completed successfully.
211
+ <div class="alert-footer">
212
+ <button type="button" class="btn btn-subtle">Action</button>
213
+ <button type="button" class="btn btn-subtle">Cancel</button>
214
+ </div>
215
+ </div>
216
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
217
+ </div>
218
+ ```
219
+
220
+ ### Danger Side Alert
221
+
222
+ <SdgaPreview html={`
223
+ <div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
224
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
225
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
226
+ </svg>
227
+ <div>
228
+ <strong class="alert-title">Error!</strong> Something went wrong with your request.
229
+ <div class="alert-footer">
230
+ <button type="button" class="btn btn-subtle">Retry</button>
231
+ <button type="button" class="btn btn-subtle">Cancel</button>
232
+ </div>
233
+ </div>
234
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
235
+ </div>
236
+ `} />
237
+
238
+ ```html
239
+ <div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
240
+ <i class="alert-icon">⚠</i>
241
+ <div>
242
+ <strong class="alert-title">Error!</strong> Something went wrong with your request.
243
+ <div class="alert-footer">
244
+ <button type="button" class="btn btn-subtle">Retry</button>
245
+ <button type="button" class="btn btn-subtle">Cancel</button>
246
+ </div>
247
+ </div>
248
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
249
+ </div>
250
+ ```
251
+
252
+ ### Warning Side Alert
253
+
254
+ <SdgaPreview html={`
255
+ <div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
256
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
257
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
258
+ </svg>
259
+ <div>
260
+ <strong class="alert-title">Warning!</strong> Please review before proceeding.
261
+ <div class="alert-footer">
262
+ <button type="button" class="btn btn-subtle">Review</button>
263
+ <button type="button" class="btn btn-subtle">Dismiss</button>
264
+ </div>
265
+ </div>
266
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
267
+ </div>
268
+ `} />
269
+
270
+ ```html
271
+ <div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
272
+ <i class="alert-icon">⚠</i>
273
+ <div>
274
+ <strong class="alert-title">Warning!</strong> Please review before proceeding.
275
+ <div class="alert-footer">
276
+ <button type="button" class="btn btn-subtle">Review</button>
277
+ <button type="button" class="btn btn-subtle">Dismiss</button>
278
+ </div>
279
+ </div>
280
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
281
+ </div>
282
+ ```
283
+
284
+ ### Info Side Alert
285
+
286
+ <SdgaPreview html={`
287
+ <div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
288
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
289
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
290
+ </svg>
291
+ <div>
292
+ <strong class="alert-title">Info</strong> Here's some helpful information.
293
+ <div class="alert-footer">
294
+ <button type="button" class="btn btn-subtle">Learn More</button>
295
+ <button type="button" class="btn btn-subtle">Dismiss</button>
296
+ </div>
297
+ </div>
298
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
299
+ </div>
300
+ `} />
301
+
302
+ ```html
303
+ <div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
304
+ <i class="alert-icon">ℹ</i>
305
+ <div>
306
+ <strong class="alert-title">Info</strong> Here's some helpful information.
307
+ <div class="alert-footer">
308
+ <button type="button" class="btn btn-subtle">Learn More</button>
309
+ <button type="button" class="btn btn-subtle">Dismiss</button>
310
+ </div>
311
+ </div>
312
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
313
+ </div>
314
+ ```
315
+
316
+ ### Neutral Side Alert
317
+
318
+ <SdgaPreview html={`
319
+ <div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
320
+ <svg class="alert-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
321
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
322
+ </svg>
323
+ <div>
324
+ <strong class="alert-title">Neutral</strong> Standard notification message.
325
+ <div class="alert-footer">
326
+ <button type="button" class="btn btn-subtle">Action</button>
327
+ <button type="button" class="btn btn-subtle">Cancel</button>
328
+ </div>
329
+ </div>
330
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
331
+ </div>
332
+ `} />
333
+
334
+ ```html
335
+ <div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
336
+ <i class="alert-icon">ℹ</i>
337
+ <div>
338
+ <strong class="alert-title">Neutral</strong> Standard notification message.
339
+ <div class="alert-footer">
340
+ <button type="button" class="btn btn-subtle">Action</button>
341
+ <button type="button" class="btn btn-subtle">Cancel</button>
342
+ </div>
343
+ </div>
344
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
345
+ </div>
346
+ ```
347
+
348
+ ---
349
+
350
+ ## Alert Structure
351
+
352
+ ### Basic Structure
353
+
354
+ ```html
355
+ <div class="alert alert-[variant]" role="alert">
356
+ <i class="alert-icon">[Icon]</i>
357
+ <div>
358
+ <strong class="alert-title">[Title]</strong>
359
+ [Message content]
360
+ </div>
361
+ </div>
362
+ ```
363
+
364
+ ### With Actions
365
+
366
+ ```html
367
+ <div class="alert alert-[variant]" role="alert">
368
+ <i class="alert-icon">[Icon]</i>
369
+ <div>
370
+ <strong class="alert-title">[Title]</strong>
371
+ [Message content]
372
+ <div class="alert-footer">
373
+ <button type="button" class="btn btn-subtle">Primary Action</button>
374
+ <button type="button" class="btn btn-subtle">Secondary Action</button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ ```
379
+
380
+ ### Dismissible
381
+
382
+ ```html
383
+ <div class="alert alert-[variant] alert-dismissible fade show" role="alert">
384
+ <i class="alert-icon">[Icon]</i>
385
+ <div>
386
+ <strong class="alert-title">[Title]</strong>
387
+ [Message content]
388
+ </div>
389
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
390
+ </div>
391
+ ```
392
+
393
+ ---
394
+
395
+ ## Variants
396
+
397
+ SDGA UI provides five alert variants:
398
+
399
+ - `.alert-success` - Success messages
400
+ - `.alert-danger` - Error messages
401
+ - `.alert-warning` - Warning messages
402
+ - `.alert-info` - Informational messages
403
+ - `.alert-neutral` - Neutral/default messages
404
+
405
+ ## Modifiers
406
+
407
+ - `.alert-side` - Side-bordered variant with subtle background
408
+ - `.alert-dismissible` - Adds dismiss button
409
+ - `.fade` and `.show` - For fade-out animation on dismiss
410
+
411
+ ## Classes Reference
412
+
413
+ | Class | Description |
414
+ |-------|-------------|
415
+ | `.alert` | Base alert class |
416
+ | `.alert-success` | Success variant |
417
+ | `.alert-danger` | Danger/error variant |
418
+ | `.alert-warning` | Warning variant |
419
+ | `.alert-info` | Info variant |
420
+ | `.alert-neutral` | Neutral variant |
421
+ | `.alert-side` | Side-bordered style |
422
+ | `.alert-dismissible` | Adds close button |
423
+ | `.alert-icon` | Icon element |
424
+ | `.alert-title` | Title/heading |
425
+ | `.alert-footer` | Footer with actions |
426
+ | `.btn-close` | Close/dismiss button |
427
+
428
+ ---
429
+
430
+ ## Accessibility
431
+
432
+ <Callout title="Important" type="warn">
433
+ Always include `role="alert"` on alert elements to ensure proper screen reader support.
434
+ </Callout>
435
+
436
+ - Use `role="alert"` for alert messages
437
+ - Provide `aria-label` on close buttons
438
+ - Use semantic color meanings (success = green, danger = red, etc.)
439
+ - Ensure sufficient color contrast
440
+ - Include meaningful icons that support the message
441
+
442
+ ---
443
+
444
+ ## JavaScript Behavior
445
+
446
+ Alerts use Bootstrap's built-in JavaScript for dismissible functionality:
447
+
448
+ ```html
449
+ <!-- Initialize via data attributes -->
450
+ <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
451
+ ```
452
+
453
+ Or programmatically:
454
+
455
+ ```javascript
456
+ // Close an alert
457
+ const alertElement = document.querySelector('.alert');
458
+ const alert = new bootstrap.Alert(alertElement);
459
+ alert.close();
460
+ ```
461
+
462
+ ---
463
+
464
+ ## RTL Support
465
+
466
+ All alerts support RTL (Right-to-Left) languages automatically when using `dir="rtl"`:
467
+
468
+ ```html
469
+ <html dir="rtl" lang="ar">
470
+ <!-- Alerts will automatically adjust for RTL -->
471
+ <div class="alert alert-success" role="alert">
472
+ رسالة نجاح بالعربية
473
+ </div>
474
+ </html>
475
+ ```