@djangocfg/ui-core 2.1.411 → 2.1.413
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.
- package/package.json +4 -4
- package/src/components/data/avatar-group/index.tsx +224 -0
- package/src/components/data/badge-overflow/index.tsx +259 -0
- package/src/components/data/circular-progress/index.tsx +358 -0
- package/src/components/data/relative-time-card/index.tsx +191 -0
- package/src/components/data/stat/index.tsx +140 -0
- package/src/components/data/status/index.tsx +80 -0
- package/src/components/effects/GlowBackground.tsx +9 -1
- package/src/components/effects/swap/index.tsx +289 -0
- package/src/components/feedback/banner/index.tsx +693 -0
- package/src/components/forms/checkbox-group/index.tsx +243 -0
- package/src/components/forms/editable/index.tsx +420 -0
- package/src/components/forms/input-otp/index.tsx +12 -3
- package/src/components/forms/mask-input/index.tsx +466 -0
- package/src/components/forms/otp/index.tsx +12 -8
- package/src/components/forms/segmented-input/index.tsx +319 -0
- package/src/components/forms/tags-input/index.tsx +896 -0
- package/src/components/forms/time-picker/index.tsx +285 -0
- package/src/components/index.ts +51 -0
- package/src/components/layout/key-value/index.tsx +884 -0
- package/src/components/layout/stack/index.tsx +349 -0
- package/src/components/navigation/context-menu/index.tsx +9 -6
- package/src/components/navigation/stepper/index.tsx +1307 -0
- package/src/components/select/multi-select-pro-async.tsx +11 -2
- package/src/components/select/multi-select-pro.tsx +11 -2
- package/src/components/select/select.tsx +13 -3
- package/src/components/specialized/presence/index.tsx +181 -0
- package/src/components/specialized/primitive/index.tsx +83 -0
- package/src/components/specialized/visually-hidden/index.tsx +19 -0
- package/src/components/specialized/visually-hidden-input/index.tsx +99 -0
- package/src/hooks/dom/index.ts +4 -0
- package/src/hooks/dom/useFormReset.ts +49 -0
- package/src/hooks/dom/useLayoutEffect.ts +16 -0
- package/src/hooks/dom/useSize.ts +57 -0
- package/src/hooks/state/index.ts +4 -0
- package/src/hooks/state/useCallbackRef.ts +25 -0
- package/src/hooks/state/usePrevious.ts +20 -0
- package/src/hooks/state/useStateMachine.ts +29 -0
- package/src/lib/compose-event-handlers.ts +22 -0
- package/src/lib/compose-refs.ts +65 -0
- package/src/lib/create-context.tsx +62 -0
- package/src/lib/get-element-ref.ts +33 -0
- package/src/lib/index.ts +5 -0
- package/src/lib/styles.ts +103 -0
- package/src/styles/README.md +43 -0
- package/src/styles/palette/utils.ts +15 -5
- package/src/styles/utilities/animations.css +135 -0
- package/src/styles/utilities/display.css +62 -0
- package/src/styles/utilities/glass.css +57 -0
- package/src/styles/utilities/marquee.css +69 -0
- package/src/styles/utilities/step.css +25 -0
- package/src/styles/utilities.css +6 -259
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* Marquee Animations
|
|
3
|
+
* ============================================================================ */
|
|
4
|
+
|
|
5
|
+
@keyframes marquee-left {
|
|
6
|
+
from { transform: translateX(0); }
|
|
7
|
+
to { transform: translateX(-100%); }
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@keyframes marquee-left-rtl {
|
|
11
|
+
from { transform: translateX(0); }
|
|
12
|
+
to { transform: translateX(100%); }
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@keyframes marquee-right {
|
|
16
|
+
from { transform: translateX(-100%); }
|
|
17
|
+
to { transform: translateX(0); }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes marquee-right-rtl {
|
|
21
|
+
from { transform: translateX(100%); }
|
|
22
|
+
to { transform: translateX(0); }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@keyframes marquee-up {
|
|
26
|
+
from { transform: translateY(0); }
|
|
27
|
+
to { transform: translateY(-100%); }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes marquee-down {
|
|
31
|
+
from { transform: translateY(-100%); }
|
|
32
|
+
to { transform: translateY(0); }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.animate-marquee-left {
|
|
36
|
+
animation: marquee-left var(--marquee-duration, 20s) linear infinite;
|
|
37
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
38
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.animate-marquee-left-rtl {
|
|
42
|
+
animation: marquee-left-rtl var(--marquee-duration, 20s) linear infinite;
|
|
43
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
44
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.animate-marquee-right {
|
|
48
|
+
animation: marquee-right var(--marquee-duration, 20s) linear infinite;
|
|
49
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
50
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.animate-marquee-right-rtl {
|
|
54
|
+
animation: marquee-right-rtl var(--marquee-duration, 20s) linear infinite;
|
|
55
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
56
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.animate-marquee-up {
|
|
60
|
+
animation: marquee-up var(--marquee-duration, 20s) linear infinite;
|
|
61
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
62
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.animate-marquee-down {
|
|
66
|
+
animation: marquee-down var(--marquee-duration, 20s) linear infinite;
|
|
67
|
+
animation-delay: var(--marquee-delay, 0s);
|
|
68
|
+
animation-iteration-count: var(--marquee-loop-count, infinite);
|
|
69
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Step Counter Utility
|
|
3
|
+
* Used for numbered step indicators in documentation/tutorials
|
|
4
|
+
*/
|
|
5
|
+
.step {
|
|
6
|
+
counter-increment: step;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.step:before {
|
|
10
|
+
position: absolute;
|
|
11
|
+
width: 2.25rem;
|
|
12
|
+
height: 2.25rem;
|
|
13
|
+
background-color: var(--muted);
|
|
14
|
+
border-radius: 9999px;
|
|
15
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
text-align: center;
|
|
18
|
+
font-size: 1rem;
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
text-indent: -1px;
|
|
23
|
+
border: 4px solid var(--background);
|
|
24
|
+
content: counter(step);
|
|
25
|
+
}
|
package/src/styles/utilities.css
CHANGED
|
@@ -2,265 +2,12 @@
|
|
|
2
2
|
* Custom Utilities
|
|
3
3
|
* Utility classes that extend Tailwind CSS
|
|
4
4
|
* Compatible with Tailwind CSS v4
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Display font utility — for marketing headlines and large numeric stats.
|
|
9
|
-
*
|
|
10
|
-
* The font itself is NOT shipped here. Apps pick their own display font and
|
|
11
|
-
* expose it as `--font-display` on <html> (via `next/font`, `@font-face`, or
|
|
12
|
-
* equivalent). If the variable is missing, falls back to the system UI stack.
|
|
13
|
-
*
|
|
14
|
-
* @example (next/font in an app layout)
|
|
15
|
-
* const display = Plus_Jakarta_Sans({ weight: ['700', '800'], variable: '--font-display' });
|
|
16
|
-
* <html className={display.variable}>
|
|
17
|
-
*
|
|
18
|
-
* @example (usage)
|
|
19
|
-
* <h1 className="font-display text-7xl font-black tracking-tight">Ship fast.</h1>
|
|
20
|
-
*/
|
|
21
|
-
.font-display {
|
|
22
|
-
font-family: var(--font-display), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
23
|
-
font-feature-settings: 'ss01', 'ss03';
|
|
24
|
-
letter-spacing: -0.035em;
|
|
25
|
-
padding-bottom: 0.08em;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Screen Reader Only
|
|
30
|
-
* Hides content visually but keeps it accessible to screen readers
|
|
31
|
-
* Note: Using clip for better browser compatibility (clip-path may have issues)
|
|
32
|
-
*/
|
|
33
|
-
.sr-only {
|
|
34
|
-
position: absolute;
|
|
35
|
-
width: 1px;
|
|
36
|
-
height: 1px;
|
|
37
|
-
padding: 0;
|
|
38
|
-
margin: -1px;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
clip: rect(0, 0, 0, 0);
|
|
41
|
-
white-space: nowrap;
|
|
42
|
-
border-width: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Step Counter Utility
|
|
47
|
-
* Used for numbered step indicators in documentation/tutorials
|
|
48
|
-
*/
|
|
49
|
-
.step {
|
|
50
|
-
counter-increment: step;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.step:before {
|
|
54
|
-
position: absolute;
|
|
55
|
-
width: 2.25rem;
|
|
56
|
-
height: 2.25rem;
|
|
57
|
-
background-color: var(--muted);
|
|
58
|
-
border-radius: 9999px;
|
|
59
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
60
|
-
font-weight: 500;
|
|
61
|
-
text-align: center;
|
|
62
|
-
font-size: 1rem;
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: center;
|
|
65
|
-
justify-content: center;
|
|
66
|
-
text-indent: -1px;
|
|
67
|
-
border: 4px solid var(--background);
|
|
68
|
-
content: counter(step);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* MultiSelectPro Animation Classes
|
|
73
|
-
* Custom animations for the MultiSelectPro component
|
|
74
|
-
*/
|
|
75
|
-
|
|
76
|
-
/* Badge Animations */
|
|
77
|
-
@keyframes wiggle {
|
|
78
|
-
0%, 100% { transform: rotate(-3deg); }
|
|
79
|
-
50% { transform: rotate(3deg); }
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.animate-wiggle {
|
|
83
|
-
animation: wiggle 0.5s ease-in-out;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@keyframes fadeIn {
|
|
87
|
-
from { opacity: 0; }
|
|
88
|
-
to { opacity: 1; }
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.animate-fadeIn {
|
|
92
|
-
animation: fadeIn 0.3s ease-in-out;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
@keyframes slideIn {
|
|
96
|
-
from {
|
|
97
|
-
opacity: 0;
|
|
98
|
-
transform: translateY(-10px);
|
|
99
|
-
}
|
|
100
|
-
to {
|
|
101
|
-
opacity: 1;
|
|
102
|
-
transform: translateY(0);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.animate-slideIn {
|
|
107
|
-
animation: slideIn 0.3s ease-out;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* Popover Animations */
|
|
111
|
-
@keyframes scaleIn {
|
|
112
|
-
from {
|
|
113
|
-
opacity: 0;
|
|
114
|
-
transform: scale(0.95);
|
|
115
|
-
}
|
|
116
|
-
to {
|
|
117
|
-
opacity: 1;
|
|
118
|
-
transform: scale(1);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.animate-scaleIn {
|
|
123
|
-
animation: scaleIn 0.2s ease-out;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@keyframes scaleOut {
|
|
127
|
-
from {
|
|
128
|
-
opacity: 1;
|
|
129
|
-
transform: scale(1);
|
|
130
|
-
}
|
|
131
|
-
to {
|
|
132
|
-
opacity: 0;
|
|
133
|
-
transform: scale(0.95);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.animate-scaleOut {
|
|
138
|
-
animation: scaleOut 0.2s ease-in;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
@keyframes slideDown {
|
|
142
|
-
from {
|
|
143
|
-
opacity: 0;
|
|
144
|
-
transform: translateY(-10px);
|
|
145
|
-
}
|
|
146
|
-
to {
|
|
147
|
-
opacity: 1;
|
|
148
|
-
transform: translateY(0);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.animate-slideDown {
|
|
153
|
-
animation: slideDown 0.3s ease-out;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
@keyframes slideUp {
|
|
157
|
-
from {
|
|
158
|
-
opacity: 1;
|
|
159
|
-
transform: translateY(0);
|
|
160
|
-
}
|
|
161
|
-
to {
|
|
162
|
-
opacity: 0;
|
|
163
|
-
transform: translateY(-10px);
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.animate-slideUp {
|
|
168
|
-
animation: slideUp 0.3s ease-in;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
@keyframes fadeOut {
|
|
172
|
-
from { opacity: 1; }
|
|
173
|
-
to { opacity: 0; }
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.animate-fadeOut {
|
|
177
|
-
animation: fadeOut 0.2s ease-in;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
@keyframes flipIn {
|
|
181
|
-
from {
|
|
182
|
-
opacity: 0;
|
|
183
|
-
transform: rotateX(-90deg);
|
|
184
|
-
}
|
|
185
|
-
to {
|
|
186
|
-
opacity: 1;
|
|
187
|
-
transform: rotateX(0);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.animate-flipIn {
|
|
192
|
-
animation: flipIn 0.3s ease-out;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@keyframes flipOut {
|
|
196
|
-
from {
|
|
197
|
-
opacity: 1;
|
|
198
|
-
transform: rotateX(0);
|
|
199
|
-
}
|
|
200
|
-
to {
|
|
201
|
-
opacity: 0;
|
|
202
|
-
transform: rotateX(90deg);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.animate-flipOut {
|
|
207
|
-
animation: flipOut 0.3s ease-in;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Glass surface utilities — OS-native translucency effects.
|
|
212
|
-
* Apply to panels/sidebars that sit over a blurred background.
|
|
213
|
-
* Requires `isolation: isolate` and a background image/color on a parent.
|
|
214
|
-
*/
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* macOS Vibrancy / Liquid Glass — strong blur + high saturation over a
|
|
218
|
-
* 72% translucent base. The blur+saturate combo is the Apple-standard
|
|
219
|
-
* recipe (Sequoia / Tahoe 26 use the same values). 72% opacity keeps
|
|
220
|
-
* enough background bleed-through to read content underneath.
|
|
221
5
|
*
|
|
222
|
-
*
|
|
223
|
-
* Requires: container parent must be non-transparent (otherwise nothing
|
|
224
|
-
* to blur). Avoid stacking multiple `.glass-macos` — blur compounds.
|
|
225
|
-
*/
|
|
226
|
-
.glass-macos {
|
|
227
|
-
backdrop-filter: blur(20px) saturate(180%);
|
|
228
|
-
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
229
|
-
background-color: color-mix(in oklab, var(--background) 72%, transparent);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Windows 11 Mica / Acrylic — wider/softer blur over an 85% base.
|
|
234
|
-
* Mica = wallpaper-tinted material; Acrylic = stronger blur on top.
|
|
235
|
-
* This recipe targets Acrylic (the closer-to-Apple flavour).
|
|
236
|
-
*/
|
|
237
|
-
.glass-win11 {
|
|
238
|
-
backdrop-filter: blur(60px) saturate(125%);
|
|
239
|
-
-webkit-backdrop-filter: blur(60px) saturate(125%);
|
|
240
|
-
background-color: color-mix(in oklab, var(--background) 85%, transparent);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* Liquid Glass variants — Apple's macOS 26 / iOS 26 design language.
|
|
245
|
-
* Thinner blur, brighter base, subtle inner highlight via box-shadow.
|
|
246
|
-
* Designed for floating chrome (Dock, navbar, FAB chips).
|
|
6
|
+
* Decomposed into focused files under utilities/ for maintainability.
|
|
247
7
|
*/
|
|
248
|
-
.glass-liquid {
|
|
249
|
-
backdrop-filter: blur(12px) saturate(180%);
|
|
250
|
-
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
251
|
-
background-color: color-mix(in oklab, var(--card) 60%, transparent);
|
|
252
|
-
border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
|
|
253
|
-
box-shadow:
|
|
254
|
-
0 8px 32px color-mix(in oklab, var(--foreground) 12%, transparent),
|
|
255
|
-
inset 0 1px 0 color-mix(in oklab, var(--foreground) 6%, transparent);
|
|
256
|
-
}
|
|
257
8
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
.
|
|
263
|
-
backdrop-filter: blur(8px) saturate(160%);
|
|
264
|
-
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
265
|
-
background-color: color-mix(in oklab, var(--background) 80%, transparent);
|
|
266
|
-
}
|
|
9
|
+
@import './utilities/display.css';
|
|
10
|
+
@import './utilities/step.css';
|
|
11
|
+
@import './utilities/animations.css';
|
|
12
|
+
@import './utilities/glass.css';
|
|
13
|
+
@import './utilities/marquee.css';
|