@mobielnl/elements 0.0.3 → 0.1.0

package/dist/index.d.ts

@@ -1,243 +1,758 @@
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { z } from 'zod';
+import * as z_2 from 'zod';
 
+export declare function ActiveFilterChips({ activeFilters, filterOptions, onFilterRemove, classNames, }: ActiveFilterChipsProps): JSX.Element | null;
+
+declare type ActiveFilterChipsClassNames = {
+    container?: string;
+    filterChip?: FilterChipClassNames;
+};
+
+declare type ActiveFilterChipsProps = {
+    activeFilters: FilterValue[];
+    filterOptions: FilterOption[];
+    onFilterRemove: (filter: FilterValue) => void;
+    classNames?: ActiveFilterChipsClassNames;
+};
+
+/**
+ * ClassNames for styling the `ElementsRoot` component
+ */
 export declare type ElementsClassNames = {
-    root?: string;
-    productResults?: ProductResultsClassNames;
-    propositionCard?: PropositionCardClassNames;
-    filterSidebar?: FilterSidebarClassNames;
-    rangeFilter?: RangeFilterClassNames;
-    selectFilter?: SelectFilterClassNames;
+    /** The only slot */
+    base?: string;
 };
 
 export declare function ElementsRoot({ children, classNames }: ElementsRootProps): JSX.Element;
 
 export declare type ElementsRootProps = {
+    /** The content to be rendered within the ElementsRoot component */
     children: ReactNode;
+    /** Class slots for styling */
     classNames?: ElementsClassNames;
 };
 
