@ssa-ui-kit/core 3.8.0 → 3.9.0

package/dist/components/Icon/icons/AttentionCircle.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const AttentionCircle: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "attention-circle";

package/dist/components/Icon/icons/all.d.ts

@@ -125,3 +125,4 @@ export * as EmailOutlined from './EmailOutlined';
 export * as LockOutlined from './LockOutlined';
 export * as AddFolder from './AddFolder';
 export * as MoveFolder from './MoveFolder';
+export * as AttentionCircle from './AttentionCircle';

package/dist/components/Icon/icons/iconsList.d.ts

@@ -1 +1 @@
-export declare const iconsList: ("visible" | "warning" | "archive" | "document" | "link" | "search" | "arrow-down" | "arrow-up" | "clipboard-assessment" | "attention" | "award" | "ban-user" | "bench" | "bin" | "calendar" | "calendar-schedule" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "card-text" | "case" | "certification" | "certification-expiring" | "camera" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "comments" | "briefcase" | "building" | "compensation" | "confirm-email" | "contacts" | "copy" | "copy-link" | "cross" | "delete" | "diamond-ring" | "diet" | "documents" | "edit" | "education" | "email" | "employee" | "employee-profile" | "employee-terminated" | "employee-blackboard" | "excel-download" | "export" | "file-mark" | "file-pdf" | "file-word" | "filter" | "filter-funnel" | "follow-link" | "fte" | "clipboard-form" | "geography" | "gender" | "gift" | "home" | "import" | "information" | "inventory" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "office-chair" | "open-book" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "clipboard-report" | "clipboard-result" | "robot" | "roles" | "seniority" | "settings" | "setting-clock" | "signature" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "clipboard-summary" | "team" | "clipboard-star" | "time-tracking" | "timeline" | "tennis-ball" | "trainings" | "unarchive" | "union" | "union-circle" | "unlock" | "url" | "user" | "panelLeft" | "panelRight" | "emailOutlined" | "lockOutlined" | "addFolder" | "moveFolder")[];
+export declare const iconsList: ("visible" | "warning" | "archive" | "document" | "link" | "search" | "arrow-down" | "arrow-up" | "clipboard-assessment" | "attention" | "award" | "ban-user" | "bench" | "bin" | "calendar" | "calendar-schedule" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "card-text" | "case" | "certification" | "certification-expiring" | "camera" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "comments" | "briefcase" | "building" | "compensation" | "confirm-email" | "contacts" | "copy" | "copy-link" | "cross" | "delete" | "diamond-ring" | "diet" | "documents" | "edit" | "education" | "email" | "employee" | "employee-profile" | "employee-terminated" | "employee-blackboard" | "excel-download" | "export" | "file-mark" | "file-pdf" | "file-word" | "filter" | "filter-funnel" | "follow-link" | "fte" | "clipboard-form" | "geography" | "gender" | "gift" | "home" | "import" | "information" | "inventory" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "office-chair" | "open-book" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "clipboard-report" | "clipboard-result" | "robot" | "roles" | "seniority" | "settings" | "setting-clock" | "signature" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "clipboard-summary" | "team" | "clipboard-star" | "time-tracking" | "timeline" | "tennis-ball" | "trainings" | "unarchive" | "union" | "union-circle" | "unlock" | "url" | "user" | "panelLeft" | "panelRight" | "emailOutlined" | "lockOutlined" | "addFolder" | "moveFolder" | "attention-circle")[];

