@ssa-ui-kit/core 3.9.0 → 3.10.5

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

@@ -1,7 +1,7 @@
 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 { containerStyles, itemSizeStyles, itemAnimationStyles, shadowStyles, borderStyles, iconColStyles, contentColStyles, expandedHeaderRowStyles, collapsedTitleStyles, actionsRowStyles, closeBtnStyles, semanticVariantIcons, } from '../styles';
 export interface VariantTokens {
     /** Color of the status icon */
     iconColor: string;

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

@@ -1,4 +1,5 @@
 import { Theme } from '@emotion/react';
+import type { MapIconsType } from '../../index';
 import { ToastVariants } from './types';
 import { ColorsKeys } from '../../../types/emotion';
 export { containerStyles, itemSizeStyles, itemAnimationStyles, shadowStyles, borderStyles, iconColStyles, contentColStyles, expandedHeaderRowStyles, collapsedTitleStyles, actionsRowStyles, closeBtnStyles, } from '../styles';
@@ -11,8 +12,16 @@ export interface ToastVariantTokens {
     borderColor: string;
     /** Text color for title / description */
     textColor: string;
+    /**
+     * Progress bar color for this variant.
+     * Semantic variants (success, warning, error, primary) use their accent color
+     * to keep the bar visually consistent with the icon. Surface variants fall
+     * back to the theme's `blueNotification`.
+     */
+    progressColor: string;
 }
 export declare const getVariantTokens: (theme: Theme, variant: ToastVariants) => ToastVariantTokens;
+export declare const variantIcons: Record<ToastVariants, keyof MapIconsType>;
 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;

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

@@ -15,14 +15,14 @@ export declare const toastObserver: {
  * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
  *
  * // Simple
- * showToast({ variant: ToastVariants.default, title: 'File saved' });
+ * showToast({ variant: ToastVariants.secondary, title: 'File saved' });
  *
- * // With custom color + progress
- * showToast({ variant: ToastVariants.default, title: 'Uploading…', color: 'blue', withProgress: true });
+ * // Semantic variant with progress bar
+ * showToast({ variant: ToastVariants.success, title: 'Uploading…', withProgress: true });
  *
  * // Fully custom content (outer card + progress bar still render)
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.secondary,
  *   renderProp: (close) => <MyCard onDismiss={close} />,
  * });
  * ```

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

@@ -2,6 +2,10 @@ import { JSX } from 'react';
 import { GlobalSharedProps, DynamicProps } from '../types';
 import { ColorsKeys } from '../../../types/emotion';
 export declare enum ToastVariants {
+    success = "success",
+    warning = "warning",
+    error = "error",
+    primary = "primary",
     secondary = "secondary",
     neutral = "neutral",
     dark = "dark"
@@ -42,21 +46,28 @@ export interface ToastProps extends GlobalSharedProps {
  *
  * @example
  * ```ts
- * // Minimal
- * showToast({ variant: ToastVariants.default, title: 'Saved!' });
+ * // Minimal — surface variant
+ * showToast({ variant: ToastVariants.secondary, title: 'Saved!' });
  *
- * // With color, custom timeout, and progress bar
+ * // Semantic variant with progress bar
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.success,
  *   title: 'Uploading…',
- *   color: 'purple',
  *   timeout: 8000,
  *   withProgress: true,
  * });
  *
+ * // With custom color override
+ * showToast({
+ *   variant: ToastVariants.secondary,
+ *   title: 'Deploying…',
+ *   color: 'purple',
+ *   withProgress: true,
+ * });
+ *
  * // Fully custom content
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.secondary,
  *   renderProp: (close) => <MyCustomCard onDismiss={close} />,
  * });
  * ```

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

@@ -8,6 +8,7 @@
  * live in each component's own `styles.ts`.
  */
 import { SerializedStyles, Theme } from '@emotion/react';
+import type { MapIconsType } from '../index';
 import { NotificationPositions, NotificationSizes } from './types';
 export declare const containerStyles: (position: NotificationPositions) => SerializedStyles;
 export declare const itemSizeStyles: Record<NotificationSizes, SerializedStyles>;
@@ -20,3 +21,4 @@ export declare const expandedHeaderRowStyles: SerializedStyles;
 export declare const collapsedTitleStyles: SerializedStyles;
 export declare const actionsRowStyles: SerializedStyles;
 export declare const closeBtnStyles: SerializedStyles;
+export declare const semanticVariantIcons: Record<'success' | 'warning' | 'error' | 'primary', keyof MapIconsType>;

package/dist/index.js

@@ -51777,73 +51777,6 @@ let AlertVariants = /*#__PURE__*/function (AlertVariants) {
  * />
  * ```
  */
