supa-ui 0.0.0-stage → 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 (60) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +52 -2
  4. package/dist/index.d.ts +30 -0
  5. package/dist/index.js +25 -0
  6. package/dist/layout/container.d.ts +5 -0
  7. package/dist/layout/container.js +12 -0
  8. package/dist/layout/footer.d.ts +13 -0
  9. package/dist/layout/footer.js +6 -0
  10. package/dist/layout/header.d.ts +19 -0
  11. package/dist/layout/header.js +5 -0
  12. package/dist/layout/layout.d.ts +10 -0
  13. package/dist/layout/layout.js +5 -0
  14. package/dist/layout/navbar.d.ts +17 -0
  15. package/dist/layout/navbar.js +19 -0
  16. package/dist/layout/sidebar.d.ts +10 -0
  17. package/dist/layout/sidebar.js +11 -0
  18. package/dist/lib/cn.d.ts +1 -0
  19. package/dist/lib/cn.js +4 -0
  20. package/dist/shared/empty-state.d.ts +11 -0
  21. package/dist/shared/empty-state.js +14 -0
  22. package/dist/shared/loading-state.d.ts +5 -0
  23. package/dist/shared/loading-state.js +6 -0
  24. package/dist/shared/page-header.d.ts +8 -0
  25. package/dist/shared/page-header.js +5 -0
  26. package/dist/styles.css +2 -0
  27. package/dist/toastly/provider.d.ts +3 -0
  28. package/dist/toastly/provider.js +111 -0
  29. package/dist/toastly/toastly.d.ts +28 -0
  30. package/dist/toastly/toastly.js +92 -0
  31. package/dist/toastly/types.d.ts +36 -0
  32. package/dist/toastly/types.js +1 -0
  33. package/dist/ui/avatar.d.ts +7 -0
  34. package/dist/ui/avatar.js +12 -0
  35. package/dist/ui/badge.d.ts +6 -0
  36. package/dist/ui/badge.js +15 -0
  37. package/dist/ui/button.d.ts +10 -0
  38. package/dist/ui/button.js +18 -0
  39. package/dist/ui/card.d.ts +12 -0
  40. package/dist/ui/card.js +20 -0
  41. package/dist/ui/checkbox.d.ts +6 -0
  42. package/dist/ui/checkbox.js +8 -0
  43. package/dist/ui/dropdown.d.ts +19 -0
  44. package/dist/ui/dropdown.js +43 -0
  45. package/dist/ui/input.d.ts +10 -0
  46. package/dist/ui/input.js +19 -0
  47. package/dist/ui/link.d.ts +11 -0
  48. package/dist/ui/link.js +17 -0
  49. package/dist/ui/modal.d.ts +12 -0
  50. package/dist/ui/modal.js +28 -0
  51. package/dist/ui/select.d.ts +14 -0
  52. package/dist/ui/select.js +17 -0
  53. package/dist/ui/spinner.d.ts +5 -0
  54. package/dist/ui/spinner.js +6 -0
  55. package/dist/ui/tabs.d.ts +16 -0
  56. package/dist/ui/tabs.js +39 -0
  57. package/dist/ui/textarea.d.ts +7 -0
  58. package/dist/ui/textarea.js +10 -0
  59. package/package.json +58 -4
  60. package/src/theme.css +130 -0
