@neuravision/construct 1.1.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 (57) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +227 -0
  3. package/components/README.md +566 -0
  4. package/components/_keyframes.css +23 -0
  5. package/components/_shared.css +120 -0
  6. package/components/accordion.css +124 -0
  7. package/components/alert.css +67 -0
  8. package/components/avatar.css +127 -0
  9. package/components/badge.css +67 -0
  10. package/components/banner.css +247 -0
  11. package/components/breadcrumbs.css +152 -0
  12. package/components/button.css +145 -0
  13. package/components/card.css +76 -0
  14. package/components/checkbox.css +120 -0
  15. package/components/chip.css +361 -0
  16. package/components/combobox.css +385 -0
  17. package/components/components.css +2 -0
  18. package/components/data-table.css +93 -0
  19. package/components/datepicker.css +268 -0
  20. package/components/divider.css +73 -0
  21. package/components/drawer.css +167 -0
  22. package/components/dropdown.css +401 -0
  23. package/components/empty-state.css +97 -0
  24. package/components/field.css +42 -0
  25. package/components/file-upload.css +111 -0
  26. package/components/icon.css +31 -0
  27. package/components/index.css +49 -0
  28. package/components/input.css +64 -0
  29. package/components/list.css +474 -0
  30. package/components/modal.css +164 -0
  31. package/components/navbar.css +587 -0
  32. package/components/pagination.css +131 -0
  33. package/components/popover.css +231 -0
  34. package/components/progress-bar.css +56 -0
  35. package/components/select-menu.css +267 -0
  36. package/components/select.css +30 -0
  37. package/components/sidebar.css +183 -0
  38. package/components/skeleton.css +38 -0
  39. package/components/skip-link.css +38 -0
  40. package/components/slider.css +305 -0
  41. package/components/spinner.css +72 -0
  42. package/components/switch.css +82 -0
  43. package/components/table.css +139 -0
  44. package/components/tabs.css +147 -0
  45. package/components/textarea.css +16 -0
  46. package/components/toast.css +71 -0
  47. package/components/toggle-group.css +196 -0
  48. package/components/toolbar.css +222 -0
  49. package/components/tooltip.css +124 -0
  50. package/docs/guidelines.md +141 -0
  51. package/foundations.css +299 -0
  52. package/package.json +66 -0
  53. package/tokens/README.md +179 -0
  54. package/tokens/tokens.css +434 -0
  55. package/tokens/tokens.js +1188 -0
  56. package/tokens/tokens.json +810 -0
  57. package/tokens/tokens.ts +1188 -0
