@kismet-ux/constellation 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/form/Checkbox/checkbox.js +1 -0
  2. package/dist/form/Checkbox/checkbox.js.map +1 -1
  3. package/dist/form/DatePicker/date-picker.js +1 -0
  4. package/dist/form/DatePicker/date-picker.js.map +1 -1
  5. package/dist/form.d.ts +1 -1
  6. package/dist/index-BaTZEId2.d.ts +354 -0
  7. package/dist/index-BgAs5Dmg.d.ts +354 -0
  8. package/dist/index-BhyLuP25.d.ts +354 -0
  9. package/dist/index-BnhsWXrb.d.ts +354 -0
  10. package/dist/index-CcD4F6q1.d.ts +633 -0
  11. package/dist/index-ClPGArR0.d.ts +633 -0
  12. package/dist/index-D2L-7_nr.d.ts +354 -0
  13. package/dist/index-DHbG5cYq.d.ts +633 -0
  14. package/dist/index-DxbOGj5Y.d.ts +354 -0
  15. package/dist/index-bK5ZOxgI.d.ts +633 -0
  16. package/dist/index-p7kVnzRy.d.ts +633 -0
  17. package/dist/index-xQq5cJnf.d.ts +633 -0
  18. package/dist/index.css +88 -0
  19. package/dist/index.d.ts +6 -6
  20. package/dist/index.js +1 -0
  21. package/dist/index.js.map +1 -1
  22. package/dist/layout/AppSidebarHeader/app-sidebar-header.js +1 -0
  23. package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
  24. package/dist/layout.d.ts +2 -2
  25. package/dist/navigation/Sheet/sheet.js +1 -0
  26. package/dist/navigation/Sheet/sheet.js.map +1 -1
  27. package/dist/navigation.d.ts +1 -1
  28. package/dist/settings/AppearanceTabs/appearance-tabs.js +1 -0
  29. package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
  30. package/dist/tokens.css +30 -0
  31. package/dist/tooltip-CZ7BC0g3.d.ts +46 -0
  32. package/dist/tooltip-Cf_wdeef.d.ts +46 -0
  33. package/dist/tooltip-D1Wex2bz.d.ts +46 -0
  34. package/dist/typography/Typography/typography.css +14 -14
  35. package/dist/ui/ChipSelect/chip-select.css +63 -0
  36. package/dist/ui/ChipSelect/chip-select.d.ts +69 -0
  37. package/dist/ui/ChipSelect/chip-select.d.ts.map +1 -0
  38. package/dist/ui/ChipSelect/chip-select.js +209 -0
  39. package/dist/ui/ChipSelect/chip-select.js.map +1 -0
  40. package/dist/ui/ChipSelect/chip-select.module.scss.js +6 -0
  41. package/dist/ui/ChipSelect/chip-select.module.scss.js.map +1 -0
  42. package/dist/ui/ChipSelect/index.d.ts +3 -0
  43. package/dist/ui/ChipSelect/index.d.ts.map +1 -0
  44. package/dist/ui/index.d.ts +1 -0
  45. package/dist/ui/index.d.ts.map +1 -1
  46. package/dist/ui.d.ts +2 -2
  47. package/dist/ui.js +1 -0
  48. package/dist/ui.js.map +1 -1
  49. package/package.json +1 -1
