omnira-ui 0.1.1 → 0.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 (69) hide show
  1. package/README.md +43 -15
  2. package/app/globals.css +347 -0
  3. package/cli/omnira-init.mjs +154 -46
  4. package/components/ui/ActivityGauge/ActivityGauge.module.css +109 -0
  5. package/components/ui/ActivityGauge/ActivityGauge.tsx +87 -0
  6. package/components/ui/ActivityGauge/index.ts +2 -0
  7. package/components/ui/AppStoreButton/AppStoreButton.tsx +1 -1
  8. package/components/ui/Avatar/Avatar.tsx +1 -1
  9. package/components/ui/Badge/Badge.tsx +1 -1
  10. package/components/ui/BadgeGroup/BadgeGroup.tsx +1 -1
  11. package/components/ui/Browser/Browser.tsx +1 -1
  12. package/components/ui/Button/Button.tsx +1 -1
  13. package/components/ui/ButtonUtility/ButtonUtility.tsx +1 -1
  14. package/components/ui/Calendar/Calendar.module.css +492 -0
  15. package/components/ui/Calendar/Calendar.tsx +445 -0
  16. package/components/ui/Calendar/config.ts +130 -0
  17. package/components/ui/Calendar/index.ts +4 -0
  18. package/components/ui/Card/Card.tsx +1 -1
  19. package/components/ui/CardHeader/CardHeader.module.css +79 -0
  20. package/components/ui/CardHeader/CardHeader.tsx +45 -0
  21. package/components/ui/CardHeader/index.ts +2 -0
  22. package/components/ui/Checkbox/Checkbox.tsx +1 -1
  23. package/components/ui/Collapse/Collapse.tsx +1 -1
  24. package/components/ui/CreditCard/CreditCard.tsx +1 -1
  25. package/components/ui/Dropdown/Dropdown.tsx +1 -1
  26. package/components/ui/EmptyState/EmptyState.module.css +65 -0
  27. package/components/ui/EmptyState/EmptyState.tsx +37 -0
  28. package/components/ui/EmptyState/index.ts +2 -0
  29. package/components/ui/Illustration/Illustration.tsx +1 -1
  30. package/components/ui/Input/Input.tsx +1 -1
  31. package/components/ui/Metric/Metric.module.css +140 -0
  32. package/components/ui/Metric/Metric.tsx +78 -0
  33. package/components/ui/Metric/index.ts +2 -0
  34. package/components/ui/PageHeader/PageHeader.module.css +128 -0
  35. package/components/ui/PageHeader/PageHeader.tsx +61 -0
  36. package/components/ui/PageHeader/index.ts +2 -0
  37. package/components/ui/Phone/Phone.tsx +1 -1
  38. package/components/ui/PinInput/PinInput.tsx +1 -1
  39. package/components/ui/ProgressBar/ProgressBar.tsx +1 -1
  40. package/components/ui/QRCode/QRCode.tsx +1 -1
  41. package/components/ui/RadioButton/RadioButton.tsx +1 -1
  42. package/components/ui/RadioGroup/RadioGroup.tsx +1 -1
  43. package/components/ui/Rating/Rating.tsx +1 -1
  44. package/components/ui/Select/Select.tsx +1 -1
  45. package/components/ui/SidebarNavigation/SidebarDual.tsx +1 -1
  46. package/components/ui/SidebarNavigation/SidebarFeatureCard.tsx +4 -4
  47. package/components/ui/SidebarNavigation/SidebarParts.tsx +1 -1
  48. package/components/ui/SidebarNavigation/SidebarSectionDividers.tsx +1 -1
  49. package/components/ui/SidebarNavigation/SidebarSectionHeadings.tsx +1 -1
  50. package/components/ui/SidebarNavigation/SidebarSimple.tsx +1 -1
  51. package/components/ui/SidebarNavigation/SidebarSlim.tsx +1 -1
  52. package/components/ui/Slider/Slider.tsx +1 -1
  53. package/components/ui/SocialButton/SocialButton.tsx +1 -1
  54. package/components/ui/Table/Table.module.css +444 -0
  55. package/components/ui/Table/Table.tsx +547 -0
  56. package/components/ui/Table/customers.json +74 -0
  57. package/components/ui/Table/index.ts +14 -0
  58. package/components/ui/Table/invoices.json +92 -0
  59. package/components/ui/Table/orders.json +108 -0
  60. package/components/ui/Table/team-members.json +130 -0
  61. package/components/ui/Table/uploaded-files.json +53 -0
  62. package/components/ui/Tag/Tag.tsx +1 -1
  63. package/components/ui/TextEditor/TextEditor.tsx +1 -1
  64. package/components/ui/Textarea/Textarea.tsx +1 -1
  65. package/components/ui/Toggle/Toggle.tsx +1 -1
  66. package/components/ui/Tooltip/Tooltip.tsx +1 -1
  67. package/components/ui/VideoPlayer/VideoPlayer.tsx +1 -1
  68. package/lib/theme-context.tsx +79 -0
  69. package/package.json +3 -1