package/components/modal.css ADDED
@@ -0,0 +1,164 @@
1
+ .ct-modal {
2
+ position: fixed;
3
+ inset: 0;
4
+ display: grid;
5
+ place-items: center;
6
+ padding: var(--space-8);
7
+ background: var(--color-overlay-scrim);
8
+ z-index: var(--z-modal);
9
+ opacity: 0;
10
+ visibility: hidden;
11
+ pointer-events: none;
12
+ transition: opacity var(--duration-normal) var(--easing-standard),
13
+ visibility var(--duration-normal) var(--easing-standard);
14
+ }
15
+
16
+ .ct-modal[data-state='open'] {
17
+ opacity: 1;
18
+ visibility: visible;
19
+ pointer-events: auto;
20
+ }
21
+
22
+ .ct-modal__dialog {
23
+ width: min(90vw, 640px);
24
+ max-height: 85vh;
25
+ overflow: auto;
26
+ border-radius: var(--radius-modal);
27
+ border: var(--border-thin) solid var(--color-border-subtle);
28
+ background: var(--color-bg-elevated);
29
+ color: var(--color-text-primary);
30
+ box-shadow: var(--shadow-modal);
31
+ transform: translateY(12px) scale(0.98);
32
+ transition: transform var(--duration-normal) var(--easing-decelerate);
33
+ }
34
+
35
+ .ct-modal[data-state='open'] .ct-modal__dialog {
36
+ transform: translateY(0) scale(1);
37
+ }
38
+
39
+ .ct-modal__header {
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: space-between;
43
+ gap: var(--space-4);
44
+ padding: var(--space-7) var(--space-7) var(--space-4);
45
+ border-bottom: var(--border-thin) solid var(--color-border-subtle);
46
+ }
47
+
48
+ .ct-modal__header .ct-button__icon {
49
+ width: var(--icon-lg);
50
+ height: var(--icon-lg);
51
+ }
52
+
53
+ .ct-modal__body {
54
+ padding: var(--space-6) var(--space-7);
55
+ display: grid;
56
+ gap: var(--space-4);
57
+ }
58
+
59
+ .ct-modal__footer {
60
+ padding: var(--space-5) var(--space-7) var(--space-6);
61
+ border-top: var(--border-thin) solid var(--color-border-subtle);
62
+ display: flex;
63
+ justify-content: flex-end;
64
+ gap: var(--space-3);
65
+ flex-wrap: wrap;
66
+ }
67
+
68
+ /* Modal size variants */
69
+
70
+ .ct-modal--sm .ct-modal__dialog {
71
+ width: min(90vw, 480px);
72
+ }
73
+
74
+ .ct-modal--lg .ct-modal__dialog {
75
+ width: min(90vw, 800px);
76
+ }
77
+
78
+ .ct-modal--full .ct-modal__dialog {
79
+ width: min(95vw, 100vw);
80
+ max-height: 95vh;
81
+ }
82
+
83
+ /* Responsive: fullscreen on small viewports */
84
+
85
+ @media (max-width: 599px) { /* < sm breakpoint (600px) */
86
+ .ct-modal {
87
+ padding: 0;
88
+ }
89
+
90
+ .ct-modal__dialog {
91
+ width: 100vw;
92
+ max-height: 100vh;
93
+ border-radius: 0;
94
+ }
95
+ }
96
+
97
+ @media (prefers-reduced-motion: reduce) {
98
+ .ct-modal,
99
+ .ct-modal__dialog {
100
+ transition: none;
101
+ }
102
+ }
103
+
104
+ .ct-modal--confirmation .ct-modal__dialog {
105
+ width: min(90vw, 480px);
106
+ }
107
+
108
+ .ct-confirmation {
109
+ --ct-confirmation-icon-bg: var(--color-bg-muted);
110
+ --ct-confirmation-icon-color: var(--color-text-secondary);
111
+
112
+ display: grid;
113
+ grid-template-columns: auto 1fr;
114
+ gap: var(--space-4);
115
+ align-items: start;
116
+ }
117
+
118
+ .ct-confirmation__icon {
119
+ width: var(--ct-confirmation-icon-size);
120
+ height: var(--ct-confirmation-icon-size);
121
+ border-radius: var(--radius-round);
122
+ background: var(--ct-confirmation-icon-bg);
123
+ color: var(--ct-confirmation-icon-color);
124
+ display: inline-flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ font-weight: var(--font-weight-semibold);
128
+ }
129
+
130
+ .ct-confirmation__content {
131
+ display: grid;
132
+ gap: var(--space-2);
133
+ }
134
+
135
+ .ct-confirmation__title {
136
+ margin: 0;
137
+ font-size: var(--font-size-lg);
138
+ font-weight: var(--font-weight-semibold);
139
+ }
140
+
141
+ .ct-confirmation__description {
142
+ margin: 0;
143
+ color: var(--color-text-secondary);
144
+ }
145
+
146
+ .ct-confirmation[data-variant='info'] {
147
+ --ct-confirmation-icon-bg: var(--color-state-info-surface);
148
+ --ct-confirmation-icon-color: var(--color-state-info);
149
+ }
150
+
151
+ .ct-confirmation[data-variant='success'] {
152
+ --ct-confirmation-icon-bg: var(--color-state-success-surface);
153
+ --ct-confirmation-icon-color: var(--color-state-success);
154
+ }
155
+
156
+ .ct-confirmation[data-variant='warning'] {
157
+ --ct-confirmation-icon-bg: var(--color-state-warning-surface);
158
+ --ct-confirmation-icon-color: var(--color-state-warning-text);
159
+ }
160
+
161
+ .ct-confirmation[data-variant='danger'] {
162
+ --ct-confirmation-icon-bg: var(--color-state-danger-surface);
163
+ --ct-confirmation-icon-color: var(--color-state-danger);
164
+ }