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.
Files changed (133) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/components/Badge.cjs +1 -1
  3. package/dist/cjs/components/Badge.cjs.map +1 -1
  4. package/dist/cjs/components/Button.cjs +11 -2
  5. package/dist/cjs/components/Button.cjs.map +1 -1
  6. package/dist/cjs/components/Calendar.cjs +2 -2
  7. package/dist/cjs/components/Calendar.cjs.map +1 -1
  8. package/dist/cjs/components/Card.cjs +3 -2
  9. package/dist/cjs/components/Card.cjs.map +1 -1
  10. package/dist/cjs/components/Chip.cjs +3 -3
  11. package/dist/cjs/components/Chip.cjs.map +1 -1
  12. package/dist/cjs/components/Combobox.cjs +1 -1
  13. package/dist/cjs/components/Combobox.cjs.map +1 -1
  14. package/dist/cjs/components/Command.cjs +2 -2
  15. package/dist/cjs/components/Command.cjs.map +1 -1
  16. package/dist/cjs/components/CommandPalette.cjs +1 -1
  17. package/dist/cjs/components/CommandPalette.cjs.map +1 -1
  18. package/dist/cjs/components/DateRangePicker.cjs +1 -1
  19. package/dist/cjs/components/DateRangePicker.cjs.map +1 -1
  20. package/dist/cjs/components/DialogHeader.cjs +1 -1
  21. package/dist/cjs/components/DialogHeader.cjs.map +1 -1
  22. package/dist/cjs/components/Drawer.cjs +1 -1
  23. package/dist/cjs/components/Drawer.cjs.map +1 -1
  24. package/dist/cjs/components/Field.cjs +1 -1
  25. package/dist/cjs/components/Field.cjs.map +1 -1
  26. package/dist/cjs/components/FileUpload.cjs +2 -2
  27. package/dist/cjs/components/FileUpload.cjs.map +1 -1
  28. package/dist/cjs/components/IconButton.cjs +1 -1
  29. package/dist/cjs/components/IconButton.cjs.map +1 -1
  30. package/dist/cjs/components/Input.cjs +1 -1
  31. package/dist/cjs/components/Input.cjs.map +1 -1
  32. package/dist/cjs/components/NavItem.cjs +3 -3
  33. package/dist/cjs/components/NavItem.cjs.map +1 -1
  34. package/dist/cjs/components/NumberField.cjs +1 -1
  35. package/dist/cjs/components/NumberField.cjs.map +1 -1
  36. package/dist/cjs/components/Pagination.cjs +1 -1
  37. package/dist/cjs/components/Pagination.cjs.map +1 -1
  38. package/dist/cjs/components/Progress.cjs +7 -4
  39. package/dist/cjs/components/Progress.cjs.map +1 -1
  40. package/dist/cjs/components/Select.cjs +1 -1
  41. package/dist/cjs/components/Select.cjs.map +1 -1
  42. package/dist/cjs/components/Slider.cjs +1 -1
  43. package/dist/cjs/components/Slider.cjs.map +1 -1
  44. package/dist/cjs/components/Stepper.cjs +5 -1
  45. package/dist/cjs/components/Stepper.cjs.map +1 -1
  46. package/dist/cjs/components/Table.cjs +1 -1
  47. package/dist/cjs/components/Table.cjs.map +1 -1
  48. package/dist/cjs/components/Tabs.cjs +1 -1
  49. package/dist/cjs/components/Tabs.cjs.map +1 -1
  50. package/dist/cjs/components/Textarea.cjs +1 -1
  51. package/dist/cjs/components/Textarea.cjs.map +1 -1
  52. package/dist/cjs/components/Toast.cjs +5 -2
  53. package/dist/cjs/components/Toast.cjs.map +1 -1
  54. package/dist/cjs/components/Tooltip.cjs +1 -1
  55. package/dist/cjs/components/Tooltip.cjs.map +1 -1
  56. package/dist/cjs/components/TreeView.cjs +43 -10
  57. package/dist/cjs/components/TreeView.cjs.map +1 -1
  58. package/dist/cjs/components/ui.common.cjs +100 -45
  59. package/dist/cjs/components/ui.common.cjs.map +1 -1
  60. package/dist/cjs/components/ui.motion.cjs +37 -13
  61. package/dist/cjs/components/ui.motion.cjs.map +1 -1
  62. package/dist/cjs/dev.cjs +8 -0
  63. package/dist/cjs/dev.cjs.map +1 -1
  64. package/dist/esm/components/Badge.js +2 -2
  65. package/dist/esm/components/Badge.js.map +1 -1
  66. package/dist/esm/components/Button.js +12 -3
  67. package/dist/esm/components/Button.js.map +1 -1
  68. package/dist/esm/components/Calendar.js +3 -3
  69. package/dist/esm/components/Calendar.js.map +1 -1
  70. package/dist/esm/components/Card.js +4 -3
  71. package/dist/esm/components/Card.js.map +1 -1
  72. package/dist/esm/components/Chip.js +3 -3
  73. package/dist/esm/components/Chip.js.map +1 -1
  74. package/dist/esm/components/CodeBlock.js +5 -4
  75. package/dist/esm/components/CodeBlock.js.map +1 -1
  76. package/dist/esm/components/Combobox.js +2 -2
  77. package/dist/esm/components/Combobox.js.map +1 -1
  78. package/dist/esm/components/Command.js +3 -3
  79. package/dist/esm/components/Command.js.map +1 -1
  80. package/dist/esm/components/CommandPalette.js +2 -2
  81. package/dist/esm/components/CommandPalette.js.map +1 -1
  82. package/dist/esm/components/DateRangePicker.js +2 -2
  83. package/dist/esm/components/DateRangePicker.js.map +1 -1
  84. package/dist/esm/components/DialogHeader.js +2 -2
  85. package/dist/esm/components/DialogHeader.js.map +1 -1
  86. package/dist/esm/components/Drawer.js +2 -2
  87. package/dist/esm/components/Drawer.js.map +1 -1
  88. package/dist/esm/components/Field.js +2 -2
  89. package/dist/esm/components/Field.js.map +1 -1
  90. package/dist/esm/components/FileUpload.js +3 -3
  91. package/dist/esm/components/FileUpload.js.map +1 -1
  92. package/dist/esm/components/IconButton.js +1 -1
  93. package/dist/esm/components/IconButton.js.map +1 -1
  94. package/dist/esm/components/Input.js +2 -2
  95. package/dist/esm/components/Input.js.map +1 -1
  96. package/dist/esm/components/Markdown.js +3 -2
  97. package/dist/esm/components/Markdown.js.map +1 -1
  98. package/dist/esm/components/NavItem.js +5 -5
  99. package/dist/esm/components/NavItem.js.map +1 -1
  100. package/dist/esm/components/NumberField.js +2 -2
  101. package/dist/esm/components/NumberField.js.map +1 -1
  102. package/dist/esm/components/Pagination.js +2 -2
  103. package/dist/esm/components/Pagination.js.map +1 -1
  104. package/dist/esm/components/Progress.js +8 -5
  105. package/dist/esm/components/Progress.js.map +1 -1
  106. package/dist/esm/components/Select.js +2 -2
  107. package/dist/esm/components/Select.js.map +1 -1
  108. package/dist/esm/components/Slider.js +1 -1
  109. package/dist/esm/components/Slider.js.map +1 -1
  110. package/dist/esm/components/Stepper.js +6 -2
  111. package/dist/esm/components/Stepper.js.map +1 -1
  112. package/dist/esm/components/Table.js +2 -2
  113. package/dist/esm/components/Table.js.map +1 -1
  114. package/dist/esm/components/Tabs.js +2 -2
  115. package/dist/esm/components/Tabs.js.map +1 -1
  116. package/dist/esm/components/Textarea.js +2 -2
  117. package/dist/esm/components/Textarea.js.map +1 -1
  118. package/dist/esm/components/Toast.js +6 -3
  119. package/dist/esm/components/Toast.js.map +1 -1
  120. package/dist/esm/components/Tooltip.js +2 -2
  121. package/dist/esm/components/Tooltip.js.map +1 -1
  122. package/dist/esm/components/TreeView.js +45 -12
  123. package/dist/esm/components/TreeView.js.map +1 -1
  124. package/dist/esm/components/ui.common.js +98 -47
  125. package/dist/esm/components/ui.common.js.map +1 -1
  126. package/dist/esm/components/ui.motion.js +34 -14
  127. package/dist/esm/components/ui.motion.js.map +1 -1
  128. package/dist/esm/dev.js +2 -2
  129. package/dist/styles.css +150 -63
  130. package/dist/theme.css +33 -4
  131. package/dist/types/dev.d.cts +55 -36
  132. package/dist/types/dev.d.ts +55 -36
  133. package/package.json +1 -1
