@takeoff-ui/react-spar 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/index.cjs +1455 -111
- package/dist/index.d.cts +1021 -15
- package/dist/index.d.ts +1021 -15
- package/dist/index.mjs +1452 -114
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
|
|
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';
|
|
3
|
+
import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbItemRenderProps, BreadcrumbLinkProps as BreadcrumbLinkProps$1, NavigationHandler, PressEvent, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, DialogOverlayProps as DialogOverlayProps$1, DialogContentProps, DialogTitleProps as DialogTitleProps$1, DialogCloseProps as DialogCloseProps$1, DropdownMenuProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuViewportProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuArrowProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, LabelProps as LabelProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectContentProps as SelectContentProps$1, SelectViewportProps as SelectViewportProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TabsListProps as TabsListProps$1, TabsTriggerRenderProps as TabsTriggerRenderProps$1, TabsTriggerProps as TabsTriggerProps$1, TabsContentProps as TabsContentProps$1, TabsActivationMode as TabsActivationMode$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1, ToasterController, ToastData as ToastData$1, ToasterProps as ToasterProps$1, ToastOptions as ToastOptions$1 } from '@turkish-technology/spar';
|
|
4
4
|
export { BreadcrumbItemRenderProps, BreadcrumbPosition, CreateToasterOptions, ToastAnnouncement, ToastPlacement, ToastPromiseOptions, ToastStatus, ToastType, ToastUpdateOptions, ToasterController, createToaster } from '@turkish-technology/spar';
|
|
5
5
|
import * as _tanstack_react_table from '@tanstack/react-table';
|
|
6
6
|
import { HeaderContext, CellContext, Column, FilterFn, RowSelectionState, SortingState, ColumnFiltersState, ExpandedState, PaginationState, Table as Table$1 } from '@tanstack/react-table';
|
|
@@ -447,12 +447,6 @@ type BreadcrumbSize = 'base' | 'large';
|
|
|
447
447
|
* crumb as a bordered, backgrounded chip.
|
|
448
448
|
*/
|
|
449
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
450
|
|
|
457
451
|
type BreadcrumbNavigationHandler = NavigationHandler;
|
|
458
452
|
type BreadcrumbPressEvent = PressEvent;
|
|
@@ -515,15 +509,10 @@ interface BreadcrumbPageOwnProps {
|
|
|
515
509
|
type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, BreadcrumbPageOwnProps>;
|
|
516
510
|
interface BreadcrumbSeparatorOwnProps {
|
|
517
511
|
/**
|
|
518
|
-
* Override the default separator
|
|
519
|
-
* canonical `<li aria-hidden>` owner node
|
|
512
|
+
* Override the default chevron separator. Plain content renders inside the
|
|
513
|
+
* canonical `<li aria-hidden>` owner node.
|
|
520
514
|
*/
|
|
521
515
|
children?: ReactNode;
|
|
522
|
-
/**
|
|
523
|
-
* Glyph preset rendered when no `children` are given.
|
|
524
|
-
* @defaultValue 'chevron'
|
|
525
|
-
*/
|
|
526
|
-
variant?: BreadcrumbSeparatorVariant;
|
|
527
516
|
/** Per-slot class name overrides. */
|
|
528
517
|
classNames?: ClassNamesMap<BreadcrumbSeparatorSlot>;
|
|
529
518
|
/** Per-slot HTML attribute overrides. */
|
|
@@ -1177,6 +1166,203 @@ declare const Dialog: {
|
|
|
1177
1166
|
};
|
|
1178
1167
|
};
|
|
1179
1168
|
|
|
1169
|
+
type DividerOrientation = 'horizontal' | 'vertical';
|
|
1170
|
+
type DividerAppearance = 'solid' | 'dashed' | 'dotted';
|
|
1171
|
+
type DividerAlign = 'start' | 'center' | 'end';
|
|
1172
|
+
type DividerSlot = 'root' | 'label';
|
|
1173
|
+
interface DividerProps extends Omit<TakeoffHTMLProps<'div'>, 'children' | 'role' | 'aria-orientation'> {
|
|
1174
|
+
/**
|
|
1175
|
+
* Axis of the divider line. Vertical dividers size from their container —
|
|
1176
|
+
* place them in a flex row (or give the parent an explicit height) so the
|
|
1177
|
+
* line has a height to fill.
|
|
1178
|
+
* @defaultValue 'horizontal'
|
|
1179
|
+
*/
|
|
1180
|
+
orientation?: DividerOrientation;
|
|
1181
|
+
/**
|
|
1182
|
+
* Line style.
|
|
1183
|
+
* @defaultValue 'solid'
|
|
1184
|
+
*/
|
|
1185
|
+
appearance?: DividerAppearance;
|
|
1186
|
+
/**
|
|
1187
|
+
* Placement of the label along the divider line.
|
|
1188
|
+
* @defaultValue 'center'
|
|
1189
|
+
*/
|
|
1190
|
+
align?: DividerAlign;
|
|
1191
|
+
/**
|
|
1192
|
+
* Marks the divider as purely visual. Decorative dividers are removed from
|
|
1193
|
+
* the accessibility tree (`role="none"`); non-decorative dividers render
|
|
1194
|
+
* `role="separator"` with the matching `aria-orientation`.
|
|
1195
|
+
* @defaultValue false
|
|
1196
|
+
*/
|
|
1197
|
+
decorative?: boolean;
|
|
1198
|
+
/**
|
|
1199
|
+
* Label content rendered between the line segments. The ARIA `separator`
|
|
1200
|
+
* role does not take its accessible name from content — pass `aria-label`
|
|
1201
|
+
* when the separator needs a name.
|
|
1202
|
+
*/
|
|
1203
|
+
children?: ReactNode;
|
|
1204
|
+
/** Ref forwarded to the root div element. */
|
|
1205
|
+
ref?: Ref<HTMLDivElement>;
|
|
1206
|
+
/** Per-slot extra classes. */
|
|
1207
|
+
classNames?: ClassNamesMap<DividerSlot>;
|
|
1208
|
+
/** Per-slot HTML-attribute overrides. */
|
|
1209
|
+
slotProps?: SlotPropsMap<DividerSlot>;
|
|
1210
|
+
}
|
|
1211
|
+
declare module '../../core/theme' {
|
|
1212
|
+
interface ComponentThemeRegistry {
|
|
1213
|
+
Divider: ComponentThemeConfig<DividerProps, DividerSlot>;
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
declare const Divider: {
|
|
1218
|
+
(props: DividerProps): react.JSX.Element;
|
|
1219
|
+
displayName: string;
|
|
1220
|
+
};
|
|
1221
|
+
|
|
1222
|
+
type DropdownSize = 'small' | 'base' | 'large';
|
|
1223
|
+
/**
|
|
1224
|
+
* Controls the panel's render width.
|
|
1225
|
+
*
|
|
1226
|
+
* - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
|
|
1227
|
+
* - `'trigger'`: panel matches the trigger's measured width
|
|
1228
|
+
* - `number`: explicit pixel width
|
|
1229
|
+
* - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
|
|
1230
|
+
*/
|
|
1231
|
+
type DropdownContentWidth = 'content' | 'trigger' | number | string;
|
|
1232
|
+
type DropdownTriggerSlot = 'root';
|
|
1233
|
+
type DropdownContentSlot = 'root';
|
|
1234
|
+
type DropdownViewportSlot = 'root';
|
|
1235
|
+
type DropdownItemSlot = 'root';
|
|
1236
|
+
type DropdownGroupSlot = 'root';
|
|
1237
|
+
type DropdownLabelSlot = 'root';
|
|
1238
|
+
type DropdownSeparatorSlot = 'root';
|
|
1239
|
+
type DropdownArrowSlot = 'root';
|
|
1240
|
+
interface DropdownOwnProps {
|
|
1241
|
+
/**
|
|
1242
|
+
* Size scale for the menu content and items.
|
|
1243
|
+
* @defaultValue 'base'
|
|
1244
|
+
*/
|
|
1245
|
+
size?: DropdownSize;
|
|
1246
|
+
/**
|
|
1247
|
+
* How the portalled Dropdown.Content panel computes its width. See
|
|
1248
|
+
* {@link DropdownContentWidth}.
|
|
1249
|
+
* @defaultValue 'content'
|
|
1250
|
+
*/
|
|
1251
|
+
contentWidth?: DropdownContentWidth;
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* Public props for the Dropdown root. State-only — renders no DOM, so no
|
|
1255
|
+
* polymorphic `as` and no native HTML props.
|
|
1256
|
+
*/
|
|
1257
|
+
type DropdownProps = DropdownOwnProps & Pick<DropdownMenuProps, 'id' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal' | 'disabled' | 'closeOnSelect' | 'children'>;
|
|
1258
|
+
interface DropdownTriggerOwnProps {
|
|
1259
|
+
/** Per-slot class name overrides. */
|
|
1260
|
+
classNames?: ClassNamesMap<DropdownTriggerSlot>;
|
|
1261
|
+
/** Per-slot HTML attribute overrides. */
|
|
1262
|
+
slotProps?: SlotPropsMap<DropdownTriggerSlot>;
|
|
1263
|
+
}
|
|
1264
|
+
type DropdownTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, DropdownTriggerOwnProps & Pick<DropdownMenuTriggerProps, 'children'>>;
|
|
1265
|
+
interface DropdownContentOwnProps {
|
|
1266
|
+
/** Per-slot class name overrides. */
|
|
1267
|
+
classNames?: ClassNamesMap<DropdownContentSlot>;
|
|
1268
|
+
/** Per-slot HTML attribute overrides. */
|
|
1269
|
+
slotProps?: SlotPropsMap<DropdownContentSlot>;
|
|
1270
|
+
}
|
|
1271
|
+
type DropdownContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownContentOwnProps & Pick<DropdownMenuContentProps, 'side' | 'align' | 'container' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onFocusOutside'>>;
|
|
1272
|
+
interface DropdownViewportOwnProps {
|
|
1273
|
+
/** Per-slot class name overrides. */
|
|
1274
|
+
classNames?: ClassNamesMap<DropdownViewportSlot>;
|
|
1275
|
+
/** Per-slot HTML attribute overrides. */
|
|
1276
|
+
slotProps?: SlotPropsMap<DropdownViewportSlot>;
|
|
1277
|
+
}
|
|
1278
|
+
type DropdownViewportProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownViewportOwnProps & Pick<DropdownMenuViewportProps, 'children'>>;
|
|
1279
|
+
interface DropdownItemOwnProps {
|
|
1280
|
+
/** Per-slot class name overrides. */
|
|
1281
|
+
classNames?: ClassNamesMap<DropdownItemSlot>;
|
|
1282
|
+
/** Per-slot HTML attribute overrides. */
|
|
1283
|
+
slotProps?: SlotPropsMap<DropdownItemSlot>;
|
|
1284
|
+
}
|
|
1285
|
+
type DropdownItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownItemOwnProps & Pick<DropdownMenuItemProps, 'disabled' | 'onSelect' | 'textValue'>>;
|
|
1286
|
+
interface DropdownGroupOwnProps {
|
|
1287
|
+
/** Per-slot class name overrides. */
|
|
1288
|
+
classNames?: ClassNamesMap<DropdownGroupSlot>;
|
|
1289
|
+
/** Per-slot HTML attribute overrides. */
|
|
1290
|
+
slotProps?: SlotPropsMap<DropdownGroupSlot>;
|
|
1291
|
+
}
|
|
1292
|
+
type DropdownGroupProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownGroupOwnProps & Pick<DropdownMenuGroupProps, 'children'>>;
|
|
1293
|
+
interface DropdownLabelOwnProps {
|
|
1294
|
+
/** Per-slot class name overrides. */
|
|
1295
|
+
classNames?: ClassNamesMap<DropdownLabelSlot>;
|
|
1296
|
+
/** Per-slot HTML attribute overrides. */
|
|
1297
|
+
slotProps?: SlotPropsMap<DropdownLabelSlot>;
|
|
1298
|
+
}
|
|
1299
|
+
type DropdownLabelProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownLabelOwnProps & Pick<DropdownMenuLabelProps, 'children'>>;
|
|
1300
|
+
interface DropdownSeparatorOwnProps {
|
|
1301
|
+
/** Per-slot class name overrides. */
|
|
1302
|
+
classNames?: ClassNamesMap<DropdownSeparatorSlot>;
|
|
1303
|
+
/** Per-slot HTML attribute overrides. */
|
|
1304
|
+
slotProps?: SlotPropsMap<DropdownSeparatorSlot>;
|
|
1305
|
+
}
|
|
1306
|
+
type DropdownSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, DropdownSeparatorOwnProps & Pick<DropdownMenuSeparatorProps, 'children'>>;
|
|
1307
|
+
interface DropdownArrowOwnProps {
|
|
1308
|
+
/** Per-slot class name overrides. */
|
|
1309
|
+
classNames?: ClassNamesMap<DropdownArrowSlot>;
|
|
1310
|
+
/** Per-slot HTML attribute overrides. */
|
|
1311
|
+
slotProps?: SlotPropsMap<DropdownArrowSlot>;
|
|
1312
|
+
}
|
|
1313
|
+
type DropdownArrowProps<T extends ElementType = 'svg'> = PolymorphicProps<'svg', T, DropdownArrowOwnProps & Pick<DropdownMenuArrowProps, 'children'>>;
|
|
1314
|
+
declare module '../../core/theme' {
|
|
1315
|
+
interface ComponentThemeRegistry {
|
|
1316
|
+
Dropdown: StateOnlyComponentThemeConfig<DropdownProps>;
|
|
1317
|
+
DropdownTrigger: ComponentThemeConfig<DropdownTriggerProps, DropdownTriggerSlot>;
|
|
1318
|
+
DropdownContent: ComponentThemeConfig<DropdownContentProps, DropdownContentSlot>;
|
|
1319
|
+
DropdownViewport: ComponentThemeConfig<DropdownViewportProps, DropdownViewportSlot>;
|
|
1320
|
+
DropdownItem: ComponentThemeConfig<DropdownItemProps, DropdownItemSlot>;
|
|
1321
|
+
DropdownGroup: ComponentThemeConfig<DropdownGroupProps, DropdownGroupSlot>;
|
|
1322
|
+
DropdownLabel: ComponentThemeConfig<DropdownLabelProps, DropdownLabelSlot>;
|
|
1323
|
+
DropdownSeparator: ComponentThemeConfig<DropdownSeparatorProps, DropdownSeparatorSlot>;
|
|
1324
|
+
DropdownArrow: ComponentThemeConfig<DropdownArrowProps, DropdownArrowSlot>;
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
declare const Dropdown: {
|
|
1329
|
+
(props: DropdownProps): react.JSX.Element;
|
|
1330
|
+
displayName: string;
|
|
1331
|
+
} & {
|
|
1332
|
+
Trigger: {
|
|
1333
|
+
<T extends react.ElementType = "button">(props: DropdownTriggerProps<T>): react.JSX.Element;
|
|
1334
|
+
displayName: string;
|
|
1335
|
+
};
|
|
1336
|
+
Content: {
|
|
1337
|
+
<T extends react.ElementType = "div">(props: DropdownContentProps<T>): react.JSX.Element;
|
|
1338
|
+
displayName: string;
|
|
1339
|
+
};
|
|
1340
|
+
Viewport: {
|
|
1341
|
+
<T extends react.ElementType = "div">(props: DropdownViewportProps<T>): react.JSX.Element;
|
|
1342
|
+
displayName: string;
|
|
1343
|
+
};
|
|
1344
|
+
Item: {
|
|
1345
|
+
<T extends react.ElementType = "div">(props: DropdownItemProps<T>): react.JSX.Element;
|
|
1346
|
+
displayName: string;
|
|
1347
|
+
};
|
|
1348
|
+
Group: {
|
|
1349
|
+
<T extends react.ElementType = "div">(props: DropdownGroupProps<T>): react.JSX.Element;
|
|
1350
|
+
displayName: string;
|
|
1351
|
+
};
|
|
1352
|
+
Label: {
|
|
1353
|
+
<T extends react.ElementType = "div">(props: DropdownLabelProps<T>): react.JSX.Element;
|
|
1354
|
+
displayName: string;
|
|
1355
|
+
};
|
|
1356
|
+
Separator: {
|
|
1357
|
+
<T extends react.ElementType = "div">(props: DropdownSeparatorProps<T>): react.JSX.Element;
|
|
1358
|
+
displayName: string;
|
|
1359
|
+
};
|
|
1360
|
+
Arrow: {
|
|
1361
|
+
<T extends react.ElementType = "svg">(props: DropdownArrowProps<T>): react.JSX.Element;
|
|
1362
|
+
displayName: string;
|
|
1363
|
+
};
|
|
1364
|
+
};
|
|
1365
|
+
|
|
1180
1366
|
type FieldSlot = 'root';
|
|
1181
1367
|
type FieldLabelSlot = 'root' | 'asterisk';
|
|
1182
1368
|
type FieldDescriptionSlot = 'root' | 'icon';
|
|
@@ -1715,6 +1901,174 @@ declare const Popover: {
|
|
|
1715
1901
|
};
|
|
1716
1902
|
};
|
|
1717
1903
|
|
|
1904
|
+
/** Shape of the progress indicator. */
|
|
1905
|
+
type ProgressAppearance = 'linear' | 'circular';
|
|
1906
|
+
/** Visual scale. */
|
|
1907
|
+
type ProgressSize = 'small' | 'base' | 'large';
|
|
1908
|
+
/** Fill color variant. */
|
|
1909
|
+
type ProgressVariant = 'primary' | 'info' | 'success' | 'danger' | 'warning';
|
|
1910
|
+
type ProgressSlot = 'root';
|
|
1911
|
+
type ProgressTrackSlot = 'root' | 'rail';
|
|
1912
|
+
type ProgressIndicatorSlot = 'root';
|
|
1913
|
+
type ProgressValueSlot = 'root';
|
|
1914
|
+
/**
|
|
1915
|
+
* Props owned by takeoff-v2. There is no Spar Progress primitive to `Pick`
|
|
1916
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
1917
|
+
* rationale in `base.ts`).
|
|
1918
|
+
*/
|
|
1919
|
+
interface ProgressOwnProps {
|
|
1920
|
+
/**
|
|
1921
|
+
* Current progress value. Clamped to `[min, max]`; non-finite values
|
|
1922
|
+
* resolve to `min`. Ignored while `indeterminate` is set.
|
|
1923
|
+
* @defaultValue 0
|
|
1924
|
+
*/
|
|
1925
|
+
value?: number;
|
|
1926
|
+
/**
|
|
1927
|
+
* Marks the progress as indeterminate — the root drops `aria-valuenow`,
|
|
1928
|
+
* emits `data-indeterminate`, and the indicator animates a looping sweep
|
|
1929
|
+
* instead of a fill. Takes precedence over `value`.
|
|
1930
|
+
* @defaultValue false
|
|
1931
|
+
*/
|
|
1932
|
+
indeterminate?: boolean;
|
|
1933
|
+
/**
|
|
1934
|
+
* Minimum value the progress starts from. Non-finite values fall back to
|
|
1935
|
+
* the default.
|
|
1936
|
+
* @defaultValue 0
|
|
1937
|
+
*/
|
|
1938
|
+
min?: number;
|
|
1939
|
+
/**
|
|
1940
|
+
* Maximum value the progress can reach. Non-finite values and values at or
|
|
1941
|
+
* below `min` fall back to `min + 100` (the latter with a dev-only console
|
|
1942
|
+
* warning, since an inverted range is a consumer bug).
|
|
1943
|
+
* @defaultValue 100
|
|
1944
|
+
*/
|
|
1945
|
+
max?: number;
|
|
1946
|
+
/**
|
|
1947
|
+
* Shape of the progress indicator — a horizontal bar (`'linear'`) or a
|
|
1948
|
+
* ring (`'circular'`).
|
|
1949
|
+
* @defaultValue 'linear'
|
|
1950
|
+
*/
|
|
1951
|
+
appearance?: ProgressAppearance;
|
|
1952
|
+
/**
|
|
1953
|
+
* Visual scale. Linear progress changes track height; circular progress
|
|
1954
|
+
* changes ring diameter.
|
|
1955
|
+
* @defaultValue 'base'
|
|
1956
|
+
*/
|
|
1957
|
+
size?: ProgressSize;
|
|
1958
|
+
/**
|
|
1959
|
+
* Fill color variant.
|
|
1960
|
+
* @defaultValue 'primary'
|
|
1961
|
+
*/
|
|
1962
|
+
variant?: ProgressVariant;
|
|
1963
|
+
/**
|
|
1964
|
+
* Mutes the fill color and sets `aria-disabled`. Inherits the surrounding
|
|
1965
|
+
* `Field`'s disabled state when composed inside one.
|
|
1966
|
+
* @defaultValue false
|
|
1967
|
+
*/
|
|
1968
|
+
disabled?: boolean;
|
|
1969
|
+
/**
|
|
1970
|
+
* Optional anatomy override. When omitted, `Progress` renders the default
|
|
1971
|
+
* anatomy — `Progress.Track` wrapping `Progress.Indicator` — for both
|
|
1972
|
+
* appearances.
|
|
1973
|
+
*/
|
|
1974
|
+
children?: ReactNode;
|
|
1975
|
+
/** Per-slot class name overrides. */
|
|
1976
|
+
classNames?: ClassNamesMap<ProgressSlot>;
|
|
1977
|
+
/** Per-slot HTML attribute overrides. */
|
|
1978
|
+
slotProps?: SlotPropsMap<ProgressSlot>;
|
|
1979
|
+
}
|
|
1980
|
+
/**
|
|
1981
|
+
* Public props for the Progress root — the a11y owner and layout wrapper
|
|
1982
|
+
* (the track is its own part, `Progress.Track`, matching the
|
|
1983
|
+
* Root/Label/Track/Indicator anatomy convention). Renders the default
|
|
1984
|
+
* anatomy when no children are given. Compose inside a `Field` with
|
|
1985
|
+
* `Field.Label` for an automatically wired visible label.
|
|
1986
|
+
*/
|
|
1987
|
+
type ProgressProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, ProgressOwnProps>;
|
|
1988
|
+
interface ProgressTrackOwnProps {
|
|
1989
|
+
/**
|
|
1990
|
+
* Track anatomy override. When omitted, `Progress.Track` renders the
|
|
1991
|
+
* default `Progress.Indicator`.
|
|
1992
|
+
*/
|
|
1993
|
+
children?: ReactNode;
|
|
1994
|
+
/** Per-slot class name overrides. */
|
|
1995
|
+
classNames?: ClassNamesMap<ProgressTrackSlot>;
|
|
1996
|
+
/** Per-slot HTML attribute overrides. */
|
|
1997
|
+
slotProps?: SlotPropsMap<ProgressTrackSlot>;
|
|
1998
|
+
}
|
|
1999
|
+
/**
|
|
2000
|
+
* Public props for `Progress.Track` — the rail the indicator fills. The
|
|
2001
|
+
* element is decided by the root's `appearance`: a rail `<div>` for
|
|
2002
|
+
* `'linear'`, the ring `<svg>` for `'circular'` — where the rail is drawn
|
|
2003
|
+
* as the svg's own `<circle>`, exposed as the `'rail'` slot.
|
|
2004
|
+
*/
|
|
2005
|
+
type ProgressTrackProps = ProgressTrackOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2006
|
+
ref?: Ref<Element>;
|
|
2007
|
+
};
|
|
2008
|
+
interface ProgressIndicatorOwnProps {
|
|
2009
|
+
/** Per-slot class name overrides. */
|
|
2010
|
+
classNames?: ClassNamesMap<ProgressIndicatorSlot>;
|
|
2011
|
+
/** Per-slot HTML attribute overrides. */
|
|
2012
|
+
slotProps?: SlotPropsMap<ProgressIndicatorSlot>;
|
|
2013
|
+
}
|
|
2014
|
+
/**
|
|
2015
|
+
* Public props for `Progress.Indicator` — the filled portion. Not
|
|
2016
|
+
* polymorphic — the element is decided by the root's `appearance` (linear
|
|
2017
|
+
* fill `<span>` / circular arc `<circle>`), and the indicator takes no
|
|
2018
|
+
* children.
|
|
2019
|
+
*/
|
|
2020
|
+
type ProgressIndicatorProps = ProgressIndicatorOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2021
|
+
ref?: Ref<Element>;
|
|
2022
|
+
};
|
|
2023
|
+
interface ProgressValueOwnProps {
|
|
2024
|
+
/**
|
|
2025
|
+
* Visible value content — typically the formatted value (e.g. `%60`) or a
|
|
2026
|
+
* short status. The component renders no default content; formatting stays
|
|
2027
|
+
* with the consumer so locale and design conventions are not baked in.
|
|
2028
|
+
*/
|
|
2029
|
+
children?: ReactNode;
|
|
2030
|
+
/** Per-slot class name overrides. */
|
|
2031
|
+
classNames?: ClassNamesMap<ProgressValueSlot>;
|
|
2032
|
+
/** Per-slot HTML attribute overrides. */
|
|
2033
|
+
slotProps?: SlotPropsMap<ProgressValueSlot>;
|
|
2034
|
+
}
|
|
2035
|
+
/**
|
|
2036
|
+
* Public props for `Progress.Value` — decorative (`aria-hidden`) value or
|
|
2037
|
+
* status text. The value is announced through the root's `aria-valuenow`,
|
|
2038
|
+
* so the value text carries no accessibility semantics. Renders in flow
|
|
2039
|
+
* next to the track for `'linear'` and as an overlay centered inside the
|
|
2040
|
+
* ring for `'circular'`.
|
|
2041
|
+
*/
|
|
2042
|
+
type ProgressValueProps = ProgressValueOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2043
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2044
|
+
};
|
|
2045
|
+
declare module '../../core/theme' {
|
|
2046
|
+
interface ComponentThemeRegistry {
|
|
2047
|
+
Progress: ComponentThemeConfig<ProgressProps, ProgressSlot>;
|
|
2048
|
+
ProgressTrack: ComponentThemeConfig<ProgressTrackProps, ProgressTrackSlot>;
|
|
2049
|
+
ProgressIndicator: ComponentThemeConfig<ProgressIndicatorProps>;
|
|
2050
|
+
ProgressValue: ComponentThemeConfig<ProgressValueProps>;
|
|
2051
|
+
}
|
|
2052
|
+
}
|
|
2053
|
+
|
|
2054
|
+
declare const Progress: {
|
|
2055
|
+
<T extends react.ElementType = "div">(props: ProgressProps<T>): react.JSX.Element;
|
|
2056
|
+
displayName: string;
|
|
2057
|
+
} & {
|
|
2058
|
+
Track: {
|
|
2059
|
+
(props: ProgressTrackProps): react.JSX.Element;
|
|
2060
|
+
displayName: string;
|
|
2061
|
+
};
|
|
2062
|
+
Indicator: {
|
|
2063
|
+
(props: ProgressIndicatorProps): react.JSX.Element;
|
|
2064
|
+
displayName: string;
|
|
2065
|
+
};
|
|
2066
|
+
Value: {
|
|
2067
|
+
(props: ProgressValueProps): react.JSX.Element;
|
|
2068
|
+
displayName: string;
|
|
2069
|
+
};
|
|
2070
|
+
};
|
|
2071
|
+
|
|
1718
2072
|
type SelectSize = 'small' | 'base' | 'large';
|
|
1719
2073
|
/**
|
|
1720
2074
|
* Controls the panel's render width.
|
|
@@ -1729,10 +2083,12 @@ type SelectSlot = 'root';
|
|
|
1729
2083
|
type SelectTriggerSlot = 'root' | 'value' | 'indicator';
|
|
1730
2084
|
type SelectIndicatorSlot = 'root';
|
|
1731
2085
|
type SelectContentSlot = 'root';
|
|
2086
|
+
type SelectViewportSlot = 'root';
|
|
1732
2087
|
type SelectItemSlot = 'root';
|
|
1733
2088
|
type SelectGroupSlot = 'root';
|
|
1734
2089
|
type SelectLabelSlot = 'root';
|
|
1735
2090
|
type SelectSeparatorSlot = 'root';
|
|
2091
|
+
type SelectArrowSlot = 'root';
|
|
1736
2092
|
/**
|
|
1737
2093
|
* Visual + slot props owned by takeoff-v2 for the Select root. `size` and
|
|
1738
2094
|
* `invalid` cascade to the Trigger through a visual context so consumers
|
|
@@ -1820,6 +2176,13 @@ interface SelectContentOwnProps {
|
|
|
1820
2176
|
slotProps?: SlotPropsMap<SelectContentSlot>;
|
|
1821
2177
|
}
|
|
1822
2178
|
type SelectContentProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectContentOwnProps & Pick<SelectContentProps$1, 'side' | 'align' | 'container' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onCloseAutoFocus'>>;
|
|
2179
|
+
interface SelectViewportOwnProps {
|
|
2180
|
+
/** Per-slot class name overrides. */
|
|
2181
|
+
classNames?: ClassNamesMap<SelectViewportSlot>;
|
|
2182
|
+
/** Per-slot HTML attribute overrides. */
|
|
2183
|
+
slotProps?: SlotPropsMap<SelectViewportSlot>;
|
|
2184
|
+
}
|
|
2185
|
+
type SelectViewportProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectViewportOwnProps & Pick<SelectViewportProps$1, 'children'>>;
|
|
1823
2186
|
interface SelectItemOwnProps {
|
|
1824
2187
|
/** Per-slot class name overrides. */
|
|
1825
2188
|
classNames?: ClassNamesMap<SelectItemSlot>;
|
|
@@ -1848,16 +2211,31 @@ interface SelectSeparatorOwnProps {
|
|
|
1848
2211
|
slotProps?: SlotPropsMap<SelectSeparatorSlot>;
|
|
1849
2212
|
}
|
|
1850
2213
|
type SelectSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectSeparatorOwnProps & Pick<SelectSeparatorProps$1, 'children'>>;
|
|
2214
|
+
interface SelectArrowOwnProps {
|
|
2215
|
+
/** Per-slot class name overrides. */
|
|
2216
|
+
classNames?: ClassNamesMap<SelectArrowSlot>;
|
|
2217
|
+
/** Per-slot HTML attribute overrides. */
|
|
2218
|
+
slotProps?: SlotPropsMap<SelectArrowSlot>;
|
|
2219
|
+
}
|
|
2220
|
+
/**
|
|
2221
|
+
* Optional decorative arrow pointing at the trigger. Positioned automatically by
|
|
2222
|
+
* Spar's Floating UI middleware; renders a default triangle `<svg>` whose fill
|
|
2223
|
+
* follows the recipe's `color`. No Spar props are surfaced — the polymorphic svg
|
|
2224
|
+
* attributes (incl. `children` for a custom shape) come through directly.
|
|
2225
|
+
*/
|
|
2226
|
+
type SelectArrowProps<T extends ElementType = 'svg'> = PolymorphicProps<'svg', T, SelectArrowOwnProps>;
|
|
1851
2227
|
declare module '../../core/theme' {
|
|
1852
2228
|
interface ComponentThemeRegistry {
|
|
1853
2229
|
Select: ComponentThemeConfig<SelectProps, SelectSlot>;
|
|
1854
2230
|
SelectTrigger: ComponentThemeConfig<SelectTriggerProps, SelectTriggerSlot>;
|
|
1855
2231
|
SelectIndicator: ComponentThemeConfig<SelectIndicatorProps, SelectIndicatorSlot>;
|
|
1856
2232
|
SelectContent: ComponentThemeConfig<SelectContentProps, SelectContentSlot>;
|
|
2233
|
+
SelectViewport: ComponentThemeConfig<SelectViewportProps, SelectViewportSlot>;
|
|
1857
2234
|
SelectItem: ComponentThemeConfig<SelectItemProps, SelectItemSlot>;
|
|
1858
2235
|
SelectGroup: ComponentThemeConfig<SelectGroupProps, SelectGroupSlot>;
|
|
1859
2236
|
SelectLabel: ComponentThemeConfig<SelectLabelProps, SelectLabelSlot>;
|
|
1860
2237
|
SelectSeparator: ComponentThemeConfig<SelectSeparatorProps, SelectSeparatorSlot>;
|
|
2238
|
+
SelectArrow: ComponentThemeConfig<SelectArrowProps, SelectArrowSlot>;
|
|
1861
2239
|
}
|
|
1862
2240
|
}
|
|
1863
2241
|
|
|
@@ -1877,6 +2255,10 @@ declare const Select: {
|
|
|
1877
2255
|
<T extends react.ElementType = "div">(props: SelectContentProps<T>): react.JSX.Element;
|
|
1878
2256
|
displayName: string;
|
|
1879
2257
|
};
|
|
2258
|
+
Viewport: {
|
|
2259
|
+
<T extends react.ElementType = "div">(props: SelectViewportProps<T>): react.JSX.Element;
|
|
2260
|
+
displayName: string;
|
|
2261
|
+
};
|
|
1880
2262
|
Item: {
|
|
1881
2263
|
<T extends react.ElementType = "div">(props: SelectItemProps<T>): react.JSX.Element;
|
|
1882
2264
|
displayName: string;
|
|
@@ -1893,6 +2275,391 @@ declare const Select: {
|
|
|
1893
2275
|
<T extends react.ElementType = "div">(props: SelectSeparatorProps<T>): react.JSX.Element;
|
|
1894
2276
|
displayName: string;
|
|
1895
2277
|
};
|
|
2278
|
+
Arrow: {
|
|
2279
|
+
<T extends react.ElementType = "svg">(props: SelectArrowProps<T>): react.JSX.Element;
|
|
2280
|
+
displayName: string;
|
|
2281
|
+
};
|
|
2282
|
+
};
|
|
2283
|
+
|
|
2284
|
+
/** Axis the rail runs along. A vertical rail runs bottom-to-top: the bottom edge is `min`. */
|
|
2285
|
+
type SliderOrientation = 'horizontal' | 'vertical';
|
|
2286
|
+
/** Visual scale. */
|
|
2287
|
+
type SliderSize = 'small' | 'base' | 'large';
|
|
2288
|
+
/** Fill color variant. */
|
|
2289
|
+
type SliderVariant = 'primary' | 'info' | 'success' | 'danger' | 'warning';
|
|
2290
|
+
/** When the drag value bubble is shown. */
|
|
2291
|
+
type SliderTooltip = 'auto' | 'always' | 'never';
|
|
2292
|
+
/** How the rail fill renders. `none` drops the fill but keeps the rail. */
|
|
2293
|
+
type SliderTrackMode = 'normal' | 'inverted' | 'none';
|
|
2294
|
+
/**
|
|
2295
|
+
* Committed slider value. A single `number` when `range` is unset, an ascending
|
|
2296
|
+
* array when `range` is set. Takeoff Core's `tk-slider` commits a `[min, max]`
|
|
2297
|
+
* pair only; the array widens that so a range can carry more than two handles.
|
|
2298
|
+
*/
|
|
2299
|
+
type SliderValue = number | number[];
|
|
2300
|
+
type SliderSlot = 'root';
|
|
2301
|
+
type SliderTrackSlot = 'root';
|
|
2302
|
+
type SliderRangeSlot = 'root';
|
|
2303
|
+
type SliderThumbSlot = 'root' | 'tooltip' | 'arrow';
|
|
2304
|
+
type SliderTicksSlot = 'root' | 'tick';
|
|
2305
|
+
type SliderValueSlot = 'root';
|
|
2306
|
+
/**
|
|
2307
|
+
* Value surface for a single-thumb slider. `range` is optional here so the
|
|
2308
|
+
* single form stays the zero-config default.
|
|
2309
|
+
*/
|
|
2310
|
+
interface SliderSingleValueProps {
|
|
2311
|
+
/**
|
|
2312
|
+
* Renders a multi-handle slider that commits an array instead of a number.
|
|
2313
|
+
* `range` is a discriminated union (`false` vs `true`), not a plain
|
|
2314
|
+
* `boolean`, so a value typed `boolean` matches neither arm — to toggle mode
|
|
2315
|
+
* at runtime, branch on the flag and render the single vs range `<Slider>`
|
|
2316
|
+
* explicitly rather than passing `range={isRange}`.
|
|
2317
|
+
* @defaultValue false
|
|
2318
|
+
*/
|
|
2319
|
+
range?: false;
|
|
2320
|
+
/**
|
|
2321
|
+
* Controlled value. Clamped into `[min, max]` and snapped to `step`. Takes
|
|
2322
|
+
* precedence: passing this alongside `defaultValue` makes the slider
|
|
2323
|
+
* controlled and ignores `defaultValue` (a dev-only warning is logged).
|
|
2324
|
+
*/
|
|
2325
|
+
value?: number;
|
|
2326
|
+
/**
|
|
2327
|
+
* Initial value for uncontrolled usage. Ignored when `value` is also given.
|
|
2328
|
+
* Controlled/uncontrolled mode is latched on the first render, so a `value`
|
|
2329
|
+
* that later becomes `undefined` does not hand control back.
|
|
2330
|
+
* @defaultValue `min`
|
|
2331
|
+
*/
|
|
2332
|
+
defaultValue?: number;
|
|
2333
|
+
/** Fired on every committed value change while interacting — each drag frame, keystroke, or track press. */
|
|
2334
|
+
onValueChange?: (value: number) => void;
|
|
2335
|
+
/**
|
|
2336
|
+
* Fired once at the end of an interaction with the final value: on pointer
|
|
2337
|
+
* release after a drag or track press, and once per committed keystroke. Use
|
|
2338
|
+
* it when only the settled value matters (persist, refetch, validate), while
|
|
2339
|
+
* `onValueChange` streams the live value.
|
|
2340
|
+
*/
|
|
2341
|
+
onValueChangeEnd?: (value: number) => void;
|
|
2342
|
+
}
|
|
2343
|
+
/** Value surface for a two-thumb range slider. */
|
|
2344
|
+
interface SliderRangeValueProps {
|
|
2345
|
+
/**
|
|
2346
|
+
* Renders one thumb per entry of `value` / `defaultValue` (two by default)
|
|
2347
|
+
* and commits an ascending array.
|
|
2348
|
+
*/
|
|
2349
|
+
range: true;
|
|
2350
|
+
/**
|
|
2351
|
+
* Controlled values, one per handle — its length decides how many thumbs
|
|
2352
|
+
* render. Fewer than two entries fall back to `[min, max]`, as with
|
|
2353
|
+
* `defaultValue`. Each entry is clamped into `[min, max]`, snapped to `step`,
|
|
2354
|
+
* and the array is ordered ascending. Takes precedence: passing this alongside
|
|
2355
|
+
* `defaultValue` makes the slider controlled and ignores `defaultValue`.
|
|
2356
|
+
*/
|
|
2357
|
+
value?: number[];
|
|
2358
|
+
/**
|
|
2359
|
+
* Initial values for uncontrolled usage, one per handle. Fewer than two
|
|
2360
|
+
* entries falls back to `[min, max]`. Ignored when `value` is also given.
|
|
2361
|
+
* Controlled/uncontrolled mode is latched on the first render, so a `value`
|
|
2362
|
+
* that later becomes `undefined` does not hand control back.
|
|
2363
|
+
* @defaultValue `[min, max]`
|
|
2364
|
+
*/
|
|
2365
|
+
defaultValue?: number[];
|
|
2366
|
+
/** Fired on every committed value change while interacting — each drag frame, keystroke, or track press. */
|
|
2367
|
+
onValueChange?: (value: number[]) => void;
|
|
2368
|
+
/**
|
|
2369
|
+
* Fired once at the end of an interaction with the final values: on pointer
|
|
2370
|
+
* release after a drag or track press, and once per committed keystroke.
|
|
2371
|
+
*/
|
|
2372
|
+
onValueChangeEnd?: (value: number[]) => void;
|
|
2373
|
+
}
|
|
2374
|
+
/**
|
|
2375
|
+
* Props owned by takeoff-v2. There is no Spar Slider primitive to `Pick`
|
|
2376
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
2377
|
+
* rationale in `base.ts`).
|
|
2378
|
+
*/
|
|
2379
|
+
interface SliderOwnProps {
|
|
2380
|
+
/**
|
|
2381
|
+
* Lowest selectable value. Non-finite values fall back to the default.
|
|
2382
|
+
* @defaultValue 0
|
|
2383
|
+
*/
|
|
2384
|
+
min?: number;
|
|
2385
|
+
/**
|
|
2386
|
+
* Highest selectable value. Non-finite values and values at or below `min`
|
|
2387
|
+
* fall back to `min + 100` (with a dev-only console warning, since an
|
|
2388
|
+
* inverted range is a consumer bug).
|
|
2389
|
+
* @defaultValue 100
|
|
2390
|
+
*/
|
|
2391
|
+
max?: number;
|
|
2392
|
+
/**
|
|
2393
|
+
* Granularity the value snaps to, counted from `min`. Non-finite and
|
|
2394
|
+
* non-positive values fall back to the default.
|
|
2395
|
+
* @defaultValue 1
|
|
2396
|
+
*/
|
|
2397
|
+
step?: number;
|
|
2398
|
+
/**
|
|
2399
|
+
* Minimum gap kept between adjacent thumbs of a range, in value units. With a
|
|
2400
|
+
* positive gap the handles can no longer cross — dragging one into another
|
|
2401
|
+
* stops it against its neighbour instead of swapping. Ignored by a single
|
|
2402
|
+
* slider; initial values are not reshaped, so seed them at least this far apart.
|
|
2403
|
+
* @defaultValue 0
|
|
2404
|
+
*/
|
|
2405
|
+
minDistance?: number;
|
|
2406
|
+
/**
|
|
2407
|
+
* Blocks interaction and mutes the fill. Inherits the surrounding `Field`'s
|
|
2408
|
+
* disabled state when composed inside one.
|
|
2409
|
+
* @defaultValue false
|
|
2410
|
+
*/
|
|
2411
|
+
disabled?: boolean;
|
|
2412
|
+
/**
|
|
2413
|
+
* Renders the value but blocks every value-changing interaction. Inherits
|
|
2414
|
+
* the surrounding `Field`'s read-only state when composed inside one.
|
|
2415
|
+
* @defaultValue false
|
|
2416
|
+
*/
|
|
2417
|
+
readOnly?: boolean;
|
|
2418
|
+
/**
|
|
2419
|
+
* Marks the slider as required for form validation. Inherits the
|
|
2420
|
+
* surrounding `Field`'s required state when composed inside one.
|
|
2421
|
+
* @defaultValue false
|
|
2422
|
+
*/
|
|
2423
|
+
required?: boolean;
|
|
2424
|
+
/**
|
|
2425
|
+
* Applies the invalid treatment and sets `aria-invalid` on every thumb.
|
|
2426
|
+
* Inherits the surrounding `Field`'s invalid state when composed inside one.
|
|
2427
|
+
* @defaultValue false
|
|
2428
|
+
*/
|
|
2429
|
+
invalid?: boolean;
|
|
2430
|
+
/**
|
|
2431
|
+
* Axis the rail runs along. A vertical rail runs bottom-to-top and fills its
|
|
2432
|
+
* container's height (as a horizontal rail fills its width), so give the
|
|
2433
|
+
* parent a height.
|
|
2434
|
+
* @defaultValue 'horizontal'
|
|
2435
|
+
*/
|
|
2436
|
+
orientation?: SliderOrientation;
|
|
2437
|
+
/**
|
|
2438
|
+
* Visual scale — changes track thickness and thumb diameter.
|
|
2439
|
+
* @defaultValue 'base'
|
|
2440
|
+
*/
|
|
2441
|
+
size?: SliderSize;
|
|
2442
|
+
/**
|
|
2443
|
+
* Fill color variant.
|
|
2444
|
+
* @defaultValue 'primary'
|
|
2445
|
+
*/
|
|
2446
|
+
variant?: SliderVariant;
|
|
2447
|
+
/**
|
|
2448
|
+
* How the rail fill renders. `normal` fills from the start to the thumb (or
|
|
2449
|
+
* between a range's thumbs); `inverted` fills the *complement* instead — from
|
|
2450
|
+
* the thumb to the end for a single slider, and outside the two handles for a
|
|
2451
|
+
* range; `none` drops the fill entirely, leaving just the rail and the thumbs.
|
|
2452
|
+
* @defaultValue 'normal'
|
|
2453
|
+
*/
|
|
2454
|
+
track?: SliderTrackMode;
|
|
2455
|
+
/**
|
|
2456
|
+
* When the drag value bubble is shown. `auto` reveals it while the handle is
|
|
2457
|
+
* dragged or keyboard-focused; `always` pins it open; `never` hides it
|
|
2458
|
+
* entirely — handy when a `Slider.Value` already surfaces the number. A
|
|
2459
|
+
* disabled slider hides the bubble regardless.
|
|
2460
|
+
* @defaultValue 'auto'
|
|
2461
|
+
*/
|
|
2462
|
+
tooltip?: SliderTooltip;
|
|
2463
|
+
/**
|
|
2464
|
+
* Formats a value for every readout — the drag tooltip, `Slider.Value`, and
|
|
2465
|
+
* `aria-valuetext`. Returns a string, so it formats the value rather than
|
|
2466
|
+
* overriding the rendered node; use `Slider.Thumb` / `Slider.Value` children
|
|
2467
|
+
* for richer content. When omitted, the raw number is shown and
|
|
2468
|
+
* `aria-valuetext` is dropped.
|
|
2469
|
+
*/
|
|
2470
|
+
formatValue?: (value: number) => string;
|
|
2471
|
+
/**
|
|
2472
|
+
* Name submitted with the form. A single slider submits one entry under this
|
|
2473
|
+
* exact name; a two-handle range submits `-min` / `-max`, and a range with
|
|
2474
|
+
* more handles submits each value under a 1-based `-1`, `-2`, … suffix so no
|
|
2475
|
+
* handle is dropped.
|
|
2476
|
+
*/
|
|
2477
|
+
name?: string;
|
|
2478
|
+
/** `id` of the form the hidden inputs belong to. */
|
|
2479
|
+
form?: string;
|
|
2480
|
+
/**
|
|
2481
|
+
* Optional anatomy override. When omitted, `Slider` renders the default
|
|
2482
|
+
* anatomy — `Slider.Track`, wrapping `Slider.Range` and one thumb per value.
|
|
2483
|
+
* Compose the parts explicitly to add an indicator such as `Slider.Ticks`
|
|
2484
|
+
* below the rail.
|
|
2485
|
+
*/
|
|
2486
|
+
children?: ReactNode;
|
|
2487
|
+
/** Per-slot class name overrides. */
|
|
2488
|
+
classNames?: ClassNamesMap<SliderSlot>;
|
|
2489
|
+
/** Per-slot HTML attribute overrides. */
|
|
2490
|
+
slotProps?: SlotPropsMap<SliderSlot>;
|
|
2491
|
+
}
|
|
2492
|
+
/**
|
|
2493
|
+
* Public props for the Slider root — the layout wrapper and state owner.
|
|
2494
|
+
* Each thumb is the `role="slider"` a11y owner, so a range root additionally
|
|
2495
|
+
* takes `role="group"` to tie the pair together. Renders the default anatomy
|
|
2496
|
+
* when no children are given. Compose inside a `Field` with `Field.Label` for
|
|
2497
|
+
* an automatically wired visible label.
|
|
2498
|
+
*/
|
|
2499
|
+
type SliderProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SliderOwnProps & (SliderSingleValueProps | SliderRangeValueProps)>;
|
|
2500
|
+
interface SliderTrackOwnProps {
|
|
2501
|
+
/**
|
|
2502
|
+
* Track anatomy override. When omitted, `Slider.Track` renders the default
|
|
2503
|
+
* `Slider.Range` plus one thumb per value.
|
|
2504
|
+
*/
|
|
2505
|
+
children?: ReactNode;
|
|
2506
|
+
/** Per-slot class name overrides. */
|
|
2507
|
+
classNames?: ClassNamesMap<SliderTrackSlot>;
|
|
2508
|
+
/** Per-slot HTML attribute overrides. */
|
|
2509
|
+
slotProps?: SlotPropsMap<SliderTrackSlot>;
|
|
2510
|
+
}
|
|
2511
|
+
/**
|
|
2512
|
+
* Public props for `Slider.Track` — the rail the thumbs travel along. Owns
|
|
2513
|
+
* the press-to-seek interaction: pressing the rail moves the nearest thumb to
|
|
2514
|
+
* that position and starts dragging it.
|
|
2515
|
+
*/
|
|
2516
|
+
type SliderTrackProps = SliderTrackOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2517
|
+
ref?: Ref<HTMLDivElement>;
|
|
2518
|
+
};
|
|
2519
|
+
interface SliderRangeOwnProps {
|
|
2520
|
+
/** Per-slot class name overrides. */
|
|
2521
|
+
classNames?: ClassNamesMap<SliderRangeSlot>;
|
|
2522
|
+
/** Per-slot HTML attribute overrides. */
|
|
2523
|
+
slotProps?: SlotPropsMap<SliderRangeSlot>;
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
* Public props for `Slider.Range` — the filled portion of the track. Takes no
|
|
2527
|
+
* children; its offset and length are written inline from the committed
|
|
2528
|
+
* values (a continuous value is not a `data-*` hook).
|
|
2529
|
+
*/
|
|
2530
|
+
type SliderRangeProps = SliderRangeOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2531
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2532
|
+
};
|
|
2533
|
+
/** State handed to `Slider.Thumb` function-children. */
|
|
2534
|
+
interface SliderThumbRenderProps {
|
|
2535
|
+
/** Committed value of this thumb. */
|
|
2536
|
+
value: number;
|
|
2537
|
+
/** `value` passed through the root's `formatValue`, or stringified when the root has no formatter. */
|
|
2538
|
+
formatted: string;
|
|
2539
|
+
/** Which value this thumb controls. */
|
|
2540
|
+
index: number;
|
|
2541
|
+
/** Whether the pointer currently controls this thumb. */
|
|
2542
|
+
isDragging: boolean;
|
|
2543
|
+
/** Whether this thumb holds keyboard focus. */
|
|
2544
|
+
isFocused: boolean;
|
|
2545
|
+
}
|
|
2546
|
+
interface SliderThumbOwnProps {
|
|
2547
|
+
/**
|
|
2548
|
+
* Which value this thumb controls. The default anatomy renders index `0`
|
|
2549
|
+
* (and `1` for a range slider); pass it explicitly only when composing the
|
|
2550
|
+
* thumbs by hand.
|
|
2551
|
+
* @defaultValue 0
|
|
2552
|
+
*/
|
|
2553
|
+
index?: number;
|
|
2554
|
+
/**
|
|
2555
|
+
* Disables just this handle: it cannot be moved by pointer or keyboard and is
|
|
2556
|
+
* skipped as a drag target, while the other thumbs stay interactive. A
|
|
2557
|
+
* neighbouring thumb dragged into a disabled one stops against it rather than
|
|
2558
|
+
* pushing it. The whole slider's `disabled` still disables every thumb.
|
|
2559
|
+
* @defaultValue false
|
|
2560
|
+
*/
|
|
2561
|
+
disabled?: boolean;
|
|
2562
|
+
/**
|
|
2563
|
+
* Content of the value bubble. When omitted, the formatted value renders. A
|
|
2564
|
+
* plain node replaces it with static content; a function receives this
|
|
2565
|
+
* thumb's `value` / `formatted` / `index` / `isDragging` / `isFocused` for
|
|
2566
|
+
* content that reacts to the drag. Either form swaps only what the bubble
|
|
2567
|
+
* shows — the handle and the bubble chrome are always the thumb's.
|
|
2568
|
+
*/
|
|
2569
|
+
children?: ReactNode | ((state: SliderThumbRenderProps) => ReactNode);
|
|
2570
|
+
/** Per-slot class name overrides. */
|
|
2571
|
+
classNames?: ClassNamesMap<SliderThumbSlot>;
|
|
2572
|
+
/** Per-slot HTML attribute overrides. */
|
|
2573
|
+
slotProps?: SlotPropsMap<SliderThumbSlot>;
|
|
2574
|
+
}
|
|
2575
|
+
/**
|
|
2576
|
+
* Public props for `Slider.Thumb` — the draggable handle and the
|
|
2577
|
+
* `role="slider"` a11y owner (keyboard, ARIA value surface, focus). Renders a
|
|
2578
|
+
* CSS-positioned value bubble whose content `children` replace.
|
|
2579
|
+
*/
|
|
2580
|
+
type SliderThumbProps = SliderThumbOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2581
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2582
|
+
};
|
|
2583
|
+
interface SliderTicksOwnProps {
|
|
2584
|
+
/** Per-slot class name overrides. */
|
|
2585
|
+
classNames?: ClassNamesMap<SliderTicksSlot>;
|
|
2586
|
+
/** Per-slot HTML attribute overrides. */
|
|
2587
|
+
slotProps?: SlotPropsMap<SliderTicksSlot>;
|
|
2588
|
+
}
|
|
2589
|
+
/**
|
|
2590
|
+
* Public props for `Slider.Ticks` — decorative (`aria-hidden`) marks at every
|
|
2591
|
+
* step. Opt-in: compose it after `Slider.Track` to show the step grid.
|
|
2592
|
+
*/
|
|
2593
|
+
type SliderTicksProps = SliderTicksOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2594
|
+
ref?: Ref<HTMLDivElement>;
|
|
2595
|
+
};
|
|
2596
|
+
/** State handed to `Slider.Value` function-children. */
|
|
2597
|
+
interface SliderValueRenderProps {
|
|
2598
|
+
/** Committed thumb values — one entry, or two ascending entries for a range. */
|
|
2599
|
+
values: number[];
|
|
2600
|
+
/** Each value passed through the root's `formatValue`, or stringified when the root has no formatter. */
|
|
2601
|
+
formatted: string[];
|
|
2602
|
+
/** Mirrors the root's `range` prop. */
|
|
2603
|
+
range: boolean;
|
|
2604
|
+
}
|
|
2605
|
+
interface SliderValueOwnProps {
|
|
2606
|
+
/**
|
|
2607
|
+
* Readout content. When omitted, `Slider.Value` renders the formatted
|
|
2608
|
+
* value — both entries joined by an en dash for a range. A function receives
|
|
2609
|
+
* the committed values and their formatted strings, which is the only way to
|
|
2610
|
+
* read the value of an **uncontrolled** slider without lifting state out of
|
|
2611
|
+
* the component.
|
|
2612
|
+
*/
|
|
2613
|
+
children?: ReactNode | ((state: SliderValueRenderProps) => ReactNode);
|
|
2614
|
+
/** Per-slot class name overrides. */
|
|
2615
|
+
classNames?: ClassNamesMap<SliderValueSlot>;
|
|
2616
|
+
/** Per-slot HTML attribute overrides. */
|
|
2617
|
+
slotProps?: SlotPropsMap<SliderValueSlot>;
|
|
2618
|
+
}
|
|
2619
|
+
/**
|
|
2620
|
+
* Public props for `Slider.Value` — decorative (`aria-hidden`) value readout.
|
|
2621
|
+
* Each value is already announced through its thumb's `aria-valuenow`, so the
|
|
2622
|
+
* text carries no accessibility semantics. Opt-in: compose it alongside
|
|
2623
|
+
* `Slider.Track`.
|
|
2624
|
+
*/
|
|
2625
|
+
type SliderValueProps = SliderValueOwnProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
|
|
2626
|
+
ref?: Ref<HTMLSpanElement>;
|
|
2627
|
+
};
|
|
2628
|
+
declare module '../../core/theme' {
|
|
2629
|
+
interface ComponentThemeRegistry {
|
|
2630
|
+
Slider: ComponentThemeConfig<SliderProps, SliderSlot>;
|
|
2631
|
+
SliderTrack: ComponentThemeConfig<SliderTrackProps, SliderTrackSlot>;
|
|
2632
|
+
SliderRange: ComponentThemeConfig<SliderRangeProps, SliderRangeSlot>;
|
|
2633
|
+
SliderThumb: ComponentThemeConfig<SliderThumbProps, SliderThumbSlot>;
|
|
2634
|
+
SliderTicks: ComponentThemeConfig<SliderTicksProps, SliderTicksSlot>;
|
|
2635
|
+
SliderValue: ComponentThemeConfig<SliderValueProps, SliderValueSlot>;
|
|
2636
|
+
}
|
|
2637
|
+
}
|
|
2638
|
+
|
|
2639
|
+
declare const Slider: {
|
|
2640
|
+
<T extends react.ElementType = "div">(props: SliderProps<T>): react.JSX.Element;
|
|
2641
|
+
displayName: string;
|
|
2642
|
+
} & {
|
|
2643
|
+
Track: {
|
|
2644
|
+
(props: SliderTrackProps): react.JSX.Element;
|
|
2645
|
+
displayName: string;
|
|
2646
|
+
};
|
|
2647
|
+
Range: {
|
|
2648
|
+
(props: SliderRangeProps): react.JSX.Element;
|
|
2649
|
+
displayName: string;
|
|
2650
|
+
};
|
|
2651
|
+
Thumb: {
|
|
2652
|
+
(props: SliderThumbProps): react.JSX.Element;
|
|
2653
|
+
displayName: string;
|
|
2654
|
+
};
|
|
2655
|
+
Ticks: {
|
|
2656
|
+
(props: SliderTicksProps): react.JSX.Element | null;
|
|
2657
|
+
displayName: string;
|
|
2658
|
+
};
|
|
2659
|
+
Value: {
|
|
2660
|
+
(props: SliderValueProps): react.JSX.Element;
|
|
2661
|
+
displayName: string;
|
|
2662
|
+
};
|
|
1896
2663
|
};
|
|
1897
2664
|
|
|
1898
2665
|
type SpinnerSize = 'small' | 'base' | 'large' | 'xlarge';
|
|
@@ -1933,6 +2700,201 @@ declare const Spinner: {
|
|
|
1933
2700
|
displayName: string;
|
|
1934
2701
|
};
|
|
1935
2702
|
|
|
2703
|
+
/** Layout axis of the step list. */
|
|
2704
|
+
type StepperOrientation = 'horizontal' | 'vertical';
|
|
2705
|
+
/**
|
|
2706
|
+
* Display mode. `'default'` renders indicators with connecting rails; `'compact'`
|
|
2707
|
+
* drops the rails in favor of a progress border on each step.
|
|
2708
|
+
*/
|
|
2709
|
+
type StepperMode = 'default' | 'compact';
|
|
2710
|
+
/** Density scale for indicators and typography. */
|
|
2711
|
+
type StepperSize = 'large' | 'base' | 'small' | 'xsmall';
|
|
2712
|
+
/**
|
|
2713
|
+
* Resolved progress status of a step. Error and disabled are exposed as
|
|
2714
|
+
* separate modifier states so an active/completed step can also be errored.
|
|
2715
|
+
*/
|
|
2716
|
+
type StepperStepStatus = 'inactive' | 'active' | 'completed';
|
|
2717
|
+
/** Payload of the root `onStepClick` callback. */
|
|
2718
|
+
interface StepperStepClickDetail {
|
|
2719
|
+
/** Zero-based index of the pressed step. */
|
|
2720
|
+
index: number;
|
|
2721
|
+
/** Status of the pressed step at press time. */
|
|
2722
|
+
status: StepperStepStatus;
|
|
2723
|
+
}
|
|
2724
|
+
/** State passed to a `Stepper.Item` `indicator` render function. */
|
|
2725
|
+
interface StepperIndicatorState {
|
|
2726
|
+
/** Resolved progress status of the step. */
|
|
2727
|
+
status: StepperStepStatus;
|
|
2728
|
+
/** Zero-based index of the step. */
|
|
2729
|
+
index: number;
|
|
2730
|
+
}
|
|
2731
|
+
type StepperSlot = 'root';
|
|
2732
|
+
type StepperItemSlot = 'root' | 'trigger' | 'rail' | 'indicator' | 'content';
|
|
2733
|
+
type StepperTitleSlot = 'root';
|
|
2734
|
+
type StepperDescriptionSlot = 'root';
|
|
2735
|
+
/**
|
|
2736
|
+
* Props owned by takeoff-v2. There is no Spar Stepper primitive to `Pick`
|
|
2737
|
+
* from — the whole surface is wrapper-owned (see the react-enhancement
|
|
2738
|
+
* rationale in `base.ts`).
|
|
2739
|
+
*/
|
|
2740
|
+
interface StepperOwnProps {
|
|
2741
|
+
/**
|
|
2742
|
+
* Currently active step index (controlled). Not clamped: an out-of-range
|
|
2743
|
+
* index renders every step completed (or inactive) with no active step.
|
|
2744
|
+
*/
|
|
2745
|
+
active?: number;
|
|
2746
|
+
/**
|
|
2747
|
+
* Initially active step index (uncontrolled).
|
|
2748
|
+
* @defaultValue 0
|
|
2749
|
+
*/
|
|
2750
|
+
defaultActive?: number;
|
|
2751
|
+
/** Fires with the new step index when the active step changes. */
|
|
2752
|
+
onActiveChange?: (index: number) => void;
|
|
2753
|
+
/**
|
|
2754
|
+
* Fires on selectable step presses, and on the active step when pressed again,
|
|
2755
|
+
* with the step's index and progress status. Disabled, non-clickable, and
|
|
2756
|
+
* linear-blocked steps emit nothing.
|
|
2757
|
+
*/
|
|
2758
|
+
onStepClick?: (detail: StepperStepClickDetail) => void;
|
|
2759
|
+
/**
|
|
2760
|
+
* Layout axis of the step list.
|
|
2761
|
+
* @defaultValue 'horizontal'
|
|
2762
|
+
*/
|
|
2763
|
+
orientation?: StepperOrientation;
|
|
2764
|
+
/**
|
|
2765
|
+
* Display mode — indicators with connecting rails (`'default'`) or a progress
|
|
2766
|
+
* border per step without rails (`'compact'`).
|
|
2767
|
+
* @defaultValue 'default'
|
|
2768
|
+
*/
|
|
2769
|
+
mode?: StepperMode;
|
|
2770
|
+
/**
|
|
2771
|
+
* Restricts navigation to a linear progression: any previous step, or the
|
|
2772
|
+
* next step when the current one is neither errored nor disabled.
|
|
2773
|
+
* @defaultValue false
|
|
2774
|
+
*/
|
|
2775
|
+
linear?: boolean;
|
|
2776
|
+
/**
|
|
2777
|
+
* Density scale for indicators and typography.
|
|
2778
|
+
* @defaultValue 'base'
|
|
2779
|
+
*/
|
|
2780
|
+
size?: StepperSize;
|
|
2781
|
+
/**
|
|
2782
|
+
* Flips indicators and content along the cross axis.
|
|
2783
|
+
* @defaultValue false
|
|
2784
|
+
*/
|
|
2785
|
+
reverse?: boolean;
|
|
2786
|
+
/**
|
|
2787
|
+
* Accessible status suffix appended to a completed step's name — the check
|
|
2788
|
+
* glyph alone is invisible to assistive technology. Localize per stepper;
|
|
2789
|
+
* an empty string drops the suffix.
|
|
2790
|
+
* @defaultValue 'completed'
|
|
2791
|
+
*/
|
|
2792
|
+
completedLabel?: string;
|
|
2793
|
+
/**
|
|
2794
|
+
* Accessible status suffix appended to an errored step's name — the error
|
|
2795
|
+
* glyph alone is invisible to assistive technology. Localize per stepper;
|
|
2796
|
+
* an empty string drops the suffix.
|
|
2797
|
+
* @defaultValue 'error'
|
|
2798
|
+
*/
|
|
2799
|
+
errorLabel?: string;
|
|
2800
|
+
/** Per-slot class name overrides. */
|
|
2801
|
+
classNames?: ClassNamesMap<StepperSlot>;
|
|
2802
|
+
/** Per-slot HTML attribute overrides. */
|
|
2803
|
+
slotProps?: SlotPropsMap<StepperSlot>;
|
|
2804
|
+
}
|
|
2805
|
+
/**
|
|
2806
|
+
* Public props for the Stepper root. Children must be `Stepper.Item`
|
|
2807
|
+
* elements — the root derives each step's index from its position in
|
|
2808
|
+
* `children`. Arrays (e.g. `items.map(...)`) flatten into one index per
|
|
2809
|
+
* item, but Fragments do not: items wrapped in `<>…</>` share a single
|
|
2810
|
+
* index, so render items directly or from arrays.
|
|
2811
|
+
*
|
|
2812
|
+
* Wrapping `Stepper.Item` in an intermediary component keeps click gating
|
|
2813
|
+
* correct, but first-paint/SSR gating reads `error`/`disabled`/`isClickable`
|
|
2814
|
+
* off each direct child's props — forward them on the wrapper (or accept a
|
|
2815
|
+
* one-paint `data-clickable`/`aria-disabled` correction after hydration).
|
|
2816
|
+
*
|
|
2817
|
+
* Arrow keys (following `orientation`), Home, and End move focus between
|
|
2818
|
+
* step triggers; Tab still reaches every clickable step.
|
|
2819
|
+
*
|
|
2820
|
+
* Overriding `as` on the root leaves items rendering `<li>` — override the
|
|
2821
|
+
* item's `as` in tandem to keep the markup valid.
|
|
2822
|
+
*/
|
|
2823
|
+
type StepperProps<T extends ElementType = 'ol'> = PolymorphicProps<'ol', T, StepperOwnProps>;
|
|
2824
|
+
interface StepperItemOwnProps {
|
|
2825
|
+
/** Marks the step as errored without changing its progress status. */
|
|
2826
|
+
error?: boolean;
|
|
2827
|
+
/**
|
|
2828
|
+
* Disables the step. The trigger renders as a natively disabled button:
|
|
2829
|
+
* unfocusable, unselectable, and silent.
|
|
2830
|
+
*/
|
|
2831
|
+
disabled?: boolean;
|
|
2832
|
+
/**
|
|
2833
|
+
* Whether the step can be activated by pressing it. Non-clickable steps
|
|
2834
|
+
* stay visible in the flow but are removed from the tab order.
|
|
2835
|
+
* @defaultValue true
|
|
2836
|
+
*/
|
|
2837
|
+
isClickable?: boolean;
|
|
2838
|
+
/**
|
|
2839
|
+
* Custom indicator content. Replaces the built-in status glyph (check,
|
|
2840
|
+
* close, or dot) for every status except `disabled`. Pass a function to
|
|
2841
|
+
* render by status — returning `undefined` or `null` falls back to the
|
|
2842
|
+
* built-in glyphs, so numbered steps can surface the check once completed.
|
|
2843
|
+
*/
|
|
2844
|
+
indicator?: ReactNode | ((state: StepperIndicatorState) => ReactNode);
|
|
2845
|
+
/** Step content — typically `Stepper.Title` and `Stepper.Description`. */
|
|
2846
|
+
children?: ReactNode;
|
|
2847
|
+
/** Per-slot class name overrides. */
|
|
2848
|
+
classNames?: ClassNamesMap<StepperItemSlot>;
|
|
2849
|
+
/** Per-slot HTML attribute overrides. */
|
|
2850
|
+
slotProps?: SlotPropsMap<StepperItemSlot>;
|
|
2851
|
+
}
|
|
2852
|
+
type StepperItemProps<T extends ElementType = 'li'> = PolymorphicProps<'li', T, StepperItemOwnProps>;
|
|
2853
|
+
interface StepperTitleOwnProps {
|
|
2854
|
+
/** Step title content. */
|
|
2855
|
+
children?: ReactNode;
|
|
2856
|
+
/** Per-slot class name overrides. */
|
|
2857
|
+
classNames?: ClassNamesMap<StepperTitleSlot>;
|
|
2858
|
+
/** Per-slot HTML attribute overrides. */
|
|
2859
|
+
slotProps?: SlotPropsMap<StepperTitleSlot>;
|
|
2860
|
+
}
|
|
2861
|
+
type StepperTitleProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, StepperTitleOwnProps>;
|
|
2862
|
+
interface StepperDescriptionOwnProps {
|
|
2863
|
+
/** Step description content. */
|
|
2864
|
+
children?: ReactNode;
|
|
2865
|
+
/** Per-slot class name overrides. */
|
|
2866
|
+
classNames?: ClassNamesMap<StepperDescriptionSlot>;
|
|
2867
|
+
/** Per-slot HTML attribute overrides. */
|
|
2868
|
+
slotProps?: SlotPropsMap<StepperDescriptionSlot>;
|
|
2869
|
+
}
|
|
2870
|
+
type StepperDescriptionProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, StepperDescriptionOwnProps>;
|
|
2871
|
+
declare module '../../core/theme' {
|
|
2872
|
+
interface ComponentThemeRegistry {
|
|
2873
|
+
Stepper: ComponentThemeConfig<StepperProps>;
|
|
2874
|
+
StepperItem: ComponentThemeConfig<StepperItemProps, StepperItemSlot>;
|
|
2875
|
+
StepperTitle: ComponentThemeConfig<StepperTitleProps>;
|
|
2876
|
+
StepperDescription: ComponentThemeConfig<StepperDescriptionProps>;
|
|
2877
|
+
}
|
|
2878
|
+
}
|
|
2879
|
+
|
|
2880
|
+
declare const Stepper: {
|
|
2881
|
+
<T extends react.ElementType = "ol">(props: StepperProps<T>): react.JSX.Element;
|
|
2882
|
+
displayName: string;
|
|
2883
|
+
} & {
|
|
2884
|
+
Item: {
|
|
2885
|
+
<T extends react.ElementType = "li">(props: StepperItemProps<T>): react.JSX.Element;
|
|
2886
|
+
displayName: string;
|
|
2887
|
+
};
|
|
2888
|
+
Title: {
|
|
2889
|
+
<T extends react.ElementType = "span">(props: StepperTitleProps<T>): react.JSX.Element;
|
|
2890
|
+
displayName: string;
|
|
2891
|
+
};
|
|
2892
|
+
Description: {
|
|
2893
|
+
<T extends react.ElementType = "span">(props: StepperDescriptionProps<T>): react.JSX.Element;
|
|
2894
|
+
displayName: string;
|
|
2895
|
+
};
|
|
2896
|
+
};
|
|
2897
|
+
|
|
1936
2898
|
type SwitchSize = 'xlarge' | 'large' | 'base' | 'small' | 'xsmall';
|
|
1937
2899
|
type SwitchVariant = 'info' | 'success';
|
|
1938
2900
|
type SwitchSlot = 'root' | 'indicator' | 'thumb';
|
|
@@ -2582,4 +3544,48 @@ declare const Toast: {
|
|
|
2582
3544
|
displayName: string;
|
|
2583
3545
|
};
|
|
2584
3546
|
|
|
2585
|
-
|
|
3547
|
+
type SkeletonShape = 'rectangle' | 'circle';
|
|
3548
|
+
type SkeletonAnimation = 'shimmer' | 'none';
|
|
3549
|
+
type SkeletonSlot = 'root' | 'shimmer';
|
|
3550
|
+
interface SkeletonProps extends Omit<TakeoffHTMLProps<'span'>, 'children'> {
|
|
3551
|
+
/**
|
|
3552
|
+
* Placeholder silhouette. `rectangle` renders the rounded bar, `circle`
|
|
3553
|
+
* a full-radius disc whose diameter tracks `height`.
|
|
3554
|
+
* @defaultValue 'rectangle'
|
|
3555
|
+
*/
|
|
3556
|
+
shape?: SkeletonShape;
|
|
3557
|
+
/**
|
|
3558
|
+
* Loading animation. `shimmer` sweeps the highlight strip across the bar;
|
|
3559
|
+
* `none` renders a static placeholder.
|
|
3560
|
+
* @defaultValue 'shimmer'
|
|
3561
|
+
*/
|
|
3562
|
+
animation?: SkeletonAnimation;
|
|
3563
|
+
/**
|
|
3564
|
+
* Fixed width, number in px or any CSS length. Published to the recipe as
|
|
3565
|
+
* `--tk-skeleton-width`; defaults to filling the container.
|
|
3566
|
+
*/
|
|
3567
|
+
width?: number | string;
|
|
3568
|
+
/**
|
|
3569
|
+
* Fixed height, number in px or any CSS length. Published to the recipe as
|
|
3570
|
+
* `--tk-skeleton-height`.
|
|
3571
|
+
*/
|
|
3572
|
+
height?: number | string;
|
|
3573
|
+
/** Ref forwarded to the root span element. */
|
|
3574
|
+
ref?: Ref<HTMLSpanElement>;
|
|
3575
|
+
/** Per-slot extra classes. */
|
|
3576
|
+
classNames?: ClassNamesMap<SkeletonSlot>;
|
|
3577
|
+
/** Per-slot HTML-attribute overrides. */
|
|
3578
|
+
slotProps?: SlotPropsMap<SkeletonSlot>;
|
|
3579
|
+
}
|
|
3580
|
+
declare module '../../core/theme' {
|
|
3581
|
+
interface ComponentThemeRegistry {
|
|
3582
|
+
Skeleton: ComponentThemeConfig<SkeletonProps, SkeletonSlot>;
|
|
3583
|
+
}
|
|
3584
|
+
}
|
|
3585
|
+
|
|
3586
|
+
declare const Skeleton: {
|
|
3587
|
+
(props: SkeletonProps): react.JSX.Element;
|
|
3588
|
+
displayName: string;
|
|
3589
|
+
};
|
|
3590
|
+
|
|
3591
|
+
export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Alert, type AlertActionsProps, type AlertActionsSlot, type AlertAppearance, type AlertCloseProps, type AlertCloseSlot, type AlertContentProps, type AlertContentSlot, type AlertDescriptionProps, type AlertDescriptionSlot, type AlertProps, type AlertSlot, type AlertTitleProps, type AlertTitleSlot, type AlertVariant, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbNavigationHandler, type BreadcrumbPageProps, type BreadcrumbPressEvent, type BreadcrumbProps, type BreadcrumbSeparatorProps, type BreadcrumbSize, type BreadcrumbType, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Card, type CardBodyProps, type CardBodySlot, type CardDescriptionProps, type CardDescriptionSlot, type CardFooterProps, type CardFooterSlot, type CardFooterType, type CardHeaderProps, type CardHeaderSlot, type CardHeaderType, type CardProps, type CardSlot, type CardTitleProps, type CardTitleSlot, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, Chip, type ChipAppearance, type ChipProps, type ChipSize, type ChipSlot, type ChipVariant, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type ControlledState, type DataSlotName, Dialog, type DialogBodyProps, type DialogBodySlot, type DialogCloseProps, type DialogCloseSlot, type DialogDescriptionProps, type DialogDescriptionSlot, type DialogFooterProps, type DialogFooterSlot, type DialogFooterType, type DialogHeaderProps, type DialogHeaderSlot, type DialogHeaderType, type DialogOverlayIntensity, type DialogOverlayProps, type DialogOverlaySlot, type DialogPanelProps, type DialogPanelSlot, type DialogProps, type DialogTitleProps, type DialogTitleSlot, type DialogTriggerProps, type DialogTriggerSlot, Divider, type DividerAlign, type DividerAppearance, type DividerOrientation, type DividerProps, type DividerSlot, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Dropdown, type DropdownArrowProps, type DropdownContentProps, type DropdownContentWidth, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownProps, type DropdownSeparatorProps, type DropdownSize, type DropdownTriggerProps, type DropdownViewportProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputChipsProps, type InputChipsSlot, type InputClearButtonProps, type InputClearButtonSlot, type InputDecrementProps, type InputDecrementSlot, type InputFieldProps, type InputFieldSlot, type InputIncrementProps, type InputIncrementSlot, type InputLeadingIconProps, type InputLeadingIconSlot, type InputPrefixProps, type InputPrefixSlot, type InputProps, type InputRevealButtonProps, type InputRevealButtonSlot, type InputSize, type InputSlot, type InputSpinnerProps, type InputSpinnerSlot, type InputStepperProps, type InputStepperSlot, type InputStrengthProps, type InputStrengthSlot, type InputSuffixProps, type InputSuffixSlot, type InputTrailingIconProps, type InputTrailingIconSlot, Label, type LabelProps, type LabelSlot, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Progress, type ProgressAppearance, type ProgressIndicatorProps, type ProgressIndicatorSlot, type ProgressProps, type ProgressSize, type ProgressSlot, type ProgressTrackProps, type ProgressTrackSlot, type ProgressValueProps, type ProgressValueSlot, type ProgressVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, Select, type SelectArrowProps, type SelectContentProps, type SelectGroupProps, type SelectIndicatorProps, type SelectIndicatorRenderState, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SelectViewportProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonShape, type SkeletonSlot, Slider, type SliderOrientation, type SliderProps, type SliderRangeProps, type SliderRangeValueProps, type SliderSingleValueProps, type SliderSize, type SliderSlot, type SliderThumbProps, type SliderThumbRenderProps, type SliderTicksProps, type SliderTooltip, type SliderTrackMode, type SliderTrackProps, type SliderValue, type SliderValueProps, type SliderValueRenderProps, type SliderVariant, type SlotClassNames, type SlotPropsMap, Spinner, type SpinnerAppearance, type SpinnerProps, type SpinnerSize, type SpinnerSlot, type SpinnerVariant, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Stepper, type StepperDescriptionProps, type StepperIndicatorState, type StepperItemProps, type StepperMode, type StepperOrientation, type StepperProps, type StepperSize, type StepperStepClickDetail, type StepperStepStatus, type StepperTitleProps, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, Table, type TableAlign, type TableColumnAccessor, type TableColumnDef, type TableColumnFilter, type TableColumnFilterContext, type TableColumnFilterOption, type TableColumnFilterType, type TableColumnMeta, type TableDataRequest, type TableExpansionConfig, type TableFilteringConfig, type TablePaginationConfig, type TableProps, type TableSelectionConfig, type TableSize, type TableSlot, type TableSortingConfig, type TableStickySide, Tabs, type TabsActivationMode, type TabsAppearance, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsTriggerRenderProps, type TabsVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Toast, type ToastAppearance, type ToastData, type ToastOptions, type ToastProps, type ToastSlot, type ToastVariant, Toaster, type ToasterOwnProps, type ToasterProps, type ToasterSlot, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, getExportRows, useComponentTheme, useTheme };
|