package/dist/components/NotificationComponents/Alert/Alert.d.ts

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { AlertProps } from './types';
+/**
+ * Alert — portal-based notification container driven by the Observer pattern.
+ *
+ * ## Usage pattern (two steps)
+ *
+ * **Step 1 — mount once** near the app root (layout, shell, etc.).
+ * The component renders nothing until `showAlert` is called.
+ *
+ * ```tsx
+ * // app-root.tsx
+ * import { Alert, NotificationPositions } from '@ssa-ui-kit/core';
+ *
+ * <Alert position={NotificationPositions.rightTop} withShadow maxAmount={5} />
+ * ```
+ *
+ * **Step 2 — trigger from anywhere** via `showAlert`.
+ * No refs, no prop drilling, no context required.
+ *
+ * ```tsx
+ * import { showAlert, AlertVariants } from '@ssa-ui-kit/core';
+ *
+ * showAlert({ variant: AlertVariants.success, title: 'Saved!' });
+ *
+ * showAlert({
+ *   variant: AlertVariants.error,
+ *   title: 'Upload failed',
+ *   description: 'File exceeds 10 MB.',
+ *   cancelText: 'Dismiss',
+ *   onClose: () => {},           // required for the cancel button to appear
+ *   submitText: 'Retry',
+ *   onSubmit: () => retryFn(),   // required for the submit button to appear
+ * });
+ * ```
+ *
+ * ## Key props
+ * - `position`        — one of `NotificationPositions` (default: `rightTop`)
+ * - `maxAmount`       — cap on simultaneous alerts; oldest is dropped when exceeded
+ * - `withShadow`      — drop shadow (default: `true`)
+ * - `withBorder`      — 1 px accent-color border (default: `false`)
+ * - `inheritMainColor`— close icon matches the variant accent color
+ * - `containerSelector` — CSS selector for a custom portal target; falls back to `document.body`
+ * - `styles`          — `AlertStyleOverrides` object for per-slot CSS customization without touching the theme
+ *
+ * ## Stacking order
+ * - `*-top` positions  → newest alert prepended (appears at the top of the stack)
+ * - `*-bottom` positions → newest alert appended (appears at the bottom of the stack)
+ *
+ * When `maxAmount` is set and the stack is full, the oldest alert is dropped:
+ * - `*-top`:    drops from the **end** of the array (bottom of the stack)
+ * - `*-bottom`: drops from the **start** of the array (top of the stack)
+ *
+ * @category Components
+ * @subcategory Notification
+ */
+declare const Alert: FC<AlertProps>;
+export default Alert;

package/dist/components/NotificationComponents/Alert/AlertItem.d.ts

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { NotificationPositions, NotificationSizes } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+import { AlertStyleOverrides, AlertVariants } from './types';
+/**
+ * @internal
+ *
+ * Renders a single alert card inside the `<Alert>` portal container.
+ * This component is **not part of the public API** — consumers should call
+ * `showAlert(params)` to trigger alerts and configure appearance via the
+ * `<Alert>` component's props (`withShadow`, `withBorder`, `styles`, etc.).
+ *
+ * Direct use of `AlertItem` is only intended for static previews in Storybook
+ * stories or tests where portal/observer overhead is unwanted.
+ *
+ * Layout modes:
+ * - **Expanded** — when `description` is provided: title + description + action row + close button in header
+ * - **Collapsed** — no description: title + action row + close button all on one line
+ *
+ * Action buttons are **opt-in**: a button only renders when its label text
+ * AND its callback are both present (`cancelText + onClose`, `submitText + onSubmit`).
+ */
+export interface AlertItemProps {
+    id: string;
+    variant: AlertVariants;
+    /**
+     * Solid background color. When provided, the variant tokens are ignored and
+     * text/icon/border colors are auto-derived for contrast via `colorUtils`.
+     * Accepts a theme color key or any CSS color string.
+     */
+    color?: ColorsKeys | string;
+    title?: string;
+    description?: string;
+    cancelText: string;
+    submitText: string;
+    size: NotificationSizes;
+    withShadow?: boolean;
+    withBorder?: boolean;
+    /** Ignored when `color` is set — color fully drives all derived colors. */
+    inheritMainColor?: boolean;
+    animationDuration: number;
+    position: NotificationPositions;
+    onClose?: () => void;
+    onSubmit?: () => void;
+    onRemove: (id: string) => void;
+    styleOverrides?: AlertStyleOverrides;
+}
+export declare const AlertItem: FC<AlertItemProps>;

package/dist/components/NotificationComponents/Alert/alertObserver.d.ts

