sherick-ui 2.2.0 → 2.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.
- package/README.md +1 -1
- package/dist/cjs/components/Badge.cjs +1 -1
- package/dist/cjs/components/Badge.cjs.map +1 -1
- package/dist/cjs/components/Button.cjs +11 -2
- package/dist/cjs/components/Button.cjs.map +1 -1
- package/dist/cjs/components/Calendar.cjs +2 -2
- package/dist/cjs/components/Calendar.cjs.map +1 -1
- package/dist/cjs/components/Card.cjs +3 -2
- package/dist/cjs/components/Card.cjs.map +1 -1
- package/dist/cjs/components/Chip.cjs +3 -3
- package/dist/cjs/components/Chip.cjs.map +1 -1
- package/dist/cjs/components/Combobox.cjs +1 -1
- package/dist/cjs/components/Combobox.cjs.map +1 -1
- package/dist/cjs/components/Command.cjs +2 -2
- package/dist/cjs/components/Command.cjs.map +1 -1
- package/dist/cjs/components/CommandPalette.cjs +1 -1
- package/dist/cjs/components/CommandPalette.cjs.map +1 -1
- package/dist/cjs/components/DateRangePicker.cjs +1 -1
- package/dist/cjs/components/DateRangePicker.cjs.map +1 -1
- package/dist/cjs/components/DialogHeader.cjs +1 -1
- package/dist/cjs/components/DialogHeader.cjs.map +1 -1
- package/dist/cjs/components/Drawer.cjs +1 -1
- package/dist/cjs/components/Drawer.cjs.map +1 -1
- package/dist/cjs/components/Field.cjs +1 -1
- package/dist/cjs/components/Field.cjs.map +1 -1
- package/dist/cjs/components/FileUpload.cjs +2 -2
- package/dist/cjs/components/FileUpload.cjs.map +1 -1
- package/dist/cjs/components/IconButton.cjs +1 -1
- package/dist/cjs/components/IconButton.cjs.map +1 -1
- package/dist/cjs/components/Input.cjs +1 -1
- package/dist/cjs/components/Input.cjs.map +1 -1
- package/dist/cjs/components/NavItem.cjs +3 -3
- package/dist/cjs/components/NavItem.cjs.map +1 -1
- package/dist/cjs/components/NumberField.cjs +1 -1
- package/dist/cjs/components/NumberField.cjs.map +1 -1
- package/dist/cjs/components/Pagination.cjs +1 -1
- package/dist/cjs/components/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Progress.cjs +7 -4
- package/dist/cjs/components/Progress.cjs.map +1 -1
- package/dist/cjs/components/Select.cjs +1 -1
- package/dist/cjs/components/Select.cjs.map +1 -1
- package/dist/cjs/components/Slider.cjs +1 -1
- package/dist/cjs/components/Slider.cjs.map +1 -1
- package/dist/cjs/components/Stepper.cjs +5 -1
- package/dist/cjs/components/Stepper.cjs.map +1 -1
- package/dist/cjs/components/Table.cjs +1 -1
- package/dist/cjs/components/Table.cjs.map +1 -1
- package/dist/cjs/components/Tabs.cjs +1 -1
- package/dist/cjs/components/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Textarea.cjs +1 -1
- package/dist/cjs/components/Textarea.cjs.map +1 -1
- package/dist/cjs/components/Toast.cjs +5 -2
- package/dist/cjs/components/Toast.cjs.map +1 -1
- package/dist/cjs/components/Tooltip.cjs +1 -1
- package/dist/cjs/components/Tooltip.cjs.map +1 -1
- package/dist/cjs/components/TreeView.cjs +43 -10
- package/dist/cjs/components/TreeView.cjs.map +1 -1
- package/dist/cjs/components/ui.common.cjs +100 -45
- package/dist/cjs/components/ui.common.cjs.map +1 -1
- package/dist/cjs/components/ui.motion.cjs +37 -13
- package/dist/cjs/components/ui.motion.cjs.map +1 -1
- package/dist/cjs/dev.cjs +8 -0
- package/dist/cjs/dev.cjs.map +1 -1
- package/dist/esm/components/Badge.js +2 -2
- package/dist/esm/components/Badge.js.map +1 -1
- package/dist/esm/components/Button.js +12 -3
- package/dist/esm/components/Button.js.map +1 -1
- package/dist/esm/components/Calendar.js +3 -3
- package/dist/esm/components/Calendar.js.map +1 -1
- package/dist/esm/components/Card.js +4 -3
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Chip.js +3 -3
- package/dist/esm/components/Chip.js.map +1 -1
- package/dist/esm/components/CodeBlock.js +5 -4
- package/dist/esm/components/CodeBlock.js.map +1 -1
- package/dist/esm/components/Combobox.js +2 -2
- package/dist/esm/components/Combobox.js.map +1 -1
- package/dist/esm/components/Command.js +3 -3
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/CommandPalette.js +2 -2
- package/dist/esm/components/CommandPalette.js.map +1 -1
- package/dist/esm/components/DateRangePicker.js +2 -2
- package/dist/esm/components/DateRangePicker.js.map +1 -1
- package/dist/esm/components/DialogHeader.js +2 -2
- package/dist/esm/components/DialogHeader.js.map +1 -1
- package/dist/esm/components/Drawer.js +2 -2
- package/dist/esm/components/Drawer.js.map +1 -1
- package/dist/esm/components/Field.js +2 -2
- package/dist/esm/components/Field.js.map +1 -1
- package/dist/esm/components/FileUpload.js +3 -3
- package/dist/esm/components/FileUpload.js.map +1 -1
- package/dist/esm/components/IconButton.js +1 -1
- package/dist/esm/components/IconButton.js.map +1 -1
- package/dist/esm/components/Input.js +2 -2
- package/dist/esm/components/Input.js.map +1 -1
- package/dist/esm/components/Markdown.js +3 -2
- package/dist/esm/components/Markdown.js.map +1 -1
- package/dist/esm/components/NavItem.js +5 -5
- package/dist/esm/components/NavItem.js.map +1 -1
- package/dist/esm/components/NumberField.js +2 -2
- package/dist/esm/components/NumberField.js.map +1 -1
- package/dist/esm/components/Pagination.js +2 -2
- package/dist/esm/components/Pagination.js.map +1 -1
- package/dist/esm/components/Progress.js +8 -5
- package/dist/esm/components/Progress.js.map +1 -1
- package/dist/esm/components/Select.js +2 -2
- package/dist/esm/components/Select.js.map +1 -1
- package/dist/esm/components/Slider.js +1 -1
- package/dist/esm/components/Slider.js.map +1 -1
- package/dist/esm/components/Stepper.js +6 -2
- package/dist/esm/components/Stepper.js.map +1 -1
- package/dist/esm/components/Table.js +2 -2
- package/dist/esm/components/Table.js.map +1 -1
- package/dist/esm/components/Tabs.js +2 -2
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea.js +2 -2
- package/dist/esm/components/Textarea.js.map +1 -1
- package/dist/esm/components/Toast.js +6 -3
- package/dist/esm/components/Toast.js.map +1 -1
- package/dist/esm/components/Tooltip.js +2 -2
- package/dist/esm/components/Tooltip.js.map +1 -1
- package/dist/esm/components/TreeView.js +45 -12
- package/dist/esm/components/TreeView.js.map +1 -1
- package/dist/esm/components/ui.common.js +98 -47
- package/dist/esm/components/ui.common.js.map +1 -1
- package/dist/esm/components/ui.motion.js +34 -14
- package/dist/esm/components/ui.motion.js.map +1 -1
- package/dist/esm/dev.js +2 -2
- package/dist/styles.css +150 -63
- package/dist/theme.css +33 -4
- package/dist/types/dev.d.cts +55 -36
- package/dist/types/dev.d.ts +55 -36
- package/package.json +1 -1
package/dist/types/dev.d.cts
CHANGED
|
@@ -17,13 +17,13 @@ declare const elevation: {
|
|
|
17
17
|
};
|
|
18
18
|
declare const recessedTop = "shadow-sherick-recessed-top";
|
|
19
19
|
declare const shape: {
|
|
20
|
-
readonly control: "rounded-[
|
|
20
|
+
readonly control: "rounded-[1rem]";
|
|
21
21
|
readonly mark: "rounded-[0.625rem]";
|
|
22
|
-
readonly row: "rounded-[0.
|
|
23
|
-
readonly prominent: "rounded-[1.
|
|
24
|
-
readonly surface: "rounded-[1.
|
|
25
|
-
readonly sheet: "rounded-[
|
|
26
|
-
readonly expressive: "rounded-[
|
|
22
|
+
readonly row: "rounded-[0.75rem]";
|
|
23
|
+
readonly prominent: "rounded-[1.25rem]";
|
|
24
|
+
readonly surface: "rounded-[1.5rem]";
|
|
25
|
+
readonly sheet: "rounded-[1rem]";
|
|
26
|
+
readonly expressive: "rounded-[1.75rem]";
|
|
27
27
|
readonly pill: "rounded-full";
|
|
28
28
|
readonly circle: "rounded-full";
|
|
29
29
|
};
|
|
@@ -66,6 +66,7 @@ declare const stateLayerQuietComposite: string;
|
|
|
66
66
|
declare const stateLayer: {
|
|
67
67
|
readonly quiet: string;
|
|
68
68
|
readonly tonal: string;
|
|
69
|
+
readonly tonalNeutral: string;
|
|
69
70
|
readonly filled: string;
|
|
70
71
|
readonly track: string;
|
|
71
72
|
readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
|
|
@@ -85,13 +86,31 @@ declare const material: {
|
|
|
85
86
|
};
|
|
86
87
|
declare const mediaCanvas = "bg-sherick-media";
|
|
87
88
|
declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
|
|
89
|
+
declare const type: {
|
|
90
|
+
readonly control: {
|
|
91
|
+
readonly compact: "text-sm";
|
|
92
|
+
readonly normal: "text-[0.9375rem] leading-[1.375rem]";
|
|
93
|
+
readonly prominent: "text-lg";
|
|
94
|
+
};
|
|
95
|
+
readonly supporting: "text-[0.8125rem] leading-5";
|
|
96
|
+
readonly caption: "text-xs leading-4";
|
|
97
|
+
readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
|
|
98
|
+
readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
|
|
99
|
+
readonly numeric: "tabular-nums";
|
|
100
|
+
};
|
|
88
101
|
declare const density: {
|
|
89
|
-
readonly compact:
|
|
90
|
-
readonly normal:
|
|
91
|
-
readonly prominent:
|
|
102
|
+
readonly compact: string;
|
|
103
|
+
readonly normal: string;
|
|
104
|
+
readonly prominent: string;
|
|
92
105
|
readonly target: "min-h-11 min-w-11";
|
|
93
106
|
readonly part: "min-h-11 min-w-9";
|
|
94
107
|
};
|
|
108
|
+
declare const iconSlot: {
|
|
109
|
+
readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
|
|
110
|
+
readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
|
|
111
|
+
readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
|
|
112
|
+
readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
|
|
113
|
+
};
|
|
95
114
|
declare const stacking: {
|
|
96
115
|
readonly float: "z-50";
|
|
97
116
|
readonly notification: "z-[60]";
|
|
@@ -168,7 +187,8 @@ declare const tone: {
|
|
|
168
187
|
success: string;
|
|
169
188
|
};
|
|
170
189
|
};
|
|
171
|
-
declare const
|
|
190
|
+
declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
|
|
191
|
+
declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
|
|
172
192
|
declare const selectable: {
|
|
173
193
|
readonly surface: string;
|
|
174
194
|
readonly markSurface: string;
|
|
@@ -187,29 +207,23 @@ declare const recipeAlphas: {
|
|
|
187
207
|
readonly hover: number;
|
|
188
208
|
readonly press: number;
|
|
189
209
|
};
|
|
210
|
+
readonly tonalNeutral: {
|
|
211
|
+
readonly hover: number;
|
|
212
|
+
readonly press: number;
|
|
213
|
+
};
|
|
190
214
|
readonly filled: {
|
|
191
215
|
readonly hover: number;
|
|
192
216
|
readonly press: number;
|
|
193
217
|
};
|
|
194
218
|
};
|
|
195
219
|
readonly tint: {
|
|
196
|
-
readonly
|
|
197
|
-
readonly primary: number;
|
|
198
|
-
readonly danger: number;
|
|
199
|
-
readonly warning: number;
|
|
200
|
-
readonly success: number;
|
|
201
|
-
};
|
|
202
|
-
readonly selected: {
|
|
203
|
-
readonly primary: number;
|
|
204
|
-
readonly danger: number;
|
|
205
|
-
readonly warning: number;
|
|
206
|
-
readonly success: number;
|
|
207
|
-
};
|
|
220
|
+
readonly neutralSoft: number;
|
|
208
221
|
readonly neutralRest: number;
|
|
209
222
|
};
|
|
210
223
|
readonly field: {
|
|
211
224
|
readonly quiet: number;
|
|
212
225
|
readonly card: number;
|
|
226
|
+
readonly groove: number;
|
|
213
227
|
readonly control: number;
|
|
214
228
|
readonly hover: number;
|
|
215
229
|
readonly engaged: number;
|
|
@@ -219,21 +233,19 @@ declare const recipeAlphas: {
|
|
|
219
233
|
};
|
|
220
234
|
};
|
|
221
235
|
declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
|
|
236
|
+
declare const fieldMessage: {
|
|
237
|
+
readonly description: string;
|
|
238
|
+
readonly error: string;
|
|
239
|
+
};
|
|
222
240
|
|
|
223
241
|
type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
|
|
224
242
|
/** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
|
|
225
243
|
* It never translates, scales or resizes; reduced motion simply drops the interpolation
|
|
226
244
|
* and the state still arrives. */
|
|
227
245
|
declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
* press travels is the system's physical character rather than a component's anatomy: a
|
|
232
|
-
* control whose outline is what the user sees compresses 4%, which is about two pixels at the
|
|
233
|
-
* size of the ink it moves. A control whose visible ink is far smaller than the target it is
|
|
234
|
-
* aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
|
|
235
|
-
* interpolation and the compression are neutralised together under reduced motion. */
|
|
236
|
-
declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
|
|
246
|
+
declare const motionTactile: string;
|
|
247
|
+
declare const motionTactileWide: string;
|
|
248
|
+
declare const motionTactileField: string;
|
|
237
249
|
/** The spatial half of a compact press, applied to the *mark* rather than to the control.
|
|
238
250
|
*
|
|
239
251
|
* A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
|
|
@@ -243,7 +255,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
|
|
|
243
255
|
* release lands), so the mark takes the twelve percent and the target keeps its geometry. The
|
|
244
256
|
* target still owns the focus ring and the state layer, and still carries the tone and depth
|
|
245
257
|
* response, so the boundary a press happens inside never moves. */
|
|
246
|
-
declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-
|
|
258
|
+
declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
|
|
247
259
|
/** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
|
|
248
260
|
* made by overshooting the position it lands in. It leaves without the overshoot, and
|
|
249
261
|
* reduced motion lands it in one step — which takes a *state-specific* override, because the
|
|
@@ -260,6 +272,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
|
|
|
260
272
|
* settle together, and an interrupted move retargets from wherever it currently is
|
|
261
273
|
* because it is a transition and not a keyframe. */
|
|
262
274
|
declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
|
|
275
|
+
/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
|
|
276
|
+
* movement of hundreds of pixels is followed rather than skipped. */
|
|
277
|
+
declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
|
|
263
278
|
/** Direct manipulation: the pointer owns the geometry, so a positional transition would be
|
|
264
279
|
* lag. While the primitive reports a drag, position and size are removed from the
|
|
265
280
|
* transition list and only tone and engagement geometry remain; a keyboard or programmatic
|
|
@@ -284,7 +299,7 @@ declare const motionPresenceTooltip: string;
|
|
|
284
299
|
declare const motionPresenceModal: string;
|
|
285
300
|
/** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
|
|
286
301
|
* never animated, so the plane can never animate the page behind it. */
|
|
287
|
-
declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
|
|
302
|
+
declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
|
|
288
303
|
/** Continuous activity is a distinct intent, not an exception to interaction motion: it
|
|
289
304
|
* reports work rather than answering an event, and it has no entrance of its own. */
|
|
290
305
|
declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
|
|
@@ -299,8 +314,12 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
|
|
|
299
314
|
declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
|
|
300
315
|
/** The state layer is a composited overlay, so its own opacity is the only thing that
|
|
301
316
|
* moves. Shared here because four interaction states across the library ride it. */
|
|
302
|
-
|
|
303
|
-
|
|
317
|
+
/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
|
|
318
|
+
* is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
|
|
319
|
+
* The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
|
|
320
|
+
declare const motionRowLayer = "before:transition-none";
|
|
321
|
+
declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
|
|
322
|
+
declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
|
|
304
323
|
declare const motionPresenceSheet: string;
|
|
305
324
|
declare const motionPresenceToast: string;
|
|
306
325
|
|
|
@@ -311,5 +330,5 @@ declare const motionPresenceToast: string;
|
|
|
311
330
|
*/
|
|
312
331
|
declare const cn: (...inputs: ClassValue[]) => string;
|
|
313
332
|
|
|
314
|
-
export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone };
|
|
333
|
+
export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
|
|
315
334
|
export type { MotionIntent };
|
package/dist/types/dev.d.ts
CHANGED
|
@@ -17,13 +17,13 @@ declare const elevation: {
|
|
|
17
17
|
};
|
|
18
18
|
declare const recessedTop = "shadow-sherick-recessed-top";
|
|
19
19
|
declare const shape: {
|
|
20
|
-
readonly control: "rounded-[
|
|
20
|
+
readonly control: "rounded-[1rem]";
|
|
21
21
|
readonly mark: "rounded-[0.625rem]";
|
|
22
|
-
readonly row: "rounded-[0.
|
|
23
|
-
readonly prominent: "rounded-[1.
|
|
24
|
-
readonly surface: "rounded-[1.
|
|
25
|
-
readonly sheet: "rounded-[
|
|
26
|
-
readonly expressive: "rounded-[
|
|
22
|
+
readonly row: "rounded-[0.75rem]";
|
|
23
|
+
readonly prominent: "rounded-[1.25rem]";
|
|
24
|
+
readonly surface: "rounded-[1.5rem]";
|
|
25
|
+
readonly sheet: "rounded-[1rem]";
|
|
26
|
+
readonly expressive: "rounded-[1.75rem]";
|
|
27
27
|
readonly pill: "rounded-full";
|
|
28
28
|
readonly circle: "rounded-full";
|
|
29
29
|
};
|
|
@@ -66,6 +66,7 @@ declare const stateLayerQuietComposite: string;
|
|
|
66
66
|
declare const stateLayer: {
|
|
67
67
|
readonly quiet: string;
|
|
68
68
|
readonly tonal: string;
|
|
69
|
+
readonly tonalNeutral: string;
|
|
69
70
|
readonly filled: string;
|
|
70
71
|
readonly track: string;
|
|
71
72
|
readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
|
|
@@ -85,13 +86,31 @@ declare const material: {
|
|
|
85
86
|
};
|
|
86
87
|
declare const mediaCanvas = "bg-sherick-media";
|
|
87
88
|
declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
|
|
89
|
+
declare const type: {
|
|
90
|
+
readonly control: {
|
|
91
|
+
readonly compact: "text-sm";
|
|
92
|
+
readonly normal: "text-[0.9375rem] leading-[1.375rem]";
|
|
93
|
+
readonly prominent: "text-lg";
|
|
94
|
+
};
|
|
95
|
+
readonly supporting: "text-[0.8125rem] leading-5";
|
|
96
|
+
readonly caption: "text-xs leading-4";
|
|
97
|
+
readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
|
|
98
|
+
readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
|
|
99
|
+
readonly numeric: "tabular-nums";
|
|
100
|
+
};
|
|
88
101
|
declare const density: {
|
|
89
|
-
readonly compact:
|
|
90
|
-
readonly normal:
|
|
91
|
-
readonly prominent:
|
|
102
|
+
readonly compact: string;
|
|
103
|
+
readonly normal: string;
|
|
104
|
+
readonly prominent: string;
|
|
92
105
|
readonly target: "min-h-11 min-w-11";
|
|
93
106
|
readonly part: "min-h-11 min-w-9";
|
|
94
107
|
};
|
|
108
|
+
declare const iconSlot: {
|
|
109
|
+
readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
|
|
110
|
+
readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
|
|
111
|
+
readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
|
|
112
|
+
readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
|
|
113
|
+
};
|
|
95
114
|
declare const stacking: {
|
|
96
115
|
readonly float: "z-50";
|
|
97
116
|
readonly notification: "z-[60]";
|
|
@@ -168,7 +187,8 @@ declare const tone: {
|
|
|
168
187
|
success: string;
|
|
169
188
|
};
|
|
170
189
|
};
|
|
171
|
-
declare const
|
|
190
|
+
declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
|
|
191
|
+
declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
|
|
172
192
|
declare const selectable: {
|
|
173
193
|
readonly surface: string;
|
|
174
194
|
readonly markSurface: string;
|
|
@@ -187,29 +207,23 @@ declare const recipeAlphas: {
|
|
|
187
207
|
readonly hover: number;
|
|
188
208
|
readonly press: number;
|
|
189
209
|
};
|
|
210
|
+
readonly tonalNeutral: {
|
|
211
|
+
readonly hover: number;
|
|
212
|
+
readonly press: number;
|
|
213
|
+
};
|
|
190
214
|
readonly filled: {
|
|
191
215
|
readonly hover: number;
|
|
192
216
|
readonly press: number;
|
|
193
217
|
};
|
|
194
218
|
};
|
|
195
219
|
readonly tint: {
|
|
196
|
-
readonly
|
|
197
|
-
readonly primary: number;
|
|
198
|
-
readonly danger: number;
|
|
199
|
-
readonly warning: number;
|
|
200
|
-
readonly success: number;
|
|
201
|
-
};
|
|
202
|
-
readonly selected: {
|
|
203
|
-
readonly primary: number;
|
|
204
|
-
readonly danger: number;
|
|
205
|
-
readonly warning: number;
|
|
206
|
-
readonly success: number;
|
|
207
|
-
};
|
|
220
|
+
readonly neutralSoft: number;
|
|
208
221
|
readonly neutralRest: number;
|
|
209
222
|
};
|
|
210
223
|
readonly field: {
|
|
211
224
|
readonly quiet: number;
|
|
212
225
|
readonly card: number;
|
|
226
|
+
readonly groove: number;
|
|
213
227
|
readonly control: number;
|
|
214
228
|
readonly hover: number;
|
|
215
229
|
readonly engaged: number;
|
|
@@ -219,21 +233,19 @@ declare const recipeAlphas: {
|
|
|
219
233
|
};
|
|
220
234
|
};
|
|
221
235
|
declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
|
|
236
|
+
declare const fieldMessage: {
|
|
237
|
+
readonly description: string;
|
|
238
|
+
readonly error: string;
|
|
239
|
+
};
|
|
222
240
|
|
|
223
241
|
type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
|
|
224
242
|
/** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
|
|
225
243
|
* It never translates, scales or resizes; reduced motion simply drops the interpolation
|
|
226
244
|
* and the state still arrives. */
|
|
227
245
|
declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
* press travels is the system's physical character rather than a component's anatomy: a
|
|
232
|
-
* control whose outline is what the user sees compresses 4%, which is about two pixels at the
|
|
233
|
-
* size of the ink it moves. A control whose visible ink is far smaller than the target it is
|
|
234
|
-
* aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
|
|
235
|
-
* interpolation and the compression are neutralised together under reduced motion. */
|
|
236
|
-
declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
|
|
246
|
+
declare const motionTactile: string;
|
|
247
|
+
declare const motionTactileWide: string;
|
|
248
|
+
declare const motionTactileField: string;
|
|
237
249
|
/** The spatial half of a compact press, applied to the *mark* rather than to the control.
|
|
238
250
|
*
|
|
239
251
|
* A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
|
|
@@ -243,7 +255,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
|
|
|
243
255
|
* release lands), so the mark takes the twelve percent and the target keeps its geometry. The
|
|
244
256
|
* target still owns the focus ring and the state layer, and still carries the tone and depth
|
|
245
257
|
* response, so the boundary a press happens inside never moves. */
|
|
246
|
-
declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-
|
|
258
|
+
declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
|
|
247
259
|
/** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
|
|
248
260
|
* made by overshooting the position it lands in. It leaves without the overshoot, and
|
|
249
261
|
* reduced motion lands it in one step — which takes a *state-specific* override, because the
|
|
@@ -260,6 +272,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
|
|
|
260
272
|
* settle together, and an interrupted move retargets from wherever it currently is
|
|
261
273
|
* because it is a transition and not a keyframe. */
|
|
262
274
|
declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
|
|
275
|
+
/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
|
|
276
|
+
* movement of hundreds of pixels is followed rather than skipped. */
|
|
277
|
+
declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
|
|
263
278
|
/** Direct manipulation: the pointer owns the geometry, so a positional transition would be
|
|
264
279
|
* lag. While the primitive reports a drag, position and size are removed from the
|
|
265
280
|
* transition list and only tone and engagement geometry remain; a keyboard or programmatic
|
|
@@ -284,7 +299,7 @@ declare const motionPresenceTooltip: string;
|
|
|
284
299
|
declare const motionPresenceModal: string;
|
|
285
300
|
/** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
|
|
286
301
|
* never animated, so the plane can never animate the page behind it. */
|
|
287
|
-
declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
|
|
302
|
+
declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
|
|
288
303
|
/** Continuous activity is a distinct intent, not an exception to interaction motion: it
|
|
289
304
|
* reports work rather than answering an event, and it has no entrance of its own. */
|
|
290
305
|
declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
|
|
@@ -299,8 +314,12 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
|
|
|
299
314
|
declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
|
|
300
315
|
/** The state layer is a composited overlay, so its own opacity is the only thing that
|
|
301
316
|
* moves. Shared here because four interaction states across the library ride it. */
|
|
302
|
-
|
|
303
|
-
|
|
317
|
+
/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
|
|
318
|
+
* is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
|
|
319
|
+
* The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
|
|
320
|
+
declare const motionRowLayer = "before:transition-none";
|
|
321
|
+
declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
|
|
322
|
+
declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
|
|
304
323
|
declare const motionPresenceSheet: string;
|
|
305
324
|
declare const motionPresenceToast: string;
|
|
306
325
|
|
|
@@ -311,5 +330,5 @@ declare const motionPresenceToast: string;
|
|
|
311
330
|
*/
|
|
312
331
|
declare const cn: (...inputs: ClassValue[]) => string;
|
|
313
332
|
|
|
314
|
-
export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone };
|
|
333
|
+
export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
|
|
315
334
|
export type { MotionIntent };
|