@ssa-ui-kit/core 3.22.0 → 3.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/ai/source-map.md +97 -27
  2. package/dist/components/Carousel/Carousel.d.ts +62 -0
  3. package/dist/components/Carousel/index.d.ts +1 -0
  4. package/dist/components/Carousel/styles.d.ts +27 -0
  5. package/dist/components/Carousel/types.d.ts +141 -0
  6. package/dist/components/Charts/FunnelChart/FunnelChart.d.ts +24 -0
  7. package/dist/components/Charts/FunnelChart/index.d.ts +2 -0
  8. package/dist/components/Charts/FunnelChart/styles.d.ts +10 -0
  9. package/dist/components/Charts/FunnelChart/types.d.ts +62 -0
  10. package/dist/components/Charts/FunnelChart/utils.d.ts +25 -0
  11. package/dist/components/Charts/index.d.ts +1 -0
  12. package/dist/components/Drawer/DrawerActions.d.ts +44 -0
  13. package/dist/components/Drawer/DrawerFooter.d.ts +33 -0
  14. package/dist/components/Drawer/DrawerRoot.d.ts +10 -4
  15. package/dist/components/Drawer/constants.d.ts +17 -0
  16. package/dist/components/Drawer/index.parts.d.ts +2 -0
  17. package/dist/components/Drawer/useDrawer.d.ts +23 -0
  18. package/dist/components/NavBar/NavBarList.d.ts +5 -0
  19. package/dist/components/Table/ColumnResizeContext.d.ts +30 -0
  20. package/dist/components/Table/ColumnResizeHandle.d.ts +47 -0
  21. package/dist/components/Table/ColumnResizeHandle.types.d.ts +29 -0
  22. package/dist/components/Table/Table.d.ts +67 -5
  23. package/dist/components/Table/TableBase.d.ts +36 -0
  24. package/dist/components/Table/consts.d.ts +8 -0
  25. package/dist/components/Table/hooks/useColumnResize.d.ts +76 -0
  26. package/dist/components/Table/index.d.ts +5 -0
  27. package/dist/components/Table/types.d.ts +149 -0
  28. package/dist/components/TableCellHeader/TableCellHeader.d.ts +2 -1
  29. package/dist/components/TableCellHeader/types.d.ts +18 -1
  30. package/dist/components/Tooltip/types.d.ts +2 -2
  31. package/dist/components/Typeahead/Typeahead.context.d.ts +1 -0
  32. package/dist/components/Typeahead/Typeahead.d.ts +1 -1
  33. package/dist/components/Typeahead/singleLine.d.ts +52 -0
  34. package/dist/components/Typeahead/styles.d.ts +19 -0
  35. package/dist/components/Typeahead/types.d.ts +10 -1
  36. package/dist/components/Typeahead/useTypeahead.d.ts +2 -1
  37. package/dist/components/index.d.ts +4 -0
  38. package/dist/index.js +2396 -347
  39. package/dist/index.mjs +2392 -348
  40. package/dist/tsbuildcache +1 -1
  41. package/dist/types/emotion.d.ts +9 -0
  42. package/package.json +3 -3
@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
4
4
 
5
5
  **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
6
6
 
7
- 182 components · 20 contexts · 20 hooks · 17 functions · 16 constants · 271 exported types
7
+ 185 components · 20 contexts · 22 hooks · 17 functions · 16 constants · 287 exported types
8
8
 
9
9
  ## Reading this file
10
10
 
@@ -20,7 +20,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
20
20
 
21
21
  **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
22
22
 
23
- **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, ChartBackground, Chip, Counter, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
23
+ **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
24
24
 
25
25
  **Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
26
26
 
@@ -681,6 +681,7 @@ Advanced autocomplete search component with dropdown functionality
681
681
  - `selectedItems?: TypeaheadValue[]` — Controlled selected items (array of values)
682
682
  - `defaultSelectedItems?: TypeaheadValue[]` — Default selected items for uncontrolled mode
683
683
  - `isMultiple?: boolean` `= false` — Enable multiple selection mode When true, allows selecting multiple options
684
+ - `singleLine?: boolean` `= false` — Keep the multiple-selection trigger on a single line. Shows as many selected items as fit, then a `+N`…
684
685
  - `disabled?: boolean` `= false` — Whether the component is disabled Disabled typeahead cannot be interacted with
685
686
  - `isDisabled?: boolean` `= false` — Whether the component is disabled
686
687
  - `children?: ReactNode` — TypeaheadOption components as children Each child should be a TypeaheadOption component
@@ -969,6 +970,28 @@ UI Component that renders a list of items with a custom render function
969
970
  - `items: ItemType[]`
