Merge branch 'feat/new-prop-variant-to-snackbar' into break/2.0.0-venus-version

Author: hectoruch

packages/components/package.json

@@ -163,7 +163,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5"
+    "@floating-ui/dom": "^1.7.6"
   },
   "devDependencies": {
     "@kubit-ui-web/design-system": "workspace:*",
@@ -184,7 +184,7 @@
     "eslint": "^10.0.2",
     "eslint-config-kubit": "2.0.2",
     "glob": "^13.0.6",
-    "html-validate": "^10.9.0",
+    "html-validate": "^10.11.0",
     "jsdom": "^28.1.0",
     "prettier": "^3.8.1",
     "react": "^19.2.4",

packages/components/src/components/snackbar/snackbar.tsx

@@ -31,12 +31,20 @@ import { SnackbarStandAlone } from './snackbarStandAlone';
  * ```
  */
 const SnackbarComponent = (
-  { additionalClasses, closeTimeout, open = false, ...props }: ISnackbar,
+  {
+    additionalClasses,
+    additionalVariantClasses,
+    closeTimeout,
+    open = false,
+    variant,
+    ...props
+  }: ISnackbar,
   ref: ForwardedRef<HTMLDivElement> | undefined | null,
 ): JSX.Element => {
-  const cssClasses = useClassName({
+  const cssVariantClasses = useClassName({
     additionalClassNames: additionalClasses,
     component: 'SNACKBAR',
+    variant: variant,
   });
 
   const innerRef = useRef<HTMLDivElement>(null);
@@ -53,7 +61,7 @@ const SnackbarComponent = (
     <SnackbarStandAlone
       {...props}
       ref={innerRef}
-      cssClasses={cssClasses}
+      cssVariantClasses={cssVariantClasses}
       open={open}
       onBlur={handleBlur}
       onFocus={handleFocus}

packages/components/src/components/snackbar/snackbarStandAlone.tsx

@@ -25,7 +25,7 @@ import { Popover } from '../popover/popover';
 const SnackbarStandAloneComponent = (
   {
     children,
-    cssClasses,
+    cssVariantClasses,
     onClose,
     open,
     popover,
@@ -44,7 +44,7 @@ const SnackbarStandAloneComponent = (
     >
       <div
         ref={ref}
-        className={classNames(cssClasses?.container)}
+        className={classNames(cssVariantClasses?.container)}
         data-testid="snackbar"
         {...props}
       >

packages/components/src/components/snackbar/types/snackbar.ts

@@ -14,7 +14,7 @@ export type SnackbarV2CssClasses = ComponentSelected<
 >;
 
 export interface ISnackbarStandAlone extends DataAttributes, AriaAttributes {
-  cssClasses?: SnackbarV2CssClasses;
+  cssVariantClasses?: SnackbarV2CssClasses;
   popover?: SnackbarPopover;
   open?: boolean;
   children?: React.ReactNode;
@@ -25,10 +25,16 @@ export interface ISnackbarStandAlone extends DataAttributes, AriaAttributes {
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
-export interface ISnackbar extends Omit<
+export interface ISnackbar<
+  Variant = undefined extends string | unknown
+    ? string | undefined
+    : string | unknown,
+> extends Omit<
   ISnackbarStandAlone,
-  'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'
+  'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur' | 'cssVariantClasses'
 > {
+  variant?: Variant;
+  additionalVariantClasses?: Partial<SnackbarV2CssClasses>;
   additionalClasses?: SnackbarV2CssClasses;
   closeTimeout?: number;
 }

packages/components/src/components/snackbar/types/snackbarTheme.ts

@@ -4,4 +4,9 @@ export interface SnackbarStyleProps extends CssLibPropsType {
   _container?: CssLibPropsType;
 }
 
-export type SnackBarStyles = SnackbarStyleProps;
+export type SnackbarVariantStyles<Variant extends string> = {
+  [key in Variant]: SnackbarStyleProps;
+};
+
+export type SnackBarStyles<Variant extends string = string> =
+  SnackbarStyleProps & SnackbarVariantStyles<Variant>;

packages/design-system/package.json

@@ -35,7 +35,7 @@
       "url": "https://github.com/kubit-ui/kubit-react-components/graphs/contributors"
     }
   ],
-  "packageManager": "pnpm@10.30.2",
+  "packageManager": "pnpm@10.30.3",
   "keywords": [
     "design-system",
     "css-in-js",
@@ -132,13 +132,13 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^25.3.1",
+    "@types/node": "^25.3.3",
     "bernova": "1.6.0",
     "cssnano": "^7.1.2",
     "eslint": "^10.0.2",
     "eslint-config-kubit": "2.0.2",
     "glob": "^13.0.6",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.1",

packages/storybook/package.json

@@ -28,23 +28,23 @@
   "devDependencies": {
     "@figma/code-connect": "^1.4.1",
     "@rsbuild/core": "^1.7.3",
-    "@storybook/addon-a11y": "^10.2.13",
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/addon-links": "^10.2.13",
-    "@storybook/react": "^10.2.13",
+    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-links": "^10.2.15",
+    "@storybook/react": "^10.2.15",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^25.3.2",
+    "@types/node": "^25.3.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "eslint": "^10.0.2",
     "eslint-config-kubit": "2.0.2",
-    "eslint-plugin-storybook": "10.2.13",
-    "html-validate": "^10.9.0",
+    "eslint-plugin-storybook": "10.2.15",
+    "html-validate": "^10.11.0",
     "prettier": "^3.8.1",
     "prismjs": "^1.30.0",
-    "storybook": "^10.2.13",
+    "storybook": "^10.2.15",
     "storybook-addon-deep-controls": "^0.10.0",
-    "storybook-addon-pseudo-states": "^10.2.13",
+    "storybook-addon-pseudo-states": "^10.2.15",
     "storybook-addon-rslib": "^3.3.0",
     "storybook-react-rsbuild": "^3.3.0",
     "typescript": "^5.9.3",