-;// ./src/components/NotificationComponents/Alert/styles.ts
-
-
-
-// ─── Re-export shared structural styles ──────────────────────────────────────
-// Consuming components (`AlertItem`, `Alert`) import `* as styles from './styles'`
-// so all shared exports need to be reachable from this file.
-
-
-
-// ─── Variant color tokens ────────────────────────────────────────────────────
-
-const getVariantTokens = (theme, variant) => {
-  const map = {
-    [AlertVariants.success]: {
-      iconColor: theme.palette.success.main,
-      accentColor: theme.palette.success.main,
-      tintBg: `color-mix(in srgb, ${theme.palette.success.light} 8%, white)`
-    },
-    [AlertVariants.warning]: {
-      iconColor: theme.palette.warning.main,
-      accentColor: theme.palette.warning.main,
-      tintBg: `color-mix(in srgb, ${theme.palette.warning.main} 8%, white)`
-    },
-    [AlertVariants.error]: {
-      iconColor: theme.palette.error.main,
-      accentColor: theme.palette.error.main,
-      tintBg: `color-mix(in srgb, ${theme.palette.error.light} 8%, white)`
-    },
-    [AlertVariants.primary]: {
-      iconColor: theme.palette.primary.main,
-      accentColor: theme.palette.primary.main,
-      tintBg: `color-mix(in srgb, ${theme.palette.primary.light} 8%, white)`
-    },
-    [AlertVariants.neutral]: {
-      iconColor: theme.colors.greyDarker60,
-      accentColor: theme.colors.grey,
-      tintBg: theme.colors.white
-    },
-    [AlertVariants.secondary]: {
-      iconColor: theme.colors.greyDarker60,
-      accentColor: theme.colors.grey,
-      tintBg: theme.palette.secondary.light
-    }
-  };
-  return map[variant];
-};
-const variantIcons = {
-  [AlertVariants.success]: 'check-circle',
-  [AlertVariants.warning]: 'attention-circle',
-  [AlertVariants.error]: 'attention-circle',
-  [AlertVariants.primary]: 'information',
-  [AlertVariants.neutral]: 'check-circle',
-  [AlertVariants.secondary]: 'check-circle'
-};
-
-// ─── Item wrapper ─────────────────────────────────────────────────────────────
-
-const itemWrapperStyles = (background, hasDescription) => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;border-radius:8px;padding:12px 16px;display:flex;gap:10px;box-sizing:border-box;background:", background, ";align-items:", hasDescription ? 'flex-start' : 'center', ";" + ( true ? "" : 0),  true ? "" : 0);
-
-// ─── Text & action styles ─────────────────────────────────────────────────────
-// Accept an optional `textColor` so the `color` prop can override theme defaults
-// without a separate styleOverrides entry.
-
-const titleTextStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:14px;font-weight:600;line-height:20px;color:", textColor ?? theme.colors.greyDarker, ";word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
-const descriptionStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:13px;font-weight:400;line-height:18px;color:", textColor ?? theme.colors.greyDarker80, ";margin:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
-const actionBtnStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("background:none;border:none;padding:0;cursor:pointer;font-size:13px;height:max-content;font-weight:500;line-height:18px;letter-spacing:0.2px;color:", textColor ?? theme.colors.greyDarker80, ";&:hover{color:", textColor ?? theme.colors.greyDarker, ";}" + ( true ? "" : 0),  true ? "" : 0);
 ;// ./src/components/NotificationComponents/styles.ts
 function NotificationComponents_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
@@ -51973,6 +51906,82 @@ const closeBtnStyles =  true ? {
   name: "13odyj7",
   styles: "background:none;border:none;padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;line-height:0;opacity:0.7;&:hover{opacity:1;}"
 } : 0;