970
971
  - `renderItem: (item: ItemType) => React.ReactNode`
971
972
 
973
+ #### Carousel
974
+ Shows a set of images one at a time, with optional thumbnails, dot indicators, previous/next buttons and autoplay.
975
+
976
+ - `items: CarouselItem[]` — Slides to show, in order.
977
+ - `thumbnails?: CarouselThumbnailsPosition` `= false` — Position of the thumbnail strip. `left`/`right` render a vertical strip as tall as the slide; `bottom`…
978
+ - `showDots?: boolean` `= true` — Show the dot indicators (see `controlsPosition`).
979
+ - `showArrows?: boolean` `= true` — Show the previous/next buttons (see `controlsPosition`).
980
+ - `controlsPosition?: CarouselControlsPosition` `= 'overlay'` — Where the dots and arrows sit. `overlay` draws them over the bottom of the slide; `below` puts them in a 32px…
981
+ - `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`) in a new tab. It appears when the slide is…
982
+ - `aspectRatio?: number` `= 1` — Width-to-height ratio of the slide. The slide always fills the container's width; this sets its height.…
983
+ - `height?: Property.Height<string | number>` — Fixed slide height (number = px). Overrides `aspectRatio`.
984
+ - `fit?: CarouselFit` `= 'contain'` — How images fill the slide frame.
985
+ - `index?: number` — Index of the current slide (controlled).
986
+ - `defaultIndex?: number` `= 0` — Index of the slide shown first (uncontrolled).
987
+ - `onIndexChange?: (index: number) => void` — Called whenever the current slide changes.
988
+ - `loop?: boolean` `= false` — Wrap from the last slide to the first and back. Always on while `autoPlay` is enabled.
989
+ - `autoPlay?: boolean` `= false` — Advance slides automatically. Pauses while the carousel is hovered or focused, while the tab is hidden, and…
990
+ - `autoPlayInterval?: number` `= 5000` — How long each slide stays on screen during `autoPlay`, in ms.
991
+ - `transitionDuration?: number` `= 300` — Duration of the slide animation, in ms. `0` switches instantly.
992
+ - `renderItem?: (item: CarouselItem, index: number) => ReactNode` — Replaces the default image of a slide with custom content.
993
+ - `aria-label?: string` `= 'Image carousel'` — Accessible name of the carousel region.
994
+
972
995
  #### ChartBackground
973
996
 
974
997
  _No library-specific props._
@@ -990,6 +1013,13 @@ Compact component for tags, labels, and removable items.
990
1013
  - `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
991
1014
  - `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
992
1015
 
1016
+ #### ColumnResizeHandle
1017
+ The grab area on a column's right edge
1018
+
1019
+ - `columnIndex?: number` — Which column this handle resizes. Defaults to the `cellIndex` of the cell the handle is rendered in, which is…
1020
+ - `label?: string` — Column name used in the handle's accessible label. Defaults to the text of the cell the handle sits in.
1021
+ - _plus native element attributes_
1022
+
993
1023
  #### Counter
994
1024
  Compact numeric indicator for displaying counts or notification badges.
995
1025
 
@@ -998,6 +1028,20 @@ Compact numeric indicator for displaying counts or notification badges.
998
1028
  - `size?: keyof MainSizes` `= 'medium'` — Size of the counter. Ignored when `count` is undefined — the component uses `dot` automatically.
999
1029
  - `color?: string` — Optional color override. Accepts a `theme.colors` key or any valid CSS color string. When provided, overrides…
1000
1030
 
1031
+ #### FunnelChart
1032
+ Stage diagram drawn as a funnel or a triangle
1033
+
1034
+ - `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height.
1035
+ - `type?: FunnelChartType` `= 'funnel'` — Shape of the chart
1036
+ - `withPointer?: boolean` `= false` — Render a leader line and a label beside each level
1037
+ - `withTooltip?: boolean` `= true` — Show a tooltip when a level is hovered
1038
+ - `withLabels?: boolean` `= true` — Show the labels inside the levels. Pointer labels are controlled by `withPointer`.
1039
+ - `renderLabel?: FunnelChartRender` `= the level number, starting at 1` — Content inside a level. Return `null` to leave a single level empty.
1040
+ - `renderPointerLabel?: FunnelChartRender` `= the item's value` — Content beside a level when `withPointer` is on
1041
+ - `renderTooltip?: FunnelChartRender` `= "label: value"` — Tooltip content
1042
+ - `tooltipProps?: Partial<Omit<TooltipProps, 'children'>>` — Props forwarded to every level's Tooltip, e.g. `size` or `color`
1043
+ - `aria-label?: string` — Accessible name; defaults to a list of the levels' labels and values
1044
+
1001
1045
  #### GaugeChart
