@mobielnl/elements 0.5.0 → 0.6.1

package/dist/{index-D18KRxRT.js → index-DkHYB7u1.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-DAyzaGWL.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 = {
@@ -445,7 +501,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, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -488,10 +544,12 @@ export declare type ProductResultsProps = {
     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 +605,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 +660,24 @@ export declare type PropositionCardClassNames = {
     /** Call To Action button
      * @example "Bekijk" */
     button?: string;
+    /** Card wrapper (container for the label and card) */
+    cardWrapper?: string;
+    /** Label text styling */
+    label?: string;
 };
 
 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 +724,9 @@ export declare type PropositionCardProps = {
     /** Urgent text for urgent special promotion
      * @example "Actie nog 6 dagen" */
     urgentText?: string;
+    /** Label text to display above the card
+     * @example "Meest gekozen" */
+    label?: string;
     /** Class slots for styling */
     classNames?: PropositionCardClassNames;
     horizontal?: boolean;
@@ -681,23 +750,35 @@ 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;
@@ -862,6 +943,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.6.1",
   "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",