+
+// ─── Semantic variant icons ───────────────────────────────────────────────────
+// Shared icon mapping for the four semantic variants used by both Alert and Toast.
+// Each component spreads this map and adds its own surface-level variants on top.
+
+const semanticVariantIcons = {
+  success: 'check-circle',
+  warning: 'attention-circle',
+  error: 'attention-circle',
+  primary: 'information'
+};
+;// ./src/components/NotificationComponents/Alert/styles.ts
+
+
+
+
+// ─── Re-export shared structural styles ──────────────────────────────────────
+// Consuming components (`AlertItem`, `Alert`) import `* as styles from './styles'`
+// so all shared exports need to be reachable from this file.
+
+
+
+// ─── Variant color tokens ────────────────────────────────────────────────────
+
+const getVariantTokens = (theme, variant) => {
+  const map = {
+    [AlertVariants.success]: {
+      iconColor: theme.palette.success.main,
+      accentColor: theme.palette.success.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.success.light} 8%, white)`
+    },
+    [AlertVariants.warning]: {
+      iconColor: theme.palette.warning.main,
+      accentColor: theme.palette.warning.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.warning.main} 8%, white)`
+    },
+    [AlertVariants.error]: {
+      iconColor: theme.palette.error.main,
+      accentColor: theme.palette.error.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.error.light} 8%, white)`
+    },
+    [AlertVariants.primary]: {
+      iconColor: theme.palette.primary.main,
+      accentColor: theme.palette.primary.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.primary.light} 8%, white)`
+    },
+    [AlertVariants.neutral]: {
+      iconColor: theme.colors.greyDarker60,
+      accentColor: theme.colors.grey,
+      tintBg: theme.colors.white
+    },
+    [AlertVariants.secondary]: {
+      iconColor: theme.colors.greyDarker60,
+      accentColor: theme.colors.grey,
+      tintBg: theme.palette.secondary.light
+    }
+  };
+  return map[variant];
+};
+const variantIcons = {
+  ...semanticVariantIcons,
+  [AlertVariants.neutral]: 'check-circle',
+  [AlertVariants.secondary]: 'check-circle'
+};
+
+// ─── Item wrapper ─────────────────────────────────────────────────────────────
+
+const itemWrapperStyles = (background, hasDescription) => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;border-radius:8px;padding:12px 16px;display:flex;gap:10px;box-sizing:border-box;background:", background, ";align-items:", hasDescription ? 'flex-start' : 'center', ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Text & action styles ─────────────────────────────────────────────────────
+// Accept an optional `textColor` so the `color` prop can override theme defaults
+// without a separate styleOverrides entry.
+
+const titleTextStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:14px;font-weight:600;line-height:20px;color:", textColor ?? theme.colors.greyDarker, ";word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const descriptionStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:13px;font-weight:400;line-height:18px;color:", textColor ?? theme.colors.greyDarker80, ";margin:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const actionBtnStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("background:none;border:none;padding:0;cursor:pointer;font-size:13px;height:max-content;font-weight:500;line-height:18px;letter-spacing:0.2px;color:", textColor ?? theme.colors.greyDarker80, ";&:hover{color:", textColor ?? theme.colors.greyDarker, ";}" + ( true ? "" : 0),  true ? "" : 0);
 ;// ./src/components/NotificationComponents/Alert/AlertItem.tsx
 
 
@@ -52293,14 +52302,14 @@ const toastObserver = createObserver();
  * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
  *
  * // Simple
- * showToast({ variant: ToastVariants.default, title: 'File saved' });
+ * showToast({ variant: ToastVariants.secondary, title: 'File saved' });
  *
- * // With custom color + progress
- * showToast({ variant: ToastVariants.default, title: 'Uploading…', color: 'blue', withProgress: true });
+ * // Semantic variant with progress bar
+ * showToast({ variant: ToastVariants.success, title: 'Uploading…', withProgress: true });
  *
  * // Fully custom content (outer card + progress bar still render)
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.secondary,
  *   renderProp: (close) => <MyCard onDismiss={close} />,
  * });
  * ```
@@ -52364,6 +52373,10 @@ const useAutoDismiss = (timeout, onDismiss) => {
 };
 ;// ./src/components/NotificationComponents/Toast/types.ts
 let ToastVariants = /*#__PURE__*/function (ToastVariants) {
+  ToastVariants["success"] = "success";
+  ToastVariants["warning"] = "warning";
+  ToastVariants["error"] = "error";
+  ToastVariants["primary"] = "primary";
   ToastVariants["secondary"] = "secondary";
   ToastVariants["neutral"] = "neutral";
   ToastVariants["dark"] = "dark";
@@ -52383,21 +52396,28 @@ let ToastVariants = /*#__PURE__*/function (ToastVariants) {
  *
  * @example
  * ```ts
- * // Minimal
- * showToast({ variant: ToastVariants.default, title: 'Saved!' });
+ * // Minimal — surface variant
+ * showToast({ variant: ToastVariants.secondary, title: 'Saved!' });
  *
- * // With color, custom timeout, and progress bar
+ * // Semantic variant with progress bar
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.success,
  *   title: 'Uploading…',
- *   color: 'purple',
  *   timeout: 8000,
  *   withProgress: true,
  * });
  *