1002
1046
 
1003
1047
  - `minValue: number`
@@ -1216,7 +1260,13 @@ A simple wrapper over the `<img />` tag.
1216
1260
  #### Table
1217
1261
  Base table component for displaying tabular data
1218
1262
 
1219
- _No library-specific props._
1263
+ - `resizableColumns?: boolean` `= false` — Lets columns be resized by dragging the right edge of each header cell.
1264
+ - `columnWidths?: number[]` — Column widths in pixels, one per column. Passing this prop puts the table into controlled mode for the life…
1265
+ - `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case. Omit it and the table measures its own columns…
1266
+ - `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag. Persisting widths is the caller's job — write…
1267
+ - `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
1268
+ - `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
1269
+ - `columnResizeMode?: ColumnResizeMode` `= 'fit'` — Whether a resize is paid for by the next column or by the table's own width. Defaults to `fit`, which keeps…
1220
1270
  - _plus native element attributes_
1221
1271
 
1222
1272
  #### TableBody
@@ -1234,6 +1284,7 @@ Table data cell component
1234
1284
  #### TableCellHeader
1235
1285
  Table header cell component
1236
1286
 
1287
+ - `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
1237
1288
  - `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
1238
1289
  - _plus native element attributes_
1239
1290
 
@@ -2021,7 +2072,7 @@ Wrapper component for form controls
2021
2072
  Slide-out panel anchored to an edge of the screen.
2022
2073
 
2023
2074
  - `children?: ReactElement<unknown, string | JSXElementConstructor<any>>`
2024
- - `store?: { open, opened, dismissable, position, duration, floatingContext, …+8 }`
2075
+ - `store?: { open, opened, dismissable, position, duration, floatingContext, …+9 }`
2025
2076
  - `open?: boolean` — Controlled open state. When provided, the drawer is fully controlled and the parent must update it from…
2026
2077
  - `defaultOpen?: boolean` — Initial open state for an uncontrolled drawer.
2027
2078
  - `opened?: boolean` — Controlled open state.
@@ -2029,8 +2080,9 @@ Slide-out panel anchored to an edge of the screen.
2029
2080
  - `duration?: number`
2030
2081
  - `dismissable?: boolean`
2031
2082
  - `position?: Position`
2032
- - `title?: string`
2033
- - `withCloseButton?: boolean`
2083
+ - `title?: string` — Title for the header that `Drawer.Content` builds for you.
2084
+ - `withCloseButton?: boolean` — Adds a close button to the header that `Drawer.Content` builds for you.
2085
+ - `width?: string | number` `= 400` — Width of the panel for `left`/`right` drawers — a number of px, or any CSS length. `top`/`bottom` drawers…
2034
2086
  - `onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void`
2035
2087
 
2036
2088
  #### Drawer.Overlay
@@ -2051,6 +2103,18 @@ Slide-out panel anchored to an edge of the screen.
2051
2103
  - `children?: ReactNode`
2052
2104
  - _plus native element attributes_
2053
2105
 
2106
+ #### Drawer.Actions
2107
+ The header's right-hand control group.
2108
+
2109
+ - `children?: ReactNode`
2110
+ - _plus native element attributes_
2111
+
2112
+ #### Drawer.Footer
2113
+ A sticky action bar across the bottom of the panel.
2114
+
2115
+ - `children?: ReactNode`
2116
+ - _plus native element attributes_
2117
+
2054
2118
  #### Drawer.Title
2055
2119
 
2056
2120
  - `children?: ReactNode`
@@ -2110,6 +2174,8 @@ Slide-out panel anchored to an edge of the screen.
2110
2174
  - `useButtonGroupContext` — Access the enclosing `ButtonGroup`'s selection state.
2111
2175
  - `useCollapsibleNavBarContext`
2112
2176
  - `useCollapsibleNavBarItemContext`
2177
+ - `useColumnResize` — Column resizing for a `Table`, without any of the rendering.
2178
+ - `useColumnResizeContext` — The enclosing table's resize API, or `null` when there isn't one.
2113
2179
  - `useDrawer`
2114
2180
  - `useFieldContext`
2115
2181
  - `useFilterMultiSelect`
@@ -2188,22 +2254,26 @@ _Names only — read the `.d.ts` for their shape._
2188
2254
  `BreadcrumbSibling` · `BreadcrumbsProps` · `ButtonGroupButtonProps` · `ButtonGroupContextValue`
2189
2255
  `ButtonGroupItemInput` · `ButtonGroupItem` · `ButtonGroupProps` · `ButtonGroupValue` · `ButtonProps`