@@ -0,0 +1,633 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ import * as React from 'react';
3
+ import React__default, { ReactNode } from 'react';
4
+ import * as class_variance_authority_types from 'class-variance-authority/types';
5
+ import './tooltip-Cf_wdeef.js';
6
+ import { f as TypographyVariant } from './typography-CTGVc_Gg.js';
7
+
8
+ type AlertTheme = 'default' | 'primary' | 'secondary' | 'success' | 'destructive' | 'warning' | 'info' | 'slate';
9
+ type AlertMessage = {
10
+ id: string;
11
+ title: string;
12
+ description?: string;
13
+ theme: AlertTheme;
14
+ timeout?: number;
15
+ persistent?: boolean;
16
+ closable?: boolean;
17
+ };
18
+ type PushAlertInput = Omit<AlertMessage, 'id'> & {
19
+ icon?: ReactNode;
20
+ action?: ReactNode;
21
+ };
22
+ type AlertContextValue = {
23
+ pushAlert: (alert: PushAlertInput) => void;
24
+ removeAlert: (id: string) => void;
25
+ };
26
+
27
+ type PaginationProps = {
28
+ page: number;
29
+ pageSize: number;
30
+ totalItems: number;
31
+ onPageChange: (page: number) => void;
32
+ onPageSizeChange: (size: number) => void;
33
+ pageSizeOptions?: number[];
34
+ className?: string;
35
+ };
36
+
37
+ type SortDirection = 'asc' | 'desc';
38
+ type SortState = {
39
+ key: string;
40
+ direction: SortDirection;
41
+ };
42
+ type SortContextValue = {
43
+ sortState: SortState | null;
44
+ setSortState: React__default.Dispatch<React__default.SetStateAction<SortState | null>>;
45
+ };
46
+
47
+ declare const alertVariants: (props?: ({
48
+ theme?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | null | undefined;
49
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
50
+
51
+ interface AlertProps extends VariantProps<typeof alertVariants> {
52
+ className?: string;
53
+ icon?: React.ReactNode;
54
+ action?: React.ReactNode;
55
+ onClose?: () => void;
56
+ /** A colour outside the theme scale; overrides the theme's colour roles. */
57
+ color?: string;
58
+ style?: React.CSSProperties;
59
+ children?: React.ReactNode;
60
+ }
61
+ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
62
+ declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
63
+ declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
64
+ interface AlertBannerProps extends VariantProps<typeof alertVariants> {
65
+ open: boolean;
66
+ onClose?: () => void;
67
+ icon?: boolean | React.ReactNode;
68
+ action?: React.ReactNode;
69
+ className?: string;
70
+ children?: React.ReactNode;
71
+ }
72
+ declare const AlertBanner: React.ForwardRefExoticComponent<AlertBannerProps & React.RefAttributes<HTMLDivElement>>;
73
+
74
+ declare const persistAlert: (alert: Omit<AlertMessage, "id">) => void;
75
+
76
+ declare function AlertProvider({ children }: {
77
+ children: React.ReactNode;
78
+ }): React.JSX.Element;
79
+
80
+ type AvatarProps = React.HTMLAttributes<HTMLSpanElement>;
81
+ declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
82
+ type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
83
+ declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
84
+ type AvatarFallbackProps = React.HTMLAttributes<HTMLSpanElement>;
85
+ declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
86
+
87
+ declare const chipVariants: (props?: ({
88
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
89
+ variant?: "soft" | "outline" | "solid" | null | undefined;
90
+ size?: "sm" | "md" | "xs" | "2xs" | null | undefined;
91
+ shape?: "rounded" | "pill" | null | undefined;
92
+ dashed?: boolean | null | undefined;
93
+ mono?: boolean | null | undefined;
94
+ uppercase?: boolean | null | undefined;
95
+ wrap?: boolean | null | undefined;
96
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
97
+
98
+ interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {
99
+ /**
100
+ * Any colour outside the theme scale — a category hue, a dietary marker.
101
+ * Overrides the whole set of colour roles the theme would otherwise supply,
102
+ * so one value is enough for every `variant`.
103
+ */
104
+ color?: string;
105
+ /**
106
+ * Render the caller's own element instead of a `<span>`, keeping the chip's
107
+ * styling.
108
+ *
109
+ * A chip is a status marker by default and a span is right for that. But a
110
+ * row of chips is often a CHOICE — pick a variant, filter a list — and that
111
+ * needs real button semantics: focusable, keyboard-operable, `aria-pressed`.
112
+ * Styling a `<span>` to look tappable does not give any of that.
113
+ *
114
+ * ```tsx
115
+ * <Chip asChild variant={'outline'}>
116
+ * <button type={'button'} aria-pressed={on} onClick={pick}>Diced</button>
117
+ * </Chip>
118
+ * ```
119
+ */
120
+ asChild?: boolean;
121
+ }
122
+ /**
123
+ * A small status marker.
124
+ *
125
+ * `variant` chooses how much weight it carries: `soft` (a tinted fill, the
126
+ * default) reads as ambient, `outline` recedes further, and `solid` is a claim.
127
+ * `dashed` marks the value as provisional — a guess rather than a reading —
128
+ * which is a distinction worth drawing without spending a second colour on it.
129
+ */
130
+ declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;
131
+
132
+ interface ChipSelectOption {
133
+ value: string;
134
+ /** What the chip reads. Defaults to `value`. */
135
+ label?: React.ReactNode;
136
+ /** A `title` on the chip — the reckoning behind the option, if there is one. */
137
+ hint?: string;
138
+ disabled?: boolean;
139
+ }
140
+ interface ChipSelectProps {
141
+ options: ChipSelectOption[];
142
+ value?: string;
143
+ onValueChange?: (value: string) => void;
144
+ /**
145
+ * What the anchor shows while nothing is selected — the option the caller
146
+ * would pick for you. Its chip draws as a suggestion rather than a choice.
147
+ */
148
+ placeholder?: string;
149
+ /** Accessible name for the control. */
150
+ label: string;
151
+ /** Per-option chip props — the caller's own vocabulary for what an option IS. */
152
+ optionProps?: (option: ChipSelectOption, state: {
153
+ selected: boolean;
154
+ suggested: boolean;
155
+ }) => Partial<ChipProps>;
156
+ /** Chip defaults for every option. */
157
+ size?: ChipProps['size'];
158
+ theme?: ChipProps['theme'];
159
+ variant?: ChipProps['variant'];
160
+ mono?: boolean;
161
+ /** Taking the selection off again — off by default; a second tap does nothing. */
162
+ clearable?: boolean;
163
+ className?: string;
164
+ }
165
+ /**
166
+ * ONE CHIP UNTIL ASKED.
167
+ *
168
+ * A row of chips is the friendliest way to offer six sizes, four cuts or three
169
+ * grinds — and the most expensive thing on the card, because it is as tall as
170
+ * the row wraps to and it is spending that room on options nobody is choosing
171
+ * right now. Andrew, whose kitchen card this was crowding out: *"Only the
172
+ * default (if not yet selected) or selected pill should be visible. Hovering on
173
+ * desktop or tapping on mobile would then fly-out the other options from under
174
+ * the default pill. That way, the entire area is limited to the space of just
175
+ * one pill."*
176
+ *
177
+ * So: the selection is the control. The rest live under it and come out when
178
+ * asked — on hover where there is a pointer, on a tap where there is not.
179
+ *
180
+ * ⚠️ THE FLYOUT IS PORTALED, and it has to be. A chip select is small enough to
181
+ * look like it could open in place, but it is used inside cards, sheets and
182
+ * drawers — and a `Sheet` is `overflow: hidden` while a scrolling body is a
183
+ * clipping box on both axes. Opening in flow would either be clipped at the
184
+ * worst moment (an option near the foot of a long sheet) or push the card's own
185
+ * content around every time somebody moved a mouse over it.
186
+ *
187
+ * ⚠️ A TAP IS NOT A HOVER. On a touch screen the first tap must OPEN and select
188
+ * nothing — a pointer-driven `mouseenter` fires on touch too, and without this
189
+ * the first tap both opened the flyout and committed whatever the anchor
190
+ * happened to be showing.
191
+ *
192
+ * The options emerge with a stagger, which is the whole point of the gesture:
193
+ * they should read as having come out from under the anchor rather than
194
+ * appearing beside it. `prefers-reduced-motion` takes the movement out and
195
+ * keeps the reveal.
196
+ */
197
+ declare const ChipSelect: React.ForwardRefExoticComponent<ChipSelectProps & React.RefAttributes<HTMLDivElement>>;
198
+
199
+ declare const codeBlockVariants: (props?: ({
200
+ theme?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | null | undefined;
201
+ size?: "sm" | "md" | "lg" | null | undefined;
202
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
203
+
204
+ interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof codeBlockVariants> {
205
+ /** The code content to display. */
206
+ children: string;
207
+ /** Language label displayed in the header (e.g. "sql", "json", "typescript"). */
208
+ language?: string;
209
+ /** Show a copy-to-clipboard button. */
210
+ copyable?: boolean;
211
+ /** Enable collapse/expand behavior. When true, content is initially collapsed. */
212
+ collapsible?: boolean;
213
+ /** Max height in rem when collapsed. Defaults to 12. */
214
+ collapsedHeight?: number;
215
+ /** Whether the code block starts expanded when `collapsible` is true. */
216
+ defaultExpanded?: boolean;
217
+ }
218
+ declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
219
+
220
+ interface DevIndicatorProps {
221
+ className?: string;
222
+ }
223
+ declare function DevIndicator({ className }: DevIndicatorProps): React.JSX.Element | null;
224
+
225
+ interface DialogProps {
226
+ open?: boolean;
227
+ defaultOpen?: boolean;
228
+ onOpenChange?: (open: boolean) => void;
229
+ onAfterClose?: () => void;
230
+ children?: React.ReactNode;
231
+ }
232
+ declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, onAfterClose, children, }: DialogProps): React.JSX.Element;
233
+ interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
234
+ asChild?: boolean;
235
+ }
236
+ declare function DialogTrigger({ asChild, onClick, children, ...props }: DialogTriggerProps): React.JSX.Element;
237
+ interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
238
+ asChild?: boolean;
239
+ }
240
+ declare function DialogClose({ asChild, onClick, children, ...props }: DialogCloseProps): React.JSX.Element;
241
+ declare function DialogOverlay({ className, passThrough, ...props }: React.HTMLAttributes<HTMLDivElement> & {
242
+ passThrough?: boolean;
243
+ }): React.JSX.Element;
244
+ type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
245
+ width?: 'max' | 'min';
246
+ /**
247
+ * Give the panel a real width instead of letting its content decide.
248
+ *
249
+ * `width` is `max-content`/`min-content`, which is fine for a confirm but
250
+ * wrong for anything with a form in it: the panel ends up as narrow as the
251
+ * longest line allows and every row inside is squashed. Takes the same
252
+ * vocabulary as `Container` — `text`, `content`, `wide`, or a CSS length —
253
+ * and stays capped by the viewport either way.
254
+ */
255
+ measure?: 'text' | 'content' | 'wide' | (string & {});
256
+ /**
257
+ * The element the dialog came from, so it grows out of it and shrinks back
258
+ * into it rather than fading in over the top of the page.
259
+ *
260
+ * Pass the tile, row or card that was clicked. Where a modal has an obvious
261
+ * origin on screen, morphing from it says "this is that thing, larger" — a
262
+ * dialog that fades in centre-screen makes the reader find their place
263
+ * again when it closes.
264
+ *
265
+ * A `DOMRect` is accepted too, for the case where the origin has since been
266
+ * unmounted or moved.
267
+ */
268
+ origin?: React.RefObject<HTMLElement | null> | DOMRect | null;
269
+ /**
270
+ * Whether the scrim takes the pointer.
271
+ *
272
+ * `blocking` (the default) is a modal in the usual sense: the page behind is
273
+ * dimmed and inert, and a click on the scrim dismisses.
274
+ *
275
+ * `pass-through` dims the page but leaves it live, for a panel that is a
276
+ * DETAIL VIEW of something still on screen — a tile in a grid, a row in a
277
+ * table. Clicking the next tile should show the next thing, not spend one
278
+ * click closing and a second one opening. The dialog still dismisses on a
279
+ * click that lands outside it, so a click on the empty background behaves as
280
+ * it always did; a handler that calls `stopPropagation()` keeps it open,
281
+ * which is how the tile says "I am taking this click".
282
+ *
283
+ * Scroll is not locked in this mode, for the same reason: the thing you want
284
+ * to look at next may be further down the page.
285
+ */
286
+ overlay?: 'blocking' | 'pass-through';
287
+ };
288
+ declare function DialogContent({ className, children, width, origin, measure, overlay, style, ...props }: DialogContentProps): React.ReactPortal | null;
289
+ declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
290
+ declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
291
+ /**
292
+ * Renders the dialog's heading. Defaults to `<Typography variant='h6'>`
293
+ * so consumers can write `<DialogTitle>My dialog</DialogTitle>` without
294
+ * manually wrapping in Typography. Override the variant with the
295
+ * `variant` prop, or opt out entirely with `asChild` to supply a custom
296
+ * element (e.g., a Heading component).
297
+ */
298
+ declare function DialogTitle({ className, asChild, variant, ...props }: React.ComponentProps<'h2'> & {
299
+ asChild?: boolean;
300
+ variant?: TypographyVariant;
301
+ }): React.JSX.Element;
302
+ /**
303
+ * Renders the dialog's supporting description text. Defaults to
304
+ * `<Typography variant='body2'>`. Override with `variant` or supply a
305
+ * custom element via `asChild`.
306
+ */
307
+ declare function DialogDescription({ className, asChild, variant, ...props }: React.ComponentProps<'p'> & {
308
+ asChild?: boolean;
309
+ variant?: TypographyVariant;
310
+ }): React.JSX.Element;
311
+ declare function DialogPortal({ children }: {
312
+ children?: React.ReactNode;
313
+ }): React.JSX.Element;
314
+
315
+ declare const emptyStateVariants: (props?: ({
316
+ theme?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | null | undefined;
317
+ size?: "sm" | "md" | "lg" | null | undefined;
318
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
319
+
320
+ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyStateVariants> {
321
+ /** Icon displayed above the title. */
322
+ icon?: React.ReactNode;
323
+ /** Primary heading text. */
324
+ title: string;
325
+ /** Secondary descriptive text below the title. */
326
+ description?: string;
327
+ /** Action element (typically a Button) rendered below the text. */
328
+ action?: React.ReactNode;
329
+ }
330
+ declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
331
+
332
+ declare const iconVariants: (props?: ({
333
+ variant?: "outlined" | "contained" | "ghost" | "plain" | null | undefined;
334
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
335
+ size?: "sm" | "md" | "lg" | "xs" | null | undefined;
336
+ rounded?: boolean | "extra" | null | undefined;
337
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
338
+
339
+ type IconVariantSize = NonNullable<VariantProps<typeof iconVariants>['size']>;
340
+ type IconNodeProps = React.SVGProps<SVGSVGElement> & {
341
+ size?: string | number;
342
+ };
343
+ interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, Omit<VariantProps<typeof iconVariants>, 'size'> {
344
+ iconNode: React.ComponentType<IconNodeProps>;
345
+ size?: IconVariantSize | number;
346
+ /** Apply 1s linear infinite rotation to the inner SVG; also defaults role='status' for a11y. */
347
+ spin?: boolean;
348
+ }
349
+ /**
350
+ * Standalone icon with a sized wrapper box (e.g. status indicators, list-item
351
+ * leaders, themed avatars). Renders `<span><svg/></span>` — the span carries
352
+ * the `iconVariants` background/border for contained/outlined variants and a
353
+ * fixed pixel box per `size`.
354
+ *
355
+ * **DO NOT** place inside `Button`, `Chip`, `DropdownMenuItem`, or other host
356
+ * components that already size their SVG children via `:has(> svg)`. The host's
357
+ * size + padding adjustments only trigger for a direct-child `<svg>`, and
358
+ * Icon's wrapper span breaks that rule — you end up with the host's default
359
+ * (wider) padding plus Icon's full-height box (e.g. 1.85rem for `size='sm'`).
360
+ *
361
+ * Inside a host that sizes its own svg, pass the raw lucide component directly:
362
+ *
363
+ * ```tsx
364
+ * <Button>
365
+ * <CheckIcon />
366
+ * Save
367
+ * </Button>
368
+ *
369
+ * <Button>
370
+ * <Loader2Icon className={'animate-spin'} />
371
+ * Saving…
372
+ * </Button>
373
+ * ```
374
+ *
375
+ * Use `Icon` only when the wrapper box is desired (standalone use).
376
+ */
377
+ declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
378
+
379
+ interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
380
+ variant?: 'disc' | 'decimal' | 'none';
381
+ gap?: number;
382
+ size?: 'xs' | 'sm' | 'md' | 'lg';
383
+ muted?: boolean;
384
+ }
385
+ declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLOListElement | HTMLUListElement>>;
386
+ interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
387
+ icon?: React.ReactNode;
388
+ }
389
+ declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
390
+
391
+ declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
392
+
393
+ declare const progressBarVariants: (props?: ({
394
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
395
+ size?: "sm" | "md" | "lg" | "xs" | null | undefined;
396
+ rounded?: boolean | null | undefined;
397
+ animated?: boolean | null | undefined;
398
+ indeterminate?: boolean | null | undefined;
399
+ striped?: boolean | null | undefined;
400
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
401
+
402
+ interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof progressBarVariants> {
403
+ /** Current progress value (0–100). Ignored when `indeterminate` is true. */
404
+ value?: number;
405
+ /** Accessible label describing what the progress bar represents. */
406
+ label?: string;
407
+ }
408
+ declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
409
+
410
+ interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
411
+ orientation?: 'horizontal' | 'vertical';
412
+ decorative?: boolean;
413
+ }
414
+ declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
415
+
416
+ type TrendDirection = 'up' | 'down' | 'neutral';
417
+ type StatCardTheme = 'default' | 'primary' | 'secondary' | 'destructive' | 'warning' | 'success' | 'info' | 'slate';
418
+ type StatCardSize = 'sm' | 'md' | 'lg';
419
+ type StatCardVariant = 'unstyled' | 'outlined' | 'filled';
420
+ type StatCardDirection = 'row' | 'column';
421
+ interface StatCardProps extends React.ComponentPropsWithoutRef<'div'> {
422
+ /** Text label describing the metric. */
423
+ label: string;
424
+ /** The metric value to display. */
425
+ value?: React.ReactNode;
426
+ /** Icon displayed beside the metric. */
427
+ icon?: React.ReactNode;
428
+ /** Optional description below the value. */
429
+ description?: string;
430
+ /** Trend direction indicator. */
431
+ trend?: TrendDirection;
432
+ /** Trend label text (e.g. "+12%", "−3.4%"). */
433
+ trendLabel?: string;
434
+ /** Visual theme for the card. */
435
+ theme?: StatCardTheme;
436
+ /** Card size. */
437
+ size?: StatCardSize;
438
+ /** Card Direction. */
439
+ direction?: StatCardDirection;
440
+ /** Surface variant. */
441
+ variant?: StatCardVariant;
442
+ /**
443
+ * The element the card renders as.
444
+ *
445
+ * A figure that FILTERS the thing it counts is a control, and should be a
446
+ * real one: `el='button'` makes the whole card the target, so it takes
447
+ * focus, answers the keyboard, and reads as pressable rather than as a
448
+ * number that happens to react to a click.
449
+ */
450
+ el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
451
+ }
452
+ declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
453
+
454
+ declare const statusDotVariants: (props?: ({
455
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
456
+ size?: "sm" | "md" | "lg" | null | undefined;
457
+ glow?: boolean | null | undefined;
458
+ pulse?: boolean | null | undefined;
459
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
460
+
461
+ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof statusDotVariants> {
462
+ /** A colour outside the theme scale. */
463
+ color?: string;
464
+ /** Accessible name. Omit only when adjacent text already says the state. */
465
+ label?: string;
466
+ }
467
+ /**
468
+ * The dot that says what state a connection or process is in.
469
+ *
470
+ * Deliberately not a `Chip`: a chip is a bordered object that holds a word,
471
+ * where this is a single mark that usually sits *beside* one. Pairing it with
472
+ * text is the caller's job, which keeps the wording — and its translation —
473
+ * out of here.
474
+ *
475
+ * `glow` is for the state worth catching in peripheral vision (a save landing);
476
+ * `pulse` for one that is still in flight.
477
+ */
478
+ declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
479
+
480
+ declare const stepProgressVariants: (props?: ({
481
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
482
+ size?: "sm" | "md" | "lg" | null | undefined;
483
+ orientation?: "horizontal" | "vertical" | null | undefined;
484
+ stretch?: boolean | null | undefined;
485
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
486
+
487
+ interface Step {
488
+ /** Label displayed next to or below the step indicator. */
489
+ label: string;
490
+ /** Optional secondary description below the label. */
491
+ description?: string;
492
+ /** Optional icon rendered inside the dot. Defaults to a checkmark for completed steps. */
493
+ icon?: React.ReactNode;
494
+ }
495
+ interface StepProgressProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'children'>, VariantProps<typeof stepProgressVariants> {
496
+ /** Array of step definitions. */
497
+ steps: Step[];
498
+ /** Zero-based index of the currently active step. Steps before this are complete. */
499
+ currentStep: number;
500
+ }
501
+ declare const StepProgress: React.ForwardRefExoticComponent<StepProgressProps & React.RefAttributes<HTMLOListElement>>;
502
+
503
+ declare const switchVariants: (props?: ({
504
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
505
+ size?: "sm" | "md" | "lg" | null | undefined;
506
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
507
+
508
+ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick'>, VariantProps<typeof switchVariants> {
509
+ pressed?: boolean;
510
+ onPressedChange?: (pressed: boolean) => void;
511
+ }
512
+ declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
513
+
514
+ declare const TableCard: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
515
+ declare const Table: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & {
516
+ defaultSort?: SortState;
517
+ }, "ref"> & React.RefAttributes<HTMLTableElement>>;
518
+ declare const TableHead: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
519
+ declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
520
+ interface TableBodyProps extends React.ComponentProps<'tbody'> {
521
+ showEmptyState?: boolean;
522
+ emptyState?: React.ReactNode;
523
+ emptyStateColSpan?: number;
524
+ }
525
+ declare const TableBody: React.ForwardRefExoticComponent<Omit<TableBodyProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
526
+ declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
527
+ type TableHeaderProps = React.ComponentProps<'th'> & {
528
+ action?: 'sticky';
529
+ };
530
+ declare const TableHeader: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
531
+ type TableCellProps = React.ComponentProps<'td'> & {
532
+ action?: 'sticky';
533
+ };
534
+ declare const TableCell: React.ForwardRefExoticComponent<Omit<TableCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
535
+ interface TableSortableHeaderProps<Key extends string = string> {
536
+ label: string;
537
+ sortKey: Key;
538
+ defaultSort?: true | SortDirection;
539
+ action?: 'sticky';
540
+ }
541
+ declare function TableSortableHeader<Key extends string = string>({ label, sortKey, defaultSort, action, }: TableSortableHeaderProps<Key>): React.JSX.Element;
542
+
543
+ interface TableActionItem {
544
+ /** Visible label for the action. */
545
+ label: string;
546
+ /** Optional icon rendered before the label. */
547
+ icon?: React.ReactNode;
548
+ /** Click handler for this action. */
549
+ onClick?: () => void;
550
+ /** Whether the action is disabled. */
551
+ disabled?: boolean;
552
+ /** Visual variant — `destructive` renders the item in the destructive theme. */
553
+ variant?: 'default' | 'destructive';
554
+ }
555
+ interface TableActionCellProps extends React.ComponentProps<'div'> {
556
+ /** Array of actions to display. Renders a single button for one action, or a dropdown for multiple. */
557
+ actions: TableActionItem[];
558
+ /** Accessible label for the dropdown trigger button. */
559
+ dropdownLabel?: string;
560
+ }
561
+ /**
562
+ * Renders a right-aligned action cell for table rows.
563
+ *
564
+ * - **Single action**: renders a visible `<Button>` with the action label and optional icon.
565
+ * - **Multiple actions**: renders a `...` icon button that opens a `<DropdownMenu>`.
566
+ */
567
+ declare const TableActionCell: React.ForwardRefExoticComponent<Omit<TableActionCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
568
+
569
+ interface TableToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
570
+ /**
571
+ * Left-aligned controls — typically a search Input plus zero or more
572
+ * filter SelectFields / DatePickers / Toggles. Children flow horizontally
573
+ * with `gap` and wrap on narrow screens.
574
+ */
575
+ children?: React.ReactNode;
576
+ /**
577
+ * Right-aligned slot — for reset / clear / bulk-action buttons. Pushed to
578
+ * the end of the row via auto-margin; wraps to a new line on narrow
579
+ * screens if the controls grow too wide.
580
+ */
581
+ actions?: React.ReactNode;
582
+ /**
583
+ * Render a 1px subtle bottom border to separate the toolbar from the
584
+ * Table or content below. Default `true`.
585
+ */
586
+ divider?: boolean;
587
+ }
588
+ /**
589
+ * Container for the row of controls (search, filters, actions) that sits
590
+ * above a `Table` inside a `TableCard`. Presentational only — consumers
591
+ * own all filter state and search debouncing. The companion to
592
+ * `TableSearch` for the more common single-search case.
593
+ */
594
+ declare const TableToolbar: React.ForwardRefExoticComponent<TableToolbarProps & React.RefAttributes<HTMLDivElement>>;
595
+
596
+ declare const toggleVariants: (props?: ({
597
+ variant?: "outlined" | "contained" | "ghost" | null | undefined;
598
+ theme?: "primary" | "secondary" | "info" | "success" | "warning" | "destructive" | "slate" | "inherit" | null | undefined;
599
+ size?: "sm" | "md" | "lg" | "xs" | null | undefined;
600
+ iconOnly?: boolean | null | undefined;
601
+ rounded?: boolean | "extra" | null | undefined;
602
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
603
+
604
+ interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, VariantProps<typeof toggleVariants> {
605
+ pressed?: boolean;
606
+ defaultPressed?: boolean;
607
+ onPressedChange?: (pressed: boolean) => void;
608
+ value?: string;
609
+ }
610
+ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
611
+
612
+ type ToggleGroupBaseProps = VariantProps<typeof toggleVariants> & {
613
+ className?: string;
614
+ children?: React.ReactNode;
615
+ stretch?: boolean;
616
+ };
617
+ type ToggleGroupSingleProps = ToggleGroupBaseProps & {
618
+ type: 'single';
619
+ value?: string;
620
+ defaultValue?: string;
621
+ onValueChange?: (value: string) => void;
622
+ };
623
+ type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
624
+ type: 'multiple';
625
+ value?: string[];
626
+ defaultValue?: string[];
627
+ onValueChange?: (value: string[]) => void;
628
+ };
629
+ type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
630
+ declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
631
+
632
+ export { Separator as $, Chip as C, DevIndicator as D, DialogDescription as E, DialogFooter as F, DialogHeader as G, DialogOverlay as H, DialogPortal as I, DialogTitle as K, DialogTrigger as L, EmptyState as N, Icon as P, List as R, ListItem as T, Pagination as W, ProgressBar as Y, Alert as a, StatCard as a3, StatusDot as a9, persistAlert as aB, statusDotVariants as aC, StepProgress as ac, Switch as ae, Table as ag, TableActionCell as ah, TableBody as ak, TableCard as am, TableCell as an, TableFooter as ao, TableHead as ap, TableHeader as aq, TableRow as ar, TableSortableHeader as as, TableToolbar as au, Toggle as aw, ToggleGroup as ax, AlertBanner as b, AlertDescription as d, AlertProvider as g, AlertTitle as i, Avatar as j, AvatarFallback as k, AvatarImage as m, ChipSelect as q, CodeBlock as t, Dialog as w, DialogClose as x, DialogContent as z };
633
+ export type { AlertContextValue as A, DialogContentProps as B, DialogProps as J, DialogTriggerProps as M, EmptyStateProps as O, IconProps as Q, SortState as S, ListItemProps as U, ListProps as V, PaginationProps as X, ProgressBarProps as Z, PushAlertInput as _, SeparatorProps as a0, SortContextValue as a1, SortDirection as a2, StatCardDirection as a4, StatCardProps as a5, StatCardSize as a6, StatCardTheme as a7, StatCardVariant as a8, TrendDirection as aA, StatusDotProps as aa, Step as ab, StepProgressProps as ad, SwitchProps as af, TableActionCellProps as ai, TableActionItem as aj, TableBodyProps as al, TableSortableHeaderProps as at, TableToolbarProps as av, ToggleGroupProps as ay, ToggleProps as az, AlertBannerProps as c, AlertMessage as e, AlertProps as f, AlertTheme as h, AvatarFallbackProps as l, AvatarImageProps as n, AvatarProps as o, ChipProps as p, ChipSelectOption as r, ChipSelectProps as s, CodeBlockProps as u, DevIndicatorProps as v, DialogCloseProps as y };