+ * // With custom color override
+ * showToast({
+ *   variant: ToastVariants.secondary,
+ *   title: 'Deploying…',
+ *   color: 'purple',
+ *   withProgress: true,
+ * });
+ *
  * // Fully custom content
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.secondary,
  *   renderProp: (close) => <MyCustomCard onDismiss={close} />,
  * });
  * ```
@@ -52406,6 +52426,8 @@ let ToastVariants = /*#__PURE__*/function (ToastVariants) {
 function Toast_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
+
+
 // ─── Re-export shared structural styles ──────────────────────────────────────
 
 
@@ -52414,27 +52436,64 @@ function Toast_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 const styles_getVariantTokens = (theme, variant) => {
   const map = {
+    [ToastVariants.success]: {
+      bg: `color-mix(in srgb, ${theme.palette.success.light} 8%, white)`,
+      iconColor: theme.palette.success.main,
+      borderColor: theme.palette.success.main,
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.palette.success.main
+    },
+    [ToastVariants.warning]: {
+      bg: `color-mix(in srgb, ${theme.palette.warning.main} 8%, white)`,
+      iconColor: theme.palette.warning.main,
+      borderColor: theme.palette.warning.main,
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.palette.warning.main
+    },
+    [ToastVariants.error]: {
+      bg: `color-mix(in srgb, ${theme.palette.error.light} 8%, white)`,
+      iconColor: theme.palette.error.main,
+      borderColor: theme.palette.error.main,
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.palette.error.main
+    },
+    [ToastVariants.primary]: {
+      bg: `color-mix(in srgb, ${theme.palette.primary.light} 8%, white)`,
+      iconColor: theme.palette.primary.main,
+      borderColor: theme.palette.primary.main,
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.palette.primary.main
+    },
     [ToastVariants.secondary]: {
       bg: theme.palette.secondary.light,
       iconColor: theme.colors.greyDarker60,
       borderColor: theme.colors.greyFocused,
-      textColor: theme.colors.greyDarker
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.colors.blueNotification
     },
     [ToastVariants.neutral]: {
       bg: theme.colors.white,
       iconColor: theme.colors.greyDarker60,
       borderColor: theme.colors.greyOutline,
-      textColor: theme.colors.greyDarker
+      textColor: theme.colors.greyDarker,
+      progressColor: theme.colors.blueNotification
     },
     [ToastVariants.dark]: {
       bg: theme.colors.greyBackground,
       iconColor: theme.colors.white,
       borderColor: theme.colors.greyBackground,
-      textColor: theme.colors.white
+      textColor: theme.colors.white,
+      progressColor: theme.colors.blueNotification
     }
   };
   return map[variant];
 };
+const styles_variantIcons = {
+  ...semanticVariantIcons,
+  [ToastVariants.neutral]: 'check-circle',
+  [ToastVariants.secondary]: 'check-circle',
+  [ToastVariants.dark]: 'check-circle'
+};
 
 // ─── Toast item wrapper ───────────────────────────────────────────────────────
 // Unlike Alert (which layers a rgba tint over white via backgroundImage),
@@ -52535,8 +52594,10 @@ const ToastItem = ({
   const accentColor = resolvedColor ? dark ? theme.colors.white : darkenColor(resolvedColor) : tokens.iconColor;
   const borderColor = resolvedColor ? darkenColor(resolvedColor) : tokens.borderColor;
 
-  // Precedence: explicit progressColor prop → auto darkened `color` → blueNotification
-  const resolvedProgressColor = progressColor ?? (resolvedColor ? darkenColor(resolvedColor) : theme.colors.blueNotification);
+  // Precedence: explicit progressColor prop → auto darkened `color` → variant token
+  // Semantic variants (success/warning/error/primary) use their accent color so
+  // the bar matches the status icon; surface variants fall back to blueNotification.
+  const resolvedProgressColor = progressColor ?? (resolvedColor ? darkenColor(resolvedColor) : tokens.progressColor);
   const resolvedCloseIconColor = dark ? theme.colors.white : theme.colors.greyDarker60;
 
   // ─── Auto-dismiss with hover-pause ──────────────────────────────────────────
@@ -52576,7 +52637,7 @@ const ToastItem = ({
       children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
         css: iconColStyles,
         children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-          name: "check-circle",
+          name: styles_variantIcons[variant],
           color: accentColor,
           size: 24
         })
@@ -52678,12 +52739,11 @@ const ToastItem = ({
  * ```tsx
  * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
  *
- * showToast({ variant: ToastVariants.default, title: 'File saved!' });
+ * showToast({ variant: ToastVariants.success, title: 'File saved!' });
  *
  * showToast({
- *   variant: ToastVariants.default,
+ *   variant: ToastVariants.warning,
  *   title: 'Uploading…',
- *   color: 'blue',
  *   timeout: 8000,
  *   withProgress: true,
  * });