@ssa-ui-kit/core 3.20.2 → 3.20.4

package/dist/components/Checkbox/Checkbox.d.ts

@@ -9,11 +9,13 @@ import { CheckboxProps } from './types';
  *
  * Colors are driven by `theme.palette`:
  * - `primary` (default) — blue; uses `palette.primary.light/main/dark` for
- *   the resting border, checked fill, and hover fill. Disabled uses `greyFocused40`.
+ *   the resting border, checked fill, and hover fill.
  * - `success` — green; uses `palette.success.main/dark` for the border and fills.
- *   Disabled uses `greyFocused40`.
  * - `custom` — unstyled; apply your own colors via `className` or the `css` prop.
  *
+ * When disabled, an unchecked box goes flat `greyFocused40`; a checked or
+ * indeterminate one keeps its fill colour, muted, so the state stays readable.
+ *
  * @category Form Controls
  * @subcategory Input
  *

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

@@ -122,11 +122,13 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
      * Color variant of the checkbox — controls the checked and focus-state colors.
      * Sourced from `theme.palette`:
      * - `primary` — blue (uses `palette.primary`); resting border is `palette.primary.light`,
-     *   checked fill is `palette.primary.main`, hover fill is `palette.primary.dark`,
-     *   disabled box background is `greyFocused40`
+     *   checked fill is `palette.primary.main`, hover fill is `palette.primary.dark`.
+     *   When disabled, an unchecked box is `greyFocused40` while a checked one keeps
+     *   `palette.primary.main`, muted
      * - `success` — green (uses `palette.success`); resting border is `palette.success.main`,
-     *   checked fill is `palette.success.main`, hover fill is `palette.success.dark`,
-     *   disabled box background is `greyFocused40`
+     *   checked fill is `palette.success.main`, hover fill is `palette.success.dark`.
+     *   When disabled, an unchecked box is `greyFocused40` while a checked one keeps
+     *   `palette.success.main`, muted
      * - `custom` — no built-in color; apply styles via `className` or the `css` prop
      * @default 'primary'
      */

package/dist/components/DateRangePicker/components/Presets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shortcut ranges listed beside the calendar. Applying one leaves the popover
+ * open, so the calendar stays available for fine-tuning the range afterwards.
+ *
+ * Ranges are resolved on every render rather than memoized: a relative preset
+ * (**Today**, **Current week**) has to reflect the current date, and the same
+ * resolved value drives both the highlight and the click so the two can never
+ * disagree.
+ */
+export declare const Presets: () => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/DateRangePicker/components/index.d.ts

@@ -7,3 +7,4 @@ export * from './DaysView';
 export * from './MonthsView';
 export * from './YearsView';
 export * from './DatesListWrapper';
+export * from './Presets';

package/dist/components/DateRangePicker/hooks/useDateRangePicker.d.ts

