@enonic/ui 1.0.0-beta.1 → 1.0.0-beta.3
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/dist/enonic-ui.cjs +1 -1
- package/dist/enonic-ui.es.js +168 -168
- package/dist/styles/base.css +9 -1
- package/dist/styles/preset.css +372 -1
- package/dist/styles/style.css +1 -1
- package/dist/styles/tokens.css +283 -1
- package/dist/styles/utilities.css +78 -1
- package/dist/types/components/input/input.d.ts +11 -0
- package/dist/types/components/textarea/textarea.d.ts +11 -0
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/use-blink-attention.d.ts +12 -0
- package/package.json +1 -1
package/dist/styles/tokens.css
CHANGED
|
@@ -1 +1,283 @@
|
|
|
1
|
-
@layer base
|
|
1
|
+
@layer base {
|
|
2
|
+
:root,
|
|
3
|
+
:host {
|
|
4
|
+
/* Neutrals */
|
|
5
|
+
--color-black: #000000;
|
|
6
|
+
--color-grey-950: #242829;
|
|
7
|
+
--color-grey-900: #3d4142;
|
|
8
|
+
--color-grey-850: #4c5051;
|
|
9
|
+
--color-grey-800: #5b5f60;
|
|
10
|
+
--color-grey-700: #797d7e;
|
|
11
|
+
--color-grey-600: #8d9192;
|
|
12
|
+
--color-grey-500: #b2b2b2;
|
|
13
|
+
--color-grey-400: #b5b9ba;
|
|
14
|
+
--color-grey-300: #d3d7d8;
|
|
15
|
+
--color-grey-200: #dde1e2;
|
|
16
|
+
--color-grey-100: #e7ebeb;
|
|
17
|
+
--color-grey-50: #f1f5f6;
|
|
18
|
+
--color-white: #ffffff;
|
|
19
|
+
|
|
20
|
+
/* Feedback */
|
|
21
|
+
--color-fbk-info: #0270a0;
|
|
22
|
+
--color-fbk-info-subtle: #208ebe;
|
|
23
|
+
--color-fbk-info-surface-light: #d7f3ff;
|
|
24
|
+
--color-fbk-info-surface-dark: #1a5a6e;
|
|
25
|
+
|
|
26
|
+
--color-fbk-warn: #cb9126;
|
|
27
|
+
--color-fbk-warn-subtle: #e9af44;
|
|
28
|
+
--color-fbk-warn-surface-light: #f7e5c4;
|
|
29
|
+
--color-fbk-warn-surface-dark: #5c4422;
|
|
30
|
+
|
|
31
|
+
--color-fbk-success: #499349;
|
|
32
|
+
--color-fbk-success-subtle: #67b167;
|
|
33
|
+
--color-fbk-success-surface-light: #cee2ce;
|
|
34
|
+
--color-fbk-success-surface-dark: #2d5a3d;
|
|
35
|
+
|
|
36
|
+
--color-fbk-danger: #d33030;
|
|
37
|
+
--color-fbk-danger-subtle: #f56262;
|
|
38
|
+
--color-fbk-danger-surface-light: #f6d7d7;
|
|
39
|
+
--color-fbk-danger-surface-dark: #5c3333;
|
|
40
|
+
|
|
41
|
+
/* Misc */
|
|
42
|
+
--color-purple: #800080;
|
|
43
|
+
--color-purple-subtle: #e46ee4;
|
|
44
|
+
--color-juke: #9747ff;
|
|
45
|
+
--color-blue: #009bf5;
|
|
46
|
+
--color-blue-subtle: #1fa5f5;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@layer base {
|
|
51
|
+
:root,
|
|
52
|
+
:host {
|
|
53
|
+
/* Main Colors */
|
|
54
|
+
--color-main: var(--color-black);
|
|
55
|
+
--color-main-hover: var(--color-grey-800);
|
|
56
|
+
--color-subtle: var(--color-grey-800);
|
|
57
|
+
--color-alt: var(--color-white);
|
|
58
|
+
--color-rev: var(--color-white);
|
|
59
|
+
--color-alt-rev: var(--color-black);
|
|
60
|
+
--color-muted: var(--color-grey-200);
|
|
61
|
+
--color-decorative: var(--color-grey-400);
|
|
62
|
+
|
|
63
|
+
--color-info: var(--color-fbk-info);
|
|
64
|
+
--color-info-rev: var(--color-fbk-info-subtle);
|
|
65
|
+
--color-warn: var(--color-fbk-warn);
|
|
66
|
+
--color-warn-rev: var(--color-fbk-warn-subtle);
|
|
67
|
+
--color-success: var(--color-fbk-success);
|
|
68
|
+
--color-success-rev: var(--color-fbk-success-subtle);
|
|
69
|
+
--color-error: var(--color-fbk-danger);
|
|
70
|
+
--color-error-rev: var(--color-fbk-danger-subtle);
|
|
71
|
+
|
|
72
|
+
/* Surface Colors */
|
|
73
|
+
--color-surface-neutral: var(--color-white);
|
|
74
|
+
--color-surface-neutral-hover: var(--color-grey-50);
|
|
75
|
+
--color-surface-selected: var(--color-grey-800);
|
|
76
|
+
--color-surface-selected-hover: var(--color-grey-900);
|
|
77
|
+
--color-surface-primary: var(--color-grey-50);
|
|
78
|
+
--color-surface-secondary: var(--color-black);
|
|
79
|
+
--color-surface-tertiary: var(--color-grey-950);
|
|
80
|
+
--color-surface-shimmer: var(--color-white);
|
|
81
|
+
--color-surface-info: var(--color-fbk-info-surface-light);
|
|
82
|
+
--color-surface-warn: var(--color-fbk-warn-surface-light);
|
|
83
|
+
--color-surface-success: var(--color-fbk-success-surface-light);
|
|
84
|
+
--color-surface-error: var(--color-fbk-danger-surface-light);
|
|
85
|
+
--color-surface-muted: var(--color-grey-500);
|
|
86
|
+
|
|
87
|
+
/* Borders */
|
|
88
|
+
--color-bdr-subtle: var(--color-grey-500);
|
|
89
|
+
--color-bdr-soft: var(--color-grey-200);
|
|
90
|
+
--color-bdr-strong: var(--color-black);
|
|
91
|
+
--color-bdr-select: var(--color-blue);
|
|
92
|
+
|
|
93
|
+
/* Outline Ring */
|
|
94
|
+
--color-ring: var(--color-black);
|
|
95
|
+
--color-ring-alt: var(--color-white);
|
|
96
|
+
--color-ring-offset: var(--color-white);
|
|
97
|
+
--color-ring-offset-alt: var(--color-grey-950);
|
|
98
|
+
|
|
99
|
+
/* Buttons */
|
|
100
|
+
--color-btn-primary: var(--color-white);
|
|
101
|
+
--color-btn-primary-hover: var(--color-grey-50);
|
|
102
|
+
--color-btn-secondary: var(--color-grey-50);
|
|
103
|
+
--color-btn-secondary-hover: var(--color-grey-100);
|
|
104
|
+
--color-btn-tertiary: var(--color-black);
|
|
105
|
+
--color-btn-tertiary-hover: var(--color-grey-900);
|
|
106
|
+
--color-btn-active: var(--color-grey-800);
|
|
107
|
+
--color-btn-active-hover: var(--color-grey-900);
|
|
108
|
+
|
|
109
|
+
/* Inputs */
|
|
110
|
+
--color-input-disabled: var(--color-grey-100);
|
|
111
|
+
|
|
112
|
+
/*Links*/
|
|
113
|
+
--color-link-visited: var(--color-purple);
|
|
114
|
+
|
|
115
|
+
/* Tooltips */
|
|
116
|
+
--color-tooltip: var(--color-black);
|
|
117
|
+
--color-tooltip-foreground: var(--color-white);
|
|
118
|
+
|
|
119
|
+
/* Overlay */
|
|
120
|
+
--color-overlay: oklch(0 0 0 / 0.4);
|
|
121
|
+
|
|
122
|
+
/* Documentation */
|
|
123
|
+
--color-docs: var(--color-juke);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@layer base {
|
|
128
|
+
.dark,
|
|
129
|
+
:host(.dark) {
|
|
130
|
+
/* Main Colors */
|
|
131
|
+
--color-main: var(--color-white);
|
|
132
|
+
--color-main-hover: var(--color-grey-200);
|
|
133
|
+
--color-subtle: var(--color-grey-400);
|
|
134
|
+
--color-alt: var(--color-white);
|
|
135
|
+
--color-rev: var(--color-black);
|
|
136
|
+
--color-alt-rev: var(--color-black);
|
|
137
|
+
--color-muted: var(--color-grey-800);
|
|
138
|
+
--color-decorative: var(--color-grey-700);
|
|
139
|
+
|
|
140
|
+
--color-info: var(--color-fbk-info-subtle);
|
|
141
|
+
--color-info-rev: var(--color-fbk-info);
|
|
142
|
+
--color-warn: var(--color-fbk-warn-subtle);
|
|
143
|
+
--color-warn-rev: var(--color-fbk-warn);
|
|
144
|
+
--color-success: var(--color-fbk-success-subtle);
|
|
145
|
+
--color-success-rev: var(--color-fbk-success);
|
|
146
|
+
--color-error: var(--color-fbk-danger-subtle);
|
|
147
|
+
--color-error-rev: var(--color-fbk-danger);
|
|
148
|
+
|
|
149
|
+
/* Surface Colors */
|
|
150
|
+
--color-surface-neutral: var(--color-grey-950);
|
|
151
|
+
--color-surface-neutral-hover: var(--color-grey-900);
|
|
152
|
+
--color-surface-selected: var(--color-grey-800);
|
|
153
|
+
--color-surface-selected-hover: var(--color-grey-900);
|
|
154
|
+
--color-surface-primary: var(--color-grey-900);
|
|
155
|
+
--color-surface-secondary: var(--color-grey-700);
|
|
156
|
+
--color-surface-tertiary: var(--color-grey-900);
|
|
157
|
+
--color-surface-shimmer: var(--color-grey-850);
|
|
158
|
+
--color-surface-info: var(--color-fbk-info-surface-dark);
|
|
159
|
+
--color-surface-warn: var(--color-fbk-warn-surface-dark);
|
|
160
|
+
--color-surface-success: var(--color-fbk-success-surface-dark);
|
|
161
|
+
--color-surface-error: var(--color-fbk-danger-surface-dark);
|
|
162
|
+
--color-surface-muted: var(--color-grey-500);
|
|
163
|
+
|
|
164
|
+
/* Borders */
|
|
165
|
+
--color-bdr-subtle: var(--color-grey-800);
|
|
166
|
+
--color-bdr-soft: var(--color-grey-800);
|
|
167
|
+
--color-bdr-strong: var(--color-white);
|
|
168
|
+
--color-bdr-select: var(--color-blue-subtle);
|
|
169
|
+
|
|
170
|
+
/* Outline Ring */
|
|
171
|
+
--color-ring: var(--color-white);
|
|
172
|
+
--color-ring-alt: var(--color-white);
|
|
173
|
+
--color-ring-offset: var(--color-grey-950);
|
|
174
|
+
--color-ring-offset-alt: var(--color-grey-950);
|
|
175
|
+
|
|
176
|
+
/* Buttons */
|
|
177
|
+
--color-btn-primary: var(--color-grey-950);
|
|
178
|
+
--color-btn-primary-hover: var(--color-grey-900);
|
|
179
|
+
--color-btn-secondary: var(--color-grey-900);
|
|
180
|
+
--color-btn-secondary-hover: var(--color-grey-800);
|
|
181
|
+
--color-btn-tertiary: var(--color-grey-800);
|
|
182
|
+
--color-btn-tertiary-hover: var(--color-grey-700);
|
|
183
|
+
--color-btn-active: var(--color-grey-800);
|
|
184
|
+
--color-btn-active-hover: var(--color-grey-700);
|
|
185
|
+
|
|
186
|
+
/* Inputs */
|
|
187
|
+
--color-input-disabled: var(--color-grey-800);
|
|
188
|
+
|
|
189
|
+
/*Links*/
|
|
190
|
+
--color-link-visited: var(--color-purple-subtle);
|
|
191
|
+
|
|
192
|
+
/* Tooltips */
|
|
193
|
+
--color-tooltip: var(--color-grey-800);
|
|
194
|
+
--color-tooltip-foreground: var(--color-white);
|
|
195
|
+
|
|
196
|
+
/* Overlay */
|
|
197
|
+
--color-overlay: oklch(0 0 0 / 0.6);
|
|
198
|
+
|
|
199
|
+
/* Documentation */
|
|
200
|
+
--color-docs: var(--color-juke);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
205
|
+
|
|
206
|
+
@theme {
|
|
207
|
+
/* COLORS */
|
|
208
|
+
/* Main Colors */
|
|
209
|
+
--color-main: var(--color-main);
|
|
210
|
+
--color-main-hover: var(--color-main-hover);
|
|
211
|
+
--color-subtle: var(--color-subtle);
|
|
212
|
+
--color-alt: var(--color-alt);
|
|
213
|
+
--color-rev: var(--color-rev);
|
|
214
|
+
--color-alt-rev: var(--color-alt-rev);
|
|
215
|
+
--color-muted: var(--color-muted);
|
|
216
|
+
--color-decorative: var(--color-decorative);
|
|
217
|
+
|
|
218
|
+
--color-info: var(--color-info);
|
|
219
|
+
--color-info-rev: var(--color-info-rev);
|
|
220
|
+
--color-warn: var(--color-warn);
|
|
221
|
+
--color-warn-rev: var(--color-warn-rev);
|
|
222
|
+
--color-success: var(--color-success);
|
|
223
|
+
--color-success-rev: var(--color-success-rev);
|
|
224
|
+
--color-error: var(--color-error);
|
|
225
|
+
--color-error-rev: var(--color-error-rev);
|
|
226
|
+
|
|
227
|
+
/* Surface Colors */
|
|
228
|
+
--color-surface-neutral: var(--color-surface-neutral);
|
|
229
|
+
--color-surface-neutral-hover: var(--color-surface-neutral-hover);
|
|
230
|
+
--color-surface-selected: var(--color-surface-selected);
|
|
231
|
+
--color-surface-selected-hover: var(--color-surface-selected-hover);
|
|
232
|
+
--color-surface-primary: var(--color-surface-primary);
|
|
233
|
+
--color-surface-secondary: var(--color-surface-secondary);
|
|
234
|
+
--color-surface-tertiary: var(--color-surface-tertiary);
|
|
235
|
+
--color-surface-shimmer: var(--color-surface-shimmer);
|
|
236
|
+
--color-surface-info: var(--color-surface-info);
|
|
237
|
+
--color-surface-warn: var(--color-surface-warn);
|
|
238
|
+
--color-surface-success: var(--color-surface-success);
|
|
239
|
+
--color-surface-error: var(--color-surface-error);
|
|
240
|
+
--color-surface-muted: var(--color-surface-muted);
|
|
241
|
+
|
|
242
|
+
/* Borders */
|
|
243
|
+
--color-bdr-subtle: var(--color-bdr-subtle);
|
|
244
|
+
--color-bdr-soft: var(--color-bdr-soft);
|
|
245
|
+
--color-bdr-strong: var(--color-bdr-strong);
|
|
246
|
+
--color-bdr-select: var(--color-bdr-select);
|
|
247
|
+
|
|
248
|
+
/* Outline Ring */
|
|
249
|
+
--color-ring: var(--color-ring);
|
|
250
|
+
--color-ring-offset: var(--color-ring-offset);
|
|
251
|
+
|
|
252
|
+
/* Buttons */
|
|
253
|
+
--color-btn-primary: var(--color-btn-primary);
|
|
254
|
+
--color-btn-primary-hover: var(--color-btn-primary-hover);
|
|
255
|
+
--color-btn-secondary: var(--color-btn-secondary);
|
|
256
|
+
--color-btn-secondary-hover: var(--color-btn-secondary-hover);
|
|
257
|
+
--color-btn-tertiary: var(--color-btn-tertiary);
|
|
258
|
+
--color-btn-tertiary-hover: var(--color-btn-tertiary-hover);
|
|
259
|
+
--color-btn-active: var(--color-btn-active);
|
|
260
|
+
--color-btn-active-hover: var(--color-btn-active-hover);
|
|
261
|
+
--color-btn-error: var(--color-fbk-danger);
|
|
262
|
+
--color-btn-error-hover: color-mix(in srgb, var(--color-fbk-danger), black 10%);
|
|
263
|
+
--color-btn-error-active: color-mix(in srgb, var(--color-fbk-danger), black 19%);
|
|
264
|
+
|
|
265
|
+
/* Inputs */
|
|
266
|
+
--color-input-disabled: var(--color-input-disabled);
|
|
267
|
+
|
|
268
|
+
/*Links*/
|
|
269
|
+
--color-link-visited: var(--color-link-visited);
|
|
270
|
+
|
|
271
|
+
/* Tooltips */
|
|
272
|
+
--color-tooltip: var(--color-tooltip);
|
|
273
|
+
--color-tooltip-foreground: var(--color-tooltip-foreground);
|
|
274
|
+
|
|
275
|
+
/* Overlay */
|
|
276
|
+
--color-overlay: var(--color-overlay);
|
|
277
|
+
|
|
278
|
+
/* Documentation */
|
|
279
|
+
--color-docs: var(--color-docs);
|
|
280
|
+
|
|
281
|
+
/* SIZINGS */
|
|
282
|
+
--sizing-11\.5: calc(var(--spacing) * 11.5);
|
|
283
|
+
}
|
|
@@ -1 +1,78 @@
|
|
|
1
|
-
@utility scrollbar-none
|
|
1
|
+
@utility scrollbar-none {
|
|
2
|
+
scrollbar-width: none;
|
|
3
|
+
&::-webkit-scrollbar {
|
|
4
|
+
display: none;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@utility transition-highlight {
|
|
9
|
+
transition-property: color, box-shadow;
|
|
10
|
+
transition-duration: 100ms;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes skeleton-shimmer {
|
|
14
|
+
0% {
|
|
15
|
+
background-position-x: calc(-1 * var(--shimmer-band-size, 200px));
|
|
16
|
+
}
|
|
17
|
+
100% {
|
|
18
|
+
background-position-x: calc(var(--shimmer-end, 100%) + var(--shimmer-band-size, 200px));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@utility animate-skeleton-shimmer {
|
|
23
|
+
--shimmer-band-size: 200px;
|
|
24
|
+
background-image: linear-gradient(90deg, transparent 0%, var(--color-surface-neutral-hover) 50%, transparent 100%);
|
|
25
|
+
background-size: var(--shimmer-band-size) 100%;
|
|
26
|
+
background-repeat: no-repeat;
|
|
27
|
+
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
|
28
|
+
mask-repeat: no-repeat;
|
|
29
|
+
-webkit-mask-repeat: no-repeat;
|
|
30
|
+
opacity: 0;
|
|
31
|
+
&[data-ready='true'] {
|
|
32
|
+
opacity: 1;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@keyframes input-blink-ring {
|
|
37
|
+
0% {
|
|
38
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bdr-select) 45%, transparent);
|
|
39
|
+
}
|
|
40
|
+
70% {
|
|
41
|
+
box-shadow: 0 0 0 8px transparent;
|
|
42
|
+
}
|
|
43
|
+
100% {
|
|
44
|
+
box-shadow: 0 0 0 0 transparent;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@utility input-animated-border {
|
|
49
|
+
position: relative;
|
|
50
|
+
&::before {
|
|
51
|
+
content: '';
|
|
52
|
+
position: absolute;
|
|
53
|
+
inset: 0;
|
|
54
|
+
padding: 1px;
|
|
55
|
+
border-radius: inherit;
|
|
56
|
+
background-color: var(--color-bdr-subtle);
|
|
57
|
+
background-image: linear-gradient(90deg, transparent 0%, var(--color-bdr-select) 50%, transparent 100%);
|
|
58
|
+
background-size: var(--shimmer-band-size, 200px) 100%;
|
|
59
|
+
background-repeat: no-repeat;
|
|
60
|
+
animation: skeleton-shimmer 1.6s ease-in-out infinite;
|
|
61
|
+
-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
|
|
62
|
+
-webkit-mask-clip: content-box, border-box;
|
|
63
|
+
-webkit-mask-composite: xor;
|
|
64
|
+
mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
|
|
65
|
+
mask-clip: content-box, border-box;
|
|
66
|
+
mask-composite: exclude;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
z-index: 1;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@utility input-blink-attention {
|
|
73
|
+
animation: input-blink-ring 0.6s ease-out 2;
|
|
74
|
+
/* Doubled `:focus-within` bumps specificity above Tailwind's `focus-within:ring-*` so the blink ring isn't fighting the focus ring during the animation. */
|
|
75
|
+
&:focus-within:focus-within {
|
|
76
|
+
box-shadow: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -8,6 +8,17 @@ export type InputProps = {
|
|
|
8
8
|
endAddon?: string | ReactNode;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
readOnly?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Indicates an in-flight async operation on the field. Forces read-only behavior,
|
|
13
|
+
* shows a progress cursor and an animated shimmer overlay, and suppresses the error display.
|
|
14
|
+
* Takes priority over `error`.
|
|
15
|
+
*/
|
|
16
|
+
processing?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Applies a one-shot attention-blink ring around the field (not the label/error). Pair with
|
|
19
|
+
* `useBlinkAttention` for the trigger logic.
|
|
20
|
+
*/
|
|
21
|
+
highlight?: boolean;
|
|
11
22
|
className?: string;
|
|
12
23
|
} & ComponentPropsWithoutRef<'input'>;
|
|
13
24
|
export declare const Input: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<InputProps> & {
|
|
@@ -6,6 +6,17 @@ export type TextAreaProps = {
|
|
|
6
6
|
error?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
readOnly?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Indicates an in-flight async operation on the field. Forces read-only behavior,
|
|
11
|
+
* shows a progress cursor and an animated shimmer overlay, and suppresses the error display.
|
|
12
|
+
* Takes priority over `error`.
|
|
13
|
+
*/
|
|
14
|
+
processing?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Applies a one-shot attention-blink ring around the field (not the label/error). Pair with
|
|
17
|
+
* `useBlinkAttention` for the trigger logic.
|
|
18
|
+
*/
|
|
19
|
+
highlight?: boolean;
|
|
9
20
|
resizable?: boolean;
|
|
10
21
|
/**
|
|
11
22
|
* Enables automatic content-based sizing.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { type UseActiveItemFocusConfig, useActiveItemFocus } from './use-active-item-focus';
|
|
2
2
|
export { type UseActiveOnOpenConfig, useActiveOnOpen } from './use-active-on-open';
|
|
3
|
+
export { type UseBlinkAttentionConfig, useBlinkAttention } from './use-blink-attention';
|
|
3
4
|
export { type UseClickOutsideConfig, useClickOutside } from './use-click-outside';
|
|
4
5
|
export { useControlledState } from './use-controlled-state';
|
|
5
6
|
export { useControlledStateWithNull } from './use-controlled-state-with-null';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export type UseBlinkAttentionConfig = {
|
|
3
|
+
/** Scroll the target into view before the blink starts. Defaults to `true`. */
|
|
4
|
+
scrollIntoView?: boolean;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Draws attention to an element by scrolling it into view and pulsing a one-shot ring around it.
|
|
8
|
+
* Returns a boolean — apply the `input-blink-attention` utility class while it's `true`.
|
|
9
|
+
*
|
|
10
|
+
* The trigger is edge-driven: every time `trigger` flips to truthy, the animation restarts.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useBlinkAttention: <T extends HTMLElement>(ref: RefObject<T | null>, trigger: unknown, { scrollIntoView }?: UseBlinkAttentionConfig) => boolean;
|