@mobielnl/elements 0.3.1 → 0.5.0

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
  */
@@ -63,13 +73,27 @@ export declare type ElementsClassNames = {
     base?: string;
 };
 
-export declare function ElementsRoot({ children, classNames }: ElementsRootProps): JSX.Element;
+export declare function ElementsRoot({ withShadowDOM, ...props }: ElementsRootProps): JSX.Element;
 
 export declare type ElementsRootProps = {
     /** The content to be rendered within the ElementsRoot component */
     children: ReactNode;
     /** Class slots for styling */
     classNames?: ElementsClassNames;
+    /**
+     * Enable Shadow DOM wrapping for complete style isolation
+     * - When `undefinded` or `false`, no Shadow DOM is applied
+     * - When `true`, wraps content in Shadow DOM without injecting CSS
+     * - When an object is provided, allows injecting CSS via `css` string or `cssUrl` path
+     *
+     * @example withShadowDOM={true}
+     * @example withShadowDOM={{ css: 'body { font-family: Arial, sans-serif; }' }}
+     * @example withShadowDOM={{ cssUrl: '/path/to/elements.css' }}
+     */
+    withShadowDOM?: boolean | {
+        css?: string;
+        cssUrl?: string;
+    };
 };
 
 export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element | null;
@@ -171,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?: {
@@ -247,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;
@@ -268,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;
@@ -290,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`
  */
@@ -310,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
@@ -350,23 +467,25 @@ export declare type ProductResultsClassNames = {
     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;
+    /** 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 */
@@ -385,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";
@@ -464,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;
 };
@@ -494,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;
@@ -510,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"
@@ -522,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 */
@@ -545,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;
@@ -594,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;
@@ -611,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"
@@ -634,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 */
@@ -725,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;
 
 /**
@@ -860,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.3.1",
+  "version": "0.5.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -38,8 +38,8 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.4",
@@ -49,28 +49,35 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@heroui/alert": "^2.2.27",
-    "@heroui/button": "^2.2.24",
-    "@heroui/card": "^2.2.23",
-    "@heroui/checkbox": "^2.3.24",
-    "@heroui/chip": "^2.2.20",
-    "@heroui/divider": "^2.2.17",
-    "@heroui/image": "^2.2.15",
-    "@heroui/input": "^2.4.25",
-    "@heroui/link": "^2.2.22",
+    "@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",
+    "@heroui/chip": "^2.2.22",
+    "@heroui/divider": "^2.2.20",
+    "@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/slider": "^2.4.21",
-    "@heroui/system": "^2.4.20",
+    "@heroui/skeleton": "^2.2.17",
+    "@heroui/slider": "^2.4.24",
+    "@heroui/system": "^2.4.23",
     "@heroui/table": "^2.2.27",
-    "@heroui/theme": "^2.4.20",
+    "@heroui/tabs": "^2.2.24",
+    "@heroui/theme": "^2.4.23",
+    "@react-stately/flags": "^3.1.2",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
     "@storybook/react-vite": "^9.1.2",
     "@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",
@@ -81,13 +88,15 @@
     "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": "^18.3.1",
-    "react-dom": "^18.3.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",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.16",
     "typescript": "~5.8.3",
     "vite": "7.1.11",
     "vite-plugin-dts": "^4.5.0",