@ssa-ui-kit/core 3.8.0 → 3.9.0

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

@@ -0,0 +1,102 @@
+import { JSX } from 'react';
+import { GlobalSharedProps, DynamicProps } from '../types';
+import { ColorsKeys } from '../../../types/emotion';
+export declare enum ToastVariants {
+    secondary = "secondary",
+    neutral = "neutral",
+    dark = "dark"
+}
+/**
+ * Component-level props for the `<Toast>` portal container.
+ *
+ * Mount once near the app root; call `showToast(...)` from anywhere.
+ */
+export interface ToastProps extends GlobalSharedProps {
+    /**
+     * Show an animated progress bar that drains over the toast's lifetime.
+     * Has no effect when `timeout` is `undefined`.
+     * @default false
+     */
+    withProgress?: boolean;
+    /**
+     * Default auto-dismiss duration in ms for all toasts in this stack.
+     * Pass `undefined` to disable auto-dismiss entirely.
+     * Individual toasts can override this via `showToast`.
+     * @default 4000
+     */
+    timeout?: number;
+    /**
+     * Default color of the progress bar for all toasts in this stack.
+     * Accepts a theme color key (`ColorsKeys`) or any valid CSS color string.
+     * Individual toasts can override this via `showToast({ progressColor })`.
+     * When a toast uses the `color` prop the progress bar automatically uses
+     * the darkened shade of that color instead of this default.
+     * @default theme `blueNotification`
+     */
+    progressColor?: ColorsKeys | string;
+}
+/**
+ * Parameters for an individual toast triggered via `showToast(params)`.
+ *
+ * Only `variant` is required. Everything else is optional.
+ *
+ * @example
+ * ```ts
+ * // Minimal
+ * showToast({ variant: ToastVariants.default, title: 'Saved!' });
+ *
+ * // With color, custom timeout, and progress bar
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   title: 'Uploading…',
+ *   color: 'purple',
+ *   timeout: 8000,
+ *   withProgress: true,
+ * });
+ *
+ * // Fully custom content
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   renderProp: (close) => <MyCustomCard onDismiss={close} />,
+ * });
+ * ```
+ */
+export interface DynamicToastParams extends DynamicProps {
+    variant: ToastVariants;
+    /**
+     * Theme color key (e.g. `'blue'`, `'green'`) or any valid CSS color string.
+     * When provided:
+     * - Background = resolved color value
+     * - Text = auto-contrast (white on dark, `greyDarker` on light)
+     * - Icon = same as text on dark bg, or a 35%-darkened shade on light bg
+     * - Border (when `withBorder`) = 35%-darkened shade
+     * - Progress bar = 35%-darkened shade
+     */
+    color?: ColorsKeys | string;
+    /**
+     * Fully replaces the inner content of the toast card.
+     * The outer wrapper (background, shadow, border, rounded corners) and the
+     * progress bar still render. Receives a `close` callback to allow the custom
+     * content to dismiss the toast programmatically.
+     */
+    renderProp?: (close: () => void) => JSX.Element;
+    /**
+     * Show progress bar for this specific toast.
+     * Overrides the component-level `withProgress`.
+     * Has no effect when the effective `timeout` is `undefined`.
+     */
+    withProgress?: boolean;
+    /**
+     * Auto-dismiss duration in ms for this specific toast.
+     * Overrides the component-level `timeout`.
+     * Pass `undefined` explicitly to disable auto-dismiss for this toast only.
+     */
+    timeout?: number;
+    /**
+     * Color of the progress bar for this specific toast.
+     * Overrides both the component-level `progressColor` default and the
+     * automatic darkened-`color` shade.
+     * Accepts a theme color key (`ColorsKeys`) or any valid CSS color string.
+     */
+    progressColor?: ColorsKeys | string;
+}

