@leabankab/component-library 5.6.1

package/dist/theme/token-types.d.ts

@@ -0,0 +1,11 @@
+export type ColorToken = "base" | "subtle" | "muted" | "contrast" | "accent";
+export type BgColorToken = ColorToken;
+export type TextColorToken = ColorToken;
+export type BorderColorToken = ColorToken;
+export type BrandColorToken = ColorToken;
+export type StatusColorToken = "base" | "subtle";
+export type ColorPath = `bg.${BgColorToken}` | `text.${TextColorToken}` | `border.${BorderColorToken}` | `primary.${BrandColorToken}` | `secondary.${BrandColorToken}` | `status.error.${StatusColorToken}` | `status.warning.${StatusColorToken}` | `status.info.${StatusColorToken}` | `status.success.${StatusColorToken}`;
+/** Allowed values for MUI `Typography` `color` prop (semantic text tokens). */
+export type TypographyColorToken = `text.${TextColorToken}`;
+/** Common spacing scale factors (8px base via `theme.spacing` / `theme.space`). */
+export type SpacingFactor = 0 | 0.5 | 1 | 1.25 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8;

package/dist/theme/tokens/colors.d.ts

@@ -0,0 +1,95 @@
+export declare const colors: {
+    readonly purple: {
+        readonly 50: "#FAF7FB";
+        readonly 100: "#E2D8E4";
+        readonly 200: "#C5B1CA";
+        readonly 300: "#C29AC2";
+        readonly 400: "#9E6DA8";
+        readonly 500: "#855888";
+        readonly 600: "#70427B";
+        readonly 700: "#5A3463";
+        readonly 800: "#422349";
+        readonly 900: "#2E1834";
+        readonly 950: "#1A0E1E";
+    };
+    readonly teal: {
+        readonly 50: "#F0FCFA";
+        readonly 100: "#DAF6F1";
+        readonly 200: "#CEF3ED";
+        readonly 300: "#08C2A7";
+        readonly 400: "#46D1BD";
+        readonly 500: "#06A892";
+        readonly 600: "#058F7D";
+        readonly 700: "#047568";
+        readonly 800: "#035C53";
+        readonly 900: "#02433E";
+        readonly 950: "#012A28";
+    };
+    readonly blue: {
+        readonly 50: "#EFF6FF";
+        readonly 100: "#CBE5FD";
+        readonly 200: "#93CBFC";
+        readonly 300: "#4DA8F7";
+        readonly 400: "#057EF2";
+        readonly 500: "#0468C9";
+        readonly 600: "#0354A3";
+        readonly 700: "#02417D";
+        readonly 800: "#012E57";
+        readonly 900: "#011B31";
+        readonly 950: "#000E19";
+    };
+    readonly orange: {
+        readonly 50: "#FFF5F2";
+        readonly 100: "#FFDFD7";
+        readonly 200: "#FFC4B5";
+        readonly 300: "#FF9E87";
+        readonly 400: "#FE653E";
+        readonly 500: "#E54E28";
+        readonly 600: "#C43E1C";
+        readonly 700: "#A33218";
+        readonly 800: "#822814";
+        readonly 900: "#611E0F";
+        readonly 950: "#401408";
+    };
+    readonly red: {
+        readonly 50: "#FEF2F2";
+        readonly 100: "#FCDCDC";
+        readonly 200: "#F9BBBB";
+        readonly 300: "#F28888";
+        readonly 400: "#E85555";
+        readonly 500: "#D32F2F";
+        readonly 600: "#AD2121";
+        readonly 700: "#8A1919";
+        readonly 800: "#6F1313";
+        readonly 900: "#4D0E0E";
+        readonly 950: "#2E0808";
+    };
+    readonly beige: {
+        readonly 50: "#FAF7F5";
+        readonly 100: "#F0E9E5";
+        readonly 200: "#E0D4CD";
+        readonly 300: "#C9B8AD";
+        readonly 400: "#B09A8C";
+        readonly 500: "#977C6B";
+        readonly 600: "#7E6556";
+        readonly 700: "#654F42";
+        readonly 800: "#4C3A32";
+        readonly 900: "#332722";
+        readonly 950: "#1A1411";
+    };
+    readonly neutral: {
+        readonly 50: "#F7F7F6";
+        readonly 100: "#EBEBEB";
+        readonly 200: "#DBDBDB";
+        readonly 300: "#C4C4C4";
+        readonly 400: "#A2A2A2";
+        readonly 500: "#757575";
+        readonly 600: "#5E5E5E";
+        readonly 700: "#454545";
+        readonly 800: "#2E2E2E";
+        readonly 900: "#1A1A1A";
+        readonly 950: "#0F1010";
+    };
+    readonly white: "#FFFFFF";
+    readonly black: "#0F1010";
+};