@@ -0,0 +1,18 @@
+import { DynamicAlertParams } from './types';
+export declare const alertObserver: {
+    subscribe: (key: string, fn: (data: DynamicAlertParams) => void) => void;
+    unsubscribe: (key: string) => void;
+    dispatch: (data: DynamicAlertParams) => void;
+};
+/**
+ * Imperatively triggers a new alert inside the mounted `<Alert>` component.
+ *
+ * The `<Alert>` component must be mounted somewhere in the tree (typically near
+ * the app root) to receive dispatched alerts.
+ *
+ * @example
+ * ```ts
+ * showAlert({ variant: AlertVariants.success, title: 'Saved!', description: 'Your changes have been saved.' });
+ * ```
+ */
+export declare const showAlert: (params: DynamicAlertParams) => void;

package/dist/components/NotificationComponents/Alert/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Alert';
+export { showAlert } from './alertObserver';
+export { AlertVariants } from './types';
+export type { AlertProps, AlertStyleOverrides, DynamicAlertParams, } from './types';

package/dist/components/NotificationComponents/Alert/styles.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '@emotion/react';
+import { MapIconsType } from '../../index';
+import { AlertVariants } from './types';
+export { containerStyles, itemSizeStyles, itemAnimationStyles, shadowStyles, borderStyles, iconColStyles, contentColStyles, expandedHeaderRowStyles, collapsedTitleStyles, actionsRowStyles, closeBtnStyles, } from '../styles';
+export interface VariantTokens {
+    /** Color of the status icon */
+    iconColor: string;
+    /** Accent color used for border and close icon when inheritMainColor is true */
+    accentColor: string;
+    /** Solid background color for the card */
+    tintBg: string;
+}
+export declare const getVariantTokens: (theme: Theme, variant: AlertVariants) => VariantTokens;
+export declare const variantIcons: Record<AlertVariants, keyof MapIconsType>;
+export declare const itemWrapperStyles: (background: string, hasDescription: boolean) => import("@emotion/react").SerializedStyles;
+export declare const titleTextStyles: (theme: Theme, textColor?: string) => import("@emotion/react").SerializedStyles;
+export declare const descriptionStyles: (theme: Theme, textColor?: string) => import("@emotion/react").SerializedStyles;
+export declare const actionBtnStyles: (theme: Theme, textColor?: string) => import("@emotion/react").SerializedStyles;

package/dist/components/NotificationComponents/Alert/types.d.ts

@@ -0,0 +1,80 @@
+import { CSSObject } from '@emotion/react';
+import { GlobalSharedProps, DynamicProps } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+export declare enum AlertVariants {
+    success = "success",
+    warning = "warning",
+    error = "error",
+    primary = "primary",
+    neutral = "neutral",
+    secondary = "secondary"
+}
+/**
+ * Per-slot style overrides for `<Alert>`.
+ *
+ * Because the alert cards are rendered inside a portal, a top-level `css` prop
+ * cannot reach the inner elements. Use this object instead to customize any
+ * part of the card without touching the global theme.
+ *
+ * CSS slots accept any `CSSObject` and are merged **after** the default styles,
+ * so they always win. The two `*Color` fields exist because `<Icon>` receives
+ * its fill via a prop rather than CSS inheritance.
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   styles={{
+ *     root: { background: '#1a1a2e', borderRadius: 4 },
+ *     title: { color: '#ffffff', fontSize: 15 },
+ *     description: { color: 'rgba(255,255,255,0.65)' },
+ *     actionButton: { color: '#a78bfa' },
+ *     iconColor: '#a78bfa',
+ *     closeIconColor: 'rgba(255,255,255,0.5)',
+ *   }}
+ * />
+ * ```
+ */
+export interface AlertStyleOverrides {
+    /** Card wrapper — background, border-radius, padding, box-shadow, border, etc. */
+    root?: CSSObject;
+    /** Status icon wrapper div */
+    icon?: CSSObject;
+    /** Fill color for the status icon (overrides the variant's default icon color) */
+    iconColor?: string;
+    /** Title element */
+    title?: CSSObject;
+    /** Description element */
+    description?: CSSObject;
+    /** Actions row wrapper */
+    actions?: CSSObject;
+    /** Cancel and submit action buttons */
+    actionButton?: CSSObject;
+    /** Close (×) button wrapper */
+    closeButton?: CSSObject;
+    /** Fill color for the close (×) icon (overrides theme default / inheritMainColor value) */
+    closeIconColor?: string;
+}
+export interface AlertProps extends GlobalSharedProps {
+    /**
+     * When set, overrides the variant's background with a solid color and
+     * auto-derives text, icon, and border colors for contrast.
+     * Accepts a theme color key (e.g. `'purple'`) or any CSS color string
+     * (e.g. `'#1e293b'`, `'rgba(30,41,59,1)'`).
+     * When provided, `inheritMainColor` is ignored.
+     */
+    color?: ColorsKeys | string;
+    /** When true, border and close icon use the variant accent color. Ignored when `color` is set. */
+    inheritMainColor?: boolean;
+    /** Per-slot style overrides. Applied after all default styles. */
+    styles?: AlertStyleOverrides;
+}
+export interface DynamicAlertParams extends DynamicProps {
+    variant: AlertVariants;
+    /**
+     * Solid background color for this specific alert.
+     * Auto-derives text, icon, and border colors for contrast.
+     * Accepts a theme color key or any CSS color string.
+     * When provided, `inheritMainColor` is ignored.
+     */
+    color?: ColorsKeys | string;
+}