package/README.md CHANGED
@@ -10,33 +10,55 @@ A premium glassmorphism design system — dark-first, glass-forward, no compromi
10
10
 
11
11
  ## Quick Start
12
12
 
13
- ### 1. Install
13
+ ### 1. Scaffold your project
14
14
 
15
15
  ```bash
16
- npm install omnira-ui
17
- # or
18
- pnpm add omnira-ui
16
+ npx omnira-ui init
19
17
  ```
20
18
 
21
- ### 2. Initialize your project
19
+ The CLI scaffolds the full design system into your project:
20
+
21
+ - **32 base components** → `components/ui/`
22
+ - **Utility helpers** → `lib/cn.ts`, `lib/copy-to-clipboard.ts`
23
+ - **Theme provider** → `lib/theme-context.tsx` (system preference detection + toggle)
24
+ - **Design tokens** → `app/globals.css` (all CSS custom properties)
25
+ - **Accent overrides** → `omnira-overrides.css` (if non-default color)
26
+ - **Config file** → `omnira.config.ts`
27
+
28
+ You choose:
29
+ - **Accent color** — 10 presets: Lime (default), Blue, Cyan, Green, Orange, Pink, Purple, Red, Teal, Yellow
30
+ - **Theme mode** — Dark-first or Light-first (respects system preference)
31
+
32
+ ### 2. Install peer dependencies
22
33
 
23
34
  ```bash
24
- npx omnira-ui init
35
+ npm install iconsax-react
25
36
  ```
26
37
 
27
- The CLI walks you through:
28
- - **Project name**
29
- - **Accent color** — 10 presets: Lime (default), Blue, Cyan, Green, Orange, Pink, Purple, Red, Teal, Yellow
30
- - **Theme mode** — Dark-first or Light-first
38
+ ### 3. Set up your layout
39
+
40
+ ```tsx
41
+ // app/layout.tsx
42
+ import "./globals.css";
43
+ import { Providers } from "./providers";
31
44
 
32
- It generates `omnira.config.ts` and `omnira-overrides.css` ready to import in your root layout.
45
+ export default function RootLayout({ children }) {
46
+ return (
47
+ <html data-theme="dark">
48
+ <body>
49
+ <Providers>{children}</Providers>
50
+ </body>
51
+ </html>
52
+ );
53
+ }
54
+ ```
33
55
 
34
- ### 3. Use components
56
+ ### 4. Use components
35
57
 
36
58
  ```tsx
37
- import { Button } from "omnira-ui/components/ui/Button";
38
- import { Badge } from "omnira-ui/components/ui/Badge";
39
- import { Input } from "omnira-ui/components/ui/Input";
59
+ import { Button } from "@/components/ui/Button";
60
+ import { Badge } from "@/components/ui/Badge";
61
+ import { Input } from "@/components/ui/Input";
40
62
 
41
63
  export default function MyPage() {
42
64
  return (
@@ -49,6 +71,12 @@ export default function MyPage() {
49
71
  }
50
72
  ```
