@ssa-ui-kit/core 3.24.0 → 3.24.1

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-190 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 314 exported types
+190 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 315 exported types
 
 ## Reading this file
 
@@ -1034,10 +1034,11 @@ Shows a set of images one at a time, with optional thumbnails, dot indicators, p
   - `showDots?: boolean` `= true` — Show the dot indicators (see `controlsPosition`).
   - `showArrows?: boolean` `= true` — Show the previous/next buttons (see `controlsPosition`).
   - `controlsPosition?: CarouselControlsPosition` `= 'overlay'` — Where the dots and arrows sit. `overlay` draws them over the bottom of the slide; `below` puts them in a 32px…
-  - `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`) in a new tab. It appears when the slide is…
+  - `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`), in a new tab or a modal (see `openFullMode`).…
+  - `openFullMode?: CarouselOpenFullMode` `= 'newTab'` — Where the `allowOpenFull` button opens the image. `modal` shows it over a dimmed page at its natural size,…
   - `aspectRatio?: number` `= 1` — Width-to-height ratio of the slide. The slide always fills the container's width; this sets its height.…
   - `height?: Property.Height<string | number>` — Fixed slide height (number = px). Overrides `aspectRatio`.
-  - `fit?: CarouselFit` `= 'contain'` — How images fill the slide frame.
+  - `fit?: CarouselFit` `= 'cover'` — How images fill the slide frame.
   - `index?: number` — Index of the current slide (controlled).
   - `defaultIndex?: number` `= 0` — Index of the slide shown first (uncontrolled).
   - `onIndexChange?: (index: number) => void` — Called whenever the current slide changes.
@@ -1092,8 +1093,9 @@ Compact numeric indicator for displaying counts or notification badges.
 #### FunnelChart
 Stage diagram drawn as a funnel or a triangle
 
-  - `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height.
+  - `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height unless `proportional` is set.
   - `type?: FunnelChartType` `= 'funnel'` — Shape of the chart
+  - `proportional?: boolean` `= false` — Size each level's height in proportion to its value, so bigger values get bigger levels. Zero and tiny values…
   - `withPointer?: boolean` `= false` — Render a leader line and a label beside each level
   - `withTooltip?: boolean` `= true` — Show a tooltip when a level is hovered
   - `withLabels?: boolean` `= true` — Show the labels inside the levels. Pointer labels are controlled by `withPointer`.
@@ -2356,20 +2358,21 @@ _Names only — read the `.d.ts` for their shape._
 `CalendarHighlightColor` · `CalendarProps` · `CalendarRange` · `CalendarType` · `CalendarVariant`
 `CalendarView` · `CalendarWeek` · `CandlestickChartFeatures` · `CandlestickChartProps`
 `CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem`