package/dist/components/NotificationComponents/Notification/Notification.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NotificationProps } from './types';
+declare const Notification: FC<NotificationProps>;
+export default Notification;

package/dist/components/NotificationComponents/Notification/NotificationItem.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @internal
+ *
+ * Renders a single notification card inside the `<Notification>` portal container.
+ * Not part of the public API — consumers call `showNotification(params)` to trigger
+ * notifications and configure appearance via `<Notification>` component props.
+ *
+ * Layout:
+ * ```
+ * [icon]  Title                    date  [×]
+ *         Description text here.
+ *         Cancel   Submit
+ * ```
+ *
+ * The icon column accepts:
+ * - A named icon string → rendered via `<Icon>`
+ * - Any ReactNode (img, Avatar, etc.) → rendered as-is
+ * - Omitted → falls back to `"user"` icon
+ *
+ * Action buttons are opt-in: a button only renders when both its label text
+ * AND its callback are present (`cancelText + onClose`, `submitText + onSubmit`).
+ */
+import { FC, ReactNode } from 'react';
+import { NotificationPositions, NotificationSizes } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+import { NotificationStyleOverrides, NotificationVariants } from './types';
+export interface NotificationItemProps {
+    id: string;
+    variant: NotificationVariants;
+    /**
+     * Solid background color. When provided, variant token colors are ignored and
+     * text/icon/border colors are auto-derived for contrast.
+     */
+    color?: ColorsKeys | string;
+    /** Pre-formatted timestamp string (e.g. `"11 days ago"`). */
+    date?: string;
+    /**
+     * Icon for the left column.
+     * - `string` → rendered as a named `<Icon>`
+     * - `ReactNode` → rendered as-is
+     * - omitted → falls back to `"user"` icon
+     */
+    icon?: string | ReactNode;
+    title?: string;
+    description?: string;
+    cancelText: string;
+    submitText: string;
+    size: NotificationSizes;
+    withShadow?: boolean;
+    withBorder?: boolean;
+    animationDuration: number;
+    position: NotificationPositions;
+    /** `undefined` = no auto-dismiss */
+    timeout?: number;
+    onClose?: () => void;
+    onSubmit?: () => void;
+    onRemove: (id: string) => void;
+    styleOverrides?: NotificationStyleOverrides;
+}
+export declare const NotificationItem: FC<NotificationItemProps>;

package/dist/components/NotificationComponents/Notification/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Notification';
+export { showNotification } from './notificationObserver';
+export { NotificationVariants } from './types';
+export type { NotificationProps, NotificationStyleOverrides, DynamicNotificationParams, } from './types';