package/dist/theme/tokens/font-sizes.d.ts

@@ -0,0 +1,12 @@
+export declare const fontSizes: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+    readonly lg: "1.25rem";
+    readonly xl: "1.5rem";
+    readonly "2xl": "2rem";
+    readonly "3xl": "2.5rem";
+    readonly "4xl": "3rem";
+    readonly "5xl": "3.5rem";
+    readonly "6xl": "4rem";
+};

package/dist/theme/tokens/font-weights.d.ts

@@ -0,0 +1,9 @@
+export declare const fontWeights: {
+    readonly thin: 200;
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly black: 800;
+};

package/dist/theme/tokens/index.d.ts

@@ -0,0 +1,9 @@
+export * from './colors';
+export * from './font-sizes';
+export * from './font-weights';
+export * from './palette';
+export * from './shadows';
+export * from './shape';
+export * from './spacing';
+export * from './transitions';
+export * from './typography';

package/dist/theme/tokens/palette.d.ts

@@ -0,0 +1,2 @@
+import { Palette } from '../types';
+export declare const palette: Palette;

package/dist/theme/tokens/shadows.d.ts

@@ -0,0 +1,9 @@
+export declare const shadows: {
+    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly sm: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10)";
+    readonly md: "0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10)";
+    readonly lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10)";
+    readonly xl: "0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10)";
+    readonly "2xl": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    readonly inner: "0px 2px 4px 0px rgba(0, 0, 0, 0.05) inset";
+};

package/dist/theme/tokens/shape.d.ts

@@ -0,0 +1,12 @@
+export declare const shape: {
+    readonly sm: 4;
+    readonly md: 5;
+    readonly lg: 6;
+    readonly xl: 8;
+    readonly "2xl": 10;
+    readonly "3xl": 12;
+    readonly "4xl": 16;
+    readonly "5xl": 32;
+    readonly huge: 64;
+    readonly full: 100;
+};

package/dist/theme/tokens/spacing.d.ts

@@ -0,0 +1 @@
+export declare const spacing: (factor: number) => string;

package/dist/theme/tokens/transitions.d.ts

@@ -0,0 +1,10 @@
+export declare const easings: {
+    readonly standard: "ease-in-out";
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+};
+export declare const durations: {
+    readonly fast: "0.15s";
+    readonly normal: "0.2s";
+    readonly emphasis: "0.3s";
+};
+export declare const transition: (properties: string[], duration?: string, easing?: string) => string;

package/dist/theme/tokens/typography.d.ts

@@ -0,0 +1,43 @@
+/**
+ *
+ * We are not following the MUI typography tokens because
+ * sometimes we need the size of an h1 but not the h1 component.
+ * Overriding it here at the root will give us more control over the typography.
+ *
+ */
+export declare const typography: {
+    fontFamily: string;
+    fontWeight: 400;
+    color: string;
+    "& strong": {
+        fontWeight: 500;
+    };
+    "& a": {
+        color: string;
+        textDecorationColor: string;
+        fontWeight: 400;
+    };
+    h1: undefined;
+    h2: undefined;
+    h3: undefined;
+    h4: undefined;
+    h5: undefined;
+    h6: undefined;
+    subtitle1: undefined;
+    subtitle2: undefined;
+    heading: {
+        fontFamily: string;
+        fontWeight: 500;
+        letterSpacing: string;
+    };
+    body1: {
+        fontSize: "1rem";
+        fontWeight: 400;
+    };
+    body2: {
+        fontSize: "0.875rem";
+        fontWeight: 400;
+    };
+    button: undefined;
+    caption: undefined;
+};

