@mobielnl/elements 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,12 +1,20 @@
-import { CardProps } from '@heroui/card';
-import { default as default_2 } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-export declare function ElementsRoot({ children }: ElementsRootProps): JSX.Element;
+export declare type ElementsClassNames = {
+    root?: string;
+    productResults?: ProductResultsClassNames;
+    propositionCard?: PropositionCardClassNames;
+    filterSidebar?: FilterSidebarClassNames;
+    rangeFilter?: RangeFilterClassNames;
+    selectFilter?: SelectFilterClassNames;
+};
+
+export declare function ElementsRoot({ children, classNames }: ElementsRootProps): JSX.Element;
 
 export declare type ElementsRootProps = {
     children: ReactNode;
+    classNames?: ElementsClassNames;
 };
 
 declare type FilterOption = {
@@ -20,7 +28,15 @@ declare type FilterOption = {
     unit?: string;
 };
 
-export declare function FilterSidebar({ filters, activeFilters, onFilterChange, onClearAll, className, }: FilterSidebarProps): JSX.Element;
+export declare function FilterSidebar({ filters, activeFilters, onFilterChange, onClearAll, className, classNames, }: FilterSidebarProps): JSX.Element;
+
+export declare type FilterSidebarClassNames = {
+    base?: string;
+    clearButton?: string;
+    filterGroup?: string;
+    filterLabel?: string;
+    filtersContainer?: string;
+};
 
 export declare type FilterSidebarProps = {
     filters: FilterOption[];
@@ -28,6 +44,7 @@ export declare type FilterSidebarProps = {
     onFilterChange: (filter: FilterValue) => void;
     onClearAll: () => void;
     className?: string;
+    classNames?: FilterSidebarClassNames;
 };
 
 declare type FilterValue = {
@@ -35,16 +52,109 @@ declare type FilterValue = {
     value: string | number | [number, number] | string[];
 };
 
-export declare function ProductResults({ filterOptions, limit }: ProductResultsProps): JSX.Element;
+export declare type FooterInfoClassNames = {
+    base?: string;
+    averagePrice?: string;
+    deviceDiscount?: string;
+};
 
-declare type ProductResultsProps = {
+export declare type FooterInfoProps = {
+    deviceDiscount?: number;
+    tcoPerMonth?: number;
+    classNames?: FooterInfoClassNames;
+};
+
+export declare type PricingSectionClassNames = {
+    base?: string;
+    productPrice?: string;
+    monthlyFee?: string;
+    monthlyFeeValue?: string;
+    monthlyFeeLabel?: string;
+    promotionText?: string;
+};
+
+export declare type PricingSectionProps = {
+    monthlyFeePromotionText?: string;
+    monthlyFee: string;
+    productPrice?: number;
+    classNames?: PricingSectionClassNames;
+};
+
+export declare function ProductResults({ filterOptions, limit, classNames, }: ProductResultsProps): JSX.Element;
+
+export declare type ProductResultsClassNames = {
+    base?: string;
+    filterSidebarWrapper?: string;
+    filterSidebar?: FilterSidebarClassNames;
+    resultsGrid?: string;
+    propositionCard?: PropositionCardClassNames;
+};
+
+export declare type ProductResultsProps = {
     filterOptions?: FilterOption[];
     limit?: number;
+    classNames?: ProductResultsClassNames;
 };
 
-export declare function PropositionCard({ href, productTitle, productSubtitle, productImageUrl, productImageAlt, propositionTitle, propositionSubtitle, propositionImageUrl, propositionImageAlt, propositionSpecifications, monthlyFee, tcoPerMonth, specialPromotions, modificationPromotions, monthlyFeePromotionText, deliveryText, urgentText, productSpecifications, productStockStatus, productReviewCount, productReviewScore, productPrice, deviceDiscount, className, ...props }: PropositionCardProps): JSX.Element;
+export declare type ProductSectionClassNames = {
+    base?: string;
+    image?: string;
+    title?: string;
+    subtitle?: string;
+    stockStatus?: string;
+    reviewScore?: string;
+    reviewCount?: string;
+    specifications?: string;
+};
+
+export declare type ProductSectionProps = {
+    title: string;
+    subtitle: string;
+    imageUrl: string;
+    imageAlt: string;
+    specifications?: ProductSpecification[];
+    stockStatus?: string;
+    reviewCount?: number;
+    reviewScore?: number;
+    classNames?: ProductSectionClassNames;
+};
+
+declare interface ProductSpecification {
+    title: string;
+}
+
+export declare type PromotionsListClassNames = {
+    base?: string;
+    item?: string;
+    icon?: string;
+};
+
+export declare type PromotionsListProps = {
+    promotions: string[];
+    className?: string;
+    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 type PropositionCardClassNames = {
+    card?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    productSection?: ProductSectionClassNames;
+    propositionHeader?: PropositionHeaderClassNames;
+    pricingSection?: PricingSectionClassNames;
+    promotionsList?: PromotionsListClassNames;
+    footerInfo?: FooterInfoClassNames;
+    specifications?: string;
+    urgentChip?: string;
+    deliveryText?: string;
+    button?: string;
+};
 
 export declare type PropositionCardProps = {
+    className?: string;
     href: string;
     productTitle?: string;
     productSubtitle?: string;
@@ -63,7 +173,7 @@ export declare type PropositionCardProps = {
     propositionImageAlt: string;
     propositionSpecifications?: {
         title: string;
-        icon: default_2.ReactNode;
+        icon: ReactNode;
     }[];
     monthlyFee: string;
     tcoPerMonth: string;
@@ -73,9 +183,33 @@ export declare type PropositionCardProps = {
     deviceDiscount?: number;
     deliveryText?: string;
     urgentText?: string;
-} & CardProps;
+    classNames?: PropositionCardClassNames;
+};
+
+export declare type PropositionHeaderClassNames = {
+    base?: string;
+    image?: string;
+    title?: string;
+    subtitle?: string;
+};
+
+export declare type PropositionHeaderProps = {
+    title: string;
+    subtitle: string;
+    imageUrl: string;
+    imageAlt: string;
+    hasProduct: boolean;
+    classNames?: PropositionHeaderClassNames;
+};
+
+export declare function RangeFilter({ min, max, step, unit, value, onChange, classNames, }: RangeFilterProps): JSX.Element;
 
-export declare function RangeFilter({ min, max, step, unit, value, onChange, }: RangeFilterProps): JSX.Element;
+export declare type RangeFilterClassNames = {
+    base?: string;
+    slider?: string;
+    label?: string;
+    marks?: string;
+};
 
 export declare type RangeFilterProps = {
     id: string;
@@ -85,15 +219,25 @@ export declare type RangeFilterProps = {
     unit?: string;
     value?: [number, number];
     onChange: (value: [number, number]) => void;
+    classNames?: RangeFilterClassNames;
 };
 
-export declare function SelectFilter({ options, values, onChange }: SelectFilterProps): JSX.Element;
+export declare function SelectFilter({ options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
+
+export declare type SelectFilterClassNames = {
+    base?: string;
+    checkbox?: string;
+    label?: string;
+    wrapper?: string;
+    icon?: string;
+};
 
 export declare type SelectFilterProps = {
     id: string;
     options: string[];
     values?: string[];
     onChange: (values: string[]) => void;
+    classNames?: SelectFilterClassNames;
 };
 
 export { }

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@mobielnl/elements",
+  "version": "0.0.3",
+  "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
-  "version": "0.0.1",
   "type": "module",
+  "homepage": "https://elements.mobiel.nl",
+  "keywords": [
+    "mobiel.nl",
+    "mobielnl",
+    "websend",
+    "elements"
+  ],
   "files": [
     "dist"
   ],
@@ -15,15 +23,20 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/elements.js",
       "require": "./dist/elements.umd.cjs",
       "default": "./dist/elements.js"
     },
-    "./style.css": "./dist/elements.css"
+    "./style.css": "./dist/elements.css",
+    "./package.json": "./package.json"
   },
   "sideEffects": [
     "**/*.css"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -67,7 +80,7 @@
     "swr": "^2.3.2",
     "tailwindcss": "^4.1.11",
     "typescript": "~5.8.3",
-    "vite": "^7.1.2",
+    "vite": "7.1.5",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.2.4"
   },