@mobielnl/elements 0.5.0 → 0.7.0

package/dist/{index-D18KRxRT.js → index-D-uHa1PI.js}

@@ -1,5 +1,5 @@
 "use client";
-import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-Bqq_Hib9.js";
+import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-C4M3Nf9p.js";
 import { Fragment as _n } from "react";
 var ae = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 function At(t, e) {

package/dist/index.d.ts

@@ -1,5 +1,10 @@
+import { Component } from 'react';
+import { ErrorInfo } from 'react';
 import { JSX } from 'react/jsx-runtime';
+import { JSXElementConstructor } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { z } from 'zod';
 import * as z_2 from 'zod';
 
@@ -96,6 +101,57 @@ export declare type ElementsRootProps = {
     };
 };
 
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(_error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, _errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | JSX.Element | null | undefined;
+}
+
+export declare type ErrorBoundaryProps = {
+    /** The content to be wrapped by the ErrorBoundary */
+    children: ReactNode;
+    /** Callback function called when an error is caught */
+    onError?: (error: Error) => void;
+    /** Custom fallback UI to render when an error occurs */
+    fallback?: ReactNode;
+};
+
+export declare type ErrorBoundaryState = {
+    hasError: boolean;
+};
+
+export declare function ErrorComponent({ classNames }: ErrorComponentProps): JSX.Element;
+
+export declare type ErrorComponentClassNames = {
+    /** Main wrapper container for the error component */
+    base?: string;
+    /** Alert component class styling slots */
+    alert?: {
+        /** Alert container */
+        base?: string;
+        /** Alert title text */
+        title?: string;
+        /** Alert description text */
+        description?: string;
+        /** Alert main content wrapper */
+        mainWrapper?: string;
+        /** Alert close button */
+        closeButton?: string;
+        /** Alert icon wrapper */
+        iconWrapper?: string;
+        /** Alert icon */
+        alertIcon?: string;
+    };
+    /** Refresh page button */
+    button?: string;
+};
+
+export declare type ErrorComponentProps = {
+    /** Class slots for styling */
+    classNames?: ErrorComponentClassNames;
+};
+
 export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element | null;
 
 declare type FilterChipClassNames = {
@@ -234,6 +290,11 @@ declare type GetPageByPathQuery = {
     } | null;
 };
 