package/dist/components/NotificationComponents/hooks/useAutoDismiss.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Manages an auto-dismiss timer with hover-pause support.
+ *
+ * When `timeout` is `undefined` no timer is set and the item stays visible
+ * until the consumer removes it manually.
+ *
+ * When the user hovers over the card the timer pauses and resumes from where
+ * it left off when they move away — `remainingRef` tracks the elapsed time so
+ * the full `timeout` is never restarted from scratch after a hover.
+ *
+ * @param timeout   Auto-dismiss duration in ms. `undefined` = no auto-dismiss.
+ * @param onDismiss Called once when the timer fires naturally (not on manual close).
+ *
+ * @returns
+ *   - `isPaused`        — whether the timer is currently paused (hover active).
+ *                         `ToastItem` uses this to pause the CSS progress bar animation.
+ *   - `handleMouseEnter` — attach to the card's `onMouseEnter`.
+ *   - `handleMouseLeave` — attach to the card's `onMouseLeave`.
+ *
+ * @example
+ * ```tsx
+ * const { isPaused, handleMouseEnter, handleMouseLeave } = useAutoDismiss(
+ *   timeout,
+ *   () => { onRemove(id); onClose?.(); },
+ * );
+ * ```
+ */
+export declare const useAutoDismiss: (timeout: number | undefined, onDismiss: () => void) => {
+    isPaused: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};

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

@@ -0,0 +1,8 @@
+export { default as Alert, showAlert, AlertVariants } from './Alert';
+export type { AlertProps, AlertStyleOverrides, DynamicAlertParams, } from './Alert';
+export { default as Toast, showToast, ToastVariants } from './Toast';
+export type { ToastProps, DynamicToastParams } from './Toast';
+export { default as Notification, showNotification, NotificationVariants, } from './Notification';
+export type { NotificationProps, NotificationStyleOverrides, DynamicNotificationParams, } from './Notification';
+export { NotificationPositions, NotificationSizes } from './types';
+export type { SharedProps as NotificationSharedProps, DynamicProps as NotificationDynamicProps, GlobalSharedProps as NotificationGlobalSharedProps, } from './types';

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

@@ -0,0 +1,22 @@
+/**
+ * Shared structural styles for notification components (Alert, Toast, …).
+ *
+ * Everything here is purely layout / animation with no semantic color
+ * meaning — safe to import from any notification component.
+ *
+ * Component-specific styles (variant tokens, item wrapper, text colors)
+ * live in each component's own `styles.ts`.
+ */
+import { SerializedStyles, Theme } from '@emotion/react';
+import { NotificationPositions, NotificationSizes } from './types';
+export declare const containerStyles: (position: NotificationPositions) => SerializedStyles;
+export declare const itemSizeStyles: Record<NotificationSizes, SerializedStyles>;
+export declare const itemAnimationStyles: (position: NotificationPositions, duration: number) => SerializedStyles;
+export declare const shadowStyles: (theme: Theme) => SerializedStyles;
+export declare const borderStyles: (borderColor: string) => SerializedStyles;
+export declare const iconColStyles: SerializedStyles;
+export declare const contentColStyles: SerializedStyles;
+export declare const expandedHeaderRowStyles: SerializedStyles;
+export declare const collapsedTitleStyles: SerializedStyles;
+export declare const actionsRowStyles: SerializedStyles;
+export declare const closeBtnStyles: SerializedStyles;

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

@@ -0,0 +1,38 @@
+export declare enum NotificationPositions {
+    centerTop = "center-top",
+    centerBottom = "center-bottom",
+    leftTop = "left-top",
+    leftBottom = "left-bottom",
+    rightTop = "right-top",
+    rightBottom = "right-bottom"
+}
+export declare enum NotificationSizes {
+    small = "small",
+    large = "large"
+}
+export interface SharedProps {
+    size?: NotificationSizes;
+    cancelText?: string;
+    submitText?: string;
+}
+export interface DynamicProps extends SharedProps {
+    title?: string;
+    description?: string;
+    onClose?: () => void;
+    onSubmit?: () => void;
+}
+export interface GlobalSharedProps extends SharedProps {
+    animationDuration?: number;
+    withShadow?: boolean;
+    withBorder?: boolean;
+    containerSelector?: string;
+    position?: NotificationPositions;
+    /**
+     * Maximum number of notifications visible at once.
+     * When a new notification arrives and the stack is already at the limit,
+     * the oldest one is removed to make room — top positions drop from the
+     * bottom of the stack, bottom positions drop from the top.
+     * No limit when omitted.
+     */
+    maxAmount?: number;
+}

package/dist/components/index.d.ts

@@ -139,6 +139,7 @@ export { default as TooltipTrigger } from './TooltipTrigger';
 export * from './Popover';
 export * from './NotificationCard';
 export * from './NotificationMenu';
+export * from './NotificationComponents';
 export * from './AccordionGroup';
 export * from './AddNewAccountCard';
 export * from './PersonInfo';