@@ -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-[1.25rem]";
20
+ readonly control: "rounded-[1rem]";
21
21
  readonly mark: "rounded-[0.625rem]";
22
- readonly row: "rounded-[0.875rem]";
23
- readonly prominent: "rounded-[1.5rem]";
24
- readonly surface: "rounded-[1.75rem]";
25
- readonly sheet: "rounded-[1.25rem]";
26
- readonly expressive: "rounded-[2rem]";
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: "min-h-10 text-sm";
90
- readonly normal: "min-h-12 text-[0.95rem]";
91
- readonly prominent: "min-h-14 text-lg";
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 selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary/[0.22] has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
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 soft: {
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
- /** A control answers a press immediately and settles on its release.
229
- *
230
- * The recipe owns the *amplitude* of that answer as well as its timing, because how far a
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-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
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
- declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
303
- declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
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 };
@@ -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-[1.25rem]";
20
+ readonly control: "rounded-[1rem]";
21
21
  readonly mark: "rounded-[0.625rem]";
22
- readonly row: "rounded-[0.875rem]";
23
- readonly prominent: "rounded-[1.5rem]";
24
- readonly surface: "rounded-[1.75rem]";
25
- readonly sheet: "rounded-[1.25rem]";
26
- readonly expressive: "rounded-[2rem]";
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: "min-h-10 text-sm";
90
- readonly normal: "min-h-12 text-[0.95rem]";
91
- readonly prominent: "min-h-14 text-lg";
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 selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary/[0.22] has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
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 soft: {
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
- /** A control answers a press immediately and settles on its release.
229
- *
230
- * The recipe owns the *amplitude* of that answer as well as its timing, because how far a
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-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
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
- declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
303
- declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sherick-ui",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "description": "A reusable React component library inspired by Material 3 Expressive.",
5
5
  "repository": {
6
6
  "type": "git",