package/dist/theme/types.d.ts

@@ -0,0 +1,80 @@
+import { SxProps } from '@mui/material/styles';
+export type ColorScaleTokens = typeof import('./tokens/colors').colors;
+export type ColorScaleStep = keyof ColorScaleTokens["purple"];
+export type Palette = {
+    bg: {
+        base: string;
+        subtle: string;
+        muted: string;
+        contrast: string;
+        accent: string;
+    };
+    text: {
+        base: string;
+        subtle: string;
+        muted: string;
+        accent: string;
+        contrast: string;
+    };
+    border: {
+        base: string;
+        subtle: string;
+        strong: string;
+        accent: string;
+        contrast: string;
+    };
+    purple: {
+        base: string;
+        hover: string;
+        subtle: string;
+        contrast: string;
+    };
+    primary: {
+        main: string;
+        dark: string;
+        light: string;
+        contrastText: string;
+    };
+    teal: {
+        base: string;
+        hover: string;
+        subtle: string;
+        contrast: string;
+    };
+    secondary: {
+        main: string;
+        dark: string;
+        light: string;
+        contrastText: string;
+    };
+    status: {
+        error: {
+            base: string;
+            subtle: string;
+        };
+        warning: {
+            base: string;
+            subtle: string;
+        };
+        info: {
+            base: string;
+            subtle: string;
+        };
+        success: {
+            base: string;
+            subtle: string;
+        };
+    };
+};
+export type PaletteTokens = typeof import('./tokens/palette').palette;
+/** MUI `Theme` after this library's module augmentation (use with `useTheme`, `SxProps`, etc.). */
+export type LeaBankTheme = import('@mui/material/styles').Theme;
+/** Typed `SxProps` bound to the Lea Bank theme. */
+export type LeaSxProps = SxProps<LeaBankTheme>;
+export type FontSizeToken = keyof typeof import('./tokens/font-sizes').fontSizes;
+export type ShapeToken = keyof typeof import('./tokens/shape').shape;
+export type ShadowToken = keyof typeof import('./tokens/shadows').shadows;
+export type FontWeightToken = keyof typeof import('./tokens/font-weights').fontWeights;
+export type EasingToken = keyof typeof import('./tokens/transitions').easings;
+export type DurationToken = keyof typeof import('./tokens/transitions').durations;
+export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorToken, SpacingFactor, StatusColorToken, TextColorToken, TypographyColorToken, } from './token-types';

package/dist/theme/utils/focus-visible-styles.d.ts

@@ -0,0 +1,6 @@
+export declare const focusVisibleStyles: {
+    "&:focus-visible": {
+        outline: string;
+        outlineColor: string;
+    };
+};

package/dist/theme/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './focus-visible-styles';

package/dist/utils/downloadFile.d.ts

@@ -0,0 +1,4 @@
+export type DownloadableData = string | Blob | File | ArrayBuffer | Uint8Array;
+export type DownloadDataSource = DownloadableData | (() => DownloadableData | Promise<DownloadableData>);
+export declare function resolveDownloadData(data: DownloadDataSource): Promise<DownloadableData>;
+export declare function downloadFile(data: DownloadableData, fileName: string, mimeType?: string): void;

package/dist/utils/formatDecimal.d.ts

@@ -0,0 +1,16 @@
+export type FormatDecimals = {
+    value: number;
+    decimalPlaces?: number;
+};
+/**
+
+ * Formats a number to a fixed number of decimal places (default is 2)
+ * by using exponential notation
+ *
+ * ⚠️ Note: We avoid using `toFixed` for rounding because it can introduce rounding errors.
+ *
+ * @param value - The number to format.
+ * @param decimalPlaces - Number of decimal places to show (default: 2).
+ * @returns The number with fixed decimal places.
+ */
+export declare const fixDecimals: ({ value, decimalPlaces }: FormatDecimals) => number;