+declare type LabelClassNames = {
+    wrapper?: string;
+    text?: string;
+};
+
 declare type ListBoxClassNames = {
     base?: string;
     wrapper?: string;
@@ -282,6 +343,97 @@ declare type ModalClassNames_2 = {
     closeButton?: string;
 };
 
+declare type ModalClassNames_3 = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
+declare type NumberPreservationModalClassNames = {
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames_3;
+    /** Header section containing icon and title */
+    header?: {
+        /** Container wrapping the header content */
+        container?: string;
+        /** Icon wrapper with background (contains "06" text) */
+        iconWrapper?: string;
+        /** Main title text */
+        title?: string;
+        /** Description text below title */
+        description?: string;
+    };
+    /** Form section for number input */
+    form?: {
+        /** Form element container */
+        container?: string;
+        /** Input field styling slots */
+        input?: {
+            /** Input wrapper styling */
+            inputWrapper?: string;
+            /** Input element styling */
+            input?: string;
+        };
+    };
+    /** Provider selection section */
+    provider?: {
+        /** Select component styling */
+        select?: {
+            /** Select label styling */
+            label?: string;
+            /** Select trigger button styling */
+            trigger?: string;
+            /** Provider item container in select */
+            itemContainer?: string;
+            /** Provider icon styling */
+            icon?: string;
+        };
+    };
+    /** Options section (Ja/Nee buttons) */
+    options?: {
+        /** Container for the option buttons */
+        container?: string;
+        /** Option button styling */
+        button?: string;
+        /** Button content wrapper */
+        buttonContent?: string;
+        /** Button label text */
+        buttonLabel?: string;
+        /** Button description text */
+        buttonDescription?: string;
+        /** Button icon styling */
+        buttonIcon?: string;
+    };
+    /** Radio group for subscription type selection */
+    radioGroup?: {
+        /** Radio group base styling */
+        base?: string;
+        /** Radio group wrapper styling */
+        wrapper?: string;
+        /** Radio group label styling */
+        label?: string;
+        /** Radio group description styling */
+        description?: string;
+        /** Radio group error message styling */
+        errorMessage?: string;
+        /** Radio styling */
+        radio?: string;
+    };
+    /** Submit button styling */
+    submitButton?: string;
+};
+
 declare type PhoneListContainerClassNames = {
     base?: string;
     wrapper?: string;
@@ -445,7 +597,7 @@ export declare type PricingSectionProps = Pick<PropositionCardProps, 'onInfoClic
 
 declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, initialProfile, texts, showTopPropositions, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -462,36 +614,43 @@ export declare type ProductResultsClassNames = {
     /** Filter button (only on mobile & tablet screens) */
     filterButton?: string;
     /** Filter modal class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames;
-    /** Grid wrapper of the results */
-    resultsGrid?: string;
-    /** Credit info component class styling slots - see type `CreditInfoClassNames` */
-    creditInfo?: CreditInfoClassNames;
-    /** Load more button */
-    loadMoreButton?: string;
-    /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
-    resultsNotFound?: ResultsNotFoundClassNames;
-    /** Proposition card class styling slots - see type `PropositionCardClassNames` */
-    propositionCard?: PropositionCardClassNames;
-    /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
-    postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+    filterModal?: ModalClassNames;
     /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
     postcodeCheckModal?: PostcodeCheckModalClassNames;
+    /** Number preservation modal class styling slots - see type `NumberPreservationModalClassNames` */
+    numberPreservationModal?: NumberPreservationModalClassNames;
+    /** Results class styling slots - see type `ResultsClassNames` */
+    results?: ResultsClassNames;
 };
 
 export declare type ProductResultsProps = {
     /** Product type of the results */
     productCategory: Exclude<ProductCategory, 'smartphone-proposition-extended'>;
+    /** Whether to show the dynamic top 3 propositions based on the user's profile
+     *
+     * Not available for smartphone propositions when no phone is selected */
+    showTopPropositions?: boolean;
+    /** Customize texts  */
+    texts?: {
+        /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
+         * @default "Beste providers voor jou" */
+        topPropositionsTitle: string;
+        /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
+         * @default "Alle providers op een rijtje" */
+        allPropositionsTitle: string;
+    };
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
     limit?: number;
     /** Class slots for styling */
     classNames?: ProductResultsClassNames;
-    /** User profile */
-    profile?: Profile;
+    /** Initial user profile */
+    initialProfile?: Partial<Profile>;
     /** Callback function to handle profile changes */
     onProfileChange?: (profile: Partial<Profile>) => void;
+    /** Callback function called when an error occurs */
+    onError?: (error: Error) => void;
 };
 
 /**
@@ -547,11 +706,16 @@ export declare type PromotionsListClassNames = {
     item?: string;
     /** Checkmark icon for each promotion item */
     promotionIcon?: string;
+    /** Urgent text chip */
+    urgentChip?: string;
 };
 
 export declare type PromotionsListProps = {
     /** Promotions to display */
     promotions: string[];
+    /** Urgent text to display as a chip above promotions
+     * @example "Actie nog 6 dagen" */
+    urgentText?: string;
     /** Class slots for styling */
     classNames?: PromotionsListClassNames;
 };
@@ -597,21 +761,24 @@ export declare type PropositionCardClassNames = {
     /** Call To Action button
      * @example "Bekijk" */
     button?: string;
+    /** Card wrapper (container for the label and card) */
+    cardWrapper?: string;
+    /** Label class styling slots - see type `LabelClassNames` */
+    label?: LabelClassNames;
 };
 
 export declare type PropositionCardProps = {
+    /** Click handler on the card */
+    onClick: (e: {
+        target: Element;
+    }) => void;
     /** Click handler to open the details modal */
     onInfoClick: (tab: 'general' | 'conditions' | 'channels' | 'costs') => void;
     /** Whether the proposition is disabled */
     disabled?: boolean;
-    /** Link to the proposition page */
-    href: string;
-    /** Product title
-     * @example "iPhone 17" */
+    /** Product title - should include brand + phone name
+     * @example "Apple iPhone 17" */
     productTitle?: string;
-    /** Product subtitle (brand)
-     * @example "Apple" */
-    productSubtitle?: string;
     /** Product image URL */
     productImageUrl?: string;
     /** Product image alt text */
@@ -658,6 +825,8 @@ export declare type PropositionCardProps = {
     /** Urgent text for urgent special promotion
      * @example "Actie nog 6 dagen" */
     urgentText?: string;
+    /** Label properties to display above the card */
+    label?: Pick<PropositionLabel, 'displayName' | 'color'>;
     /** Class slots for styling */
     classNames?: PropositionCardClassNames;
     horizontal?: boolean;
@@ -681,28 +850,51 @@ export declare type PropositionHeaderClassNames = {
      * @example "Onbp min / sms"
      * @example "Glasvezel" */
     subtitle?: string;
+    /** Specifications container */
+    specifications?: string;
 };
 
 export declare type PropositionHeaderProps = {
+    /** Product title (for smartphone propositions) - should include brand + phone name
+     * @example "Apple iPhone 17" */
+    productTitle?: string;
     /** Proposition title text
      * @example "30 GB"
      * @example "100 Mb/s" */
-    title: string;
+    propositionTitle: string;
     /** Proposition subtitle text
      * @example "Onbp min / sms"
      * @example "Glasvezel" */
-    subtitle: string;
+    propositionSubtitle: string;
     /** Proposition provider image URL */
     imageUrl?: string;
     /** Proposition provider image alt text */
     imageAlt?: string;
     /** Whether the proposition has a product/phone */
     hasProduct: boolean;
+    /** Proposition specifications */
+    propositionSpecifications?: {
+        slug: string;
+        title: string;
+    }[];
+    /** Click handler to open the details modal */
+    onInfoClick?: (tab: 'general' | 'conditions' | 'channels' | 'costs') => void;
     /** Class slots for styling */
     classNames?: PropositionHeaderClassNames;
     horizontal?: boolean;
 };
 
+declare type PropositionLabel = {
+    type: PropositionLabelType;
+    displayName: string;
+    rank: number;
+    color: PropositionLabelColor;
+};
+
+declare type PropositionLabelColor = 'primary' | 'secondary' | 'default';
+
+declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
+
 export declare function RadioFilter({ id, options, value, onChange, classNames, }: RadioFilterProps): JSX.Element;
 
 /**
@@ -756,6 +948,29 @@ export declare type RadioFilterProps = {
 
 export declare function RangeFilter({ min, max, step, value, options, maxOptionValue, marks, formatType, onChange, classNames, }: SliderFilterProps): JSX.Element;
 
+declare type ResultsClassNames = {
+    /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
+     * @example "Beste providers voor jou" */
+    topPropositionsTitle?: string;
+    /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
+     * @example "Alle providers op een rijtje" */
+    allPropositionsTitle?: string;
+    /** Grid wrapper of the top propositions */
+    topPropositionsGrid?: string;
+    /** Grid wrapper of the all propositions */
+    allPropositionsGrid?: string;
+    /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
+    resultsNotFound?: ResultsNotFoundClassNames;
+    /** Credit info component class styling slots - see type `CreditInfoClassNames` */
+    creditInfo?: CreditInfoClassNames;
+    /** Load more button */
+    loadMoreButton?: string;
+    /** Proposition card class styling slots - see type `PropositionCardClassNames` */
+    propositionCard?: PropositionCardClassNames;
+    /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
+    postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+};
+
 declare type ResultsNotFoundClassNames = {
     filterChips?: ActiveFilterChipsClassNames & {
         /** The title element above the filter chips
@@ -862,6 +1077,58 @@ export declare type SelectFilterProps = {
     classNames?: SelectFilterClassNames;
 };
 
+export declare function Selector({ classNames, onClick, disabled, title, description, imageUrl, imageAlt, Icon, avatarName, selected, }: SelectorProps): JSX.Element;
+
+/**
+ * ClassNames for styling different parts of the `Selector` component
+ */
+export declare type SelectorClassNames = {
+    /** Title text styling */
+    title?: string;
+    /** Description text styling */
+    description?: string;
+    /** Main button wrapper */
+    button?: string;
+    /** Badge component (visible when not selected) */
+    badge?: string;
+    /** Avatar component displaying the image or icon */
+    avatar?: {
+        /** Base wrapper styling for the avatar container */
+        base?: string;
+        /** Image element styling */
+        img?: string;
+        /** Name text styling (when displaying initials) */
+        name?: string;
+        /** Icon wrapper styling */
+        icon?: string;
+        /** Fallback content styling (when no image is available) */
+        fallback?: string;
+    };
+};
+
+export declare type SelectorProps = {
+    /** Class slots for styling */
+    classNames?: SelectorClassNames;
+    /** Main title text */
+    title: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Whether the selector is in selected state */
+    selected?: boolean;
+    /** Click handler for the selector */
+    onClick: () => void;
+    /** Icon component to display as fallback when no image is provided */
+    Icon?: React.ElementType;
+    /** Name to display as initials in the avatar when no image is available */
+    avatarName?: string;
+    /** Image URL for the avatar */
+    imageUrl?: string | null;
+    /** Alt text for the image */
+    imageAlt?: string | null;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+};
+
 /**
  * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -73,6 +73,7 @@
     "@react-stately/flags": "^3.1.2",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
+    "@storybook/blocks": "^8.6.14",
     "@storybook/react-vite": "^9.1.2",
     "@tailwindcss/vite": "^4.1.11",
     "@types/jest": "^30.0.0",