package/dist/components/NotificationComponents/Notification/notificationObserver.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Module-level singleton connecting imperative `showNotification()` calls to
+ * whichever `<Notification>` components are currently mounted in the document.
+ *
+ * Architecture:
+ *
+ *   showNotification(params)
+ *     └─▶ notificationObserver.dispatch(params)
+ *           └─▶ forEach subscriber (one per mounted <Notification>):
+ *                 subscriber(params)   ← registered in useEffect on mount
+ *                   └─▶ setNotifications(prev => [...prev, newItem])
+ *                         └─▶ React re-renders → NotificationItem appears in portal
+ *
+ * Multiple `<Notification>` instances can coexist (e.g. Storybook Docs view).
+ * Each subscribes under a unique `useId()` key so dispatches reach all of them.
+ */
+import { DynamicNotificationParams } from './types';
+export declare const notificationObserver: {
+    subscribe: (key: string, fn: (data: DynamicNotificationParams) => void) => void;
+    unsubscribe: (key: string) => void;
+    dispatch: (data: DynamicNotificationParams) => void;
+};
+export declare const showNotification: (params: DynamicNotificationParams) => void;

package/dist/components/NotificationComponents/Notification/styles.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '@emotion/react';
+export { containerStyles, itemSizeStyles, itemAnimationStyles, shadowStyles, borderStyles, actionsRowStyles, closeBtnStyles, collapsedTitleStyles, } from '../styles';
+import { NotificationVariants } from './types';
+export interface NotificationVariantTokens {
+    bg: string;
+    iconColor: string;
+    borderColor: string;
+    textColor: string;
+}
+export declare const getVariantTokens: (theme: Theme, variant: NotificationVariants) => NotificationVariantTokens;
+export declare const itemWrapperStyles: (background: string, hasDescription: boolean) => import("@emotion/react").SerializedStyles;
+export declare const iconColStyles: import("@emotion/react").SerializedStyles;
+export declare const contentColStyles: import("@emotion/react").SerializedStyles;
+export declare const headerRowStyles: import("@emotion/react").SerializedStyles;
+export declare const titleTextStyles: (textColor: string) => import("@emotion/react").SerializedStyles;
+export declare const dateTextStyles: (theme: Theme, textColor?: string) => import("@emotion/react").SerializedStyles;
+export declare const descriptionStyles: (textColor: string) => import("@emotion/react").SerializedStyles;
+export declare const actionBtnStyles: (textColor: string) => import("@emotion/react").SerializedStyles;

package/dist/components/NotificationComponents/Notification/types.d.ts