package/dist/utils/formatDecimalString.d.ts

@@ -0,0 +1,12 @@
+import { FormatDecimals } from './formatDecimal';
+/**
+ * Formats a number to a fixed number of decimal places (default is 2).
+ *
+ * Ensures that string representation of number always has the set number of decimals (even eg. .00)
+ *
+ * @param value - The number or string to format.
+ * @param decimalPlaces - Number of decimal places to show (default: 2).
+ * @returns A string representation of the number with fixed decimal places.
+ */
+export declare const fixDecimalsToString: ({ value, decimalPlaces, }: FormatDecimals) => string;
+export declare const formatDecimalString: ({ value, decimalPlaces, }: FormatDecimals) => string;

package/dist/utils/formatPercentage.d.ts

@@ -0,0 +1 @@
+export declare const formatPercentage: (value: number, decimalPlaces?: number) => string;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './downloadFile';
+export * from './formatDecimal';
+export * from './formatDecimalString';
+export * from './formatPercentage';
+export * from './parseExpirationDate';

package/dist/utils/parseExpirationDate.d.ts

@@ -0,0 +1,4 @@
+export declare function parseExpirationDate(expirationDate: string): {
+    month: string;
+    year: string;
+};

package/dist/validation/bank-account.d.ts

@@ -0,0 +1,29 @@
+import { Country } from '../hooks/country/countries';
+import { ValidationResult } from './types';
+/**
+ * Generic IBAN check: structure, country length and the ISO 7064 mod-97
+ * checksum.
+ */
+export declare function isValidIban(value: string, country?: Country): boolean;
+/**
+ * Norwegian kontonummer: 11 digits with a mod-11 control digit.
+ */
+export declare function isValidNorwegianAccount(value: string): boolean;
+/**
+ * Swedish clearing + account number. Bank-specific checksums vary, so this is a
+ * structural check: a 4-5 digit clearing number followed by a 6-10 digit
+ * account number.
+ */
+export declare function isValidSwedishAccount(value: string): boolean;
+/**
+ * Validates a bank account number for the given country.
+ *
+ * - **FI / ES** require a valid IBAN.
+ * - **NO** accepts a domestic kontonummer or a Norwegian IBAN.
+ * - **SE** accepts a domestic clearing + account number or a Swedish IBAN.
+ */
+export declare function validateBankAccount(country: Country, value: string): ValidationResult;
+/**
+ * Boolean convenience wrapper around {@link validateBankAccount}.
+ */
+export declare function isValidBankAccount(country: Country, value: string): boolean;

package/dist/validation/email.d.ts

@@ -0,0 +1,24 @@
+import { ValidationResult } from './types';
+/**
+ * Common consumer email domains across the Nordics and Spain, used to power the
+ * `@`-triggered autocomplete dropdown.
+ */
+export declare const COMMON_EMAIL_DOMAINS: readonly string[];
+/**
+ * Validates an email address and returns the lowercased value when valid.
+ */
+export declare function validateEmail(value: string): ValidationResult;
+/**
+ * Boolean convenience wrapper around {@link validateEmail}.
+ */
+export declare function isValidEmail(value: string): boolean;
+/**
+ * Given the current email input, returns a list of completed email suggestions
+ * based on common domains. Suggestions only appear once an `@` has been typed,
+ * and are filtered by whatever partial domain follows it.
+ *
+ * @example
+ * getEmailDomainSuggestions("alice@") // → ["alice@gmail.com", ...]
+ * getEmailDomainSuggestions("alice@gm") // → ["alice@gmail.com"]
+ */
+export declare function getEmailDomainSuggestions(value: string, domains?: readonly string[]): string[];

package/dist/validation/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './national-id';
+export * from './phone';
+export * from './bank-account';
+export * from './email';

package/dist/validation/national-id.d.ts

