@mobielnl/elements 0.1.1 → 0.2.0

package/dist/{index-DPm2lMF_.js → index-CyWFCJP8.js}

@@ -1,5 +1,5 @@
 "use client";
-import { i as q, n as Ue, a as Pt, c as Y, p as Ve, w as he, b as $e, d as Ft, t as Dt, e as Kn, v as Bn, f as Ln, g as _n, h as Et, j as Un, k as $n, l as k, m as Gn, o as jn, q as fe, r as st, s as Ot, u as Wn, x as Hn, y as zn, z as It, A as qn, B as Yn, C as Xn, D as Zn, E as Jn, F as Rt, G as Nt, H as kt, I as Kt } from "./index-BlJG1vwG.js";
+import { i as q, n as Ue, a as Pt, c as Y, p as Ve, w as he, b as $e, d as Ft, t as Dt, e as Kn, v as Bn, f as Ln, g as _n, h as Et, j as Un, k as $n, l as k, m as Gn, o as jn, q as fe, r as st, s as Ot, u as Wn, x as Hn, y as zn, z as It, A as qn, B as Yn, C as Xn, D as Zn, E as Jn, F as Rt, G as Nt, H as kt, I as Kt } from "./index-Cojc9OdQ.js";
 import { Fragment as Qn } from "react";
 var _e = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 function es(t, e) {

package/dist/index.d.ts

@@ -6,14 +6,20 @@ import * as z_2 from 'zod';
 export declare function ActiveFilterChips({ activeFilters, filterOptions, onFilterRemove, classNames, }: ActiveFilterChipsProps): JSX.Element | null;
 
 declare type ActiveFilterChipsClassNames = {
+    /** The container of the filter chips */
     container?: string;
+    /** The filter chip element */
     filterChip?: FilterChipClassNames;
 };
 
 declare type ActiveFilterChipsProps = {
+    /** Currently active filter values */
     activeFilters: FilterValue[];
+    /** Available filter options to display */
     filterOptions: FilterOption[];
+    /** Callback when a filter value is removed */
     onFilterRemove: (filter: FilterValue) => void;
+    /** Class slots for styling */
     classNames?: ActiveFilterChipsClassNames;
 };
 
@@ -37,21 +43,26 @@ export declare type ElementsRootProps = {
 export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element;
 
 declare type FilterChipClassNames = {
+    /** The base slot of the chip, it is the container of the chip */
     base?: string;
+    /** The content slot of the chip, it is the container of the chip children */
     content?: string;
-    dot?: string;
-    avatar?: string;
+    /** Close button classes of the chip */
     closeButton?: string;
 };
 
 declare type FilterChipProps = {
+    /** Filter value */
     filter: FilterValue;
+    /** Filter option */
     filterOption: FilterOption;
+    /** Callback when the filter is removed */
     onRemove: (filter: FilterValue) => void;
+    /** Class slots for styling */
     classNames?: FilterChipClassNames;
 };
 
-export declare function FilterModal({ filters, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
+export declare function FilterModal({ filterOptions, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `FilterModal` component
@@ -81,25 +92,22 @@ declare type FilterOption = {
      * @example "Prijs per maand" */
     label: string;
     /** Type of filter control to render */
-    type: 'range' | 'select' | 'radio' | 'hidden';
+    type: 'range' | 'min' | 'max' | 'select' | 'radio' | 'hidden';
     /** Available options for select-type filters
      * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options?: string[] | number[];
-    /** Minimum value for range-type filters */
+    options?: string[];
+    /** Minimum value for slider-type filters */
     min?: number;
-    /** Maximum value for range-type filters */
+    /** Maximum value for slider-type filters */
     max?: number;
-    /** Step increment for range-type filters
+    /** Step increment for slider-type filters
      * @example 5 */
     step?: number;
-    /** Unit to display with range values
-     * @example "€" or "GB" */
-    unit?: string;
     /** Format type for the filter value */
-    formatType?: 'currency' | 'percentage' | 'decimal' | 'integer' | string;
+    formatType?: 'price' | 'data' | 'minutes' | 'sms' | 'months' | 'data_speed' | 'hours' | 'inches' | 'centimeters' | 'milliamperes';
 };
 
-export declare function Filters({ filters, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element;
+export declare function Filters({ filterOptions, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element | null;
 
 /**
  * ClassNames for styling different parts of the `Filters` component
@@ -116,8 +124,8 @@ export declare type FiltersClassNames = {
     /** Filter group label/heading
      * @example "Prijs per maand" */
     filterLabel?: string;
-    /** Range filter class styling slots - see type `RangeFilterClassNames` */
-    rangeFilter?: RangeFilterClassNames;
+    /** Range filter class styling slots - see type `SliderFilterClassNames` */
+    sliderFilter?: SliderFilterClassNames;
     /** Select filter class styling slots - see type `SelectFilterClassNames` */
     selectFilter?: SelectFilterClassNames;
     /** Radio filter class styling slots - see type `RadioFilterClassNames` */
@@ -126,7 +134,7 @@ export declare type FiltersClassNames = {
 
 export declare type FiltersProps = {
     /** Available filter options to display */
-    filters: FilterOption[];
+    filterOptions: FilterOption[];
     /** Currently active filter values */
     activeFilters: FilterValue[];
     /** Callback when a filter value changes */
@@ -142,11 +150,13 @@ declare type FilterValue = {
     /** Identifier matching the corresponding `FilterOption[id]` */
     id: string;
     /** The selected value(s) - type depends on filter type:
-     * - string: single text value
-     * - number: single numeric value
-     * - [number, number]: range values [min, max]
-     * - string[]: multiple selected options */
-    value: string | number | [number, number] | string[];
+     * - `string`: single text value for types: radio/range/min/max
+     * - `string[]`: multiple selected options for type select
+     * @example "150-400" // Range: from 150 to 400
+     * @example "150-" // Min: from 150
+     * @example "-400" // Max: up to 400
+     * @example ["KPN", "Vodafone", "Odido"] // Select: KPN, Vodafone, Odido */
+    value: string | string[];
 };
 
 /**
@@ -221,9 +231,11 @@ declare type PostcodeCheckLoadingClassNames = {
     icon?: string;
     /** Wrapper container for the text */
     textWrapper?: string;
-    /** Heading text */
+    /** Heading text
+     * @example "Aan het zoeken naar de beste deals..." */
     heading?: string;
-    /** Address text */
+    /** Address text
+     * @example "Straatnaam 1, Stad" */
     addressText?: string;
 };
 
@@ -285,6 +297,8 @@ export declare type ProductResultsClassNames = {
     modal?: ModalClassNames;
     /** Grid wrapper of the results */
     resultsGrid?: 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` */
@@ -623,69 +637,42 @@ export declare type RadioFilterProps = {
     id: string;
     /** Available options to display as radio options
      * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options: string[] | number[];
+    options: string[];
     /** Currently selected value */
-    value?: string | number;
+    value?: string;
     /** Callback when selection changes */
     onChange: (value: string) => void;
     /** Class slots for styling */
     classNames?: RadioFilterClassNames;
 };
 
-export declare function RangeFilter({ min, max, step, unit, value, onChange, classNames, }: RangeFilterProps): JSX.Element;
+export declare function RangeFilter({ min, max, step, value, options, maxOptionValue, marks, formatType, onChange, classNames, }: SliderFilterProps): JSX.Element;
 
-/**
- * ClassNames for styling different parts of the `RangeFilter` component
- */
-export declare type RangeFilterClassNames = {
-    /** The foundational slot, encompassing all other slots and elements
-     *
-     * It serves as the primary container */
-    base?: string;
-    /** The container for the Slider's label and value
-     *
-     * It aligns these elements and ensures a consistent layout */
-    labelWrapper?: string;
-    /** A dedicated slot to display the Slider's label
-     * @example "€ 0 - € 100" */
-    label?: string;
-    /** Displays the current value of the Slider
-     *
-     * Located within the `labelWrapper` */
-    value?: string;
-    /** Represents individual steps or intervals on the Slider */
-    step?: string;
-    /** Denotes specific values or intervals along the Slider */
-    mark?: string;
-    /** A container for the slider's track, ensuring it is consistently aligned and positioned */
-    trackWrapper?: string;
-    /** The base bar of the Slider, along which the thumb moves */
-    track?: string;
-    /**  A visual representation of the selected value, filling the track from the start point to the current thumb position */
-    filler?: string;
-    /** The interactive element that users drag along the track to select a value on the Slider */
-    thumb?: string;
-};
-
-export declare type RangeFilterProps = {
-    /** Unique identifier for this filter */
-    id: string;
-    /** Minimum value of the range */
-    min: number;
-    /** Maximum value of the range */
-    max: number;
-    /** Step increment for the slider
-     * @example 5 */
-    step?: number;
-    /** Unit to display with values
-     * @example "€" or "GB" */
-    unit?: string;
-    /** Currently selected range [min, max] */
-    value?: [number, number];
-    /** Callback when range changes */
-    onChange: (value: [number, number]) => void;
-    /** Class slots for styling */
-    classNames?: RangeFilterClassNames;
+declare type ResultsNotFoundClassNames = {
+    filterChips?: ActiveFilterChipsClassNames & {
+        /** The title element above the filter chips
+         * @example "Gekozen filters:" */
+        title?: string;
+    };
+    /** The alert element */
+    alert?: {
+        /** The main alert container element */
+        base?: string;
+        /** The alert title element
+         * @example "Geen resultaten gevonden" */
+        title?: string;
+        /** The alert description element
+         * @example "Er zijn geen producten gevonden met je gekozen filtercombinatie." */
+        description?: string;
+        /** The wrapper for the title and description content */
+        mainWrapper?: string;
+        /** The close button element */
+        closeButton?: string;
+        /** The wrapper for the alert icon */
+        iconWrapper?: string;
+        /** The alert icon element */
+        alertIcon?: string;
+    };
 };
 
 export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
@@ -727,15 +714,84 @@ export declare type SelectFilterProps = {
     id: string;
     /** Available options to display as checkboxes
      * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options: string[] | number[];
+    options: string[];
     /** Currently selected values */
-    values?: string[] | number[];
+    values?: string[];
     /** Callback when selection changes */
     onChange: (values: string[]) => void;
     /** Class slots for styling */
     classNames?: SelectFilterClassNames;
 };
 
+/**
+ * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
+ */
+export declare type SliderFilterClassNames = {
+    /** The foundational slot, encompassing all other slots and elements
+     *
+     * It serves as the primary container */
+    base?: string;
+    /** The container for the Slider's label and value
+     *
+     * It aligns these elements and ensures a consistent layout */
+    labelWrapper?: string;
+    /** A dedicated slot to display the Slider's label
+     * @example "€ 0 - € 100" */
+    label?: string;
+    /** Displays the current value of the Slider
+     *
+     * Located within the `labelWrapper` */
+    value?: string;
+    /** Represents individual steps or intervals on the Slider */
+    step?: string;
+    /** Denotes specific values or intervals along the Slider */
+    mark?: string;
+    /** A container for the slider's track, ensuring it is consistently aligned and positioned */
+    trackWrapper?: string;
+    /** The base bar of the Slider, along which the thumb moves */
+    track?: string;
+    /**  A visual representation of the selected value, filling the track from the start point to the current thumb position */
+    filler?: string;
+    /** The interactive element that users drag along the track to select a value on the Slider */
+    thumb?: string;
+};
+
+export declare type SliderFilterProps = {
+    /** Unique identifier for this filter */
+    id: string;
+    /** Minimum value of the range */
+    min: number;
+    /** Maximum value of the range */
+    max: number;
+    /** Step increment for the slider
+     * @example 5 */
+    step: number;
+    /** Available fixed values within the slider
+     * @example "[0,100,150,200,400,UNLIMITED]" // from 0 to Unlimited */
+    options: number[];
+    /** The maximum value of the slider, calculated from the options and step */
+    maxOptionValue: number;
+    /** Currently selected value
+     * @example "150-400" // Range: from 150 to 400
+     * @example "150-" // Min: from 150
+     * @example "-400" // Max: up to 400
+     */
+    value?: string;
+    /** The marks to display on the Slider's steps. */
+    marks: {
+        /** The value corresponding to the mark */
+        value: number;
+        /** The label text of the mark */
+        label: string;
+    }[];
+    /** Format type for the filter value */
+    formatType?: FilterOption['formatType'];
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Class slots for styling */
+    classNames?: SliderFilterClassNames;
+};
+
 declare type SortSelectClassNames = {
     description?: string;
     errorMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -48,6 +48,7 @@
     "@graphql-codegen/typescript": "^4.1.2",
     "@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",