-`CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps` · `ChildrenDataProps` · `ChipColor`
-`ChipProps` · `ChipSize` · `ChipVariant` · `CollapsibleNavBarExtendedProps`
-`CollapsibleNavBarGroup` · `CollapsibleNavBarHeader` · `CollapsibleNavBarItem`
-`ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi` · `ColumnFreezeMenuProps`
-`ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi` · `ColumnResizeHandleProps`
-`ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps` · `ContextType` · `ControlledButtonProps`
-`CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
-`DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
-`DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
-`DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
-`DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
-`DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
-`DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
-`FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
+`CarouselOpenFullMode` · `CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps`
+`ChildrenDataProps` · `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant`
+`CollapsibleNavBarExtendedProps` · `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader`
+`CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi`
+`ColumnFreezeMenuProps` · `ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi`
+`ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
+`ContextType` · `ControlledButtonProps` · `CounterProps` · `CounterSizes` · `CounterVariants`
+`CustomIconProps` · `CustomTagStyles` · `DatePickerContextProps` · `DatePickerFormat`
+`DatePickerProps` · `DateRangePickerContextProps` · `DateRangePickerFormBridgeProps`
+`DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates` · `DateRangePickerProps`
+`DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple` · `DeprecatedOpenStateProps`
+`DropdownContextType` · `DropdownOptionProps` · `DropdownPositions` · `DropdownProps`
+`DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams` · `DynamicToastParams`
+`FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps` · `FieldErrorProps`
+`FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
 `FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
 `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
 `FiltersMultiSelectProps` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`

package/dist/components/Calendar/consts.d.ts

@@ -25,6 +25,8 @@ export declare const HOUR_GUTTER_WIDTH = 64;
 export declare const DAY_EVENT_GAP = 5;
 /** Shortest an event is drawn, however brief. */
 export declare const DAY_EVENT_MIN_HEIGHT = 15;
+/** Set on the details layer to its `eventDetailsDisplay`, for styling. */
+export declare const DETAILS_DISPLAY_ATTRIBUTE = "data-calendar-details";
 /** Stripe colour per palette entry. */
 export declare const getEventColor: (theme: Theme, color: CalendarColor) => `rgb${string}` | undefined;
 /** Outline, 8% tint and badge gradient of a whole-day highlight. */

package/dist/components/Carousel/Carousel.d.ts

@@ -7,8 +7,8 @@ import { CarouselProps } from './types';
  * The carousel always fills its container's width. The slide's height comes
  * from `aspectRatio` (square by default, as in the design) or from a fixed
  * `height`, never from the images — so the layout does not jump between
- * slides or while images load. Images are letterboxed inside the frame
- * (`fit="contain"`) or cropped to fill it (`fit="cover"`).
+ * slides or while images load. Images are cropped to fill the frame
+ * (`fit="cover"`, the default) or letterboxed inside it (`fit="contain"`).
  *
  * Thumbnails are a fixed 52px. A `left`/`right` strip is exactly as tall as
  * the slide and a `bottom` strip exactly as wide; extra thumbnails scroll and
@@ -49,6 +49,12 @@ import { CarouselProps } from './types';
  *
  * @example
  * ```tsx
+ * // Open full size in a modal on the same page
+ * <Carousel items={items} allowOpenFull openFullMode="modal" />
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Autoplay: 3s per slide, 600ms slide animation
  * <Carousel items={items} autoPlay autoPlayInterval={3000} transitionDuration={600} />
  * ```

package/dist/components/Carousel/FullImageModal.d.ts

@@ -0,0 +1,12 @@
+type FullImageModalProps = {
+    src: string;
+    alt?: string;
+    onClose: () => void;
+};
+/**
+ * The full-size image over a dimmed page, at its natural size but never more
+ * than 80% of the viewport. Escape, a click outside and the close button
+ * close it; focus moves in and returns to the open button.
+ */
+export declare const FullImageModal: ({ src, alt, onClose }: FullImageModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Carousel/styles.d.ts

@@ -17,6 +17,11 @@ export declare const dots: import("@emotion/react").SerializedStyles;
 export declare const dot: (theme: Theme, active: boolean) => import("@emotion/react").SerializedStyles;
 export declare const arrows: import("@emotion/react").SerializedStyles;
 export declare const squareButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const fullOverlay: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** Shrinks to the image, which stops at 80% of the viewport either way. */
+export declare const fullDialog: import("@emotion/react").SerializedStyles;
+export declare const fullImage: import("@emotion/react").SerializedStyles;
+export declare const fullClose: import("@emotion/react").SerializedStyles;
 export declare const openFull: import("@emotion/react").SerializedStyles;
 /**
  * The vertical strip is taken out of flow so that it never stretches the

package/dist/components/Carousel/types.d.ts

@@ -18,7 +18,7 @@ export type CarouselItem = {
      */
     thumbnailSrc?: string;
     /**
-     * Full-size image opened in a new tab when `allowOpenFull` is set.
+     * Full-size image opened by the `allowOpenFull` button.
      * Falls back to `src`.
      */
     fullSrc?: string;
@@ -32,6 +32,11 @@ export type CarouselThumbnailsPosition = 'left' | 'right' | 'bottom' | false;
  * own row under it.
  */
 export type CarouselControlsPosition = 'overlay' | 'below';
+/**
+ * Where the `allowOpenFull` button opens the image: a new browser tab, or a
+ * modal over the current page.
+ */
+export type CarouselOpenFullMode = 'newTab' | 'modal';
 /**
  * How an image fills the slide frame. Mirrors CSS `object-fit`.
  */
@@ -71,11 +76,19 @@ export type CarouselProps = {
      */
     controlsPosition?: CarouselControlsPosition;
     /**
-     * Show a button that opens the current image (`fullSrc ?? src`) in a new
-     * tab. It appears when the slide is hovered or focused.
+     * Show a button that opens the current image (`fullSrc ?? src`), in a new
+     * tab or a modal (see `openFullMode`). It appears when the slide is hovered
+     * or focused.
      * @default false
      */
     allowOpenFull?: boolean;
+    /**
+     * Where the `allowOpenFull` button opens the image. `modal` shows it over a
+     * dimmed page at its natural size, capped at 80% of the viewport's width
+     * and height; autoplay pauses while it is open.
+     * @default 'newTab'
+     */
+    openFullMode?: CarouselOpenFullMode;
     /**
      * Width-to-height ratio of the slide. The slide always fills the
      * container's width; this sets its height. Ignored when `height` is set.
@@ -88,7 +101,7 @@ export type CarouselProps = {
     height?: CSSProperties['height'];
     /**
      * How images fill the slide frame.
-     * @default 'contain'
+     * @default 'cover'
      */
     fit?: CarouselFit;
     /**

package/dist/components/Charts/FunnelChart/FunnelChart.d.ts

@@ -2,8 +2,9 @@ import { FunnelChartProps } from './types';
 /**
  * FunnelChart - Stage diagram drawn as a funnel or a triangle
  *
- * Every level has the same height regardless of its value, so zero or
- * non-decreasing values never collapse or distort the shape. The chart scales
+ * By default every level has the same height regardless of its value, so zero
+ * or non-decreasing values never collapse or distort the shape. Set
+ * `proportional` to size levels by value instead. The chart scales
  * to fit its container — give the container a height, or it falls back to the
  * shape's own aspect ratio.
  *
@@ -21,4 +22,4 @@ import { FunnelChartProps } from './types';
  * />
  * ```
  */
