@sableui/react 0.13.2 → 0.14.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/AGENTS.md +2 -2
- package/CHANGELOG.md +114 -0
- package/CONTRIBUTING.md +6 -4
- package/DESIGN.md +8 -3
- package/dist/blocks/approval-block.js +93 -0
- package/dist/blocks/approval-block.meta.js +23 -0
- package/dist/blocks/index.d.ts +16 -1
- package/dist/blocks/index.js +4 -0
- package/dist/components/accordion/accordion.meta.js +8 -2
- package/dist/components/area-chart/area-chart.meta.js +10 -3
- package/dist/components/attachment/attachment.meta.js +26 -0
- package/dist/components/bar-chart/bar-chart.meta.js +11 -4
- package/dist/components/bottom-nav/bottom-nav.js +3 -1
- package/dist/components/bottom-nav/bottom-nav.meta.js +32 -0
- package/dist/components/breadcrumbs/breadcrumbs.meta.js +26 -0
- package/dist/components/button/button.js +21 -4
- package/dist/components/button/button.meta.js +7 -7
- package/dist/components/calendar/calendar.js +18 -1
- package/dist/components/calendar/calendar.meta.js +38 -0
- package/dist/components/carousel/carousel.js +6 -4
- package/dist/components/carousel/carousel.meta.js +42 -0
- package/dist/components/chat-composer/chat-composer.js +21 -21
- package/dist/components/chat-composer/chat-composer.meta.js +38 -0
- package/dist/components/chat-composer/use-eased-growth.js +70 -0
- package/dist/components/checkbox/checkbox-mark.js +8 -1
- package/dist/components/checkbox/checkbox.js +3 -1
- package/dist/components/checkbox/checkbox.meta.js +32 -0
- package/dist/components/checkbox-card/checkbox-card.js +3 -0
- package/dist/components/checkbox-card/checkbox-card.meta.js +32 -0
- package/dist/components/code-block/code-block.js +14 -3
- package/dist/components/code-block/code-block.meta.js +28 -1
- package/dist/components/collapsible/collapsible.meta.js +32 -0
- package/dist/components/color-field/color-field.meta.js +26 -0
- package/dist/components/combobox/combobox.meta.js +44 -0
- package/dist/components/command-menu/command-menu.js +8 -3
- package/dist/components/command-menu/command-menu.meta.js +38 -0
- package/dist/components/confirm-button/confirm-button.js +179 -0
- package/dist/components/confirm-button/confirm-button.meta.js +143 -0
- package/dist/components/confirm-button/index.js +7 -0
- package/dist/components/data-table/data-table.js +6 -2
- package/dist/components/data-table/data-table.meta.js +32 -0
- package/dist/components/entity/entity.meta.js +26 -0
- package/dist/components/feedback/feedback.js +113 -47
- package/dist/components/feedback/feedback.meta.js +49 -4
- package/dist/components/input-group/input-group.meta.js +27 -1
- package/dist/components/line-chart/line-chart.meta.js +10 -3
- package/dist/components/middle-truncate/middle-truncate.meta.js +1 -1
- package/dist/components/note/note.meta.js +32 -0
- package/dist/components/notification-badge/notification-badge.js +17 -5
- package/dist/components/notification-badge/notification-badge.meta.js +34 -2
- package/dist/components/number-ticker/index.js +7 -0
- package/dist/components/number-ticker/number-ticker.js +246 -0
- package/dist/components/number-ticker/number-ticker.meta.js +159 -0
- package/dist/components/otp-field/otp-field.js +23 -3
- package/dist/components/otp-field/otp-field.meta.js +23 -2
- package/dist/components/panel-group/panel-group.meta.js +26 -0
- package/dist/components/panel-section/panel-section.js +37 -10
- package/dist/components/panel-section/panel-section.meta.js +32 -0
- package/dist/components/pie-chart/pie-chart.js +20 -11
- package/dist/components/pie-chart/pie-chart.meta.js +17 -4
- package/dist/components/pill/pill.meta.js +32 -0
- package/dist/components/radar-chart/radar-chart.js +4 -3
- package/dist/components/radar-chart/radar-chart.meta.js +10 -3
- package/dist/components/radial-chart/radial-chart.js +22 -22
- package/dist/components/radial-chart/radial-chart.meta.js +17 -4
- package/dist/components/radio/radio.meta.js +26 -0
- package/dist/components/radio-card/radio-card.meta.js +38 -0
- package/dist/components/relative-time/relative-time.meta.js +32 -0
- package/dist/components/scroller/scroller.meta.js +32 -0
- package/dist/components/scrub-field/scrub-field.meta.js +32 -0
- package/dist/components/search-input/search-input.js +9 -7
- package/dist/components/search-input/search-input.meta.js +26 -0
- package/dist/components/show-more/show-more.js +1 -4
- package/dist/components/show-more/show-more.meta.js +38 -0
- package/dist/components/side-nav/side-nav.js +21 -1
- package/dist/components/side-nav/side-nav.meta.js +32 -0
- package/dist/components/side-nav/side-nav.variants.js +3 -1
- package/dist/components/sidebar/sidebar.js +31 -8
- package/dist/components/sidebar/sidebar.meta.js +38 -0
- package/dist/components/slider/slider.meta.js +26 -0
- package/dist/components/sparkline/sparkline.js +7 -4
- package/dist/components/sparkline/sparkline.meta.js +9 -2
- package/dist/components/table/table.meta.js +26 -0
- package/dist/components/tabs/tabs.js +27 -8
- package/dist/components/tabs/tabs.meta.js +46 -3
- package/dist/components/theme-selector/theme-selector.meta.js +32 -0
- package/dist/components/theme-switcher/theme-switcher.js +4 -1
- package/dist/components/theme-switcher/theme-switcher.meta.js +42 -0
- package/dist/components/toggle/toggle.js +28 -5
- package/dist/components/toggle/toggle.meta.js +44 -2
- package/dist/components/tool-call/index.js +8 -0
- package/dist/components/tool-call/tool-call.js +117 -0
- package/dist/components/tool-call/tool-call.meta.js +147 -0
- package/dist/components/tool-call/tool-call.variants.js +33 -0
- package/dist/components/tooltip/index.js +3 -1
- package/dist/components/tooltip/tooltip.js +84 -0
- package/dist/components/tooltip/tooltip.meta.js +16 -1
- package/dist/components/tree/tree.js +71 -6
- package/dist/components/tree/tree.meta.js +32 -0
- package/dist/components/video/video.meta.js +32 -0
- package/dist/file-hashes.json +114 -97
- package/dist/foundations/motion.js +49 -3
- package/dist/index.d.ts +614 -44
- package/dist/index.js +4 -1
- package/dist/lib/chart/cartesian.js +9 -10
- package/dist/lib/chart/chart-center.js +30 -0
- package/dist/lib/chart/chart-frame.js +15 -8
- package/dist/lib/chart/dim.js +13 -0
- package/dist/lib/chart/format.js +7 -1
- package/dist/lib/chart/motion.js +6 -4
- package/dist/lib/highlight-glide.js +68 -10
- package/dist/lib/taxonomy.js +3 -0
- package/dist/motion/MotionProvider.js +45 -3
- package/dist/motion/Reveal.js +1 -1
- package/dist/motion/TextReveal.js +1 -1
- package/dist/motion/index.js +15 -2
- package/dist/motion/useAutoSize.js +42 -0
- package/dist/motion/useShake.js +25 -0
- package/dist/styles.css +298 -5
- package/llms/blocks/approval-block.md +128 -0
- package/llms/components/accordion.md +3 -2
- package/llms/components/area-chart.md +4 -3
- package/llms/components/attachment.md +7 -0
- package/llms/components/bar-chart.md +5 -4
- package/llms/components/bottom-nav.md +8 -0
- package/llms/components/breadcrumbs.md +7 -0
- package/llms/components/button.md +6 -6
- package/llms/components/calendar.md +9 -0
- package/llms/components/carousel.md +17 -0
- package/llms/components/chat-composer.md +9 -0
- package/llms/components/checkbox-card.md +8 -0
- package/llms/components/checkbox.md +8 -0
- package/llms/components/code-block.md +8 -0
- package/llms/components/collapsible.md +8 -0
- package/llms/components/color-field.md +7 -0
- package/llms/components/combobox.md +10 -0
- package/llms/components/command-menu.md +9 -0
- package/llms/components/confirm-button.md +92 -0
- package/llms/components/data-table.md +8 -0
- package/llms/components/entity.md +7 -0
- package/llms/components/feedback.md +22 -3
- package/llms/components/input-group.md +8 -1
- package/llms/components/line-chart.md +4 -3
- package/llms/components/middle-truncate.md +1 -1
- package/llms/components/note.md +8 -0
- package/llms/components/notification-badge.md +10 -2
- package/llms/components/number-ticker.md +86 -0
- package/llms/components/otp-field.md +15 -1
- package/llms/components/panel-group.md +7 -0
- package/llms/components/panel-section.md +8 -0
- package/llms/components/pie-chart.md +6 -4
- package/llms/components/pill.md +8 -0
- package/llms/components/radar-chart.md +4 -3
- package/llms/components/radial-chart.md +6 -4
- package/llms/components/radio-card.md +9 -0
- package/llms/components/radio.md +7 -0
- package/llms/components/relative-time.md +8 -0
- package/llms/components/scroller.md +8 -0
- package/llms/components/scrub-field.md +8 -0
- package/llms/components/search-input.md +7 -0
- package/llms/components/show-more.md +9 -0
- package/llms/components/side-nav.md +8 -0
- package/llms/components/sidebar.md +9 -0
- package/llms/components/slider.md +7 -0
- package/llms/components/sparkline.md +3 -2
- package/llms/components/table.md +7 -0
- package/llms/components/tabs.md +20 -2
- package/llms/components/theme-selector.md +8 -0
- package/llms/components/theme-switcher.md +17 -0
- package/llms/components/toggle.md +19 -2
- package/llms/components/tool-call.md +115 -0
- package/llms/components/tooltip.md +11 -1
- package/llms/components/tree.md +8 -0
- package/llms/components/video.md +8 -0
- package/llms/foundations/motion.md +48 -3
- package/llms/reference/utilities.md +23 -1
- package/llms/tasks/reviewing-motion.md +14 -0
- package/llms-full.txt +955 -49
- package/llms.txt +15 -10
- package/package.json +1 -1
- package/registry.json +2565 -210
- package/targets/ios.json +27 -0
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, Cente
|
|
|
9
9
|
export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
|
|
10
10
|
export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
|
|
11
11
|
import * as react from 'react';
|
|
12
|
-
import { ReactNode, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, FormEvent } from 'react';
|
|
12
|
+
import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, FormEvent } from 'react';
|
|
13
13
|
import { VariantProps } from 'class-variance-authority';
|
|
14
14
|
import { useRender } from '@base-ui/react/use-render';
|
|
15
15
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
@@ -144,10 +144,22 @@ declare function componentLabel(name: string): string;
|
|
|
144
144
|
*
|
|
145
145
|
* - `system` — defer to the OS `prefers-reduced-motion` preference (default).
|
|
146
146
|
* - `full` — force motion on (overrides the OS preference in-app).
|
|
147
|
+
* - `subtle` — essential motion only: feedback, overlays, disclosure and
|
|
148
|
+
* loaders play; expressive motion (glides, rolling numbers, drawn
|
|
149
|
+
* ticks, shakes, staggers, overshoot) resolves instantly. Follows
|
|
150
|
+
* the OS preference for everything else, so it never turns motion
|
|
151
|
+
* on for someone who asked for it off.
|
|
147
152
|
* - `reduced` — damp all token-driven motion to static.
|
|
148
153
|
* - `off` — synonym for `reduced`; motion is fully disabled.
|
|
149
154
|
*/
|
|
150
|
-
type MotionPolicy = "system" | "full" | "reduced" | "off";
|
|
155
|
+
type MotionPolicy = "system" | "full" | "subtle" | "reduced" | "off";
|
|
156
|
+
/**
|
|
157
|
+
* How much motion one component or region may use — the value of a
|
|
158
|
+
* component's `motion` prop and of `<MotionScope level>`. It can only turn
|
|
159
|
+
* motion DOWN from what the surroundings allow: `full` means "inherit", never
|
|
160
|
+
* "override the reader's reduce-motion setting".
|
|
161
|
+
*/
|
|
162
|
+
type MotionLevel = "full" | "subtle" | "off";
|
|
151
163
|
interface MotionContextValue {
|
|
152
164
|
policy: MotionPolicy;
|
|
153
165
|
setPolicy: (policy: MotionPolicy) => void;
|
|
@@ -155,6 +167,12 @@ interface MotionContextValue {
|
|
|
155
167
|
prefersReducedMotion: boolean;
|
|
156
168
|
/** Resolved: will token-driven motion play right now? Mirrors the CSS. */
|
|
157
169
|
enabled: boolean;
|
|
170
|
+
/**
|
|
171
|
+
* Resolved: will EXPRESSIVE motion play — glides, rolling numbers, drawn
|
|
172
|
+
* ticks, shakes, staggers? False under `subtle` as well as when motion is
|
|
173
|
+
* off. JS-driven flourishes read this; essential JS motion reads `enabled`.
|
|
174
|
+
*/
|
|
175
|
+
expressive: boolean;
|
|
158
176
|
}
|
|
159
177
|
interface MotionProviderProps {
|
|
160
178
|
children: ReactNode;
|
|
@@ -186,6 +204,49 @@ interface MotionProviderProps {
|
|
|
186
204
|
* then read/flip it anywhere via `useMotion()`.
|
|
187
205
|
*/
|
|
188
206
|
declare function MotionProvider({ children, defaultPolicy, policy: controlledPolicy, onPolicyChange, target, }: MotionProviderProps): react.JSX.Element;
|
|
207
|
+
/**
|
|
208
|
+
* The value `data-motion` should carry for a component's `motion` prop:
|
|
209
|
+
* nothing for `full` (inherit), the level otherwise. Spread it on the
|
|
210
|
+
* component's root element — the CSS policy does the rest.
|
|
211
|
+
*/
|
|
212
|
+
declare function motionAttribute(level: MotionLevel | undefined): MotionLevel | undefined;
|
|
213
|
+
/**
|
|
214
|
+
* A component's motion, from its own `motion` prop and everything around it
|
|
215
|
+
* (provider, scopes, the OS preference) — whichever is lower. Use the returned
|
|
216
|
+
* `enabled` / `expressive` to gate JS-driven motion, and spread `attribute`
|
|
217
|
+
* as the root's `data-motion` so the CSS recipes inside agree:
|
|
218
|
+
*
|
|
219
|
+
* const motion = useMotionLevel(props.motion)
|
|
220
|
+
* <div data-motion={motion.attribute}>…</div>
|
|
221
|
+
*/
|
|
222
|
+
declare function useMotionLevel(level?: MotionLevel): {
|
|
223
|
+
level: MotionLevel;
|
|
224
|
+
enabled: boolean;
|
|
225
|
+
expressive: boolean;
|
|
226
|
+
attribute: MotionLevel | undefined;
|
|
227
|
+
};
|
|
228
|
+
interface MotionScopeProps {
|
|
229
|
+
children: ReactNode;
|
|
230
|
+
/**
|
|
231
|
+
* How much motion this region may use. `subtle` keeps feedback, overlays
|
|
232
|
+
* and loaders and drops the flourishes; `off` stills everything. A scope
|
|
233
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
234
|
+
* setting.
|
|
235
|
+
*/
|
|
236
|
+
level: Exclude<MotionLevel, "full">;
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* Turns motion down for one region — a dense data view, an embedded widget, a
|
|
240
|
+
* screen a test captures — without touching the rest of the app. Renders a
|
|
241
|
+
* `display: contents` wrapper carrying `data-motion`, so it adds no box to the
|
|
242
|
+
* layout, and provides the same level to `useMotion()` / `useMotionLevel()`
|
|
243
|
+
* below it so JS-driven motion agrees with the CSS.
|
|
244
|
+
*
|
|
245
|
+
* Overlays portal out of the DOM subtree, so their CSS follows the app-level
|
|
246
|
+
* policy rather than the scope; set the level on <MotionProvider> to cover
|
|
247
|
+
* them too.
|
|
248
|
+
*/
|
|
249
|
+
declare function MotionScope({ children, level }: MotionScopeProps): react.JSX.Element;
|
|
189
250
|
/**
|
|
190
251
|
* Read and control the motion policy. Falls back to a provider-less default
|
|
191
252
|
* (follows the OS preference) so it's safe to call without a <MotionProvider> —
|
|
@@ -201,6 +262,64 @@ declare function useMotion(): MotionContextValue;
|
|
|
201
262
|
*/
|
|
202
263
|
declare function useReducedMotion(): boolean;
|
|
203
264
|
|
|
265
|
+
/**
|
|
266
|
+
* Drives the `motion-shake` recipe: call `shake()` when an answer is refused
|
|
267
|
+
* (a wrong code, a submit with invalid fields) and spread `shakeProps` on the
|
|
268
|
+
* element carrying `motion-shake`.
|
|
269
|
+
*
|
|
270
|
+
* const { shake, shakeProps } = useShake()
|
|
271
|
+
* <div className="motion-shake" {...shakeProps}>…</div>
|
|
272
|
+
*
|
|
273
|
+
* The attribute is cleared when the animation ends, so the next refusal plays
|
|
274
|
+
* it again. A refusal that lands mid-shake restarts it: the attribute is
|
|
275
|
+
* dropped for one frame and set again, which is the only way to replay a CSS
|
|
276
|
+
* animation without remounting the element.
|
|
277
|
+
*
|
|
278
|
+
* The recipe's duration is expressive, so under `subtle` and reduced motion it
|
|
279
|
+
* is 0 — the shake resolves instantly, and the field's own error colour and
|
|
280
|
+
* message carry the refusal. Never shake without one.
|
|
281
|
+
*/
|
|
282
|
+
declare function useShake(): {
|
|
283
|
+
shake: () => void;
|
|
284
|
+
shakeProps: {
|
|
285
|
+
"data-shake": "" | undefined;
|
|
286
|
+
onAnimationEnd: (event: AnimationEvent<HTMLElement>) => void;
|
|
287
|
+
};
|
|
288
|
+
};
|
|
289
|
+
|
|
290
|
+
/**
|
|
291
|
+
* Lets an element ease to its content's new size when the content changes in
|
|
292
|
+
* place — "Delete" becoming "Confirm delete?", "Copy" becoming "Copied".
|
|
293
|
+
*
|
|
294
|
+
* CSS cannot do this alone. A transition fires when a computed value changes,
|
|
295
|
+
* and a content-sized box computes `width: auto` before AND after the label
|
|
296
|
+
* swap, so there is nothing to interpolate; `interpolate-size` only helps
|
|
297
|
+
* between a keyword and a length. So the outer element gets an explicit pixel
|
|
298
|
+
* size, measured from an inner element that keeps sizing to its content, and
|
|
299
|
+
* `motion-size` on the outer one eases between the two pixel values.
|
|
300
|
+
*
|
|
301
|
+
* const size = useAutoSize<HTMLButtonElement, HTMLSpanElement>()
|
|
302
|
+
* <button ref={size.outerRef} className="motion-size">
|
|
303
|
+
* <span ref={size.innerRef} className="inline-flex w-max">{label}</span>
|
|
304
|
+
* </button>
|
|
305
|
+
*
|
|
306
|
+
* The outer element's own padding and border are added back, so the inner
|
|
307
|
+
* element is just the content. The first measurement is applied with
|
|
308
|
+
* transitions suppressed, so nothing animates on mount. Under `subtle` and
|
|
309
|
+
* reduced motion the recipe's size duration is 0 and the box simply resizes.
|
|
310
|
+
*
|
|
311
|
+
* Pass `enabled: false` when something else owns the size — a full-width
|
|
312
|
+
* stacked action, a caller's `w-*` class. The inline pixel size would win over
|
|
313
|
+
* any class, so the hook stands down and clears what it wrote.
|
|
314
|
+
*/
|
|
315
|
+
declare function useAutoSize<Outer extends HTMLElement = HTMLElement, Inner extends HTMLElement = HTMLElement>({ axis, enabled }?: {
|
|
316
|
+
axis?: "width" | "height" | "both";
|
|
317
|
+
enabled?: boolean;
|
|
318
|
+
}): {
|
|
319
|
+
outerRef: react.RefObject<Outer | null>;
|
|
320
|
+
innerRef: react.RefObject<Inner | null>;
|
|
321
|
+
};
|
|
322
|
+
|
|
204
323
|
interface UseInViewOptions {
|
|
205
324
|
/** Stop observing after the first time it enters view. @default true */
|
|
206
325
|
once?: boolean;
|
|
@@ -367,7 +486,9 @@ interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick">,
|
|
|
367
486
|
*/
|
|
368
487
|
render?: useRender.RenderProp;
|
|
369
488
|
/**
|
|
370
|
-
* Show a
|
|
489
|
+
* Show a Spinner while an action is in flight, and ignore presses. It takes
|
|
490
|
+
* the `iconStart` slot, or lays over a plain label (faded in place) so the
|
|
491
|
+
* button keeps its width.
|
|
371
492
|
* Sets `aria-busy` and `aria-disabled`, not the native `disabled`: disabling
|
|
372
493
|
* the focused button dropped focus to the page, so a sheet opened by the
|
|
373
494
|
* action had nowhere to return it. @default false
|
|
@@ -454,6 +575,74 @@ declare function ButtonGroup({ className, role, ...props }: ButtonGroupProps): r
|
|
|
454
575
|
|
|
455
576
|
declare const buttonGroupMeta: ComponentMeta;
|
|
456
577
|
|
|
578
|
+
type IconSize = "icon" | "icon-sm" | "icon-xs";
|
|
579
|
+
interface ConfirmButtonProps extends Omit<ButtonProps, "children" | "onClick" | "variant" | "size" | "loading" | "loadingLabel" | "iconStart" | "render" | "type"> {
|
|
580
|
+
/** The idle label — the action, e.g. "Delete". */
|
|
581
|
+
children: ReactNode;
|
|
582
|
+
/**
|
|
583
|
+
* The label while armed, waiting for the second press. Defaults to
|
|
584
|
+
* "Confirm <label>?" for a text label ("Delete" → "Confirm delete?") and
|
|
585
|
+
* "Confirm?" otherwise. Pass it to localise.
|
|
586
|
+
*/
|
|
587
|
+
confirmLabel?: ReactNode;
|
|
588
|
+
/**
|
|
589
|
+
* Called on the second press, while armed. May return a promise: the button
|
|
590
|
+
* then stays armed and shows its spinner until it settles.
|
|
591
|
+
*/
|
|
592
|
+
onConfirm: () => unknown;
|
|
593
|
+
/** How long it stays armed without a second press, in ms. @default 3000 */
|
|
594
|
+
timeout?: number;
|
|
595
|
+
/** The idle look. @default "secondary" */
|
|
596
|
+
variant?: ButtonProps["variant"];
|
|
597
|
+
/** The armed look. @default "destructive" */
|
|
598
|
+
confirmVariant?: ButtonProps["variant"];
|
|
599
|
+
/** A labelled size — the label is the whole interaction, so no icon-only sizes. @default "md" */
|
|
600
|
+
size?: Exclude<NonNullable<ButtonProps["size"]>, IconSize>;
|
|
601
|
+
/** A leading icon, kept through both states (e.g. `<Icon name="trash" />`). */
|
|
602
|
+
icon?: ReactNode;
|
|
603
|
+
/**
|
|
604
|
+
* What assistive tech hears when it arms, after the armed label.
|
|
605
|
+
* @default "Press again to confirm."
|
|
606
|
+
*/
|
|
607
|
+
confirmHint?: string;
|
|
608
|
+
/**
|
|
609
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
610
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
611
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
612
|
+
* setting. The width easing and the draining countdown are the flourish; the
|
|
613
|
+
* label cross-fade and colour change stay under `subtle`.
|
|
614
|
+
* @default "full"
|
|
615
|
+
*/
|
|
616
|
+
motion?: MotionLevel;
|
|
617
|
+
}
|
|
618
|
+
/**
|
|
619
|
+
* ConfirmButton — an inline two-step confirm for a low-stakes destructive or
|
|
620
|
+
* irreversible action, where a modal would be heavier than the decision.
|
|
621
|
+
*
|
|
622
|
+
* <ConfirmButton icon={<Icon name="trash" />} onConfirm={removeRow}>Delete</ConfirmButton>
|
|
623
|
+
*
|
|
624
|
+
* The first press ARMS it: the label becomes the question ("Confirm delete?"),
|
|
625
|
+
* the button turns destructive, and a thin line drains along its foot for the
|
|
626
|
+
* time it will wait. A second press inside that time runs `onConfirm`. Leaving
|
|
627
|
+
* it — the timeout, Escape, focus moving away, a press elsewhere — disarms it
|
|
628
|
+
* and the original label returns. Enter and Space work twice, like a click.
|
|
629
|
+
*
|
|
630
|
+
* Both labels stay mounted in one grid cell and cross-fade. The button's width
|
|
631
|
+
* eases to the new label (useAutoSize + motion-size), so it grows into the
|
|
632
|
+
* question instead of jumping, and the neighbours it pushes travel rather than
|
|
633
|
+
* teleport. CSS alone cannot do it: a content-sized button computes
|
|
634
|
+
* `width: auto` before and after the swap, so nothing changes to transition.
|
|
635
|
+
*
|
|
636
|
+
* Built on Button: variants are swapped, never restyled, so every theme's
|
|
637
|
+
* destructive tier is the armed look.
|
|
638
|
+
*/
|
|
639
|
+
declare function ConfirmButton({ children, confirmLabel, onConfirm, timeout, variant, confirmVariant, size, icon, confirmHint, motion, disabled, className, onBlur, onKeyDown, ref, ...props }: ConfirmButtonProps): react.JSX.Element;
|
|
640
|
+
declare namespace ConfirmButton {
|
|
641
|
+
var displayName: string;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
declare const confirmButtonMeta: ComponentMeta;
|
|
645
|
+
|
|
457
646
|
interface CardProps extends ComponentPropsWithRef<"div"> {
|
|
458
647
|
/** "default" = raised surface (bg-card + edge + soft shadow). "flat" = transparent. */
|
|
459
648
|
variant?: "default" | "flat";
|
|
@@ -1260,8 +1449,21 @@ type OtpFieldProps = Omit<BaseRootProps, "className" | "render" | "length" | "ch
|
|
|
1260
1449
|
* @default (index, length) => `Character ${index + 1} of ${length}`
|
|
1261
1450
|
*/
|
|
1262
1451
|
getSlotLabel?: (index: number, length: number) => string;
|
|
1263
|
-
/**
|
|
1452
|
+
/**
|
|
1453
|
+
* Marks every slot invalid: destructive border and digits, and — when it
|
|
1454
|
+
* turns on after mount — one short shake of the whole field. `<Field error>`
|
|
1455
|
+
* sets this for you.
|
|
1456
|
+
*/
|
|
1264
1457
|
"aria-invalid"?: boolean | "true" | "false";
|
|
1458
|
+
/**
|
|
1459
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
1460
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
1461
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
1462
|
+
* setting. The shake on a refused code is the flourish; the destructive
|
|
1463
|
+
* colour stays at every level.
|
|
1464
|
+
* @default "full"
|
|
1465
|
+
*/
|
|
1466
|
+
motion?: MotionLevel;
|
|
1265
1467
|
};
|
|
1266
1468
|
/**
|
|
1267
1469
|
* OtpField — a one-time-code entry over Base UI's OTP Field.
|
|
@@ -1278,8 +1480,13 @@ type OtpFieldProps = Omit<BaseRootProps, "className" | "render" | "length" | "ch
|
|
|
1278
1480
|
* Slots are `text-mono-lg` (20px) so iOS Safari never zooms on focus, and sit
|
|
1279
1481
|
* on the control ladder — `--control-md` wide, `--control-lg` tall — so a
|
|
1280
1482
|
* compact Workspace retunes them with everything else.
|
|
1483
|
+
*
|
|
1484
|
+
* A refused code shakes the field once (motion-shake) as it turns invalid, and
|
|
1485
|
+
* the digits take the destructive colour. The slots are NOT cleared: the wrong
|
|
1486
|
+
* digits are the evidence of which one was mistyped, and the error message
|
|
1487
|
+
* under the field says what to do next.
|
|
1281
1488
|
*/
|
|
1282
|
-
declare function OtpField({ className, length, groupSize, getSlotLabel, "aria-invalid": ariaInvalid, ...root }: OtpFieldProps): react.JSX.Element;
|
|
1489
|
+
declare function OtpField({ className, length, groupSize, getSlotLabel, "aria-invalid": ariaInvalid, motion, onAnimationEnd, ...root }: OtpFieldProps): react.JSX.Element;
|
|
1283
1490
|
declare namespace OtpField {
|
|
1284
1491
|
var displayName: string;
|
|
1285
1492
|
}
|
|
@@ -1431,7 +1638,7 @@ declare namespace Label {
|
|
|
1431
1638
|
|
|
1432
1639
|
declare const labelMeta: ComponentMeta;
|
|
1433
1640
|
|
|
1434
|
-
type RootProps$
|
|
1641
|
+
type RootProps$8 = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
|
|
1435
1642
|
className?: string;
|
|
1436
1643
|
};
|
|
1437
1644
|
/**
|
|
@@ -1445,15 +1652,22 @@ type RootProps$7 = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
|
|
|
1445
1652
|
* Use it for immediate-effect toggles. For deferred/form-submit choices that
|
|
1446
1653
|
* need a visible label and validation, reach for a checkbox instead.
|
|
1447
1654
|
*/
|
|
1448
|
-
declare function Switch({ className, ...props }: RootProps$
|
|
1655
|
+
declare function Switch({ className, ...props }: RootProps$8): react.JSX.Element;
|
|
1449
1656
|
declare namespace Switch {
|
|
1450
1657
|
var displayName: string;
|
|
1451
1658
|
}
|
|
1452
1659
|
|
|
1453
1660
|
declare const switchMeta: ComponentMeta;
|
|
1454
1661
|
|
|
1455
|
-
type RootProps$
|
|
1662
|
+
type RootProps$7 = Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> & {
|
|
1456
1663
|
className?: string;
|
|
1664
|
+
/**
|
|
1665
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
1666
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
1667
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
1668
|
+
* setting. Under `subtle` the tick fades in instead of drawing itself.
|
|
1669
|
+
*/
|
|
1670
|
+
motion?: MotionLevel;
|
|
1457
1671
|
};
|
|
1458
1672
|
/**
|
|
1459
1673
|
* Checkbox — themed wrapper over Base UI's Checkbox (Root + Indicator).
|
|
@@ -1469,7 +1683,7 @@ type RootProps$6 = Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> & {
|
|
|
1469
1683
|
* The box and its mark are shared with CheckboxCard (`CHECK_BOX` +
|
|
1470
1684
|
* `CheckboxMark`), so the standalone control and the card's box cannot drift.
|
|
1471
1685
|
*/
|
|
1472
|
-
declare function Checkbox({ className, children, ...props }: RootProps$
|
|
1686
|
+
declare function Checkbox({ className, children, motion, ...props }: RootProps$7): react.JSX.Element;
|
|
1473
1687
|
declare namespace Checkbox {
|
|
1474
1688
|
var displayName: string;
|
|
1475
1689
|
}
|
|
@@ -1494,23 +1708,47 @@ declare const checkboxMeta: ComponentMeta;
|
|
|
1494
1708
|
* no rule — the switcher idiom (Preview / Code, view modes inside a card),
|
|
1495
1709
|
* where a rule under a short row of two or three options reads as structure
|
|
1496
1710
|
* that is not there. The active tab reads from Base UI's `data-active`.
|
|
1711
|
+
*
|
|
1712
|
+
* In both styles the active mark is ONE element that travels: TabsList renders
|
|
1713
|
+
* Base UI's Tabs.Indicator for you, and it glides (`motion-glide`) to the new
|
|
1714
|
+
* tab and stretches to its width. See TabsList for the hand-off that keeps the
|
|
1715
|
+
* first paint right before it mounts.
|
|
1497
1716
|
*/
|
|
1498
|
-
|
|
1717
|
+
type RootProps$6 = ComponentProps<typeof Tabs$1.Root> & {
|
|
1718
|
+
/**
|
|
1719
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
1720
|
+
* policy, `subtle` keeps feedback and drops the glide, `off` stills it. It
|
|
1721
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
1722
|
+
* setting.
|
|
1723
|
+
* @default "full"
|
|
1724
|
+
*/
|
|
1725
|
+
motion?: MotionLevel;
|
|
1726
|
+
};
|
|
1727
|
+
declare function Tabs({ motion, ...props }: RootProps$6): react.JSX.Element;
|
|
1728
|
+
declare namespace Tabs {
|
|
1729
|
+
var displayName: string;
|
|
1730
|
+
}
|
|
1499
1731
|
type TabsVariant = "underline" | "pill";
|
|
1500
1732
|
type ListProps$1 = Omit<ComponentProps<typeof Tabs$1.List>, "className"> & {
|
|
1501
1733
|
className?: string;
|
|
1502
1734
|
/** `underline` (default) or `pill`. Triggers inside inherit it. */
|
|
1503
1735
|
variant?: TabsVariant;
|
|
1504
1736
|
};
|
|
1505
|
-
/**
|
|
1506
|
-
|
|
1737
|
+
/**
|
|
1738
|
+
* The tablist — a row of triggers, on a divider rule or as pills. It renders
|
|
1739
|
+
* the gliding indicator itself, so composing TabsList + TabsTrigger is all a
|
|
1740
|
+
* consumer writes.
|
|
1741
|
+
*/
|
|
1742
|
+
declare function TabsList({ className, variant, children, ...props }: ListProps$1): react.JSX.Element;
|
|
1507
1743
|
type TriggerProps$4 = Omit<ComponentProps<typeof Tabs$1.Tab>, "className"> & {
|
|
1508
1744
|
className?: string;
|
|
1509
1745
|
};
|
|
1510
1746
|
/**
|
|
1511
1747
|
* A single tab button (Base UI's Tabs.Tab). Underline: the active tab draws its
|
|
1512
1748
|
* rule via `data-active`, and `-mb-px` overlaps the list's divider. Pill: the
|
|
1513
|
-
* active tab takes a muted fill on the control ladder
|
|
1749
|
+
* active tab takes a muted fill on the control ladder. In both, that per-tab
|
|
1750
|
+
* mark is only the fallback until TabsList's gliding indicator is shown; the
|
|
1751
|
+
* tab is `relative` so it paints over the indicator. The pill label is trimmed
|
|
1514
1752
|
* to the cap height so it centres optically in the short pill. A pill tab is a
|
|
1515
1753
|
* button-shaped control, so it takes the theme's button shape (`--button-radius`,
|
|
1516
1754
|
* as Button does): a pill in Sable, rounded in Poppy, square in Meridian.
|
|
@@ -1521,7 +1759,22 @@ declare function TabsTrigger({ className, children, ...props }: TriggerProps$4):
|
|
|
1521
1759
|
type PanelProps$3 = Omit<ComponentProps<typeof Tabs$1.Panel>, "className"> & {
|
|
1522
1760
|
className?: string;
|
|
1523
1761
|
};
|
|
1524
|
-
/**
|
|
1762
|
+
/**
|
|
1763
|
+
* The panel shown when its matching trigger is active.
|
|
1764
|
+
*
|
|
1765
|
+
* A changed panel fades in (`animate-fade-in`, essential: it confirms the
|
|
1766
|
+
* click landed even when two panels look alike). Opacity only — a slide would
|
|
1767
|
+
* move the content the reader is about to read. Two guards keep it from
|
|
1768
|
+
* costing layout:
|
|
1769
|
+
*
|
|
1770
|
+
* - Not on first render. Base UI reports `data-activation-direction="none"`
|
|
1771
|
+
* until the selection has changed, so a page full of tabs does not fade in
|
|
1772
|
+
* on load.
|
|
1773
|
+
* - The outgoing panel leaves at once. Base UI keeps it mounted until its
|
|
1774
|
+
* animations finish (`data-ending-style`); left displayed, a switch made
|
|
1775
|
+
* mid-fade stacked both panels for a moment and the page jumped by a panel's
|
|
1776
|
+
* height. `hidden` while ending takes it out of layout immediately.
|
|
1777
|
+
*/
|
|
1525
1778
|
declare function TabsPanel({ className, ...props }: PanelProps$3): react.JSX.Element;
|
|
1526
1779
|
|
|
1527
1780
|
declare const tabsMeta: ComponentMeta;
|
|
@@ -1590,6 +1843,38 @@ type SimpleTooltipProps = Omit<ComponentProps<typeof Tooltip$1.Root>, "children"
|
|
|
1590
1843
|
* <TooltipProvider>; for arrows or richer content, use the composable parts.
|
|
1591
1844
|
*/
|
|
1592
1845
|
declare function SimpleTooltip({ content, children, side, align, sideOffset, ...root }: SimpleTooltipProps): react.JSX.Element;
|
|
1846
|
+
interface TooltipGroupProps {
|
|
1847
|
+
/** The triggers — `SimpleTooltip`s — that share the one tooltip. */
|
|
1848
|
+
children: ReactNode;
|
|
1849
|
+
/**
|
|
1850
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
1851
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
1852
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
1853
|
+
* setting. Under `subtle` the tooltip jumps between triggers and only
|
|
1854
|
+
* cross-fades its label.
|
|
1855
|
+
*/
|
|
1856
|
+
motion?: MotionLevel;
|
|
1857
|
+
}
|
|
1858
|
+
/**
|
|
1859
|
+
* TooltipGroup — one tooltip shared by every `SimpleTooltip` inside it, which
|
|
1860
|
+
* glides from trigger to trigger as the pointer moves along a toolbar instead
|
|
1861
|
+
* of closing and reopening:
|
|
1862
|
+
*
|
|
1863
|
+
* <TooltipGroup>
|
|
1864
|
+
* <SimpleTooltip content="Bold"><Button … /></SimpleTooltip>
|
|
1865
|
+
* <SimpleTooltip content="Italic"><Button … /></SimpleTooltip>
|
|
1866
|
+
* </TooltipGroup>
|
|
1867
|
+
*
|
|
1868
|
+
* Renders no element of its own, so it drops into any layout. Each
|
|
1869
|
+
* SimpleTooltip keeps its own `content`, `side`, `align` and `sideOffset`;
|
|
1870
|
+
* `disabled` still turns one trigger off. Root-level props a SimpleTooltip
|
|
1871
|
+
* would otherwise take (`open`, `onOpenChange`) belong to the shared tooltip
|
|
1872
|
+
* and are ignored inside a group. The composable Tooltip parts are unaffected.
|
|
1873
|
+
*/
|
|
1874
|
+
declare function TooltipGroup({ children, motion }: TooltipGroupProps): react.JSX.Element;
|
|
1875
|
+
declare namespace TooltipGroup {
|
|
1876
|
+
var displayName: string;
|
|
1877
|
+
}
|
|
1593
1878
|
|
|
1594
1879
|
declare const tooltipMeta: ComponentMeta;
|
|
1595
1880
|
|
|
@@ -1870,6 +2155,64 @@ declare namespace ThinkingOrb {
|
|
|
1870
2155
|
|
|
1871
2156
|
declare const thinkingOrbMeta: ComponentMeta;
|
|
1872
2157
|
|
|
2158
|
+
type ToolCallStatus = "running" | "awaiting" | "complete" | "error" | "denied";
|
|
2159
|
+
declare const TOOL_CALL_STATUS_LABELS: Record<ToolCallStatus, string>;
|
|
2160
|
+
interface ToolCallProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
|
|
2161
|
+
/** The tool's own name, as the model called it (`search_docs`). Shown in mono. */
|
|
2162
|
+
name: string;
|
|
2163
|
+
/**
|
|
2164
|
+
* What the call does, in words a person reads ("Searched the docs"). Leads the
|
|
2165
|
+
* row, with `name` after it. Omit it and the row leads with `name`.
|
|
2166
|
+
*/
|
|
2167
|
+
title?: ReactNode;
|
|
2168
|
+
/**
|
|
2169
|
+
* Where the call is. `awaiting` is a call held for the person's approval;
|
|
2170
|
+
* `denied` is one they declined.
|
|
2171
|
+
* @default "running"
|
|
2172
|
+
*/
|
|
2173
|
+
status?: ToolCallStatus;
|
|
2174
|
+
/** Overrides the status word ("Running", "Done", …), for another language or a more specific phrase. */
|
|
2175
|
+
statusLabel?: string;
|
|
2176
|
+
/** The arguments. A string shows as is; anything else as formatted JSON. */
|
|
2177
|
+
input?: unknown;
|
|
2178
|
+
/** The result, shown the same way as `input`. `children` replaces it with a rendered result. */
|
|
2179
|
+
output?: unknown;
|
|
2180
|
+
/** What went wrong, for `status="error"`. Always visible, under the row, not behind the disclosure. */
|
|
2181
|
+
error?: ReactNode;
|
|
2182
|
+
/** A rendered result in place of `output`'s code view: a list of hits, a chart, a diff. */
|
|
2183
|
+
children?: ReactNode;
|
|
2184
|
+
/** Open the details on mount. @default false */
|
|
2185
|
+
defaultOpen?: boolean;
|
|
2186
|
+
/** Controlled open state of the details. */
|
|
2187
|
+
open?: boolean;
|
|
2188
|
+
onOpenChange?: (open: boolean) => void;
|
|
2189
|
+
}
|
|
2190
|
+
/**
|
|
2191
|
+
* ToolCall — one tool an agent called, inside its turn: what it did, where it
|
|
2192
|
+
* is, and the arguments and result one click away.
|
|
2193
|
+
*
|
|
2194
|
+
* <ToolCall
|
|
2195
|
+
* name="search_docs"
|
|
2196
|
+
* title="Searched the docs"
|
|
2197
|
+
* status="complete"
|
|
2198
|
+
* input={{ query: "date range" }}
|
|
2199
|
+
* output={{ hits: 3 }}
|
|
2200
|
+
* />
|
|
2201
|
+
*
|
|
2202
|
+
* The row is the summary, so a thread of ten calls stays scannable; the details
|
|
2203
|
+
* are a disclosure because almost nobody reads them and the person checking
|
|
2204
|
+
* one call needs all of it. The status glyph is the one thing that moves: the
|
|
2205
|
+
* spinner swaps for the outcome when the call settles, which is the moment
|
|
2206
|
+
* worth seeing. A status change is announced once, politely, after mount — a
|
|
2207
|
+
* thread loaded from history announces nothing.
|
|
2208
|
+
*/
|
|
2209
|
+
declare function ToolCall({ name, title, status, statusLabel, input, output, error, children, defaultOpen, open, onOpenChange, className, ...props }: ToolCallProps): react.JSX.Element;
|
|
2210
|
+
declare namespace ToolCall {
|
|
2211
|
+
var displayName: string;
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2214
|
+
declare const toolCallMeta: ComponentMeta;
|
|
2215
|
+
|
|
1873
2216
|
interface StreamingTextProps extends Omit<ComponentPropsWithoutRef<"p">, "children"> {
|
|
1874
2217
|
/**
|
|
1875
2218
|
* The text received SO FAR. Grow it as tokens arrive; this component assumes
|
|
@@ -2195,6 +2538,51 @@ declare const meterTrackVariants: (props?: ({
|
|
|
2195
2538
|
|
|
2196
2539
|
declare const meterMeta: ComponentMeta;
|
|
2197
2540
|
|
|
2541
|
+
interface NumberTickerProps extends Omit<ComponentPropsWithRef<"span">, "children" | "prefix"> {
|
|
2542
|
+
/** The number to show. When it changes, the digits roll to it. */
|
|
2543
|
+
value: number;
|
|
2544
|
+
/** How to write the number — currency, percent, fraction digits, compact. Passed to `Intl.NumberFormat`. */
|
|
2545
|
+
format?: Intl.NumberFormatOptions;
|
|
2546
|
+
/** BCP 47 locale(s) for the formatting. @default the runtime locale */
|
|
2547
|
+
locales?: string | string[];
|
|
2548
|
+
/** Before the number. A string is part of the number's text (and rolls in or out with it); an element is rendered as given. */
|
|
2549
|
+
prefix?: ReactNode;
|
|
2550
|
+
/** After the number ("+", " pts"). A string is part of the number's text; an element is rendered as given. */
|
|
2551
|
+
suffix?: ReactNode;
|
|
2552
|
+
/**
|
|
2553
|
+
* Which way the digits roll. `auto` rolls up when the value grows and down
|
|
2554
|
+
* when it shrinks, like an odometer; `up` / `down` fix the direction (a
|
|
2555
|
+
* countdown, a score that only climbs). @default "auto"
|
|
2556
|
+
*/
|
|
2557
|
+
trend?: "auto" | "up" | "down";
|
|
2558
|
+
/**
|
|
2559
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
2560
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
2561
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
2562
|
+
* setting.
|
|
2563
|
+
*/
|
|
2564
|
+
motion?: MotionLevel;
|
|
2565
|
+
}
|
|
2566
|
+
/**
|
|
2567
|
+
* A number that rolls to its new value digit by digit, like an odometer —
|
|
2568
|
+
* for a figure that changes in place while someone watches it: a dashboard
|
|
2569
|
+
* total, a live count, a price as options change. Each digit is a column that
|
|
2570
|
+
* turns to its new place; separators, signs and units hold still; a digit that
|
|
2571
|
+
* appears or goes away eases its width, so the text around it never jumps.
|
|
2572
|
+
*
|
|
2573
|
+
* The first render is at rest — a number on first paint is content, not news.
|
|
2574
|
+
* Under `subtle` (or reduced motion) the value simply updates. The visible
|
|
2575
|
+
* columns are aria-hidden; the whole written number is real text for assistive
|
|
2576
|
+
* tech and for copying. It is not a live region — pass `aria-live` when a
|
|
2577
|
+
* change should be announced.
|
|
2578
|
+
*/
|
|
2579
|
+
declare function NumberTicker({ value, format, locales, prefix, suffix, trend, motion, className, ...props }: NumberTickerProps): react.JSX.Element;
|
|
2580
|
+
declare namespace NumberTicker {
|
|
2581
|
+
var displayName: string;
|
|
2582
|
+
}
|
|
2583
|
+
|
|
2584
|
+
declare const numberTickerMeta: ComponentMeta;
|
|
2585
|
+
|
|
2198
2586
|
/**
|
|
2199
2587
|
* One segment's fill. The decorative tones lead, because a breakdown names
|
|
2200
2588
|
* categories (kinds of sale, file types, teams), not good and bad; the status
|
|
@@ -2357,7 +2745,19 @@ interface CartesianBaseProps {
|
|
|
2357
2745
|
xAxis?: boolean;
|
|
2358
2746
|
/** The vertical axis. @default false for values (columns), true for categories (horizontal bars) */
|
|
2359
2747
|
yAxis?: boolean;
|
|
2360
|
-
/**
|
|
2748
|
+
/**
|
|
2749
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
2750
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
2751
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
2752
|
+
* setting. The arrival and the data-change morph are the flourish; the hover
|
|
2753
|
+
* dim and the gliding cursor are the feedback `subtle` keeps.
|
|
2754
|
+
*/
|
|
2755
|
+
motion?: MotionLevel;
|
|
2756
|
+
/**
|
|
2757
|
+
* Play the arrival when the chart scrolls into view. `animate={false}` is
|
|
2758
|
+
* `motion="subtle"`.
|
|
2759
|
+
* @deprecated Use `motion="subtle"` (what `animate={false}` now maps to: no arrival, hover kept) or `motion="off"`.
|
|
2760
|
+
*/
|
|
2361
2761
|
animate?: boolean;
|
|
2362
2762
|
/** The highlighted row (controlled). `null` for none. */
|
|
2363
2763
|
activeIndex?: number | null;
|
|
@@ -2466,7 +2866,19 @@ interface PieChartProps {
|
|
|
2466
2866
|
tooltip?: boolean | ChartTooltipOptions;
|
|
2467
2867
|
valueFormatter?: ChartValueFormatter;
|
|
2468
2868
|
locale?: string;
|
|
2469
|
-
/**
|
|
2869
|
+
/**
|
|
2870
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
2871
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
2872
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
2873
|
+
* setting. The sweep, the slice morph and the rolling centre number are the
|
|
2874
|
+
* flourish; the hover pull-out and dim are the feedback `subtle` keeps.
|
|
2875
|
+
*/
|
|
2876
|
+
motion?: MotionLevel;
|
|
2877
|
+
/**
|
|
2878
|
+
* Sweep the slices in clockwise when the chart scrolls into view.
|
|
2879
|
+
* `animate={false}` is `motion="subtle"`.
|
|
2880
|
+
* @deprecated Use `motion="subtle"` (what `animate={false}` now maps to: no arrival, hover kept) or `motion="off"`.
|
|
2881
|
+
*/
|
|
2470
2882
|
animate?: boolean;
|
|
2471
2883
|
/** The pulled-out slice (controlled). */
|
|
2472
2884
|
activeIndex?: number | null;
|
|
@@ -2481,7 +2893,7 @@ interface PieChartProps {
|
|
|
2481
2893
|
* clockwise from 12 o'clock as the chart scrolls into view, and the active
|
|
2482
2894
|
* slice pulls outward.
|
|
2483
2895
|
*/
|
|
2484
|
-
declare function PieChart({ data, index, valueKey, label, categories, className, donut, centerLabel, separator, labels, labelContent, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: PieChartProps): react.JSX.Element;
|
|
2896
|
+
declare function PieChart({ data, index, valueKey, label, categories, className, donut, centerLabel, separator, labels, labelContent, legend, tooltip, valueFormatter, locale, motion, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: PieChartProps): react.JSX.Element;
|
|
2485
2897
|
declare namespace PieChart {
|
|
2486
2898
|
var displayName: string;
|
|
2487
2899
|
}
|
|
@@ -2514,7 +2926,19 @@ interface RadarChartProps {
|
|
|
2514
2926
|
tooltip?: boolean | ChartTooltipOptions;
|
|
2515
2927
|
valueFormatter?: ChartValueFormatter;
|
|
2516
2928
|
locale?: string;
|
|
2517
|
-
/**
|
|
2929
|
+
/**
|
|
2930
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
2931
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
2932
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
2933
|
+
* setting. The polygons growing in and morphing are the flourish; the
|
|
2934
|
+
* hover dot is the feedback `subtle` keeps.
|
|
2935
|
+
*/
|
|
2936
|
+
motion?: MotionLevel;
|
|
2937
|
+
/**
|
|
2938
|
+
* Grow the polygons from the centre when the chart scrolls into view.
|
|
2939
|
+
* `animate={false}` is `motion="subtle"`.
|
|
2940
|
+
* @deprecated Use `motion="subtle"` (what `animate={false}` now maps to: no arrival, hover kept) or `motion="off"`.
|
|
2941
|
+
*/
|
|
2518
2942
|
animate?: boolean;
|
|
2519
2943
|
activeIndex?: number | null;
|
|
2520
2944
|
defaultActiveIndex?: number | null;
|
|
@@ -2526,7 +2950,7 @@ interface RadarChartProps {
|
|
|
2526
2950
|
* spokes and one to three series. Polygons grow out from the centre as the
|
|
2527
2951
|
* chart scrolls into view.
|
|
2528
2952
|
*/
|
|
2529
|
-
declare function RadarChart({ data, index, series: rawSeries, label, className, grid, gridFill, filled, dots, radiusAxis, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadarChartProps): react.JSX.Element;
|
|
2953
|
+
declare function RadarChart({ data, index, series: rawSeries, label, className, grid, gridFill, filled, dots, radiusAxis, legend, tooltip, valueFormatter, locale, motion, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadarChartProps): react.JSX.Element;
|
|
2530
2954
|
declare namespace RadarChart {
|
|
2531
2955
|
var displayName: string;
|
|
2532
2956
|
}
|
|
@@ -2563,7 +2987,19 @@ interface RadialChartProps {
|
|
|
2563
2987
|
tooltip?: boolean | ChartTooltipOptions;
|
|
2564
2988
|
valueFormatter?: ChartValueFormatter;
|
|
2565
2989
|
locale?: string;
|
|
2566
|
-
/**
|
|
2990
|
+
/**
|
|
2991
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
2992
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
2993
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
2994
|
+
* setting. The draw-on, the ring morph and the rolling centre number are the
|
|
2995
|
+
* flourish; the hover dim is the feedback `subtle` keeps.
|
|
2996
|
+
*/
|
|
2997
|
+
motion?: MotionLevel;
|
|
2998
|
+
/**
|
|
2999
|
+
* Draw the rings round from their start when the chart scrolls into view.
|
|
3000
|
+
* `animate={false}` is `motion="subtle"`.
|
|
3001
|
+
* @deprecated Use `motion="subtle"` (what `animate={false}` now maps to: no arrival, hover kept) or `motion="off"`.
|
|
3002
|
+
*/
|
|
2567
3003
|
animate?: boolean;
|
|
2568
3004
|
activeIndex?: number | null;
|
|
2569
3005
|
defaultActiveIndex?: number | null;
|
|
@@ -2575,7 +3011,7 @@ interface RadialChartProps {
|
|
|
2575
3011
|
* gauge and `stacked` splits one ring between rows. Rings draw round from 12
|
|
2576
3012
|
* o'clock (or the gauge's left) as the chart scrolls into view.
|
|
2577
3013
|
*/
|
|
2578
|
-
declare function RadialChart({ data, index, valueKey, label, categories, className, max, sweep, stacked, track, labels, centerLabel, legend, tooltip, valueFormatter, locale, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadialChartProps): react.JSX.Element;
|
|
3014
|
+
declare function RadialChart({ data, index, valueKey, label, categories, className, max, sweep, stacked, track, labels, centerLabel, legend, tooltip, valueFormatter, locale, motion, animate, activeIndex, defaultActiveIndex, onActiveIndexChange, }: RadialChartProps): react.JSX.Element;
|
|
2579
3015
|
declare namespace RadialChart {
|
|
2580
3016
|
var displayName: string;
|
|
2581
3017
|
}
|
|
@@ -2591,7 +3027,19 @@ interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" |
|
|
|
2591
3027
|
variant?: "line" | "area" | "bar";
|
|
2592
3028
|
/** Colour by role. @default "primary" */
|
|
2593
3029
|
tone?: ChartTone;
|
|
2594
|
-
/**
|
|
3030
|
+
/**
|
|
3031
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
3032
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
3033
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
3034
|
+
* setting. Drawing on (or rising) as it scrolls into view is the
|
|
3035
|
+
* flourish, so `subtle` shows the finished line.
|
|
3036
|
+
*/
|
|
3037
|
+
motion?: MotionLevel;
|
|
3038
|
+
/**
|
|
3039
|
+
* Draw on (or rise) when it scrolls into view. `animate={false}` is
|
|
3040
|
+
* `motion="subtle"`.
|
|
3041
|
+
* @deprecated Use `motion="subtle"` (what `animate={false}` now maps to) or `motion="off"`.
|
|
3042
|
+
*/
|
|
2595
3043
|
animate?: boolean;
|
|
2596
3044
|
/** BCP 47 locale for the spoken numbers. */
|
|
2597
3045
|
locale?: string;
|
|
@@ -2602,7 +3050,7 @@ interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" |
|
|
|
2602
3050
|
* stretched to fit, so it follows its container. For values a reader needs
|
|
2603
3051
|
* to look up, use AreaChart or LineChart.
|
|
2604
3052
|
*/
|
|
2605
|
-
declare function Sparkline({ data, label, variant, tone, animate, locale, className, ...props }: SparklineProps): react.JSX.Element;
|
|
3053
|
+
declare function Sparkline({ data, label, variant, tone, motion, animate, locale, className, ...props }: SparklineProps): react.JSX.Element;
|
|
2606
3054
|
declare namespace Sparkline {
|
|
2607
3055
|
var displayName: string;
|
|
2608
3056
|
}
|
|
@@ -2753,8 +3201,16 @@ type ToggleGroupProps = Omit<ComponentProps<typeof ToggleGroup$1>, "className">
|
|
|
2753
3201
|
* @default "default"
|
|
2754
3202
|
*/
|
|
2755
3203
|
appearance?: ToggleGroupAppearance;
|
|
3204
|
+
/**
|
|
3205
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
3206
|
+
* policy, `subtle` keeps feedback and drops the glide, `off` stills it. It
|
|
3207
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
3208
|
+
* setting.
|
|
3209
|
+
* @default "full"
|
|
3210
|
+
*/
|
|
3211
|
+
motion?: MotionLevel;
|
|
2756
3212
|
};
|
|
2757
|
-
declare function ToggleGroup({ className, appearance, ...props }: ToggleGroupProps): react.JSX.Element;
|
|
3213
|
+
declare function ToggleGroup({ className, appearance, motion, children, ...props }: ToggleGroupProps): react.JSX.Element;
|
|
2758
3214
|
declare namespace ToggleGroup {
|
|
2759
3215
|
var displayName: string;
|
|
2760
3216
|
}
|
|
@@ -3509,6 +3965,13 @@ interface NotificationBadgeProps extends ComponentPropsWithRef<"span">, Omit<Var
|
|
|
3509
3965
|
* corner. @default false
|
|
3510
3966
|
*/
|
|
3511
3967
|
overlay?: boolean;
|
|
3968
|
+
/**
|
|
3969
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
3970
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It
|
|
3971
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
3972
|
+
* setting.
|
|
3973
|
+
*/
|
|
3974
|
+
motion?: MotionLevel;
|
|
3512
3975
|
}
|
|
3513
3976
|
/**
|
|
3514
3977
|
* An unread indicator. Two modes: a bare `dot`, or a `count` pill that shows
|
|
@@ -3516,11 +3979,15 @@ interface NotificationBadgeProps extends ComponentPropsWithRef<"span">, Omit<Var
|
|
|
3516
3979
|
* picks the fill (destructive default; primary/neutral for non-alarming counts),
|
|
3517
3980
|
* `size` scales it, and `overlay` pins it to the corner of a `relative` host.
|
|
3518
3981
|
*
|
|
3982
|
+
* A count that changes rolls to its new number (NumberTicker), and a badge that
|
|
3983
|
+
* shows up after being empty pops in (motion-appear) — but never on first
|
|
3984
|
+
* paint, so a page that loads with three unread does not perform them.
|
|
3985
|
+
*
|
|
3519
3986
|
* Decorative: it is `aria-hidden`, so the count reaches assistive tech through
|
|
3520
3987
|
* the host's own name ("Notifications, 3 unread"). Pass `aria-hidden={false}`
|
|
3521
3988
|
* only when the badge stands alone and its number is the information.
|
|
3522
3989
|
*/
|
|
3523
|
-
declare function NotificationBadge({ dot, count, max, tone, size, overlay, className, ...props }: NotificationBadgeProps): react.JSX.Element | null;
|
|
3990
|
+
declare function NotificationBadge({ dot, count, max, tone, size, overlay, motion, className, ...props }: NotificationBadgeProps): react.JSX.Element | null;
|
|
3524
3991
|
declare namespace NotificationBadge {
|
|
3525
3992
|
var displayName: string;
|
|
3526
3993
|
}
|
|
@@ -3559,6 +4026,14 @@ type CalendarProps = DayPickerProps & {
|
|
|
3559
4026
|
* @default false
|
|
3560
4027
|
*/
|
|
3561
4028
|
bare?: boolean;
|
|
4029
|
+
/**
|
|
4030
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
4031
|
+
* policy, `subtle` keeps feedback and drops the month slide, `off` stills
|
|
4032
|
+
* it. It can only turn motion down — it never overrides a reader's
|
|
4033
|
+
* reduce-motion setting.
|
|
4034
|
+
* @default "full"
|
|
4035
|
+
*/
|
|
4036
|
+
motion?: MotionLevel;
|
|
3562
4037
|
};
|
|
3563
4038
|
/**
|
|
3564
4039
|
* Calendar — an owned wrapper over react-day-picker v9, themed entirely with
|
|
@@ -3571,7 +4046,7 @@ type CalendarProps = DayPickerProps & {
|
|
|
3571
4046
|
* const [date, setDate] = useState<Date>()
|
|
3572
4047
|
* <Calendar mode="single" selected={date} onSelect={setDate} />
|
|
3573
4048
|
*/
|
|
3574
|
-
declare function Calendar({ className, classNames, showOutsideDays, components, bare, ...props }: CalendarProps): react.JSX.Element;
|
|
4049
|
+
declare function Calendar({ className, classNames, showOutsideDays, components, bare, motion, animate, ...props }: CalendarProps): react.JSX.Element;
|
|
3575
4050
|
declare namespace Calendar {
|
|
3576
4051
|
var displayName: string;
|
|
3577
4052
|
}
|
|
@@ -3913,7 +4388,7 @@ type TriggerProps$1 = Omit<ComponentProps<typeof Accordion$1.Trigger>, "classNam
|
|
|
3913
4388
|
* e.g. a plus-becomes-an-× FAQ toggle:
|
|
3914
4389
|
*
|
|
3915
4390
|
* indicator={
|
|
3916
|
-
* <Icon name="plus" className="text-xs text-muted-foreground
|
|
4391
|
+
* <Icon name="plus" className="text-xs text-muted-foreground motion-interactive [[data-panel-open]_&]:rotate-45" />
|
|
3917
4392
|
* }
|
|
3918
4393
|
*
|
|
3919
4394
|
* When omitted, the default chevron (rotating 180° on open) is used.
|
|
@@ -5101,7 +5576,7 @@ type GroupProps$1 = Omit<ComponentProps<typeof Collapsible>, "children" | "class
|
|
|
5101
5576
|
* <PropertyRow label="Tint">…</PropertyRow>
|
|
5102
5577
|
* </PropertyGroup>
|
|
5103
5578
|
*/
|
|
5104
|
-
declare function PropertyGroup({ label, summary, className, children, ...props }: GroupProps$1): react.JSX.Element;
|
|
5579
|
+
declare function PropertyGroup({ label, summary, className, children, open: openProp, defaultOpen, onOpenChange, ...props }: GroupProps$1): react.JSX.Element;
|
|
5105
5580
|
declare namespace PropertyGroup {
|
|
5106
5581
|
var displayName: string;
|
|
5107
5582
|
}
|
|
@@ -5221,7 +5696,16 @@ declare function treeIndent(depth: number): string;
|
|
|
5221
5696
|
* `className="min-h-0 flex-1 overflow-y-auto scrollbar-quiet"` when the tree is
|
|
5222
5697
|
* the scrolling region itself.
|
|
5223
5698
|
*/
|
|
5224
|
-
|
|
5699
|
+
type TreeProps = ComponentProps<"div"> & {
|
|
5700
|
+
/**
|
|
5701
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
5702
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
5703
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
5704
|
+
* setting. Under `subtle` expanded rows appear at once instead of unfolding.
|
|
5705
|
+
*/
|
|
5706
|
+
motion?: MotionLevel;
|
|
5707
|
+
};
|
|
5708
|
+
declare function Tree({ className, children, onKeyDown, motion, ...props }: TreeProps): react.JSX.Element;
|
|
5225
5709
|
declare namespace Tree {
|
|
5226
5710
|
var displayName: string;
|
|
5227
5711
|
}
|
|
@@ -5547,10 +6031,23 @@ declare const appShellMeta: ComponentMeta;
|
|
|
5547
6031
|
type SidebarContextValue = {
|
|
5548
6032
|
collapsed: boolean;
|
|
5549
6033
|
icons: boolean;
|
|
6034
|
+
/**
|
|
6035
|
+
* The rail has been collapsed at some point in this mount, so labels that
|
|
6036
|
+
* mount now are coming back on a reopen and may fade in. False on first
|
|
6037
|
+
* paint, so an expanded rail's labels are simply there on load.
|
|
6038
|
+
*/
|
|
6039
|
+
reopened?: boolean;
|
|
5550
6040
|
};
|
|
5551
|
-
/** Read the rail's collapsed state — e.g. to swap a full wordmark for a mark. */
|
|
5552
6041
|
declare function useSidebar(): SidebarContextValue;
|
|
5553
6042
|
interface SidebarProps extends ComponentPropsWithRef<"aside"> {
|
|
6043
|
+
/**
|
|
6044
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
6045
|
+
* policy, `subtle` keeps feedback and drops the collapse ease and the
|
|
6046
|
+
* current-page glide, `off` stills it. It can only turn motion down — it
|
|
6047
|
+
* never overrides a reader's reduce-motion setting.
|
|
6048
|
+
* @default "full"
|
|
6049
|
+
*/
|
|
6050
|
+
motion?: MotionLevel;
|
|
5554
6051
|
/**
|
|
5555
6052
|
* Collapse the rail to an icon-only width. Controlled — drive it from app
|
|
5556
6053
|
* state and wire a toggle (e.g. a Button in the header or footer). Collapsed,
|
|
@@ -5587,7 +6084,7 @@ interface SidebarProps extends ComponentPropsWithRef<"aside"> {
|
|
|
5587
6084
|
*/
|
|
5588
6085
|
surface?: "rail" | "page";
|
|
5589
6086
|
}
|
|
5590
|
-
declare function Sidebar({ collapsed, icons, variant, surface, className, children, ...props }: SidebarProps): react.JSX.Element;
|
|
6087
|
+
declare function Sidebar({ collapsed, icons, variant, surface, motion, className, children, ...props }: SidebarProps): react.JSX.Element;
|
|
5591
6088
|
declare namespace Sidebar {
|
|
5592
6089
|
var displayName: string;
|
|
5593
6090
|
}
|
|
@@ -5623,8 +6120,16 @@ declare function SidebarBrand({ mark, label, render, className, "aria-label": ar
|
|
|
5623
6120
|
declare namespace SidebarBrand {
|
|
5624
6121
|
var displayName: string;
|
|
5625
6122
|
}
|
|
5626
|
-
/**
|
|
5627
|
-
|
|
6123
|
+
/**
|
|
6124
|
+
* The scrollable nav region — grows to fill the rail between header and footer.
|
|
6125
|
+
*
|
|
6126
|
+
* The current-page fill is ONE element that glides to the active item (the
|
|
6127
|
+
* same engine and hand-off as SideNav), so a page change inside a persistent
|
|
6128
|
+
* layout reads as the marker moving rather than one row dimming and another
|
|
6129
|
+
* lighting. Each item keeps its own `data-[active]` fill as the server-render
|
|
6130
|
+
* fallback until the glide mounts.
|
|
6131
|
+
*/
|
|
6132
|
+
declare function SidebarNav({ className, children, ...props }: ComponentPropsWithRef<"nav">): react.JSX.Element;
|
|
5628
6133
|
declare namespace SidebarNav {
|
|
5629
6134
|
var displayName: string;
|
|
5630
6135
|
}
|
|
@@ -5674,6 +6179,14 @@ interface SideNavProps extends ComponentPropsWithRef<"nav"> {
|
|
|
5674
6179
|
* local rails; `sidebar` matches the app Sidebar for sub-navs inside chrome.
|
|
5675
6180
|
*/
|
|
5676
6181
|
activeVariant?: SideNavActiveVariant;
|
|
6182
|
+
/**
|
|
6183
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
6184
|
+
* policy, `subtle` keeps feedback and drops the glide, `off` stills it. It
|
|
6185
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
6186
|
+
* setting.
|
|
6187
|
+
* @default "full"
|
|
6188
|
+
*/
|
|
6189
|
+
motion?: MotionLevel;
|
|
5677
6190
|
}
|
|
5678
6191
|
/**
|
|
5679
6192
|
* SideNav — a lightweight, in-content vertical navigation list: the settings /
|
|
@@ -5689,7 +6202,7 @@ interface SideNavProps extends ComponentPropsWithRef<"nav"> {
|
|
|
5689
6202
|
* <SideNavItem label="Account" render={<Link to="/settings/account" />} />
|
|
5690
6203
|
* </SideNav>
|
|
5691
6204
|
*/
|
|
5692
|
-
declare function SideNav({ className, size, activeVariant, ...props }: SideNavProps): react.JSX.Element;
|
|
6205
|
+
declare function SideNav({ className, size, activeVariant, motion, children, ...props }: SideNavProps): react.JSX.Element;
|
|
5693
6206
|
declare namespace SideNav {
|
|
5694
6207
|
var displayName: string;
|
|
5695
6208
|
}
|
|
@@ -6363,6 +6876,13 @@ type CheckboxCardProps = Omit<ComponentProps<typeof Checkbox$1.Root>, "className
|
|
|
6363
6876
|
* and icon. Defaults to "neutral" (the primary/accent treatment).
|
|
6364
6877
|
*/
|
|
6365
6878
|
tone?: CheckboxCardTone;
|
|
6879
|
+
/**
|
|
6880
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
6881
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
6882
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
6883
|
+
* setting. Under `subtle` the tick fades in instead of drawing itself.
|
|
6884
|
+
*/
|
|
6885
|
+
motion?: MotionLevel;
|
|
6366
6886
|
};
|
|
6367
6887
|
/**
|
|
6368
6888
|
* CheckboxCard — a multi-select selection card: a card-sized Base UI Checkbox
|
|
@@ -6375,7 +6895,7 @@ type CheckboxCardProps = Omit<ComponentProps<typeof Checkbox$1.Root>, "className
|
|
|
6375
6895
|
* {REASONS.map((r) => <CheckboxCard key={r} value={r} title={r} />)}
|
|
6376
6896
|
* </CheckboxGroup>
|
|
6377
6897
|
*/
|
|
6378
|
-
declare function CheckboxCard({ className, title, description, icon, tone, ...props }: CheckboxCardProps): react.JSX.Element;
|
|
6898
|
+
declare function CheckboxCard({ className, title, description, icon, tone, motion, ...props }: CheckboxCardProps): react.JSX.Element;
|
|
6379
6899
|
declare namespace CheckboxCard {
|
|
6380
6900
|
var displayName: string;
|
|
6381
6901
|
}
|
|
@@ -6808,6 +7328,14 @@ interface ThemeSwitcherProps extends Omit<ComponentPropsWithRef<"div">, "onChang
|
|
|
6808
7328
|
onValueChange: (value: ThemeMode) => void;
|
|
6809
7329
|
/** Accessible label for the group. @default "Theme" */
|
|
6810
7330
|
label?: string;
|
|
7331
|
+
/**
|
|
7332
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
7333
|
+
* policy, `subtle` keeps feedback and drops the glide, `off` stills it. It
|
|
7334
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
7335
|
+
* setting.
|
|
7336
|
+
* @default "full"
|
|
7337
|
+
*/
|
|
7338
|
+
motion?: MotionLevel;
|
|
6811
7339
|
}
|
|
6812
7340
|
/**
|
|
6813
7341
|
* ThemeSwitcher — a segmented light / dark / system switch. Presentational:
|
|
@@ -6824,7 +7352,7 @@ interface ThemeSwitcherProps extends Omit<ComponentPropsWithRef<"div">, "onChang
|
|
|
6824
7352
|
*
|
|
6825
7353
|
* Requires a `desktop` icon in the active IconSet (alongside `sun` + `moon`).
|
|
6826
7354
|
*/
|
|
6827
|
-
declare function ThemeSwitcher({ value, onValueChange, label, className, ref, ...props }: ThemeSwitcherProps): react.JSX.Element;
|
|
7355
|
+
declare function ThemeSwitcher({ value, onValueChange, label, motion, className, ref, ...props }: ThemeSwitcherProps): react.JSX.Element;
|
|
6828
7356
|
declare namespace ThemeSwitcher {
|
|
6829
7357
|
var displayName: string;
|
|
6830
7358
|
}
|
|
@@ -7321,16 +7849,32 @@ interface FeedbackProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit">
|
|
|
7321
7849
|
ratings?: FeedbackRating[];
|
|
7322
7850
|
/** Called with the rating + message when the form is submitted. */
|
|
7323
7851
|
onSubmit?: (data: FeedbackData) => void;
|
|
7852
|
+
/** The line shown, and read out, once the feedback is sent. @default "Thanks for the feedback." */
|
|
7853
|
+
successMessage?: string;
|
|
7854
|
+
/**
|
|
7855
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
7856
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
7857
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
7858
|
+
* setting. The drawn check is the flourish; the thanks line stays.
|
|
7859
|
+
* @default "full"
|
|
7860
|
+
*/
|
|
7861
|
+
motion?: MotionLevel;
|
|
7324
7862
|
}
|
|
7325
7863
|
/**
|
|
7326
7864
|
* Feedback — a compact feedback popover. Composes our Popover + Textarea +
|
|
7327
7865
|
* Button + Toggle. A secondary trigger opens a small form with a row of rating
|
|
7328
|
-
* toggles and a message field; submitting calls `onSubmit
|
|
7329
|
-
* popover. Rating and message are managed internally:
|
|
7866
|
+
* toggles and a message field; submitting calls `onSubmit`, says thanks for a
|
|
7867
|
+
* moment, then closes the popover. Rating and message are managed internally:
|
|
7330
7868
|
*
|
|
7331
7869
|
* <Feedback onSubmit={({ rating, message }) => report(rating, message)} />
|
|
7870
|
+
*
|
|
7871
|
+
* The thanks used to be missing: the popover simply vanished on submit, which
|
|
7872
|
+
* looks exactly like the form being dismissed or the message being lost. Now
|
|
7873
|
+
* the form gives way to a drawn check and a line in the same box (the two
|
|
7874
|
+
* share one grid cell, so the popover does not resize), and the popover closes
|
|
7875
|
+
* on its own after a short read.
|
|
7332
7876
|
*/
|
|
7333
|
-
declare function Feedback({ label, heading, placeholder, submitLabel, ratings, onSubmit, className, ...props }: FeedbackProps): react.JSX.Element;
|
|
7877
|
+
declare function Feedback({ label, heading, placeholder, submitLabel, ratings, successMessage, onSubmit, motion, className, ...props }: FeedbackProps): react.JSX.Element;
|
|
7334
7878
|
declare namespace Feedback {
|
|
7335
7879
|
var displayName: string;
|
|
7336
7880
|
}
|
|
@@ -7729,6 +8273,16 @@ interface CarouselProps {
|
|
|
7729
8273
|
* the arrows only; the dots and the autoplay toggle keep their own shells.
|
|
7730
8274
|
*/
|
|
7731
8275
|
arrowClassName?: string;
|
|
8276
|
+
/**
|
|
8277
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
8278
|
+
* policy, `subtle` keeps feedback and drops the glide, `off` stills it. It
|
|
8279
|
+
* can only turn motion down — it never overrides a reader's reduce-motion
|
|
8280
|
+
* setting. Under `subtle` the slides still travel (that is the answer to
|
|
8281
|
+
* "next") and the active dot snaps; `off` also makes the slides cut and
|
|
8282
|
+
* pauses autoplay, as reduced motion does.
|
|
8283
|
+
* @default "full"
|
|
8284
|
+
*/
|
|
8285
|
+
motion?: MotionLevel;
|
|
7732
8286
|
}
|
|
7733
8287
|
/**
|
|
7734
8288
|
* Carousel — a generic, accessible, zero-dependency slide carousel. Transform
|
|
@@ -7744,7 +8298,7 @@ interface CarouselProps {
|
|
|
7744
8298
|
*
|
|
7745
8299
|
* Motion is token-driven, so transitions go instant under the motion policy.
|
|
7746
8300
|
*/
|
|
7747
|
-
declare function Carousel({ children, slidesToShow, gap, loop, autoplay, arrows, dots, counter, draggable, index: controlledIndex, defaultIndex, onIndexChange, label, className, slideClassName, arrowClassName, }: CarouselProps): react.JSX.Element | null;
|
|
8301
|
+
declare function Carousel({ children, slidesToShow, gap, loop, autoplay, arrows, dots, counter, draggable, index: controlledIndex, defaultIndex, onIndexChange, label, className, slideClassName, arrowClassName, motion, }: CarouselProps): react.JSX.Element | null;
|
|
7748
8302
|
declare namespace Carousel {
|
|
7749
8303
|
var displayName: string;
|
|
7750
8304
|
}
|
|
@@ -8170,6 +8724,14 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
|
|
|
8170
8724
|
}) => ReactNode);
|
|
8171
8725
|
/** Ref to the underlying textarea — for focusing after a send, or on mount. */
|
|
8172
8726
|
fieldRef?: ComponentPropsWithRef<"textarea">["ref"];
|
|
8727
|
+
/**
|
|
8728
|
+
* How much motion this component uses: `full` (default) inherits the app's
|
|
8729
|
+
* policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
|
|
8730
|
+
* It can only turn motion down — it never overrides a reader's reduce-motion
|
|
8731
|
+
* setting. Under `subtle` the field snaps to its new height and the send and
|
|
8732
|
+
* stop glyphs fade rather than morph.
|
|
8733
|
+
*/
|
|
8734
|
+
motion?: MotionLevel;
|
|
8173
8735
|
}
|
|
8174
8736
|
/**
|
|
8175
8737
|
* ChatComposer — the input half of a conversation.
|
|
@@ -8203,7 +8765,7 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
|
|
|
8203
8765
|
* Interrupting a long generation is the most common thing a reader wants
|
|
8204
8766
|
* during one, and it belongs where their cursor already is.
|
|
8205
8767
|
*/
|
|
8206
|
-
declare function ChatComposer({ value, defaultValue, onValueChange, onSend, allowEmpty, placeholder, sendOn, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, className, children, ...props }: ChatComposerProps): react.JSX.Element;
|
|
8768
|
+
declare function ChatComposer({ value, defaultValue, onValueChange, onSend, allowEmpty, placeholder, sendOn, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, motion, className, children, ...props }: ChatComposerProps): react.JSX.Element;
|
|
8207
8769
|
declare namespace ChatComposer {
|
|
8208
8770
|
var displayName: string;
|
|
8209
8771
|
}
|
|
@@ -8854,8 +9416,16 @@ type CopySource = string | (() => string | Promise<string>);
|
|
|
8854
9416
|
*
|
|
8855
9417
|
* const { copy, copied } = useCopy(address)
|
|
8856
9418
|
* <Button variant="ghost" size="icon-sm" aria-label="Copy address" onClick={copy}>
|
|
8857
|
-
* <
|
|
9419
|
+
* <span aria-hidden="true" className="motion-icon-swap">
|
|
9420
|
+
* <span data-active={!copied} className="inline-flex"><Icon name="copy" /></span>
|
|
9421
|
+
* <span data-active={copied} className="inline-flex"><Icon name="check" /></span>
|
|
9422
|
+
* </span>
|
|
8858
9423
|
* </Button>
|
|
9424
|
+
* <span role="status" className="sr-only">{copied ? "Copied" : ""}</span>
|
|
9425
|
+
*
|
|
9426
|
+
* Both glyphs stay mounted so the copy mark cross-fades into the check (a
|
|
9427
|
+
* ternary swap snaps between frames); the status line says it to a screen
|
|
9428
|
+
* reader, which a glyph change does not. CodeBlock is the reference.
|
|
8859
9429
|
*
|
|
8860
9430
|
* Text that costs something to produce (a file to fetch, a document to
|
|
8861
9431
|
* serialise) is passed as a function, called only on click:
|
|
@@ -8969,6 +9539,6 @@ declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info"
|
|
|
8969
9539
|
/** Everything the palette names: neutral, the families, then the tone scales. */
|
|
8970
9540
|
declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
|
|
8971
9541
|
|
|
8972
|
-
declare const SABLE_UI_VERSION: "0.
|
|
9542
|
+
declare const SABLE_UI_VERSION: "0.14.0";
|
|
8973
9543
|
|
|
8974
|
-
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
|
|
9544
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TOOL_CALL_STATUS_LABELS, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
|