package/src/theme.css ADDED
@@ -0,0 +1,130 @@
1
+ @custom-variant dark (&:where(.dark, .dark *));
2
+
3
+ :root {
4
+ color-scheme: light;
5
+
6
+ --sui-background: #ffffff;
7
+ --sui-foreground: #171717;
8
+
9
+ --sui-card: #ffffff;
10
+ --sui-card-foreground: #171717;
11
+
12
+ --sui-primary: #3ecf8e;
13
+ --sui-primary-foreground: #032b1c;
14
+
15
+ --sui-secondary: #f1f5f3;
16
+ --sui-secondary-foreground: #333d38;
17
+
18
+ --sui-muted: #f5f5f5;
19
+ --sui-muted-foreground: #737373;
20
+
21
+ --sui-accent: #f0f2f0;
22
+ --sui-accent-foreground: #171717;
23
+
24
+ --sui-border: #e5e7eb;
25
+ --sui-field: #ffffff;
26
+ --sui-control: #d4d4d4;
27
+ --sui-control-hover: #a3a3a3;
28
+ --sui-button: #e5e5e5;
29
+ --sui-foreground-muted: #737373;
30
+ --sui-foreground-light: #525252;
31
+ --sui-input: #e5e7eb;
32
+ --sui-ring: #3ecf8e;
33
+ --sui-destructive: #dc2626;
34
+ --sui-destructive-foreground: #ffffff;
35
+ --sui-popover: #ffffff;
36
+ --sui-border-strong: #d4d4d4;
37
+ --sui-foreground-lighter: #525252;
38
+ --sui-button-shadow-raised: 0 1px 2px rgb(0 0 0 / 10%), inset 0 1px 0 rgb(255 255 255 / 15%);
39
+ }
40
+
41
+ .dark {
42
+ color-scheme: dark;
43
+
44
+ --sui-field: #1c1c1c;
45
+ --sui-control: #383838;
46
+ --sui-control-hover: #525252;
47
+ --sui-button: #404040;
48
+ --sui-foreground-muted: #858585;
49
+ --sui-foreground-light: #b0b0b0;
50
+ --sui-background: #171717;
51
+ --sui-foreground: #ededed;
52
+
53
+ --sui-card: #1c1c1c;
54
+ --sui-card-foreground: #ededed;
55
+
56
+ --sui-primary: #3ecf8e;
57
+ --sui-primary-foreground: #032b1c;
58
+
59
+ --sui-secondary: #292929;
60
+ --sui-secondary-foreground: #ededed;
61
+
62
+ --sui-muted: #262626;
63
+ --sui-muted-foreground: #a3a3a3;
64
+
65
+ --sui-accent: #292929;
66
+ --sui-accent-foreground: #ededed;
67
+
68
+ --sui-border: #333333;
69
+ --sui-input: #333333;
70
+ --sui-ring: #3ecf8e;
71
+ --sui-destructive: #ef4444;
72
+ --sui-destructive-foreground: #ffffff;
73
+ --sui-popover: #1c1c1c;
74
+ --sui-border-strong: #454545;
75
+ --sui-foreground-lighter: #b0b0b0;
76
+ --sui-button-shadow-raised: 0 1px 2px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 8%);
77
+ }
78
+
79
+ @theme inline {
80
+ --color-background: var(--sui-background);
81
+ --color-foreground: var(--sui-foreground);
82
+
83
+ --color-card: var(--sui-card);
84
+ --color-card-foreground: var(--sui-card-foreground);
85
+
86
+ --color-primary: var(--sui-primary);
87
+ --color-primary-foreground: var(--sui-primary-foreground);
88
+
89
+ --color-secondary: var(--sui-secondary);
90
+ --color-secondary-foreground: var(--sui-secondary-foreground);
91
+
92
+ --color-muted: var(--sui-muted);
93
+ --color-muted-foreground: var(--sui-muted-foreground);
94
+
95
+ --color-accent: var(--sui-accent);
96
+ --color-accent-foreground: var(--sui-accent-foreground);
97
+
98
+ --color-border: var(--sui-border);
99
+ --color-field: var(--sui-field);
100
+ --color-control: var(--sui-control);
101
+ --color-control-hover: var(--sui-control-hover);
102
+ --color-button: var(--sui-button);
103
+ --color-foreground-muted: var(--sui-foreground-muted);
104
+ --color-foreground-light: var(--sui-foreground-light);
105
+ --color-input: var(--sui-input);
106
+ --color-ring: var(--sui-ring);
107
+
108
+ --color-destructive: var(--sui-destructive);
109
+ --color-destructive-foreground: var(--sui-destructive-foreground);
110
+ --color-popover: var(--sui-popover);
111
+ --color-border-strong: var(--sui-border-strong);
112
+ --color-foreground-lighter: var(--sui-foreground-lighter);
113
+ }
114
+
115
+ @layer base {
116
+ body {
117
+ background-color: var(--sui-background);
118
+ color: var(--sui-foreground);
119
+ }
120
+ }
121
+
122
+ @keyframes sui-toast-in {
123
+ from { opacity: 0; transform: translateY(12px) scale(0.97); }
124
+ to { opacity: 1; transform: translateY(0) scale(1); }
125
+ }
126
+
127
+ @keyframes sui-pop-in {
128
+ from { opacity: 0; transform: scale(0.96); }
129
+ to { opacity: 1; transform: scale(1); }
130
+ }