@@ -42,6 +42,7 @@ export declare const useDateRangePicker: ({ dateMin, dateMax, name: _name, forma
     rangeSelectionStep: "start" | "end" | null;
     setRangeSelectionStep: React.Dispatch<React.SetStateAction<"start" | "end" | null>>;
     clearInputValue: (field: "from" | "to") => void;
+    applyDateRange: (from: Date, to: Date) => void;
     isEndDatePresent: boolean;
     setIsEndDatePresent: React.Dispatch<React.SetStateAction<boolean>>;
     setLastChangedDate: React.Dispatch<React.SetStateAction<[Date | undefined | null, Date | undefined | null]>>;

package/dist/components/DateRangePicker/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DateRangePicker';
 export { DateRangePickerFormBridge, PRESENT_VALUE, type DateRangePickerFormBridgeProps, type DateRangePickerFormBridgeValue, } from './DateRangePickerFormBridge';
+export { DEFAULT_DATE_RANGE_PRESETS, todayPreset, yesterdayPreset, currentWeekPreset, lastWeekPreset, currentMonthPreset, lastMonthPreset, resolvePresetRange, } from './utils/presets';
 export { DEFAULT_MASK_FORMAT, DEFAULT_EUROPEAN_MASK_FORMAT, DEFAULT_MONTH_MASK_FORMAT, DEFAULT_YEAR_MASK_FORMAT, } from './constants';
-export type { LastFocusedElement, RangePickerType, Format, DateRangePickerProps, DateRangePickerOnChangeDates, DateTimeTuple, DateRangePickerContextProps, } from './types';
+export type { LastFocusedElement, RangePickerType, Format, DateRangePickerProps, DateRangePickerOnChangeDates, DateTimeTuple, DateRangePickerContextProps, DateRangePreset, DateRangePresetValue, } from './types';

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

@@ -12,3 +12,23 @@ export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<{
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+/**
+ * Preset column shown to the left of the calendar. It mirrors the geometry of
+ * the day-and-time pop-up's side panel — a fixed-width column with its own
+ * padding — so the popover keeps one consistent layout whichever panel is on.
+ */
+export declare const PresetsPanel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * A single preset. The active look reuses the selected-cell tokens from the
+ * calendar so a highlighted preset and a highlighted day read as the same
+ * state.
+ */
+export declare const PresetButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isActive: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

@@ -31,6 +31,43 @@ export type DateRangePickerOnChangeDates = [
  * Parsed range as **Luxon** values before emitting JS dates (**`[from, to]`**).
  */
 export type DateTimeTuple = [DateTime | undefined, DateTime | undefined];
+/**
+ * Resolved preset range: **[start, end]** as JavaScript **`Date`** values.
+ */
+export type DateRangePresetValue = [Date, Date];
+/**
+ * One entry in the **`presets`** list rendered beside the calendar.
+ *
+ * **`dateRange`** is either a fixed tuple or a factory. Prefer the factory for
+ * anything relative to *now* (**Today**, **Current week**, …) — it is evaluated
+ * when the list renders and when the item is clicked, so the range cannot go
+ * stale in an app that stays open across midnight.
+ *
+ * @example
+ * ```tsx
+ * const lastSevenDays: DateRangePreset = {
+ *   label: 'Last 7 days',
+ *   dateRange: () => {
+ *     const today = new Date();
+ *     const from = new Date(today);
+ *     from.setDate(from.getDate() - 6);
+ *     return [from, today];
+ *   },
+ * };
+ * ```
+ */
+export interface DateRangePreset {
+    /**
+     * Text shown for the item (also its accessible name).
+     */
+    label: string;
+    /**
+     * The range applied on click — a fixed **`[start, end]`** tuple, or a
+     * function returning one. Reversed tuples are swapped, and ends outside
+     * **`dateMin`** / **`dateMax`** are clamped to those bounds.
+     */
+    dateRange: DateRangePresetValue | (() => DateRangePresetValue);
+}
 /**
  * Active calendar view: day grid, month grid, or year list (aligned with **rangePickerType** / header navigation).
  */
@@ -160,7 +197,21 @@ export interface DateRangePickerProps {
         };
         calendar?: string;
         label?: string;
+        presets?: {
+            root?: string;
+            item?: string;
+        };
     };
+    /**
+     * Shortcut ranges (**Today**, **Last month**, …) listed to the left of the
+     * calendar. Clicking one applies its range and keeps the popover open, so
+     * the user can still fine-tune the dates in the calendar. Nothing renders
+     * when the prop is omitted or empty.
+     *
+     * Use **`DEFAULT_DATE_RANGE_PRESETS`** for the common set, or build your own
+     * array of **`DateRangePreset`**.
+     */
+    presets?: DateRangePreset[];
     /**
      * Emits **`[start, end]`** as **`Date`**, **`null`** (Present end only), or **`undefined`** per side.
      */
@@ -339,6 +390,14 @@ export interface DateRangePickerContextProps extends Omit<DateRangePickerProps,
      * Clears **from** or **to** and syncs form state.
      */
     clearInputValue: (field: 'from' | 'to') => void;
+    /**
+     * Applies a complete range at once (used by **`presets`**): sets both
+     * anchors, moves the calendar view onto them, syncs both form fields, and
+     * emits **`onChange`**. Reversed input is swapped and out-of-bounds ends are
+     * clamped to **`dateMin`** / **`dateMax`**; a range that falls entirely
+     * outside those bounds is ignored.
+     */
+    applyDateRange: (from: Date, to: Date) => void;
     /**
      * End field shows **Present** (open-ended); form **to** value may be empty while flag is true.
      */

package/dist/components/DateRangePicker/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dates';
 export * from './format';
+export * from './presets';

package/dist/components/DateRangePicker/utils/presets.d.ts

@@ -0,0 +1,35 @@
+import { DateRangePreset, DateRangePresetValue } from '../types';
+/**
+ * Presets are resolved at click (and render) time rather than at module load,
+ * so a relative range such as **Today** stays correct in an app that is left
+ * open across midnight.
+ */
+export declare const resolvePresetRange: (preset: DateRangePreset) => DateRangePresetValue;
+/** **Today** — a single-day range on the current date. */
+export declare const todayPreset: DateRangePreset;
+/** **Yesterday** — a single-day range on the previous date. */
+export declare const yesterdayPreset: DateRangePreset;
+/**
+ * **Current week** — the whole week containing today, first to last day.
+ * Week boundaries follow Luxon's locale rules (Monday-first by default).
+ */
+export declare const currentWeekPreset: DateRangePreset;
+/** **Last week** — the full week before the current one. */
+export declare const lastWeekPreset: DateRangePreset;
+/** **Current month** — the first to the last day of the current month. */
+export declare const currentMonthPreset: DateRangePreset;
+/** **Last month** — the full month before the current one. */
+export declare const lastMonthPreset: DateRangePreset;
+/**
+ * Ready-made preset list for the common “today / yesterday / week / month”
+ * shortcuts. Pass it straight to **`presets`**, or compose your own array from
+ * the individual presets (and your own entries) to change the set or order.
+ *
+ * @example
+ * ```tsx
+ * import { DateRangePicker, DEFAULT_DATE_RANGE_PRESETS } from '@ssa-ui-kit/core';
+ *
+ * <DateRangePicker name="report" presets={DEFAULT_DATE_RANGE_PRESETS} />
+ * ```
+ */
+export declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];

package/dist/components/Popover/PopoverContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MountMode } from './types';
+import { PopoverContentProps } from './types';
 /**
  * PopoverContent - Content container for popover
  *
@@ -22,6 +22,26 @@ import { MountMode } from './types';
  *
  * @example
  * ```tsx
+ * // Surface styling comes from the root, and is shared with Tooltip
+ * <Popover color="dark" size="medium" hasArrow>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeading variant="h4">Title</PopoverHeading>
+ *     <PopoverDescription>Content goes here</PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Built-in close affordance, off by default
+ * <PopoverContent hasCloseButton closeButtonProps={{ icon: 'close-circle-outline' }}>
+ *   <PopoverDescription>Dismiss me with the corner button</PopoverDescription>
+ * </PopoverContent>
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Keep content mounted when closed
  * <PopoverContent mountMode="keep-mounted">
  *   <div>This stays in DOM when closed</div>
@@ -33,7 +53,4 @@ import { MountMode } from './types';
  * @see {@link PopoverHeading} - Accessible heading component
  * @see {@link PopoverDescription} - Accessible description component
  */
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & {
-    isFocusManagerDisabled?: boolean;
-    mountMode?: MountMode;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.d.ts

@@ -5,3 +5,4 @@ export { PopoverDescription } from './PopoverDescription';
 export { PopoverHeading } from './PopoverHeading';
 export { PopoverTrigger } from './PopoverTrigger';
 export * from './hooks';
+export type * from './types';

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

@@ -1,4 +1,6 @@
-import { Placement, useInteractions, UseFloatingReturn, UseFloatingOptions } from '@floating-ui/react';
+import { FloatingArrow, OffsetOptions, Placement, useInteractions, UseFloatingReturn, UseFloatingOptions } from '@floating-ui/react';
+import { FloatingSurfaceColor, FloatingSurfaceSize } from '../../styles/floatingSurface';
+import { IconButtonProps } from '../IconButton/types';
 /**
  * Interaction modes for popover activation
  * - `click`: Opens on click interaction (default)
@@ -82,6 +84,76 @@ export interface PopoverOptions {
      * Callback fired when open state changes
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Color scheme of the popover surface. Shared with Tooltip — see
+     * {@link FloatingSurfaceColor}.
+     *
+     * Left unset, the popover renders unstyled (no background, border or
+     * shadow) and its content supplies its own surface, which is how every
+     * popover in the kit behaved before this prop existed.
+     */
+    color?: FloatingSurfaceColor;
+    /**
+     * Padding/typography scale of the popover surface. Unset means no padding is
+     * applied, leaving spacing to the content.
+     */
+    size?: FloatingSurfaceSize;
+    /**
+     * Whether the surface (and its arrow) is outlined with a 1px border
+     * @default true when `color` is `'white'`, false otherwise
+     */
+    hasBorder?: boolean;
+    /**
+     * Whether the surface casts a drop shadow
+     * @default true when `color` is set, false otherwise
+     */
+    hasShadow?: boolean;
+    /**
+     * Whether to display an arrow pointing at the trigger.
+     *
+     * The arrow is filled from `color`. With no `color` the popover draws no
+     * surface of its own, so the arrow falls back to a white fill — matching the
+     * light card unstyled content usually supplies. Set `arrowProps.fill` for
+     * anything else.
+     * @default false
+     */
+    hasArrow?: boolean;
+    /**
+     * Additional props for the arrow element
+     */
+    arrowProps?: PopoverArrowProps;
+    /**
+     * Offset between the trigger and the popover
+     * @default 12 when `hasArrow` is set, 5 otherwise
+     */
+    offsetOptions?: OffsetOptions;
+}
+export type PopoverArrowProps = Omit<React.ComponentProps<typeof FloatingArrow>, 'context'>;
+/**
+ * Props for PopoverContent component
+ */
+export interface PopoverContentProps extends React.HTMLProps<HTMLDivElement> {
+    /**
+     * Disables the focus manager wrapping the content
+     * @default false
+     */
+    isFocusManagerDisabled?: boolean;
+    /**
+     * Whether closed content is unmounted or kept mounted but hidden
+     * @default 'unmount'
+     */
+    mountMode?: MountMode;
+    /**
+     * Renders a close button in the top-right corner of the surface
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Props forwarded to the built-in close button, e.g. `icon`, `size` or
+     * `aria-label`. An `onClick` runs before the popover closes — it composes
+     * with the dismissal rather than replacing it.
+     */
+    closeButtonProps?: Partial<IconButtonProps>;
 }
 export type SetIDs = {
     setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -114,7 +186,10 @@ export interface PopoverTriggerProps {
     dataTestId?: string;
 }
 type UseInteractions = ReturnType<typeof useInteractions>;
-export type UsePopover = (props: PopoverOptions) => {
+export type UsePopover = (props: PopoverOptions) => Pick<PopoverOptions, 'color' | 'size' | 'hasArrow' | 'arrowProps'> & {
+    hasBorder: boolean;
+    hasShadow: boolean;
+    arrowRef: React.RefObject<SVGSVGElement | null>;
     open: boolean;
     modal?: boolean;
     labelId?: string;

package/dist/components/Switch/Switch.d.ts

@@ -12,7 +12,8 @@ import { SwitchProps } from './types';
  * object to supply arbitrary CSS color values.
  *
  * The off state always shows a neutral grey background (`greyFocused`).
- * The disabled state always uses `greySelectedMenuItem`, regardless of color variant.
+ * When disabled, the off state uses `greySelectedMenuItem`; the on state keeps its
+ * color, muted by a white overlay so the on/off distinction survives.
  * Hovering the on state darkens it: palette variants swap to their `palette.*.dark`
  * token; custom colors get a `rgba(0,0,0,0.15)` overlay so the knob stays unaffected.
  *
@@ -37,7 +38,7 @@ import { SwitchProps } from './types';
  *
  * @example
  * ```tsx
- * // Disabled (muted grey, cannot toggle)
+ * // Disabled + on (muted on-color, cannot toggle)
  * <SwitchContextProvider initialState={true}>
  *   <Switch label="Locked feature" disabled />
  * </SwitchContextProvider>

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

@@ -16,7 +16,9 @@
  *   On hover, a `rgba(0,0,0,0.15)` overlay darkens the track; the knob is unaffected.
  *
  * The off state always uses a neutral grey background (`greyFocused`) regardless
- * of variant. Disabled state always uses `greySelectedMenuItem` (same for all variants).
+ * of variant. When disabled, the off state uses `greySelectedMenuItem` while the
+ * on state keeps its color, muted by a white overlay, so a locked-on switch
+ * still reads as on.
  *
  * @example
  * ```tsx
@@ -57,7 +59,8 @@ export interface SwitchProps {
     label: string;
     /**
      * Whether the switch is disabled
-     * Disabled switches cannot be toggled; background becomes `greySelectedMenuItem`
+     * Disabled switches cannot be toggled. The off state becomes
+     * `greySelectedMenuItem`; the on state keeps its color, muted.
      * @default false
      */
     disabled?: boolean;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -54,6 +54,19 @@ import { TooltipProps } from './types';
  *
  * @example
  * ```tsx
+ * // Dark surface, no shadow
+ * <Tooltip color="dark" hasShadow={false}>
+ *   <TooltipTrigger>
+ *     <Button>Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent title="Headline" maxWidth={200}>
+ *     Body text that wraps at 200px
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Tooltip without arrow
  * <Tooltip hasArrow={false}>
  *   <TooltipTrigger>

package/dist/components/Tooltip/TooltipArrow.d.ts

@@ -1,2 +1,2 @@
 import { TooltipArrowProps } from './types';
-export declare const TooltipArrow: ({ width, height, fill, ...props }: TooltipArrowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TooltipArrow: ({ width, height, fill, stroke, strokeWidth, ...props }: TooltipArrowProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/TooltipContentBase.d.ts

@@ -1,4 +1,13 @@
+import { TooltipColor } from './types';
+export interface TooltipContentBaseProps {
+    /** Color scheme of the surface. Defaults to `grey`. */
+    tooltipColor?: TooltipColor;
+    /** Outlines the surface with a 1px border. */
+    hasBorder?: boolean;
+    /** Casts the design's drop shadow. Defaults to `true`. */
+    hasShadow?: boolean;
+}
 export declare const TooltipContentBase: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & TooltipContentBaseProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,3 +1,12 @@
-export declare const small: import("@emotion/react").SerializedStyles;
-export declare const medium: import("@emotion/react").SerializedStyles;
-export declare const large: import("@emotion/react").SerializedStyles;
+/**
+ * The tooltip surface is styled from the shared floating-surface tokens, which
+ * Popover renders from too. Re-exported under the historical names so
+ * `styles.small`, `styles.dark`, … stay part of the public Tooltip API.
+ */
+export { small, medium, large, grey, white, dark, nonOpaque, border, shadow, title, withTitle, surfaceColors, resolveSurfaceArrowProps, surfaceBackgrounds as backgroundColors, } from '../../styles/floatingSurface';
+/**
+ * Font size/line height the chart tooltips were rendered at before the sizes
+ * above were aligned with the design. The chart legend spec keeps 9.26px, so
+ * they pin it explicitly instead of following the `small` size token.
+ */
+export declare const chartTooltipText: import("@emotion/react").SerializedStyles;

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

@@ -4,6 +4,7 @@ import { MapIconsType } from '../Icon/types';
 import { ProgressBarProps } from '../ProgressBar/types';
 import { SerializedStyles } from '@emotion/react';
 import { CommonProps } from '../../types/emotion';
+import { FloatingSurfaceColor } from '../../styles/floatingSurface';
 /**
  * Size variant for tooltip content
  * - `small`: Compact tooltip with minimal padding
@@ -11,6 +12,15 @@ import { CommonProps } from '../../types/emotion';
  * - `large`: Larger tooltip for more content
  */
 export type TooltipSize = 'small' | 'medium' | 'large';
+/**
+ * Color scheme of the tooltip surface — mirrors the `Color` dimension of the
+ * design. Shared with Popover, which renders the same surface.
+ * - `grey`: light grey surface with dark text (default)
+ * - `white`: white surface with dark text — bordered by default
+ * - `dark`: dark surface with white text
+ * - `nonOpaque`: semi-transparent white surface with dark text
+ */
+export type TooltipColor = FloatingSurfaceColor;
 /**
  * Props for the Tooltip component
  *
@@ -83,6 +93,21 @@ export interface TooltipProps extends CommonProps {
      * @default 'medium'
      */
     size?: TooltipSize;
+    /**
+     * Color scheme of the tooltip content
+     * @default 'grey'
+     */
+    color?: TooltipColor;
+    /**
+     * Whether the tooltip surface (and its arrow) is outlined with a 1px border
+     * @default true when `color` is `'white'`, false otherwise
+     */
+    hasBorder?: boolean;
+    /**
+     * Whether the tooltip surface casts a drop shadow
+     * @default true
+     */
+    hasShadow?: boolean;
     /**
      * Whether to display arrow pointing to trigger
      * @default true
@@ -123,7 +148,7 @@ type UseInteractions = ReturnType<typeof useInteractions>;
 interface RefObject<T> {
     current: T;
 }
-export type UseTooltip = (props?: UseTooltipArgs) => Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'> & {
+export type UseTooltip = (props?: UseTooltipArgs) => Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'> & {
     arrowRef: RefObject<null>;
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -132,7 +157,7 @@ export type TooltipContextType = (UseFloatingReturn & ReturnType<typeof useInter
     arrowRef: React.Ref<SVGSVGElement>;
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-} & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>) | null;
+} & Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>) | null;
 export type TooltipArrowProps = Omit<React.ComponentProps<typeof FloatingArrow>, 'context'>;
 /**
  * Props for TooltipContent component
@@ -147,6 +172,17 @@ export interface TooltipContentProps {
      * Can be text, React nodes, or formatted content
      */
     children: React.ReactNode;
+    /**
+     * Optional headline rendered in bold above `children`, separated by an 8px
+     * gap. Accepts plain text or any React node.
+     */
+    title?: React.ReactNode;
+    /**
+     * Maximum width of the tooltip surface. Without it the tooltip is sized to
+     * its content and never wraps — set it for multi-line content such as a
+     * `title` with a paragraph of text.
+     */
+    maxWidth?: number | string;
     /**
      * Custom CSS class name
      */

package/dist/components/TooltipContent/TooltipContent.d.ts

@@ -36,6 +36,14 @@ import { TooltipContentProps } from '../Tooltip/types';
  * </TooltipContent>
  * ```
  *
+ * @example
+ * ```tsx
+ * // Headline above the body text, wrapping at 200px
+ * <TooltipContent title="Headline" maxWidth={200}>
+ *   A short description that wraps onto several lines.
+ * </TooltipContent>
+ * ```
+ *
  * @see {@link Tooltip} - Parent component that provides context
  * @see {@link TooltipTrigger} - Trigger component that activates tooltip
  *

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

@@ -50,7 +50,7 @@ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").Styl
 } & {
     isOpen: boolean;
 }, {}, {}>;
-export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("..").ButtonProps & import("../Popover/types").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
+export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("..").ButtonProps & import("../Popover").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
     theme?: Theme;
 } & {
     isOpen: boolean;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import './types/emotion.d';
 export * from './types/emotion';
 export { default as mainTheme } from './themes/main';
 export * as globalStyles from './styles/global';
+export type { FloatingSurfaceColor, FloatingSurfaceSize, } from './styles/floatingSurface';
 export * as styleUtils from './styles/safari-focus-outline';
 export * from './components';
 export * from './contexts';