@takeoff-ui/react-spar 0.1.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -16
- package/dist/index.cjs +3848 -290
- package/dist/index.d.cts +2423 -173
- package/dist/index.d.ts +2423 -173
- package/dist/index.mjs +3837 -300
- package/package.json +9 -7
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
2
|
import { HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
|
|
4
|
-
import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogCloseProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectContentProps as SelectContentProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1 } from '@turkish-technology/spar';
|
|
3
|
+
import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbItemRenderProps, BreadcrumbLinkProps as BreadcrumbLinkProps$1, NavigationHandler, PressEvent, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, DialogOverlayProps as DialogOverlayProps$1, DialogContentProps, DialogTitleProps as DialogTitleProps$1, DialogCloseProps as DialogCloseProps$1, DropdownMenuProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuViewportProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuArrowProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, LabelProps as LabelProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectContentProps as SelectContentProps$1, SelectViewportProps as SelectViewportProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TabsListProps as TabsListProps$1, TabsTriggerRenderProps as TabsTriggerRenderProps$1, TabsTriggerProps as TabsTriggerProps$1, TabsContentProps as TabsContentProps$1, TabsActivationMode as TabsActivationMode$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1, ToasterController, ToastData as ToastData$1, ToasterProps as ToasterProps$1, ToastOptions as ToastOptions$1 } from '@turkish-technology/spar';
|
|
4
|
+
export { BreadcrumbItemRenderProps, BreadcrumbPosition, CreateToasterOptions, ToastAnnouncement, ToastPlacement, ToastPromiseOptions, ToastStatus, ToastType, ToastUpdateOptions, ToasterController, createToaster } from '@turkish-technology/spar';
|
|
5
|
+
import * as _tanstack_react_table from '@tanstack/react-table';
|
|
6
|
+
import { HeaderContext, CellContext, Column, FilterFn, RowSelectionState, SortingState, ColumnFiltersState, ExpandedState, PaginationState, Table as Table$1 } from '@tanstack/react-table';
|
|
5
7
|
|
|
6
8
|
/** Per-slot class map declared by a component base. Every slot is required. */
|
|
7
9
|
type SlotClassNames<TSlot extends string> = Record<TSlot, string>;
|
|
@@ -101,7 +103,7 @@ interface TakeoffSparProviderProps extends Partial<TakeoffSparProviderValue> {
|
|
|
101
103
|
* script that reads stored preferences) to avoid a first-paint flash before
|
|
102
104
|
* the provider's effect runs.
|
|
103
105
|
*/
|
|
104
|
-
declare const TakeoffSparProvider: ({ children, colorMode, locale, components }: TakeoffSparProviderProps) =>
|
|
106
|
+
declare const TakeoffSparProvider: ({ children, colorMode, locale, components }: TakeoffSparProviderProps) => react.JSX.Element;
|
|
105
107
|
/**
|
|
106
108
|
* Read the active theme value. The provider is **optional**: when no
|
|
107
109
|
* `TakeoffSparProvider` ancestor is present, the default theme
|
|
@@ -247,32 +249,136 @@ declare module '../../core/theme' {
|
|
|
247
249
|
}
|
|
248
250
|
|
|
249
251
|
declare const Accordion: {
|
|
250
|
-
<T extends react.ElementType = "div">(props: AccordionProps<T>):
|
|
252
|
+
<T extends react.ElementType = "div">(props: AccordionProps<T>): react.JSX.Element;
|
|
251
253
|
displayName: string;
|
|
252
254
|
} & {
|
|
253
255
|
Item: {
|
|
254
|
-
<T extends react.ElementType = "div">(props: AccordionItemProps<T>):
|
|
256
|
+
<T extends react.ElementType = "div">(props: AccordionItemProps<T>): react.JSX.Element;
|
|
255
257
|
displayName: string;
|
|
256
258
|
};
|
|
257
259
|
Header: {
|
|
258
|
-
<T extends react.ElementType = "h3">(props: AccordionHeaderProps<T>):
|
|
260
|
+
<T extends react.ElementType = "h3">(props: AccordionHeaderProps<T>): react.JSX.Element;
|
|
259
261
|
displayName: string;
|
|
260
262
|
};
|
|
261
263
|
Trigger: {
|
|
262
|
-
<T extends react.ElementType = "button">(props: AccordionTriggerProps<T>):
|
|
264
|
+
<T extends react.ElementType = "button">(props: AccordionTriggerProps<T>): react.JSX.Element;
|
|
263
265
|
displayName: string;
|
|
264
266
|
};
|
|
265
267
|
Indicator: {
|
|
266
|
-
<T extends react.ElementType = "span">(props: AccordionIndicatorProps<T>):
|
|
268
|
+
<T extends react.ElementType = "span">(props: AccordionIndicatorProps<T>): react.JSX.Element;
|
|
267
269
|
displayName: string;
|
|
268
270
|
};
|
|
269
271
|
Content: {
|
|
270
|
-
<T extends react.ElementType = "div">(props: AccordionContentProps<T>):
|
|
272
|
+
<T extends react.ElementType = "div">(props: AccordionContentProps<T>): react.JSX.Element;
|
|
271
273
|
displayName: string;
|
|
272
274
|
};
|
|
273
275
|
};
|
|
274
276
|
|
|
275
|
-
type
|
|
277
|
+
type AlertVariant = 'success' | 'warning' | 'info' | 'danger' | 'neutral';
|
|
278
|
+
type AlertAppearance = 'filled' | 'filledLight' | 'outlined' | 'gradient';
|
|
279
|
+
type AlertSlot = 'root';
|
|
280
|
+
type AlertContentSlot = 'root';
|
|
281
|
+
type AlertTitleSlot = 'root';
|
|
282
|
+
type AlertDescriptionSlot = 'root';
|
|
283
|
+
type AlertActionsSlot = 'root';
|
|
284
|
+
type AlertCloseSlot = 'root';
|
|
285
|
+
interface AlertOwnProps {
|
|
286
|
+
/**
|
|
287
|
+
* Defines the visual variant of the alert.
|
|
288
|
+
* @defaultValue 'neutral'
|
|
289
|
+
*/
|
|
290
|
+
variant?: AlertVariant;
|
|
291
|
+
/**
|
|
292
|
+
* Visual appearance of the alert.
|
|
293
|
+
* @defaultValue 'filled'
|
|
294
|
+
*/
|
|
295
|
+
appearance?: AlertAppearance;
|
|
296
|
+
/** Called when `Alert.Close` is clicked. */
|
|
297
|
+
onClose?: () => void;
|
|
298
|
+
/** Per-slot extra classes. */
|
|
299
|
+
classNames?: ClassNamesMap<AlertSlot>;
|
|
300
|
+
/** Per-slot HTML-attribute overrides. */
|
|
301
|
+
slotProps?: SlotPropsMap<AlertSlot>;
|
|
302
|
+
}
|
|
303
|
+
type AlertProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, AlertOwnProps>;
|
|
304
|
+
interface AlertContentOwnProps {
|
|
305
|
+
/** Per-slot extra classes. */
|
|
306
|
+
classNames?: ClassNamesMap<AlertContentSlot>;
|
|
307
|
+
/** Per-slot HTML-attribute overrides. */
|
|
308
|
+
slotProps?: SlotPropsMap<AlertContentSlot>;
|
|
309
|
+
}
|
|
310
|
+
type AlertContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, AlertContentOwnProps>;
|
|
311
|
+
interface AlertTitleOwnProps {
|
|
312
|
+
/**
|
|
313
|
+
* Semantic heading level used when `as` is not provided.
|
|
314
|
+
* @defaultValue 5
|
|
315
|
+
*/
|
|
316
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
317
|
+
/** Per-slot extra classes. */
|
|
318
|
+
classNames?: ClassNamesMap<AlertTitleSlot>;
|
|
319
|
+
/** Per-slot HTML-attribute overrides. */
|
|
320
|
+
slotProps?: SlotPropsMap<AlertTitleSlot>;
|
|
321
|
+
}
|
|
322
|
+
type AlertTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, AlertTitleOwnProps>;
|
|
323
|
+
interface AlertDescriptionOwnProps {
|
|
324
|
+
/** Per-slot extra classes. */
|
|
325
|
+
classNames?: ClassNamesMap<AlertDescriptionSlot>;
|
|
326
|
+
/** Per-slot HTML-attribute overrides. */
|
|
327
|
+
slotProps?: SlotPropsMap<AlertDescriptionSlot>;
|
|
328
|
+
}
|
|
329
|
+
type AlertDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<'p', T, AlertDescriptionOwnProps>;
|
|
330
|
+
interface AlertActionsOwnProps {
|
|
331
|
+
/** Per-slot extra classes. */
|
|
332
|
+
classNames?: ClassNamesMap<AlertActionsSlot>;
|
|
333
|
+
/** Per-slot HTML-attribute overrides. */
|
|
334
|
+
slotProps?: SlotPropsMap<AlertActionsSlot>;
|
|
335
|
+
}
|
|
336
|
+
type AlertActionsProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, AlertActionsOwnProps>;
|
|
337
|
+
interface AlertCloseOwnProps {
|
|
338
|
+
/** Per-slot extra classes. */
|
|
339
|
+
classNames?: ClassNamesMap<AlertCloseSlot>;
|
|
340
|
+
/** Per-slot HTML-attribute overrides. */
|
|
341
|
+
slotProps?: SlotPropsMap<AlertCloseSlot>;
|
|
342
|
+
}
|
|
343
|
+
type AlertCloseProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, AlertCloseOwnProps>;
|
|
344
|
+
declare module '../../core/theme' {
|
|
345
|
+
interface ComponentThemeRegistry {
|
|
346
|
+
Alert: ComponentThemeConfig<AlertProps, AlertSlot>;
|
|
347
|
+
AlertContent: ComponentThemeConfig<AlertContentProps, AlertContentSlot>;
|
|
348
|
+
AlertTitle: ComponentThemeConfig<AlertTitleProps, AlertTitleSlot>;
|
|
349
|
+
AlertDescription: ComponentThemeConfig<AlertDescriptionProps, AlertDescriptionSlot>;
|
|
350
|
+
AlertActions: ComponentThemeConfig<AlertActionsProps, AlertActionsSlot>;
|
|
351
|
+
AlertClose: ComponentThemeConfig<AlertCloseProps, AlertCloseSlot>;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
declare const Alert: {
|
|
356
|
+
<T extends react.ElementType = "div">(props: AlertProps<T>): react.JSX.Element;
|
|
357
|
+
displayName: string;
|
|
358
|
+
} & {
|
|
359
|
+
Content: {
|
|
360
|
+
<T extends react.ElementType = "div">(props: AlertContentProps<T>): react.JSX.Element;
|
|
361
|
+
displayName: string;
|
|
362
|
+
};
|
|
363
|
+
Title: {
|
|
364
|
+
<T extends react.ElementType = "h5">(props: AlertTitleProps<T>): react.JSX.Element;
|
|
365
|
+
displayName: string;
|
|
366
|
+
};
|
|
367
|
+
Description: {
|
|
368
|
+
<T extends react.ElementType = "p">(props: AlertDescriptionProps<T>): react.JSX.Element;
|
|
369
|
+
displayName: string;
|
|
370
|
+
};
|
|
371
|
+
Actions: {
|
|
372
|
+
<T extends react.ElementType = "div">(props: AlertActionsProps<T>): react.JSX.Element;
|
|
373
|
+
displayName: string;
|
|
374
|
+
};
|
|
375
|
+
Close: {
|
|
376
|
+
<T extends react.ElementType = "button">(props: AlertCloseProps<T>): react.JSX.Element;
|
|
377
|
+
displayName: string;
|
|
378
|
+
};
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
type BadgeVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'verified' | 'purple' | 'cyan' | 'business' | 'teal' | 'white' | 'dark';
|
|
276
382
|
type BadgeAppearance = 'filled' | 'filledLight' | 'outlined' | 'text';
|
|
277
383
|
type BadgeSize = 'small' | 'base' | 'large';
|
|
278
384
|
type BadgeSlot = 'root' | 'label' | 'icon';
|
|
@@ -298,7 +404,7 @@ interface BadgeProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
|
298
404
|
*/
|
|
299
405
|
rounded?: boolean;
|
|
300
406
|
/**
|
|
301
|
-
* Renders a minimal colored dot (
|
|
407
|
+
* Renders a minimal colored dot (8×8px) with no content.
|
|
302
408
|
* When true, children, startContent, and endContent are ignored.
|
|
303
409
|
* @defaultValue false
|
|
304
410
|
*/
|
|
@@ -327,8 +433,127 @@ declare module '../../core/theme' {
|
|
|
327
433
|
}
|
|
328
434
|
|
|
329
435
|
declare const Badge: {
|
|
330
|
-
(props: BadgeProps):
|
|
436
|
+
(props: BadgeProps): react.JSX.Element;
|
|
437
|
+
displayName: string;
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
/**
|
|
441
|
+
* Density scale. `'base'` matches the default body line-height; `'large'`
|
|
442
|
+
* lifts the trail in hero or page-header contexts.
|
|
443
|
+
*/
|
|
444
|
+
type BreadcrumbSize = 'base' | 'large';
|
|
445
|
+
/**
|
|
446
|
+
* Visual style. `'basic'` is the bare text trail; `'outlined'` renders each
|
|
447
|
+
* crumb as a bordered, backgrounded chip.
|
|
448
|
+
*/
|
|
449
|
+
type BreadcrumbType = 'basic' | 'outlined';
|
|
450
|
+
|
|
451
|
+
type BreadcrumbNavigationHandler = NavigationHandler;
|
|
452
|
+
type BreadcrumbPressEvent = PressEvent;
|
|
453
|
+
type BreadcrumbSlot = 'root';
|
|
454
|
+
type BreadcrumbListSlot = 'root';
|
|
455
|
+
type BreadcrumbItemSlot = 'root';
|
|
456
|
+
type BreadcrumbLinkSlot = 'root';
|
|
457
|
+
type BreadcrumbPageSlot = 'root';
|
|
458
|
+
type BreadcrumbSeparatorSlot = 'root';
|
|
459
|
+
interface BreadcrumbOwnProps {
|
|
460
|
+
/**
|
|
461
|
+
* Density scale cascaded to every part through context.
|
|
462
|
+
* @defaultValue 'base'
|
|
463
|
+
*/
|
|
464
|
+
size?: BreadcrumbSize;
|
|
465
|
+
/**
|
|
466
|
+
* Visual style cascaded to every part through context.
|
|
467
|
+
* @defaultValue 'basic'
|
|
468
|
+
*/
|
|
469
|
+
type?: BreadcrumbType;
|
|
470
|
+
/** Per-slot class name overrides. */
|
|
471
|
+
classNames?: ClassNamesMap<BreadcrumbSlot>;
|
|
472
|
+
/** Per-slot HTML attribute overrides. */
|
|
473
|
+
slotProps?: SlotPropsMap<BreadcrumbSlot>;
|
|
474
|
+
}
|
|
475
|
+
type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<'nav', T, BreadcrumbOwnProps & Pick<BreadcrumbProps$1, 'aria-label' | 'onNavigate' | 'disabled'>>;
|
|
476
|
+
interface BreadcrumbListOwnProps {
|
|
477
|
+
/** Per-slot class name overrides. */
|
|
478
|
+
classNames?: ClassNamesMap<BreadcrumbListSlot>;
|
|
479
|
+
/** Per-slot HTML attribute overrides. */
|
|
480
|
+
slotProps?: SlotPropsMap<BreadcrumbListSlot>;
|
|
481
|
+
}
|
|
482
|
+
type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<'ol', T, BreadcrumbListOwnProps>;
|
|
483
|
+
interface BreadcrumbItemOwnProps {
|
|
484
|
+
/**
|
|
485
|
+
* Item content — typically a `Breadcrumb.Link` or `Breadcrumb.Page`, or a
|
|
486
|
+
* render function that receives `{ position, isCurrent, isDisabled }` so
|
|
487
|
+
* consumers can swap content without reading the item context manually.
|
|
488
|
+
*/
|
|
489
|
+
children?: ReactNode | ((state: BreadcrumbItemRenderProps) => ReactNode);
|
|
490
|
+
/** Per-slot class name overrides. */
|
|
491
|
+
classNames?: ClassNamesMap<BreadcrumbItemSlot>;
|
|
492
|
+
/** Per-slot HTML attribute overrides. */
|
|
493
|
+
slotProps?: SlotPropsMap<BreadcrumbItemSlot>;
|
|
494
|
+
}
|
|
495
|
+
type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, BreadcrumbItemOwnProps>;
|
|
496
|
+
interface BreadcrumbLinkOwnProps {
|
|
497
|
+
/** Per-slot class name overrides. */
|
|
498
|
+
classNames?: ClassNamesMap<BreadcrumbLinkSlot>;
|
|
499
|
+
/** Per-slot HTML attribute overrides. */
|
|
500
|
+
slotProps?: SlotPropsMap<BreadcrumbLinkSlot>;
|
|
501
|
+
}
|
|
502
|
+
type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<'a', T, BreadcrumbLinkOwnProps & Pick<BreadcrumbLinkProps$1, 'href' | 'disabled' | 'isExternal' | 'target' | 'rel' | 'onPress'>>;
|
|
503
|
+
interface BreadcrumbPageOwnProps {
|
|
504
|
+
/** Per-slot class name overrides. */
|
|
505
|
+
classNames?: ClassNamesMap<BreadcrumbPageSlot>;
|
|
506
|
+
/** Per-slot HTML attribute overrides. */
|
|
507
|
+
slotProps?: SlotPropsMap<BreadcrumbPageSlot>;
|
|
508
|
+
}
|
|
509
|
+
type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, BreadcrumbPageOwnProps>;
|
|
510
|
+
interface BreadcrumbSeparatorOwnProps {
|
|
511
|
+
/**
|
|
512
|
+
* Override the default chevron separator. Plain content renders inside the
|
|
513
|
+
* canonical `<li aria-hidden>` owner node.
|
|
514
|
+
*/
|
|
515
|
+
children?: ReactNode;
|
|
516
|
+
/** Per-slot class name overrides. */
|
|
517
|
+
classNames?: ClassNamesMap<BreadcrumbSeparatorSlot>;
|
|
518
|
+
/** Per-slot HTML attribute overrides. */
|
|
519
|
+
slotProps?: SlotPropsMap<BreadcrumbSeparatorSlot>;
|
|
520
|
+
}
|
|
521
|
+
type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, BreadcrumbSeparatorOwnProps>;
|
|
522
|
+
declare module '../../core/theme' {
|
|
523
|
+
interface ComponentThemeRegistry {
|
|
524
|
+
Breadcrumb: ComponentThemeConfig<BreadcrumbProps>;
|
|
525
|
+
BreadcrumbList: ComponentThemeConfig<BreadcrumbListProps>;
|
|
526
|
+
BreadcrumbItem: ComponentThemeConfig<BreadcrumbItemProps>;
|
|
527
|
+
BreadcrumbLink: ComponentThemeConfig<BreadcrumbLinkProps>;
|
|
528
|
+
BreadcrumbPage: ComponentThemeConfig<BreadcrumbPageProps>;
|
|
529
|
+
BreadcrumbSeparator: ComponentThemeConfig<BreadcrumbSeparatorProps>;
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
declare const Breadcrumb: {
|
|
534
|
+
<T extends react.ElementType = "nav">(props: BreadcrumbProps<T>): react.JSX.Element;
|
|
331
535
|
displayName: string;
|
|
536
|
+
} & {
|
|
537
|
+
List: {
|
|
538
|
+
<T extends react.ElementType = "ol">(props: BreadcrumbListProps<T>): react.JSX.Element;
|
|
539
|
+
displayName: string;
|
|
540
|
+
};
|
|
541
|
+
Item: {
|
|
542
|
+
<T extends react.ElementType = "li">(props: BreadcrumbItemProps<T>): react.JSX.Element;
|
|
543
|
+
displayName: string;
|
|
544
|
+
};
|
|
545
|
+
Link: {
|
|
546
|
+
<T extends react.ElementType = "a">(props: BreadcrumbLinkProps<T>): react.JSX.Element;
|
|
547
|
+
displayName: string;
|
|
548
|
+
};
|
|
549
|
+
Page: {
|
|
550
|
+
<T extends react.ElementType = "span">(props: BreadcrumbPageProps<T>): react.JSX.Element;
|
|
551
|
+
displayName: string;
|
|
552
|
+
};
|
|
553
|
+
Separator: {
|
|
554
|
+
<T extends react.ElementType = "li">(props: BreadcrumbSeparatorProps<T>): react.JSX.Element;
|
|
555
|
+
displayName: string;
|
|
556
|
+
};
|
|
332
557
|
};
|
|
333
558
|
|
|
334
559
|
type ButtonVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'white' | 'black';
|
|
@@ -368,6 +593,10 @@ interface ButtonOwnProps {
|
|
|
368
593
|
* Content rendered after children. Same shape as `startContent`.
|
|
369
594
|
*/
|
|
370
595
|
endContent?: ReactNode;
|
|
596
|
+
/** Whether the button shows a loading spinner. */
|
|
597
|
+
loading?: boolean;
|
|
598
|
+
/** Whether the button is pressed. When defined, creates a toggle button. */
|
|
599
|
+
pressed?: boolean;
|
|
371
600
|
/** Per-slot extra classes. */
|
|
372
601
|
classNames?: ClassNamesMap<ButtonSlot>;
|
|
373
602
|
/** Per-slot HTML-attribute overrides. */
|
|
@@ -378,7 +607,7 @@ interface ButtonOwnProps {
|
|
|
378
607
|
* link-styled buttons) — `as`, ref, and the native attributes of the rendered
|
|
379
608
|
* element are inherited from Spar's `PolymorphicProps`.
|
|
380
609
|
*/
|
|
381
|
-
type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, ButtonOwnProps & Pick<ButtonProps$1, '
|
|
610
|
+
type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, ButtonOwnProps & Pick<ButtonProps$1, 'onPressedChange'>>;
|
|
382
611
|
declare module '../../core/theme' {
|
|
383
612
|
interface ComponentThemeRegistry {
|
|
384
613
|
Button: ComponentThemeConfig<ButtonProps, ButtonSlot>;
|
|
@@ -386,12 +615,113 @@ declare module '../../core/theme' {
|
|
|
386
615
|
}
|
|
387
616
|
|
|
388
617
|
declare const Button: {
|
|
389
|
-
<T extends ElementType = "button">(props: ButtonProps<T>):
|
|
618
|
+
<T extends ElementType = "button">(props: ButtonProps<T>): react.JSX.Element;
|
|
619
|
+
displayName: string;
|
|
620
|
+
};
|
|
621
|
+
|
|
622
|
+
type CardHeaderType = 'basic' | 'divided' | 'light' | 'dark' | 'primary';
|
|
623
|
+
type CardFooterType = 'basic' | 'divided' | 'light';
|
|
624
|
+
type CardSlot = 'root';
|
|
625
|
+
type CardHeaderSlot = 'root';
|
|
626
|
+
type CardTitleSlot = 'root';
|
|
627
|
+
type CardDescriptionSlot = 'root';
|
|
628
|
+
type CardBodySlot = 'root';
|
|
629
|
+
type CardFooterSlot = 'root';
|
|
630
|
+
interface CardOwnProps {
|
|
631
|
+
/** Per-slot extra classes. */
|
|
632
|
+
classNames?: ClassNamesMap<CardSlot>;
|
|
633
|
+
/** Per-slot HTML-attribute overrides. */
|
|
634
|
+
slotProps?: SlotPropsMap<CardSlot>;
|
|
635
|
+
}
|
|
636
|
+
type CardProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardOwnProps>;
|
|
637
|
+
interface CardHeaderOwnProps {
|
|
638
|
+
/**
|
|
639
|
+
* Type of the header.
|
|
640
|
+
* @defaultValue 'basic'
|
|
641
|
+
*/
|
|
642
|
+
headerType?: CardHeaderType;
|
|
643
|
+
/** Per-slot extra classes. */
|
|
644
|
+
classNames?: ClassNamesMap<CardHeaderSlot>;
|
|
645
|
+
/** Per-slot HTML-attribute overrides. */
|
|
646
|
+
slotProps?: SlotPropsMap<CardHeaderSlot>;
|
|
647
|
+
}
|
|
648
|
+
type CardHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardHeaderOwnProps>;
|
|
649
|
+
interface CardTitleOwnProps {
|
|
650
|
+
/**
|
|
651
|
+
* Semantic heading level used when `as` is not provided.
|
|
652
|
+
* @defaultValue 5
|
|
653
|
+
*/
|
|
654
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
655
|
+
/** Per-slot extra classes. */
|
|
656
|
+
classNames?: ClassNamesMap<CardTitleSlot>;
|
|
657
|
+
/** Per-slot HTML-attribute overrides. */
|
|
658
|
+
slotProps?: SlotPropsMap<CardTitleSlot>;
|
|
659
|
+
}
|
|
660
|
+
type CardTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, CardTitleOwnProps>;
|
|
661
|
+
interface CardDescriptionOwnProps {
|
|
662
|
+
/** Per-slot extra classes. */
|
|
663
|
+
classNames?: ClassNamesMap<CardDescriptionSlot>;
|
|
664
|
+
/** Per-slot HTML-attribute overrides. */
|
|
665
|
+
slotProps?: SlotPropsMap<CardDescriptionSlot>;
|
|
666
|
+
}
|
|
667
|
+
type CardDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<'p', T, CardDescriptionOwnProps>;
|
|
668
|
+
interface CardBodyOwnProps {
|
|
669
|
+
/** Per-slot extra classes. */
|
|
670
|
+
classNames?: ClassNamesMap<CardBodySlot>;
|
|
671
|
+
/** Per-slot HTML-attribute overrides. */
|
|
672
|
+
slotProps?: SlotPropsMap<CardBodySlot>;
|
|
673
|
+
}
|
|
674
|
+
type CardBodyProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardBodyOwnProps>;
|
|
675
|
+
interface CardFooterOwnProps {
|
|
676
|
+
/**
|
|
677
|
+
* Type of the footer.
|
|
678
|
+
* @defaultValue 'basic'
|
|
679
|
+
*/
|
|
680
|
+
footerType?: CardFooterType;
|
|
681
|
+
/** Per-slot extra classes. */
|
|
682
|
+
classNames?: ClassNamesMap<CardFooterSlot>;
|
|
683
|
+
/** Per-slot HTML-attribute overrides. */
|
|
684
|
+
slotProps?: SlotPropsMap<CardFooterSlot>;
|
|
685
|
+
}
|
|
686
|
+
type CardFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardFooterOwnProps>;
|
|
687
|
+
declare module '../../core/theme' {
|
|
688
|
+
interface ComponentThemeRegistry {
|
|
689
|
+
Card: ComponentThemeConfig<CardProps, CardSlot>;
|
|
690
|
+
CardHeader: ComponentThemeConfig<CardHeaderProps, CardHeaderSlot>;
|
|
691
|
+
CardTitle: ComponentThemeConfig<CardTitleProps, CardTitleSlot>;
|
|
692
|
+
CardDescription: ComponentThemeConfig<CardDescriptionProps, CardDescriptionSlot>;
|
|
693
|
+
CardBody: ComponentThemeConfig<CardBodyProps, CardBodySlot>;
|
|
694
|
+
CardFooter: ComponentThemeConfig<CardFooterProps, CardFooterSlot>;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
declare const Card: {
|
|
699
|
+
<T extends react.ElementType = "div">(props: CardProps<T>): react.JSX.Element;
|
|
390
700
|
displayName: string;
|
|
701
|
+
} & {
|
|
702
|
+
Header: {
|
|
703
|
+
<T extends react.ElementType = "div">(props: CardHeaderProps<T>): react.JSX.Element;
|
|
704
|
+
displayName: string;
|
|
705
|
+
};
|
|
706
|
+
Title: {
|
|
707
|
+
<T extends react.ElementType = "h5">(props: CardTitleProps<T>): react.JSX.Element;
|
|
708
|
+
displayName: string;
|
|
709
|
+
};
|
|
710
|
+
Description: {
|
|
711
|
+
<T extends react.ElementType = "p">(props: CardDescriptionProps<T>): react.JSX.Element;
|
|
712
|
+
displayName: string;
|
|
713
|
+
};
|
|
714
|
+
Body: {
|
|
715
|
+
<T extends react.ElementType = "div">(props: CardBodyProps<T>): react.JSX.Element;
|
|
716
|
+
displayName: string;
|
|
717
|
+
};
|
|
718
|
+
Footer: {
|
|
719
|
+
<T extends react.ElementType = "div">(props: CardFooterProps<T>): react.JSX.Element;
|
|
720
|
+
displayName: string;
|
|
721
|
+
};
|
|
391
722
|
};
|
|
392
723
|
|
|
393
724
|
type CheckboxSize = 'small' | 'base';
|
|
394
|
-
type CheckboxType = 'default' | 'card';
|
|
395
725
|
type CheckboxSlot = 'root' | 'indicator' | 'icon';
|
|
396
726
|
/**
|
|
397
727
|
* Render props passed to the root `Checkbox` render-prop child. Re-exports
|
|
@@ -447,12 +777,6 @@ interface CheckboxOwnProps {
|
|
|
447
777
|
* @defaultValue 'base'
|
|
448
778
|
*/
|
|
449
779
|
size?: CheckboxSize;
|
|
450
|
-
/**
|
|
451
|
-
* Visual appearance. `'card'` mirrors Takeoff Core's bordered card variant
|
|
452
|
-
* for opt-in card-style selection rows.
|
|
453
|
-
* @defaultValue 'default'
|
|
454
|
-
*/
|
|
455
|
-
type?: CheckboxType;
|
|
456
780
|
/** Per-slot extra classes. */
|
|
457
781
|
classNames?: ClassNamesMap<CheckboxSlot>;
|
|
458
782
|
/** Per-slot HTML-attribute overrides. */
|
|
@@ -489,15 +813,85 @@ declare module '../../core/theme' {
|
|
|
489
813
|
}
|
|
490
814
|
|
|
491
815
|
declare const Checkbox: {
|
|
492
|
-
<T extends react.ElementType = "span">(props: CheckboxProps<T>):
|
|
816
|
+
<T extends react.ElementType = "span">(props: CheckboxProps<T>): react.JSX.Element;
|
|
493
817
|
displayName: string;
|
|
494
818
|
} & {
|
|
495
819
|
Indicator: {
|
|
496
|
-
(props: CheckboxIndicatorProps):
|
|
820
|
+
(props: CheckboxIndicatorProps): react.JSX.Element;
|
|
497
821
|
displayName: string;
|
|
498
822
|
};
|
|
499
823
|
};
|
|
500
824
|
|
|
825
|
+
type ChipVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'verified' | 'purple' | 'cyan' | 'business' | 'teal' | 'white' | 'dark';
|
|
826
|
+
type ChipAppearance = 'filled' | 'filledLight' | 'outlined';
|
|
827
|
+
type ChipSize = 'small' | 'base' | 'large';
|
|
828
|
+
type ChipSlot = 'root' | 'label' | 'remove';
|
|
829
|
+
interface ChipProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
830
|
+
/**
|
|
831
|
+
* Color variant.
|
|
832
|
+
* @defaultValue 'primary'
|
|
833
|
+
*/
|
|
834
|
+
variant?: ChipVariant;
|
|
835
|
+
/**
|
|
836
|
+
* Visual appearance.
|
|
837
|
+
* @defaultValue 'filled'
|
|
838
|
+
*/
|
|
839
|
+
appearance?: ChipAppearance;
|
|
840
|
+
/**
|
|
841
|
+
* Size scale.
|
|
842
|
+
* @defaultValue 'base'
|
|
843
|
+
*/
|
|
844
|
+
size?: ChipSize;
|
|
845
|
+
/**
|
|
846
|
+
* Disables interactive affordances and remove actions.
|
|
847
|
+
* @defaultValue false
|
|
848
|
+
*/
|
|
849
|
+
disabled?: boolean;
|
|
850
|
+
/**
|
|
851
|
+
* Renders a remove button that dismisses the chip from the DOM when pressed.
|
|
852
|
+
* @defaultValue false
|
|
853
|
+
*/
|
|
854
|
+
removable?: boolean;
|
|
855
|
+
/**
|
|
856
|
+
* Makes the chip root keyboard-focusable and button-like for click actions.
|
|
857
|
+
* @defaultValue false
|
|
858
|
+
*/
|
|
859
|
+
clickable?: boolean;
|
|
860
|
+
/**
|
|
861
|
+
* Whether the chip removes itself from the DOM after a remove action.
|
|
862
|
+
*
|
|
863
|
+
* Removal is tracked in internal state, so set `autoDismiss={false}` when the
|
|
864
|
+
* parent owns the chip list (e.g. renders chips from an array) and let
|
|
865
|
+
* `onRemove` drive the parent's state — otherwise the chip and the parent's
|
|
866
|
+
* list become two sources of truth.
|
|
867
|
+
* @defaultValue true
|
|
868
|
+
*/
|
|
869
|
+
autoDismiss?: boolean;
|
|
870
|
+
/**
|
|
871
|
+
* Called when the remove button is pressed or a focused clickable chip
|
|
872
|
+
* receives Backspace/Delete.
|
|
873
|
+
*/
|
|
874
|
+
onRemove?: () => void;
|
|
875
|
+
/** Chip content. */
|
|
876
|
+
children?: ReactNode;
|
|
877
|
+
/** Ref forwarded to the root span element. */
|
|
878
|
+
ref?: Ref<HTMLSpanElement>;
|
|
879
|
+
/** Per-slot extra classes. */
|
|
880
|
+
classNames?: ClassNamesMap<ChipSlot>;
|
|
881
|
+
/** Per-slot HTML-attribute overrides. */
|
|
882
|
+
slotProps?: SlotPropsMap<ChipSlot>;
|
|
883
|
+
}
|
|
884
|
+
declare module '../../core/theme' {
|
|
885
|
+
interface ComponentThemeRegistry {
|
|
886
|
+
Chip: ComponentThemeConfig<ChipProps, ChipSlot>;
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
declare const Chip: {
|
|
891
|
+
(props: ChipProps): react.JSX.Element | null;
|
|
892
|
+
displayName: string;
|
|
893
|
+
};
|
|
894
|
+
|
|
501
895
|
/**
|
|
502
896
|
* Side from which the drawer slides in.
|
|
503
897
|
* @defaultValue 'right'
|
|
@@ -510,7 +904,7 @@ type DrawerTitleSlot = 'root';
|
|
|
510
904
|
type DrawerDescriptionSlot = 'root';
|
|
511
905
|
type DrawerBodySlot = 'root';
|
|
512
906
|
type DrawerFooterSlot = 'root';
|
|
513
|
-
type
|
|
907
|
+
type DrawerCloseSlot = 'root';
|
|
514
908
|
/**
|
|
515
909
|
* Public props for the Drawer root. Wraps Spar's Dialog in modal mode to
|
|
516
910
|
* create a slide-in side panel. State-only — renders no DOM, so no
|
|
@@ -518,28 +912,30 @@ type DrawerCloseButtonSlot = 'root';
|
|
|
518
912
|
* `slotProps` (state-driven styling lives on the Panel/Overlay/Header
|
|
519
913
|
* children, which read shared values from context).
|
|
520
914
|
*/
|
|
521
|
-
interface DrawerProps extends Pick<DialogProps, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'> {
|
|
915
|
+
interface DrawerProps extends Pick<DialogProps$1, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'> {
|
|
522
916
|
/** Side the drawer slides in from. */
|
|
523
917
|
placement?: DrawerPlacement;
|
|
524
918
|
/** Whether the drawer can be dismissed by clicking outside or pressing Escape. @defaultValue true */
|
|
525
|
-
|
|
919
|
+
dismissible?: boolean;
|
|
526
920
|
children?: ReactNode;
|
|
527
921
|
}
|
|
528
922
|
interface DrawerTriggerOwnProps {
|
|
529
923
|
classNames?: ClassNamesMap<'root'>;
|
|
530
924
|
slotProps?: SlotPropsMap<'root'>;
|
|
531
925
|
}
|
|
532
|
-
type DrawerTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerTriggerOwnProps & Pick<DialogTriggerProps, 'children'>>;
|
|
926
|
+
type DrawerTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerTriggerOwnProps & Pick<DialogTriggerProps$1, 'children'>>;
|
|
533
927
|
type DrawerOverlayIntensity = 'lightest' | 'light' | 'base' | 'dark' | 'darkest';
|
|
534
928
|
interface DrawerOverlayOwnProps {
|
|
535
929
|
/** When true, the overlay is rendered but visually invisible. @defaultValue false */
|
|
536
930
|
invisible?: boolean;
|
|
537
931
|
/** Overlay backdrop intensity. @defaultValue 'base' */
|
|
538
932
|
intensity?: DrawerOverlayIntensity;
|
|
933
|
+
/** Applies backdrop blur on the overlay. @defaultValue false */
|
|
934
|
+
blur?: boolean;
|
|
539
935
|
classNames?: ClassNamesMap<DrawerOverlaySlot>;
|
|
540
936
|
slotProps?: SlotPropsMap<DrawerOverlaySlot>;
|
|
541
937
|
}
|
|
542
|
-
type DrawerOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerOverlayOwnProps & Pick<DialogOverlayProps, 'container'>>;
|
|
938
|
+
type DrawerOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerOverlayOwnProps & Pick<DialogOverlayProps$1, 'container'>>;
|
|
543
939
|
interface DrawerPanelOwnProps {
|
|
544
940
|
classNames?: ClassNamesMap<DrawerPanelSlot>;
|
|
545
941
|
slotProps?: SlotPropsMap<DrawerPanelSlot>;
|
|
@@ -557,7 +953,7 @@ interface DrawerTitleOwnProps {
|
|
|
557
953
|
classNames?: ClassNamesMap<DrawerTitleSlot>;
|
|
558
954
|
slotProps?: SlotPropsMap<DrawerTitleSlot>;
|
|
559
955
|
}
|
|
560
|
-
type DrawerTitleProps<T extends ElementType = '
|
|
956
|
+
type DrawerTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, DrawerTitleOwnProps & Pick<DialogTitleProps$1, 'level'>>;
|
|
561
957
|
interface DrawerDescriptionOwnProps {
|
|
562
958
|
classNames?: ClassNamesMap<DrawerDescriptionSlot>;
|
|
563
959
|
slotProps?: SlotPropsMap<DrawerDescriptionSlot>;
|
|
@@ -576,11 +972,11 @@ interface DrawerFooterOwnProps {
|
|
|
576
972
|
slotProps?: SlotPropsMap<DrawerFooterSlot>;
|
|
577
973
|
}
|
|
578
974
|
type DrawerFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerFooterOwnProps>;
|
|
579
|
-
interface
|
|
580
|
-
classNames?: ClassNamesMap<
|
|
581
|
-
slotProps?: SlotPropsMap<
|
|
975
|
+
interface DrawerCloseOwnProps {
|
|
976
|
+
classNames?: ClassNamesMap<DrawerCloseSlot>;
|
|
977
|
+
slotProps?: SlotPropsMap<DrawerCloseSlot>;
|
|
582
978
|
}
|
|
583
|
-
type
|
|
979
|
+
type DrawerCloseProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerCloseOwnProps & Pick<DialogCloseProps$1, 'children'>>;
|
|
584
980
|
declare module '../../core/theme' {
|
|
585
981
|
interface ComponentThemeRegistry {
|
|
586
982
|
Drawer: StateOnlyComponentThemeConfig<DrawerProps>;
|
|
@@ -592,116 +988,454 @@ declare module '../../core/theme' {
|
|
|
592
988
|
DrawerDescription: ComponentThemeConfig<DrawerDescriptionProps>;
|
|
593
989
|
DrawerBody: ComponentThemeConfig<DrawerBodyProps>;
|
|
594
990
|
DrawerFooter: ComponentThemeConfig<DrawerFooterProps>;
|
|
595
|
-
|
|
991
|
+
DrawerClose: ComponentThemeConfig<DrawerCloseProps>;
|
|
596
992
|
}
|
|
597
993
|
}
|
|
598
994
|
|
|
599
995
|
declare const Drawer: {
|
|
600
|
-
(props: DrawerProps):
|
|
996
|
+
(props: DrawerProps): react.JSX.Element;
|
|
601
997
|
displayName: string;
|
|
602
998
|
} & {
|
|
603
999
|
Trigger: {
|
|
604
|
-
<T extends react.ElementType = "button">(props: DrawerTriggerProps<T>):
|
|
1000
|
+
<T extends react.ElementType = "button">(props: DrawerTriggerProps<T>): react.JSX.Element;
|
|
605
1001
|
displayName: string;
|
|
606
1002
|
};
|
|
607
1003
|
Overlay: {
|
|
608
|
-
<T extends react.ElementType = "div">(props: DrawerOverlayProps<T>):
|
|
1004
|
+
<T extends react.ElementType = "div">(props: DrawerOverlayProps<T>): react.JSX.Element;
|
|
609
1005
|
displayName: string;
|
|
610
1006
|
};
|
|
611
1007
|
Panel: {
|
|
612
|
-
<T extends react.ElementType = "div">(props: DrawerPanelProps<T>):
|
|
1008
|
+
<T extends react.ElementType = "div">(props: DrawerPanelProps<T>): react.JSX.Element;
|
|
613
1009
|
displayName: string;
|
|
614
1010
|
};
|
|
615
1011
|
Header: {
|
|
616
|
-
<T extends react.ElementType = "div">(props: DrawerHeaderProps<T>):
|
|
1012
|
+
<T extends react.ElementType = "div">(props: DrawerHeaderProps<T>): react.JSX.Element;
|
|
617
1013
|
displayName: string;
|
|
618
1014
|
};
|
|
619
1015
|
Title: {
|
|
620
|
-
<T extends react.ElementType = "
|
|
1016
|
+
<T extends react.ElementType = "h5">(props: DrawerTitleProps<T>): react.JSX.Element;
|
|
621
1017
|
displayName: string;
|
|
622
1018
|
};
|
|
623
1019
|
Description: {
|
|
624
|
-
<T extends react.ElementType = "p">(props: DrawerDescriptionProps<T>):
|
|
1020
|
+
<T extends react.ElementType = "p">(props: DrawerDescriptionProps<T>): react.JSX.Element;
|
|
625
1021
|
displayName: string;
|
|
626
1022
|
};
|
|
627
1023
|
Body: {
|
|
628
|
-
<T extends react.ElementType = "div">(props: DrawerBodyProps<T>):
|
|
1024
|
+
<T extends react.ElementType = "div">(props: DrawerBodyProps<T>): react.JSX.Element;
|
|
629
1025
|
displayName: string;
|
|
630
1026
|
};
|
|
631
1027
|
Footer: {
|
|
632
|
-
<T extends react.ElementType = "div">(props: DrawerFooterProps<T>):
|
|
1028
|
+
<T extends react.ElementType = "div">(props: DrawerFooterProps<T>): react.JSX.Element;
|
|
633
1029
|
displayName: string;
|
|
634
1030
|
};
|
|
635
|
-
|
|
636
|
-
<T extends react.ElementType = "button">(props:
|
|
1031
|
+
Close: {
|
|
1032
|
+
<T extends react.ElementType = "button">(props: DrawerCloseProps<T>): react.JSX.Element;
|
|
637
1033
|
displayName: string;
|
|
638
1034
|
};
|
|
639
1035
|
};
|
|
640
1036
|
|
|
641
|
-
type
|
|
642
|
-
type
|
|
643
|
-
type
|
|
644
|
-
type
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
1037
|
+
type DialogTriggerSlot = 'root';
|
|
1038
|
+
type DialogOverlaySlot = 'root';
|
|
1039
|
+
type DialogPanelSlot = 'root';
|
|
1040
|
+
type DialogHeaderSlot = 'root';
|
|
1041
|
+
type DialogTitleSlot = 'root';
|
|
1042
|
+
type DialogDescriptionSlot = 'root';
|
|
1043
|
+
type DialogBodySlot = 'root';
|
|
1044
|
+
type DialogFooterSlot = 'root';
|
|
1045
|
+
type DialogCloseSlot = 'root';
|
|
1046
|
+
type DialogOverlayIntensity = 'lightest' | 'light' | 'base' | 'dark' | 'darkest';
|
|
1047
|
+
type DialogHeaderType = 'basic' | 'divided' | 'light' | 'dark' | 'primary';
|
|
1048
|
+
type DialogFooterType = 'basic' | 'divided' | 'light';
|
|
649
1049
|
/**
|
|
650
|
-
* Public props for the
|
|
651
|
-
*
|
|
652
|
-
* text, and error message slots.
|
|
1050
|
+
* Public props for the Dialog root. State-only — renders no DOM, so no
|
|
1051
|
+
* polymorphic `as` and no native HTML props.
|
|
653
1052
|
*/
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
slotProps?: SlotPropsMap<FieldLabelSlot>;
|
|
1053
|
+
interface DialogProps extends Pick<DialogProps$1, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal' | 'disabled' | 'forceMount' | 'children'> {
|
|
1054
|
+
/** Whether the dialog can be dismissed by clicking outside or pressing Escape. @defaultValue true */
|
|
1055
|
+
dismissible?: boolean;
|
|
658
1056
|
}
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
slotProps?: SlotPropsMap<FieldDescriptionSlot>;
|
|
1057
|
+
interface DialogTriggerOwnProps {
|
|
1058
|
+
classNames?: ClassNamesMap<DialogTriggerSlot>;
|
|
1059
|
+
slotProps?: SlotPropsMap<DialogTriggerSlot>;
|
|
663
1060
|
}
|
|
664
|
-
type
|
|
665
|
-
interface
|
|
666
|
-
|
|
667
|
-
|
|
1061
|
+
type DialogTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DialogTriggerOwnProps & Pick<DialogTriggerProps$1, 'children'>>;
|
|
1062
|
+
interface DialogOverlayOwnProps {
|
|
1063
|
+
/** When true, the overlay is rendered but visually invisible. @defaultValue false */
|
|
1064
|
+
invisible?: boolean;
|
|
1065
|
+
/** Overlay backdrop intensity. @defaultValue 'base' */
|
|
1066
|
+
intensity?: DialogOverlayIntensity;
|
|
1067
|
+
/** Applies backdrop blur on the overlay. @defaultValue false */
|
|
1068
|
+
blur?: boolean;
|
|
1069
|
+
classNames?: ClassNamesMap<DialogOverlaySlot>;
|
|
1070
|
+
slotProps?: SlotPropsMap<DialogOverlaySlot>;
|
|
1071
|
+
}
|
|
1072
|
+
type DialogOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogOverlayOwnProps & Pick<DialogOverlayProps$1, 'container'>>;
|
|
1073
|
+
interface DialogPanelOwnProps {
|
|
1074
|
+
classNames?: ClassNamesMap<DialogPanelSlot>;
|
|
1075
|
+
slotProps?: SlotPropsMap<DialogPanelSlot>;
|
|
1076
|
+
}
|
|
1077
|
+
type DialogPanelProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogPanelOwnProps & Pick<DialogContentProps, 'role' | 'container' | 'trapFocus' | 'restoreFocus' | 'initialFocus' | 'finalFocus' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'>>;
|
|
1078
|
+
interface DialogTitleOwnProps {
|
|
1079
|
+
classNames?: ClassNamesMap<DialogTitleSlot>;
|
|
1080
|
+
slotProps?: SlotPropsMap<DialogTitleSlot>;
|
|
1081
|
+
}
|
|
1082
|
+
interface DialogHeaderOwnProps {
|
|
1083
|
+
/** Type of the header. @defaultValue 'basic' */
|
|
1084
|
+
headerType?: DialogHeaderType;
|
|
1085
|
+
classNames?: ClassNamesMap<DialogHeaderSlot>;
|
|
1086
|
+
slotProps?: SlotPropsMap<DialogHeaderSlot>;
|
|
1087
|
+
}
|
|
1088
|
+
type DialogHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogHeaderOwnProps>;
|
|
1089
|
+
type DialogTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, DialogTitleOwnProps & Pick<DialogTitleProps$1, 'level'>>;
|
|
1090
|
+
interface DialogDescriptionOwnProps {
|
|
1091
|
+
classNames?: ClassNamesMap<DialogDescriptionSlot>;
|
|
1092
|
+
slotProps?: SlotPropsMap<DialogDescriptionSlot>;
|
|
1093
|
+
}
|
|
1094
|
+
type DialogDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<'p', T, DialogDescriptionOwnProps>;
|
|
1095
|
+
interface DialogBodyOwnProps {
|
|
1096
|
+
classNames?: ClassNamesMap<DialogBodySlot>;
|
|
1097
|
+
slotProps?: SlotPropsMap<DialogBodySlot>;
|
|
1098
|
+
}
|
|
1099
|
+
type DialogBodyProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogBodyOwnProps>;
|
|
1100
|
+
interface DialogFooterOwnProps {
|
|
1101
|
+
/** Type of the footer. @defaultValue 'basic' */
|
|
1102
|
+
footerType?: DialogFooterType;
|
|
1103
|
+
classNames?: ClassNamesMap<DialogFooterSlot>;
|
|
1104
|
+
slotProps?: SlotPropsMap<DialogFooterSlot>;
|
|
668
1105
|
}
|
|
669
|
-
type
|
|
1106
|
+
type DialogFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogFooterOwnProps>;
|
|
1107
|
+
interface DialogCloseOwnProps {
|
|
1108
|
+
classNames?: ClassNamesMap<DialogCloseSlot>;
|
|
1109
|
+
slotProps?: SlotPropsMap<DialogCloseSlot>;
|
|
1110
|
+
}
|
|
1111
|
+
type DialogCloseProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DialogCloseOwnProps & Pick<DialogCloseProps$1, 'children'>>;
|
|
670
1112
|
declare module '../../core/theme' {
|
|
671
1113
|
interface ComponentThemeRegistry {
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
1114
|
+
Dialog: StateOnlyComponentThemeConfig<DialogProps>;
|
|
1115
|
+
DialogTrigger: ComponentThemeConfig<DialogTriggerProps, DialogTriggerSlot>;
|
|
1116
|
+
DialogOverlay: ComponentThemeConfig<DialogOverlayProps, DialogOverlaySlot>;
|
|
1117
|
+
DialogPanel: ComponentThemeConfig<DialogPanelProps, DialogPanelSlot>;
|
|
1118
|
+
DialogHeader: ComponentThemeConfig<DialogHeaderProps, DialogHeaderSlot>;
|
|
1119
|
+
DialogTitle: ComponentThemeConfig<DialogTitleProps, DialogTitleSlot>;
|
|
1120
|
+
DialogDescription: ComponentThemeConfig<DialogDescriptionProps, DialogDescriptionSlot>;
|
|
1121
|
+
DialogBody: ComponentThemeConfig<DialogBodyProps, DialogBodySlot>;
|
|
1122
|
+
DialogFooter: ComponentThemeConfig<DialogFooterProps, DialogFooterSlot>;
|
|
1123
|
+
DialogClose: ComponentThemeConfig<DialogCloseProps, DialogCloseSlot>;
|
|
676
1124
|
}
|
|
677
1125
|
}
|
|
678
1126
|
|
|
679
|
-
declare const
|
|
680
|
-
|
|
1127
|
+
declare const Dialog: {
|
|
1128
|
+
(props: DialogProps): react.JSX.Element;
|
|
681
1129
|
displayName: string;
|
|
682
1130
|
} & {
|
|
683
|
-
|
|
684
|
-
<T extends react.ElementType = "
|
|
1131
|
+
Trigger: {
|
|
1132
|
+
<T extends react.ElementType = "button">(props: DialogTriggerProps<T>): react.JSX.Element;
|
|
1133
|
+
displayName: string;
|
|
1134
|
+
};
|
|
1135
|
+
Overlay: {
|
|
1136
|
+
<T extends react.ElementType = "div">(props: DialogOverlayProps<T>): react.JSX.Element;
|
|
1137
|
+
displayName: string;
|
|
1138
|
+
};
|
|
1139
|
+
Panel: {
|
|
1140
|
+
<T extends react.ElementType = "div">(props: DialogPanelProps<T>): react.JSX.Element;
|
|
1141
|
+
displayName: string;
|
|
1142
|
+
};
|
|
1143
|
+
Header: {
|
|
1144
|
+
<T extends react.ElementType = "div">(props: DialogHeaderProps<T>): react.JSX.Element;
|
|
1145
|
+
displayName: string;
|
|
1146
|
+
};
|
|
1147
|
+
Title: {
|
|
1148
|
+
<T extends react.ElementType = "h5">(props: DialogTitleProps<T>): react.JSX.Element;
|
|
685
1149
|
displayName: string;
|
|
686
1150
|
};
|
|
687
1151
|
Description: {
|
|
688
|
-
<T extends react.ElementType = "
|
|
1152
|
+
<T extends react.ElementType = "p">(props: DialogDescriptionProps<T>): react.JSX.Element;
|
|
689
1153
|
displayName: string;
|
|
690
1154
|
};
|
|
691
|
-
|
|
692
|
-
<T extends react.ElementType = "div">(props:
|
|
1155
|
+
Body: {
|
|
1156
|
+
<T extends react.ElementType = "div">(props: DialogBodyProps<T>): react.JSX.Element;
|
|
1157
|
+
displayName: string;
|
|
1158
|
+
};
|
|
1159
|
+
Footer: {
|
|
1160
|
+
<T extends react.ElementType = "div">(props: DialogFooterProps<T>): react.JSX.Element;
|
|
1161
|
+
displayName: string;
|
|
1162
|
+
};
|
|
1163
|
+
Close: {
|
|
1164
|
+
<T extends react.ElementType = "button">(props: DialogCloseProps<T>): react.JSX.Element;
|
|
693
1165
|
displayName: string;
|
|
694
1166
|
};
|
|
695
1167
|
};
|
|
696
1168
|
|
|
697
|
-
type
|
|
698
|
-
type
|
|
699
|
-
type
|
|
700
|
-
type
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
1169
|
+
type DividerOrientation = 'horizontal' | 'vertical';
|
|
1170
|
+
type DividerAppearance = 'solid' | 'dashed' | 'dotted';
|
|
1171
|
+
type DividerAlign = 'start' | 'center' | 'end';
|
|
1172
|
+
type DividerSlot = 'root' | 'label';
|
|
1173
|
+
interface DividerProps extends Omit<TakeoffHTMLProps<'div'>, 'children' | 'role' | 'aria-orientation'> {
|
|
1174
|
+
/**
|
|
1175
|
+
* Axis of the divider line. Vertical dividers size from their container —
|
|
1176
|
+
* place them in a flex row (or give the parent an explicit height) so the
|
|
1177
|
+
* line has a height to fill.
|
|
1178
|
+
* @defaultValue 'horizontal'
|
|
1179
|
+
*/
|
|
1180
|
+
orientation?: DividerOrientation;
|
|
1181
|
+
/**
|
|
1182
|
+
* Line style.
|
|
1183
|
+
* @defaultValue 'solid'
|
|
1184
|
+
*/
|
|
1185
|
+
appearance?: DividerAppearance;
|
|
1186
|
+
/**
|
|
1187
|
+
* Placement of the label along the divider line.
|
|
1188
|
+
* @defaultValue 'center'
|
|
1189
|
+
*/
|
|
1190
|
+
align?: DividerAlign;
|
|
1191
|
+
/**
|
|
1192
|
+
* Marks the divider as purely visual. Decorative dividers are removed from
|
|
1193
|
+
* the accessibility tree (`role="none"`); non-decorative dividers render
|
|
1194
|
+
* `role="separator"` with the matching `aria-orientation`.
|
|
1195
|
+
* @defaultValue false
|
|
1196
|
+
*/
|
|
1197
|
+
decorative?: boolean;
|
|
1198
|
+
/**
|
|
1199
|
+
* Label content rendered between the line segments. The ARIA `separator`
|
|
1200
|
+
* role does not take its accessible name from content — pass `aria-label`
|
|
1201
|
+
* when the separator needs a name.
|
|
1202
|
+
*/
|
|
1203
|
+
children?: ReactNode;
|
|
1204
|
+
/** Ref forwarded to the root div element. */
|
|
1205
|
+
ref?: Ref<HTMLDivElement>;
|
|
1206
|
+
/** Per-slot extra classes. */
|
|
1207
|
+
classNames?: ClassNamesMap<DividerSlot>;
|
|
1208
|
+
/** Per-slot HTML-attribute overrides. */
|
|
1209
|
+
slotProps?: SlotPropsMap<DividerSlot>;
|
|
1210
|
+
}
|
|
1211
|
+
declare module '../../core/theme' {
|
|
1212
|
+
interface ComponentThemeRegistry {
|
|
1213
|
+
Divider: ComponentThemeConfig<DividerProps, DividerSlot>;
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
declare const Divider: {
|
|
1218
|
+
(props: DividerProps): react.JSX.Element;
|
|
1219
|
+
displayName: string;
|
|
1220
|
+
};
|
|
1221
|
+
|
|
1222
|
+
type DropdownSize = 'small' | 'base' | 'large';
|
|
1223
|
+
/**
|
|
1224
|
+
* Controls the panel's render width.
|
|
1225
|
+
*
|
|
1226
|
+
* - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
|
|
1227
|
+
* - `'trigger'`: panel matches the trigger's measured width
|
|
1228
|
+
* - `number`: explicit pixel width
|
|
1229
|
+
* - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
|
|
1230
|
+
*/
|
|
1231
|
+
type DropdownContentWidth = 'content' | 'trigger' | number | string;
|
|
1232
|
+
type DropdownTriggerSlot = 'root';
|
|
1233
|
+
type DropdownContentSlot = 'root';
|
|
1234
|
+
type DropdownViewportSlot = 'root';
|
|
1235
|
+
type DropdownItemSlot = 'root';
|
|
1236
|
+
type DropdownGroupSlot = 'root';
|
|
1237
|
+
type DropdownLabelSlot = 'root';
|
|
1238
|
+
type DropdownSeparatorSlot = 'root';
|
|
1239
|
+
type DropdownArrowSlot = 'root';
|
|
1240
|
+
interface DropdownOwnProps {
|
|
1241
|
+
/**
|
|
1242
|
+
* Size scale for the menu content and items.
|
|
1243
|
+
* @defaultValue 'base'
|
|
1244
|
+
*/
|
|
1245
|
+
size?: DropdownSize;
|
|
1246
|
+
/**
|
|
1247
|
+
* How the portalled Dropdown.Content panel computes its width. See
|
|
1248
|
+
* {@link DropdownContentWidth}.
|
|
1249
|
+
* @defaultValue 'content'
|
|
1250
|
+
*/
|
|
1251
|
+
contentWidth?: DropdownContentWidth;
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* Public props for the Dropdown root. State-only — renders no DOM, so no
|
|
1255
|
+
* polymorphic `as` and no native HTML props.
|
|
1256
|
+
*/
|
|
1257
|
+
type DropdownProps = DropdownOwnProps & Pick<DropdownMenuProps, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal' | 'disabled' | 'closeOnSelect' | 'children'>;
|
|
1258
|
+
interface DropdownTriggerOwnProps {
|
|
1259
|
+
/** Per-slot class name overrides. */
|
|
1260
|
+
classNames?: ClassNamesMap<DropdownTriggerSlot>;
|
|
1261
|
+
/** Per-slot HTML attribute overrides. */
|
|
1262
|
+
slotProps?: SlotPropsMap<DropdownTriggerSlot>;
|
|
1263
|
+
}
|
|
1264
|
+
type DropdownTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DropdownTriggerOwnProps & Pick<DropdownMenuTriggerProps, 'children'>>;
|
|
1265
|
+
interface DropdownContentOwnProps {
|
|
1266
|
+
/** Per-slot class name overrides. */
|
|
1267
|
+
classNames?: ClassNamesMap<DropdownContentSlot>;
|
|
1268
|
+
/** Per-slot HTML attribute overrides. */
|
|
1269
|
+
slotProps?: SlotPropsMap<DropdownContentSlot>;
|
|
1270
|
+
}
|
|
1271
|
+
type DropdownContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownContentOwnProps & Pick<DropdownMenuContentProps, 'side' | 'align' | 'container' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onFocusOutside'>>;
|
|
1272
|
+
interface DropdownViewportOwnProps {
|
|
1273
|
+
/** Per-slot class name overrides. */
|
|
1274
|
+
classNames?: ClassNamesMap<DropdownViewportSlot>;
|
|
1275
|
+
/** Per-slot HTML attribute overrides. */
|
|
1276
|
+
slotProps?: SlotPropsMap<DropdownViewportSlot>;
|
|
1277
|
+
}
|
|
1278
|
+
type DropdownViewportProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownViewportOwnProps & Pick<DropdownMenuViewportProps, 'children'>>;
|
|
1279
|
+
interface DropdownItemOwnProps {
|
|
1280
|
+
/** Per-slot class name overrides. */
|
|
1281
|
+
classNames?: ClassNamesMap<DropdownItemSlot>;
|
|
1282
|
+
/** Per-slot HTML attribute overrides. */
|
|
1283
|
+
slotProps?: SlotPropsMap<DropdownItemSlot>;
|
|
1284
|
+
}
|
|
1285
|
+
type DropdownItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownItemOwnProps & Pick<DropdownMenuItemProps, 'disabled' | 'onSelect' | 'textValue'>>;
|
|
1286
|
+
interface DropdownGroupOwnProps {
|
|
1287
|
+
/** Per-slot class name overrides. */
|
|
1288
|
+
classNames?: ClassNamesMap<DropdownGroupSlot>;
|
|
1289
|
+
/** Per-slot HTML attribute overrides. */
|
|
1290
|
+
slotProps?: SlotPropsMap<DropdownGroupSlot>;
|
|
1291
|
+
}
|
|
1292
|
+
type DropdownGroupProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownGroupOwnProps & Pick<DropdownMenuGroupProps, 'children'>>;
|
|
1293
|
+
interface DropdownLabelOwnProps {
|
|
1294
|
+
/** Per-slot class name overrides. */
|
|
1295
|
+
classNames?: ClassNamesMap<DropdownLabelSlot>;
|
|
1296
|
+
/** Per-slot HTML attribute overrides. */
|
|
1297
|
+
slotProps?: SlotPropsMap<DropdownLabelSlot>;
|
|
1298
|
+
}
|
|
1299
|
+
type DropdownLabelProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownLabelOwnProps & Pick<DropdownMenuLabelProps, 'children'>>;
|
|
1300
|
+
interface DropdownSeparatorOwnProps {
|
|
1301
|
+
/** Per-slot class name overrides. */
|
|
1302
|
+
classNames?: ClassNamesMap<DropdownSeparatorSlot>;
|
|
1303
|
+
/** Per-slot HTML attribute overrides. */
|
|
1304
|
+
slotProps?: SlotPropsMap<DropdownSeparatorSlot>;
|
|
1305
|
+
}
|
|
1306
|
+
type DropdownSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownSeparatorOwnProps & Pick<DropdownMenuSeparatorProps, 'children'>>;
|
|
1307
|
+
interface DropdownArrowOwnProps {
|
|
1308
|
+
/** Per-slot class name overrides. */
|
|
1309
|
+
classNames?: ClassNamesMap<DropdownArrowSlot>;
|
|
1310
|
+
/** Per-slot HTML attribute overrides. */
|
|
1311
|
+
slotProps?: SlotPropsMap<DropdownArrowSlot>;
|
|
1312
|
+
}
|
|
1313
|
+
type DropdownArrowProps<T extends ElementType = 'svg'> = PolymorphicProps<'svg', T, DropdownArrowOwnProps & Pick<DropdownMenuArrowProps, 'children'>>;
|
|
1314
|
+
declare module '../../core/theme' {
|
|
1315
|
+
interface ComponentThemeRegistry {
|
|
1316
|
+
Dropdown: StateOnlyComponentThemeConfig<DropdownProps>;
|
|
1317
|
+
DropdownTrigger: ComponentThemeConfig<DropdownTriggerProps, DropdownTriggerSlot>;
|
|
1318
|
+
DropdownContent: ComponentThemeConfig<DropdownContentProps, DropdownContentSlot>;
|
|
1319
|
+
DropdownViewport: ComponentThemeConfig<DropdownViewportProps, DropdownViewportSlot>;
|
|
1320
|
+
DropdownItem: ComponentThemeConfig<DropdownItemProps, DropdownItemSlot>;
|
|
1321
|
+
DropdownGroup: ComponentThemeConfig<DropdownGroupProps, DropdownGroupSlot>;
|
|
1322
|
+
DropdownLabel: ComponentThemeConfig<DropdownLabelProps, DropdownLabelSlot>;
|
|
1323
|
+
DropdownSeparator: ComponentThemeConfig<DropdownSeparatorProps, DropdownSeparatorSlot>;
|
|
1324
|
+
DropdownArrow: ComponentThemeConfig<DropdownArrowProps, DropdownArrowSlot>;
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
declare const Dropdown: {
|
|
1329
|
+
(props: DropdownProps): react.JSX.Element;
|
|
1330
|
+
displayName: string;
|
|
1331
|
+
} & {
|
|
1332
|
+
Trigger: {
|
|
1333
|
+
<T extends react.ElementType = "button">(props: DropdownTriggerProps<T>): react.JSX.Element;
|
|
1334
|
+
displayName: string;
|
|
1335
|
+
};
|
|
1336
|
+
Content: {
|
|
1337
|
+
<T extends react.ElementType = "div">(props: DropdownContentProps<T>): react.JSX.Element;
|
|
1338
|
+
displayName: string;
|
|
1339
|
+
};
|
|
1340
|
+
Viewport: {
|
|
1341
|
+
<T extends react.ElementType = "div">(props: DropdownViewportProps<T>): react.JSX.Element;
|
|
1342
|
+
displayName: string;
|
|
1343
|
+
};
|
|
1344
|
+
Item: {
|
|
1345
|
+
<T extends react.ElementType = "div">(props: DropdownItemProps<T>): react.JSX.Element;
|
|
1346
|
+
displayName: string;
|
|
1347
|
+
};
|
|
1348
|
+
Group: {
|
|
1349
|
+
<T extends react.ElementType = "div">(props: DropdownGroupProps<T>): react.JSX.Element;
|
|
1350
|
+
displayName: string;
|
|
1351
|
+
};
|
|
1352
|
+
Label: {
|
|
1353
|
+
<T extends react.ElementType = "div">(props: DropdownLabelProps<T>): react.JSX.Element;
|
|
1354
|
+
displayName: string;
|
|
1355
|
+
};
|
|
1356
|
+
Separator: {
|
|
1357
|
+
<T extends react.ElementType = "div">(props: DropdownSeparatorProps<T>): react.JSX.Element;
|
|
1358
|
+
displayName: string;
|
|
1359
|
+
};
|
|
1360
|
+
Arrow: {
|
|
1361
|
+
<T extends react.ElementType = "svg">(props: DropdownArrowProps<T>): react.JSX.Element;
|
|
1362
|
+
displayName: string;
|
|
1363
|
+
};
|
|
1364
|
+
};
|
|
1365
|
+
|
|
1366
|
+
type FieldSlot = 'root';
|
|
1367
|
+
type FieldLabelSlot = 'root' | 'asterisk';
|
|
1368
|
+
type FieldDescriptionSlot = 'root' | 'icon';
|
|
1369
|
+
type FieldErrorMessageSlot = 'root' | 'icon';
|
|
1370
|
+
interface FieldOwnProps {
|
|
1371
|
+
classNames?: ClassNamesMap<FieldSlot>;
|
|
1372
|
+
slotProps?: SlotPropsMap<FieldSlot>;
|
|
1373
|
+
}
|
|
1374
|
+
/**
|
|
1375
|
+
* Public props for the Field root. Provides shared ARIA context for nested
|
|
1376
|
+
* form controls (Input, Switch, Checkbox, etc.) plus styled label, helper
|
|
1377
|
+
* text, and error message slots.
|
|
1378
|
+
*/
|
|
1379
|
+
type FieldProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, FieldOwnProps & Pick<FieldProps$1, 'id' | 'invalid' | 'disabled' | 'required' | 'optional' | 'readOnly' | 'children'>>;
|
|
1380
|
+
interface FieldLabelOwnProps {
|
|
1381
|
+
classNames?: ClassNamesMap<FieldLabelSlot>;
|
|
1382
|
+
slotProps?: SlotPropsMap<FieldLabelSlot>;
|
|
1383
|
+
}
|
|
1384
|
+
type FieldLabelProps<T extends ElementType = 'label'> = PolymorphicProps<'label', T, FieldLabelOwnProps & Pick<FieldLabelProps$1, 'children'>>;
|
|
1385
|
+
interface FieldDescriptionOwnProps {
|
|
1386
|
+
classNames?: ClassNamesMap<FieldDescriptionSlot>;
|
|
1387
|
+
slotProps?: SlotPropsMap<FieldDescriptionSlot>;
|
|
1388
|
+
}
|
|
1389
|
+
type FieldDescriptionProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, FieldDescriptionOwnProps & Pick<FieldDescriptionProps$1, 'children'>>;
|
|
1390
|
+
interface FieldErrorMessageOwnProps {
|
|
1391
|
+
classNames?: ClassNamesMap<FieldErrorMessageSlot>;
|
|
1392
|
+
slotProps?: SlotPropsMap<FieldErrorMessageSlot>;
|
|
1393
|
+
}
|
|
1394
|
+
type FieldErrorMessageProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, FieldErrorMessageOwnProps & Pick<FieldErrorMessageProps$1, 'children'>>;
|
|
1395
|
+
declare module '../../core/theme' {
|
|
1396
|
+
interface ComponentThemeRegistry {
|
|
1397
|
+
Field: ComponentThemeConfig<FieldProps, FieldSlot>;
|
|
1398
|
+
FieldLabel: ComponentThemeConfig<FieldLabelProps, FieldLabelSlot>;
|
|
1399
|
+
FieldDescription: ComponentThemeConfig<FieldDescriptionProps, FieldDescriptionSlot>;
|
|
1400
|
+
FieldErrorMessage: ComponentThemeConfig<FieldErrorMessageProps, FieldErrorMessageSlot>;
|
|
1401
|
+
}
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
declare const Field: {
|
|
1405
|
+
<T extends react.ElementType = "div">(props: FieldProps<T>): react.JSX.Element;
|
|
1406
|
+
displayName: string;
|
|
1407
|
+
} & {
|
|
1408
|
+
Label: {
|
|
1409
|
+
<T extends react.ElementType = "label">(props: FieldLabelProps<T>): react.JSX.Element;
|
|
1410
|
+
displayName: string;
|
|
1411
|
+
};
|
|
1412
|
+
Description: {
|
|
1413
|
+
<T extends react.ElementType = "div">(props: FieldDescriptionProps<T>): react.JSX.Element;
|
|
1414
|
+
displayName: string;
|
|
1415
|
+
};
|
|
1416
|
+
ErrorMessage: {
|
|
1417
|
+
<T extends react.ElementType = "div">(props: FieldErrorMessageProps<T>): react.JSX.Element;
|
|
1418
|
+
displayName: string;
|
|
1419
|
+
};
|
|
1420
|
+
};
|
|
1421
|
+
|
|
1422
|
+
type InputSize = 'small' | 'base' | 'large';
|
|
1423
|
+
type InputSlot = 'root';
|
|
1424
|
+
type InputFieldSlot = 'root';
|
|
1425
|
+
type InputPrefixSlot = 'root';
|
|
1426
|
+
type InputSuffixSlot = 'root';
|
|
1427
|
+
type InputLeadingIconSlot = 'root';
|
|
1428
|
+
type InputTrailingIconSlot = 'root';
|
|
1429
|
+
type InputClearButtonSlot = 'root';
|
|
1430
|
+
type InputSpinnerSlot = 'root';
|
|
1431
|
+
type InputRevealButtonSlot = 'root';
|
|
1432
|
+
type InputStrengthSlot = 'root';
|
|
1433
|
+
type InputStepperSlot = 'root';
|
|
1434
|
+
type InputDecrementSlot = 'root';
|
|
1435
|
+
type InputIncrementSlot = 'root';
|
|
1436
|
+
type InputChipsSlot = 'root';
|
|
1437
|
+
/**
|
|
1438
|
+
* Visual + slot props owned by takeoff-v2 for the Input root. The `size`
|
|
705
1439
|
* cascades to descendants through a visual context so InputField renders at
|
|
706
1440
|
* the same scale without consumers having to repeat the prop.
|
|
707
1441
|
*/
|
|
@@ -729,31 +1463,6 @@ interface InputFieldOwnProps {
|
|
|
729
1463
|
slotProps?: SlotPropsMap<InputFieldSlot>;
|
|
730
1464
|
}
|
|
731
1465
|
type InputFieldProps<T extends ElementType = 'input'> = PolymorphicProps<'input', T, InputFieldOwnProps & Pick<InputFieldProps$1, 'autoFocus'>>;
|
|
732
|
-
/**
|
|
733
|
-
* Visual row wrapping the field plus optional prefix, suffix, leading/trailing
|
|
734
|
-
* icons. Mirrors the SCSS `.tk-input-container` and is where state attributes
|
|
735
|
-
* (`data-invalid`, `data-disabled`, `data-readonly`) land for styling the
|
|
736
|
-
* bordered input row.
|
|
737
|
-
*/
|
|
738
|
-
interface InputContainerOwnProps {
|
|
739
|
-
/**
|
|
740
|
-
* Content rendered before the field — typically an icon, but accepts any
|
|
741
|
-
* node (chip, button, etc.). Rendered inside the `startContent` slot
|
|
742
|
-
* (`.tk-input-start-content`).
|
|
743
|
-
*/
|
|
744
|
-
startContent?: ReactNode;
|
|
745
|
-
/**
|
|
746
|
-
* Content rendered after the field. Same shape as `startContent`, rendered
|
|
747
|
-
* inside the `endContent` slot (`.tk-input-end-content`).
|
|
748
|
-
*/
|
|
749
|
-
endContent?: ReactNode;
|
|
750
|
-
/** Per-slot class name overrides. */
|
|
751
|
-
classNames?: ClassNamesMap<InputContainerSlot>;
|
|
752
|
-
/** Per-slot HTML attribute overrides. */
|
|
753
|
-
slotProps?: SlotPropsMap<InputContainerSlot>;
|
|
754
|
-
children?: ReactNode;
|
|
755
|
-
}
|
|
756
|
-
type InputContainerProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputContainerOwnProps>;
|
|
757
1466
|
interface InputPrefixOwnProps {
|
|
758
1467
|
/** Per-slot class name overrides. */
|
|
759
1468
|
classNames?: ClassNamesMap<InputPrefixSlot>;
|
|
@@ -770,40 +1479,212 @@ interface InputSuffixOwnProps {
|
|
|
770
1479
|
children?: ReactNode;
|
|
771
1480
|
}
|
|
772
1481
|
type InputSuffixProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputSuffixOwnProps>;
|
|
1482
|
+
interface InputLeadingIconOwnProps {
|
|
1483
|
+
/** Per-slot class name overrides. */
|
|
1484
|
+
classNames?: ClassNamesMap<InputLeadingIconSlot>;
|
|
1485
|
+
/** Per-slot HTML attribute overrides. */
|
|
1486
|
+
slotProps?: SlotPropsMap<InputLeadingIconSlot>;
|
|
1487
|
+
children?: ReactNode;
|
|
1488
|
+
}
|
|
1489
|
+
type InputLeadingIconProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputLeadingIconOwnProps>;
|
|
1490
|
+
interface InputTrailingIconOwnProps {
|
|
1491
|
+
/** Per-slot class name overrides. */
|
|
1492
|
+
classNames?: ClassNamesMap<InputTrailingIconSlot>;
|
|
1493
|
+
/** Per-slot HTML attribute overrides. */
|
|
1494
|
+
slotProps?: SlotPropsMap<InputTrailingIconSlot>;
|
|
1495
|
+
children?: ReactNode;
|
|
1496
|
+
}
|
|
1497
|
+
type InputTrailingIconProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputTrailingIconOwnProps>;
|
|
1498
|
+
interface InputClearButtonOwnProps {
|
|
1499
|
+
/** Called after the field value is cleared. */
|
|
1500
|
+
onClear?: () => void;
|
|
1501
|
+
/** Per-slot class name overrides. */
|
|
1502
|
+
classNames?: ClassNamesMap<InputClearButtonSlot>;
|
|
1503
|
+
/** Per-slot HTML attribute overrides. */
|
|
1504
|
+
slotProps?: SlotPropsMap<InputClearButtonSlot>;
|
|
1505
|
+
children?: ReactNode;
|
|
1506
|
+
}
|
|
1507
|
+
type InputClearButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputClearButtonOwnProps>;
|
|
1508
|
+
interface InputSpinnerOwnProps {
|
|
1509
|
+
/** Per-slot class name overrides. */
|
|
1510
|
+
classNames?: ClassNamesMap<InputSpinnerSlot>;
|
|
1511
|
+
/** Per-slot HTML attribute overrides. */
|
|
1512
|
+
slotProps?: SlotPropsMap<InputSpinnerSlot>;
|
|
1513
|
+
children?: ReactNode;
|
|
1514
|
+
}
|
|
1515
|
+
type InputSpinnerProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputSpinnerOwnProps>;
|
|
1516
|
+
interface InputRevealButtonOwnProps {
|
|
1517
|
+
/** Per-slot class name overrides. */
|
|
1518
|
+
classNames?: ClassNamesMap<InputRevealButtonSlot>;
|
|
1519
|
+
/** Per-slot HTML attribute overrides. */
|
|
1520
|
+
slotProps?: SlotPropsMap<InputRevealButtonSlot>;
|
|
1521
|
+
children?: ReactNode;
|
|
1522
|
+
}
|
|
1523
|
+
type InputRevealButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputRevealButtonOwnProps>;
|
|
1524
|
+
interface InputStrengthOwnProps {
|
|
1525
|
+
/** Per-slot class name overrides. */
|
|
1526
|
+
classNames?: ClassNamesMap<InputStrengthSlot>;
|
|
1527
|
+
/** Per-slot HTML attribute overrides. */
|
|
1528
|
+
slotProps?: SlotPropsMap<InputStrengthSlot>;
|
|
1529
|
+
children?: ReactNode;
|
|
1530
|
+
}
|
|
1531
|
+
/**
|
|
1532
|
+
* Password strength meter rendered below the bordered row. It derives its
|
|
1533
|
+
* level from the field value cascaded through the Input context, so it must be
|
|
1534
|
+
* placed inside `Input` (it is hoisted out of the bordered row at render time).
|
|
1535
|
+
*/
|
|
1536
|
+
type InputStrengthProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputStrengthOwnProps>;
|
|
1537
|
+
interface InputStepperOwnProps {
|
|
1538
|
+
/** Per-slot class name overrides. */
|
|
1539
|
+
classNames?: ClassNamesMap<InputStepperSlot>;
|
|
1540
|
+
/** Per-slot HTML attribute overrides. */
|
|
1541
|
+
slotProps?: SlotPropsMap<InputStepperSlot>;
|
|
1542
|
+
children?: ReactNode;
|
|
1543
|
+
}
|
|
1544
|
+
type InputStepperProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputStepperOwnProps>;
|
|
1545
|
+
interface InputDecrementOwnProps {
|
|
1546
|
+
/** Per-slot class name overrides. */
|
|
1547
|
+
classNames?: ClassNamesMap<InputDecrementSlot>;
|
|
1548
|
+
/** Per-slot HTML attribute overrides. */
|
|
1549
|
+
slotProps?: SlotPropsMap<InputDecrementSlot>;
|
|
1550
|
+
children?: ReactNode;
|
|
1551
|
+
}
|
|
1552
|
+
type InputDecrementProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputDecrementOwnProps>;
|
|
1553
|
+
interface InputIncrementOwnProps {
|
|
1554
|
+
/** Per-slot class name overrides. */
|
|
1555
|
+
classNames?: ClassNamesMap<InputIncrementSlot>;
|
|
1556
|
+
/** Per-slot HTML attribute overrides. */
|
|
1557
|
+
slotProps?: SlotPropsMap<InputIncrementSlot>;
|
|
1558
|
+
children?: ReactNode;
|
|
1559
|
+
}
|
|
1560
|
+
type InputIncrementProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputIncrementOwnProps>;
|
|
1561
|
+
interface InputChipsOwnProps {
|
|
1562
|
+
/**
|
|
1563
|
+
* Committed tags (controlled). Pair with `onValueChange`. Spar's Input is a
|
|
1564
|
+
* scalar primitive with no array model, so the chips value is owned here as a
|
|
1565
|
+
* react-enhancement rather than picked from Spar.
|
|
1566
|
+
*/
|
|
1567
|
+
value?: string[];
|
|
1568
|
+
/** Initial tags for uncontrolled usage. */
|
|
1569
|
+
defaultValue?: string[];
|
|
1570
|
+
/** Called with the next tag array after a commit or removal. */
|
|
1571
|
+
onValueChange?: (value: string[]) => void;
|
|
1572
|
+
/** Optional character that commits the field text as a tag (Enter always commits). */
|
|
1573
|
+
separator?: string;
|
|
1574
|
+
/** Maximum number of tags. Further commits are ignored once reached. */
|
|
1575
|
+
max?: number;
|
|
1576
|
+
/** Allow committing a tag that already exists. @defaultValue false */
|
|
1577
|
+
allowDuplicates?: boolean;
|
|
1578
|
+
/** Per-slot class name overrides. */
|
|
1579
|
+
classNames?: ClassNamesMap<InputChipsSlot>;
|
|
1580
|
+
/** Per-slot HTML attribute overrides. */
|
|
1581
|
+
slotProps?: SlotPropsMap<InputChipsSlot>;
|
|
1582
|
+
children?: ReactNode;
|
|
1583
|
+
}
|
|
1584
|
+
/**
|
|
1585
|
+
* Chips region rendered next to `Input.Field`. Owns the tag array, renders each
|
|
1586
|
+
* committed tag via the shared `Chip` token, and attaches its key handling
|
|
1587
|
+
* (Enter to commit, Backspace to remove the last tag) to the shared field ref
|
|
1588
|
+
* so `Input.Field` stays generic.
|
|
1589
|
+
*/
|
|
1590
|
+
type InputChipsProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputChipsOwnProps>;
|
|
773
1591
|
declare module '../../core/theme' {
|
|
774
1592
|
interface ComponentThemeRegistry {
|
|
775
1593
|
Input: ComponentThemeConfig<InputProps, InputSlot>;
|
|
776
|
-
InputContainer: ComponentThemeConfig<InputContainerProps, InputContainerSlot>;
|
|
777
1594
|
InputField: ComponentThemeConfig<InputFieldProps, InputFieldSlot>;
|
|
778
1595
|
InputPrefix: ComponentThemeConfig<InputPrefixProps, InputPrefixSlot>;
|
|
779
1596
|
InputSuffix: ComponentThemeConfig<InputSuffixProps, InputSuffixSlot>;
|
|
1597
|
+
InputLeadingIcon: ComponentThemeConfig<InputLeadingIconProps, InputLeadingIconSlot>;
|
|
1598
|
+
InputTrailingIcon: ComponentThemeConfig<InputTrailingIconProps, InputTrailingIconSlot>;
|
|
1599
|
+
InputClearButton: ComponentThemeConfig<InputClearButtonProps, InputClearButtonSlot>;
|
|
1600
|
+
InputSpinner: ComponentThemeConfig<InputSpinnerProps, InputSpinnerSlot>;
|
|
1601
|
+
InputRevealButton: ComponentThemeConfig<InputRevealButtonProps, InputRevealButtonSlot>;
|
|
1602
|
+
InputStrength: ComponentThemeConfig<InputStrengthProps, InputStrengthSlot>;
|
|
1603
|
+
InputStepper: ComponentThemeConfig<InputStepperProps, InputStepperSlot>;
|
|
1604
|
+
InputDecrement: ComponentThemeConfig<InputDecrementProps, InputDecrementSlot>;
|
|
1605
|
+
InputIncrement: ComponentThemeConfig<InputIncrementProps, InputIncrementSlot>;
|
|
1606
|
+
InputChips: ComponentThemeConfig<InputChipsProps, InputChipsSlot>;
|
|
780
1607
|
}
|
|
781
1608
|
}
|
|
782
1609
|
|
|
783
1610
|
declare const Input: {
|
|
784
|
-
<T extends react.ElementType = "div">(props: InputProps<T>):
|
|
1611
|
+
<T extends react.ElementType = "div">(props: InputProps<T>): react.JSX.Element;
|
|
785
1612
|
displayName: string;
|
|
786
1613
|
} & {
|
|
787
|
-
Container: {
|
|
788
|
-
<T extends react.ElementType = "div">(props: InputContainerProps<T>): react_jsx_runtime.JSX.Element;
|
|
789
|
-
displayName: string;
|
|
790
|
-
};
|
|
791
1614
|
Field: {
|
|
792
|
-
<T extends react.ElementType = "input">(props: InputFieldProps<T>):
|
|
1615
|
+
<T extends react.ElementType = "input">(props: InputFieldProps<T>): react.JSX.Element;
|
|
793
1616
|
displayName: string;
|
|
794
1617
|
};
|
|
795
1618
|
Prefix: {
|
|
796
|
-
<T extends react.ElementType = "span">(props: InputPrefixProps<T>):
|
|
1619
|
+
<T extends react.ElementType = "span">(props: InputPrefixProps<T>): react.JSX.Element;
|
|
797
1620
|
displayName: string;
|
|
798
1621
|
};
|
|
799
1622
|
Suffix: {
|
|
800
|
-
<T extends react.ElementType = "span">(props: InputSuffixProps<T>):
|
|
1623
|
+
<T extends react.ElementType = "span">(props: InputSuffixProps<T>): react.JSX.Element;
|
|
1624
|
+
displayName: string;
|
|
1625
|
+
};
|
|
1626
|
+
LeadingIcon: {
|
|
1627
|
+
<T extends react.ElementType = "span">(props: InputLeadingIconProps<T>): react.JSX.Element;
|
|
1628
|
+
displayName: string;
|
|
1629
|
+
};
|
|
1630
|
+
TrailingIcon: {
|
|
1631
|
+
<T extends react.ElementType = "span">(props: InputTrailingIconProps<T>): react.JSX.Element;
|
|
1632
|
+
displayName: string;
|
|
1633
|
+
};
|
|
1634
|
+
ClearButton: {
|
|
1635
|
+
<T extends react.ElementType = "button">(props: InputClearButtonProps<T>): react.JSX.Element | null;
|
|
1636
|
+
displayName: string;
|
|
1637
|
+
};
|
|
1638
|
+
Spinner: {
|
|
1639
|
+
<T extends react.ElementType = "span">(props: InputSpinnerProps<T>): react.JSX.Element;
|
|
1640
|
+
displayName: string;
|
|
1641
|
+
};
|
|
1642
|
+
RevealButton: {
|
|
1643
|
+
<T extends react.ElementType = "button">(props: InputRevealButtonProps<T>): react.JSX.Element;
|
|
1644
|
+
displayName: string;
|
|
1645
|
+
};
|
|
1646
|
+
Strength: {
|
|
1647
|
+
<T extends react.ElementType = "div">(props: InputStrengthProps<T>): react.JSX.Element;
|
|
1648
|
+
displayName: string;
|
|
1649
|
+
};
|
|
1650
|
+
Stepper: {
|
|
1651
|
+
<T extends react.ElementType = "div">(props: InputStepperProps<T>): react.JSX.Element;
|
|
1652
|
+
displayName: string;
|
|
1653
|
+
};
|
|
1654
|
+
Decrement: {
|
|
1655
|
+
<T extends react.ElementType = "button">(props: InputDecrementProps<T>): react.JSX.Element;
|
|
1656
|
+
displayName: string;
|
|
1657
|
+
};
|
|
1658
|
+
Increment: {
|
|
1659
|
+
<T extends react.ElementType = "button">(props: InputIncrementProps<T>): react.JSX.Element;
|
|
1660
|
+
displayName: string;
|
|
1661
|
+
};
|
|
1662
|
+
Chips: {
|
|
1663
|
+
<T extends react.ElementType = "div">(props: InputChipsProps<T>): react.JSX.Element;
|
|
801
1664
|
displayName: string;
|
|
802
1665
|
};
|
|
803
1666
|
};
|
|
804
1667
|
|
|
1668
|
+
type LabelSlot = 'root';
|
|
1669
|
+
interface LabelOwnProps {
|
|
1670
|
+
/** Per-slot extra classes. */
|
|
1671
|
+
classNames?: ClassNamesMap<LabelSlot>;
|
|
1672
|
+
/** Per-slot HTML-attribute overrides. */
|
|
1673
|
+
slotProps?: SlotPropsMap<LabelSlot>;
|
|
1674
|
+
}
|
|
1675
|
+
type LabelProps<T extends ElementType = 'label'> = PolymorphicProps<'label', T, LabelOwnProps & Pick<LabelProps$1, 'children' | 'required' | 'optional' | 'disabled' | 'readOnly' | 'invalid'>>;
|
|
1676
|
+
declare module '../../core/theme' {
|
|
1677
|
+
interface ComponentThemeRegistry {
|
|
1678
|
+
Label: ComponentThemeConfig<LabelProps, LabelSlot>;
|
|
1679
|
+
}
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
declare const Label: {
|
|
1683
|
+
<T extends ElementType = "label">(props: LabelProps<T>): react.JSX.Element;
|
|
1684
|
+
displayName: string;
|
|
1685
|
+
};
|
|
1686
|
+
|
|
805
1687
|
type RadioSize = 'small' | 'base' | 'large';
|
|
806
|
-
type RadioType = 'default' | 'card';
|
|
807
1688
|
type RadioPosition = 'left' | 'right';
|
|
808
1689
|
type RadioSlot = 'root';
|
|
809
1690
|
type RadioItemSlot = 'root';
|
|
@@ -824,11 +1705,6 @@ interface RadioOwnProps {
|
|
|
824
1705
|
* @defaultValue 'base'
|
|
825
1706
|
*/
|
|
826
1707
|
size?: RadioSize;
|
|
827
|
-
/**
|
|
828
|
-
* Visual variant. Cascades to descendant `Radio.Item`s via context.
|
|
829
|
-
* @defaultValue 'default'
|
|
830
|
-
*/
|
|
831
|
-
type?: RadioType;
|
|
832
1708
|
/**
|
|
833
1709
|
* Marks the group as visually invalid. Cascades to descendant `Radio.Item`s.
|
|
834
1710
|
* When nested inside a `<Field>` with `invalid`, this is inherited
|
|
@@ -903,28 +1779,28 @@ declare module '../../core/theme' {
|
|
|
903
1779
|
}
|
|
904
1780
|
|
|
905
1781
|
declare const Radio: {
|
|
906
|
-
<T extends react.ElementType = "div">(props: RadioProps<T>):
|
|
1782
|
+
<T extends react.ElementType = "div">(props: RadioProps<T>): react.JSX.Element;
|
|
907
1783
|
displayName: string;
|
|
908
1784
|
} & {
|
|
909
1785
|
Item: {
|
|
910
|
-
<T extends react.ElementType = "label">(props: RadioItemProps<T>):
|
|
1786
|
+
<T extends react.ElementType = "label">(props: RadioItemProps<T>): react.JSX.Element;
|
|
911
1787
|
displayName: string;
|
|
912
1788
|
};
|
|
913
1789
|
Indicator: {
|
|
914
|
-
<T extends react.ElementType = "span">(props: RadioIndicatorProps<T>):
|
|
1790
|
+
<T extends react.ElementType = "span">(props: RadioIndicatorProps<T>): react.JSX.Element;
|
|
915
1791
|
displayName: string;
|
|
916
1792
|
};
|
|
917
1793
|
Label: {
|
|
918
|
-
<T extends react.ElementType = "span">(props: RadioLabelProps<T>):
|
|
1794
|
+
<T extends react.ElementType = "span">(props: RadioLabelProps<T>): react.JSX.Element;
|
|
919
1795
|
displayName: string;
|
|
920
1796
|
};
|
|
921
1797
|
};
|
|
922
1798
|
|
|
923
1799
|
/**
|
|
924
1800
|
* Visual variant of the popover content.
|
|
925
|
-
* @defaultValue '
|
|
1801
|
+
* @defaultValue 'white'
|
|
926
1802
|
*/
|
|
927
|
-
type PopoverVariant = '
|
|
1803
|
+
type PopoverVariant = 'white' | 'dark' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
928
1804
|
type PopoverTriggerSlot = 'root';
|
|
929
1805
|
type PopoverContentSlot = 'root';
|
|
930
1806
|
type PopoverHeaderSlot = 'root';
|
|
@@ -946,7 +1822,7 @@ type PopoverTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'b
|
|
|
946
1822
|
interface PopoverContentOwnProps {
|
|
947
1823
|
/**
|
|
948
1824
|
* Color variant.
|
|
949
|
-
* @defaultValue '
|
|
1825
|
+
* @defaultValue 'white'
|
|
950
1826
|
*/
|
|
951
1827
|
variant?: PopoverVariant;
|
|
952
1828
|
/** Per-slot extra classes. */
|
|
@@ -996,52 +1872,223 @@ declare module '../../core/theme' {
|
|
|
996
1872
|
}
|
|
997
1873
|
|
|
998
1874
|
declare const Popover: {
|
|
999
|
-
(props: PopoverProps):
|
|
1875
|
+
(props: PopoverProps): react.JSX.Element;
|
|
1000
1876
|
displayName: string;
|
|
1001
1877
|
} & {
|
|
1002
1878
|
Trigger: {
|
|
1003
|
-
<T extends react.ElementType = "button">(props: PopoverTriggerProps<T>):
|
|
1879
|
+
<T extends react.ElementType = "button">(props: PopoverTriggerProps<T>): react.JSX.Element;
|
|
1004
1880
|
displayName: string;
|
|
1005
1881
|
};
|
|
1006
1882
|
Content: {
|
|
1007
|
-
<T extends react.ElementType = "div">(props: PopoverContentProps<T>):
|
|
1883
|
+
<T extends react.ElementType = "div">(props: PopoverContentProps<T>): react.JSX.Element;
|
|
1008
1884
|
displayName: string;
|
|
1009
1885
|
};
|
|
1010
1886
|
Header: {
|
|
1011
|
-
<T extends react.ElementType = "div">(props: PopoverHeaderProps<T>):
|
|
1887
|
+
<T extends react.ElementType = "div">(props: PopoverHeaderProps<T>): react.JSX.Element;
|
|
1012
1888
|
displayName: string;
|
|
1013
1889
|
};
|
|
1014
1890
|
Description: {
|
|
1015
|
-
<T extends react.ElementType = "p">(props: PopoverDescriptionProps<T>):
|
|
1891
|
+
<T extends react.ElementType = "p">(props: PopoverDescriptionProps<T>): react.JSX.Element;
|
|
1016
1892
|
displayName: string;
|
|
1017
1893
|
};
|
|
1018
1894
|
Arrow: {
|
|
1019
|
-
<T extends react.ElementType = "svg">(props: PopoverArrowProps<T>):
|
|
1895
|
+
<T extends react.ElementType = "svg">(props: PopoverArrowProps<T>): react.JSX.Element;
|
|
1020
1896
|
displayName: string;
|
|
1021
1897
|
};
|
|
1022
1898
|
Close: {
|
|
1023
|
-
<T extends react.ElementType = "button">(props: PopoverCloseProps<T>):
|
|
1899
|
+
<T extends react.ElementType = "button">(props: PopoverCloseProps<T>): react.JSX.Element;
|
|
1024
1900
|
displayName: string;
|
|
1025
1901
|
};
|
|
1026
1902
|
};
|
|
1027
1903
|
|
|
1028
|
-
|
|
1904
|
+
/** Shape of the progress indicator. */
|
|
1905
|
+
type ProgressAppearance = 'linear' | 'circular';
|
|
1906
|
+
/** Visual scale. */
|
|
1907
|
+
type ProgressSize = 'small' | 'base' | 'large';
|
|
1908
|
+
/** Fill color variant. */
|
|
1909
|
+
type ProgressVariant = 'primary' | 'info' | 'success' | 'danger' | 'warning';
|
|
1910
|
+
type ProgressSlot = 'root';
|
|
1911
|
+
type ProgressTrackSlot = 'root' | 'rail';
|
|
1912
|
+
type ProgressIndicatorSlot = 'root';
|
|
1913
|
+
type ProgressValueSlot = 'root';
|
|
1029
1914
|
/**
|
|
1030
|
-
*
|
|
1031
|
-
*
|
|
1032
|
-
*
|
|
1033
|
-
* - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
|
|
1034
|
-
* - `number`: explicit pixel width
|
|
1035
|
-
* - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
|
|
1915
|
+
* Props owned by takeoff-v2. There is no Spar Progress primitive to `Pick`
|
|
1916
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
1917
|
+
* rationale in `base.ts`).
|
|
1036
1918
|
*/
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1919
|
+
interface ProgressOwnProps {
|
|
1920
|
+
/**
|
|
1921
|
+
* Current progress value. Clamped to `[min, max]`; non-finite values
|
|
1922
|
+
* resolve to `min`. Ignored while `indeterminate` is set.
|
|
1923
|
+
* @defaultValue 0
|
|
1924
|
+
*/
|
|
1925
|
+
value?: number;
|
|
1926
|
+
/**
|
|
1927
|
+
* Marks the progress as indeterminate — the root drops `aria-valuenow`,
|
|
1928
|
+
* emits `data-indeterminate`, and the indicator animates a looping sweep
|
|
1929
|
+
* instead of a fill. Takes precedence over `value`.
|
|
1930
|
+
* @defaultValue false
|
|
1931
|
+
*/
|
|
1932
|
+
indeterminate?: boolean;
|
|
1933
|
+
/**
|
|
1934
|
+
* Minimum value the progress starts from. Non-finite values fall back to
|
|
1935
|
+
* the default.
|
|
1936
|
+
* @defaultValue 0
|
|
1937
|
+
*/
|
|
1938
|
+
min?: number;
|
|
1939
|
+
/**
|
|
1940
|
+
* Maximum value the progress can reach. Non-finite values and values at or
|
|
1941
|
+
* below `min` fall back to `min + 100` (the latter with a dev-only console
|
|
1942
|
+
* warning, since an inverted range is a consumer bug).
|
|
1943
|
+
* @defaultValue 100
|
|
1944
|
+
*/
|
|
1945
|
+
max?: number;
|
|
1946
|
+
/**
|
|
1947
|
+
* Shape of the progress indicator — a horizontal bar (`'linear'`) or a
|
|
1948
|
+
* ring (`'circular'`).
|
|
1949
|
+
* @defaultValue 'linear'
|
|
1950
|
+
*/
|
|
1951
|
+
appearance?: ProgressAppearance;
|
|
1952
|
+
/**
|
|
1953
|
+
* Visual scale. Linear progress changes track height; circular progress
|
|
1954
|
+
* changes ring diameter.
|
|
1955
|
+
* @defaultValue 'base'
|
|
1956
|
+
*/
|
|
1957
|
+
size?: ProgressSize;
|
|
1958
|
+
/**
|
|
1959
|
+
* Fill color variant.
|
|
1960
|
+
* @defaultValue 'primary'
|
|
1961
|
+
*/
|
|
1962
|
+
variant?: ProgressVariant;
|
|
1963
|
+
/**
|
|
1964
|
+
* Mutes the fill color and sets `aria-disabled`. Inherits the surrounding
|
|
1965
|
+
* `Field`'s disabled state when composed inside one.
|
|
1966
|
+
* @defaultValue false
|
|
1967
|
+
*/
|
|
1968
|
+
disabled?: boolean;
|
|
1969
|
+
/**
|
|
1970
|
+
* Optional anatomy override. When omitted, `Progress` renders the default
|
|
1971
|
+
* anatomy — `Progress.Track` wrapping `Progress.Indicator` — for both
|
|
1972
|
+
* appearances.
|
|
1973
|
+
*/
|
|
1974
|
+
children?: ReactNode;
|
|
1975
|
+
/** Per-slot class name overrides. */
|
|
1976
|
+
classNames?: ClassNamesMap<ProgressSlot>;
|
|
1977
|
+
/** Per-slot HTML attribute overrides. */
|
|
1978
|
+
slotProps?: SlotPropsMap<ProgressSlot>;
|
|
1979
|
+
}
|
|
1980
|
+
/**
|
|
1981
|
+
* Public props for the Progress root — the a11y owner and layout wrapper
|
|
1982
|
+
* (the track is its own part, `Progress.Track`, matching the
|
|
1983
|
+
* Root/Label/Track/Indicator anatomy convention). Renders the default
|
|
1984
|
+
* anatomy when no children are given. Compose inside a `Field` with
|
|
1985
|
+
* `Field.Label` for an automatically wired visible label.
|
|
1986
|
+
*/
|
|
1987
|
+
type ProgressProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ProgressOwnProps>;
|
|
1988
|
+
interface ProgressTrackOwnProps {
|
|
1989
|
+
/**
|
|
1990
|
+
* Track anatomy override. When omitted, `Progress.Track` renders the
|
|
1991
|
+
* default `Progress.Indicator`.
|
|
1992
|
+
*/
|
|
1993
|
+
children?: ReactNode;
|
|
1994
|
+
/** Per-slot class name overrides. */
|
|
1995
|
+
classNames?: ClassNamesMap<ProgressTrackSlot>;
|
|
1996
|
+
/** Per-slot HTML attribute overrides. */
|
|
1997
|
+
slotProps?: SlotPropsMap<ProgressTrackSlot>;
|
|
1998
|
+
}
|
|
1999
|
+
/**
|
|
2000
|
+
* Public props for `Progress.Track` — the rail the indicator fills. The
|
|
2001
|
+
* element is decided by the root's `appearance`: a rail `<div>` for
|
|
2002
|
+
* `'linear'`, the ring `<svg>` for `'circular'` — where the rail is drawn
|
|
2003
|
+
* as the svg's own `<circle>`, exposed as the `'rail'` slot.
|
|
2004
|
+
*/
|
|
2005
|
+
type ProgressTrackProps = ProgressTrackOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2006
|
+
ref?: Ref<Element>;
|
|
2007
|
+
};
|
|
2008
|
+
interface ProgressIndicatorOwnProps {
|
|
2009
|
+
/** Per-slot class name overrides. */
|
|
2010
|
+
classNames?: ClassNamesMap<ProgressIndicatorSlot>;
|
|
2011
|
+
/** Per-slot HTML attribute overrides. */
|
|
2012
|
+
slotProps?: SlotPropsMap<ProgressIndicatorSlot>;
|
|
2013
|
+
}
|
|
2014
|
+
/**
|
|
2015
|
+
* Public props for `Progress.Indicator` — the filled portion. Not
|
|
2016
|
+
* polymorphic — the element is decided by the root's `appearance` (linear
|
|
2017
|
+
* fill `<span>` / circular arc `<circle>`), and the indicator takes no
|
|
2018
|
+
* children.
|
|
2019
|
+
*/
|
|
2020
|
+
type ProgressIndicatorProps = ProgressIndicatorOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2021
|
+
ref?: Ref<Element>;
|
|
2022
|
+
};
|
|
2023
|
+
interface ProgressValueOwnProps {
|
|
2024
|
+
/**
|
|
2025
|
+
* Visible value content — typically the formatted value (e.g. `%60`) or a
|
|
2026
|
+
* short status. The component renders no default content; formatting stays
|
|
2027
|
+
* with the consumer so locale and design conventions are not baked in.
|
|
2028
|
+
*/
|
|
2029
|
+
children?: ReactNode;
|
|
2030
|
+
/** Per-slot class name overrides. */
|
|
2031
|
+
classNames?: ClassNamesMap<ProgressValueSlot>;
|
|
2032
|
+
/** Per-slot HTML attribute overrides. */
|
|
2033
|
+
slotProps?: SlotPropsMap<ProgressValueSlot>;
|
|
2034
|
+
}
|
|
2035
|
+
/**
|
|
2036
|
+
* Public props for `Progress.Value` — decorative (`aria-hidden`) value or
|
|
2037
|
+
* status text. The value is announced through the root's `aria-valuenow`,
|
|
2038
|
+
* so the value text carries no accessibility semantics. Renders in flow
|
|
2039
|
+
* next to the track for `'linear'` and as an overlay centered inside the
|
|
2040
|
+
* ring for `'circular'`.
|
|
2041
|
+
*/
|
|
2042
|
+
type ProgressValueProps = ProgressValueOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2043
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2044
|
+
};
|
|
2045
|
+
declare module '../../core/theme' {
|
|
2046
|
+
interface ComponentThemeRegistry {
|
|
2047
|
+
Progress: ComponentThemeConfig<ProgressProps, ProgressSlot>;
|
|
2048
|
+
ProgressTrack: ComponentThemeConfig<ProgressTrackProps, ProgressTrackSlot>;
|
|
2049
|
+
ProgressIndicator: ComponentThemeConfig<ProgressIndicatorProps>;
|
|
2050
|
+
ProgressValue: ComponentThemeConfig<ProgressValueProps>;
|
|
2051
|
+
}
|
|
2052
|
+
}
|
|
2053
|
+
|
|
2054
|
+
declare const Progress: {
|
|
2055
|
+
<T extends react.ElementType = "div">(props: ProgressProps<T>): react.JSX.Element;
|
|
2056
|
+
displayName: string;
|
|
2057
|
+
} & {
|
|
2058
|
+
Track: {
|
|
2059
|
+
(props: ProgressTrackProps): react.JSX.Element;
|
|
2060
|
+
displayName: string;
|
|
2061
|
+
};
|
|
2062
|
+
Indicator: {
|
|
2063
|
+
(props: ProgressIndicatorProps): react.JSX.Element;
|
|
2064
|
+
displayName: string;
|
|
2065
|
+
};
|
|
2066
|
+
Value: {
|
|
2067
|
+
(props: ProgressValueProps): react.JSX.Element;
|
|
2068
|
+
displayName: string;
|
|
2069
|
+
};
|
|
2070
|
+
};
|
|
2071
|
+
|
|
2072
|
+
type SelectSize = 'small' | 'base' | 'large';
|
|
2073
|
+
/**
|
|
2074
|
+
* Controls the panel's render width.
|
|
2075
|
+
*
|
|
2076
|
+
* - `'trigger'`: panel matches the trigger's measured width (form-aligned default)
|
|
2077
|
+
* - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
|
|
2078
|
+
* - `number`: explicit pixel width
|
|
2079
|
+
* - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
|
|
2080
|
+
*/
|
|
2081
|
+
type SelectContentWidth = 'trigger' | 'content' | number | string;
|
|
2082
|
+
type SelectSlot = 'root';
|
|
2083
|
+
type SelectTriggerSlot = 'root' | 'value' | 'indicator';
|
|
2084
|
+
type SelectIndicatorSlot = 'root';
|
|
2085
|
+
type SelectContentSlot = 'root';
|
|
2086
|
+
type SelectViewportSlot = 'root';
|
|
2087
|
+
type SelectItemSlot = 'root';
|
|
1042
2088
|
type SelectGroupSlot = 'root';
|
|
1043
2089
|
type SelectLabelSlot = 'root';
|
|
1044
2090
|
type SelectSeparatorSlot = 'root';
|
|
2091
|
+
type SelectArrowSlot = 'root';
|
|
1045
2092
|
/**
|
|
1046
2093
|
* Visual + slot props owned by takeoff-v2 for the Select root. `size` and
|
|
1047
2094
|
* `invalid` cascade to the Trigger through a visual context so consumers
|
|
@@ -1075,13 +2122,53 @@ interface SelectOwnProps {
|
|
|
1075
2122
|
* `PolymorphicProps`.
|
|
1076
2123
|
*/
|
|
1077
2124
|
type SelectProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectOwnProps & Pick<SelectProps$1, 'id' | 'value' | 'defaultValue' | 'onChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled' | 'readOnly' | 'required' | 'name' | 'autoFocus'>>;
|
|
2125
|
+
/**
|
|
2126
|
+
* State surface delivered to a render-function `indicator` (on the Trigger) or
|
|
2127
|
+
* to {@link SelectIndicatorProps.children}. Lets consumers swap icons by open
|
|
2128
|
+
* state without pulling the select context themselves. Mirrors the Accordion
|
|
2129
|
+
* indicator's render state.
|
|
2130
|
+
*/
|
|
2131
|
+
interface SelectIndicatorRenderState {
|
|
2132
|
+
isOpen: boolean;
|
|
2133
|
+
}
|
|
1078
2134
|
interface SelectTriggerOwnProps {
|
|
2135
|
+
/**
|
|
2136
|
+
* Disclosure indicator rendered at the trailing edge of the trigger,
|
|
2137
|
+
* after the value/placeholder. Defaults to a chevron that flips direction
|
|
2138
|
+
* with the open state (parity with `Accordion.Indicator`).
|
|
2139
|
+
*
|
|
2140
|
+
* - omit / `true` → the default chevron
|
|
2141
|
+
* - `false` / `null` → no indicator
|
|
2142
|
+
* - a ReactNode → custom static icon (rendered in every state)
|
|
2143
|
+
* - a render function receiving `{ isOpen }` → swap icons by open state
|
|
2144
|
+
*
|
|
2145
|
+
* Ignored when `children` is a render function: a render-prop `children` opts
|
|
2146
|
+
* the trigger out of the built-in indicator and value wrapper entirely, so
|
|
2147
|
+
* you can drop a standalone `<Select.Indicator />` into your own layout
|
|
2148
|
+
* without a doubled chevron.
|
|
2149
|
+
* @defaultValue true
|
|
2150
|
+
*/
|
|
2151
|
+
indicator?: boolean | ReactNode | ((state: SelectIndicatorRenderState) => ReactNode);
|
|
1079
2152
|
/** Per-slot class name overrides. */
|
|
1080
2153
|
classNames?: ClassNamesMap<SelectTriggerSlot>;
|
|
1081
2154
|
/** Per-slot HTML attribute overrides. */
|
|
1082
2155
|
slotProps?: SlotPropsMap<SelectTriggerSlot>;
|
|
1083
2156
|
}
|
|
1084
2157
|
type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children' | 'placeholder'>>;
|
|
2158
|
+
interface SelectIndicatorOwnProps {
|
|
2159
|
+
/**
|
|
2160
|
+
* Override the default chevron. Accepts a ReactNode (rendered in every
|
|
2161
|
+
* state) or a render function receiving the live `{ isOpen }` state — use
|
|
2162
|
+
* the render-prop form to swap icons by open state without consuming the
|
|
2163
|
+
* select context manually. Mirrors `Accordion.Indicator`.
|
|
2164
|
+
*/
|
|
2165
|
+
children?: ReactNode | ((state: SelectIndicatorRenderState) => ReactNode);
|
|
2166
|
+
/** Per-slot class name overrides. */
|
|
2167
|
+
classNames?: ClassNamesMap<SelectIndicatorSlot>;
|
|
2168
|
+
/** Per-slot HTML attribute overrides. */
|
|
2169
|
+
slotProps?: SlotPropsMap<SelectIndicatorSlot>;
|
|
2170
|
+
}
|
|
2171
|
+
type SelectIndicatorProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectIndicatorOwnProps>;
|
|
1085
2172
|
interface SelectContentOwnProps {
|
|
1086
2173
|
/** Per-slot class name overrides. */
|
|
1087
2174
|
classNames?: ClassNamesMap<SelectContentSlot>;
|
|
@@ -1089,6 +2176,13 @@ interface SelectContentOwnProps {
|
|
|
1089
2176
|
slotProps?: SlotPropsMap<SelectContentSlot>;
|
|
1090
2177
|
}
|
|
1091
2178
|
type SelectContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectContentOwnProps & Pick<SelectContentProps$1, 'side' | 'align' | 'container' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onCloseAutoFocus'>>;
|
|
2179
|
+
interface SelectViewportOwnProps {
|
|
2180
|
+
/** Per-slot class name overrides. */
|
|
2181
|
+
classNames?: ClassNamesMap<SelectViewportSlot>;
|
|
2182
|
+
/** Per-slot HTML attribute overrides. */
|
|
2183
|
+
slotProps?: SlotPropsMap<SelectViewportSlot>;
|
|
2184
|
+
}
|
|
2185
|
+
type SelectViewportProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectViewportOwnProps & Pick<SelectViewportProps$1, 'children'>>;
|
|
1092
2186
|
interface SelectItemOwnProps {
|
|
1093
2187
|
/** Per-slot class name overrides. */
|
|
1094
2188
|
classNames?: ClassNamesMap<SelectItemSlot>;
|
|
@@ -1117,44 +2211,686 @@ interface SelectSeparatorOwnProps {
|
|
|
1117
2211
|
slotProps?: SlotPropsMap<SelectSeparatorSlot>;
|
|
1118
2212
|
}
|
|
1119
2213
|
type SelectSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectSeparatorOwnProps & Pick<SelectSeparatorProps$1, 'children'>>;
|
|
2214
|
+
interface SelectArrowOwnProps {
|
|
2215
|
+
/** Per-slot class name overrides. */
|
|
2216
|
+
classNames?: ClassNamesMap<SelectArrowSlot>;
|
|
2217
|
+
/** Per-slot HTML attribute overrides. */
|
|
2218
|
+
slotProps?: SlotPropsMap<SelectArrowSlot>;
|
|
2219
|
+
}
|
|
2220
|
+
/**
|
|
2221
|
+
* Optional decorative arrow pointing at the trigger. Positioned automatically by
|
|
2222
|
+
* Spar's Floating UI middleware; renders a default triangle `<svg>` whose fill
|
|
2223
|
+
* follows the recipe's `color`. No Spar props are surfaced — the polymorphic svg
|
|
2224
|
+
* attributes (incl. `children` for a custom shape) come through directly.
|
|
2225
|
+
*/
|
|
2226
|
+
type SelectArrowProps<T extends ElementType = 'svg'> = PolymorphicProps<'svg', T, SelectArrowOwnProps>;
|
|
1120
2227
|
declare module '../../core/theme' {
|
|
1121
2228
|
interface ComponentThemeRegistry {
|
|
1122
2229
|
Select: ComponentThemeConfig<SelectProps, SelectSlot>;
|
|
1123
2230
|
SelectTrigger: ComponentThemeConfig<SelectTriggerProps, SelectTriggerSlot>;
|
|
2231
|
+
SelectIndicator: ComponentThemeConfig<SelectIndicatorProps, SelectIndicatorSlot>;
|
|
1124
2232
|
SelectContent: ComponentThemeConfig<SelectContentProps, SelectContentSlot>;
|
|
2233
|
+
SelectViewport: ComponentThemeConfig<SelectViewportProps, SelectViewportSlot>;
|
|
1125
2234
|
SelectItem: ComponentThemeConfig<SelectItemProps, SelectItemSlot>;
|
|
1126
2235
|
SelectGroup: ComponentThemeConfig<SelectGroupProps, SelectGroupSlot>;
|
|
1127
2236
|
SelectLabel: ComponentThemeConfig<SelectLabelProps, SelectLabelSlot>;
|
|
1128
2237
|
SelectSeparator: ComponentThemeConfig<SelectSeparatorProps, SelectSeparatorSlot>;
|
|
2238
|
+
SelectArrow: ComponentThemeConfig<SelectArrowProps, SelectArrowSlot>;
|
|
1129
2239
|
}
|
|
1130
2240
|
}
|
|
1131
2241
|
|
|
1132
2242
|
declare const Select: {
|
|
1133
|
-
<T extends react.ElementType = "div">(props: SelectProps<T>):
|
|
2243
|
+
<T extends react.ElementType = "div">(props: SelectProps<T>): react.JSX.Element;
|
|
1134
2244
|
displayName: string;
|
|
1135
2245
|
} & {
|
|
1136
2246
|
Trigger: {
|
|
1137
|
-
<T extends react.ElementType = "button">(props: SelectTriggerProps<T>):
|
|
2247
|
+
<T extends react.ElementType = "button">(props: SelectTriggerProps<T>): react.JSX.Element;
|
|
2248
|
+
displayName: string;
|
|
2249
|
+
};
|
|
2250
|
+
Indicator: {
|
|
2251
|
+
<T extends react.ElementType = "span">(props: SelectIndicatorProps<T>): react.JSX.Element;
|
|
1138
2252
|
displayName: string;
|
|
1139
2253
|
};
|
|
1140
2254
|
Content: {
|
|
1141
|
-
<T extends react.ElementType = "div">(props: SelectContentProps<T>):
|
|
2255
|
+
<T extends react.ElementType = "div">(props: SelectContentProps<T>): react.JSX.Element;
|
|
2256
|
+
displayName: string;
|
|
2257
|
+
};
|
|
2258
|
+
Viewport: {
|
|
2259
|
+
<T extends react.ElementType = "div">(props: SelectViewportProps<T>): react.JSX.Element;
|
|
1142
2260
|
displayName: string;
|
|
1143
2261
|
};
|
|
1144
2262
|
Item: {
|
|
1145
|
-
<T extends react.ElementType = "div">(props: SelectItemProps<T>):
|
|
2263
|
+
<T extends react.ElementType = "div">(props: SelectItemProps<T>): react.JSX.Element;
|
|
1146
2264
|
displayName: string;
|
|
1147
2265
|
};
|
|
1148
2266
|
Group: {
|
|
1149
|
-
<T extends react.ElementType = "div">(props: SelectGroupProps<T>):
|
|
2267
|
+
<T extends react.ElementType = "div">(props: SelectGroupProps<T>): react.JSX.Element;
|
|
1150
2268
|
displayName: string;
|
|
1151
2269
|
};
|
|
1152
2270
|
Label: {
|
|
1153
|
-
<T extends react.ElementType = "label">(props: SelectLabelProps<T>):
|
|
2271
|
+
<T extends react.ElementType = "label">(props: SelectLabelProps<T>): react.JSX.Element;
|
|
1154
2272
|
displayName: string;
|
|
1155
2273
|
};
|
|
1156
2274
|
Separator: {
|
|
1157
|
-
<T extends react.ElementType = "div">(props: SelectSeparatorProps<T>):
|
|
2275
|
+
<T extends react.ElementType = "div">(props: SelectSeparatorProps<T>): react.JSX.Element;
|
|
2276
|
+
displayName: string;
|
|
2277
|
+
};
|
|
2278
|
+
Arrow: {
|
|
2279
|
+
<T extends react.ElementType = "svg">(props: SelectArrowProps<T>): react.JSX.Element;
|
|
2280
|
+
displayName: string;
|
|
2281
|
+
};
|
|
2282
|
+
};
|
|
2283
|
+
|
|
2284
|
+
/** Axis the rail runs along. A vertical rail runs bottom-to-top: the bottom edge is `min`. */
|
|
2285
|
+
type SliderOrientation = 'horizontal' | 'vertical';
|
|
2286
|
+
/** Visual scale. */
|
|
2287
|
+
type SliderSize = 'small' | 'base' | 'large';
|
|
2288
|
+
/** Fill color variant. */
|
|
2289
|
+
type SliderVariant = 'primary' | 'info' | 'success' | 'danger' | 'warning';
|
|
2290
|
+
/** When the drag value bubble is shown. */
|
|
2291
|
+
type SliderTooltip = 'auto' | 'always' | 'never';
|
|
2292
|
+
/** How the rail fill renders. `none` drops the fill but keeps the rail. */
|
|
2293
|
+
type SliderTrackMode = 'normal' | 'inverted' | 'none';
|
|
2294
|
+
/**
|
|
2295
|
+
* Committed slider value. A single `number` when `range` is unset, an ascending
|
|
2296
|
+
* array when `range` is set. Takeoff Core's `tk-slider` commits a `[min, max]`
|
|
2297
|
+
* pair only; the array widens that so a range can carry more than two handles.
|
|
2298
|
+
*/
|
|
2299
|
+
type SliderValue = number | number[];
|
|
2300
|
+
type SliderSlot = 'root';
|
|
2301
|
+
type SliderTrackSlot = 'root';
|
|
2302
|
+
type SliderRangeSlot = 'root';
|
|
2303
|
+
type SliderThumbSlot = 'root' | 'tooltip' | 'arrow';
|
|
2304
|
+
type SliderTicksSlot = 'root' | 'tick';
|
|
2305
|
+
type SliderValueSlot = 'root';
|
|
2306
|
+
/**
|
|
2307
|
+
* Value surface for a single-thumb slider. `range` is optional here so the
|
|
2308
|
+
* single form stays the zero-config default.
|
|
2309
|
+
*/
|
|
2310
|
+
interface SliderSingleValueProps {
|
|
2311
|
+
/**
|
|
2312
|
+
* Renders a multi-handle slider that commits an array instead of a number.
|
|
2313
|
+
* `range` is a discriminated union (`false` vs `true`), not a plain
|
|
2314
|
+
* `boolean`, so a value typed `boolean` matches neither arm — to toggle mode
|
|
2315
|
+
* at runtime, branch on the flag and render the single vs range `<Slider>`
|
|
2316
|
+
* explicitly rather than passing `range={isRange}`.
|
|
2317
|
+
* @defaultValue false
|
|
2318
|
+
*/
|
|
2319
|
+
range?: false;
|
|
2320
|
+
/**
|
|
2321
|
+
* Controlled value. Clamped into `[min, max]` and snapped to `step`. Takes
|
|
2322
|
+
* precedence: passing this alongside `defaultValue` makes the slider
|
|
2323
|
+
* controlled and ignores `defaultValue` (a dev-only warning is logged).
|
|
2324
|
+
*/
|
|
2325
|
+
value?: number;
|
|
2326
|
+
/**
|
|
2327
|
+
* Initial value for uncontrolled usage. Ignored when `value` is also given.
|
|
2328
|
+
* Controlled/uncontrolled mode is latched on the first render, so a `value`
|
|
2329
|
+
* that later becomes `undefined` does not hand control back.
|
|
2330
|
+
* @defaultValue `min`
|
|
2331
|
+
*/
|
|
2332
|
+
defaultValue?: number;
|
|
2333
|
+
/** Fired on every committed value change while interacting — each drag frame, keystroke, or track press. */
|
|
2334
|
+
onValueChange?: (value: number) => void;
|
|
2335
|
+
/**
|
|
2336
|
+
* Fired once at the end of an interaction with the final value: on pointer
|
|
2337
|
+
* release after a drag or track press, and once per committed keystroke. Use
|
|
2338
|
+
* it when only the settled value matters (persist, refetch, validate), while
|
|
2339
|
+
* `onValueChange` streams the live value.
|
|
2340
|
+
*/
|
|
2341
|
+
onValueChangeEnd?: (value: number) => void;
|
|
2342
|
+
}
|
|
2343
|
+
/** Value surface for a two-thumb range slider. */
|
|
2344
|
+
interface SliderRangeValueProps {
|
|
2345
|
+
/**
|
|
2346
|
+
* Renders one thumb per entry of `value` / `defaultValue` (two by default)
|
|
2347
|
+
* and commits an ascending array.
|
|
2348
|
+
*/
|
|
2349
|
+
range: true;
|
|
2350
|
+
/**
|
|
2351
|
+
* Controlled values, one per handle — its length decides how many thumbs
|
|
2352
|
+
* render. Fewer than two entries fall back to `[min, max]`, as with
|
|
2353
|
+
* `defaultValue`. Each entry is clamped into `[min, max]`, snapped to `step`,
|
|
2354
|
+
* and the array is ordered ascending. Takes precedence: passing this alongside
|
|
2355
|
+
* `defaultValue` makes the slider controlled and ignores `defaultValue`.
|
|
2356
|
+
*/
|
|
2357
|
+
value?: number[];
|
|
2358
|
+
/**
|
|
2359
|
+
* Initial values for uncontrolled usage, one per handle. Fewer than two
|
|
2360
|
+
* entries falls back to `[min, max]`. Ignored when `value` is also given.
|
|
2361
|
+
* Controlled/uncontrolled mode is latched on the first render, so a `value`
|
|
2362
|
+
* that later becomes `undefined` does not hand control back.
|
|
2363
|
+
* @defaultValue `[min, max]`
|
|
2364
|
+
*/
|
|
2365
|
+
defaultValue?: number[];
|
|
2366
|
+
/** Fired on every committed value change while interacting — each drag frame, keystroke, or track press. */
|
|
2367
|
+
onValueChange?: (value: number[]) => void;
|
|
2368
|
+
/**
|
|
2369
|
+
* Fired once at the end of an interaction with the final values: on pointer
|
|
2370
|
+
* release after a drag or track press, and once per committed keystroke.
|
|
2371
|
+
*/
|
|
2372
|
+
onValueChangeEnd?: (value: number[]) => void;
|
|
2373
|
+
}
|
|
2374
|
+
/**
|
|
2375
|
+
* Props owned by takeoff-v2. There is no Spar Slider primitive to `Pick`
|
|
2376
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
2377
|
+
* rationale in `base.ts`).
|
|
2378
|
+
*/
|
|
2379
|
+
interface SliderOwnProps {
|
|
2380
|
+
/**
|
|
2381
|
+
* Lowest selectable value. Non-finite values fall back to the default.
|
|
2382
|
+
* @defaultValue 0
|
|
2383
|
+
*/
|
|
2384
|
+
min?: number;
|
|
2385
|
+
/**
|
|
2386
|
+
* Highest selectable value. Non-finite values and values at or below `min`
|
|
2387
|
+
* fall back to `min + 100` (with a dev-only console warning, since an
|
|
2388
|
+
* inverted range is a consumer bug).
|
|
2389
|
+
* @defaultValue 100
|
|
2390
|
+
*/
|
|
2391
|
+
max?: number;
|
|
2392
|
+
/**
|
|
2393
|
+
* Granularity the value snaps to, counted from `min`. Non-finite and
|
|
2394
|
+
* non-positive values fall back to the default.
|
|
2395
|
+
* @defaultValue 1
|
|
2396
|
+
*/
|
|
2397
|
+
step?: number;
|
|
2398
|
+
/**
|
|
2399
|
+
* Minimum gap kept between adjacent thumbs of a range, in value units. With a
|
|
2400
|
+
* positive gap the handles can no longer cross — dragging one into another
|
|
2401
|
+
* stops it against its neighbour instead of swapping. Ignored by a single
|
|
2402
|
+
* slider; initial values are not reshaped, so seed them at least this far apart.
|
|
2403
|
+
* @defaultValue 0
|
|
2404
|
+
*/
|
|
2405
|
+
minDistance?: number;
|
|
2406
|
+
/**
|
|
2407
|
+
* Blocks interaction and mutes the fill. Inherits the surrounding `Field`'s
|
|
2408
|
+
* disabled state when composed inside one.
|
|
2409
|
+
* @defaultValue false
|
|
2410
|
+
*/
|
|
2411
|
+
disabled?: boolean;
|
|
2412
|
+
/**
|
|
2413
|
+
* Renders the value but blocks every value-changing interaction. Inherits
|
|
2414
|
+
* the surrounding `Field`'s read-only state when composed inside one.
|
|
2415
|
+
* @defaultValue false
|
|
2416
|
+
*/
|
|
2417
|
+
readOnly?: boolean;
|
|
2418
|
+
/**
|
|
2419
|
+
* Marks the slider as required for form validation. Inherits the
|
|
2420
|
+
* surrounding `Field`'s required state when composed inside one.
|
|
2421
|
+
* @defaultValue false
|
|
2422
|
+
*/
|
|
2423
|
+
required?: boolean;
|
|
2424
|
+
/**
|
|
2425
|
+
* Applies the invalid treatment and sets `aria-invalid` on every thumb.
|
|
2426
|
+
* Inherits the surrounding `Field`'s invalid state when composed inside one.
|
|
2427
|
+
* @defaultValue false
|
|
2428
|
+
*/
|
|
2429
|
+
invalid?: boolean;
|
|
2430
|
+
/**
|
|
2431
|
+
* Axis the rail runs along. A vertical rail runs bottom-to-top and fills its
|
|
2432
|
+
* container's height (as a horizontal rail fills its width), so give the
|
|
2433
|
+
* parent a height.
|
|
2434
|
+
* @defaultValue 'horizontal'
|
|
2435
|
+
*/
|
|
2436
|
+
orientation?: SliderOrientation;
|
|
2437
|
+
/**
|
|
2438
|
+
* Visual scale — changes track thickness and thumb diameter.
|
|
2439
|
+
* @defaultValue 'base'
|
|
2440
|
+
*/
|
|
2441
|
+
size?: SliderSize;
|
|
2442
|
+
/**
|
|
2443
|
+
* Fill color variant.
|
|
2444
|
+
* @defaultValue 'primary'
|
|
2445
|
+
*/
|
|
2446
|
+
variant?: SliderVariant;
|
|
2447
|
+
/**
|
|
2448
|
+
* How the rail fill renders. `normal` fills from the start to the thumb (or
|
|
2449
|
+
* between a range's thumbs); `inverted` fills the *complement* instead — from
|
|
2450
|
+
* the thumb to the end for a single slider, and outside the two handles for a
|
|
2451
|
+
* range; `none` drops the fill entirely, leaving just the rail and the thumbs.
|
|
2452
|
+
* @defaultValue 'normal'
|
|
2453
|
+
*/
|
|
2454
|
+
track?: SliderTrackMode;
|
|
2455
|
+
/**
|
|
2456
|
+
* When the drag value bubble is shown. `auto` reveals it while the handle is
|
|
2457
|
+
* dragged or keyboard-focused; `always` pins it open; `never` hides it
|
|
2458
|
+
* entirely — handy when a `Slider.Value` already surfaces the number. A
|
|
2459
|
+
* disabled slider hides the bubble regardless.
|
|
2460
|
+
* @defaultValue 'auto'
|
|
2461
|
+
*/
|
|
2462
|
+
tooltip?: SliderTooltip;
|
|
2463
|
+
/**
|
|
2464
|
+
* Formats a value for every readout — the drag tooltip, `Slider.Value`, and
|
|
2465
|
+
* `aria-valuetext`. Returns a string, so it formats the value rather than
|
|
2466
|
+
* overriding the rendered node; use `Slider.Thumb` / `Slider.Value` children
|
|
2467
|
+
* for richer content. When omitted, the raw number is shown and
|
|
2468
|
+
* `aria-valuetext` is dropped.
|
|
2469
|
+
*/
|
|
2470
|
+
formatValue?: (value: number) => string;
|
|
2471
|
+
/**
|
|
2472
|
+
* Name submitted with the form. A single slider submits one entry under this
|
|
2473
|
+
* exact name; a two-handle range submits `-min` / `-max`, and a range with
|
|
2474
|
+
* more handles submits each value under a 1-based `-1`, `-2`, … suffix so no
|
|
2475
|
+
* handle is dropped.
|
|
2476
|
+
*/
|
|
2477
|
+
name?: string;
|
|
2478
|
+
/** `id` of the form the hidden inputs belong to. */
|
|
2479
|
+
form?: string;
|
|
2480
|
+
/**
|
|
2481
|
+
* Optional anatomy override. When omitted, `Slider` renders the default
|
|
2482
|
+
* anatomy — `Slider.Track`, wrapping `Slider.Range` and one thumb per value.
|
|
2483
|
+
* Compose the parts explicitly to add an indicator such as `Slider.Ticks`
|
|
2484
|
+
* below the rail.
|
|
2485
|
+
*/
|
|
2486
|
+
children?: ReactNode;
|
|
2487
|
+
/** Per-slot class name overrides. */
|
|
2488
|
+
classNames?: ClassNamesMap<SliderSlot>;
|
|
2489
|
+
/** Per-slot HTML attribute overrides. */
|
|
2490
|
+
slotProps?: SlotPropsMap<SliderSlot>;
|
|
2491
|
+
}
|
|
2492
|
+
/**
|
|
2493
|
+
* Public props for the Slider root — the layout wrapper and state owner.
|
|
2494
|
+
* Each thumb is the `role="slider"` a11y owner, so a range root additionally
|
|
2495
|
+
* takes `role="group"` to tie the pair together. Renders the default anatomy
|
|
2496
|
+
* when no children are given. Compose inside a `Field` with `Field.Label` for
|
|
2497
|
+
* an automatically wired visible label.
|
|
2498
|
+
*/
|
|
2499
|
+
type SliderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SliderOwnProps & (SliderSingleValueProps | SliderRangeValueProps)>;
|
|
2500
|
+
interface SliderTrackOwnProps {
|
|
2501
|
+
/**
|
|
2502
|
+
* Track anatomy override. When omitted, `Slider.Track` renders the default
|
|
2503
|
+
* `Slider.Range` plus one thumb per value.
|
|
2504
|
+
*/
|
|
2505
|
+
children?: ReactNode;
|
|
2506
|
+
/** Per-slot class name overrides. */
|
|
2507
|
+
classNames?: ClassNamesMap<SliderTrackSlot>;
|
|
2508
|
+
/** Per-slot HTML attribute overrides. */
|
|
2509
|
+
slotProps?: SlotPropsMap<SliderTrackSlot>;
|
|
2510
|
+
}
|
|
2511
|
+
/**
|
|
2512
|
+
* Public props for `Slider.Track` — the rail the thumbs travel along. Owns
|
|
2513
|
+
* the press-to-seek interaction: pressing the rail moves the nearest thumb to
|
|
2514
|
+
* that position and starts dragging it.
|
|
2515
|
+
*/
|
|
2516
|
+
type SliderTrackProps = SliderTrackOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2517
|
+
ref?: Ref<HTMLDivElement>;
|
|
2518
|
+
};
|
|
2519
|
+
interface SliderRangeOwnProps {
|
|
2520
|
+
/** Per-slot class name overrides. */
|
|
2521
|
+
classNames?: ClassNamesMap<SliderRangeSlot>;
|
|
2522
|
+
/** Per-slot HTML attribute overrides. */
|
|
2523
|
+
slotProps?: SlotPropsMap<SliderRangeSlot>;
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
* Public props for `Slider.Range` — the filled portion of the track. Takes no
|
|
2527
|
+
* children; its offset and length are written inline from the committed
|
|
2528
|
+
* values (a continuous value is not a `data-*` hook).
|
|
2529
|
+
*/
|
|
2530
|
+
type SliderRangeProps = SliderRangeOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2531
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2532
|
+
};
|
|
2533
|
+
/** State handed to `Slider.Thumb` function-children. */
|
|
2534
|
+
interface SliderThumbRenderProps {
|
|
2535
|
+
/** Committed value of this thumb. */
|
|
2536
|
+
value: number;
|
|
2537
|
+
/** `value` passed through the root's `formatValue`, or stringified when the root has no formatter. */
|
|
2538
|
+
formatted: string;
|
|
2539
|
+
/** Which value this thumb controls. */
|
|
2540
|
+
index: number;
|
|
2541
|
+
/** Whether the pointer currently controls this thumb. */
|
|
2542
|
+
isDragging: boolean;
|
|
2543
|
+
/** Whether this thumb holds keyboard focus. */
|
|
2544
|
+
isFocused: boolean;
|
|
2545
|
+
}
|
|
2546
|
+
interface SliderThumbOwnProps {
|
|
2547
|
+
/**
|
|
2548
|
+
* Which value this thumb controls. The default anatomy renders index `0`
|
|
2549
|
+
* (and `1` for a range slider); pass it explicitly only when composing the
|
|
2550
|
+
* thumbs by hand.
|
|
2551
|
+
* @defaultValue 0
|
|
2552
|
+
*/
|
|
2553
|
+
index?: number;
|
|
2554
|
+
/**
|
|
2555
|
+
* Disables just this handle: it cannot be moved by pointer or keyboard and is
|
|
2556
|
+
* skipped as a drag target, while the other thumbs stay interactive. A
|
|
2557
|
+
* neighbouring thumb dragged into a disabled one stops against it rather than
|
|
2558
|
+
* pushing it. The whole slider's `disabled` still disables every thumb.
|
|
2559
|
+
* @defaultValue false
|
|
2560
|
+
*/
|
|
2561
|
+
disabled?: boolean;
|
|
2562
|
+
/**
|
|
2563
|
+
* Content of the value bubble. When omitted, the formatted value renders. A
|
|
2564
|
+
* plain node replaces it with static content; a function receives this
|
|
2565
|
+
* thumb's `value` / `formatted` / `index` / `isDragging` / `isFocused` for
|
|
2566
|
+
* content that reacts to the drag. Either form swaps only what the bubble
|
|
2567
|
+
* shows — the handle and the bubble chrome are always the thumb's.
|
|
2568
|
+
*/
|
|
2569
|
+
children?: ReactNode | ((state: SliderThumbRenderProps) => ReactNode);
|
|
2570
|
+
/** Per-slot class name overrides. */
|
|
2571
|
+
classNames?: ClassNamesMap<SliderThumbSlot>;
|
|
2572
|
+
/** Per-slot HTML attribute overrides. */
|
|
2573
|
+
slotProps?: SlotPropsMap<SliderThumbSlot>;
|
|
2574
|
+
}
|
|
2575
|
+
/**
|
|
2576
|
+
* Public props for `Slider.Thumb` — the draggable handle and the
|
|
2577
|
+
* `role="slider"` a11y owner (keyboard, ARIA value surface, focus). Renders a
|
|
2578
|
+
* CSS-positioned value bubble whose content `children` replace.
|
|
2579
|
+
*/
|
|
2580
|
+
type SliderThumbProps = SliderThumbOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2581
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2582
|
+
};
|
|
2583
|
+
interface SliderTicksOwnProps {
|
|
2584
|
+
/** Per-slot class name overrides. */
|
|
2585
|
+
classNames?: ClassNamesMap<SliderTicksSlot>;
|
|
2586
|
+
/** Per-slot HTML attribute overrides. */
|
|
2587
|
+
slotProps?: SlotPropsMap<SliderTicksSlot>;
|
|
2588
|
+
}
|
|
2589
|
+
/**
|
|
2590
|
+
* Public props for `Slider.Ticks` — decorative (`aria-hidden`) marks at every
|
|
2591
|
+
* step. Opt-in: compose it after `Slider.Track` to show the step grid.
|
|
2592
|
+
*/
|
|
2593
|
+
type SliderTicksProps = SliderTicksOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2594
|
+
ref?: Ref<HTMLDivElement>;
|
|
2595
|
+
};
|
|
2596
|
+
/** State handed to `Slider.Value` function-children. */
|
|
2597
|
+
interface SliderValueRenderProps {
|
|
2598
|
+
/** Committed thumb values — one entry, or two ascending entries for a range. */
|
|
2599
|
+
values: number[];
|
|
2600
|
+
/** Each value passed through the root's `formatValue`, or stringified when the root has no formatter. */
|
|
2601
|
+
formatted: string[];
|
|
2602
|
+
/** Mirrors the root's `range` prop. */
|
|
2603
|
+
range: boolean;
|
|
2604
|
+
}
|
|
2605
|
+
interface SliderValueOwnProps {
|
|
2606
|
+
/**
|
|
2607
|
+
* Readout content. When omitted, `Slider.Value` renders the formatted
|
|
2608
|
+
* value — both entries joined by an en dash for a range. A function receives
|
|
2609
|
+
* the committed values and their formatted strings, which is the only way to
|
|
2610
|
+
* read the value of an **uncontrolled** slider without lifting state out of
|
|
2611
|
+
* the component.
|
|
2612
|
+
*/
|
|
2613
|
+
children?: ReactNode | ((state: SliderValueRenderProps) => ReactNode);
|
|
2614
|
+
/** Per-slot class name overrides. */
|
|
2615
|
+
classNames?: ClassNamesMap<SliderValueSlot>;
|
|
2616
|
+
/** Per-slot HTML attribute overrides. */
|
|
2617
|
+
slotProps?: SlotPropsMap<SliderValueSlot>;
|
|
2618
|
+
}
|
|
2619
|
+
/**
|
|
2620
|
+
* Public props for `Slider.Value` — decorative (`aria-hidden`) value readout.
|
|
2621
|
+
* Each value is already announced through its thumb's `aria-valuenow`, so the
|
|
2622
|
+
* text carries no accessibility semantics. Opt-in: compose it alongside
|
|
2623
|
+
* `Slider.Track`.
|
|
2624
|
+
*/
|
|
2625
|
+
type SliderValueProps = SliderValueOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2626
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2627
|
+
};
|
|
2628
|
+
declare module '../../core/theme' {
|
|
2629
|
+
interface ComponentThemeRegistry {
|
|
2630
|
+
Slider: ComponentThemeConfig<SliderProps, SliderSlot>;
|
|
2631
|
+
SliderTrack: ComponentThemeConfig<SliderTrackProps, SliderTrackSlot>;
|
|
2632
|
+
SliderRange: ComponentThemeConfig<SliderRangeProps, SliderRangeSlot>;
|
|
2633
|
+
SliderThumb: ComponentThemeConfig<SliderThumbProps, SliderThumbSlot>;
|
|
2634
|
+
SliderTicks: ComponentThemeConfig<SliderTicksProps, SliderTicksSlot>;
|
|
2635
|
+
SliderValue: ComponentThemeConfig<SliderValueProps, SliderValueSlot>;
|
|
2636
|
+
}
|
|
2637
|
+
}
|
|
2638
|
+
|
|
2639
|
+
declare const Slider: {
|
|
2640
|
+
<T extends react.ElementType = "div">(props: SliderProps<T>): react.JSX.Element;
|
|
2641
|
+
displayName: string;
|
|
2642
|
+
} & {
|
|
2643
|
+
Track: {
|
|
2644
|
+
(props: SliderTrackProps): react.JSX.Element;
|
|
2645
|
+
displayName: string;
|
|
2646
|
+
};
|
|
2647
|
+
Range: {
|
|
2648
|
+
(props: SliderRangeProps): react.JSX.Element;
|
|
2649
|
+
displayName: string;
|
|
2650
|
+
};
|
|
2651
|
+
Thumb: {
|
|
2652
|
+
(props: SliderThumbProps): react.JSX.Element;
|
|
2653
|
+
displayName: string;
|
|
2654
|
+
};
|
|
2655
|
+
Ticks: {
|
|
2656
|
+
(props: SliderTicksProps): react.JSX.Element | null;
|
|
2657
|
+
displayName: string;
|
|
2658
|
+
};
|
|
2659
|
+
Value: {
|
|
2660
|
+
(props: SliderValueProps): react.JSX.Element;
|
|
2661
|
+
displayName: string;
|
|
2662
|
+
};
|
|
2663
|
+
};
|
|
2664
|
+
|
|
2665
|
+
type SpinnerSize = 'small' | 'base' | 'large' | 'xlarge';
|
|
2666
|
+
type SpinnerAppearance = 'rounded' | 'dots' | 'lines' | 'pulse' | 'threeDots' | 'loader' | 'logo';
|
|
2667
|
+
type SpinnerVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning';
|
|
2668
|
+
type SpinnerSlot = 'root' | 'indicator';
|
|
2669
|
+
interface SpinnerProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
2670
|
+
/**
|
|
2671
|
+
* Size scale.
|
|
2672
|
+
* @defaultValue 'base'
|
|
2673
|
+
*/
|
|
2674
|
+
size?: SpinnerSize;
|
|
2675
|
+
/**
|
|
2676
|
+
* Visual spinner style.
|
|
2677
|
+
* @defaultValue 'rounded'
|
|
2678
|
+
*/
|
|
2679
|
+
appearance?: SpinnerAppearance;
|
|
2680
|
+
/**
|
|
2681
|
+
* Color variant.
|
|
2682
|
+
* @defaultValue 'neutral'
|
|
2683
|
+
*/
|
|
2684
|
+
variant?: SpinnerVariant;
|
|
2685
|
+
/** Ref forwarded to the root span element. */
|
|
2686
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2687
|
+
/** Per-slot extra classes. */
|
|
2688
|
+
classNames?: ClassNamesMap<SpinnerSlot>;
|
|
2689
|
+
/** Per-slot HTML-attribute overrides. */
|
|
2690
|
+
slotProps?: SlotPropsMap<SpinnerSlot>;
|
|
2691
|
+
}
|
|
2692
|
+
declare module '../../core/theme' {
|
|
2693
|
+
interface ComponentThemeRegistry {
|
|
2694
|
+
Spinner: ComponentThemeConfig<SpinnerProps, SpinnerSlot>;
|
|
2695
|
+
}
|
|
2696
|
+
}
|
|
2697
|
+
|
|
2698
|
+
declare const Spinner: {
|
|
2699
|
+
(props: SpinnerProps): react.JSX.Element;
|
|
2700
|
+
displayName: string;
|
|
2701
|
+
};
|
|
2702
|
+
|
|
2703
|
+
/** Layout axis of the step list. */
|
|
2704
|
+
type StepperOrientation = 'horizontal' | 'vertical';
|
|
2705
|
+
/**
|
|
2706
|
+
* Display mode. `'default'` renders indicators with connecting rails; `'compact'`
|
|
2707
|
+
* drops the rails in favor of a progress border on each step.
|
|
2708
|
+
*/
|
|
2709
|
+
type StepperMode = 'default' | 'compact';
|
|
2710
|
+
/** Density scale for indicators and typography. */
|
|
2711
|
+
type StepperSize = 'large' | 'base' | 'small' | 'xsmall';
|
|
2712
|
+
/**
|
|
2713
|
+
* Resolved progress status of a step. Error and disabled are exposed as
|
|
2714
|
+
* separate modifier states so an active/completed step can also be errored.
|
|
2715
|
+
*/
|
|
2716
|
+
type StepperStepStatus = 'inactive' | 'active' | 'completed';
|
|
2717
|
+
/** Payload of the root `onStepClick` callback. */
|
|
2718
|
+
interface StepperStepClickDetail {
|
|
2719
|
+
/** Zero-based index of the pressed step. */
|
|
2720
|
+
index: number;
|
|
2721
|
+
/** Status of the pressed step at press time. */
|
|
2722
|
+
status: StepperStepStatus;
|
|
2723
|
+
}
|
|
2724
|
+
/** State passed to a `Stepper.Item` `indicator` render function. */
|
|
2725
|
+
interface StepperIndicatorState {
|
|
2726
|
+
/** Resolved progress status of the step. */
|
|
2727
|
+
status: StepperStepStatus;
|
|
2728
|
+
/** Zero-based index of the step. */
|
|
2729
|
+
index: number;
|
|
2730
|
+
}
|
|
2731
|
+
type StepperSlot = 'root';
|
|
2732
|
+
type StepperItemSlot = 'root' | 'trigger' | 'rail' | 'indicator' | 'content';
|
|
2733
|
+
type StepperTitleSlot = 'root';
|
|
2734
|
+
type StepperDescriptionSlot = 'root';
|
|
2735
|
+
/**
|
|
2736
|
+
* Props owned by takeoff-v2. There is no Spar Stepper primitive to `Pick`
|
|
2737
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
2738
|
+
* rationale in `base.ts`).
|
|
2739
|
+
*/
|
|
2740
|
+
interface StepperOwnProps {
|
|
2741
|
+
/**
|
|
2742
|
+
* Currently active step index (controlled). Not clamped: an out-of-range
|
|
2743
|
+
* index renders every step completed (or inactive) with no active step.
|
|
2744
|
+
*/
|
|
2745
|
+
active?: number;
|
|
2746
|
+
/**
|
|
2747
|
+
* Initially active step index (uncontrolled).
|
|
2748
|
+
* @defaultValue 0
|
|
2749
|
+
*/
|
|
2750
|
+
defaultActive?: number;
|
|
2751
|
+
/** Fires with the new step index when the active step changes. */
|
|
2752
|
+
onActiveChange?: (index: number) => void;
|
|
2753
|
+
/**
|
|
2754
|
+
* Fires on selectable step presses, and on the active step when pressed again,
|
|
2755
|
+
* with the step's index and progress status. Disabled, non-clickable, and
|
|
2756
|
+
* linear-blocked steps emit nothing.
|
|
2757
|
+
*/
|
|
2758
|
+
onStepClick?: (detail: StepperStepClickDetail) => void;
|
|
2759
|
+
/**
|
|
2760
|
+
* Layout axis of the step list.
|
|
2761
|
+
* @defaultValue 'horizontal'
|
|
2762
|
+
*/
|
|
2763
|
+
orientation?: StepperOrientation;
|
|
2764
|
+
/**
|
|
2765
|
+
* Display mode — indicators with connecting rails (`'default'`) or a progress
|
|
2766
|
+
* border per step without rails (`'compact'`).
|
|
2767
|
+
* @defaultValue 'default'
|
|
2768
|
+
*/
|
|
2769
|
+
mode?: StepperMode;
|
|
2770
|
+
/**
|
|
2771
|
+
* Restricts navigation to a linear progression: any previous step, or the
|
|
2772
|
+
* next step when the current one is neither errored nor disabled.
|
|
2773
|
+
* @defaultValue false
|
|
2774
|
+
*/
|
|
2775
|
+
linear?: boolean;
|
|
2776
|
+
/**
|
|
2777
|
+
* Density scale for indicators and typography.
|
|
2778
|
+
* @defaultValue 'base'
|
|
2779
|
+
*/
|
|
2780
|
+
size?: StepperSize;
|
|
2781
|
+
/**
|
|
2782
|
+
* Flips indicators and content along the cross axis.
|
|
2783
|
+
* @defaultValue false
|
|
2784
|
+
*/
|
|
2785
|
+
reverse?: boolean;
|
|
2786
|
+
/**
|
|
2787
|
+
* Accessible status suffix appended to a completed step's name — the check
|
|
2788
|
+
* glyph alone is invisible to assistive technology. Localize per stepper;
|
|
2789
|
+
* an empty string drops the suffix.
|
|
2790
|
+
* @defaultValue 'completed'
|
|
2791
|
+
*/
|
|
2792
|
+
completedLabel?: string;
|
|
2793
|
+
/**
|
|
2794
|
+
* Accessible status suffix appended to an errored step's name — the error
|
|
2795
|
+
* glyph alone is invisible to assistive technology. Localize per stepper;
|
|
2796
|
+
* an empty string drops the suffix.
|
|
2797
|
+
* @defaultValue 'error'
|
|
2798
|
+
*/
|
|
2799
|
+
errorLabel?: string;
|
|
2800
|
+
/** Per-slot class name overrides. */
|
|
2801
|
+
classNames?: ClassNamesMap<StepperSlot>;
|
|
2802
|
+
/** Per-slot HTML attribute overrides. */
|
|
2803
|
+
slotProps?: SlotPropsMap<StepperSlot>;
|
|
2804
|
+
}
|
|
2805
|
+
/**
|
|
2806
|
+
* Public props for the Stepper root. Children must be `Stepper.Item`
|
|
2807
|
+
* elements — the root derives each step's index from its position in
|
|
2808
|
+
* `children`. Arrays (e.g. `items.map(...)`) flatten into one index per
|
|
2809
|
+
* item, but Fragments do not: items wrapped in `<>…</>` share a single
|
|
2810
|
+
* index, so render items directly or from arrays.
|
|
2811
|
+
*
|
|
2812
|
+
* Wrapping `Stepper.Item` in an intermediary component keeps click gating
|
|
2813
|
+
* correct, but first-paint/SSR gating reads `error`/`disabled`/`isClickable`
|
|
2814
|
+
* off each direct child's props — forward them on the wrapper (or accept a
|
|
2815
|
+
* one-paint `data-clickable`/`aria-disabled` correction after hydration).
|
|
2816
|
+
*
|
|
2817
|
+
* Arrow keys (following `orientation`), Home, and End move focus between
|
|
2818
|
+
* step triggers; Tab still reaches every clickable step.
|
|
2819
|
+
*
|
|
2820
|
+
* Overriding `as` on the root leaves items rendering `<li>` — override the
|
|
2821
|
+
* item's `as` in tandem to keep the markup valid.
|
|
2822
|
+
*/
|
|
2823
|
+
type StepperProps<T extends ElementType = 'ol'> = PolymorphicProps<'ol', T, StepperOwnProps>;
|
|
2824
|
+
interface StepperItemOwnProps {
|
|
2825
|
+
/** Marks the step as errored without changing its progress status. */
|
|
2826
|
+
error?: boolean;
|
|
2827
|
+
/**
|
|
2828
|
+
* Disables the step. The trigger renders as a natively disabled button:
|
|
2829
|
+
* unfocusable, unselectable, and silent.
|
|
2830
|
+
*/
|
|
2831
|
+
disabled?: boolean;
|
|
2832
|
+
/**
|
|
2833
|
+
* Whether the step can be activated by pressing it. Non-clickable steps
|
|
2834
|
+
* stay visible in the flow but are removed from the tab order.
|
|
2835
|
+
* @defaultValue true
|
|
2836
|
+
*/
|
|
2837
|
+
isClickable?: boolean;
|
|
2838
|
+
/**
|
|
2839
|
+
* Custom indicator content. Replaces the built-in status glyph (check,
|
|
2840
|
+
* close, or dot) for every status except `disabled`. Pass a function to
|
|
2841
|
+
* render by status — returning `undefined` or `null` falls back to the
|
|
2842
|
+
* built-in glyphs, so numbered steps can surface the check once completed.
|
|
2843
|
+
*/
|
|
2844
|
+
indicator?: ReactNode | ((state: StepperIndicatorState) => ReactNode);
|
|
2845
|
+
/** Step content — typically `Stepper.Title` and `Stepper.Description`. */
|
|
2846
|
+
children?: ReactNode;
|
|
2847
|
+
/** Per-slot class name overrides. */
|
|
2848
|
+
classNames?: ClassNamesMap<StepperItemSlot>;
|
|
2849
|
+
/** Per-slot HTML attribute overrides. */
|
|
2850
|
+
slotProps?: SlotPropsMap<StepperItemSlot>;
|
|
2851
|
+
}
|
|
2852
|
+
type StepperItemProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, StepperItemOwnProps>;
|
|
2853
|
+
interface StepperTitleOwnProps {
|
|
2854
|
+
/** Step title content. */
|
|
2855
|
+
children?: ReactNode;
|
|
2856
|
+
/** Per-slot class name overrides. */
|
|
2857
|
+
classNames?: ClassNamesMap<StepperTitleSlot>;
|
|
2858
|
+
/** Per-slot HTML attribute overrides. */
|
|
2859
|
+
slotProps?: SlotPropsMap<StepperTitleSlot>;
|
|
2860
|
+
}
|
|
2861
|
+
type StepperTitleProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, StepperTitleOwnProps>;
|
|
2862
|
+
interface StepperDescriptionOwnProps {
|
|
2863
|
+
/** Step description content. */
|
|
2864
|
+
children?: ReactNode;
|
|
2865
|
+
/** Per-slot class name overrides. */
|
|
2866
|
+
classNames?: ClassNamesMap<StepperDescriptionSlot>;
|
|
2867
|
+
/** Per-slot HTML attribute overrides. */
|
|
2868
|
+
slotProps?: SlotPropsMap<StepperDescriptionSlot>;
|
|
2869
|
+
}
|
|
2870
|
+
type StepperDescriptionProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, StepperDescriptionOwnProps>;
|
|
2871
|
+
declare module '../../core/theme' {
|
|
2872
|
+
interface ComponentThemeRegistry {
|
|
2873
|
+
Stepper: ComponentThemeConfig<StepperProps>;
|
|
2874
|
+
StepperItem: ComponentThemeConfig<StepperItemProps, StepperItemSlot>;
|
|
2875
|
+
StepperTitle: ComponentThemeConfig<StepperTitleProps>;
|
|
2876
|
+
StepperDescription: ComponentThemeConfig<StepperDescriptionProps>;
|
|
2877
|
+
}
|
|
2878
|
+
}
|
|
2879
|
+
|
|
2880
|
+
declare const Stepper: {
|
|
2881
|
+
<T extends react.ElementType = "ol">(props: StepperProps<T>): react.JSX.Element;
|
|
2882
|
+
displayName: string;
|
|
2883
|
+
} & {
|
|
2884
|
+
Item: {
|
|
2885
|
+
<T extends react.ElementType = "li">(props: StepperItemProps<T>): react.JSX.Element;
|
|
2886
|
+
displayName: string;
|
|
2887
|
+
};
|
|
2888
|
+
Title: {
|
|
2889
|
+
<T extends react.ElementType = "span">(props: StepperTitleProps<T>): react.JSX.Element;
|
|
2890
|
+
displayName: string;
|
|
2891
|
+
};
|
|
2892
|
+
Description: {
|
|
2893
|
+
<T extends react.ElementType = "span">(props: StepperDescriptionProps<T>): react.JSX.Element;
|
|
1158
2894
|
displayName: string;
|
|
1159
2895
|
};
|
|
1160
2896
|
};
|
|
@@ -1232,16 +2968,441 @@ declare module '../../core/theme' {
|
|
|
1232
2968
|
}
|
|
1233
2969
|
|
|
1234
2970
|
declare const Switch: {
|
|
1235
|
-
<T extends react.ElementType = "button">(props: SwitchProps<T>):
|
|
2971
|
+
<T extends react.ElementType = "button">(props: SwitchProps<T>): react.JSX.Element;
|
|
1236
2972
|
displayName: string;
|
|
1237
2973
|
} & {
|
|
1238
2974
|
Indicator: {
|
|
1239
|
-
(props: SwitchIndicatorProps):
|
|
2975
|
+
(props: SwitchIndicatorProps): react.JSX.Element;
|
|
2976
|
+
displayName: string;
|
|
2977
|
+
};
|
|
2978
|
+
};
|
|
2979
|
+
|
|
2980
|
+
/**
|
|
2981
|
+
* Table is the catalog's first **TanStack-backed** component — its state core
|
|
2982
|
+
* is `@tanstack/react-table`, not a Spar primitive. Consequently these public
|
|
2983
|
+
* types are **v2-owned** (built on TanStack's generics) and carry no
|
|
2984
|
+
* `Pick<SparTableProps, …>` boundary: there is no `SparTable` to pick from, so
|
|
2985
|
+
* the `check-spar-pick.mjs` guard does not apply. See
|
|
2986
|
+
* `docs/rfc-table-component.md` §3.2 and §9.
|
|
2987
|
+
*/
|
|
2988
|
+
/** Density scale → `data-size`. */
|
|
2989
|
+
type TableSize = 'xsmall' | 'small' | 'base';
|
|
2990
|
+
/** Horizontal cell content alignment → `data-align`. */
|
|
2991
|
+
type TableAlign = 'start' | 'center' | 'end';
|
|
2992
|
+
/** Pins a column to a table edge → `data-sticky`. */
|
|
2993
|
+
type TableStickySide = 'left' | 'right';
|
|
2994
|
+
/**
|
|
2995
|
+
* Slot vocabulary for `classNames` / `slotProps`. Table is props-first with a
|
|
2996
|
+
* single public component, so every anatomy node is reached through these
|
|
2997
|
+
* slot keys rather than a public compound part (RFC §3.1, Tier 1.5).
|
|
2998
|
+
*/
|
|
2999
|
+
type TableSlot = 'root' | 'tableViewport' | 'table' | 'header' | 'headerRow' | 'headerCell' | 'headerContent' | 'sortTrigger' | 'sortIcon' | 'body' | 'row' | 'cell' | 'selectionCell' | 'expandCell' | 'expandButton' | 'expandedRow' | 'filterButton' | 'filterPanel' | 'pagination' | 'paginationInfo' | 'paginationNav' | 'paginationActions' | 'paginationSize' | 'paginationGoToPage' | 'empty' | 'loading';
|
|
3000
|
+
/**
|
|
3001
|
+
* How a column reads its value out of a row:
|
|
3002
|
+
*
|
|
3003
|
+
* - `keyof TData` — a top-level property key.
|
|
3004
|
+
* - `string` — a dot-path into nested data (`'user.role'`), resolved by
|
|
3005
|
+
* TanStack's `accessorKey`.
|
|
3006
|
+
* - `(row) => unknown` — an arbitrary projection.
|
|
3007
|
+
*/
|
|
3008
|
+
type TableColumnAccessor<TData> = keyof TData | (string & {}) | ((row: TData) => unknown);
|
|
3009
|
+
/**
|
|
3010
|
+
* Context handed to a column's {@link TableColumnFilter.render}. Table owns the
|
|
3011
|
+
* filter **plumbing** — the header trigger, the `Popover`, the active-state dot,
|
|
3012
|
+
* the TanStack wiring — and inverts control of the panel **content** to the
|
|
3013
|
+
* consumer (the same inversion as `cell` and `expansion.render`).
|
|
3014
|
+
*
|
|
3015
|
+
* `value` is whatever shape the consumer's control writes via `setValue`; Table
|
|
3016
|
+
* never interprets it beyond feeding TanStack's filter state and the
|
|
3017
|
+
* {@link TableColumnFilter.isActive} predicate.
|
|
3018
|
+
*/
|
|
3019
|
+
interface TableColumnFilterContext<TData = unknown> {
|
|
3020
|
+
/** Current filter value for this column (the last `setValue`, or `undefined`). */
|
|
3021
|
+
value: unknown;
|
|
3022
|
+
/** Write the column's filter value. Pass `undefined` to clear the filter. */
|
|
3023
|
+
setValue: (value: unknown) => void;
|
|
3024
|
+
/** Convenience for `setValue(undefined)`. */
|
|
3025
|
+
clear: () => void;
|
|
3026
|
+
/** The TanStack column — escape hatch for faceted values, sizing, etc. */
|
|
3027
|
+
column: Column<TData, unknown>;
|
|
3028
|
+
/** Close the filter popover (e.g. an apply-and-close button). */
|
|
3029
|
+
close: () => void;
|
|
3030
|
+
}
|
|
3031
|
+
/**
|
|
3032
|
+
* Built-in filter presets — the common cases, declarative and one-line. Table
|
|
3033
|
+
* renders the control (with v2 components) and wires the matching:
|
|
3034
|
+
*
|
|
3035
|
+
* - `text` → `Input`; case-insensitive substring match.
|
|
3036
|
+
* - `select` → single-choice `Select` dropdown; equality match.
|
|
3037
|
+
* - `multi-select` → multi-choice `Select` dropdown; membership match.
|
|
3038
|
+
* - `radio` → inline `Radio` group (single choice); equality match.
|
|
3039
|
+
* - `checkbox` → inline `Checkbox` list (multi choice); membership match.
|
|
3040
|
+
*
|
|
3041
|
+
* For anything outside this set (range, date, combobox, async options, …) use
|
|
3042
|
+
* the {@link TableColumnFilter.render} escape hatch instead.
|
|
3043
|
+
*/
|
|
3044
|
+
type TableColumnFilterType = 'text' | 'select' | 'multi-select' | 'radio' | 'checkbox';
|
|
3045
|
+
/** Option for the `select` / `multi-select` / `radio` / `checkbox` presets. */
|
|
3046
|
+
interface TableColumnFilterOption {
|
|
3047
|
+
/** Visible label. */
|
|
3048
|
+
label: ReactNode;
|
|
3049
|
+
/** Value written to filter state (matched against the stringified cell value). */
|
|
3050
|
+
value: string;
|
|
3051
|
+
}
|
|
3052
|
+
/**
|
|
3053
|
+
* Per-column filter config. **Two tiers** (mirroring Mantine/Material React
|
|
3054
|
+
* Table, AG Grid, MUI X — every mature table layers a shorthand under an escape
|
|
3055
|
+
* hatch):
|
|
3056
|
+
*
|
|
3057
|
+
* 1. **Preset** — the 90% case in one line. Pass a {@link TableColumnFilterType}
|
|
3058
|
+
* string (`filter: 'text'`) or this object with `type` (+ `options` for the
|
|
3059
|
+
* choice presets). Table renders the control and picks the matching fn.
|
|
3060
|
+
* 2. **Escape hatch** — pass `render` to own the panel content entirely (the
|
|
3061
|
+
* inversion of control used by `cell` / `expansion.render`). `type`/`options`
|
|
3062
|
+
* are ignored when `render` is present.
|
|
3063
|
+
*
|
|
3064
|
+
* Either way Table keeps owning the surrounding trigger + `Popover` (a real
|
|
3065
|
+
* React portal — also the fix for the legacy sticky-cell z-index bug).
|
|
3066
|
+
*/
|
|
3067
|
+
interface TableColumnFilter<TData = unknown> {
|
|
3068
|
+
/** Preset control to render. Ignored when {@link render} is supplied. */
|
|
3069
|
+
type?: TableColumnFilterType;
|
|
3070
|
+
/** Options for the `select` / `multi-select` / `radio` / `checkbox` presets. */
|
|
3071
|
+
options?: TableColumnFilterOption[];
|
|
3072
|
+
/** Placeholder for the `text` preset's input / `select` triggers. */
|
|
3073
|
+
placeholder?: string;
|
|
3074
|
+
/**
|
|
3075
|
+
* Escape hatch: render the filter control yourself. Receives the column's
|
|
3076
|
+
* value + setter (see {@link TableColumnFilterContext}). When present, the
|
|
3077
|
+
* preset fields above are ignored.
|
|
3078
|
+
*/
|
|
3079
|
+
render?: (ctx: TableColumnFilterContext<TData>) => ReactNode;
|
|
3080
|
+
/**
|
|
3081
|
+
* Whether a given filter value counts as "active" — drives the trigger's
|
|
3082
|
+
* active indicator. Defaults to a sensible heuristic (non-empty string,
|
|
3083
|
+
* non-empty array, or any non-nullish value); presets set this for you.
|
|
3084
|
+
*/
|
|
3085
|
+
isActive?: (value: unknown) => boolean;
|
|
3086
|
+
/**
|
|
3087
|
+
* Row-matching predicate (client mode). Presets supply their own; for a
|
|
3088
|
+
* custom `render` you can pass one here, else Table defaults by value shape:
|
|
3089
|
+
* `string` → substring, `array` → membership, else strict equality. Ignored
|
|
3090
|
+
* in `manual` mode, where the server matches. Signature is TanStack's
|
|
3091
|
+
* `FilterFn`, so any built-in name or fn works.
|
|
3092
|
+
*/
|
|
3093
|
+
filterFn?: FilterFn<TData>;
|
|
3094
|
+
}
|
|
3095
|
+
/**
|
|
3096
|
+
* Open-ended, low-frequency per-column config. Frequently-used closed-set
|
|
3097
|
+
* knobs (`align`, `sticky`, `width`) live top-level on {@link TableColumnDef};
|
|
3098
|
+
* everything else flows through here so the public column def stays lean
|
|
3099
|
+
* (RFC §3.2). Bound to TanStack's `columnDef.meta` via declaration merging
|
|
3100
|
+
* below.
|
|
3101
|
+
*/
|
|
3102
|
+
interface TableColumnMeta {
|
|
3103
|
+
/** Extra class on the body cell (`<td>`) owner node. */
|
|
3104
|
+
className?: string;
|
|
3105
|
+
/** Extra class on the header cell (`<th>`) owner node. */
|
|
3106
|
+
headerClassName?: string;
|
|
3107
|
+
/** Alignment override scoped to the header cell only. */
|
|
3108
|
+
headerAlign?: TableAlign;
|
|
3109
|
+
}
|
|
3110
|
+
/**
|
|
3111
|
+
* A v2-owned column definition. Internally adapted to TanStack's `ColumnDef`
|
|
3112
|
+
* (RFC §3.2): `cell`/`header` are React render-props (never HTML strings),
|
|
3113
|
+
* `accessor` covers key / dot-path / function, and `meta` is the escape hatch
|
|
3114
|
+
* for the cell **container**.
|
|
3115
|
+
*/
|
|
3116
|
+
interface TableColumnDef<TData> {
|
|
3117
|
+
/** Stable column identity. Required — also keys sort/filter state. */
|
|
3118
|
+
id: string;
|
|
3119
|
+
/** Header content: a node, or a render-prop receiving TanStack's context. */
|
|
3120
|
+
header: ReactNode | ((ctx: HeaderContext<TData, unknown>) => ReactNode);
|
|
3121
|
+
/** How the cell value is read. See {@link TableColumnAccessor}. */
|
|
3122
|
+
accessor?: TableColumnAccessor<TData>;
|
|
3123
|
+
/**
|
|
3124
|
+
* Cell **content** render-prop. Returns a `ReactNode` — React reconciles it,
|
|
3125
|
+
* so there is no `innerHTML`, no cache to invalidate (RFC §3.4). The cell
|
|
3126
|
+
* **container** (`<td>`, padding, align, sticky, a11y) is owned by Table.
|
|
3127
|
+
*/
|
|
3128
|
+
cell?: (ctx: CellContext<TData, unknown>) => ReactNode;
|
|
3129
|
+
/** Opt this column into sorting (emits `aria-sort` + header keyboard). */
|
|
3130
|
+
sortable?: boolean;
|
|
3131
|
+
/**
|
|
3132
|
+
* Attach a header filter. A preset string (`'text'`), a preset object
|
|
3133
|
+
* (`{ type: 'select', options }`), or a custom `{ render }`. See
|
|
3134
|
+
* {@link TableColumnFilter}.
|
|
3135
|
+
*/
|
|
3136
|
+
filter?: TableColumnFilterType | TableColumnFilter<TData>;
|
|
3137
|
+
/**
|
|
3138
|
+
* Pin the column to an edge. Pinned columns must be **contiguous** against
|
|
3139
|
+
* their edge — all `left` pins together at the start, all `right` pins
|
|
3140
|
+
* together at the end. An unpinned column between two same-edge pins breaks
|
|
3141
|
+
* the sticky-offset math (the later pin overlaps the gap); dev builds warn.
|
|
3142
|
+
*/
|
|
3143
|
+
sticky?: TableStickySide;
|
|
3144
|
+
/** Fixed column width (px). Feeds sticky-offset math and `col` sizing. */
|
|
3145
|
+
width?: number;
|
|
3146
|
+
/** Cell content alignment. */
|
|
3147
|
+
align?: TableAlign;
|
|
3148
|
+
/** Cell-container escape hatch → TanStack `columnDef.meta`. */
|
|
3149
|
+
meta?: TableColumnMeta;
|
|
3150
|
+
}
|
|
3151
|
+
/** Controlled/uncontrolled triple shared by the stateful feature configs. */
|
|
3152
|
+
interface ControlledState<T> {
|
|
3153
|
+
/** Controlled value. Pair with `onChange`. */
|
|
3154
|
+
value?: T;
|
|
3155
|
+
/** Uncontrolled initial value. */
|
|
3156
|
+
defaultValue?: T;
|
|
3157
|
+
/** Fires on every committed change to this slice. */
|
|
3158
|
+
onChange?: (value: T) => void;
|
|
3159
|
+
}
|
|
3160
|
+
interface TableSortingConfig extends ControlledState<SortingState> {
|
|
3161
|
+
/** Allow stacking multiple sort columns (shift-click). @defaultValue false */
|
|
3162
|
+
multi?: boolean;
|
|
3163
|
+
}
|
|
3164
|
+
type TableFilteringConfig = ControlledState<ColumnFiltersState>;
|
|
3165
|
+
interface TableSelectionConfig extends ControlledState<RowSelectionState> {
|
|
3166
|
+
/** `single` renders radios + caps selection at one row; `multiple` renders checkboxes + a select-all header. */
|
|
3167
|
+
mode: 'single' | 'multiple';
|
|
3168
|
+
}
|
|
3169
|
+
interface TableExpansionConfig<TData> extends ControlledState<ExpandedState> {
|
|
3170
|
+
/**
|
|
3171
|
+
* Detail-panel renderer for an expanded row. Optional: when omitted, the
|
|
3172
|
+
* Table is in **tree mode** — pair `expansion` with the top-level
|
|
3173
|
+
* {@link TableProps.getSubRows} so expanding a row reveals its (flattened)
|
|
3174
|
+
* sub-rows instead of a detail panel.
|
|
3175
|
+
*
|
|
3176
|
+
* `render` and `getSubRows` are mutually exclusive expansion shapes. Supplying
|
|
3177
|
+
* both would draw the sub-rows *and* a detail panel for the same row, so when
|
|
3178
|
+
* `getSubRows` is present the detail panel is suppressed (tree mode wins).
|
|
3179
|
+
*/
|
|
3180
|
+
render?: (row: TData) => ReactNode;
|
|
3181
|
+
}
|
|
3182
|
+
interface TablePaginationConfig {
|
|
3183
|
+
/** Rows per page. @defaultValue 10 */
|
|
3184
|
+
pageSize?: number;
|
|
3185
|
+
/** Controlled current page (server mode). */
|
|
3186
|
+
pageIndex?: number;
|
|
3187
|
+
/** Page-size options for the Select. @defaultValue [10, 25, 50, 100] */
|
|
3188
|
+
pageSizeOptions?: number[];
|
|
3189
|
+
/** Total row count across all pages — required in `manual` (server) mode. */
|
|
3190
|
+
rowCount?: number;
|
|
3191
|
+
/** Fires when page index or size changes. */
|
|
3192
|
+
onChange?: (pagination: PaginationState) => void;
|
|
3193
|
+
}
|
|
3194
|
+
/**
|
|
3195
|
+
* Bundled server data-request snapshot. Emitted from a single `onDataRequest`
|
|
3196
|
+
* callback derived from the granular state slices, never a firehose
|
|
3197
|
+
* `onStateChange` (RFC §3.3).
|
|
3198
|
+
*/
|
|
3199
|
+
interface TableDataRequest {
|
|
3200
|
+
pagination: PaginationState;
|
|
3201
|
+
sorting: SortingState;
|
|
3202
|
+
filters: ColumnFiltersState;
|
|
3203
|
+
}
|
|
3204
|
+
/**
|
|
3205
|
+
* Public props for `Table`. Props-first (RFC §3.1, Tier 1): a common table is
|
|
3206
|
+
* a single `<Table data columns getRowId />` call. `getRowId` is **mandatory**
|
|
3207
|
+
* — the single identity source TanStack's `RowSelectionState` keys on (RFC §2.3).
|
|
3208
|
+
*
|
|
3209
|
+
* `TData` defaults to `any` only so the non-generic `TableProps` alias resolves
|
|
3210
|
+
* for the base/theme registry; real call sites infer `TData` from `data`.
|
|
3211
|
+
*/
|
|
3212
|
+
interface TableProps<TData = any> {
|
|
3213
|
+
/** Row data. In `manual` mode this is the current server page. */
|
|
3214
|
+
data: TData[];
|
|
3215
|
+
/** Column definitions. See {@link TableColumnDef}. */
|
|
3216
|
+
columns: TableColumnDef<TData>[];
|
|
3217
|
+
/** Stable row identity (single source of truth). */
|
|
3218
|
+
getRowId: (row: TData, index: number) => string;
|
|
3219
|
+
/**
|
|
3220
|
+
* Density scale.
|
|
3221
|
+
* @defaultValue 'base'
|
|
3222
|
+
*/
|
|
3223
|
+
size?: TableSize;
|
|
3224
|
+
/**
|
|
3225
|
+
* Zebra-stripe rows → `data-striped`.
|
|
3226
|
+
* @defaultValue false
|
|
3227
|
+
*/
|
|
3228
|
+
striped?: boolean;
|
|
3229
|
+
/**
|
|
3230
|
+
* Cell borders → `data-bordered`.
|
|
3231
|
+
* @defaultValue false
|
|
3232
|
+
*/
|
|
3233
|
+
bordered?: boolean;
|
|
3234
|
+
/**
|
|
3235
|
+
* Pin the header row during vertical scroll → `data-sticky-header`.
|
|
3236
|
+
* @defaultValue false
|
|
3237
|
+
*/
|
|
3238
|
+
stickyHeader?: boolean;
|
|
3239
|
+
/**
|
|
3240
|
+
* Server mode. When `true`, Table processes nothing in-memory — it maps to
|
|
3241
|
+
* TanStack's `manualSorting`/`manualFiltering`/`manualPagination` and emits a
|
|
3242
|
+
* single bundled `onDataRequest` (RFC §3.3).
|
|
3243
|
+
* @defaultValue false
|
|
3244
|
+
*/
|
|
3245
|
+
manual?: boolean;
|
|
3246
|
+
/** Row selection (single/multiple + select-all). Composes Spar Checkbox/Radio. */
|
|
3247
|
+
selection?: TableSelectionConfig;
|
|
3248
|
+
/** Sorting (multi-sort opt-in). */
|
|
3249
|
+
sorting?: TableSortingConfig;
|
|
3250
|
+
/** Column filtering. Filter UIs render in a Spar `Popover`. */
|
|
3251
|
+
filtering?: TableFilteringConfig;
|
|
3252
|
+
/** Expandable rows with a render-prop body. */
|
|
3253
|
+
expansion?: TableExpansionConfig<TData>;
|
|
3254
|
+
/** Pagination. `true` enables it with defaults; an object configures it. */
|
|
3255
|
+
pagination?: TablePaginationConfig | boolean;
|
|
3256
|
+
/** Bundled server data-request callback (`manual` mode). See {@link TableDataRequest}. */
|
|
3257
|
+
onDataRequest?: (request: TableDataRequest) => void;
|
|
3258
|
+
/**
|
|
3259
|
+
* Loading state → `data-loading` + a loading overlay.
|
|
3260
|
+
* @defaultValue false
|
|
3261
|
+
*/
|
|
3262
|
+
loading?: boolean;
|
|
3263
|
+
/** Content rendered when there are no rows. */
|
|
3264
|
+
emptyState?: ReactNode;
|
|
3265
|
+
/**
|
|
3266
|
+
* Sub-row reader for **tree data** (feeds TanStack `getSubRows`). Pair it with
|
|
3267
|
+
* `expansion` (sans `render`) so expanding a row reveals its flattened
|
|
3268
|
+
* sub-rows. When `getSubRows` is omitted, expansion falls back to the
|
|
3269
|
+
* detail-panel mode driven by `expansion.render`. Supplying both keeps tree
|
|
3270
|
+
* mode and suppresses the detail panel.
|
|
3271
|
+
*/
|
|
3272
|
+
getSubRows?: (row: TData) => TData[] | undefined;
|
|
3273
|
+
/**
|
|
3274
|
+
* Escape hatch for the rare imperative need — receives the TanStack table
|
|
3275
|
+
* instance (RFC §2.3: controlled props + an optional instance ref, never an
|
|
3276
|
+
* imperative `@Method` surface). Also the access point for `getExportRows()`.
|
|
3277
|
+
*/
|
|
3278
|
+
tableRef?: Ref<Table$1<TData> | null>;
|
|
3279
|
+
/** Extra class on the root scroll container. */
|
|
3280
|
+
className?: string;
|
|
3281
|
+
/** Per-slot class name overrides. */
|
|
3282
|
+
classNames?: ClassNamesMap<TableSlot>;
|
|
3283
|
+
/** Per-slot HTML attribute overrides. */
|
|
3284
|
+
slotProps?: SlotPropsMap<TableSlot>;
|
|
3285
|
+
/** Ref to the root scroll container. */
|
|
3286
|
+
ref?: Ref<HTMLDivElement>;
|
|
3287
|
+
}
|
|
3288
|
+
declare module '../../core/theme' {
|
|
3289
|
+
interface ComponentThemeRegistry {
|
|
3290
|
+
Table: ComponentThemeConfig<TableProps, TableSlot>;
|
|
3291
|
+
}
|
|
3292
|
+
}
|
|
3293
|
+
declare module '@tanstack/react-table' {
|
|
3294
|
+
interface ColumnMeta<TData extends _tanstack_react_table.RowData, TValue> {
|
|
3295
|
+
align?: TableAlign;
|
|
3296
|
+
sticky?: TableStickySide;
|
|
3297
|
+
width?: number;
|
|
3298
|
+
className?: string;
|
|
3299
|
+
headerClassName?: string;
|
|
3300
|
+
headerAlign?: TableAlign;
|
|
3301
|
+
filter?: TableColumnFilterType | TableColumnFilter<TData>;
|
|
3302
|
+
}
|
|
3303
|
+
}
|
|
3304
|
+
|
|
3305
|
+
declare const Table: {
|
|
3306
|
+
<TData>(props: TableProps<TData>): react.JSX.Element;
|
|
3307
|
+
displayName: string;
|
|
3308
|
+
};
|
|
3309
|
+
|
|
3310
|
+
/**
|
|
3311
|
+
* Project the table's current rows to plain value records keyed by column id —
|
|
3312
|
+
* the data-only export surface (RFC §5). Formatting and file generation are the
|
|
3313
|
+
* consumer's job; Table ships no export engine. Reach it via the `tableRef`
|
|
3314
|
+
* instance: `getExportRows(tableRef.current)`.
|
|
3315
|
+
*
|
|
3316
|
+
* **Scope depends on mode.** In **client** mode this is every filtered + sorted
|
|
3317
|
+
* row *across all pages* (pre-pagination), since Table holds the full dataset.
|
|
3318
|
+
* In **server (`manual`)** mode Table only ever holds the current page, so the
|
|
3319
|
+
* export is limited to the rows currently loaded — fetch the full result set
|
|
3320
|
+
* yourself if you need to export beyond the visible page.
|
|
3321
|
+
*/
|
|
3322
|
+
declare const getExportRows: <TData>(table: Table$1<TData> | null | undefined) => Record<string, unknown>[];
|
|
3323
|
+
|
|
3324
|
+
type TabsSize = 'small' | 'base' | 'large';
|
|
3325
|
+
type TabsActivationMode = TabsActivationMode$1;
|
|
3326
|
+
type TabsVariant = 'primary' | 'info' | 'neutral';
|
|
3327
|
+
type TabsAppearance = 'basic' | 'compact' | 'divided' | 'expanded';
|
|
3328
|
+
type TabsTriggerRenderProps = Pick<TabsTriggerRenderProps$1, 'isSelected' | 'select' | 'disabled' | 'isFocused' | 'orientation'>;
|
|
3329
|
+
type TabsSlot = 'root';
|
|
3330
|
+
type TabsListSlot = 'root';
|
|
3331
|
+
type TabsTriggerSlot = 'root';
|
|
3332
|
+
type TabsContentSlot = 'root';
|
|
3333
|
+
interface TabsOwnProps {
|
|
3334
|
+
/**
|
|
3335
|
+
* Size scale. Cascades to `Tabs.Trigger` via context.
|
|
3336
|
+
* @defaultValue 'base'
|
|
3337
|
+
*/
|
|
3338
|
+
size?: TabsSize;
|
|
3339
|
+
/**
|
|
3340
|
+
* Color variant used by the active tab treatment.
|
|
3341
|
+
* @defaultValue 'primary'
|
|
3342
|
+
*/
|
|
3343
|
+
variant?: TabsVariant;
|
|
3344
|
+
/**
|
|
3345
|
+
* Visual tab style.
|
|
3346
|
+
* @defaultValue 'basic'
|
|
3347
|
+
*/
|
|
3348
|
+
appearance?: TabsAppearance;
|
|
3349
|
+
/** Per-slot class name overrides. */
|
|
3350
|
+
classNames?: ClassNamesMap<TabsSlot>;
|
|
3351
|
+
/** Per-slot HTML attribute overrides. */
|
|
3352
|
+
slotProps?: SlotPropsMap<TabsSlot>;
|
|
3353
|
+
}
|
|
3354
|
+
type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsOwnProps & Pick<TabsProps$1, 'id' | 'value' | 'defaultValue' | 'onValueChange' | 'orientation' | 'activationMode'>>;
|
|
3355
|
+
interface TabsListOwnProps {
|
|
3356
|
+
/** Per-slot class name overrides. */
|
|
3357
|
+
classNames?: ClassNamesMap<TabsListSlot>;
|
|
3358
|
+
/** Per-slot HTML attribute overrides. */
|
|
3359
|
+
slotProps?: SlotPropsMap<TabsListSlot>;
|
|
3360
|
+
}
|
|
3361
|
+
type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsListOwnProps & Pick<TabsListProps$1, 'children'>>;
|
|
3362
|
+
interface TabsTriggerOwnProps {
|
|
3363
|
+
/** Per-slot class name overrides. */
|
|
3364
|
+
classNames?: ClassNamesMap<TabsTriggerSlot>;
|
|
3365
|
+
/** Per-slot HTML attribute overrides. */
|
|
3366
|
+
slotProps?: SlotPropsMap<TabsTriggerSlot>;
|
|
3367
|
+
/** Compound children, or a render function exposing Spar's per-trigger state. */
|
|
3368
|
+
children?: ReactNode | ((state: TabsTriggerRenderProps) => ReactNode);
|
|
3369
|
+
}
|
|
3370
|
+
type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, TabsTriggerOwnProps & Pick<TabsTriggerProps$1, 'value' | 'disabled' | 'autoFocus'>>;
|
|
3371
|
+
interface TabsContentOwnProps {
|
|
3372
|
+
/** Per-slot class name overrides. */
|
|
3373
|
+
classNames?: ClassNamesMap<TabsContentSlot>;
|
|
3374
|
+
/** Per-slot HTML attribute overrides. */
|
|
3375
|
+
slotProps?: SlotPropsMap<TabsContentSlot>;
|
|
3376
|
+
}
|
|
3377
|
+
type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsContentOwnProps & Pick<TabsContentProps$1, 'value' | 'forceMount'>>;
|
|
3378
|
+
declare module '../../core/theme' {
|
|
3379
|
+
interface ComponentThemeRegistry {
|
|
3380
|
+
Tabs: ComponentThemeConfig<TabsProps, TabsSlot>;
|
|
3381
|
+
TabsList: ComponentThemeConfig<TabsListProps, TabsListSlot>;
|
|
3382
|
+
TabsTrigger: ComponentThemeConfig<TabsTriggerProps, TabsTriggerSlot>;
|
|
3383
|
+
TabsContent: ComponentThemeConfig<TabsContentProps, TabsContentSlot>;
|
|
3384
|
+
}
|
|
3385
|
+
}
|
|
3386
|
+
|
|
3387
|
+
declare const Tabs: {
|
|
3388
|
+
<T extends react.ElementType = "div">(props: TabsProps<T>): react.JSX.Element;
|
|
3389
|
+
displayName: string;
|
|
3390
|
+
} & {
|
|
3391
|
+
List: {
|
|
3392
|
+
<T extends react.ElementType = "div">(props: TabsListProps<T>): react.JSX.Element;
|
|
3393
|
+
displayName: string;
|
|
3394
|
+
};
|
|
3395
|
+
Trigger: {
|
|
3396
|
+
<T extends react.ElementType = "button">(props: TabsTriggerProps<T>): react.JSX.Element;
|
|
3397
|
+
displayName: string;
|
|
3398
|
+
};
|
|
3399
|
+
Content: {
|
|
3400
|
+
<T extends react.ElementType = "div">(props: TabsContentProps<T>): react.JSX.Element;
|
|
1240
3401
|
displayName: string;
|
|
1241
3402
|
};
|
|
1242
3403
|
};
|
|
1243
3404
|
|
|
1244
|
-
type TooltipVariant = '
|
|
3405
|
+
type TooltipVariant = 'white' | 'dark' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
1245
3406
|
type TooltipTriggerSlot = 'root';
|
|
1246
3407
|
type TooltipContentSlot = 'root';
|
|
1247
3408
|
type TooltipHeaderSlot = 'root';
|
|
@@ -1268,7 +3429,7 @@ type TooltipTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'b
|
|
|
1268
3429
|
interface TooltipContentOwnProps {
|
|
1269
3430
|
/**
|
|
1270
3431
|
* Color variant.
|
|
1271
|
-
* @defaultValue '
|
|
3432
|
+
* @defaultValue 'white'
|
|
1272
3433
|
*/
|
|
1273
3434
|
variant?: TooltipVariant;
|
|
1274
3435
|
/** Per-slot extra classes. */
|
|
@@ -1309,33 +3470,122 @@ declare module '../../core/theme' {
|
|
|
1309
3470
|
}
|
|
1310
3471
|
|
|
1311
3472
|
declare const Tooltip: {
|
|
1312
|
-
({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }: TooltipProps):
|
|
3473
|
+
({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }: TooltipProps): react.JSX.Element;
|
|
1313
3474
|
displayName: string;
|
|
1314
3475
|
} & {
|
|
1315
3476
|
Provider: {
|
|
1316
|
-
({ children, delayDuration, skipDelayDuration, disableHoverableContent }: TooltipProviderProps):
|
|
3477
|
+
({ children, delayDuration, skipDelayDuration, disableHoverableContent }: TooltipProviderProps): react.JSX.Element;
|
|
1317
3478
|
displayName: string;
|
|
1318
3479
|
};
|
|
1319
3480
|
Trigger: {
|
|
1320
|
-
<T extends react.ElementType = "button">(props: TooltipTriggerProps<T>):
|
|
3481
|
+
<T extends react.ElementType = "button">(props: TooltipTriggerProps<T>): react.JSX.Element;
|
|
1321
3482
|
displayName: string;
|
|
1322
3483
|
};
|
|
1323
3484
|
Content: {
|
|
1324
|
-
<T extends react.ElementType = "div">(props: TooltipContentProps<T>):
|
|
3485
|
+
<T extends react.ElementType = "div">(props: TooltipContentProps<T>): react.JSX.Element;
|
|
1325
3486
|
displayName: string;
|
|
1326
3487
|
};
|
|
1327
3488
|
Header: {
|
|
1328
|
-
<T extends react.ElementType = "div">(props: TooltipHeaderProps<T>):
|
|
3489
|
+
<T extends react.ElementType = "div">(props: TooltipHeaderProps<T>): react.JSX.Element;
|
|
1329
3490
|
displayName: string;
|
|
1330
3491
|
};
|
|
1331
3492
|
Description: {
|
|
1332
|
-
<T extends react.ElementType = "p">(props: TooltipDescriptionProps<T>):
|
|
3493
|
+
<T extends react.ElementType = "p">(props: TooltipDescriptionProps<T>): react.JSX.Element;
|
|
1333
3494
|
displayName: string;
|
|
1334
3495
|
};
|
|
1335
3496
|
Arrow: {
|
|
1336
|
-
<T extends react.ElementType = "svg">(props: TooltipArrowProps<T>):
|
|
3497
|
+
<T extends react.ElementType = "svg">(props: TooltipArrowProps<T>): react.JSX.Element;
|
|
1337
3498
|
displayName: string;
|
|
1338
3499
|
};
|
|
1339
3500
|
};
|
|
1340
3501
|
|
|
1341
|
-
|
|
3502
|
+
type ToastVariant = AlertVariant;
|
|
3503
|
+
type ToastAppearance = AlertAppearance;
|
|
3504
|
+
type ToastSlot = 'root';
|
|
3505
|
+
type ToasterSlot = 'root';
|
|
3506
|
+
type ToastData = ToastData$1;
|
|
3507
|
+
type ToastOptions = ToastOptions$1;
|
|
3508
|
+
interface ToasterOwnProps {
|
|
3509
|
+
toaster: ToasterController;
|
|
3510
|
+
appearance?: ToastAppearance;
|
|
3511
|
+
closeLabel?: string;
|
|
3512
|
+
overlap?: boolean;
|
|
3513
|
+
classNames?: ClassNamesMap<ToasterSlot>;
|
|
3514
|
+
slotProps?: SlotPropsMap<ToasterSlot>;
|
|
3515
|
+
children?: (toast: ToastData) => ReactNode;
|
|
3516
|
+
}
|
|
3517
|
+
type ToasterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ToasterOwnProps & Pick<ToasterProps$1, 'label' | 'hotkey'>>;
|
|
3518
|
+
interface ToastOwnProps {
|
|
3519
|
+
toast: ToastData;
|
|
3520
|
+
toaster?: ToasterController;
|
|
3521
|
+
appearance?: ToastAppearance;
|
|
3522
|
+
closeLabel?: string;
|
|
3523
|
+
classNames?: ClassNamesMap<ToastSlot>;
|
|
3524
|
+
slotProps?: SlotPropsMap<ToastSlot>;
|
|
3525
|
+
}
|
|
3526
|
+
type ToastProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ToastOwnProps & {
|
|
3527
|
+
children?: ReactNode;
|
|
3528
|
+
}>;
|
|
3529
|
+
|
|
3530
|
+
declare module '../../core/theme' {
|
|
3531
|
+
interface ComponentThemeRegistry {
|
|
3532
|
+
Toaster: ComponentThemeConfig<ToasterProps, ToasterSlot>;
|
|
3533
|
+
Toast: ComponentThemeConfig<ToastProps, ToastSlot>;
|
|
3534
|
+
}
|
|
3535
|
+
}
|
|
3536
|
+
|
|
3537
|
+
declare const Toaster: {
|
|
3538
|
+
<T extends ElementType = "div">(props: ToasterProps<T>): react.JSX.Element;
|
|
3539
|
+
displayName: string;
|
|
3540
|
+
};
|
|
3541
|
+
|
|
3542
|
+
declare const Toast: {
|
|
3543
|
+
<T extends ElementType = "div">(props: ToastProps<T>): react.JSX.Element;
|
|
3544
|
+
displayName: string;
|
|
3545
|
+
};
|
|
3546
|
+
|
|
3547
|
+
type SkeletonShape = 'rectangle' | 'circle';
|
|
3548
|
+
type SkeletonAnimation = 'shimmer' | 'none';
|
|
3549
|
+
type SkeletonSlot = 'root' | 'shimmer';
|
|
3550
|
+
interface SkeletonProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
3551
|
+
/**
|
|
3552
|
+
* Placeholder silhouette. `rectangle` renders the rounded bar, `circle`
|
|
3553
|
+
* a full-radius disc whose diameter tracks `height`.
|
|
3554
|
+
* @defaultValue 'rectangle'
|
|
3555
|
+
*/
|
|
3556
|
+
shape?: SkeletonShape;
|
|
3557
|
+
/**
|
|
3558
|
+
* Loading animation. `shimmer` sweeps the highlight strip across the bar;
|
|
3559
|
+
* `none` renders a static placeholder.
|
|
3560
|
+
* @defaultValue 'shimmer'
|
|
3561
|
+
*/
|
|
3562
|
+
animation?: SkeletonAnimation;
|
|
3563
|
+
/**
|
|
3564
|
+
* Fixed width, number in px or any CSS length. Published to the recipe as
|
|
3565
|
+
* `--tk-skeleton-width`; defaults to filling the container.
|
|
3566
|
+
*/
|
|
3567
|
+
width?: number | string;
|
|
3568
|
+
/**
|
|
3569
|
+
* Fixed height, number in px or any CSS length. Published to the recipe as
|
|
3570
|
+
* `--tk-skeleton-height`.
|
|
3571
|
+
*/
|
|
3572
|
+
height?: number | string;
|
|
3573
|
+
/** Ref forwarded to the root span element. */
|
|
3574
|
+
ref?: Ref<HTMLSpanElement>;
|
|
3575
|
+
/** Per-slot extra classes. */
|
|
3576
|
+
classNames?: ClassNamesMap<SkeletonSlot>;
|
|
3577
|
+
/** Per-slot HTML-attribute overrides. */
|
|
3578
|
+
slotProps?: SlotPropsMap<SkeletonSlot>;
|
|
3579
|
+
}
|
|
3580
|
+
declare module '../../core/theme' {
|
|
3581
|
+
interface ComponentThemeRegistry {
|
|
3582
|
+
Skeleton: ComponentThemeConfig<SkeletonProps, SkeletonSlot>;
|
|
3583
|
+
}
|
|
3584
|
+
}
|
|
3585
|
+
|
|
3586
|
+
declare const Skeleton: {
|
|
3587
|
+
(props: SkeletonProps): react.JSX.Element;
|
|
3588
|
+
displayName: string;
|
|
3589
|
+
};
|
|
3590
|
+
|
|
3591
|
+
export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Alert, type AlertActionsProps, type AlertActionsSlot, type AlertAppearance, type AlertCloseProps, type AlertCloseSlot, type AlertContentProps, type AlertContentSlot, type AlertDescriptionProps, type AlertDescriptionSlot, type AlertProps, type AlertSlot, type AlertTitleProps, type AlertTitleSlot, type AlertVariant, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbNavigationHandler, type BreadcrumbPageProps, type BreadcrumbPressEvent, type BreadcrumbProps, type BreadcrumbSeparatorProps, type BreadcrumbSize, type BreadcrumbType, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Card, type CardBodyProps, type CardBodySlot, type CardDescriptionProps, type CardDescriptionSlot, type CardFooterProps, type CardFooterSlot, type CardFooterType, type CardHeaderProps, type CardHeaderSlot, type CardHeaderType, type CardProps, type CardSlot, type CardTitleProps, type CardTitleSlot, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, Chip, type ChipAppearance, type ChipProps, type ChipSize, type ChipSlot, type ChipVariant, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type ControlledState, type DataSlotName, Dialog, type DialogBodyProps, type DialogBodySlot, type DialogCloseProps, type DialogCloseSlot, type DialogDescriptionProps, type DialogDescriptionSlot, type DialogFooterProps, type DialogFooterSlot, type DialogFooterType, type DialogHeaderProps, type DialogHeaderSlot, type DialogHeaderType, type DialogOverlayIntensity, type DialogOverlayProps, type DialogOverlaySlot, type DialogPanelProps, type DialogPanelSlot, type DialogProps, type DialogTitleProps, type DialogTitleSlot, type DialogTriggerProps, type DialogTriggerSlot, Divider, type DividerAlign, type DividerAppearance, type DividerOrientation, type DividerProps, type DividerSlot, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Dropdown, type DropdownArrowProps, type DropdownContentProps, type DropdownContentWidth, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownProps, type DropdownSeparatorProps, type DropdownSize, type DropdownTriggerProps, type DropdownViewportProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputChipsProps, type InputChipsSlot, type InputClearButtonProps, type InputClearButtonSlot, type InputDecrementProps, type InputDecrementSlot, type InputFieldProps, type InputFieldSlot, type InputIncrementProps, type InputIncrementSlot, type InputLeadingIconProps, type InputLeadingIconSlot, type InputPrefixProps, type InputPrefixSlot, type InputProps, type InputRevealButtonProps, type InputRevealButtonSlot, type InputSize, type InputSlot, type InputSpinnerProps, type InputSpinnerSlot, type InputStepperProps, type InputStepperSlot, type InputStrengthProps, type InputStrengthSlot, type InputSuffixProps, type InputSuffixSlot, type InputTrailingIconProps, type InputTrailingIconSlot, Label, type LabelProps, type LabelSlot, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Progress, type ProgressAppearance, type ProgressIndicatorProps, type ProgressIndicatorSlot, type ProgressProps, type ProgressSize, type ProgressSlot, type ProgressTrackProps, type ProgressTrackSlot, type ProgressValueProps, type ProgressValueSlot, type ProgressVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, Select, type SelectArrowProps, type SelectContentProps, type SelectGroupProps, type SelectIndicatorProps, type SelectIndicatorRenderState, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SelectViewportProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonShape, type SkeletonSlot, Slider, type SliderOrientation, type SliderProps, type SliderRangeProps, type SliderRangeValueProps, type SliderSingleValueProps, type SliderSize, type SliderSlot, type SliderThumbProps, type SliderThumbRenderProps, type SliderTicksProps, type SliderTooltip, type SliderTrackMode, type SliderTrackProps, type SliderValue, type SliderValueProps, type SliderValueRenderProps, type SliderVariant, type SlotClassNames, type SlotPropsMap, Spinner, type SpinnerAppearance, type SpinnerProps, type SpinnerSize, type SpinnerSlot, type SpinnerVariant, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Stepper, type StepperDescriptionProps, type StepperIndicatorState, type StepperItemProps, type StepperMode, type StepperOrientation, type StepperProps, type StepperSize, type StepperStepClickDetail, type StepperStepStatus, type StepperTitleProps, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, Table, type TableAlign, type TableColumnAccessor, type TableColumnDef, type TableColumnFilter, type TableColumnFilterContext, type TableColumnFilterOption, type TableColumnFilterType, type TableColumnMeta, type TableDataRequest, type TableExpansionConfig, type TableFilteringConfig, type TablePaginationConfig, type TableProps, type TableSelectionConfig, type TableSize, type TableSlot, type TableSortingConfig, type TableStickySide, Tabs, type TabsActivationMode, type TabsAppearance, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsTriggerRenderProps, type TabsVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Toast, type ToastAppearance, type ToastData, type ToastOptions, type ToastProps, type ToastSlot, type ToastVariant, Toaster, type ToasterOwnProps, type ToasterProps, type ToasterSlot, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, getExportRows, useComponentTheme, useTheme };
|