@@ -0,0 +1,119 @@
+import { CSSObject } from '@emotion/react';
+import { ReactNode } from 'react';
+import { DynamicProps, GlobalSharedProps } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+export declare enum NotificationVariants {
+    secondary = "secondary",
+    neutral = "neutral",
+    dark = "dark"
+}
+/**
+ * Per-slot style overrides for `<Notification>`.
+ *
+ * Cards render inside a portal, so a top-level `css` prop cannot reach inner
+ * elements. Use this object to customize any part of the card without touching
+ * the global theme.
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   styles={{
+ *     root:  { borderRadius: 4 },
+ *     title: { fontWeight: 700 },
+ *     date:  { color: '#9ca3af' },
+ *   }}
+ * />
+ * ```
+ */
+export interface NotificationStyleOverrides {
+    /** Card wrapper — background, border-radius, padding, box-shadow, border */
+    root?: CSSObject;
+    /** Icon column wrapper div */
+    icon?: CSSObject;
+    /** Fill color for a named icon (has no effect on custom ReactNode icons) */
+    iconColor?: string;
+    /** Title element */
+    title?: CSSObject;
+    /** Date / timestamp element */
+    date?: CSSObject;
+    /** Description paragraph */
+    description?: CSSObject;
+    /** Actions row wrapper */
+    actions?: CSSObject;
+    /** Cancel and submit action buttons */
+    actionButton?: CSSObject;
+    /** Close (×) button wrapper */
+    closeButton?: CSSObject;
+    /** Fill color for the close (×) icon */
+    closeIconColor?: string;
+}
+/**
+ * Component-level props for the `<Notification>` portal container.
+ *
+ * Mount once near the app root; call `showNotification(...)` from anywhere.
+ */
+export interface NotificationProps extends GlobalSharedProps {
+    /**
+     * Default auto-dismiss duration in ms for all notifications in this stack.
+     * Defaults to `undefined` — notifications persist until the user closes them.
+     * Individual notifications can override this via `showNotification`.
+     */
+    timeout?: number;
+    /** Per-slot style overrides applied after all default styles. */
+    styles?: NotificationStyleOverrides;
+}
+/**
+ * Parameters for an individual notification triggered via `showNotification(params)`.
+ *
+ * Only `variant` is required. Everything else is optional.
+ *
+ * @example
+ * ```ts
+ * // Minimal
+ * showNotification({ variant: NotificationVariants.default, title: 'John Doe' });
+ *
+ * // With avatar and timestamp
+ * showNotification({
+ *   variant: NotificationVariants.neutral,
+ *   title: 'Jane Smith',
+ *   date: '5 minutes ago',
+ *   description: 'Left a comment on your post.',
+ *   icon: <img src={avatarUrl} alt="Jane" />,
+ * });
+ *
+ * // With custom color
+ * showNotification({
+ *   variant: NotificationVariants.default,
+ *   title: 'System',
+ *   color: 'purple',
+ *   date: 'Just now',
+ * });
+ * ```
+ */
+export interface DynamicNotificationParams extends DynamicProps {
+    variant: NotificationVariants;
+    /**
+     * Pre-formatted timestamp string displayed next to the title (e.g. `"11 days ago"`).
+     * The component renders it as-is — no internal date formatting is applied.
+     */
+    date?: string;
+    /**
+     * Icon for the left column. Accepts:
+     * - A named icon string (e.g. `"user"`, `"check-circle"`) — rendered via `<Icon>`
+     * - Any `ReactNode` (e.g. `<img>`, `<Avatar>`) — rendered as-is
+     * - Omitted → falls back to the `"user"` icon
+     */
+    icon?: string | ReactNode;
+    /**
+     * Solid background color. Auto-derives text, icon, and border colors for contrast.
+     * Accepts a theme color key (e.g. `'purple'`) or any CSS color string.
+     * When provided, the variant token colors are fully ignored.
+     */
+    color?: ColorsKeys | string;
+    /**
+     * Auto-dismiss duration in ms for this specific notification.
+     * Overrides the component-level `timeout`.
+     * Pass `undefined` explicitly to keep this notification persistent.
+     */
+    timeout?: number;
+}

package/dist/components/NotificationComponents/Toast/Toast.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToastProps } from './types';
+declare const Toast: FC<ToastProps>;
+export default Toast;

package/dist/components/NotificationComponents/Toast/ToastItem.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @internal
+ *
+ * Renders a single toast card inside the `<Toast>` portal container.
+ * Not part of the public API — consumers call `showToast(params)` to trigger
+ * toasts and configure appearance via `<Toast>` component props.
+ *
+ * Compared to `AlertItem`, `ToastItem` adds:
+ * - **Auto-dismiss timer** with hover-pause support
+ * - **Progress bar** (`withProgress`) that drains over the toast lifetime
+ * - **`color` prop** driving background, text, icon, and border colors
+ * - **`renderProp`** for fully custom inner content
+ */
+import { FC, JSX } from 'react';
+import { NotificationPositions, NotificationSizes } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+import { ToastVariants } from './types';
+export interface ToastItemProps {
+    id: string;
+    variant: ToastVariants;
+    /**
+     * Theme color key or arbitrary CSS color. When provided:
+     * - Background = resolved color
+     * - Text/close icon = auto-contrast (white on dark, greyDarker on light)
+     * - Status icon = contrast on dark bg, 35%-darkened shade on light bg
+     * - Border + progress bar = 35%-darkened shade
+     */
+    color?: ColorsKeys | string;
+    title?: string;
+    description?: string;
+    cancelText?: string;
+    submitText?: string;
+    size: NotificationSizes;
+    withShadow?: boolean;
+    withBorder?: boolean;
+    animationDuration: number;
+    position: NotificationPositions;
+    /** `undefined` = no auto-dismiss */
+    timeout?: number;
+    withProgress?: boolean;
+    /**
+     * Progress bar color. When provided, takes priority over the automatic
+     * darkened-`color` shade and the component-level `progressColor` default.
+     * Accepts a theme color key or any CSS color string.
+     */
+    progressColor?: string;
+    onClose?: () => void;
+    onSubmit?: () => void;
+    onRemove: (id: string) => void;
+    /** Fully replaces inner content. Outer card + progress bar still render. */
+    renderProp?: (close: () => void) => JSX.Element;
+}
+export declare const ToastItem: FC<ToastItemProps>;