+export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element;
+
+declare type FilterChipClassNames = {
+    base?: string;
+    content?: string;
+    dot?: string;
+    avatar?: string;
+    closeButton?: string;
+};
+
+declare type FilterChipProps = {
+    filter: FilterValue;
+    filterOption: FilterOption;
+    onRemove: (filter: FilterValue) => void;
+    classNames?: FilterChipClassNames;
+};
+
+export declare function FilterModal({ filters, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
+
+/**
+ * ClassNames for styling different parts of the `FilterModal` component
+ */
+export declare type FilterModalClassNames = {
+    /** Trigger button that opens the modal
+     * @example "Filters" */
+    button?: string;
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames;
+    /** Filters component class styling slots - see type `FiltersClassNames` */
+    filters?: FiltersClassNames;
+};
+
+export declare type FilterModalProps = Omit<FiltersProps, 'classNames'> & {
+    /** Class slots for styling */
+    classNames?: FilterModalClassNames;
+};
+
+/**
+ * Configuration for a single filter option
+ */
 declare type FilterOption = {
+    /** Unique identifier for the filter */
     id: string;
+    /** Display label for the filter
+     * @example "Prijs per maand" */
     label: string;
-    type: 'range' | 'select';
-    options?: string[];
+    /** Type of filter control to render */
+    type: 'range' | '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 */
     min?: number;
+    /** Maximum value for range-type filters */
     max?: number;
+    /** Step increment for range-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;
 };
 
-export declare function FilterSidebar({ filters, activeFilters, onFilterChange, onClearAll, className, classNames, }: FilterSidebarProps): JSX.Element;
+export declare function Filters({ filters, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element;
 
-export declare type FilterSidebarClassNames = {
+/**
+ * ClassNames for styling different parts of the `Filters` component
+ */
+export declare type FiltersClassNames = {
+    /** The foundational slot, encompassing all other slots and elements
+     *
+     * It serves as the primary container */
     base?: string;
-    clearButton?: string;
+    /** Container wrapping all filter groups */
+    filterWrapper?: string;
+    /** Individual filter group container */
     filterGroup?: string;
+    /** Filter group label/heading
+     * @example "Prijs per maand" */
     filterLabel?: string;
-    filtersContainer?: string;
+    /** Range filter class styling slots - see type `RangeFilterClassNames` */
+    rangeFilter?: RangeFilterClassNames;
+    /** Select filter class styling slots - see type `SelectFilterClassNames` */
+    selectFilter?: SelectFilterClassNames;
+    /** Radio filter class styling slots - see type `RadioFilterClassNames` */
+    radioFilter?: RadioFilterClassNames;
 };
 
-export declare type FilterSidebarProps = {
+export declare type FiltersProps = {
+    /** Available filter options to display */
     filters: FilterOption[];
+    /** Currently active filter values */
     activeFilters: FilterValue[];
+    /** Callback when a filter value changes */
     onFilterChange: (filter: FilterValue) => void;
-    onClearAll: () => void;
-    className?: string;
-    classNames?: FilterSidebarClassNames;
+    /** Class slots for styling */
+    classNames?: FiltersClassNames;
 };
 
+/**
+ * Represents an active filter value selected by the user
+ */
 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[];
 };
 
+/**
+ * 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 = {
-    deviceDiscount?: number;
-    tcoPerMonth?: number;
+    /** 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 ListBoxClassNames = {
+    base?: string;
+    wrapper?: string;
+    title?: string;
+    description?: string;
+    selectedIcon?: string;
+};
+
+declare type ModalClassNames = {
+    /** 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
+     * @example "Filters" */
+    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;
+    /** The primary button of the modal, it is displayed at the bottom of the modal
+     * @example "Toon resultaten" */
+    primaryButton?: string;
+};
+
+declare type PopoverContentClassNames = {
+    base?: string;
+    trigger?: string;
+    backdrop?: string;
+    content?: string;
+};
+
+declare type PostcodeCheckLoadingClassNames = {
+    /** Base wrapper */
+    base?: string;
+    /** Search icon */
+    icon?: string;
+    /** Wrapper container for the text */
+    textWrapper?: string;
+    /** Heading text */
+    heading?: string;
+    /** Address text */
+    addressText?: string;
 };
 
+/**
+ * ClassNames for styling the `PricingSection` component within `PropositionCard`
+ */
 export declare type PricingSectionClassNames = {
+    /** Wrapper container for the pricing section */
     base?: string;
+    /** Product price text (one-time payment - only visible for phone propositions)
+     * @example "+ 100,- eenmalig" */
     productPrice?: string;
+    /** Monthly fee container */
     monthlyFee?: string;
+    /** Monthly fee value text (price per month)
+     * @example "10,-" */
     monthlyFeeValue?: string;
+    /** Monthly fee label text
+     * @example "/mnd" */
     monthlyFeeLabel?: string;
+    /** Promotion text for monthly fee
+     * @example "12 mnd van 10,- voor:" */
     promotionText?: 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;
-    productPrice?: number;
+    /** Product price text (one-time payment - only visible for phone propositions)
+     * @example "+ 100,- eenmalig" */
+    productPrice?: string;
+    /** Class slots for styling */
     classNames?: PricingSectionClassNames;
 };
 
-export declare function ProductResults({ filterOptions, limit, classNames, }: ProductResultsProps): JSX.Element;
+declare type ProductCategory = 'sim-only-proposition' | 'smartphone-proposition' | 'phone-and-subscription' | 'fixed-proposition';
+
+export declare function ProductResults({ productCategory, filterOptions, initialSelectedFilters, limit, propositionCardLayout, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
 
+/**
+ * ClassNames for styling different parts of the `ProductResults` component
+ */
 export declare type ProductResultsClassNames = {
+    /** Wrapper container for the entire product results */
     base?: string;
-    filterSidebarWrapper?: string;
-    filterSidebar?: FilterSidebarClassNames;
+    /** Active filters component class styling slots - see type `ActiveFilterChipsClassNames` */
+    activeFilterChips?: ActiveFilterChipsClassNames;
+    /** SortSelect component class styling slots - see type `SortSelectClassNames` */
+    sortSelect?: SortSelectClassNames;
+    /** Filters component class styling slots (both filters in sidebar and in modal) - see type `FiltersClassNames` */
+    filters?: FiltersClassNames;
+    /** 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;
+    /** 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;
 };
 
 export declare type ProductResultsProps = {
+    /** Product type of the results */
+    productCategory: ProductCategory;
+    /** Filter options to display */
     filterOptions?: FilterOption[];
+    /** 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 */
+    profile?: Profile;
+    /** Callback function to handle profile changes */
+    onProfileChange?: (profile: Partial<Profile>) => void;
 };
 
+/**
+ * ClassNames for styling the `ProductSection` component within `PropositionCard`
+ */
 export declare type ProductSectionClassNames = {
+    /** Wrapper container for the entire product section */
     base?: string;
+    /** Image wrapper, it handles alignment, placement, and general appearance for the product image */
+    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;
-    specifications?: ProductSpecification[];
+    /** 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;
 };
 
-declare interface ProductSpecification {
-    title: string;
-}
-
+declare type Profile = z.infer<typeof profileSchema>;
+
+declare const profileSchema: z_2.ZodObject<{
+    keepCurrentMsisdn: z_2.ZodOptional<z_2.ZodBoolean>;
+    currentSubscriptionType: z_2.ZodOptional<z_2.ZodEnum<{
+        subscription: "subscription";
+        prepaid: "prepaid";
+    }>>;
+    currentProviderSlug: z_2.ZodOptional<z_2.ZodString>;
+    currentFixedProviderScope: z_2.ZodOptional<z_2.ZodString>;
+    currentMobileProviders: z_2.ZodOptional<z_2.ZodArray<z_2.ZodObject<{
+        scope: z_2.ZodString;
+        value: z_2.ZodString;
+    }, z_2.core.$strip>>>;
+    customerSegment: z_2.ZodOptional<z_2.ZodNullable<z_2.ZodString>>;
+    address: z_2.ZodOptional<z_2.ZodObject<{
+        postcode: z_2.ZodString;
+        number: z_2.ZodString;
+        numberAddon: z_2.ZodPipe<z_2.ZodOptional<z_2.ZodString>, z_2.ZodTransform<string | undefined, string | undefined>>;
+        street: z_2.ZodString;
+        city: z_2.ZodString;
+    }, z_2.core.$strip>>;
+}, z_2.core.$strip>;
+
+/**
+ * ClassNames for styling the `PromotionsList` component within `PropositionCard`
+ */
 export declare type PromotionsListClassNames = {
+    /** Wrapper container for the promotions list */
     base?: string;
+    /** Individual special/modification promotion item
+     * @example "€4,50 korting per maand" */
     item?: string;
-    icon?: string;
+    /** Checkmark icon for each special promotion item */
+    specialPromotionIcon?: string;
+    /** Checkmark icon for each modification promotion item */
+    modificationPromotionIcon?: string;
 };
 
 export declare type PromotionsListProps = {
-    promotions: string[];
-    className?: string;
+    /** Special promotions to display */
+    specialPromotions: string[];
+    /** Modification promotions to display */
+    modificationPromotions: string[];
+    /** Class slots for styling */
     classNames?: PromotionsListClassNames;
 };
 
-export declare function PropositionCard({ className, href, productTitle, productSubtitle, productImageUrl, productImageAlt, propositionTitle, propositionSubtitle, propositionImageUrl, propositionImageAlt, propositionSpecifications, monthlyFee, tcoPerMonth, specialPromotions, modificationPromotions, monthlyFeePromotionText, deliveryText, urgentText, productSpecifications, productStockStatus, productReviewCount, productReviewScore, productPrice, deviceDiscount, classNames, ...props }: PropositionCardProps): JSX.Element;
+export declare function PropositionCard({ horizontal, ...props }: PropositionCardProps): JSX.Element;
 
+/**
+ * ClassNames for styling different parts of the `PropositionCard` component
+ */
 export declare type PropositionCardClassNames = {
+    /** Main card wrapper */
     card?: string;
+    /** Card header wrapper around `productSection` and `propositionHeader` */
     header?: string;
+    /** Card body wrapper around `specifications`, `urgentChip` and `promotionsList` */
     body?: string;
+    /** Card footer wrapper around `deliveryText`, `pricingSection` and `button` */
     footer?: string;
+    /** Image wrapper for main product or proposition image on Horizontal card
+     *
+     * It handles alignment, placement, and general appearance for the product image */
+    imageWrapper?: string;
+    /** Main product or proposition image on Horizontal card */
+    image?: string;
+    /** Product section (only visible for phone propositions) class styling slots - see type `ProductSectionClassNames` */
     productSection?: ProductSectionClassNames;
+    /** Proposition header class styling slots - see type `PropositionHeaderClassNames` */
     propositionHeader?: PropositionHeaderClassNames;
+    /** Pricing section class styling slots - see type `PricingSectionClassNames` */
     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"
+     * - "350 / 400 Mb/s"
+     * - "66 (60 HD)"
+     * - "Via TV app" */
     specifications?: string;
+    /** 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 = {
-    className?: string;
+    /** Whether the proposition is disabled */
+    disabled?: boolean;
+    /** Link to the proposition page */
     href: string;
+    /** Product title
+     * @example "iPhone 17" */
     productTitle?: string;
+    /** Product subtitle (brand)
+     * @example "Apple" */
     productSubtitle?: string;
+    /** Product image URL */
     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;
-    productPrice?: number;
+    /** Product price
+     * @example "100,-" */
+    productPrice?: string;
+    /** Proposition title
+     * @example "30 GB" */
     propositionTitle: string;
+    /** Proposition subtitle
+     * @example "Onbp min / sms" */
     propositionSubtitle: string;
+    /** Proposition image URL */
     propositionImageUrl: string;
+    /** Proposition image alt text */
     propositionImageAlt: string;
+    /** Proposition specifications */
     propositionSpecifications?: {
+        slug: string;
         title: string;
-        icon: ReactNode;
     }[];
+    /** Monthly fee for subscription
+     * @example "10,-" */
     monthlyFee: string;
+    /** Average total cost per month
+     * @example "10,-" */
     tcoPerMonth: string;
+    /** Special promotions
+     * @example ["Geen aansluitingskosten"] */
     specialPromotions: string[];
+    /** Modification promotions
+     * @example ["€ 4,50 korting per maand"] */
     modificationPromotions: string[];
+    /** Monthly fee promotion text
+     * @example "12 mnd van 10,- voor:" */
     monthlyFeePromotionText?: string;
-    deviceDiscount?: number;
-    deliveryText?: string;
+    /** 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;
+    /** Class slots for styling */
     classNames?: PropositionCardClassNames;
+    horizontal?: boolean;
 };
 
+/**
+ * ClassNames for styling the `PropositionHeader` component within `PropositionCard`
+ */
 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 */
+    imageWrapper?: string;
+    /** Proposition provider image element*/
     image?: string;
+    /** Proposition title text
+     * @example "30 GB"
+     * @example "100 Mb/s" */
     title?: string;
+    /** Proposition subtitle text
+     * @example "Onbp min / sms"
+     * @example "Glasvezel" */
     subtitle?: string;
 };
 
 export declare type PropositionHeaderProps = {
+    /** Proposition title text
+     * @example "30 GB"
+     * @example "100 Mb/s" */
     title: string;
+    /** Proposition subtitle text
+     * @example "Onbp min / sms"
+     * @example "Glasvezel" */
     subtitle: string;
+    /** Proposition image URL */
     imageUrl: string;
+    /** Proposition image alt text */
     imageAlt: string;
+    /** Whether the proposition has a product/phone */
     hasProduct: boolean;
+    /** Class slots for styling */
     classNames?: PropositionHeaderClassNames;
+    horizontal?: boolean;
+};
+
+export declare function RadioFilter({ id, options, value, onChange, classNames, }: RadioFilterProps): JSX.Element;
+
+/**
+ * ClassNames for styling different parts of the `RadioFilter` component
+ */
+export declare type RadioFilterClassNames = {
+    /** Radio group */
+    radioGroup: {
+        /** Radio group root wrapper, it wraps the label and the wrapper */
+        base?: string;
+        /** Radio group wrapper, it wraps all radio items */
+        wrapper?: string;
+        /** Radio group label, it is placed before the wrapper */
+        label?: string;
+        /** Description slot for the radio group */
+        description?: string;
+        /** Error message slot for the radio group */
+        errorMessage?: string;
+    };
+    /** Individual radio located within `radioGroup` */
+    radio: {
+        /** Radio root wrapper, it wraps all elements */
+        base?: string;
+        /** Radio wrapper, it wraps the control element */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the radio state */
+        hiddenInput?: string;
+        /** Label and description wrapper */
+        labelWrapper?: string;
+        /** The label text associated with the radio */
+        label?: string;
+        /** Control element, it is the circle element */
+        control?: string;
+        /** Description slot for the radio */
+        description?: string;
+    };
+};
+
+export declare type RadioFilterProps = {
+    /** Unique identifier for this filter */
+    id: string;
+    /** Available options to display as radio options
+     * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
+    options: string[] | number[];
+    /** Currently selected value */
+    value?: string | number;
+    /** 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;
 
+/**
+ * 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;
-    slider?: 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;
-    marks?: 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;
 };
 
-export declare function SelectFilter({ options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
+export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
 
+/**
+ * ClassNames for styling different parts of the `SelectFilter` component
+ */
 export declare type SelectFilterClassNames = {
-    base?: string;
-    checkbox?: string;
-    label?: string;
-    wrapper?: string;
-    icon?: string;
+    /** Checkbox group */
+    checkboxGroup: {
+        /** Checkbox group root wrapper, it wraps the label and the wrapper */
+        base?: string;
+        /** Checkbox group wrapper, it wraps all checkboxes */
+        wrapper?: string;
+        /** Checkbox group label, it is placed before the wrapper */
+        label?: string;
+        /** The description of the checkbox group */
+        description?: string;
+        /** The error message of the checkbox group */
+        errorMessage?: string;
+    };
+    /** Individual checkboxes located within `checkboxGroup` */
+    checkbox: {
+        /** Checkbox wrapper, it handles alignment, placement, and general appearance */
+        base?: string;
+        /** An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the checkbox state */
+        hiddenInput?: string;
+        /** Icon within the checkbox, controlling size, visibility, and changes when checked */
+        icon?: string;
+        /** The text associated with the checkbox */
+        label?: string;
+    };
 };
 
 export declare type SelectFilterProps = {
+    /** Unique identifier for this filter */
     id: string;
-    options: string[];
-    values?: string[];
+    /** Available options to display as checkboxes
+     * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
+    options: string[] | number[];
+    /** Currently selected values */
+    values?: string[] | number[];
+    /** Callback when selection changes */
     onChange: (values: string[]) => void;
+    /** Class slots for styling */
     classNames?: SelectFilterClassNames;
 };
 
+declare type SortSelectClassNames = {
+    description?: string;
+    errorMessage?: string;
+    label?: string;
+    base?: string;
+    value?: string;
+    selectorIcon?: string;
+    endContent?: string;
+    trigger?: string;
+    mainWrapper?: string;
+    innerWrapper?: string;
+    spinner?: string;
+    listboxWrapper?: string;
+    listbox?: ListBoxClassNames;
+    popoverContent?: PopoverContentClassNames;
+    helperWrapper?: string;
+    endWrapper?: string;
+};
+
 export { }