2190
2256
  `ButtonTextProps` · `ButtonVariants` · `CalendarType` · `CandlestickChartFeatures`
2191
- `CandlestickChartProps` · `CardListProps` · `CardProps` · `CheckboxProps` · `ChildrenDataProps`
2192
- `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant` · `CollapsibleNavBarExtendedProps`
2193
- `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader` · `CollapsibleNavBarItem`
2194
- `ColoredButtonTextProps` · `ColorsKeys` · `CommonProps` · `ContextType` · `ControlledButtonProps`
2195
- `CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
2196
- `DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
2197
- `DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
2198
- `DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
2199
- `DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
2200
- `DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
2201
- `DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
2202
- `FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
2257
+ `CandlestickChartProps` · `CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit`
2258
+ `CarouselItem` · `CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps`
2259
+ `ChildrenDataProps` · `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant`
2260
+ `CollapsibleNavBarExtendedProps` · `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader`
2261
+ `CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnResizeApi`
2262
+ `ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
2263
+ `ContextType` · `ControlledButtonProps` · `CounterProps` · `CounterSizes` · `CounterVariants`
2264
+ `CustomIconProps` · `CustomTagStyles` · `DatePickerContextProps` · `DatePickerFormat`
2265
+ `DatePickerProps` · `DateRangePickerContextProps` · `DateRangePickerFormBridgeProps`
2266
+ `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates` · `DateRangePickerProps`
2267
+ `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple` · `DeprecatedOpenStateProps`
2268
+ `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions` · `DropdownProps`
2269
+ `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams` · `DynamicToastParams`
2270
+ `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps` · `FieldErrorProps`
2271
+ `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
2203
2272
  `FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
2204
2273
  `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
2205
2274
  `FiltersMultiSelectProps` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
2206
- `FullscreenModeContextType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
2275
+ `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps` · `FunnelChartRender`
2276
+ `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
2207
2277
  `GaugeChartFeature` · `GaugeChartProps` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
2208
2278
  `IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
2209
2279
  `InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
@@ -2224,20 +2294,20 @@ _Names only — read the `.d.ts` for their shape._
2224
2294
  `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions` · `PopoverTriggerProps`
2225
2295
  `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps` · `ProgressInfoItemProps`
2226
2296
  `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps` · `ProgressProps` · `RGBString`
2227
- `RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps`
2297
+ `RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps` · `ResizeHandleProps`
2228
2298
  `ResolveDeprecatedPropOptions` · `ResolvedOpenState` · `ResponsiveImageProps` · `SVGProps`
2229
2299
  `SearchBoxProps` · `SelectedFilter` · `SetIDs` · `SimpleChartTooltipProps` · `SizeStyles`
2230
2300
  `SliderMark` · `SliderProps` · `SliderSize` · `SmallTabProps` · `StepperContextType`
2231
2301
  `StepperProps` · `SwitchContext` · `SwitchProps` · `TabBarContextProps` · `TabBarLink`
2232
- `TabBarProps` · `TabBaseProps` · `TabProps` · `TagsProps` · `TextFieldProps` · `TextareaProps`
2233
- `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor`
2302
+ `TabBarProps` · `TabBaseProps` · `TabProps` · `TableProps` · `TagsProps` · `TextFieldProps`
2303
+ `TextareaProps` · `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor`
2234
2304
  `TooltipContentProps` · `TooltipContentSizes` · `TooltipContextType` · `TooltipProps`
2235
2305
  `TooltipSize` · `TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase`
2236
2306
  `TreeItemLevel2` · `TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel`