package/dist/components/NotificationComponents/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Toast';
+export { showToast } from './toastObserver';
+export { ToastVariants } from './types';
+export type { ToastProps, DynamicToastParams } from './types';

package/dist/components/NotificationComponents/Toast/styles.d.ts

@@ -0,0 +1,26 @@
+import { Theme } from '@emotion/react';
+import { ToastVariants } from './types';
+import { ColorsKeys } from '../../../types/emotion';
+export { containerStyles, itemSizeStyles, itemAnimationStyles, shadowStyles, borderStyles, iconColStyles, contentColStyles, expandedHeaderRowStyles, collapsedTitleStyles, actionsRowStyles, closeBtnStyles, } from '../styles';
+export interface ToastVariantTokens {
+    /** Card background color */
+    bg: string;
+    /** Status icon fill */
+    iconColor: string;
+    /** Border color (used when `withBorder` is true and no custom `color` prop) */
+    borderColor: string;
+    /** Text color for title / description */
+    textColor: string;
+}
+export declare const getVariantTokens: (theme: Theme, variant: ToastVariants) => ToastVariantTokens;
+export declare const itemWrapperStyles: (background: string, hasDescription: boolean) => import("@emotion/react").SerializedStyles;
+export declare const titleTextStyles: (textColor: string) => import("@emotion/react").SerializedStyles;
+export declare const descriptionStyles: (textColor: string) => import("@emotion/react").SerializedStyles;
+export declare const actionBtnStyles: (textColor: string) => import("@emotion/react").SerializedStyles;
+export declare const progressBarContainerStyles: import("@emotion/react").SerializedStyles;
+/**
+ * Returns the base progress-bar styles including the drain animation.
+ * Pass `animation-play-state` separately via an inline `style` prop so the
+ * animation can be paused/resumed without resetting.
+ */
+export declare const progressBarStyles: (theme: Theme, timeout: number, color: ColorsKeys) => import("@emotion/react").SerializedStyles;

package/dist/components/NotificationComponents/Toast/toastObserver.d.ts

@@ -0,0 +1,30 @@
+import { DynamicToastParams } from './types';
+export declare const toastObserver: {
+    subscribe: (key: string, fn: (data: DynamicToastParams) => void) => void;
+    unsubscribe: (key: string) => void;
+    dispatch: (data: DynamicToastParams) => void;
+};
+/**
+ * Imperatively triggers a new toast inside every mounted `<Toast>` component.
+ *
+ * The `<Toast>` component must be mounted somewhere in the tree (typically near
+ * the app root) for dispatched toasts to be displayed.
+ *
+ * @example
+ * ```ts
+ * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
+ *
+ * // Simple
+ * showToast({ variant: ToastVariants.default, title: 'File saved' });
+ *
+ * // With custom color + progress
+ * showToast({ variant: ToastVariants.default, title: 'Uploading…', color: 'blue', withProgress: true });
+ *
+ * // Fully custom content (outer card + progress bar still render)
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   renderProp: (close) => <MyCard onDismiss={close} />,
+ * });
+ * ```
+ */
+export declare const showToast: (params: DynamicToastParams) => void;