@takeoff-ui/react-spar 0.1.2 → 0.2.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 +45 -16
- package/dist/index.cjs +2393 -179
- package/dist/index.d.cts +1385 -141
- package/dist/index.d.ts +1385 -141
- package/dist/index.mjs +2387 -188
- 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, 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, 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,138 @@ 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
|
+
* Separator glyph preset. `'chevron'` renders the default chevron icon;
|
|
452
|
+
* `'dot'`, `'slash'`, and `'vertical'` paint the canonical text glyphs from
|
|
453
|
+
* the recipe. Custom `children` override the preset.
|
|
454
|
+
*/
|
|
455
|
+
type BreadcrumbSeparatorVariant = 'chevron' | 'dot' | 'slash' | 'vertical';
|
|
456
|
+
|
|
457
|
+
type BreadcrumbNavigationHandler = NavigationHandler;
|
|
458
|
+
type BreadcrumbPressEvent = PressEvent;
|
|
459
|
+
type BreadcrumbSlot = 'root';
|
|
460
|
+
type BreadcrumbListSlot = 'root';
|
|
461
|
+
type BreadcrumbItemSlot = 'root';
|
|
462
|
+
type BreadcrumbLinkSlot = 'root';
|
|
463
|
+
type BreadcrumbPageSlot = 'root';
|
|
464
|
+
type BreadcrumbSeparatorSlot = 'root';
|
|
465
|
+
interface BreadcrumbOwnProps {
|
|
466
|
+
/**
|
|
467
|
+
* Density scale cascaded to every part through context.
|
|
468
|
+
* @defaultValue 'base'
|
|
469
|
+
*/
|
|
470
|
+
size?: BreadcrumbSize;
|
|
471
|
+
/**
|
|
472
|
+
* Visual style cascaded to every part through context.
|
|
473
|
+
* @defaultValue 'basic'
|
|
474
|
+
*/
|
|
475
|
+
type?: BreadcrumbType;
|
|
476
|
+
/** Per-slot class name overrides. */
|
|
477
|
+
classNames?: ClassNamesMap<BreadcrumbSlot>;
|
|
478
|
+
/** Per-slot HTML attribute overrides. */
|
|
479
|
+
slotProps?: SlotPropsMap<BreadcrumbSlot>;
|
|
480
|
+
}
|
|
481
|
+
type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<'nav', T, BreadcrumbOwnProps & Pick<BreadcrumbProps$1, 'aria-label' | 'onNavigate' | 'disabled'>>;
|
|
482
|
+
interface BreadcrumbListOwnProps {
|
|
483
|
+
/** Per-slot class name overrides. */
|
|
484
|
+
classNames?: ClassNamesMap<BreadcrumbListSlot>;
|
|
485
|
+
/** Per-slot HTML attribute overrides. */
|
|
486
|
+
slotProps?: SlotPropsMap<BreadcrumbListSlot>;
|
|
487
|
+
}
|
|
488
|
+
type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<'ol', T, BreadcrumbListOwnProps>;
|
|
489
|
+
interface BreadcrumbItemOwnProps {
|
|
490
|
+
/**
|
|
491
|
+
* Item content — typically a `Breadcrumb.Link` or `Breadcrumb.Page`, or a
|
|
492
|
+
* render function that receives `{ position, isCurrent, isDisabled }` so
|
|
493
|
+
* consumers can swap content without reading the item context manually.
|
|
494
|
+
*/
|
|
495
|
+
children?: ReactNode | ((state: BreadcrumbItemRenderProps) => ReactNode);
|
|
496
|
+
/** Per-slot class name overrides. */
|
|
497
|
+
classNames?: ClassNamesMap<BreadcrumbItemSlot>;
|
|
498
|
+
/** Per-slot HTML attribute overrides. */
|
|
499
|
+
slotProps?: SlotPropsMap<BreadcrumbItemSlot>;
|
|
500
|
+
}
|
|
501
|
+
type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, BreadcrumbItemOwnProps>;
|
|
502
|
+
interface BreadcrumbLinkOwnProps {
|
|
503
|
+
/** Per-slot class name overrides. */
|
|
504
|
+
classNames?: ClassNamesMap<BreadcrumbLinkSlot>;
|
|
505
|
+
/** Per-slot HTML attribute overrides. */
|
|
506
|
+
slotProps?: SlotPropsMap<BreadcrumbLinkSlot>;
|
|
507
|
+
}
|
|
508
|
+
type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<'a', T, BreadcrumbLinkOwnProps & Pick<BreadcrumbLinkProps$1, 'href' | 'disabled' | 'isExternal' | 'target' | 'rel' | 'onPress'>>;
|
|
509
|
+
interface BreadcrumbPageOwnProps {
|
|
510
|
+
/** Per-slot class name overrides. */
|
|
511
|
+
classNames?: ClassNamesMap<BreadcrumbPageSlot>;
|
|
512
|
+
/** Per-slot HTML attribute overrides. */
|
|
513
|
+
slotProps?: SlotPropsMap<BreadcrumbPageSlot>;
|
|
514
|
+
}
|
|
515
|
+
type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, BreadcrumbPageOwnProps>;
|
|
516
|
+
interface BreadcrumbSeparatorOwnProps {
|
|
517
|
+
/**
|
|
518
|
+
* Override the default separator glyph. Plain content renders inside the
|
|
519
|
+
* canonical `<li aria-hidden>` owner node and takes priority over `variant`.
|
|
520
|
+
*/
|
|
521
|
+
children?: ReactNode;
|
|
522
|
+
/**
|
|
523
|
+
* Glyph preset rendered when no `children` are given.
|
|
524
|
+
* @defaultValue 'chevron'
|
|
525
|
+
*/
|
|
526
|
+
variant?: BreadcrumbSeparatorVariant;
|
|
527
|
+
/** Per-slot class name overrides. */
|
|
528
|
+
classNames?: ClassNamesMap<BreadcrumbSeparatorSlot>;
|
|
529
|
+
/** Per-slot HTML attribute overrides. */
|
|
530
|
+
slotProps?: SlotPropsMap<BreadcrumbSeparatorSlot>;
|
|
531
|
+
}
|
|
532
|
+
type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, BreadcrumbSeparatorOwnProps>;
|
|
533
|
+
declare module '../../core/theme' {
|
|
534
|
+
interface ComponentThemeRegistry {
|
|
535
|
+
Breadcrumb: ComponentThemeConfig<BreadcrumbProps>;
|
|
536
|
+
BreadcrumbList: ComponentThemeConfig<BreadcrumbListProps>;
|
|
537
|
+
BreadcrumbItem: ComponentThemeConfig<BreadcrumbItemProps>;
|
|
538
|
+
BreadcrumbLink: ComponentThemeConfig<BreadcrumbLinkProps>;
|
|
539
|
+
BreadcrumbPage: ComponentThemeConfig<BreadcrumbPageProps>;
|
|
540
|
+
BreadcrumbSeparator: ComponentThemeConfig<BreadcrumbSeparatorProps>;
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
declare const Breadcrumb: {
|
|
545
|
+
<T extends react.ElementType = "nav">(props: BreadcrumbProps<T>): react.JSX.Element;
|
|
331
546
|
displayName: string;
|
|
547
|
+
} & {
|
|
548
|
+
List: {
|
|
549
|
+
<T extends react.ElementType = "ol">(props: BreadcrumbListProps<T>): react.JSX.Element;
|
|
550
|
+
displayName: string;
|
|
551
|
+
};
|
|
552
|
+
Item: {
|
|
553
|
+
<T extends react.ElementType = "li">(props: BreadcrumbItemProps<T>): react.JSX.Element;
|
|
554
|
+
displayName: string;
|
|
555
|
+
};
|
|
556
|
+
Link: {
|
|
557
|
+
<T extends react.ElementType = "a">(props: BreadcrumbLinkProps<T>): react.JSX.Element;
|
|
558
|
+
displayName: string;
|
|
559
|
+
};
|
|
560
|
+
Page: {
|
|
561
|
+
<T extends react.ElementType = "span">(props: BreadcrumbPageProps<T>): react.JSX.Element;
|
|
562
|
+
displayName: string;
|
|
563
|
+
};
|
|
564
|
+
Separator: {
|
|
565
|
+
<T extends react.ElementType = "li">(props: BreadcrumbSeparatorProps<T>): react.JSX.Element;
|
|
566
|
+
displayName: string;
|
|
567
|
+
};
|
|
332
568
|
};
|
|
333
569
|
|
|
334
570
|
type ButtonVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'white' | 'black';
|
|
@@ -368,6 +604,10 @@ interface ButtonOwnProps {
|
|
|
368
604
|
* Content rendered after children. Same shape as `startContent`.
|
|
369
605
|
*/
|
|
370
606
|
endContent?: ReactNode;
|
|
607
|
+
/** Whether the button shows a loading spinner. */
|
|
608
|
+
loading?: boolean;
|
|
609
|
+
/** Whether the button is pressed. When defined, creates a toggle button. */
|
|
610
|
+
pressed?: boolean;
|
|
371
611
|
/** Per-slot extra classes. */
|
|
372
612
|
classNames?: ClassNamesMap<ButtonSlot>;
|
|
373
613
|
/** Per-slot HTML-attribute overrides. */
|
|
@@ -378,7 +618,7 @@ interface ButtonOwnProps {
|
|
|
378
618
|
* link-styled buttons) — `as`, ref, and the native attributes of the rendered
|
|
379
619
|
* element are inherited from Spar's `PolymorphicProps`.
|
|
380
620
|
*/
|
|
381
|
-
type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, ButtonOwnProps & Pick<ButtonProps$1, '
|
|
621
|
+
type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, ButtonOwnProps & Pick<ButtonProps$1, 'onPressedChange'>>;
|
|
382
622
|
declare module '../../core/theme' {
|
|
383
623
|
interface ComponentThemeRegistry {
|
|
384
624
|
Button: ComponentThemeConfig<ButtonProps, ButtonSlot>;
|
|
@@ -386,12 +626,113 @@ declare module '../../core/theme' {
|
|
|
386
626
|
}
|
|
387
627
|
|
|
388
628
|
declare const Button: {
|
|
389
|
-
<T extends ElementType = "button">(props: ButtonProps<T>):
|
|
629
|
+
<T extends ElementType = "button">(props: ButtonProps<T>): react.JSX.Element;
|
|
390
630
|
displayName: string;
|
|
391
631
|
};
|
|
392
632
|
|
|
633
|
+
type CardHeaderType = 'basic' | 'divided' | 'light' | 'dark' | 'primary';
|
|
634
|
+
type CardFooterType = 'basic' | 'divided' | 'light';
|
|
635
|
+
type CardSlot = 'root';
|
|
636
|
+
type CardHeaderSlot = 'root';
|
|
637
|
+
type CardTitleSlot = 'root';
|
|
638
|
+
type CardDescriptionSlot = 'root';
|
|
639
|
+
type CardBodySlot = 'root';
|
|
640
|
+
type CardFooterSlot = 'root';
|
|
641
|
+
interface CardOwnProps {
|
|
642
|
+
/** Per-slot extra classes. */
|
|
643
|
+
classNames?: ClassNamesMap<CardSlot>;
|
|
644
|
+
/** Per-slot HTML-attribute overrides. */
|
|
645
|
+
slotProps?: SlotPropsMap<CardSlot>;
|
|
646
|
+
}
|
|
647
|
+
type CardProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardOwnProps>;
|
|
648
|
+
interface CardHeaderOwnProps {
|
|
649
|
+
/**
|
|
650
|
+
* Type of the header.
|
|
651
|
+
* @defaultValue 'basic'
|
|
652
|
+
*/
|
|
653
|
+
headerType?: CardHeaderType;
|
|
654
|
+
/** Per-slot extra classes. */
|
|
655
|
+
classNames?: ClassNamesMap<CardHeaderSlot>;
|
|
656
|
+
/** Per-slot HTML-attribute overrides. */
|
|
657
|
+
slotProps?: SlotPropsMap<CardHeaderSlot>;
|
|
658
|
+
}
|
|
659
|
+
type CardHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardHeaderOwnProps>;
|
|
660
|
+
interface CardTitleOwnProps {
|
|
661
|
+
/**
|
|
662
|
+
* Semantic heading level used when `as` is not provided.
|
|
663
|
+
* @defaultValue 5
|
|
664
|
+
*/
|
|
665
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
666
|
+
/** Per-slot extra classes. */
|
|
667
|
+
classNames?: ClassNamesMap<CardTitleSlot>;
|
|
668
|
+
/** Per-slot HTML-attribute overrides. */
|
|
669
|
+
slotProps?: SlotPropsMap<CardTitleSlot>;
|
|
670
|
+
}
|
|
671
|
+
type CardTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, CardTitleOwnProps>;
|
|
672
|
+
interface CardDescriptionOwnProps {
|
|
673
|
+
/** Per-slot extra classes. */
|
|
674
|
+
classNames?: ClassNamesMap<CardDescriptionSlot>;
|
|
675
|
+
/** Per-slot HTML-attribute overrides. */
|
|
676
|
+
slotProps?: SlotPropsMap<CardDescriptionSlot>;
|
|
677
|
+
}
|
|
678
|
+
type CardDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<'p', T, CardDescriptionOwnProps>;
|
|
679
|
+
interface CardBodyOwnProps {
|
|
680
|
+
/** Per-slot extra classes. */
|
|
681
|
+
classNames?: ClassNamesMap<CardBodySlot>;
|
|
682
|
+
/** Per-slot HTML-attribute overrides. */
|
|
683
|
+
slotProps?: SlotPropsMap<CardBodySlot>;
|
|
684
|
+
}
|
|
685
|
+
type CardBodyProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardBodyOwnProps>;
|
|
686
|
+
interface CardFooterOwnProps {
|
|
687
|
+
/**
|
|
688
|
+
* Type of the footer.
|
|
689
|
+
* @defaultValue 'basic'
|
|
690
|
+
*/
|
|
691
|
+
footerType?: CardFooterType;
|
|
692
|
+
/** Per-slot extra classes. */
|
|
693
|
+
classNames?: ClassNamesMap<CardFooterSlot>;
|
|
694
|
+
/** Per-slot HTML-attribute overrides. */
|
|
695
|
+
slotProps?: SlotPropsMap<CardFooterSlot>;
|
|
696
|
+
}
|
|
697
|
+
type CardFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, CardFooterOwnProps>;
|
|
698
|
+
declare module '../../core/theme' {
|
|
699
|
+
interface ComponentThemeRegistry {
|
|
700
|
+
Card: ComponentThemeConfig<CardProps, CardSlot>;
|
|
701
|
+
CardHeader: ComponentThemeConfig<CardHeaderProps, CardHeaderSlot>;
|
|
702
|
+
CardTitle: ComponentThemeConfig<CardTitleProps, CardTitleSlot>;
|
|
703
|
+
CardDescription: ComponentThemeConfig<CardDescriptionProps, CardDescriptionSlot>;
|
|
704
|
+
CardBody: ComponentThemeConfig<CardBodyProps, CardBodySlot>;
|
|
705
|
+
CardFooter: ComponentThemeConfig<CardFooterProps, CardFooterSlot>;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
declare const Card: {
|
|
710
|
+
<T extends react.ElementType = "div">(props: CardProps<T>): react.JSX.Element;
|
|
711
|
+
displayName: string;
|
|
712
|
+
} & {
|
|
713
|
+
Header: {
|
|
714
|
+
<T extends react.ElementType = "div">(props: CardHeaderProps<T>): react.JSX.Element;
|
|
715
|
+
displayName: string;
|
|
716
|
+
};
|
|
717
|
+
Title: {
|
|
718
|
+
<T extends react.ElementType = "h5">(props: CardTitleProps<T>): react.JSX.Element;
|
|
719
|
+
displayName: string;
|
|
720
|
+
};
|
|
721
|
+
Description: {
|
|
722
|
+
<T extends react.ElementType = "p">(props: CardDescriptionProps<T>): react.JSX.Element;
|
|
723
|
+
displayName: string;
|
|
724
|
+
};
|
|
725
|
+
Body: {
|
|
726
|
+
<T extends react.ElementType = "div">(props: CardBodyProps<T>): react.JSX.Element;
|
|
727
|
+
displayName: string;
|
|
728
|
+
};
|
|
729
|
+
Footer: {
|
|
730
|
+
<T extends react.ElementType = "div">(props: CardFooterProps<T>): react.JSX.Element;
|
|
731
|
+
displayName: string;
|
|
732
|
+
};
|
|
733
|
+
};
|
|
734
|
+
|
|
393
735
|
type CheckboxSize = 'small' | 'base';
|
|
394
|
-
type CheckboxType = 'default' | 'card';
|
|
395
736
|
type CheckboxSlot = 'root' | 'indicator' | 'icon';
|
|
396
737
|
/**
|
|
397
738
|
* Render props passed to the root `Checkbox` render-prop child. Re-exports
|
|
@@ -447,12 +788,6 @@ interface CheckboxOwnProps {
|
|
|
447
788
|
* @defaultValue 'base'
|
|
448
789
|
*/
|
|
449
790
|
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
791
|
/** Per-slot extra classes. */
|
|
457
792
|
classNames?: ClassNamesMap<CheckboxSlot>;
|
|
458
793
|
/** Per-slot HTML-attribute overrides. */
|
|
@@ -489,15 +824,85 @@ declare module '../../core/theme' {
|
|
|
489
824
|
}
|
|
490
825
|
|
|
491
826
|
declare const Checkbox: {
|
|
492
|
-
<T extends react.ElementType = "span">(props: CheckboxProps<T>):
|
|
827
|
+
<T extends react.ElementType = "span">(props: CheckboxProps<T>): react.JSX.Element;
|
|
493
828
|
displayName: string;
|
|
494
829
|
} & {
|
|
495
830
|
Indicator: {
|
|
496
|
-
(props: CheckboxIndicatorProps):
|
|
831
|
+
(props: CheckboxIndicatorProps): react.JSX.Element;
|
|
497
832
|
displayName: string;
|
|
498
833
|
};
|
|
499
834
|
};
|
|
500
835
|
|
|
836
|
+
type ChipVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'verified' | 'purple' | 'cyan' | 'business' | 'teal' | 'white' | 'dark';
|
|
837
|
+
type ChipAppearance = 'filled' | 'filledLight' | 'outlined';
|
|
838
|
+
type ChipSize = 'small' | 'base' | 'large';
|
|
839
|
+
type ChipSlot = 'root' | 'label' | 'remove';
|
|
840
|
+
interface ChipProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
841
|
+
/**
|
|
842
|
+
* Color variant.
|
|
843
|
+
* @defaultValue 'primary'
|
|
844
|
+
*/
|
|
845
|
+
variant?: ChipVariant;
|
|
846
|
+
/**
|
|
847
|
+
* Visual appearance.
|
|
848
|
+
* @defaultValue 'filled'
|
|
849
|
+
*/
|
|
850
|
+
appearance?: ChipAppearance;
|
|
851
|
+
/**
|
|
852
|
+
* Size scale.
|
|
853
|
+
* @defaultValue 'base'
|
|
854
|
+
*/
|
|
855
|
+
size?: ChipSize;
|
|
856
|
+
/**
|
|
857
|
+
* Disables interactive affordances and remove actions.
|
|
858
|
+
* @defaultValue false
|
|
859
|
+
*/
|
|
860
|
+
disabled?: boolean;
|
|
861
|
+
/**
|
|
862
|
+
* Renders a remove button that dismisses the chip from the DOM when pressed.
|
|
863
|
+
* @defaultValue false
|
|
864
|
+
*/
|
|
865
|
+
removable?: boolean;
|
|
866
|
+
/**
|
|
867
|
+
* Makes the chip root keyboard-focusable and button-like for click actions.
|
|
868
|
+
* @defaultValue false
|
|
869
|
+
*/
|
|
870
|
+
clickable?: boolean;
|
|
871
|
+
/**
|
|
872
|
+
* Whether the chip removes itself from the DOM after a remove action.
|
|
873
|
+
*
|
|
874
|
+
* Removal is tracked in internal state, so set `autoDismiss={false}` when the
|
|
875
|
+
* parent owns the chip list (e.g. renders chips from an array) and let
|
|
876
|
+
* `onRemove` drive the parent's state — otherwise the chip and the parent's
|
|
877
|
+
* list become two sources of truth.
|
|
878
|
+
* @defaultValue true
|
|
879
|
+
*/
|
|
880
|
+
autoDismiss?: boolean;
|
|
881
|
+
/**
|
|
882
|
+
* Called when the remove button is pressed or a focused clickable chip
|
|
883
|
+
* receives Backspace/Delete.
|
|
884
|
+
*/
|
|
885
|
+
onRemove?: () => void;
|
|
886
|
+
/** Chip content. */
|
|
887
|
+
children?: ReactNode;
|
|
888
|
+
/** Ref forwarded to the root span element. */
|
|
889
|
+
ref?: Ref<HTMLSpanElement>;
|
|
890
|
+
/** Per-slot extra classes. */
|
|
891
|
+
classNames?: ClassNamesMap<ChipSlot>;
|
|
892
|
+
/** Per-slot HTML-attribute overrides. */
|
|
893
|
+
slotProps?: SlotPropsMap<ChipSlot>;
|
|
894
|
+
}
|
|
895
|
+
declare module '../../core/theme' {
|
|
896
|
+
interface ComponentThemeRegistry {
|
|
897
|
+
Chip: ComponentThemeConfig<ChipProps, ChipSlot>;
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
declare const Chip: {
|
|
902
|
+
(props: ChipProps): react.JSX.Element | null;
|
|
903
|
+
displayName: string;
|
|
904
|
+
};
|
|
905
|
+
|
|
501
906
|
/**
|
|
502
907
|
* Side from which the drawer slides in.
|
|
503
908
|
* @defaultValue 'right'
|
|
@@ -510,7 +915,7 @@ type DrawerTitleSlot = 'root';
|
|
|
510
915
|
type DrawerDescriptionSlot = 'root';
|
|
511
916
|
type DrawerBodySlot = 'root';
|
|
512
917
|
type DrawerFooterSlot = 'root';
|
|
513
|
-
type
|
|
918
|
+
type DrawerCloseSlot = 'root';
|
|
514
919
|
/**
|
|
515
920
|
* Public props for the Drawer root. Wraps Spar's Dialog in modal mode to
|
|
516
921
|
* create a slide-in side panel. State-only — renders no DOM, so no
|
|
@@ -518,28 +923,30 @@ type DrawerCloseButtonSlot = 'root';
|
|
|
518
923
|
* `slotProps` (state-driven styling lives on the Panel/Overlay/Header
|
|
519
924
|
* children, which read shared values from context).
|
|
520
925
|
*/
|
|
521
|
-
interface DrawerProps extends Pick<DialogProps, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'> {
|
|
926
|
+
interface DrawerProps extends Pick<DialogProps$1, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'> {
|
|
522
927
|
/** Side the drawer slides in from. */
|
|
523
928
|
placement?: DrawerPlacement;
|
|
524
929
|
/** Whether the drawer can be dismissed by clicking outside or pressing Escape. @defaultValue true */
|
|
525
|
-
|
|
930
|
+
dismissible?: boolean;
|
|
526
931
|
children?: ReactNode;
|
|
527
932
|
}
|
|
528
933
|
interface DrawerTriggerOwnProps {
|
|
529
934
|
classNames?: ClassNamesMap<'root'>;
|
|
530
935
|
slotProps?: SlotPropsMap<'root'>;
|
|
531
936
|
}
|
|
532
|
-
type DrawerTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerTriggerOwnProps & Pick<DialogTriggerProps, 'children'>>;
|
|
937
|
+
type DrawerTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerTriggerOwnProps & Pick<DialogTriggerProps$1, 'children'>>;
|
|
533
938
|
type DrawerOverlayIntensity = 'lightest' | 'light' | 'base' | 'dark' | 'darkest';
|
|
534
939
|
interface DrawerOverlayOwnProps {
|
|
535
940
|
/** When true, the overlay is rendered but visually invisible. @defaultValue false */
|
|
536
941
|
invisible?: boolean;
|
|
537
942
|
/** Overlay backdrop intensity. @defaultValue 'base' */
|
|
538
943
|
intensity?: DrawerOverlayIntensity;
|
|
944
|
+
/** Applies backdrop blur on the overlay. @defaultValue false */
|
|
945
|
+
blur?: boolean;
|
|
539
946
|
classNames?: ClassNamesMap<DrawerOverlaySlot>;
|
|
540
947
|
slotProps?: SlotPropsMap<DrawerOverlaySlot>;
|
|
541
948
|
}
|
|
542
|
-
type DrawerOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerOverlayOwnProps & Pick<DialogOverlayProps, 'container'>>;
|
|
949
|
+
type DrawerOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerOverlayOwnProps & Pick<DialogOverlayProps$1, 'container'>>;
|
|
543
950
|
interface DrawerPanelOwnProps {
|
|
544
951
|
classNames?: ClassNamesMap<DrawerPanelSlot>;
|
|
545
952
|
slotProps?: SlotPropsMap<DrawerPanelSlot>;
|
|
@@ -557,7 +964,7 @@ interface DrawerTitleOwnProps {
|
|
|
557
964
|
classNames?: ClassNamesMap<DrawerTitleSlot>;
|
|
558
965
|
slotProps?: SlotPropsMap<DrawerTitleSlot>;
|
|
559
966
|
}
|
|
560
|
-
type DrawerTitleProps<T extends ElementType = '
|
|
967
|
+
type DrawerTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, DrawerTitleOwnProps & Pick<DialogTitleProps$1, 'level'>>;
|
|
561
968
|
interface DrawerDescriptionOwnProps {
|
|
562
969
|
classNames?: ClassNamesMap<DrawerDescriptionSlot>;
|
|
563
970
|
slotProps?: SlotPropsMap<DrawerDescriptionSlot>;
|
|
@@ -576,11 +983,11 @@ interface DrawerFooterOwnProps {
|
|
|
576
983
|
slotProps?: SlotPropsMap<DrawerFooterSlot>;
|
|
577
984
|
}
|
|
578
985
|
type DrawerFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DrawerFooterOwnProps>;
|
|
579
|
-
interface
|
|
580
|
-
classNames?: ClassNamesMap<
|
|
581
|
-
slotProps?: SlotPropsMap<
|
|
986
|
+
interface DrawerCloseOwnProps {
|
|
987
|
+
classNames?: ClassNamesMap<DrawerCloseSlot>;
|
|
988
|
+
slotProps?: SlotPropsMap<DrawerCloseSlot>;
|
|
582
989
|
}
|
|
583
|
-
type
|
|
990
|
+
type DrawerCloseProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DrawerCloseOwnProps & Pick<DialogCloseProps$1, 'children'>>;
|
|
584
991
|
declare module '../../core/theme' {
|
|
585
992
|
interface ComponentThemeRegistry {
|
|
586
993
|
Drawer: StateOnlyComponentThemeConfig<DrawerProps>;
|
|
@@ -592,56 +999,188 @@ declare module '../../core/theme' {
|
|
|
592
999
|
DrawerDescription: ComponentThemeConfig<DrawerDescriptionProps>;
|
|
593
1000
|
DrawerBody: ComponentThemeConfig<DrawerBodyProps>;
|
|
594
1001
|
DrawerFooter: ComponentThemeConfig<DrawerFooterProps>;
|
|
595
|
-
|
|
1002
|
+
DrawerClose: ComponentThemeConfig<DrawerCloseProps>;
|
|
596
1003
|
}
|
|
597
1004
|
}
|
|
598
1005
|
|
|
599
1006
|
declare const Drawer: {
|
|
600
|
-
(props: DrawerProps):
|
|
1007
|
+
(props: DrawerProps): react.JSX.Element;
|
|
1008
|
+
displayName: string;
|
|
1009
|
+
} & {
|
|
1010
|
+
Trigger: {
|
|
1011
|
+
<T extends react.ElementType = "button">(props: DrawerTriggerProps<T>): react.JSX.Element;
|
|
1012
|
+
displayName: string;
|
|
1013
|
+
};
|
|
1014
|
+
Overlay: {
|
|
1015
|
+
<T extends react.ElementType = "div">(props: DrawerOverlayProps<T>): react.JSX.Element;
|
|
1016
|
+
displayName: string;
|
|
1017
|
+
};
|
|
1018
|
+
Panel: {
|
|
1019
|
+
<T extends react.ElementType = "div">(props: DrawerPanelProps<T>): react.JSX.Element;
|
|
1020
|
+
displayName: string;
|
|
1021
|
+
};
|
|
1022
|
+
Header: {
|
|
1023
|
+
<T extends react.ElementType = "div">(props: DrawerHeaderProps<T>): react.JSX.Element;
|
|
1024
|
+
displayName: string;
|
|
1025
|
+
};
|
|
1026
|
+
Title: {
|
|
1027
|
+
<T extends react.ElementType = "h5">(props: DrawerTitleProps<T>): react.JSX.Element;
|
|
1028
|
+
displayName: string;
|
|
1029
|
+
};
|
|
1030
|
+
Description: {
|
|
1031
|
+
<T extends react.ElementType = "p">(props: DrawerDescriptionProps<T>): react.JSX.Element;
|
|
1032
|
+
displayName: string;
|
|
1033
|
+
};
|
|
1034
|
+
Body: {
|
|
1035
|
+
<T extends react.ElementType = "div">(props: DrawerBodyProps<T>): react.JSX.Element;
|
|
1036
|
+
displayName: string;
|
|
1037
|
+
};
|
|
1038
|
+
Footer: {
|
|
1039
|
+
<T extends react.ElementType = "div">(props: DrawerFooterProps<T>): react.JSX.Element;
|
|
1040
|
+
displayName: string;
|
|
1041
|
+
};
|
|
1042
|
+
Close: {
|
|
1043
|
+
<T extends react.ElementType = "button">(props: DrawerCloseProps<T>): react.JSX.Element;
|
|
1044
|
+
displayName: string;
|
|
1045
|
+
};
|
|
1046
|
+
};
|
|
1047
|
+
|
|
1048
|
+
type DialogTriggerSlot = 'root';
|
|
1049
|
+
type DialogOverlaySlot = 'root';
|
|
1050
|
+
type DialogPanelSlot = 'root';
|
|
1051
|
+
type DialogHeaderSlot = 'root';
|
|
1052
|
+
type DialogTitleSlot = 'root';
|
|
1053
|
+
type DialogDescriptionSlot = 'root';
|
|
1054
|
+
type DialogBodySlot = 'root';
|
|
1055
|
+
type DialogFooterSlot = 'root';
|
|
1056
|
+
type DialogCloseSlot = 'root';
|
|
1057
|
+
type DialogOverlayIntensity = 'lightest' | 'light' | 'base' | 'dark' | 'darkest';
|
|
1058
|
+
type DialogHeaderType = 'basic' | 'divided' | 'light' | 'dark' | 'primary';
|
|
1059
|
+
type DialogFooterType = 'basic' | 'divided' | 'light';
|
|
1060
|
+
/**
|
|
1061
|
+
* Public props for the Dialog root. State-only — renders no DOM, so no
|
|
1062
|
+
* polymorphic `as` and no native HTML props.
|
|
1063
|
+
*/
|
|
1064
|
+
interface DialogProps extends Pick<DialogProps$1, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal' | 'disabled' | 'forceMount' | 'children'> {
|
|
1065
|
+
/** Whether the dialog can be dismissed by clicking outside or pressing Escape. @defaultValue true */
|
|
1066
|
+
dismissible?: boolean;
|
|
1067
|
+
}
|
|
1068
|
+
interface DialogTriggerOwnProps {
|
|
1069
|
+
classNames?: ClassNamesMap<DialogTriggerSlot>;
|
|
1070
|
+
slotProps?: SlotPropsMap<DialogTriggerSlot>;
|
|
1071
|
+
}
|
|
1072
|
+
type DialogTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DialogTriggerOwnProps & Pick<DialogTriggerProps$1, 'children'>>;
|
|
1073
|
+
interface DialogOverlayOwnProps {
|
|
1074
|
+
/** When true, the overlay is rendered but visually invisible. @defaultValue false */
|
|
1075
|
+
invisible?: boolean;
|
|
1076
|
+
/** Overlay backdrop intensity. @defaultValue 'base' */
|
|
1077
|
+
intensity?: DialogOverlayIntensity;
|
|
1078
|
+
/** Applies backdrop blur on the overlay. @defaultValue false */
|
|
1079
|
+
blur?: boolean;
|
|
1080
|
+
classNames?: ClassNamesMap<DialogOverlaySlot>;
|
|
1081
|
+
slotProps?: SlotPropsMap<DialogOverlaySlot>;
|
|
1082
|
+
}
|
|
1083
|
+
type DialogOverlayProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogOverlayOwnProps & Pick<DialogOverlayProps$1, 'container'>>;
|
|
1084
|
+
interface DialogPanelOwnProps {
|
|
1085
|
+
classNames?: ClassNamesMap<DialogPanelSlot>;
|
|
1086
|
+
slotProps?: SlotPropsMap<DialogPanelSlot>;
|
|
1087
|
+
}
|
|
1088
|
+
type DialogPanelProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogPanelOwnProps & Pick<DialogContentProps, 'role' | 'container' | 'trapFocus' | 'restoreFocus' | 'initialFocus' | 'finalFocus' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'>>;
|
|
1089
|
+
interface DialogTitleOwnProps {
|
|
1090
|
+
classNames?: ClassNamesMap<DialogTitleSlot>;
|
|
1091
|
+
slotProps?: SlotPropsMap<DialogTitleSlot>;
|
|
1092
|
+
}
|
|
1093
|
+
interface DialogHeaderOwnProps {
|
|
1094
|
+
/** Type of the header. @defaultValue 'basic' */
|
|
1095
|
+
headerType?: DialogHeaderType;
|
|
1096
|
+
classNames?: ClassNamesMap<DialogHeaderSlot>;
|
|
1097
|
+
slotProps?: SlotPropsMap<DialogHeaderSlot>;
|
|
1098
|
+
}
|
|
1099
|
+
type DialogHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogHeaderOwnProps>;
|
|
1100
|
+
type DialogTitleProps<T extends ElementType = 'h5'> = PolymorphicProps<'h5', T, DialogTitleOwnProps & Pick<DialogTitleProps$1, 'level'>>;
|
|
1101
|
+
interface DialogDescriptionOwnProps {
|
|
1102
|
+
classNames?: ClassNamesMap<DialogDescriptionSlot>;
|
|
1103
|
+
slotProps?: SlotPropsMap<DialogDescriptionSlot>;
|
|
1104
|
+
}
|
|
1105
|
+
type DialogDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<'p', T, DialogDescriptionOwnProps>;
|
|
1106
|
+
interface DialogBodyOwnProps {
|
|
1107
|
+
classNames?: ClassNamesMap<DialogBodySlot>;
|
|
1108
|
+
slotProps?: SlotPropsMap<DialogBodySlot>;
|
|
1109
|
+
}
|
|
1110
|
+
type DialogBodyProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogBodyOwnProps>;
|
|
1111
|
+
interface DialogFooterOwnProps {
|
|
1112
|
+
/** Type of the footer. @defaultValue 'basic' */
|
|
1113
|
+
footerType?: DialogFooterType;
|
|
1114
|
+
classNames?: ClassNamesMap<DialogFooterSlot>;
|
|
1115
|
+
slotProps?: SlotPropsMap<DialogFooterSlot>;
|
|
1116
|
+
}
|
|
1117
|
+
type DialogFooterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DialogFooterOwnProps>;
|
|
1118
|
+
interface DialogCloseOwnProps {
|
|
1119
|
+
classNames?: ClassNamesMap<DialogCloseSlot>;
|
|
1120
|
+
slotProps?: SlotPropsMap<DialogCloseSlot>;
|
|
1121
|
+
}
|
|
1122
|
+
type DialogCloseProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DialogCloseOwnProps & Pick<DialogCloseProps$1, 'children'>>;
|
|
1123
|
+
declare module '../../core/theme' {
|
|
1124
|
+
interface ComponentThemeRegistry {
|
|
1125
|
+
Dialog: StateOnlyComponentThemeConfig<DialogProps>;
|
|
1126
|
+
DialogTrigger: ComponentThemeConfig<DialogTriggerProps, DialogTriggerSlot>;
|
|
1127
|
+
DialogOverlay: ComponentThemeConfig<DialogOverlayProps, DialogOverlaySlot>;
|
|
1128
|
+
DialogPanel: ComponentThemeConfig<DialogPanelProps, DialogPanelSlot>;
|
|
1129
|
+
DialogHeader: ComponentThemeConfig<DialogHeaderProps, DialogHeaderSlot>;
|
|
1130
|
+
DialogTitle: ComponentThemeConfig<DialogTitleProps, DialogTitleSlot>;
|
|
1131
|
+
DialogDescription: ComponentThemeConfig<DialogDescriptionProps, DialogDescriptionSlot>;
|
|
1132
|
+
DialogBody: ComponentThemeConfig<DialogBodyProps, DialogBodySlot>;
|
|
1133
|
+
DialogFooter: ComponentThemeConfig<DialogFooterProps, DialogFooterSlot>;
|
|
1134
|
+
DialogClose: ComponentThemeConfig<DialogCloseProps, DialogCloseSlot>;
|
|
1135
|
+
}
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
declare const Dialog: {
|
|
1139
|
+
(props: DialogProps): react.JSX.Element;
|
|
601
1140
|
displayName: string;
|
|
602
1141
|
} & {
|
|
603
1142
|
Trigger: {
|
|
604
|
-
<T extends react.ElementType = "button">(props:
|
|
1143
|
+
<T extends react.ElementType = "button">(props: DialogTriggerProps<T>): react.JSX.Element;
|
|
605
1144
|
displayName: string;
|
|
606
1145
|
};
|
|
607
1146
|
Overlay: {
|
|
608
|
-
<T extends react.ElementType = "div">(props:
|
|
1147
|
+
<T extends react.ElementType = "div">(props: DialogOverlayProps<T>): react.JSX.Element;
|
|
609
1148
|
displayName: string;
|
|
610
1149
|
};
|
|
611
1150
|
Panel: {
|
|
612
|
-
<T extends react.ElementType = "div">(props:
|
|
1151
|
+
<T extends react.ElementType = "div">(props: DialogPanelProps<T>): react.JSX.Element;
|
|
613
1152
|
displayName: string;
|
|
614
1153
|
};
|
|
615
1154
|
Header: {
|
|
616
|
-
<T extends react.ElementType = "div">(props:
|
|
1155
|
+
<T extends react.ElementType = "div">(props: DialogHeaderProps<T>): react.JSX.Element;
|
|
617
1156
|
displayName: string;
|
|
618
1157
|
};
|
|
619
1158
|
Title: {
|
|
620
|
-
<T extends react.ElementType = "
|
|
1159
|
+
<T extends react.ElementType = "h5">(props: DialogTitleProps<T>): react.JSX.Element;
|
|
621
1160
|
displayName: string;
|
|
622
1161
|
};
|
|
623
1162
|
Description: {
|
|
624
|
-
<T extends react.ElementType = "p">(props:
|
|
1163
|
+
<T extends react.ElementType = "p">(props: DialogDescriptionProps<T>): react.JSX.Element;
|
|
625
1164
|
displayName: string;
|
|
626
1165
|
};
|
|
627
1166
|
Body: {
|
|
628
|
-
<T extends react.ElementType = "div">(props:
|
|
1167
|
+
<T extends react.ElementType = "div">(props: DialogBodyProps<T>): react.JSX.Element;
|
|
629
1168
|
displayName: string;
|
|
630
1169
|
};
|
|
631
1170
|
Footer: {
|
|
632
|
-
<T extends react.ElementType = "div">(props:
|
|
1171
|
+
<T extends react.ElementType = "div">(props: DialogFooterProps<T>): react.JSX.Element;
|
|
633
1172
|
displayName: string;
|
|
634
1173
|
};
|
|
635
|
-
|
|
636
|
-
<T extends react.ElementType = "button">(props:
|
|
1174
|
+
Close: {
|
|
1175
|
+
<T extends react.ElementType = "button">(props: DialogCloseProps<T>): react.JSX.Element;
|
|
637
1176
|
displayName: string;
|
|
638
1177
|
};
|
|
639
1178
|
};
|
|
640
1179
|
|
|
641
1180
|
type FieldSlot = 'root';
|
|
642
1181
|
type FieldLabelSlot = 'root' | 'asterisk';
|
|
643
|
-
type FieldDescriptionSlot = 'root';
|
|
644
|
-
type FieldErrorMessageSlot = 'root';
|
|
1182
|
+
type FieldDescriptionSlot = 'root' | 'icon';
|
|
1183
|
+
type FieldErrorMessageSlot = 'root' | 'icon';
|
|
645
1184
|
interface FieldOwnProps {
|
|
646
1185
|
classNames?: ClassNamesMap<FieldSlot>;
|
|
647
1186
|
slotProps?: SlotPropsMap<FieldSlot>;
|
|
@@ -651,7 +1190,7 @@ interface FieldOwnProps {
|
|
|
651
1190
|
* form controls (Input, Switch, Checkbox, etc.) plus styled label, helper
|
|
652
1191
|
* text, and error message slots.
|
|
653
1192
|
*/
|
|
654
|
-
type FieldProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, FieldOwnProps & Pick<FieldProps$1, 'id' | 'invalid' | 'disabled' | 'required' | 'readOnly' | 'children'>>;
|
|
1193
|
+
type FieldProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, FieldOwnProps & Pick<FieldProps$1, 'id' | 'invalid' | 'disabled' | 'required' | 'optional' | 'readOnly' | 'children'>>;
|
|
655
1194
|
interface FieldLabelOwnProps {
|
|
656
1195
|
classNames?: ClassNamesMap<FieldLabelSlot>;
|
|
657
1196
|
slotProps?: SlotPropsMap<FieldLabelSlot>;
|
|
@@ -677,29 +1216,38 @@ declare module '../../core/theme' {
|
|
|
677
1216
|
}
|
|
678
1217
|
|
|
679
1218
|
declare const Field: {
|
|
680
|
-
<T extends react.ElementType = "div">(props: FieldProps<T>):
|
|
1219
|
+
<T extends react.ElementType = "div">(props: FieldProps<T>): react.JSX.Element;
|
|
681
1220
|
displayName: string;
|
|
682
1221
|
} & {
|
|
683
1222
|
Label: {
|
|
684
|
-
<T extends react.ElementType = "label">(props: FieldLabelProps<T>):
|
|
1223
|
+
<T extends react.ElementType = "label">(props: FieldLabelProps<T>): react.JSX.Element;
|
|
685
1224
|
displayName: string;
|
|
686
1225
|
};
|
|
687
1226
|
Description: {
|
|
688
|
-
<T extends react.ElementType = "div">(props: FieldDescriptionProps<T>):
|
|
1227
|
+
<T extends react.ElementType = "div">(props: FieldDescriptionProps<T>): react.JSX.Element;
|
|
689
1228
|
displayName: string;
|
|
690
1229
|
};
|
|
691
1230
|
ErrorMessage: {
|
|
692
|
-
<T extends react.ElementType = "div">(props: FieldErrorMessageProps<T>):
|
|
1231
|
+
<T extends react.ElementType = "div">(props: FieldErrorMessageProps<T>): react.JSX.Element;
|
|
693
1232
|
displayName: string;
|
|
694
1233
|
};
|
|
695
1234
|
};
|
|
696
1235
|
|
|
697
1236
|
type InputSize = 'small' | 'base' | 'large';
|
|
698
1237
|
type InputSlot = 'root';
|
|
699
|
-
type InputContainerSlot = 'root' | 'startContent' | 'endContent';
|
|
700
1238
|
type InputFieldSlot = 'root';
|
|
701
1239
|
type InputPrefixSlot = 'root';
|
|
702
1240
|
type InputSuffixSlot = 'root';
|
|
1241
|
+
type InputLeadingIconSlot = 'root';
|
|
1242
|
+
type InputTrailingIconSlot = 'root';
|
|
1243
|
+
type InputClearButtonSlot = 'root';
|
|
1244
|
+
type InputSpinnerSlot = 'root';
|
|
1245
|
+
type InputRevealButtonSlot = 'root';
|
|
1246
|
+
type InputStrengthSlot = 'root';
|
|
1247
|
+
type InputStepperSlot = 'root';
|
|
1248
|
+
type InputDecrementSlot = 'root';
|
|
1249
|
+
type InputIncrementSlot = 'root';
|
|
1250
|
+
type InputChipsSlot = 'root';
|
|
703
1251
|
/**
|
|
704
1252
|
* Visual + slot props owned by takeoff-v2 for the Input root. The `size`
|
|
705
1253
|
* cascades to descendants through a visual context so InputField renders at
|
|
@@ -712,98 +1260,245 @@ interface InputOwnProps {
|
|
|
712
1260
|
*/
|
|
713
1261
|
size?: InputSize;
|
|
714
1262
|
/** Per-slot class name overrides. */
|
|
715
|
-
classNames?: ClassNamesMap<InputSlot>;
|
|
1263
|
+
classNames?: ClassNamesMap<InputSlot>;
|
|
1264
|
+
/** Per-slot HTML attribute overrides. */
|
|
1265
|
+
slotProps?: SlotPropsMap<InputSlot>;
|
|
1266
|
+
}
|
|
1267
|
+
/**
|
|
1268
|
+
* Public props for the Input root. Polymorphic via `as`; ref and the native
|
|
1269
|
+
* attributes of the rendered element are inherited from Spar's
|
|
1270
|
+
* `PolymorphicProps`.
|
|
1271
|
+
*/
|
|
1272
|
+
type InputProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputOwnProps & Pick<InputProps$1, 'id' | 'invalid' | 'disabled' | 'required' | 'readOnly'>>;
|
|
1273
|
+
interface InputFieldOwnProps {
|
|
1274
|
+
/** Per-slot class name overrides. */
|
|
1275
|
+
classNames?: ClassNamesMap<InputFieldSlot>;
|
|
1276
|
+
/** Per-slot HTML attribute overrides. */
|
|
1277
|
+
slotProps?: SlotPropsMap<InputFieldSlot>;
|
|
1278
|
+
}
|
|
1279
|
+
type InputFieldProps<T extends ElementType = 'input'> = PolymorphicProps<'input', T, InputFieldOwnProps & Pick<InputFieldProps$1, 'autoFocus'>>;
|
|
1280
|
+
interface InputPrefixOwnProps {
|
|
1281
|
+
/** Per-slot class name overrides. */
|
|
1282
|
+
classNames?: ClassNamesMap<InputPrefixSlot>;
|
|
1283
|
+
/** Per-slot HTML attribute overrides. */
|
|
1284
|
+
slotProps?: SlotPropsMap<InputPrefixSlot>;
|
|
1285
|
+
children?: ReactNode;
|
|
1286
|
+
}
|
|
1287
|
+
type InputPrefixProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputPrefixOwnProps>;
|
|
1288
|
+
interface InputSuffixOwnProps {
|
|
1289
|
+
/** Per-slot class name overrides. */
|
|
1290
|
+
classNames?: ClassNamesMap<InputSuffixSlot>;
|
|
1291
|
+
/** Per-slot HTML attribute overrides. */
|
|
1292
|
+
slotProps?: SlotPropsMap<InputSuffixSlot>;
|
|
1293
|
+
children?: ReactNode;
|
|
1294
|
+
}
|
|
1295
|
+
type InputSuffixProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputSuffixOwnProps>;
|
|
1296
|
+
interface InputLeadingIconOwnProps {
|
|
1297
|
+
/** Per-slot class name overrides. */
|
|
1298
|
+
classNames?: ClassNamesMap<InputLeadingIconSlot>;
|
|
1299
|
+
/** Per-slot HTML attribute overrides. */
|
|
1300
|
+
slotProps?: SlotPropsMap<InputLeadingIconSlot>;
|
|
1301
|
+
children?: ReactNode;
|
|
1302
|
+
}
|
|
1303
|
+
type InputLeadingIconProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputLeadingIconOwnProps>;
|
|
1304
|
+
interface InputTrailingIconOwnProps {
|
|
1305
|
+
/** Per-slot class name overrides. */
|
|
1306
|
+
classNames?: ClassNamesMap<InputTrailingIconSlot>;
|
|
1307
|
+
/** Per-slot HTML attribute overrides. */
|
|
1308
|
+
slotProps?: SlotPropsMap<InputTrailingIconSlot>;
|
|
1309
|
+
children?: ReactNode;
|
|
1310
|
+
}
|
|
1311
|
+
type InputTrailingIconProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputTrailingIconOwnProps>;
|
|
1312
|
+
interface InputClearButtonOwnProps {
|
|
1313
|
+
/** Called after the field value is cleared. */
|
|
1314
|
+
onClear?: () => void;
|
|
1315
|
+
/** Per-slot class name overrides. */
|
|
1316
|
+
classNames?: ClassNamesMap<InputClearButtonSlot>;
|
|
1317
|
+
/** Per-slot HTML attribute overrides. */
|
|
1318
|
+
slotProps?: SlotPropsMap<InputClearButtonSlot>;
|
|
1319
|
+
children?: ReactNode;
|
|
1320
|
+
}
|
|
1321
|
+
type InputClearButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputClearButtonOwnProps>;
|
|
1322
|
+
interface InputSpinnerOwnProps {
|
|
1323
|
+
/** Per-slot class name overrides. */
|
|
1324
|
+
classNames?: ClassNamesMap<InputSpinnerSlot>;
|
|
716
1325
|
/** Per-slot HTML attribute overrides. */
|
|
717
|
-
slotProps?: SlotPropsMap<
|
|
1326
|
+
slotProps?: SlotPropsMap<InputSpinnerSlot>;
|
|
1327
|
+
children?: ReactNode;
|
|
718
1328
|
}
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
* attributes of the rendered element are inherited from Spar's
|
|
722
|
-
* `PolymorphicProps`.
|
|
723
|
-
*/
|
|
724
|
-
type InputProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputOwnProps & Pick<InputProps$1, 'id' | 'invalid' | 'disabled' | 'required' | 'readOnly'>>;
|
|
725
|
-
interface InputFieldOwnProps {
|
|
1329
|
+
type InputSpinnerProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, InputSpinnerOwnProps>;
|
|
1330
|
+
interface InputRevealButtonOwnProps {
|
|
726
1331
|
/** Per-slot class name overrides. */
|
|
727
|
-
classNames?: ClassNamesMap<
|
|
1332
|
+
classNames?: ClassNamesMap<InputRevealButtonSlot>;
|
|
728
1333
|
/** Per-slot HTML attribute overrides. */
|
|
729
|
-
slotProps?: SlotPropsMap<
|
|
1334
|
+
slotProps?: SlotPropsMap<InputRevealButtonSlot>;
|
|
1335
|
+
children?: ReactNode;
|
|
1336
|
+
}
|
|
1337
|
+
type InputRevealButtonProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputRevealButtonOwnProps>;
|
|
1338
|
+
interface InputStrengthOwnProps {
|
|
1339
|
+
/** Per-slot class name overrides. */
|
|
1340
|
+
classNames?: ClassNamesMap<InputStrengthSlot>;
|
|
1341
|
+
/** Per-slot HTML attribute overrides. */
|
|
1342
|
+
slotProps?: SlotPropsMap<InputStrengthSlot>;
|
|
1343
|
+
children?: ReactNode;
|
|
730
1344
|
}
|
|
731
|
-
type InputFieldProps<T extends ElementType = 'input'> = PolymorphicProps<'input', T, InputFieldOwnProps & Pick<InputFieldProps$1, 'autoFocus'>>;
|
|
732
1345
|
/**
|
|
733
|
-
*
|
|
734
|
-
*
|
|
735
|
-
*
|
|
736
|
-
* bordered input row.
|
|
1346
|
+
* Password strength meter rendered below the bordered row. It derives its
|
|
1347
|
+
* level from the field value cascaded through the Input context, so it must be
|
|
1348
|
+
* placed inside `Input` (it is hoisted out of the bordered row at render time).
|
|
737
1349
|
*/
|
|
738
|
-
|
|
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;
|
|
1350
|
+
type InputStrengthProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputStrengthOwnProps>;
|
|
1351
|
+
interface InputStepperOwnProps {
|
|
750
1352
|
/** Per-slot class name overrides. */
|
|
751
|
-
classNames?: ClassNamesMap<
|
|
1353
|
+
classNames?: ClassNamesMap<InputStepperSlot>;
|
|
752
1354
|
/** Per-slot HTML attribute overrides. */
|
|
753
|
-
slotProps?: SlotPropsMap<
|
|
1355
|
+
slotProps?: SlotPropsMap<InputStepperSlot>;
|
|
754
1356
|
children?: ReactNode;
|
|
755
1357
|
}
|
|
756
|
-
type
|
|
757
|
-
interface
|
|
1358
|
+
type InputStepperProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputStepperOwnProps>;
|
|
1359
|
+
interface InputDecrementOwnProps {
|
|
758
1360
|
/** Per-slot class name overrides. */
|
|
759
|
-
classNames?: ClassNamesMap<
|
|
1361
|
+
classNames?: ClassNamesMap<InputDecrementSlot>;
|
|
760
1362
|
/** Per-slot HTML attribute overrides. */
|
|
761
|
-
slotProps?: SlotPropsMap<
|
|
1363
|
+
slotProps?: SlotPropsMap<InputDecrementSlot>;
|
|
762
1364
|
children?: ReactNode;
|
|
763
1365
|
}
|
|
764
|
-
type
|
|
765
|
-
interface
|
|
1366
|
+
type InputDecrementProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputDecrementOwnProps>;
|
|
1367
|
+
interface InputIncrementOwnProps {
|
|
766
1368
|
/** Per-slot class name overrides. */
|
|
767
|
-
classNames?: ClassNamesMap<
|
|
1369
|
+
classNames?: ClassNamesMap<InputIncrementSlot>;
|
|
768
1370
|
/** Per-slot HTML attribute overrides. */
|
|
769
|
-
slotProps?: SlotPropsMap<
|
|
1371
|
+
slotProps?: SlotPropsMap<InputIncrementSlot>;
|
|
770
1372
|
children?: ReactNode;
|
|
771
1373
|
}
|
|
772
|
-
type
|
|
1374
|
+
type InputIncrementProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, InputIncrementOwnProps>;
|
|
1375
|
+
interface InputChipsOwnProps {
|
|
1376
|
+
/**
|
|
1377
|
+
* Committed tags (controlled). Pair with `onValueChange`. Spar's Input is a
|
|
1378
|
+
* scalar primitive with no array model, so the chips value is owned here as a
|
|
1379
|
+
* react-enhancement rather than picked from Spar.
|
|
1380
|
+
*/
|
|
1381
|
+
value?: string[];
|
|
1382
|
+
/** Initial tags for uncontrolled usage. */
|
|
1383
|
+
defaultValue?: string[];
|
|
1384
|
+
/** Called with the next tag array after a commit or removal. */
|
|
1385
|
+
onValueChange?: (value: string[]) => void;
|
|
1386
|
+
/** Optional character that commits the field text as a tag (Enter always commits). */
|
|
1387
|
+
separator?: string;
|
|
1388
|
+
/** Maximum number of tags. Further commits are ignored once reached. */
|
|
1389
|
+
max?: number;
|
|
1390
|
+
/** Allow committing a tag that already exists. @defaultValue false */
|
|
1391
|
+
allowDuplicates?: boolean;
|
|
1392
|
+
/** Per-slot class name overrides. */
|
|
1393
|
+
classNames?: ClassNamesMap<InputChipsSlot>;
|
|
1394
|
+
/** Per-slot HTML attribute overrides. */
|
|
1395
|
+
slotProps?: SlotPropsMap<InputChipsSlot>;
|
|
1396
|
+
children?: ReactNode;
|
|
1397
|
+
}
|
|
1398
|
+
/**
|
|
1399
|
+
* Chips region rendered next to `Input.Field`. Owns the tag array, renders each
|
|
1400
|
+
* committed tag via the shared `Chip` token, and attaches its key handling
|
|
1401
|
+
* (Enter to commit, Backspace to remove the last tag) to the shared field ref
|
|
1402
|
+
* so `Input.Field` stays generic.
|
|
1403
|
+
*/
|
|
1404
|
+
type InputChipsProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, InputChipsOwnProps>;
|
|
773
1405
|
declare module '../../core/theme' {
|
|
774
1406
|
interface ComponentThemeRegistry {
|
|
775
1407
|
Input: ComponentThemeConfig<InputProps, InputSlot>;
|
|
776
|
-
InputContainer: ComponentThemeConfig<InputContainerProps, InputContainerSlot>;
|
|
777
1408
|
InputField: ComponentThemeConfig<InputFieldProps, InputFieldSlot>;
|
|
778
1409
|
InputPrefix: ComponentThemeConfig<InputPrefixProps, InputPrefixSlot>;
|
|
779
1410
|
InputSuffix: ComponentThemeConfig<InputSuffixProps, InputSuffixSlot>;
|
|
1411
|
+
InputLeadingIcon: ComponentThemeConfig<InputLeadingIconProps, InputLeadingIconSlot>;
|
|
1412
|
+
InputTrailingIcon: ComponentThemeConfig<InputTrailingIconProps, InputTrailingIconSlot>;
|
|
1413
|
+
InputClearButton: ComponentThemeConfig<InputClearButtonProps, InputClearButtonSlot>;
|
|
1414
|
+
InputSpinner: ComponentThemeConfig<InputSpinnerProps, InputSpinnerSlot>;
|
|
1415
|
+
InputRevealButton: ComponentThemeConfig<InputRevealButtonProps, InputRevealButtonSlot>;
|
|
1416
|
+
InputStrength: ComponentThemeConfig<InputStrengthProps, InputStrengthSlot>;
|
|
1417
|
+
InputStepper: ComponentThemeConfig<InputStepperProps, InputStepperSlot>;
|
|
1418
|
+
InputDecrement: ComponentThemeConfig<InputDecrementProps, InputDecrementSlot>;
|
|
1419
|
+
InputIncrement: ComponentThemeConfig<InputIncrementProps, InputIncrementSlot>;
|
|
1420
|
+
InputChips: ComponentThemeConfig<InputChipsProps, InputChipsSlot>;
|
|
780
1421
|
}
|
|
781
1422
|
}
|
|
782
1423
|
|
|
783
1424
|
declare const Input: {
|
|
784
|
-
<T extends react.ElementType = "div">(props: InputProps<T>):
|
|
1425
|
+
<T extends react.ElementType = "div">(props: InputProps<T>): react.JSX.Element;
|
|
785
1426
|
displayName: string;
|
|
786
1427
|
} & {
|
|
787
|
-
Container: {
|
|
788
|
-
<T extends react.ElementType = "div">(props: InputContainerProps<T>): react_jsx_runtime.JSX.Element;
|
|
789
|
-
displayName: string;
|
|
790
|
-
};
|
|
791
1428
|
Field: {
|
|
792
|
-
<T extends react.ElementType = "input">(props: InputFieldProps<T>):
|
|
1429
|
+
<T extends react.ElementType = "input">(props: InputFieldProps<T>): react.JSX.Element;
|
|
793
1430
|
displayName: string;
|
|
794
1431
|
};
|
|
795
1432
|
Prefix: {
|
|
796
|
-
<T extends react.ElementType = "span">(props: InputPrefixProps<T>):
|
|
1433
|
+
<T extends react.ElementType = "span">(props: InputPrefixProps<T>): react.JSX.Element;
|
|
797
1434
|
displayName: string;
|
|
798
1435
|
};
|
|
799
1436
|
Suffix: {
|
|
800
|
-
<T extends react.ElementType = "span">(props: InputSuffixProps<T>):
|
|
1437
|
+
<T extends react.ElementType = "span">(props: InputSuffixProps<T>): react.JSX.Element;
|
|
1438
|
+
displayName: string;
|
|
1439
|
+
};
|
|
1440
|
+
LeadingIcon: {
|
|
1441
|
+
<T extends react.ElementType = "span">(props: InputLeadingIconProps<T>): react.JSX.Element;
|
|
1442
|
+
displayName: string;
|
|
1443
|
+
};
|
|
1444
|
+
TrailingIcon: {
|
|
1445
|
+
<T extends react.ElementType = "span">(props: InputTrailingIconProps<T>): react.JSX.Element;
|
|
1446
|
+
displayName: string;
|
|
1447
|
+
};
|
|
1448
|
+
ClearButton: {
|
|
1449
|
+
<T extends react.ElementType = "button">(props: InputClearButtonProps<T>): react.JSX.Element | null;
|
|
801
1450
|
displayName: string;
|
|
802
1451
|
};
|
|
1452
|
+
Spinner: {
|
|
1453
|
+
<T extends react.ElementType = "span">(props: InputSpinnerProps<T>): react.JSX.Element;
|
|
1454
|
+
displayName: string;
|
|
1455
|
+
};
|
|
1456
|
+
RevealButton: {
|
|
1457
|
+
<T extends react.ElementType = "button">(props: InputRevealButtonProps<T>): react.JSX.Element;
|
|
1458
|
+
displayName: string;
|
|
1459
|
+
};
|
|
1460
|
+
Strength: {
|
|
1461
|
+
<T extends react.ElementType = "div">(props: InputStrengthProps<T>): react.JSX.Element;
|
|
1462
|
+
displayName: string;
|
|
1463
|
+
};
|
|
1464
|
+
Stepper: {
|
|
1465
|
+
<T extends react.ElementType = "div">(props: InputStepperProps<T>): react.JSX.Element;
|
|
1466
|
+
displayName: string;
|
|
1467
|
+
};
|
|
1468
|
+
Decrement: {
|
|
1469
|
+
<T extends react.ElementType = "button">(props: InputDecrementProps<T>): react.JSX.Element;
|
|
1470
|
+
displayName: string;
|
|
1471
|
+
};
|
|
1472
|
+
Increment: {
|
|
1473
|
+
<T extends react.ElementType = "button">(props: InputIncrementProps<T>): react.JSX.Element;
|
|
1474
|
+
displayName: string;
|
|
1475
|
+
};
|
|
1476
|
+
Chips: {
|
|
1477
|
+
<T extends react.ElementType = "div">(props: InputChipsProps<T>): react.JSX.Element;
|
|
1478
|
+
displayName: string;
|
|
1479
|
+
};
|
|
1480
|
+
};
|
|
1481
|
+
|
|
1482
|
+
type LabelSlot = 'root';
|
|
1483
|
+
interface LabelOwnProps {
|
|
1484
|
+
/** Per-slot extra classes. */
|
|
1485
|
+
classNames?: ClassNamesMap<LabelSlot>;
|
|
1486
|
+
/** Per-slot HTML-attribute overrides. */
|
|
1487
|
+
slotProps?: SlotPropsMap<LabelSlot>;
|
|
1488
|
+
}
|
|
1489
|
+
type LabelProps<T extends ElementType = 'label'> = PolymorphicProps<'label', T, LabelOwnProps & Pick<LabelProps$1, 'children' | 'required' | 'optional' | 'disabled' | 'readOnly' | 'invalid'>>;
|
|
1490
|
+
declare module '../../core/theme' {
|
|
1491
|
+
interface ComponentThemeRegistry {
|
|
1492
|
+
Label: ComponentThemeConfig<LabelProps, LabelSlot>;
|
|
1493
|
+
}
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
declare const Label: {
|
|
1497
|
+
<T extends ElementType = "label">(props: LabelProps<T>): react.JSX.Element;
|
|
1498
|
+
displayName: string;
|
|
803
1499
|
};
|
|
804
1500
|
|
|
805
1501
|
type RadioSize = 'small' | 'base' | 'large';
|
|
806
|
-
type RadioType = 'default' | 'card';
|
|
807
1502
|
type RadioPosition = 'left' | 'right';
|
|
808
1503
|
type RadioSlot = 'root';
|
|
809
1504
|
type RadioItemSlot = 'root';
|
|
@@ -824,11 +1519,6 @@ interface RadioOwnProps {
|
|
|
824
1519
|
* @defaultValue 'base'
|
|
825
1520
|
*/
|
|
826
1521
|
size?: RadioSize;
|
|
827
|
-
/**
|
|
828
|
-
* Visual variant. Cascades to descendant `Radio.Item`s via context.
|
|
829
|
-
* @defaultValue 'default'
|
|
830
|
-
*/
|
|
831
|
-
type?: RadioType;
|
|
832
1522
|
/**
|
|
833
1523
|
* Marks the group as visually invalid. Cascades to descendant `Radio.Item`s.
|
|
834
1524
|
* When nested inside a `<Field>` with `invalid`, this is inherited
|
|
@@ -903,28 +1593,28 @@ declare module '../../core/theme' {
|
|
|
903
1593
|
}
|
|
904
1594
|
|
|
905
1595
|
declare const Radio: {
|
|
906
|
-
<T extends react.ElementType = "div">(props: RadioProps<T>):
|
|
1596
|
+
<T extends react.ElementType = "div">(props: RadioProps<T>): react.JSX.Element;
|
|
907
1597
|
displayName: string;
|
|
908
1598
|
} & {
|
|
909
1599
|
Item: {
|
|
910
|
-
<T extends react.ElementType = "label">(props: RadioItemProps<T>):
|
|
1600
|
+
<T extends react.ElementType = "label">(props: RadioItemProps<T>): react.JSX.Element;
|
|
911
1601
|
displayName: string;
|
|
912
1602
|
};
|
|
913
1603
|
Indicator: {
|
|
914
|
-
<T extends react.ElementType = "span">(props: RadioIndicatorProps<T>):
|
|
1604
|
+
<T extends react.ElementType = "span">(props: RadioIndicatorProps<T>): react.JSX.Element;
|
|
915
1605
|
displayName: string;
|
|
916
1606
|
};
|
|
917
1607
|
Label: {
|
|
918
|
-
<T extends react.ElementType = "span">(props: RadioLabelProps<T>):
|
|
1608
|
+
<T extends react.ElementType = "span">(props: RadioLabelProps<T>): react.JSX.Element;
|
|
919
1609
|
displayName: string;
|
|
920
1610
|
};
|
|
921
1611
|
};
|
|
922
1612
|
|
|
923
1613
|
/**
|
|
924
1614
|
* Visual variant of the popover content.
|
|
925
|
-
* @defaultValue '
|
|
1615
|
+
* @defaultValue 'white'
|
|
926
1616
|
*/
|
|
927
|
-
type PopoverVariant = '
|
|
1617
|
+
type PopoverVariant = 'white' | 'dark' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
928
1618
|
type PopoverTriggerSlot = 'root';
|
|
929
1619
|
type PopoverContentSlot = 'root';
|
|
930
1620
|
type PopoverHeaderSlot = 'root';
|
|
@@ -946,7 +1636,7 @@ type PopoverTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'b
|
|
|
946
1636
|
interface PopoverContentOwnProps {
|
|
947
1637
|
/**
|
|
948
1638
|
* Color variant.
|
|
949
|
-
* @defaultValue '
|
|
1639
|
+
* @defaultValue 'white'
|
|
950
1640
|
*/
|
|
951
1641
|
variant?: PopoverVariant;
|
|
952
1642
|
/** Per-slot extra classes. */
|
|
@@ -996,31 +1686,31 @@ declare module '../../core/theme' {
|
|
|
996
1686
|
}
|
|
997
1687
|
|
|
998
1688
|
declare const Popover: {
|
|
999
|
-
(props: PopoverProps):
|
|
1689
|
+
(props: PopoverProps): react.JSX.Element;
|
|
1000
1690
|
displayName: string;
|
|
1001
1691
|
} & {
|
|
1002
1692
|
Trigger: {
|
|
1003
|
-
<T extends react.ElementType = "button">(props: PopoverTriggerProps<T>):
|
|
1693
|
+
<T extends react.ElementType = "button">(props: PopoverTriggerProps<T>): react.JSX.Element;
|
|
1004
1694
|
displayName: string;
|
|
1005
1695
|
};
|
|
1006
1696
|
Content: {
|
|
1007
|
-
<T extends react.ElementType = "div">(props: PopoverContentProps<T>):
|
|
1697
|
+
<T extends react.ElementType = "div">(props: PopoverContentProps<T>): react.JSX.Element;
|
|
1008
1698
|
displayName: string;
|
|
1009
1699
|
};
|
|
1010
1700
|
Header: {
|
|
1011
|
-
<T extends react.ElementType = "div">(props: PopoverHeaderProps<T>):
|
|
1701
|
+
<T extends react.ElementType = "div">(props: PopoverHeaderProps<T>): react.JSX.Element;
|
|
1012
1702
|
displayName: string;
|
|
1013
1703
|
};
|
|
1014
1704
|
Description: {
|
|
1015
|
-
<T extends react.ElementType = "p">(props: PopoverDescriptionProps<T>):
|
|
1705
|
+
<T extends react.ElementType = "p">(props: PopoverDescriptionProps<T>): react.JSX.Element;
|
|
1016
1706
|
displayName: string;
|
|
1017
1707
|
};
|
|
1018
1708
|
Arrow: {
|
|
1019
|
-
<T extends react.ElementType = "svg">(props: PopoverArrowProps<T>):
|
|
1709
|
+
<T extends react.ElementType = "svg">(props: PopoverArrowProps<T>): react.JSX.Element;
|
|
1020
1710
|
displayName: string;
|
|
1021
1711
|
};
|
|
1022
1712
|
Close: {
|
|
1023
|
-
<T extends react.ElementType = "button">(props: PopoverCloseProps<T>):
|
|
1713
|
+
<T extends react.ElementType = "button">(props: PopoverCloseProps<T>): react.JSX.Element;
|
|
1024
1714
|
displayName: string;
|
|
1025
1715
|
};
|
|
1026
1716
|
};
|
|
@@ -1036,7 +1726,8 @@ type SelectSize = 'small' | 'base' | 'large';
|
|
|
1036
1726
|
*/
|
|
1037
1727
|
type SelectContentWidth = 'trigger' | 'content' | number | string;
|
|
1038
1728
|
type SelectSlot = 'root';
|
|
1039
|
-
type SelectTriggerSlot = 'root';
|
|
1729
|
+
type SelectTriggerSlot = 'root' | 'value' | 'indicator';
|
|
1730
|
+
type SelectIndicatorSlot = 'root';
|
|
1040
1731
|
type SelectContentSlot = 'root';
|
|
1041
1732
|
type SelectItemSlot = 'root';
|
|
1042
1733
|
type SelectGroupSlot = 'root';
|
|
@@ -1075,13 +1766,53 @@ interface SelectOwnProps {
|
|
|
1075
1766
|
* `PolymorphicProps`.
|
|
1076
1767
|
*/
|
|
1077
1768
|
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'>>;
|
|
1769
|
+
/**
|
|
1770
|
+
* State surface delivered to a render-function `indicator` (on the Trigger) or
|
|
1771
|
+
* to {@link SelectIndicatorProps.children}. Lets consumers swap icons by open
|
|
1772
|
+
* state without pulling the select context themselves. Mirrors the Accordion
|
|
1773
|
+
* indicator's render state.
|
|
1774
|
+
*/
|
|
1775
|
+
interface SelectIndicatorRenderState {
|
|
1776
|
+
isOpen: boolean;
|
|
1777
|
+
}
|
|
1078
1778
|
interface SelectTriggerOwnProps {
|
|
1779
|
+
/**
|
|
1780
|
+
* Disclosure indicator rendered at the trailing edge of the trigger,
|
|
1781
|
+
* after the value/placeholder. Defaults to a chevron that flips direction
|
|
1782
|
+
* with the open state (parity with `Accordion.Indicator`).
|
|
1783
|
+
*
|
|
1784
|
+
* - omit / `true` → the default chevron
|
|
1785
|
+
* - `false` / `null` → no indicator
|
|
1786
|
+
* - a ReactNode → custom static icon (rendered in every state)
|
|
1787
|
+
* - a render function receiving `{ isOpen }` → swap icons by open state
|
|
1788
|
+
*
|
|
1789
|
+
* Ignored when `children` is a render function: a render-prop `children` opts
|
|
1790
|
+
* the trigger out of the built-in indicator and value wrapper entirely, so
|
|
1791
|
+
* you can drop a standalone `<Select.Indicator />` into your own layout
|
|
1792
|
+
* without a doubled chevron.
|
|
1793
|
+
* @defaultValue true
|
|
1794
|
+
*/
|
|
1795
|
+
indicator?: boolean | ReactNode | ((state: SelectIndicatorRenderState) => ReactNode);
|
|
1079
1796
|
/** Per-slot class name overrides. */
|
|
1080
1797
|
classNames?: ClassNamesMap<SelectTriggerSlot>;
|
|
1081
1798
|
/** Per-slot HTML attribute overrides. */
|
|
1082
1799
|
slotProps?: SlotPropsMap<SelectTriggerSlot>;
|
|
1083
1800
|
}
|
|
1084
1801
|
type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children' | 'placeholder'>>;
|
|
1802
|
+
interface SelectIndicatorOwnProps {
|
|
1803
|
+
/**
|
|
1804
|
+
* Override the default chevron. Accepts a ReactNode (rendered in every
|
|
1805
|
+
* state) or a render function receiving the live `{ isOpen }` state — use
|
|
1806
|
+
* the render-prop form to swap icons by open state without consuming the
|
|
1807
|
+
* select context manually. Mirrors `Accordion.Indicator`.
|
|
1808
|
+
*/
|
|
1809
|
+
children?: ReactNode | ((state: SelectIndicatorRenderState) => ReactNode);
|
|
1810
|
+
/** Per-slot class name overrides. */
|
|
1811
|
+
classNames?: ClassNamesMap<SelectIndicatorSlot>;
|
|
1812
|
+
/** Per-slot HTML attribute overrides. */
|
|
1813
|
+
slotProps?: SlotPropsMap<SelectIndicatorSlot>;
|
|
1814
|
+
}
|
|
1815
|
+
type SelectIndicatorProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectIndicatorOwnProps>;
|
|
1085
1816
|
interface SelectContentOwnProps {
|
|
1086
1817
|
/** Per-slot class name overrides. */
|
|
1087
1818
|
classNames?: ClassNamesMap<SelectContentSlot>;
|
|
@@ -1121,6 +1852,7 @@ declare module '../../core/theme' {
|
|
|
1121
1852
|
interface ComponentThemeRegistry {
|
|
1122
1853
|
Select: ComponentThemeConfig<SelectProps, SelectSlot>;
|
|
1123
1854
|
SelectTrigger: ComponentThemeConfig<SelectTriggerProps, SelectTriggerSlot>;
|
|
1855
|
+
SelectIndicator: ComponentThemeConfig<SelectIndicatorProps, SelectIndicatorSlot>;
|
|
1124
1856
|
SelectContent: ComponentThemeConfig<SelectContentProps, SelectContentSlot>;
|
|
1125
1857
|
SelectItem: ComponentThemeConfig<SelectItemProps, SelectItemSlot>;
|
|
1126
1858
|
SelectGroup: ComponentThemeConfig<SelectGroupProps, SelectGroupSlot>;
|
|
@@ -1130,35 +1862,77 @@ declare module '../../core/theme' {
|
|
|
1130
1862
|
}
|
|
1131
1863
|
|
|
1132
1864
|
declare const Select: {
|
|
1133
|
-
<T extends react.ElementType = "div">(props: SelectProps<T>):
|
|
1865
|
+
<T extends react.ElementType = "div">(props: SelectProps<T>): react.JSX.Element;
|
|
1134
1866
|
displayName: string;
|
|
1135
1867
|
} & {
|
|
1136
1868
|
Trigger: {
|
|
1137
|
-
<T extends react.ElementType = "button">(props: SelectTriggerProps<T>):
|
|
1869
|
+
<T extends react.ElementType = "button">(props: SelectTriggerProps<T>): react.JSX.Element;
|
|
1870
|
+
displayName: string;
|
|
1871
|
+
};
|
|
1872
|
+
Indicator: {
|
|
1873
|
+
<T extends react.ElementType = "span">(props: SelectIndicatorProps<T>): react.JSX.Element;
|
|
1138
1874
|
displayName: string;
|
|
1139
1875
|
};
|
|
1140
1876
|
Content: {
|
|
1141
|
-
<T extends react.ElementType = "div">(props: SelectContentProps<T>):
|
|
1877
|
+
<T extends react.ElementType = "div">(props: SelectContentProps<T>): react.JSX.Element;
|
|
1142
1878
|
displayName: string;
|
|
1143
1879
|
};
|
|
1144
1880
|
Item: {
|
|
1145
|
-
<T extends react.ElementType = "div">(props: SelectItemProps<T>):
|
|
1881
|
+
<T extends react.ElementType = "div">(props: SelectItemProps<T>): react.JSX.Element;
|
|
1146
1882
|
displayName: string;
|
|
1147
1883
|
};
|
|
1148
1884
|
Group: {
|
|
1149
|
-
<T extends react.ElementType = "div">(props: SelectGroupProps<T>):
|
|
1885
|
+
<T extends react.ElementType = "div">(props: SelectGroupProps<T>): react.JSX.Element;
|
|
1150
1886
|
displayName: string;
|
|
1151
1887
|
};
|
|
1152
1888
|
Label: {
|
|
1153
|
-
<T extends react.ElementType = "label">(props: SelectLabelProps<T>):
|
|
1889
|
+
<T extends react.ElementType = "label">(props: SelectLabelProps<T>): react.JSX.Element;
|
|
1154
1890
|
displayName: string;
|
|
1155
1891
|
};
|
|
1156
1892
|
Separator: {
|
|
1157
|
-
<T extends react.ElementType = "div">(props: SelectSeparatorProps<T>):
|
|
1893
|
+
<T extends react.ElementType = "div">(props: SelectSeparatorProps<T>): react.JSX.Element;
|
|
1158
1894
|
displayName: string;
|
|
1159
1895
|
};
|
|
1160
1896
|
};
|
|
1161
1897
|
|
|
1898
|
+
type SpinnerSize = 'small' | 'base' | 'large' | 'xlarge';
|
|
1899
|
+
type SpinnerAppearance = 'rounded' | 'dots' | 'lines' | 'pulse' | 'threeDots' | 'loader' | 'logo';
|
|
1900
|
+
type SpinnerVariant = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning';
|
|
1901
|
+
type SpinnerSlot = 'root' | 'indicator';
|
|
1902
|
+
interface SpinnerProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
1903
|
+
/**
|
|
1904
|
+
* Size scale.
|
|
1905
|
+
* @defaultValue 'base'
|
|
1906
|
+
*/
|
|
1907
|
+
size?: SpinnerSize;
|
|
1908
|
+
/**
|
|
1909
|
+
* Visual spinner style.
|
|
1910
|
+
* @defaultValue 'rounded'
|
|
1911
|
+
*/
|
|
1912
|
+
appearance?: SpinnerAppearance;
|
|
1913
|
+
/**
|
|
1914
|
+
* Color variant.
|
|
1915
|
+
* @defaultValue 'neutral'
|
|
1916
|
+
*/
|
|
1917
|
+
variant?: SpinnerVariant;
|
|
1918
|
+
/** Ref forwarded to the root span element. */
|
|
1919
|
+
ref?: Ref<HTMLSpanElement>;
|
|
1920
|
+
/** Per-slot extra classes. */
|
|
1921
|
+
classNames?: ClassNamesMap<SpinnerSlot>;
|
|
1922
|
+
/** Per-slot HTML-attribute overrides. */
|
|
1923
|
+
slotProps?: SlotPropsMap<SpinnerSlot>;
|
|
1924
|
+
}
|
|
1925
|
+
declare module '../../core/theme' {
|
|
1926
|
+
interface ComponentThemeRegistry {
|
|
1927
|
+
Spinner: ComponentThemeConfig<SpinnerProps, SpinnerSlot>;
|
|
1928
|
+
}
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
declare const Spinner: {
|
|
1932
|
+
(props: SpinnerProps): react.JSX.Element;
|
|
1933
|
+
displayName: string;
|
|
1934
|
+
};
|
|
1935
|
+
|
|
1162
1936
|
type SwitchSize = 'xlarge' | 'large' | 'base' | 'small' | 'xsmall';
|
|
1163
1937
|
type SwitchVariant = 'info' | 'success';
|
|
1164
1938
|
type SwitchSlot = 'root' | 'indicator' | 'thumb';
|
|
@@ -1232,16 +2006,441 @@ declare module '../../core/theme' {
|
|
|
1232
2006
|
}
|
|
1233
2007
|
|
|
1234
2008
|
declare const Switch: {
|
|
1235
|
-
<T extends react.ElementType = "button">(props: SwitchProps<T>):
|
|
2009
|
+
<T extends react.ElementType = "button">(props: SwitchProps<T>): react.JSX.Element;
|
|
1236
2010
|
displayName: string;
|
|
1237
2011
|
} & {
|
|
1238
2012
|
Indicator: {
|
|
1239
|
-
(props: SwitchIndicatorProps):
|
|
2013
|
+
(props: SwitchIndicatorProps): react.JSX.Element;
|
|
2014
|
+
displayName: string;
|
|
2015
|
+
};
|
|
2016
|
+
};
|
|
2017
|
+
|
|
2018
|
+
/**
|
|
2019
|
+
* Table is the catalog's first **TanStack-backed** component — its state core
|
|
2020
|
+
* is `@tanstack/react-table`, not a Spar primitive. Consequently these public
|
|
2021
|
+
* types are **v2-owned** (built on TanStack's generics) and carry no
|
|
2022
|
+
* `Pick<SparTableProps, …>` boundary: there is no `SparTable` to pick from, so
|
|
2023
|
+
* the `check-spar-pick.mjs` guard does not apply. See
|
|
2024
|
+
* `docs/rfc-table-component.md` §3.2 and §9.
|
|
2025
|
+
*/
|
|
2026
|
+
/** Density scale → `data-size`. */
|
|
2027
|
+
type TableSize = 'xsmall' | 'small' | 'base';
|
|
2028
|
+
/** Horizontal cell content alignment → `data-align`. */
|
|
2029
|
+
type TableAlign = 'start' | 'center' | 'end';
|
|
2030
|
+
/** Pins a column to a table edge → `data-sticky`. */
|
|
2031
|
+
type TableStickySide = 'left' | 'right';
|
|
2032
|
+
/**
|
|
2033
|
+
* Slot vocabulary for `classNames` / `slotProps`. Table is props-first with a
|
|
2034
|
+
* single public component, so every anatomy node is reached through these
|
|
2035
|
+
* slot keys rather than a public compound part (RFC §3.1, Tier 1.5).
|
|
2036
|
+
*/
|
|
2037
|
+
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';
|
|
2038
|
+
/**
|
|
2039
|
+
* How a column reads its value out of a row:
|
|
2040
|
+
*
|
|
2041
|
+
* - `keyof TData` — a top-level property key.
|
|
2042
|
+
* - `string` — a dot-path into nested data (`'user.role'`), resolved by
|
|
2043
|
+
* TanStack's `accessorKey`.
|
|
2044
|
+
* - `(row) => unknown` — an arbitrary projection.
|
|
2045
|
+
*/
|
|
2046
|
+
type TableColumnAccessor<TData> = keyof TData | (string & {}) | ((row: TData) => unknown);
|
|
2047
|
+
/**
|
|
2048
|
+
* Context handed to a column's {@link TableColumnFilter.render}. Table owns the
|
|
2049
|
+
* filter **plumbing** — the header trigger, the `Popover`, the active-state dot,
|
|
2050
|
+
* the TanStack wiring — and inverts control of the panel **content** to the
|
|
2051
|
+
* consumer (the same inversion as `cell` and `expansion.render`).
|
|
2052
|
+
*
|
|
2053
|
+
* `value` is whatever shape the consumer's control writes via `setValue`; Table
|
|
2054
|
+
* never interprets it beyond feeding TanStack's filter state and the
|
|
2055
|
+
* {@link TableColumnFilter.isActive} predicate.
|
|
2056
|
+
*/
|
|
2057
|
+
interface TableColumnFilterContext<TData = unknown> {
|
|
2058
|
+
/** Current filter value for this column (the last `setValue`, or `undefined`). */
|
|
2059
|
+
value: unknown;
|
|
2060
|
+
/** Write the column's filter value. Pass `undefined` to clear the filter. */
|
|
2061
|
+
setValue: (value: unknown) => void;
|
|
2062
|
+
/** Convenience for `setValue(undefined)`. */
|
|
2063
|
+
clear: () => void;
|
|
2064
|
+
/** The TanStack column — escape hatch for faceted values, sizing, etc. */
|
|
2065
|
+
column: Column<TData, unknown>;
|
|
2066
|
+
/** Close the filter popover (e.g. an apply-and-close button). */
|
|
2067
|
+
close: () => void;
|
|
2068
|
+
}
|
|
2069
|
+
/**
|
|
2070
|
+
* Built-in filter presets — the common cases, declarative and one-line. Table
|
|
2071
|
+
* renders the control (with v2 components) and wires the matching:
|
|
2072
|
+
*
|
|
2073
|
+
* - `text` → `Input`; case-insensitive substring match.
|
|
2074
|
+
* - `select` → single-choice `Select` dropdown; equality match.
|
|
2075
|
+
* - `multi-select` → multi-choice `Select` dropdown; membership match.
|
|
2076
|
+
* - `radio` → inline `Radio` group (single choice); equality match.
|
|
2077
|
+
* - `checkbox` → inline `Checkbox` list (multi choice); membership match.
|
|
2078
|
+
*
|
|
2079
|
+
* For anything outside this set (range, date, combobox, async options, …) use
|
|
2080
|
+
* the {@link TableColumnFilter.render} escape hatch instead.
|
|
2081
|
+
*/
|
|
2082
|
+
type TableColumnFilterType = 'text' | 'select' | 'multi-select' | 'radio' | 'checkbox';
|
|
2083
|
+
/** Option for the `select` / `multi-select` / `radio` / `checkbox` presets. */
|
|
2084
|
+
interface TableColumnFilterOption {
|
|
2085
|
+
/** Visible label. */
|
|
2086
|
+
label: ReactNode;
|
|
2087
|
+
/** Value written to filter state (matched against the stringified cell value). */
|
|
2088
|
+
value: string;
|
|
2089
|
+
}
|
|
2090
|
+
/**
|
|
2091
|
+
* Per-column filter config. **Two tiers** (mirroring Mantine/Material React
|
|
2092
|
+
* Table, AG Grid, MUI X — every mature table layers a shorthand under an escape
|
|
2093
|
+
* hatch):
|
|
2094
|
+
*
|
|
2095
|
+
* 1. **Preset** — the 90% case in one line. Pass a {@link TableColumnFilterType}
|
|
2096
|
+
* string (`filter: 'text'`) or this object with `type` (+ `options` for the
|
|
2097
|
+
* choice presets). Table renders the control and picks the matching fn.
|
|
2098
|
+
* 2. **Escape hatch** — pass `render` to own the panel content entirely (the
|
|
2099
|
+
* inversion of control used by `cell` / `expansion.render`). `type`/`options`
|
|
2100
|
+
* are ignored when `render` is present.
|
|
2101
|
+
*
|
|
2102
|
+
* Either way Table keeps owning the surrounding trigger + `Popover` (a real
|
|
2103
|
+
* React portal — also the fix for the legacy sticky-cell z-index bug).
|
|
2104
|
+
*/
|
|
2105
|
+
interface TableColumnFilter<TData = unknown> {
|
|
2106
|
+
/** Preset control to render. Ignored when {@link render} is supplied. */
|
|
2107
|
+
type?: TableColumnFilterType;
|
|
2108
|
+
/** Options for the `select` / `multi-select` / `radio` / `checkbox` presets. */
|
|
2109
|
+
options?: TableColumnFilterOption[];
|
|
2110
|
+
/** Placeholder for the `text` preset's input / `select` triggers. */
|
|
2111
|
+
placeholder?: string;
|
|
2112
|
+
/**
|
|
2113
|
+
* Escape hatch: render the filter control yourself. Receives the column's
|
|
2114
|
+
* value + setter (see {@link TableColumnFilterContext}). When present, the
|
|
2115
|
+
* preset fields above are ignored.
|
|
2116
|
+
*/
|
|
2117
|
+
render?: (ctx: TableColumnFilterContext<TData>) => ReactNode;
|
|
2118
|
+
/**
|
|
2119
|
+
* Whether a given filter value counts as "active" — drives the trigger's
|
|
2120
|
+
* active indicator. Defaults to a sensible heuristic (non-empty string,
|
|
2121
|
+
* non-empty array, or any non-nullish value); presets set this for you.
|
|
2122
|
+
*/
|
|
2123
|
+
isActive?: (value: unknown) => boolean;
|
|
2124
|
+
/**
|
|
2125
|
+
* Row-matching predicate (client mode). Presets supply their own; for a
|
|
2126
|
+
* custom `render` you can pass one here, else Table defaults by value shape:
|
|
2127
|
+
* `string` → substring, `array` → membership, else strict equality. Ignored
|
|
2128
|
+
* in `manual` mode, where the server matches. Signature is TanStack's
|
|
2129
|
+
* `FilterFn`, so any built-in name or fn works.
|
|
2130
|
+
*/
|
|
2131
|
+
filterFn?: FilterFn<TData>;
|
|
2132
|
+
}
|
|
2133
|
+
/**
|
|
2134
|
+
* Open-ended, low-frequency per-column config. Frequently-used closed-set
|
|
2135
|
+
* knobs (`align`, `sticky`, `width`) live top-level on {@link TableColumnDef};
|
|
2136
|
+
* everything else flows through here so the public column def stays lean
|
|
2137
|
+
* (RFC §3.2). Bound to TanStack's `columnDef.meta` via declaration merging
|
|
2138
|
+
* below.
|
|
2139
|
+
*/
|
|
2140
|
+
interface TableColumnMeta {
|
|
2141
|
+
/** Extra class on the body cell (`<td>`) owner node. */
|
|
2142
|
+
className?: string;
|
|
2143
|
+
/** Extra class on the header cell (`<th>`) owner node. */
|
|
2144
|
+
headerClassName?: string;
|
|
2145
|
+
/** Alignment override scoped to the header cell only. */
|
|
2146
|
+
headerAlign?: TableAlign;
|
|
2147
|
+
}
|
|
2148
|
+
/**
|
|
2149
|
+
* A v2-owned column definition. Internally adapted to TanStack's `ColumnDef`
|
|
2150
|
+
* (RFC §3.2): `cell`/`header` are React render-props (never HTML strings),
|
|
2151
|
+
* `accessor` covers key / dot-path / function, and `meta` is the escape hatch
|
|
2152
|
+
* for the cell **container**.
|
|
2153
|
+
*/
|
|
2154
|
+
interface TableColumnDef<TData> {
|
|
2155
|
+
/** Stable column identity. Required — also keys sort/filter state. */
|
|
2156
|
+
id: string;
|
|
2157
|
+
/** Header content: a node, or a render-prop receiving TanStack's context. */
|
|
2158
|
+
header: ReactNode | ((ctx: HeaderContext<TData, unknown>) => ReactNode);
|
|
2159
|
+
/** How the cell value is read. See {@link TableColumnAccessor}. */
|
|
2160
|
+
accessor?: TableColumnAccessor<TData>;
|
|
2161
|
+
/**
|
|
2162
|
+
* Cell **content** render-prop. Returns a `ReactNode` — React reconciles it,
|
|
2163
|
+
* so there is no `innerHTML`, no cache to invalidate (RFC §3.4). The cell
|
|
2164
|
+
* **container** (`<td>`, padding, align, sticky, a11y) is owned by Table.
|
|
2165
|
+
*/
|
|
2166
|
+
cell?: (ctx: CellContext<TData, unknown>) => ReactNode;
|
|
2167
|
+
/** Opt this column into sorting (emits `aria-sort` + header keyboard). */
|
|
2168
|
+
sortable?: boolean;
|
|
2169
|
+
/**
|
|
2170
|
+
* Attach a header filter. A preset string (`'text'`), a preset object
|
|
2171
|
+
* (`{ type: 'select', options }`), or a custom `{ render }`. See
|
|
2172
|
+
* {@link TableColumnFilter}.
|
|
2173
|
+
*/
|
|
2174
|
+
filter?: TableColumnFilterType | TableColumnFilter<TData>;
|
|
2175
|
+
/**
|
|
2176
|
+
* Pin the column to an edge. Pinned columns must be **contiguous** against
|
|
2177
|
+
* their edge — all `left` pins together at the start, all `right` pins
|
|
2178
|
+
* together at the end. An unpinned column between two same-edge pins breaks
|
|
2179
|
+
* the sticky-offset math (the later pin overlaps the gap); dev builds warn.
|
|
2180
|
+
*/
|
|
2181
|
+
sticky?: TableStickySide;
|
|
2182
|
+
/** Fixed column width (px). Feeds sticky-offset math and `col` sizing. */
|
|
2183
|
+
width?: number;
|
|
2184
|
+
/** Cell content alignment. */
|
|
2185
|
+
align?: TableAlign;
|
|
2186
|
+
/** Cell-container escape hatch → TanStack `columnDef.meta`. */
|
|
2187
|
+
meta?: TableColumnMeta;
|
|
2188
|
+
}
|
|
2189
|
+
/** Controlled/uncontrolled triple shared by the stateful feature configs. */
|
|
2190
|
+
interface ControlledState<T> {
|
|
2191
|
+
/** Controlled value. Pair with `onChange`. */
|
|
2192
|
+
value?: T;
|
|
2193
|
+
/** Uncontrolled initial value. */
|
|
2194
|
+
defaultValue?: T;
|
|
2195
|
+
/** Fires on every committed change to this slice. */
|
|
2196
|
+
onChange?: (value: T) => void;
|
|
2197
|
+
}
|
|
2198
|
+
interface TableSortingConfig extends ControlledState<SortingState> {
|
|
2199
|
+
/** Allow stacking multiple sort columns (shift-click). @defaultValue false */
|
|
2200
|
+
multi?: boolean;
|
|
2201
|
+
}
|
|
2202
|
+
type TableFilteringConfig = ControlledState<ColumnFiltersState>;
|
|
2203
|
+
interface TableSelectionConfig extends ControlledState<RowSelectionState> {
|
|
2204
|
+
/** `single` renders radios + caps selection at one row; `multiple` renders checkboxes + a select-all header. */
|
|
2205
|
+
mode: 'single' | 'multiple';
|
|
2206
|
+
}
|
|
2207
|
+
interface TableExpansionConfig<TData> extends ControlledState<ExpandedState> {
|
|
2208
|
+
/**
|
|
2209
|
+
* Detail-panel renderer for an expanded row. Optional: when omitted, the
|
|
2210
|
+
* Table is in **tree mode** — pair `expansion` with the top-level
|
|
2211
|
+
* {@link TableProps.getSubRows} so expanding a row reveals its (flattened)
|
|
2212
|
+
* sub-rows instead of a detail panel.
|
|
2213
|
+
*
|
|
2214
|
+
* `render` and `getSubRows` are mutually exclusive expansion shapes. Supplying
|
|
2215
|
+
* both would draw the sub-rows *and* a detail panel for the same row, so when
|
|
2216
|
+
* `getSubRows` is present the detail panel is suppressed (tree mode wins).
|
|
2217
|
+
*/
|
|
2218
|
+
render?: (row: TData) => ReactNode;
|
|
2219
|
+
}
|
|
2220
|
+
interface TablePaginationConfig {
|
|
2221
|
+
/** Rows per page. @defaultValue 10 */
|
|
2222
|
+
pageSize?: number;
|
|
2223
|
+
/** Controlled current page (server mode). */
|
|
2224
|
+
pageIndex?: number;
|
|
2225
|
+
/** Page-size options for the Select. @defaultValue [10, 25, 50, 100] */
|
|
2226
|
+
pageSizeOptions?: number[];
|
|
2227
|
+
/** Total row count across all pages — required in `manual` (server) mode. */
|
|
2228
|
+
rowCount?: number;
|
|
2229
|
+
/** Fires when page index or size changes. */
|
|
2230
|
+
onChange?: (pagination: PaginationState) => void;
|
|
2231
|
+
}
|
|
2232
|
+
/**
|
|
2233
|
+
* Bundled server data-request snapshot. Emitted from a single `onDataRequest`
|
|
2234
|
+
* callback derived from the granular state slices, never a firehose
|
|
2235
|
+
* `onStateChange` (RFC §3.3).
|
|
2236
|
+
*/
|
|
2237
|
+
interface TableDataRequest {
|
|
2238
|
+
pagination: PaginationState;
|
|
2239
|
+
sorting: SortingState;
|
|
2240
|
+
filters: ColumnFiltersState;
|
|
2241
|
+
}
|
|
2242
|
+
/**
|
|
2243
|
+
* Public props for `Table`. Props-first (RFC §3.1, Tier 1): a common table is
|
|
2244
|
+
* a single `<Table data columns getRowId />` call. `getRowId` is **mandatory**
|
|
2245
|
+
* — the single identity source TanStack's `RowSelectionState` keys on (RFC §2.3).
|
|
2246
|
+
*
|
|
2247
|
+
* `TData` defaults to `any` only so the non-generic `TableProps` alias resolves
|
|
2248
|
+
* for the base/theme registry; real call sites infer `TData` from `data`.
|
|
2249
|
+
*/
|
|
2250
|
+
interface TableProps<TData = any> {
|
|
2251
|
+
/** Row data. In `manual` mode this is the current server page. */
|
|
2252
|
+
data: TData[];
|
|
2253
|
+
/** Column definitions. See {@link TableColumnDef}. */
|
|
2254
|
+
columns: TableColumnDef<TData>[];
|
|
2255
|
+
/** Stable row identity (single source of truth). */
|
|
2256
|
+
getRowId: (row: TData, index: number) => string;
|
|
2257
|
+
/**
|
|
2258
|
+
* Density scale.
|
|
2259
|
+
* @defaultValue 'base'
|
|
2260
|
+
*/
|
|
2261
|
+
size?: TableSize;
|
|
2262
|
+
/**
|
|
2263
|
+
* Zebra-stripe rows → `data-striped`.
|
|
2264
|
+
* @defaultValue false
|
|
2265
|
+
*/
|
|
2266
|
+
striped?: boolean;
|
|
2267
|
+
/**
|
|
2268
|
+
* Cell borders → `data-bordered`.
|
|
2269
|
+
* @defaultValue false
|
|
2270
|
+
*/
|
|
2271
|
+
bordered?: boolean;
|
|
2272
|
+
/**
|
|
2273
|
+
* Pin the header row during vertical scroll → `data-sticky-header`.
|
|
2274
|
+
* @defaultValue false
|
|
2275
|
+
*/
|
|
2276
|
+
stickyHeader?: boolean;
|
|
2277
|
+
/**
|
|
2278
|
+
* Server mode. When `true`, Table processes nothing in-memory — it maps to
|
|
2279
|
+
* TanStack's `manualSorting`/`manualFiltering`/`manualPagination` and emits a
|
|
2280
|
+
* single bundled `onDataRequest` (RFC §3.3).
|
|
2281
|
+
* @defaultValue false
|
|
2282
|
+
*/
|
|
2283
|
+
manual?: boolean;
|
|
2284
|
+
/** Row selection (single/multiple + select-all). Composes Spar Checkbox/Radio. */
|
|
2285
|
+
selection?: TableSelectionConfig;
|
|
2286
|
+
/** Sorting (multi-sort opt-in). */
|
|
2287
|
+
sorting?: TableSortingConfig;
|
|
2288
|
+
/** Column filtering. Filter UIs render in a Spar `Popover`. */
|
|
2289
|
+
filtering?: TableFilteringConfig;
|
|
2290
|
+
/** Expandable rows with a render-prop body. */
|
|
2291
|
+
expansion?: TableExpansionConfig<TData>;
|
|
2292
|
+
/** Pagination. `true` enables it with defaults; an object configures it. */
|
|
2293
|
+
pagination?: TablePaginationConfig | boolean;
|
|
2294
|
+
/** Bundled server data-request callback (`manual` mode). See {@link TableDataRequest}. */
|
|
2295
|
+
onDataRequest?: (request: TableDataRequest) => void;
|
|
2296
|
+
/**
|
|
2297
|
+
* Loading state → `data-loading` + a loading overlay.
|
|
2298
|
+
* @defaultValue false
|
|
2299
|
+
*/
|
|
2300
|
+
loading?: boolean;
|
|
2301
|
+
/** Content rendered when there are no rows. */
|
|
2302
|
+
emptyState?: ReactNode;
|
|
2303
|
+
/**
|
|
2304
|
+
* Sub-row reader for **tree data** (feeds TanStack `getSubRows`). Pair it with
|
|
2305
|
+
* `expansion` (sans `render`) so expanding a row reveals its flattened
|
|
2306
|
+
* sub-rows. When `getSubRows` is omitted, expansion falls back to the
|
|
2307
|
+
* detail-panel mode driven by `expansion.render`. Supplying both keeps tree
|
|
2308
|
+
* mode and suppresses the detail panel.
|
|
2309
|
+
*/
|
|
2310
|
+
getSubRows?: (row: TData) => TData[] | undefined;
|
|
2311
|
+
/**
|
|
2312
|
+
* Escape hatch for the rare imperative need — receives the TanStack table
|
|
2313
|
+
* instance (RFC §2.3: controlled props + an optional instance ref, never an
|
|
2314
|
+
* imperative `@Method` surface). Also the access point for `getExportRows()`.
|
|
2315
|
+
*/
|
|
2316
|
+
tableRef?: Ref<Table$1<TData> | null>;
|
|
2317
|
+
/** Extra class on the root scroll container. */
|
|
2318
|
+
className?: string;
|
|
2319
|
+
/** Per-slot class name overrides. */
|
|
2320
|
+
classNames?: ClassNamesMap<TableSlot>;
|
|
2321
|
+
/** Per-slot HTML attribute overrides. */
|
|
2322
|
+
slotProps?: SlotPropsMap<TableSlot>;
|
|
2323
|
+
/** Ref to the root scroll container. */
|
|
2324
|
+
ref?: Ref<HTMLDivElement>;
|
|
2325
|
+
}
|
|
2326
|
+
declare module '../../core/theme' {
|
|
2327
|
+
interface ComponentThemeRegistry {
|
|
2328
|
+
Table: ComponentThemeConfig<TableProps, TableSlot>;
|
|
2329
|
+
}
|
|
2330
|
+
}
|
|
2331
|
+
declare module '@tanstack/react-table' {
|
|
2332
|
+
interface ColumnMeta<TData extends _tanstack_react_table.RowData, TValue> {
|
|
2333
|
+
align?: TableAlign;
|
|
2334
|
+
sticky?: TableStickySide;
|
|
2335
|
+
width?: number;
|
|
2336
|
+
className?: string;
|
|
2337
|
+
headerClassName?: string;
|
|
2338
|
+
headerAlign?: TableAlign;
|
|
2339
|
+
filter?: TableColumnFilterType | TableColumnFilter<TData>;
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
|
|
2343
|
+
declare const Table: {
|
|
2344
|
+
<TData>(props: TableProps<TData>): react.JSX.Element;
|
|
2345
|
+
displayName: string;
|
|
2346
|
+
};
|
|
2347
|
+
|
|
2348
|
+
/**
|
|
2349
|
+
* Project the table's current rows to plain value records keyed by column id —
|
|
2350
|
+
* the data-only export surface (RFC §5). Formatting and file generation are the
|
|
2351
|
+
* consumer's job; Table ships no export engine. Reach it via the `tableRef`
|
|
2352
|
+
* instance: `getExportRows(tableRef.current)`.
|
|
2353
|
+
*
|
|
2354
|
+
* **Scope depends on mode.** In **client** mode this is every filtered + sorted
|
|
2355
|
+
* row *across all pages* (pre-pagination), since Table holds the full dataset.
|
|
2356
|
+
* In **server (`manual`)** mode Table only ever holds the current page, so the
|
|
2357
|
+
* export is limited to the rows currently loaded — fetch the full result set
|
|
2358
|
+
* yourself if you need to export beyond the visible page.
|
|
2359
|
+
*/
|
|
2360
|
+
declare const getExportRows: <TData>(table: Table$1<TData> | null | undefined) => Record<string, unknown>[];
|
|
2361
|
+
|
|
2362
|
+
type TabsSize = 'small' | 'base' | 'large';
|
|
2363
|
+
type TabsActivationMode = TabsActivationMode$1;
|
|
2364
|
+
type TabsVariant = 'primary' | 'info' | 'neutral';
|
|
2365
|
+
type TabsAppearance = 'basic' | 'compact' | 'divided' | 'expanded';
|
|
2366
|
+
type TabsTriggerRenderProps = Pick<TabsTriggerRenderProps$1, 'isSelected' | 'select' | 'disabled' | 'isFocused' | 'orientation'>;
|
|
2367
|
+
type TabsSlot = 'root';
|
|
2368
|
+
type TabsListSlot = 'root';
|
|
2369
|
+
type TabsTriggerSlot = 'root';
|
|
2370
|
+
type TabsContentSlot = 'root';
|
|
2371
|
+
interface TabsOwnProps {
|
|
2372
|
+
/**
|
|
2373
|
+
* Size scale. Cascades to `Tabs.Trigger` via context.
|
|
2374
|
+
* @defaultValue 'base'
|
|
2375
|
+
*/
|
|
2376
|
+
size?: TabsSize;
|
|
2377
|
+
/**
|
|
2378
|
+
* Color variant used by the active tab treatment.
|
|
2379
|
+
* @defaultValue 'primary'
|
|
2380
|
+
*/
|
|
2381
|
+
variant?: TabsVariant;
|
|
2382
|
+
/**
|
|
2383
|
+
* Visual tab style.
|
|
2384
|
+
* @defaultValue 'basic'
|
|
2385
|
+
*/
|
|
2386
|
+
appearance?: TabsAppearance;
|
|
2387
|
+
/** Per-slot class name overrides. */
|
|
2388
|
+
classNames?: ClassNamesMap<TabsSlot>;
|
|
2389
|
+
/** Per-slot HTML attribute overrides. */
|
|
2390
|
+
slotProps?: SlotPropsMap<TabsSlot>;
|
|
2391
|
+
}
|
|
2392
|
+
type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsOwnProps & Pick<TabsProps$1, 'id' | 'value' | 'defaultValue' | 'onValueChange' | 'orientation' | 'activationMode'>>;
|
|
2393
|
+
interface TabsListOwnProps {
|
|
2394
|
+
/** Per-slot class name overrides. */
|
|
2395
|
+
classNames?: ClassNamesMap<TabsListSlot>;
|
|
2396
|
+
/** Per-slot HTML attribute overrides. */
|
|
2397
|
+
slotProps?: SlotPropsMap<TabsListSlot>;
|
|
2398
|
+
}
|
|
2399
|
+
type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsListOwnProps & Pick<TabsListProps$1, 'children'>>;
|
|
2400
|
+
interface TabsTriggerOwnProps {
|
|
2401
|
+
/** Per-slot class name overrides. */
|
|
2402
|
+
classNames?: ClassNamesMap<TabsTriggerSlot>;
|
|
2403
|
+
/** Per-slot HTML attribute overrides. */
|
|
2404
|
+
slotProps?: SlotPropsMap<TabsTriggerSlot>;
|
|
2405
|
+
/** Compound children, or a render function exposing Spar's per-trigger state. */
|
|
2406
|
+
children?: ReactNode | ((state: TabsTriggerRenderProps) => ReactNode);
|
|
2407
|
+
}
|
|
2408
|
+
type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, TabsTriggerOwnProps & Pick<TabsTriggerProps$1, 'value' | 'disabled' | 'autoFocus'>>;
|
|
2409
|
+
interface TabsContentOwnProps {
|
|
2410
|
+
/** Per-slot class name overrides. */
|
|
2411
|
+
classNames?: ClassNamesMap<TabsContentSlot>;
|
|
2412
|
+
/** Per-slot HTML attribute overrides. */
|
|
2413
|
+
slotProps?: SlotPropsMap<TabsContentSlot>;
|
|
2414
|
+
}
|
|
2415
|
+
type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, TabsContentOwnProps & Pick<TabsContentProps$1, 'value' | 'forceMount'>>;
|
|
2416
|
+
declare module '../../core/theme' {
|
|
2417
|
+
interface ComponentThemeRegistry {
|
|
2418
|
+
Tabs: ComponentThemeConfig<TabsProps, TabsSlot>;
|
|
2419
|
+
TabsList: ComponentThemeConfig<TabsListProps, TabsListSlot>;
|
|
2420
|
+
TabsTrigger: ComponentThemeConfig<TabsTriggerProps, TabsTriggerSlot>;
|
|
2421
|
+
TabsContent: ComponentThemeConfig<TabsContentProps, TabsContentSlot>;
|
|
2422
|
+
}
|
|
2423
|
+
}
|
|
2424
|
+
|
|
2425
|
+
declare const Tabs: {
|
|
2426
|
+
<T extends react.ElementType = "div">(props: TabsProps<T>): react.JSX.Element;
|
|
2427
|
+
displayName: string;
|
|
2428
|
+
} & {
|
|
2429
|
+
List: {
|
|
2430
|
+
<T extends react.ElementType = "div">(props: TabsListProps<T>): react.JSX.Element;
|
|
2431
|
+
displayName: string;
|
|
2432
|
+
};
|
|
2433
|
+
Trigger: {
|
|
2434
|
+
<T extends react.ElementType = "button">(props: TabsTriggerProps<T>): react.JSX.Element;
|
|
2435
|
+
displayName: string;
|
|
2436
|
+
};
|
|
2437
|
+
Content: {
|
|
2438
|
+
<T extends react.ElementType = "div">(props: TabsContentProps<T>): react.JSX.Element;
|
|
1240
2439
|
displayName: string;
|
|
1241
2440
|
};
|
|
1242
2441
|
};
|
|
1243
2442
|
|
|
1244
|
-
type TooltipVariant = '
|
|
2443
|
+
type TooltipVariant = 'white' | 'dark' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
1245
2444
|
type TooltipTriggerSlot = 'root';
|
|
1246
2445
|
type TooltipContentSlot = 'root';
|
|
1247
2446
|
type TooltipHeaderSlot = 'root';
|
|
@@ -1268,7 +2467,7 @@ type TooltipTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'b
|
|
|
1268
2467
|
interface TooltipContentOwnProps {
|
|
1269
2468
|
/**
|
|
1270
2469
|
* Color variant.
|
|
1271
|
-
* @defaultValue '
|
|
2470
|
+
* @defaultValue 'white'
|
|
1272
2471
|
*/
|
|
1273
2472
|
variant?: TooltipVariant;
|
|
1274
2473
|
/** Per-slot extra classes. */
|
|
@@ -1309,33 +2508,78 @@ declare module '../../core/theme' {
|
|
|
1309
2508
|
}
|
|
1310
2509
|
|
|
1311
2510
|
declare const Tooltip: {
|
|
1312
|
-
({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }: TooltipProps):
|
|
2511
|
+
({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }: TooltipProps): react.JSX.Element;
|
|
1313
2512
|
displayName: string;
|
|
1314
2513
|
} & {
|
|
1315
2514
|
Provider: {
|
|
1316
|
-
({ children, delayDuration, skipDelayDuration, disableHoverableContent }: TooltipProviderProps):
|
|
2515
|
+
({ children, delayDuration, skipDelayDuration, disableHoverableContent }: TooltipProviderProps): react.JSX.Element;
|
|
1317
2516
|
displayName: string;
|
|
1318
2517
|
};
|
|
1319
2518
|
Trigger: {
|
|
1320
|
-
<T extends react.ElementType = "button">(props: TooltipTriggerProps<T>):
|
|
2519
|
+
<T extends react.ElementType = "button">(props: TooltipTriggerProps<T>): react.JSX.Element;
|
|
1321
2520
|
displayName: string;
|
|
1322
2521
|
};
|
|
1323
2522
|
Content: {
|
|
1324
|
-
<T extends react.ElementType = "div">(props: TooltipContentProps<T>):
|
|
2523
|
+
<T extends react.ElementType = "div">(props: TooltipContentProps<T>): react.JSX.Element;
|
|
1325
2524
|
displayName: string;
|
|
1326
2525
|
};
|
|
1327
2526
|
Header: {
|
|
1328
|
-
<T extends react.ElementType = "div">(props: TooltipHeaderProps<T>):
|
|
2527
|
+
<T extends react.ElementType = "div">(props: TooltipHeaderProps<T>): react.JSX.Element;
|
|
1329
2528
|
displayName: string;
|
|
1330
2529
|
};
|
|
1331
2530
|
Description: {
|
|
1332
|
-
<T extends react.ElementType = "p">(props: TooltipDescriptionProps<T>):
|
|
2531
|
+
<T extends react.ElementType = "p">(props: TooltipDescriptionProps<T>): react.JSX.Element;
|
|
1333
2532
|
displayName: string;
|
|
1334
2533
|
};
|
|
1335
2534
|
Arrow: {
|
|
1336
|
-
<T extends react.ElementType = "svg">(props: TooltipArrowProps<T>):
|
|
2535
|
+
<T extends react.ElementType = "svg">(props: TooltipArrowProps<T>): react.JSX.Element;
|
|
1337
2536
|
displayName: string;
|
|
1338
2537
|
};
|
|
1339
2538
|
};
|
|
1340
2539
|
|
|
1341
|
-
|
|
2540
|
+
type ToastVariant = AlertVariant;
|
|
2541
|
+
type ToastAppearance = AlertAppearance;
|
|
2542
|
+
type ToastSlot = 'root';
|
|
2543
|
+
type ToasterSlot = 'root';
|
|
2544
|
+
type ToastData = ToastData$1;
|
|
2545
|
+
type ToastOptions = ToastOptions$1;
|
|
2546
|
+
interface ToasterOwnProps {
|
|
2547
|
+
toaster: ToasterController;
|
|
2548
|
+
appearance?: ToastAppearance;
|
|
2549
|
+
closeLabel?: string;
|
|
2550
|
+
overlap?: boolean;
|
|
2551
|
+
classNames?: ClassNamesMap<ToasterSlot>;
|
|
2552
|
+
slotProps?: SlotPropsMap<ToasterSlot>;
|
|
2553
|
+
children?: (toast: ToastData) => ReactNode;
|
|
2554
|
+
}
|
|
2555
|
+
type ToasterProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ToasterOwnProps & Pick<ToasterProps$1, 'label' | 'hotkey'>>;
|
|
2556
|
+
interface ToastOwnProps {
|
|
2557
|
+
toast: ToastData;
|
|
2558
|
+
toaster?: ToasterController;
|
|
2559
|
+
appearance?: ToastAppearance;
|
|
2560
|
+
closeLabel?: string;
|
|
2561
|
+
classNames?: ClassNamesMap<ToastSlot>;
|
|
2562
|
+
slotProps?: SlotPropsMap<ToastSlot>;
|
|
2563
|
+
}
|
|
2564
|
+
type ToastProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ToastOwnProps & {
|
|
2565
|
+
children?: ReactNode;
|
|
2566
|
+
}>;
|
|
2567
|
+
|
|
2568
|
+
declare module '../../core/theme' {
|
|
2569
|
+
interface ComponentThemeRegistry {
|
|
2570
|
+
Toaster: ComponentThemeConfig<ToasterProps, ToasterSlot>;
|
|
2571
|
+
Toast: ComponentThemeConfig<ToastProps, ToastSlot>;
|
|
2572
|
+
}
|
|
2573
|
+
}
|
|
2574
|
+
|
|
2575
|
+
declare const Toaster: {
|
|
2576
|
+
<T extends ElementType = "div">(props: ToasterProps<T>): react.JSX.Element;
|
|
2577
|
+
displayName: string;
|
|
2578
|
+
};
|
|
2579
|
+
|
|
2580
|
+
declare const Toast: {
|
|
2581
|
+
<T extends ElementType = "div">(props: ToastProps<T>): react.JSX.Element;
|
|
2582
|
+
displayName: string;
|
|
2583
|
+
};
|
|
2584
|
+
|
|
2585
|
+
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 BreadcrumbSeparatorVariant, 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, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, 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, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, Select, type SelectContentProps, type SelectGroupProps, type SelectIndicatorProps, type SelectIndicatorRenderState, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SlotClassNames, type SlotPropsMap, Spinner, type SpinnerAppearance, type SpinnerProps, type SpinnerSize, type SpinnerSlot, type SpinnerVariant, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, 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 };
|