2237
2307
  `TreeMapChartFeature` · `TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
2238
2308
  `TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps` · `TypeaheadValue`
2239
- `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseDrawerOptions`
2240
- `UseFiltersMultiSelectOptions` · `UseFiltersMultiSelectStore` · `UsePopover` · `UseTooltipArgs`
2241
- `UseTooltipContext` · `UseTooltip` · `UseTypeaheadProps` · `UserProfileProps` · `ValueLabelDisplay`
2242
- `VariantStyle` · `WidgetCardProps` · `WithNestedTableRowProps` · `WithWidgetCardProps`
2243
- `WrapperAlignItems` · `WrapperDirection` · `WrapperJustifyContent`
2309
+ `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseColumnResizeOptions`
2310
+ `UseDrawerOptions` · `UseFiltersMultiSelectOptions` · `UseFiltersMultiSelectStore` · `UsePopover`
2311
+ `UseTooltipArgs` · `UseTooltipContext` · `UseTooltip` · `UseTypeaheadProps` · `UserProfileProps`
2312
+ `ValueLabelDisplay` · `VariantStyle` · `WidgetCardProps` · `WithNestedTableRowProps`
2313
+ `WithWidgetCardProps` · `WrapperAlignItems` · `WrapperDirection` · `WrapperJustifyContent`
@@ -0,0 +1,62 @@
1
+ import { CarouselProps } from './types';
2
+ /**
3
+ * Carousel - Shows a set of images one at a time, with optional thumbnails,
4
+ * dot indicators, previous/next buttons and autoplay.
5
+ *
6
+ * ### Sizing
7
+ * The carousel always fills its container's width. The slide's height comes
8
+ * from `aspectRatio` (square by default, as in the design) or from a fixed
9
+ * `height`, never from the images — so the layout does not jump between
10
+ * slides or while images load. Images are letterboxed inside the frame
11
+ * (`fit="contain"`) or cropped to fill it (`fit="cover"`).
12
+ *
13
+ * Thumbnails are a fixed 52px. A `left`/`right` strip is exactly as tall as
14
+ * the slide and a `bottom` strip exactly as wide; extra thumbnails scroll and
15
+ * the active one is kept in view.
16
+ *
17
+ * ### Controls
18
+ * Dots and arrows sit over the bottom of the slide (`controlsPosition="overlay"`)
19
+ * or in their own row under it (`controlsPosition="below"`).
20
+ *
21
+ * ### Navigation
22
+ * Arrows, dots, thumbnails and the ←/→/Home/End keys (while focus is
23
+ * anywhere inside the carousel) all move between slides. Without `loop` the arrows stop at both
24
+ * ends. `autoPlay` always loops and pauses on hover, focus, a hidden tab and
25
+ * `prefers-reduced-motion`.
26
+ *
27
+ * ### State
28
+ * Pass `index` + `onIndexChange` to control the current slide, or
29
+ * `defaultIndex` to let the carousel own it.
30
+ *
31
+ * @category Components
32
+ * @subcategory Data Display
33
+ *
34
+ * @example
35
+ * ```tsx
36
+ * <Carousel
37
+ * items={[
38
+ * { src: '/front.jpg', alt: 'Front view' },
39
+ * { src: '/side.jpg', alt: 'Side view' },
40
+ * ]}
41
+ * />
42
+ * ```
43
+ *
44
+ * @example
45
+ * ```tsx
46
+ * // Vertical thumbnails, 4:3 slide, open full size in a new tab
47
+ * <Carousel items={items} thumbnails="left" aspectRatio={4 / 3} allowOpenFull />
48
+ * ```
49
+ *
50
+ * @example
51
+ * ```tsx
52
+ * // Autoplay: 3s per slide, 600ms slide animation
53
+ * <Carousel items={items} autoPlay autoPlayInterval={3000} transitionDuration={600} />
54
+ * ```
55
+ *
56
+ * @accessibility
57
+ * - Root is a `region` with `aria-roledescription="carousel"`
58
+ * - Each slide is a labelled group ("N of M"); hidden slides are `inert`
59
+ * - Slide changes are announced politely unless autoplay is running
60
+ * - Dots and thumbnails expose `aria-current` for the active slide
61
+ */
62
+ export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ export * from './Carousel';
@@ -0,0 +1,27 @@
1
+ import { Theme } from '@emotion/react';
2
+ import { CarouselControlsPosition, CarouselFit, CarouselThumbnailsPosition } from './types';
3
+ export declare const THUMB_SIZE = 52;
4
+ export declare const root: import("@emotion/react").SerializedStyles;
5
+ /**
6
+ * The slide plus a vertical thumbnail strip. Kept apart from the controls row
7
+ * so a left/right strip is only ever as tall as the slide.
8
+ */
9
+ export declare const stage: (thumbnails: CarouselThumbnailsPosition) => import("@emotion/react").SerializedStyles;
10
+ export declare const viewport: (theme: Theme) => import("@emotion/react").SerializedStyles;
11
+ export declare const track: import("@emotion/react").SerializedStyles;
12
+ export declare const slide: import("@emotion/react").SerializedStyles;
13
+ export declare const image: (fit: CarouselFit) => import("@emotion/react").SerializedStyles;
14
+ export declare const placeholder: (theme: Theme) => import("@emotion/react").SerializedStyles;
15
+ export declare const controls: (position: CarouselControlsPosition, thumbnails: CarouselThumbnailsPosition) => import("@emotion/react").SerializedStyles[];
16
+ export declare const dots: import("@emotion/react").SerializedStyles;
17
+ export declare const dot: (theme: Theme, active: boolean) => import("@emotion/react").SerializedStyles;
18
+ export declare const arrows: import("@emotion/react").SerializedStyles;
19
+ export declare const squareButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
20
+ export declare const openFull: import("@emotion/react").SerializedStyles;
21
+ /**
22
+ * The vertical strip is taken out of flow so that it never stretches the
23
+ * row: its height comes from the slide next to it, and the rest scrolls.
24
+ */
25
+ export declare const thumbStripWrapper: (vertical: boolean) => import("@emotion/react").SerializedStyles;
26
+ export declare const thumbStrip: (vertical: boolean) => import("@emotion/react").SerializedStyles;
27
+ export declare const thumb: (theme: Theme, active: boolean) => import("@emotion/react").SerializedStyles;
@@ -0,0 +1,141 @@
1
+ import { CSSProperties, ReactNode } from 'react';
2
+ /**
3
+ * A single slide of a {@link Carousel}.
4
+ */
5
+ export type CarouselItem = {
6
+ /**
7
+ * Image shown in the slide. When omitted (or when it fails to load) the
8
+ * slide renders the grey picture placeholder from the design.
9
+ */
10
+ src?: string;
11
+ /**
12
+ * Alternative text for the image. Also used in the accessible labels of
13
+ * the thumbnail and dot that select this slide.
14
+ */
15
+ alt?: string;
16
+ /**
17
+ * Smaller image for the thumbnail strip. Falls back to `src`.
18
+ */
19
+ thumbnailSrc?: string;
20
+ /**
21
+ * Full-size image opened in a new tab when `allowOpenFull` is set.
22
+ * Falls back to `src`.
23
+ */
24
+ fullSrc?: string;
25
+ };
26
+ /**
27
+ * Where the thumbnail strip sits relative to the slide, or `false` for none.
28
+ */
29
+ export type CarouselThumbnailsPosition = 'left' | 'right' | 'bottom' | false;
30
+ /**
31
+ * Where the dots and arrows sit: over the bottom of the slide, or in their
32
+ * own row under it.
33
+ */
34
+ export type CarouselControlsPosition = 'overlay' | 'below';
35
+ /**
36
+ * How an image fills the slide frame. Mirrors CSS `object-fit`.
37
+ */
38
+ export type CarouselFit = 'contain' | 'cover';
39
+ /**
40
+ * Props of the {@link Carousel} component.
41
+ */
42
+ export type CarouselProps = {
43
+ /**
44
+ * Slides to show, in order.
45
+ */
46
+ items: CarouselItem[];
47
+ /**
48
+ * Position of the thumbnail strip. `left`/`right` render a vertical strip
49
+ * as tall as the slide; `bottom` renders a horizontal strip as wide as it.
50
+ * The strip scrolls when it holds more thumbnails than fit.
51
+ * @default false
52
+ */
53
+ thumbnails?: CarouselThumbnailsPosition;
54
+ /**
55
+ * Show the dot indicators (see `controlsPosition`).
56
+ * @default true
57
+ */
58
+ showDots?: boolean;
59
+ /**
60
+ * Show the previous/next buttons (see `controlsPosition`).
61
+ * @default true
62
+ */
63
+ showArrows?: boolean;
64
+ /**
65
+ * Where the dots and arrows sit. `overlay` draws them over the bottom of
66
+ * the slide; `below` puts them in a 32px row 12px under it, aligned with
67
+ * the slide (not with a side thumbnail strip). The open-full-size button
68
+ * always stays on the slide.
69
+ * @default 'overlay'
70
+ */
71
+ controlsPosition?: CarouselControlsPosition;
72
+ /**
73
+ * Show a button that opens the current image (`fullSrc ?? src`) in a new
74
+ * tab. It appears when the slide is hovered or focused.
75
+ * @default false
76
+ */
77
+ allowOpenFull?: boolean;
78
+ /**
79
+ * Width-to-height ratio of the slide. The slide always fills the
80
+ * container's width; this sets its height. Ignored when `height` is set.
81
+ * @default 1
82
+ */
83
+ aspectRatio?: number;
84
+ /**
85
+ * Fixed slide height (number = px). Overrides `aspectRatio`.
86
+ */
87
+ height?: CSSProperties['height'];
88
+ /**
89
+ * How images fill the slide frame.
90
+ * @default 'contain'
91
+ */
92
+ fit?: CarouselFit;
93
+ /**
94
+ * Index of the current slide (controlled).
95
+ */
96
+ index?: number;
97
+ /**
98
+ * Index of the slide shown first (uncontrolled).
99
+ * @default 0
100
+ */
101
+ defaultIndex?: number;
102
+ /**
103
+ * Called whenever the current slide changes.
104
+ */
105
+ onIndexChange?: (index: number) => void;
106
+ /**
107
+ * Wrap from the last slide to the first and back. Always on while
108
+ * `autoPlay` is enabled.
109
+ * @default false
110
+ */
111
+ loop?: boolean;
112
+ /**
113
+ * Advance slides automatically. Pauses while the carousel is hovered or
114
+ * focused, while the tab is hidden, and when the user prefers reduced motion.
115
+ * @default false
116
+ */
117
+ autoPlay?: boolean;
118
+ /**
119
+ * How long each slide stays on screen during `autoPlay`, in ms.
120
+ * @default 5000
121
+ */
122
+ autoPlayInterval?: number;
123
+ /**
124
+ * Duration of the slide animation, in ms. `0` switches instantly.
125
+ * @default 300
126
+ */
127
+ transitionDuration?: number;
128
+ /**
129
+ * Replaces the default image of a slide with custom content.
130
+ */
131
+ renderItem?: (item: CarouselItem, index: number) => ReactNode;
132
+ /**
133
+ * Accessible name of the carousel region.
134
+ * @default 'Image carousel'
135
+ */
136
+ 'aria-label'?: string;
137
+ /**
138
+ * Custom CSS class name applied to the root element.
139
+ */
140
+ className?: string;
141
+ };
@@ -0,0 +1,24 @@
1
+ import { FunnelChartProps } from './types';
2
+ /**
3
+ * FunnelChart - Stage diagram drawn as a funnel or a triangle
4
+ *
5
+ * Every level has the same height regardless of its value, so zero or
6
+ * non-decreasing values never collapse or distort the shape. The chart scales
7
+ * to fit its container — give the container a height, or it falls back to the
8
+ * shape's own aspect ratio.
9
+ *
10
+ * @category Charts
11
+ *
12
+ * @example
13
+ * ```tsx
14
+ * <FunnelChart
15
+ * withPointer
16
+ * data={[
17
+ * { label: 'Visitors', value: 1200 },
18
+ * { label: 'Leads', value: 300 },
19
+ * { label: 'Customers', value: 0 },
20
+ * ]}
21
+ * />
22
+ * ```
23
+ */
24
+ export declare const FunnelChart: ({ data, type, withPointer, withTooltip, withLabels, renderLabel, renderPointerLabel, renderTooltip, tooltipProps, className, "aria-label": ariaLabel, }: FunnelChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ export * from './FunnelChart';
2
+ export type * from './types';
@@ -0,0 +1,10 @@
1
+ import { Theme } from '@emotion/react';
2
+ export declare const root: import("@emotion/react").SerializedStyles;
3
+ export declare const chart: import("@emotion/react").SerializedStyles;
4
+ export declare const content: import("@emotion/react").SerializedStyles;
5
+ export declare const svg: import("@emotion/react").SerializedStyles;
6
+ export declare const noPointerEvents: import("@emotion/react").SerializedStyles;
7
+ export declare const innerLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
8
+ export declare const pointerLabels: import("@emotion/react").SerializedStyles;
9
+ export declare const pointerLabelRow: import("@emotion/react").SerializedStyles;
10
+ export declare const pointerLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
@@ -0,0 +1,62 @@
1
+ import { ReactNode } from 'react';
2
+ import { TooltipProps } from '../../Tooltip/types';
3
+ /** Shape of a FunnelChart: an inverted funnel with a stem, or a pyramid */
4
+ export type FunnelChartType = 'funnel' | 'triangle';
5
+ /** One level of a FunnelChart, listed top to bottom in `data` */
6
+ export interface FunnelChartItem {
7
+ /** Name of the stage — shown in the default tooltip and accessible label */
8
+ label: string;
9
+ /** Value of the stage; `0` is rendered like any other value */
10
+ value: number | string;
11
+ /** Overrides the palette colour of this level */
12
+ color?: string;
13
+ id?: string | number;
14
+ }
15
+ /** Receives the whole item and its zero-based level index */
16
+ export type FunnelChartRender = (item: FunnelChartItem, index: number) => ReactNode;
17
+ /** Props for the FunnelChart component */
18
+ export interface FunnelChartProps {
19
+ /** Levels from top to bottom. Every level has the same height. */
20
+ data: FunnelChartItem[];
21
+ /**
22
+ * Shape of the chart
23
+ * @default 'funnel'
24
+ */
25
+ type?: FunnelChartType;
26
+ /**
27
+ * Render a leader line and a label beside each level
28
+ * @default false
29
+ */
30
+ withPointer?: boolean;
31
+ /**
32
+ * Show a tooltip when a level is hovered
33
+ * @default true
34
+ */
35
+ withTooltip?: boolean;
36
+ /**
37
+ * Show the labels inside the levels. Pointer labels are controlled by
38
+ * `withPointer`.
39
+ * @default true
40
+ */
41
+ withLabels?: boolean;
42
+ /**
43
+ * Content inside a level. Return `null` to leave a single level empty.
44
+ * @default the level number, starting at 1
45
+ */
46
+ renderLabel?: FunnelChartRender;
47
+ /**
48
+ * Content beside a level when `withPointer` is on
49
+ * @default the item's value
50
+ */
51
+ renderPointerLabel?: FunnelChartRender;
52
+ /**
53
+ * Tooltip content
54
+ * @default "label: value"
55
+ */
56
+ renderTooltip?: FunnelChartRender;
57
+ /** Props forwarded to every level's Tooltip, e.g. `size` or `color` */
58
+ tooltipProps?: Partial<Omit<TooltipProps, 'children'>>;
59
+ className?: string;
60
+ /** Accessible name; defaults to a list of the levels' labels and values */
61
+ 'aria-label'?: string;
62
+ }
@@ -0,0 +1,25 @@
1
+ import { Theme } from '@emotion/react';
2
+ import { FunnelChartType } from './types';
3
+ export declare const DESIGN_HEIGHT = 173.57;
4
+ export declare const getDefaultColors: (theme: Theme, type: FunnelChartType, levels: number) => (`rgb${string}` | undefined)[];
5
+ type Point = {
6
+ x: number;
7
+ y: number;
8
+ radius: number;
9
+ };
10
+ export declare const roundedPolygonPath: (points: Point[]) => string;
11
+ export interface FunnelBand {
12
+ top: number;
13
+ bottom: number;
14
+ /** Where the band's label sits, measured from the top */
15
+ labelY: number;
16
+ }
17
+ export interface FunnelGeometry {
18
+ width: number;
19
+ outline: string;
20
+ bands: FunnelBand[];
21
+ /** Half-width of the shape at a given distance from the top */
22
+ halfWidthAt: (y: number) => number;
23
+ }
24
+ export declare const getGeometry: (type: FunnelChartType, levels: number) => FunnelGeometry;
25
+ export {};
@@ -8,4 +8,5 @@ export * from './GaugeChart';
8
8
  export * from './BarGaugeChart';
9
9
  export * from './BigNumberChart';
10
10
  export * from './CandlestickChart';
11
+ export * from './FunnelChart';
11
12
  export * from './utils/nivoReact19Compat';
@@ -0,0 +1,44 @@
1
+ export interface DrawerActionsProps extends React.HTMLAttributes<HTMLDivElement> {
2
+ children?: React.ReactNode;
3
+ }
4
+ /**
5
+ * Drawer.Actions - The header's right-hand control group.
6
+ *
7
+ * A row for whatever the drawer's header needs next to its title — a save
8
+ * button, a search field — ending with `Drawer.CloseButton`. It only lays the
9
+ * controls out (20px apart, vertically centred); the controls themselves are
10
+ * ordinary kit components, so their text, variant, disabled and loading states
11
+ * stay yours.
12
+ *
13
+ * Put it inside `Drawer.Header`, and give the header a `Drawer.Title` as its
14
+ * first child so the group is pushed to the far edge.
15
+ *
16
+ * ### Compose the header yourself, or let the store build it — not both
17
+ * Passing `title`/`withCloseButton` to `useDrawer` makes `Drawer.Content`
18
+ * render its own header. Writing your own means leaving both unset, or the
19
+ * drawer draws two.
20
+ *
21
+ * @category Components
22
+ * @subcategory Overlay
23
+ *
24
+ * @example
25
+ * ```tsx
26
+ * <Drawer.Header>
27
+ * <Drawer.Title>Filters</Drawer.Title>
28
+ * <Drawer.Actions>
29
+ * <Button variant="primary" text="Save" onClick={handleSave} />
30
+ * <Drawer.CloseButton />
31
+ * </Drawer.Actions>
32
+ * </Drawer.Header>
33
+ * ```
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * // A search field in place of the button
38
+ * <Drawer.Actions>
39
+ * <Input name="search" placeholder="Search" onChange={handleSearch} />
40
+ * <Drawer.CloseButton />
41
+ * </Drawer.Actions>
42
+ * ```
43
+ */
44
+ export declare const DrawerActions: import("react").ForwardRefExoticComponent<DrawerActionsProps & import("react").RefAttributes<HTMLDivElement>>;