-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;
+export declare const FunnelChart: ({ data, type, proportional, withPointer, withTooltip, withLabels, renderLabel, renderPointerLabel, renderTooltip, tooltipProps, className, "aria-label": ariaLabel, }: FunnelChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/FunnelChart/types.d.ts

@@ -16,13 +16,23 @@ export interface FunnelChartItem {
 export type FunnelChartRender = (item: FunnelChartItem, index: number) => ReactNode;
 /** Props for the FunnelChart component */
 export interface FunnelChartProps {
-    /** Levels from top to bottom. Every level has the same height. */
+    /**
+     * Levels from top to bottom. Every level has the same height unless
+     * `proportional` is set.
+     */
     data: FunnelChartItem[];
     /**
      * Shape of the chart
      * @default 'funnel'
      */
     type?: FunnelChartType;
+    /**
+     * Size each level's height in proportion to its value, so bigger values
+     * get bigger levels. Zero and tiny values keep a minimum height (40% of
+     * an equal level) so their labels still fit; non-numeric values count as 0.
+     * @default false
+     */
+    proportional?: boolean;
     /**
      * Render a leader line and a label beside each level
      * @default false

package/dist/components/Charts/FunnelChart/utils.d.ts

@@ -8,6 +8,13 @@ type Point = {
     radius: number;
 };
 export declare const roundedPolygonPath: (points: Point[]) => string;
+/**
+ * Splits `total` between levels in proportion to `values`. Levels that would
+ * fall below the minimum get the minimum, and the rest share what is left in
+ * proportion to their values. Non-numeric and negative values count as 0;
+ * when nothing is positive every level gets the same height.
+ */
+export declare const getProportionalHeights: (values: (number | string)[], total: number) => number[];
 export interface FunnelBand {
     top: number;
     bottom: number;
@@ -21,5 +28,9 @@ export interface FunnelGeometry {
     /** Half-width of the shape at a given distance from the top */
     halfWidthAt: (y: number) => number;
 }
-export declare const getGeometry: (type: FunnelChartType, levels: number) => FunnelGeometry;
+/**
+ * Shape and level bands. Pass `heights` (summing to `DESIGN_HEIGHT`) to size
+ * the levels; otherwise they are equal.
+ */
+export declare const getGeometry: (type: FunnelChartType, levels: number, heights?: number[]) => FunnelGeometry;
 export {};