@ssa-ui-kit/core 2.33.0 → 3.1.0

package/dist/types/emotion.d.ts

@@ -3,6 +3,7 @@ type MakeColors<T extends Array<string>> = {
     [K in T[number]]?: RGBString;
 };
 type Colors = MakeColors<[
+    'black',
     'black25',
     'black45',
     'white',
@@ -130,8 +131,72 @@ type Colors = MakeColors<[
 ]>;
 export type ColorsKeys = keyof Colors;
 type MediaQueryString = `@media${string}`;
+/**
+ * Palette color token for a single semantic color.
+ *
+ * Used by Button (and potentially other components) to drive background colors
+ * across interactive states:
+ * - `main`  — default/resting background
+ * - `dark`  — hover and active (pressed) background
+ * - `light` — focus background (keyboard navigation highlight)
+ *
+ * All three values can be `transparent` (used by the `tertiary` variant).
+ */
+export interface PaletteColor {
+    /** Default/resting background color */
+    main: RGBString | 'transparent';
+    /** Focus state background — lighter, softer highlight */
+    light: RGBString | 'transparent';
+    /** Hover and active state background — darker, stronger emphasis */
+    dark: RGBString | 'transparent';
+}
+/**
+ * Semantic color palette for the design system.
+ *
+ * Each entry maps to a Button variant of the same name and controls its
+ * background color across interactive states via `PaletteColor` (main / dark / light).
+ *
+ * Override individual entries in a custom theme to restyle Button variants
+ * without affecting other components that use `theme.colors`.
+ *
+ * @example
+ * ```ts
+ * const customTheme: Theme = {
+ *   ...mainTheme,
+ *   palette: {
+ *     ...mainTheme.palette,
+ *     primary: {
+ *       main: 'rgb(0, 102, 255)',
+ *       dark: 'rgb(0, 51, 204)',
+ *       light: 'rgb(51, 133, 255)',
+ *     },
+ *   },
+ * };
+ * ```
+ */
+export interface Palette {
+    /** Blue brand color — high-emphasis primary actions. White text. */
+    primary: PaletteColor;
+    /** Grey neutral color — medium-emphasis secondary actions. Dark text. */
+    secondary: PaletteColor;
+    /** Red — destructive or error actions. White text. */
+    error: PaletteColor;
+    /** Orange — caution or warning actions. White text. */
+    warning: PaletteColor;
+    /** Green — success or confirmation actions. White text. */
+    success: PaletteColor;
+    /** All-transparent — low-emphasis ghost button. Dark text. Focus shown via outline only.
+     * Legacy: we keep it in the palette for compatibility but do not recommend using it;
+     * prefer component-specific options (e.g. transparent/ghost props) where available. */
+    tertiary: PaletteColor;
+}
 export interface Theme {
     colors: Colors;
+    /**
+     * Semantic color palette used by Button variants.
+     * Override individual entries to restyle buttons without touching global theme colors.
+     */
+    palette: Palette;
     mediaQueries: {
         xs: MediaQueryString;
         sm: MediaQueryString;

package/dist/utils/react19HocCompat.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * React 19 compatibility helper for Higher-Order Components (HOCs).
+ *
+ * React 19 has stricter requirements for component identification.
+ * This utility ensures HOCs properly set displayName for better debugging
+ * and React DevTools integration.
+ *
+ * @param hocName - The name of the HOC (e.g., 'WithPagination', 'WithLayout')
+ * @param Component - The component being wrapped
+ * @param WrappedComponent - The wrapper component function
+ * @returns The wrapper component with proper displayName set
+ */
+export declare function setHocDisplayName<T extends React.ComponentType<any>>(hocName: string, Component: React.ComponentType<any>, WrappedComponent: T): T;

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "2.33.0",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "private": false,
   "sideEffects": false,
   "author": "SSA Group",
@@ -23,33 +31,34 @@
   ],
   "dependencies": {
     "@floating-ui/react": "0.27.4",
-    "@rc-component/color-picker": "^3.0.1",
-    "@react-input/mask": "^2.0.4",
-    "@react-input/number-format": "^2.0.3",
-    "dotenv": "^16.0.3",
-    "loose-envify": "^1.4.0",
-    "luxon": "^3.5.0",
+    "@rc-component/color-picker": "3.0.1",
+    "@react-input/mask": "2.0.4",
+    "@react-input/number-format": "2.0.3",
+    "dotenv": "16.0.3",
+    "loose-envify": "1.4.0",
+    "luxon": "3.5.0",
     "plotly.js": "3.0.0",
     "react-plotly.js": "2.6.0",
-    "@ssa-ui-kit/hooks": "^2.33.0",
-    "@ssa-ui-kit/utils": "^2.33.0"
+    "@ssa-ui-kit/hooks": "^3.1.0",
+    "@ssa-ui-kit/utils": "^3.1.0"
   },
   "devDependencies": {
-    "@emotion/css": "^11.13.5",
-    "@emotion/jest": "^11.13.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@nivo/radar": "^0.88.0",
-    "@nivo/core": "^0.88.0",
-    "@nivo/line": "^0.88.0",
-    "@nivo/pie": "^0.88.0",
-    "@nivo/treemap": "^0.88.0",
-    "@playwright/test": "^1.48.0",
-    "@rjsf/core": "^5.24.8",
-    "@rjsf/utils": "^5.24.8",
-    "@rjsf/validator-ajv8": "^5.24.8",
-    "@types/luxon": "^3.4.2",
-    "@types/react-plotly.js": "2.6.3"
+    "@emotion/css": "11.13.5",
+    "@emotion/jest": "11.14.2",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@nivo/radar": "0.99.0",
+    "@nivo/core": "0.99.0",
+    "@nivo/line": "0.99.0",
+    "@nivo/pie": "0.99.0",
+    "@nivo/treemap": "0.99.0",
+    "@playwright/test": "1.57.0",
+    "@rjsf/core": "5.24.8",
+    "@rjsf/utils": "5.24.8",
+    "@rjsf/validator-ajv8": "5.24.8",
+    "@types/luxon": "3.4.2",
+    "@types/react-plotly.js": "2.6.3",
+    "@types/sass": "1.45.0"
   },
   "browserslist": [
     ">0.1%",
@@ -60,15 +69,15 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@nivo/radar": "^0.88.0",
-    "@nivo/core": "^0.88.0",
-    "@nivo/line": "^0.88.0",
-    "@nivo/pie": "^0.88.0",
-    "@nivo/treemap": "^0.88.0",
+    "@nivo/radar": "^0.99.0",
+    "@nivo/core": "^0.99.0",
+    "@nivo/line": "^0.99.0",
+    "@nivo/pie": "^0.99.0",
+    "@nivo/treemap": "^0.99.0",
     "@rjsf/core": "^5.0.0",
     "@rjsf/utils": "^5.0.0",
-    "react": "18.x",
-    "react-dom": "18.x",
+    "react": "19.x",
+    "react-dom": "19.x",
     "react-hook-form": "^7.46.1",
     "react-router-dom": "6.x || 7.x"
   },
@@ -81,8 +90,8 @@
     "test": "jest -i --no-cache",
     "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
     "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
-    "sb:dev": "storybook dev -p 6006",
-    "sb:build": "storybook build",
+    "sb:dev": "env storybook dev -p 6006",
+    "sb:build": "env storybook build",
     "test:e2e": "pnpm exec playwright test --project=chromium",
     "test:e2e:ui": "pnpm exec playwright test --project=chromium --ui",
     "test:e2e:debug": "pnpm exec playwright test --project=chromium --debug",

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

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