@@ -0,0 +1,30 @@
+import { Country } from '../hooks/country/countries';
+import { ValidationResult } from './types';
+/**
+ * Swedish personnummer. Accepts 10 or 12 digit forms (with or without
+ * separators) and validates the trailing Luhn check digit.
+ */
+export declare function isValidSwedishNationalId(value: string): boolean;
+/**
+ * Finnish henkilötunnus (HETU). Validates structure, date, century marker and
+ * the mod-31 check character.
+ */
+export declare function isValidFinnishNationalId(value: string): boolean;
+/**
+ * Norwegian fødselsnummer. 11 digits with two mod-11 control digits.
+ */
+export declare function isValidNorwegianNationalId(value: string): boolean;
+/**
+ * Spanish DNI / NIE. Validates the control letter (mod-23). NIE prefixes
+ * (X/Y/Z) are mapped to their numeric equivalents before the check.
+ */
+export declare function isValidSpanishNationalId(value: string): boolean;
+/**
+ * Validates a national identity number for the given country.
+ */
+export declare function isValidNationalId(country: Country, value: string): boolean;
+/**
+ * Validates a national identity number and returns the normalized (uppercased,
+ * separator-free) value when valid.
+ */
+export declare function validateNationalId(country: Country, value: string): ValidationResult;

package/dist/validation/phone.d.ts

@@ -0,0 +1,16 @@
+import { CountryCode } from 'libphonenumber-js';
+import { ValidationResult } from './types';
+export type { CountryCode };
+/**
+ * Validates a phone number for the given country, delegating to
+ * `libphonenumber-js` so every country's rules stay accurate and maintained.
+ *
+ * Accepts national format (with or without a leading trunk `0`) and
+ * international format (`+CC` / `00CC`). On success, `normalized` holds the
+ * canonical E.164 form (e.g. `+358401234567`).
+ */
+export declare function validatePhoneNumber(country: CountryCode, value: string): ValidationResult;
+/**
+ * Boolean convenience wrapper around {@link validatePhoneNumber}.
+ */
+export declare function isValidPhoneNumber(country: CountryCode, value: string): boolean;

package/dist/validation/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Result of a validation check. `normalized` holds the canonical form of the
+ * input (e.g. digits only, or E.164 phone) when the value is valid.
+ */
+export interface ValidationResult {
+    valid: boolean;
+    normalized?: string;
+}
+export declare const invalid: () => ValidationResult;
+export declare const valid: (normalized: string) => ValidationResult;

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@leabankab/component-library",
+  "version": "5.6.1",
+  "description": "@leabankab/component-library — Lea Bank's React component library built on MUI.",
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "UNLICENSED",
+  "author": "Lea Bank",
+  "main": "dist/component-library.umd.js",
+  "module": "dist/component-library.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/component-library.es.js",
+      "require": "./dist/component-library.umd.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@storybook/addon-a11y": "^10.5.5",
+    "libphonenumber-js": "^1.13.10",
+    "lucide-react": "^1.28.0",
+    "motion": "^12.43.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/system": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
+    "date-fns": "^4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.56.0"
+  },
+  "devDependencies": {
+    "@changesets/changelog-git": "^0.2.1",
+    "@changesets/cli": "^2.31.1",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^9.39.5",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/system": "^9.2.0",
+    "@mui/x-date-pickers": "^9.10.1",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-links": "^10.5.5",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-vitest": "^10.5.5",
+    "@storybook/react": "^10.5.5",
+    "@storybook/react-vite": "^10.5.5",
+    "@types/node": "^25.9.5",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "cross-env": "^10.1.0",
+    "date-fns": "^4.4.0",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^10.5.5",
+    "husky": "^9.1.7",
+    "playwright": "^1.62.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-hook-form": "^7.83.0",
+    "remark-gfm": "^4.0.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "storybook": "^10.5.5",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "storybook dev -p 6006",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "watch": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "cross-env NODE_OPTIONS=--max-old-space-size=4096 storybook build",
+    "lint": "eslint .",
+    "lint:ci": "eslint . --max-warnings=0",
+    "typecheck": "tsc --noEmit",
+    "ci:check": "tsc --noEmit && eslint . --max-warnings=0",
+    "changeset": "changeset",
+    "changeset:status": "changeset status --since=origin/main",
+    "version-packages": "changeset version",
+    "release": "changeset publish"
+  }
+}