@mobielnl/elements 0.4.0 → 0.5.0

package/dist/{index-BD8t3ZMS.js → index-D18KRxRT.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-CJzOpHdk.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-Bqq_Hib9.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

@@ -55,6 +55,16 @@ declare type CreditInfoClassNames = {
     descriptionLink?: string;
 };
 
+declare type DistinctPropertyOption = {
+    hex?: Maybe<Scalars['String']['output']>;
+    indexable: Scalars['Boolean']['output'];
+    key: Scalars['String']['output'];
+    label: Scalars['String']['output'];
+    name?: Maybe<Scalars['String']['output']>;
+    slug: Scalars['String']['output'];
+    value?: Maybe<Scalars['Value']['output']>;
+};
+
 /**
  * ClassNames for styling the `ElementsRoot` component
  */
@@ -185,35 +195,6 @@ declare type FilterValue = {
     value: string | string[];
 };
 
-/**
- * ClassNames for styling the `FooterInfo` component within `PropositionCard`
- */
-export declare type FooterInfoClassNames = {
-    /** Wrapper container for the footer info section */
-    base?: string;
-    /** tcoPerMonth/average price text
-     * @example "gem. 10,- /mnd" */
-    averagePrice?: string;
-    /** Device discount text
-     * @example "100,- toestelkorting" */
-    deviceDiscount?: string;
-};
-
-export declare type FooterInfoProps = {
-    /** Device discount text
-     * @example "100,- toestelkorting" */
-    deviceDiscount?: string;
-    /** Average total cost per month text
-     * @example "gem. 10,- /mnd" */
-    tcoPerMonth?: string;
-    /** Class slots for styling */
-    classNames?: FooterInfoClassNames;
-    /** Whether the PropositionCard is horizontal */
-    horizontal?: boolean;
-    /** Whether the footer info is for a proposition with a product */
-    hasProduct?: boolean;
-};
-
 declare type GetPageByPathQuery = {
     __typename?: 'RootQueryType';
     page?: {
@@ -261,6 +242,8 @@ declare type ListBoxClassNames = {
     selectedIcon?: string;
 };
 
+declare type Maybe<T> = T | null;
+
 declare type ModalClassNames = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
@@ -282,6 +265,59 @@ declare type ModalClassNames = {
     primaryButton?: string;
 };
 
+declare type ModalClassNames_2 = {
+    /** 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 PhoneListContainerClassNames = {
+    base?: string;
+    wrapper?: string;
+    title?: string;
+    description?: string;
+    selectedIcon?: string;
+    item?: string;
+    itemWrapper?: string;
+    itemContent?: string;
+    itemLabel?: string;
+    itemDescription?: string;
+    emptyContent?: string;
+};
+
+export declare function PhoneSelector({ onChange, classNames, disabled, productSlug: initialProductSlug, selectedDistinctProperties: initialSelectedDistinctProperties, }: PhoneSelectorProps): JSX.Element;
+
+declare type PhoneSelectorClassNames = {
+    base?: string;
+    button?: string;
+    /** Filter modal class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames;
+    brandTabs?: string;
+    phoneList?: PhoneListContainerClassNames;
+    variantList?: string;
+    confirmButton?: string;
+};
+
+declare type PhoneSelectorProps = {
+    onChange?: (productSlug: string, distinctProperties: VersionDistinctProperty[]) => void;
+    classNames?: PhoneSelectorClassNames;
+    disabled?: boolean;
+    placeholder?: string;
+    productSlug?: string;
+    selectedDistinctProperties?: VersionDistinctProperty[];
+};
+
 declare type PopoverContentClassNames = {
     base?: string;
     trigger?: string;
@@ -304,6 +340,80 @@ declare type PostcodeCheckLoadingClassNames = {
     addressText?: string;
 };
 
+export declare type PostcodeCheckModalClassNames = {
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames_2;
+    /** Header section containing icon and title */
+    header?: {
+        /** Container wrapping the header content */
+        container?: string;
+        /** Icon wrapper with background */
+        iconWrapper?: string;
+        /** Home location icon */
+        icon?: string;
+        /** Main title text */
+        title?: string;
+        /** Description text below title */
+        description?: string;
+    };
+    /** Form section for address input */
+    form?: {
+        /** Form element container */
+        container?: string;
+        /** Address section label */
+        addressLabel?: string;
+        /** Container for postcode, number, and numberAddon inputs */
+        inputsContainer?: string;
+        /** Input field styling slots */
+        input?: {
+            /** Input wrapper styling */
+            inputWrapper?: string;
+            /** Input element styling */
+            input?: string;
+            /** Input label styling */
+            label?: string;
+        };
+        /** Error message container */
+        error?: {
+            /** Error container wrapper */
+            container?: string;
+            /** Error text styling */
+            text?: string;
+        };
+    };
+    /** Provider selection section */
+    provider?: {
+        /** Provider section label */
+        label?: string;
+        /** 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;
+        };
+    };
+    /** Submit button styling */
+    submitButton?: string;
+};
+
+export declare type PostcodeCheckModalProps = {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback function to handle modal open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Class slots for styling */
+    classNames?: PostcodeCheckModalClassNames;
+    /** Callback function to handle profile changes */
+    onProfileChange?: (profile: Partial<Profile>) => void;
+    /** User profile */
+    profile: Profile;
+};
+
 /**
  * ClassNames for styling the `PricingSection` component within `PropositionCard`
  */
@@ -324,25 +434,18 @@ export declare type PricingSectionClassNames = {
     /** Promotion text for monthly fee
      * @example "12 mnd van 10,- voor:" */
     promotionText?: string;
+    /** Average price container (TCO per month) */
+    averagePrice?: string;
 };
 
-export declare type PricingSectionProps = {
-    /** Promotion text for monthly fee
-     * @example "12 mnd van 10,- voor:" */
-    monthlyFeePromotionText?: string;
-    /** Monthly fee text
-     * @example "10,-" */
-    monthlyFee: string;
-    /** Product price text (one-time payment - only visible for phone propositions)
-     * @example "+ 100,- eenmalig" */
-    productPrice?: string;
+export declare type PricingSectionProps = Pick<PropositionCardProps, 'onInfoClick' | 'productPrice' | 'monthlyFee' | 'tcoPerMonth' | 'monthlyFeePromotionText'> & {
     /** Class slots for styling */
     classNames?: PricingSectionClassNames;
 };
 
-declare type ProductCategory = 'sim-only-proposition' | 'smartphone-proposition' | 'phone-and-subscription' | 'fixed-proposition';
+declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ productCategory, initialSelectedFilters, limit, propositionCardLayout, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -372,17 +475,17 @@ export declare type ProductResultsClassNames = {
     propositionCard?: PropositionCardClassNames;
     /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
     postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+    /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
+    postcodeCheckModal?: PostcodeCheckModalClassNames;
 };
 
 export declare type ProductResultsProps = {
     /** Product type of the results */
-    productCategory: ProductCategory;
+    productCategory: Exclude<ProductCategory, 'smartphone-proposition-extended'>;
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
     limit?: number;
-    /** Layout of the proposition cards */
-    propositionCardLayout?: 'vertical' | 'horizontal';
     /** Class slots for styling */
     classNames?: ProductResultsClassNames;
     /** User profile */
@@ -401,59 +504,18 @@ export declare type ProductSectionClassNames = {
     imageWrapper?: string;
     /** Product image element */
     image?: string;
-    /** Product title text
-     * @example "iPhone 17" */
-    title?: string;
-    /** Product subtitle/brand text
-     * @example "Apple" */
-    subtitle?: string;
-    /** Stock status badge
-     * @example "Op voorraad" */
-    stockStatus?: string;
-    /** Average review score text
-     * @example "9.5" */
-    reviewScore?: string;
-    /** Amount of reviews text
-     * @example "(100)" */
-    reviewCount?: string;
-    /** Product specifications list container
-     * @example "6.3 inch • 256GB opslag • 5 kleuren" */
-    specifications?: string;
-};
-
-export declare type ProductSectionProps = {
-    /** Product title text
-     * @example "iPhone 17" */
-    title: string;
-    /** Product subtitle/brand text
-     * @example "Apple" */
-    subtitle: string;
-    /** Product image URL */
-    imageUrl: string;
-    /** Product image alt text */
-    imageAlt: string;
-    /** Product specifications */
-    specifications?: {
-        title: string;
-    }[];
-    /** Stock status
-     * @example "Op voorraad" */
-    stockStatus?: string;
-    /** Amount of reviews
-     * @example 100 */
-    reviewCount?: number;
-    /** Average review score
-     * @example 9.5 */
-    reviewScore?: number;
-    /** Class slots for styling */
-    classNames?: ProductSectionClassNames;
-    horizontal?: boolean;
+    /** Delivery Text Icon " */
+    deliveryTextIcon?: string;
+    /** Delivery Text
+     * @example "Direct leverbaar" */
+    deliveryText?: string;
 };
 
 declare type Profile = z.infer<typeof profileSchema>;
 
 declare const profileSchema: z_2.ZodObject<{
     keepCurrentMsisdn: z_2.ZodOptional<z_2.ZodBoolean>;
+    currentMsisdn: z_2.ZodOptional<z_2.ZodString>;
     currentSubscriptionType: z_2.ZodOptional<z_2.ZodEnum<{
         subscription: "subscription";
         prepaid: "prepaid";
@@ -480,20 +542,16 @@ declare const profileSchema: z_2.ZodObject<{
 export declare type PromotionsListClassNames = {
     /** Wrapper container for the promotions list */
     base?: string;
-    /** Individual special/modification promotion item
+    /** Individual promotion item
      * @example "€4,50 korting per maand" */
     item?: string;
-    /** Checkmark icon for each special promotion item */
-    specialPromotionIcon?: string;
-    /** Checkmark icon for each modification promotion item */
-    modificationPromotionIcon?: string;
+    /** Checkmark icon for each promotion item */
+    promotionIcon?: string;
 };
 
 export declare type PromotionsListProps = {
-    /** Special promotions to display */
-    specialPromotions: string[];
-    /** Modification promotions to display */
-    modificationPromotions: string[];
+    /** Promotions to display */
+    promotions: string[];
     /** Class slots for styling */
     classNames?: PromotionsListClassNames;
 };
@@ -510,15 +568,15 @@ export declare type PropositionCardClassNames = {
     header?: string;
     /** Card body wrapper around `specifications`, `urgentChip` and `promotionsList` */
     body?: string;
-    /** Card footer wrapper around `deliveryText`, `pricingSection` and `button` */
+    /** Card footer wrapper around `pricingSection` and `button` */
     footer?: string;
-    /** Image wrapper for main product or proposition image on Horizontal card
+    /** Image wrapper for proposition provider image (only on Horizontal card)
      *
-     * It handles alignment, placement, and general appearance for the product image */
+     * It handles alignment, placement, and general appearance for the proposition provider image */
     imageWrapper?: string;
-    /** Main product or proposition image on Horizontal card */
+    /** Proposition provider image (only on Horizontal card) */
     image?: string;
-    /** Product section (only visible for phone propositions) class styling slots - see type `ProductSectionClassNames` */
+    /** Product section (only visible for smartphone propositions) class styling slots - see type `ProductSectionClassNames` */
     productSection?: ProductSectionClassNames;
     /** Proposition header class styling slots - see type `PropositionHeaderClassNames` */
     propositionHeader?: PropositionHeaderClassNames;
@@ -526,8 +584,6 @@ export declare type PropositionCardClassNames = {
     pricingSection?: PricingSectionClassNames;
     /** Promotions list class styling slots - see type `PromotionsListClassNames` */
     promotionsList?: PromotionsListClassNames;
-    /** Footer info (tcoPerMonth/average price and device discount) class styling slots - see type `FooterInfoClassNames` */
-    footerInfo?: FooterInfoClassNames;
     /** Specifications grid (only visible for sim only and fixed propositions)
      * @example
      * - "2 jaar"
@@ -538,15 +594,14 @@ export declare type PropositionCardClassNames = {
     /** Urgent text chip (only visible when promotion is urgent)
      * @example "Actie nog 6 dagen" */
     urgentChip?: string;
-    /** Delivery promise text
-     * @example "Voor 23:59 besteld, morgen in huis" */
-    deliveryText?: string;
     /** Call To Action button
      * @example "Bekijk" */
     button?: string;
 };
 
 export declare type PropositionCardProps = {
+    /** 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 */
@@ -561,19 +616,9 @@ export declare type PropositionCardProps = {
     productImageUrl?: string;
     /** Product image alt text */
     productImageAlt?: string;
-    /** Product specifications */
-    productSpecifications?: {
-        title: string;
-    }[];
     /** Product stock status
      * @example "in_stock" */
     productStockStatus?: string;
-    /** Product review count
-     * @example 100 */
-    productReviewCount?: number;
-    /** Product review score
-     * @example 9.5 */
-    productReviewScore?: number;
     /** Product price
      * @example "100,-" */
     productPrice?: string;
@@ -610,9 +655,6 @@ export declare type PropositionCardProps = {
     /** Device discount
      * @example "100,-" */
     deviceDiscount?: string;
-    /** Delivery text
-     * @example "Voor 23:59 besteld, morgen in huis" */
-    deliveryText?: string | null;
     /** Urgent text for urgent special promotion
      * @example "Actie nog 6 dagen" */
     urgentText?: string;
@@ -627,9 +669,9 @@ export declare type PropositionCardProps = {
 export declare type PropositionHeaderClassNames = {
     /** Wrapper container for the proposition header */
     base?: string;
-    /** Image wrapper, it handles alignment, placement, and general appearance for the proposition provider image */
+    /** Image wrapper, it handles alignment, placement, and general appearance for the proposition provider image (only on Vertical card) */
     imageWrapper?: string;
-    /** Proposition provider image element*/
+    /** Proposition provider image element (only on Vertical card) */
     image?: string;
     /** Proposition title text
      * @example "30 GB"
@@ -650,10 +692,10 @@ export declare type PropositionHeaderProps = {
      * @example "Onbp min / sms"
      * @example "Glasvezel" */
     subtitle: string;
-    /** Proposition image URL */
-    imageUrl: string;
-    /** Proposition image alt text */
-    imageAlt: string;
+    /** Proposition provider image URL */
+    imageUrl?: string;
+    /** Proposition provider image alt text */
+    imageAlt?: string;
     /** Whether the proposition has a product/phone */
     hasProduct: boolean;
     /** Class slots for styling */
@@ -741,6 +783,38 @@ declare type ResultsNotFoundClassNames = {
     };
 };
 
+/** All built-in and custom scalars, mapped to their actual values */
+declare type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+    Json: {
+        input: any;
+        output: any;
+    };
+    Value: {
+        input: any;
+        output: any;
+    };
+};
+
 export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
 
 /**
@@ -876,4 +950,11 @@ declare type SortSelectClassNames = {
     endWrapper?: string;
 };
 
+declare type VersionDistinctProperty = {
+    __typename?: 'VersionDistinctProperty';
+    key: Scalars['String']['output'];
+    label: Scalars['String']['output'];
+    option: DistinctPropertyOption;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -49,6 +49,8 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@heroui/alert": "^2.2.27",
+    "@heroui/avatar": "^2.2.22",
+    "@heroui/badge": "^2.2.17",
     "@heroui/button": "^2.2.27",
     "@heroui/card": "^2.2.25",
     "@heroui/checkbox": "^2.3.27",
@@ -57,13 +59,16 @@
     "@heroui/image": "^2.2.17",
     "@heroui/input": "^2.4.28",
     "@heroui/link": "^2.2.23",
+    "@heroui/listbox": "^2.3.26",
     "@heroui/modal": "^2.2.24",
     "@heroui/radio": "^2.3.27",
     "@heroui/scroll-shadow": "^2.3.18",
     "@heroui/select": "^2.4.28",
+    "@heroui/skeleton": "^2.2.17",
     "@heroui/slider": "^2.4.24",
     "@heroui/system": "^2.4.23",
     "@heroui/table": "^2.2.27",
+    "@heroui/tabs": "^2.2.24",
     "@heroui/theme": "^2.4.23",
     "@react-stately/flags": "^3.1.2",
     "@storybook/addon-a11y": "^9.1.2",
@@ -72,6 +77,7 @@
     "@tailwindcss/vite": "^4.1.11",
     "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^22.13.1",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/react": "^19.1.10",
@@ -82,9 +88,11 @@
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "postcss-prefix-selector": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-use": "^17.6.0",
     "remark-gfm": "^4.0.1",
     "storybook": "^9.1.2",
     "swr": "^2.3.2",