51
73
 
74
+ ### 5. Need more components?
75
+
76
+ Browse the full library and copy advanced components (Sidebar, Feature Cards, etc.) directly from the docs:
77
+
78
+ **[ui.omnira.space →](https://ui.omnira.space)**
79
+
52
80
  ---
53
81
 
54
82
  ## Components
package/app/globals.css ADDED
@@ -0,0 +1,347 @@
1
+ /* ============================================
2
+ Omnira UI — Design System CSS Variables
3
+ ============================================ */
4
+
5
+ /* --- Font Faces --- */
6
+ @font-face {
7
+ font-family: "Host Grotesk";
8
+ src: url("/fonts/HostGrotesk-Bold.woff2") format("woff2");
9
+ font-weight: 700;
10
+ font-style: normal;
11
+ font-display: swap;
12
+ }
13
+
14
+ /* --- CSS Custom Properties: Dark Mode (Default) --- */
15
+ [data-theme="dark"] {
16
+ --color-lime: #D2FE17;
17
+ --color-lime-hover: #c0e616;
18
+ --color-lime-gradient: #ABC928;
19
+ --color-lime-text: #121212;
20
+
21
+ --color-bg-primary: #202020;
22
+ --color-bg-secondary: #1a1a1a;
23
+ --color-bg-card: rgba(248, 248, 248, 0.03);
24
+ --color-bg-elevated: rgba(248, 248, 248, 0.06);
25
+ --color-bg-input: rgba(248, 248, 248, 0.04);
26
+ --color-bg-hover: rgba(248, 248, 248, 0.05);
27
+ --color-bg-overlay: rgba(10, 10, 10, 0.97);
28
+ --color-bg-sidebar: #1a1a1a;
29
+
30
+ --color-text-primary: rgba(248, 248, 248, 0.95);
31
+ --color-text-secondary: rgba(248, 248, 248, 0.70);
32
+ --color-text-tertiary: rgba(248, 248, 248, 0.50);
33
+
34
+ --color-border-subtle: rgba(255, 255, 255, 0.05);
35
+ --color-border-standard: rgba(255, 255, 255, 0.06);
36
+ --color-border-medium: rgba(255, 255, 255, 0.08);
37
+ --color-border-strong: rgba(255, 255, 255, 0.15);
38
+
39
+ --color-border-lime-subtle: rgba(210, 254, 23, 0.1);
40
+ --color-border-lime-medium: rgba(210, 254, 23, 0.15);
41
+ --color-border-lime-strong: rgba(210, 254, 23, 0.3);
42
+
43
+ --color-bg-lime-subtle: rgba(210, 254, 23, 0.06);
44
+ --color-bg-lime-medium: rgba(210, 254, 23, 0.08);
45
+ --color-bg-lime-strong: rgba(210, 254, 23, 0.12);
46
+
47
+ --color-error: #ef4444;
48
+ --color-warning: #ffbd2e;
49
+ --color-success: #28c840;
50
+ --color-info: #3b82f6;
51
+
52
+ --color-error-bg: rgba(239, 68, 68, 0.08);
53
+ --color-error-border: rgba(239, 68, 68, 0.15);
54
+ --color-warning-bg: rgba(255, 189, 46, 0.08);
55
+ --color-warning-border: rgba(255, 189, 46, 0.15);
56
+ --color-success-bg: rgba(40, 200, 64, 0.08);
57
+ --color-success-border: rgba(40, 200, 64, 0.15);
58
+ --color-info-bg: rgba(59, 130, 246, 0.08);
59
+ --color-info-border: rgba(59, 130, 246, 0.15);
60
+
61
+ --shadow-card: inset 2px 4px 16px rgba(248, 248, 248, 0.06), 0px 8px 32px rgba(0, 0, 0, 0.2);
62
+ --shadow-card-light: inset 1px 2px 12px rgba(248, 248, 248, 0.03), 0px 8px 28px rgba(0, 0, 0, 0.12);
63
+ --shadow-card-accent: inset 2px 4px 16px rgba(210, 254, 23, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2);
64
+ --shadow-card-hover: inset 2px 4px 16px rgba(248, 248, 248, 0.08), 0px 12px 40px rgba(0, 0, 0, 0.28);
65
+ --shadow-btn-primary: 0 8px 24px rgba(210, 254, 23, 0.3);
66
+ --shadow-glow-lime: 0 0 8px rgba(210, 254, 23, 0.6), 0 0 16px rgba(210, 254, 23, 0.3);
67
+
68
+ --gradient-text: linear-gradient(93deg, rgba(248, 248, 248, 0.9), rgba(248, 248, 248, 0.5));
69
+ --gradient-framework: linear-gradient(124deg, rgba(248, 248, 248, 0.04) 0%, rgba(248, 248, 248, 0.01) 46.5%), linear-gradient(180deg, rgba(248, 248, 248, 0.03) 0%, rgba(248, 248, 248, 0.00) 100%);
70
+ --gradient-progress: linear-gradient(90deg, #D2FE17, #e5ff54);
71
+
72
+ --blur-standard: blur(50px);
73
+ --radius-sm: 8px;
74
+ --radius-md: 14px;
75
+ --radius-lg: 20px;
76
+ --radius-xl: 28px;
77
+ --radius-2xl: 32px;
78
+ --radius-3xl: 40px;
79
+ --radius-full: 100px;
80
+
81
+ --toggle-track-off: rgba(248, 248, 248, 0.1);
82
+ --color-grid-line: rgba(248, 248, 248, 0.05);
83
+ }
84
+
85
+ /* --- CSS Custom Properties: Light Mode --- */
86
+ [data-theme="light"] {
87
+ --color-lime: #8AB400;
88
+ --color-lime-hover: #7DA310;
89
+ --color-lime-gradient: #6B9A00;
90
+ --color-lime-text: #ffffff;
91
+
92
+ --color-bg-primary: #f5f5f7;
93
+ --color-bg-secondary: #ebebed;
94
+ --color-bg-card: rgba(255, 255, 255, 0.7);
95
+ --color-bg-elevated: rgba(255, 255, 255, 0.9);
96
+ --color-bg-input: rgba(0, 0, 0, 0.03);
97
+ --color-bg-hover: rgba(0, 0, 0, 0.04);
98
+ --color-bg-overlay: rgba(255, 255, 255, 0.97);
99
+ --color-bg-sidebar: #ffffff;
100
+
101
+ --color-text-primary: rgba(18, 18, 18, 0.95);
102
+ --color-text-secondary: rgba(18, 18, 18, 0.65);
103
+ --color-text-tertiary: rgba(18, 18, 18, 0.45);
104
+
105
+ --color-border-subtle: rgba(0, 0, 0, 0.06);
106
+ --color-border-standard: rgba(0, 0, 0, 0.08);
107
+ --color-border-medium: rgba(0, 0, 0, 0.10);
108
+ --color-border-strong: rgba(0, 0, 0, 0.18);
109
+
110
+ --color-border-lime-subtle: rgba(138, 180, 0, 0.15);
111
+ --color-border-lime-medium: rgba(138, 180, 0, 0.25);
112
+ --color-border-lime-strong: rgba(138, 180, 0, 0.4);
113
+
114
+ --color-bg-lime-subtle: rgba(138, 180, 0, 0.06);
115
+ --color-bg-lime-medium: rgba(138, 180, 0, 0.10);
116
+ --color-bg-lime-strong: rgba(138, 180, 0, 0.15);
117
+
118
+ --color-error: #dc2626;
119
+ --color-warning: #d97706;
120
+ --color-success: #16a34a;
121
+ --color-info: #2563eb;
122
+
123
+ --color-error-bg: rgba(220, 38, 38, 0.06);
124
+ --color-error-border: rgba(220, 38, 38, 0.15);
125
+ --color-warning-bg: rgba(217, 119, 6, 0.06);
126
+ --color-warning-border: rgba(217, 119, 6, 0.15);
127
+ --color-success-bg: rgba(22, 163, 74, 0.06);
128
+ --color-success-border: rgba(22, 163, 74, 0.15);
129
+ --color-info-bg: rgba(37, 99, 235, 0.06);
130
+ --color-info-border: rgba(37, 99, 235, 0.15);
131
+
132
+ --shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.04), 0px 6px 24px rgba(0, 0, 0, 0.06);
133
+ --shadow-card-light: 0px 1px 2px rgba(0, 0, 0, 0.03), 0px 4px 16px rgba(0, 0, 0, 0.04);
134
+ --shadow-card-accent: 0px 2px 8px rgba(138, 180, 0, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06);
135
+ --shadow-card-hover: 0px 2px 6px rgba(0, 0, 0, 0.06), 0px 12px 36px rgba(0, 0, 0, 0.1);
136
+ --shadow-btn-primary: 0 6px 20px rgba(138, 180, 0, 0.25);
137
+ --shadow-glow-lime: 0 0 6px rgba(138, 180, 0, 0.4), 0 0 12px rgba(138, 180, 0, 0.2);
138
+
139
+ --gradient-text: linear-gradient(93deg, rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.55));
140
+ --gradient-framework: linear-gradient(124deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 46.5%), linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
141
+ --gradient-progress: linear-gradient(90deg, #8AB400, #a5d600);
142
+
143
+ --blur-standard: blur(50px);
144
+ --radius-sm: 8px;
145
+ --radius-md: 14px;
146
+ --radius-lg: 20px;
147
+ --radius-xl: 28px;
148
+ --radius-2xl: 32px;
149
+ --radius-3xl: 40px;
150
+ --radius-full: 100px;
151
+
152
+ --toggle-track-off: rgba(0, 0, 0, 0.12);
153
+ --color-grid-line: rgba(0, 0, 0, 0.06);
154
+ }
155
+
156
+ /* --- Font Variables --- */
157
+ :root {
158
+ --font-display: "Host Grotesk", sans-serif;
159
+ --font-body: "Rubik", sans-serif;
160
+ }
161
+
162
+ /* --- Global Reset & Base Styles --- */
163
+ *,
164
+ *::before,
165
+ *::after {
166
+ box-sizing: border-box;
167
+ padding: 0;
168
+ margin: 0;
169
+ }
170
+
171
+ html,
172
+ body {
173
+ max-width: 100vw;
174
+ overflow-x: hidden;
175
+ }
176
+
177
+ html {
178
+ scroll-behavior: smooth;
179
+ }
180
+
181
+ body {
182
+ font-family: var(--font-body);
183
+ font-size: 16px;
184
+ font-weight: 400;
185
+ line-height: 1.6;
186
+ color: var(--color-text-primary);
187
+ background: var(--color-bg-primary);
188
+ -webkit-font-smoothing: antialiased;
189
+ -moz-osx-font-smoothing: grayscale;
190
+ transition: background 0.4s ease, color 0.4s ease;
191
+ }
192
+
193
+ a {
194
+ color: inherit;
195
+ text-decoration: none;
196
+ }
197
+
198
+ button {
199
+ font-family: inherit;
200
+ cursor: pointer;
201
+ }
202
+
203
+ input,
204
+ textarea,
205
+ select {
206
+ font-family: inherit;
207
+ }
208
+
209
+ img {
210
+ max-width: 100%;
211
+ display: block;
212
+ }
213
+
214
+ /* --- Typography Utility Classes --- */
215
+ .gradient-text {
216
+ background-image: var(--gradient-text);
217
+ -webkit-background-clip: text;
218
+ -webkit-text-fill-color: transparent;
219
+ background-clip: text;
220
+ }
221
+
222
+ .lime-text {
223
+ color: var(--color-lime);
224
+ }
225
+
226
+ .font-display {
227
+ font-family: var(--font-display);
228
+ }
229
+
230
+ .font-body {
231
+ font-family: var(--font-body);
232
+ }
233
+
234
+ /* --- Glass Card Utility --- */
235
+ .glass-card {
236
+ border-radius: var(--radius-2xl);
237
+ background: var(--color-bg-card);
238
+ border: 1.5px solid var(--color-border-standard);
239
+ box-shadow: var(--shadow-card);
240
+ backdrop-filter: var(--blur-standard);
241
+ transition: all 0.35s ease;
242
+ }
243
+
244
+ .glass-card:hover {
245
+ transform: translateY(-4px);
246
+ box-shadow: var(--shadow-card-hover);
247
+ }
248
+
249
+ /* --- Icon Box Utility --- */
250
+ .icon-box {
251
+ display: flex;
252
+ justify-content: center;
253
+ align-items: center;
254
+ width: 48px;
255
+ height: 48px;
256
+ border-radius: var(--radius-md);
257
+ background: var(--color-bg-lime-subtle);
258
+ border: 1px solid var(--color-border-lime-subtle);
259
+ transition: all 0.3s;
260
+ }
261
+
262
+ /* --- Status Dots --- */
263
+ .dot-active {
264
+ background: var(--color-lime);
265
+ box-shadow: var(--shadow-glow-lime);
266
+ }
267
+
268
+ .dot-warning {
269
+ background: var(--color-warning);
270
+ box-shadow: 0 0 8px rgba(255, 189, 46, 0.5);
271
+ }
272
+
273
+ .dot-error {
274
+ background: var(--color-error);
275
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
276
+ }
277
+
278
+ /* --- Animations --- */
279
+ @keyframes fadeInUp {
280
+ from {
281
+ opacity: 0;
282
+ transform: translateY(24px);
283
+ }
284
+ to {
285
+ opacity: 1;
286
+ transform: translateY(0);
287
+ }
288
+ }
289
+
290
+ @keyframes scaleIn {
291
+ from {
292
+ opacity: 0;
293
+ transform: scale(0.5);
294
+ }
295
+ to {
296
+ opacity: 1;
297
+ transform: scale(1);
298
+ }
299
+ }
300
+
301
+ @keyframes livePulse {
302
+ 0%, 100% {
303
+ opacity: 1;
304
+ box-shadow: 0 0 0 0 rgba(210, 254, 23, 0.4);
305
+ }
306
+ 50% {
307
+ opacity: 0.7;
308
+ box-shadow: 0 0 0 6px rgba(210, 254, 23, 0);
309
+ }
310
+ }
311
+
312
+ @keyframes pulse {
313
+ 0%, 100% {
314
+ transform: scale(1);
315
+ opacity: 1;
316
+ }
317
+ 50% {
318
+ transform: scale(1.06);
319
+ opacity: 0.85;
320
+ }
321
+ }
322
+
323
+ @keyframes button-circle {
324
+ 0% { transform: translateX(0) rotate(0); }
325
+ 25% { transform: translateX(-30px) rotate(90deg); }
326
+ 50% { transform: translateX(0) rotate(180deg); }
327
+ 75% { transform: translateX(30px) rotate(270deg); }
328
+ 100% { transform: translateX(0) rotate(360deg); }
329
+ }
330
+
331
+ /* --- Scrollbar Styling --- */
332
+ ::-webkit-scrollbar {
333
+ width: 6px;
334
+ }
335
+
336
+ ::-webkit-scrollbar-track {
337
+ background: transparent;
338
+ }
339
+
340
+ ::-webkit-scrollbar-thumb {
341
+ background: var(--color-border-medium);
342
+ border-radius: 3px;
343
+ }
344
+
345
+ ::-webkit-scrollbar-thumb:hover {
346
+ background: var(--color-border-strong);
347
+ }