@mobielnl/elements 0.0.3 → 0.1.0

package/README.md

@@ -31,7 +31,7 @@ import "@mobielnl/elements/style.css"; // can also be imported in (global) CSS f
 export default function Example() {
   return (
     <ElementsRoot>
-      <ProductResults filterOptions={[]} />
+      <ProductResults />
     </ElementsRoot>
   );
 }
@@ -52,7 +52,7 @@ You can customize component styling using the `classNames` prop.
 ```tsx
 import { ProductResults, type ProductResultsClassNames } from "@mobielnl/elements";
 
-const customClassNames: ProductResultsClassNames = {
+const productResultsClassNames: ProductResultsClassNames = {
   propositionCard: {
     title: "text-5xl font-extrabold text-secondary",
     pricingSection: {
@@ -62,7 +62,7 @@ const customClassNames: ProductResultsClassNames = {
 };
 
 export default function Example() {
-  return <ProductResults filterOptions={[]} classNames={customClassNames} />;
+  return <ProductResults classNames={productResultsClassNames} />;
 }
 ```
 
@@ -96,10 +96,19 @@ export default function Example() {
     <!-- MobielNL UMD bundle attaches global `Elements` -->
     <script src="../dist/elements.umd.cjs"></script>
 
-    <!-- Render MobielNL Button -->
+    <!-- Render MobielNL ProductResults -->
     <script>
+      const productResultsClassNames = {
+        propositionCard: {
+          title: "text-5xl font-extrabold text-secondary",
+          pricingSection: {
+            monthlyFeeValue: "text-red-500",
+          },
+        },
+      };
+
       ReactDOM.createRoot(document.getElementById("mobielnl-product-results")).render(
-        React.createElement(Elements.ProductResults, { filterOptions: [] })
+        React.createElement(Elements.ProductResults, { classNames: productResultsClassNames })
       );
     </script>
   </body>
@@ -135,134 +144,137 @@ Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
 
 ```css
 .mobielnl-elements {
-  --heroui-background: 0 0% 100%;
-  --heroui-foreground: 232 68% 21%;
-
-  /* Default */
-  --heroui-default-50: 37 100% 96%;
-  --heroui-default-100: 39 100% 92%;
-  --heroui-default-200: 36 100% 83%;
-  --heroui-default-300: 35 100% 72%;
-  --heroui-default-400: 31 99% 61%;
-  --heroui-default-500: 29 98% 51%;
-  --heroui-default-600: 25 93% 48%;
-  --heroui-default-700: 22 91% 40%;
-  --heroui-default-800: 19 81% 34%;
-  --heroui-default-900: 21 82% 27%;
-  --heroui-default: 27 97% 49%;
-  --heroui-default-foreground: 0 0% 100%;
-
-  /* Primary */
-  --heroui-primary-50: 219 68% 95%;
-  --heroui-primary-100: 218 71% 93%;
-  --heroui-primary-200: 213 97% 87%;
-  --heroui-primary-300: 212 96% 78%;
-  --heroui-primary-400: 213 95% 68%;
-  --heroui-primary-500: 218 89% 61%;
-  --heroui-primary-600: 223 72% 49%;
-  --heroui-primary-700: 228 70% 38%;
-  --heroui-primary-800: 231 69% 33%;
-  --heroui-primary-900: 232 68% 21%;
-  --heroui-primary: 231 69% 33%;
-  --heroui-primary-foreground: 0 0% 100%;
-
-  /* Secondary */
-  --heroui-secondary-50: 220 31% 94%;
-  --heroui-secondary-100: 218 23% 91%;
-  --heroui-secondary-200: 217 15% 83%;
-  --heroui-secondary-300: 217 19% 70%;
-  --heroui-secondary-400: 218 17% 59%;
-  --heroui-secondary-500: 218 14% 51%;
-  --heroui-secondary-600: 218 18% 39%;
-  --heroui-secondary-700: 218 19% 30%;
-  --heroui-secondary-800: 218 22% 26%;
-  --heroui-secondary-900: 216 21% 23%;
-  --heroui-secondary: 218 18% 39%;
-  --heroui-secondary-foreground: 0 0% 100%;
+  --mobielnl-background: 0 0% 100%;
+  --mobielnl-foreground: 232 68% 21%;
+
+  /* Default (Neutral) */
+  --mobielnl-default-50: 0 0% 98%;
+  --mobielnl-default-100: 0 0% 96%;
+  --mobielnl-default-200: 0 0% 89%;
+  --mobielnl-default-300: 0 0% 82%;
+  --mobielnl-default-400: 0 0% 65%;
+  --mobielnl-default-500: 0 0% 52%;
+  --mobielnl-default-600: 0 0% 44%;
+  --mobielnl-default-700: 0 0% 34%;
+  --mobielnl-default-800: 0 0% 25%;
+  --mobielnl-default-900: 0 0% 13%;
+  --mobielnl-default: 0 0% 52%;
+  --mobielnl-default-foreground: 232 68% 21%;
+
+  /* Primary (Blue) */
+  --mobielnl-primary-50: 219 68% 95%;
+  --mobielnl-primary-100: 218 71% 93%;
+  --mobielnl-primary-200: 213 97% 87%;
+  --mobielnl-primary-300: 212 96% 78%;
+  --mobielnl-primary-400: 213 95% 68%;
+  --mobielnl-primary-500: 218 89% 61%;
+  --mobielnl-primary-600: 223 72% 49%;
+  --mobielnl-primary-700: 228 70% 38%;
+  --mobielnl-primary-800: 231 69% 33%;
+  --mobielnl-primary-900: 232 68% 21%;
+  --mobielnl-primary: 231 69% 33%;
+  --mobielnl-primary-foreground: 0 0% 100%;
+
+  /* Secondary (Orange) */
+  --mobielnl-secondary-50: 37 100% 96%;
+  --mobielnl-secondary-100: 39 100% 92%;
+  --mobielnl-secondary-200: 36 100% 83%;
+  --mobielnl-secondary-300: 35 100% 72%;
+  --mobielnl-secondary-400: 31 99% 61%;
+  --mobielnl-secondary-500: 29 98% 51%;
+  --mobielnl-secondary-600: 25 93% 48%;
+  --mobielnl-secondary-700: 22 91% 40%;
+  --mobielnl-secondary-800: 19 81% 34%;
+  --mobielnl-secondary-900: 21 82% 27%;
+  --mobielnl-secondary: 27 97% 49%;
+  --mobielnl-secondary-foreground: 0 0% 100%;
 
   /* Success */
-  --heroui-success-50: 92 60% 95%;
-  --heroui-success-100: 93 60% 89%;
-  --heroui-success-200: 93 58% 80%;
-  --heroui-success-300: 94 56% 67%;
-  --heroui-success-400: 95 52% 55%;
-  --heroui-success-500: 96 53% 42%;
-  --heroui-success-600: 97 56% 35%;
-  --heroui-success-700: 98 51% 27%;
-  --heroui-success-800: 99 45% 23%;
-  --heroui-success-900: 100 40% 20%;
-  --heroui-success: 97 56% 35%;
-  --heroui-success-foreground: 0 0% 100%;
+  --mobielnl-success-50: 92 60% 95%;
+  --mobielnl-success-100: 93 60% 89%;
+  --mobielnl-success-200: 93 58% 80%;
+  --mobielnl-success-300: 94 56% 67%;
+  --mobielnl-success-400: 95 52% 55%;
+  --mobielnl-success-500: 96 53% 42%;
+  --mobielnl-success-600: 97 56% 35%;
+  --mobielnl-success-700: 98 51% 27%;
+  --mobielnl-success-800: 99 45% 23%;
+  --mobielnl-success-900: 100 40% 20%;
+  --mobielnl-success: 97 56% 35%;
+  --mobielnl-success-foreground: 0 0% 100%;
 
   /* Warning */
-  --heroui-warning-50: 54 100% 96%;
-  --heroui-warning-100: 55 93% 89%;
-  --heroui-warning-200: 55 95% 77%;
-  --heroui-warning-300: 53 94% 65%;
-  --heroui-warning-400: 50 94% 56%;
-  --heroui-warning-500: 44 90% 53%;
-  --heroui-warning-600: 39 93% 44%;
-  --heroui-warning-700: 33 88% 37%;
-  --heroui-warning-800: 29 80% 31%;
-  --heroui-warning-900: 28 76% 26%;
-  --heroui-warning: 39 93% 44%;
-  --heroui-warning-foreground: 0 0% 100%;
+  --mobielnl-warning-50: 54 100% 96%;
+  --mobielnl-warning-100: 55 93% 89%;
+  --mobielnl-warning-200: 55 95% 77%;
+  --mobielnl-warning-300: 53 94% 65%;
+  --mobielnl-warning-400: 50 94% 56%;
+  --mobielnl-warning-500: 44 90% 53%;
+  --mobielnl-warning-600: 39 93% 44%;
+  --mobielnl-warning-700: 33 88% 37%;
+  --mobielnl-warning-800: 29 80% 31%;
+  --mobielnl-warning-900: 28 76% 26%;
+  --mobielnl-warning: 39 93% 44%;
+  --mobielnl-warning-foreground: 0 0% 100%;
 
   /* Danger */
-  --heroui-danger-50: 0 71% 97%;
-  --heroui-danger-100: 0 80% 94%;
-  --heroui-danger-200: 0 85% 89%;
-  --heroui-danger-300: 0 83% 82%;
-  --heroui-danger-400: 0 80% 71%;
-  --heroui-danger-500: 0 74% 60%;
-  --heroui-danger-600: 0 63% 51%;
-  --heroui-danger-700: 0 65% 42%;
-  --heroui-danger-800: 0 62% 35%;
-  --heroui-danger-900: 0 55% 31%;
-  --heroui-danger: 0 63% 51%;
-  --heroui-danger-foreground: 0 0% 100%;
+  --mobielnl-danger-50: 0 71% 97%;
+  --mobielnl-danger-100: 0 80% 94%;
+  --mobielnl-danger-200: 0 85% 89%;
+  --mobielnl-danger-300: 0 83% 82%;
+  --mobielnl-danger-400: 0 80% 71%;
+  --mobielnl-danger-500: 0 74% 60%;
+  --mobielnl-danger-600: 0 63% 51%;
+  --mobielnl-danger-700: 0 65% 42%;
+  --mobielnl-danger-800: 0 62% 35%;
+  --mobielnl-danger-900: 0 55% 31%;
+  --mobielnl-danger: 0 63% 51%;
+  --mobielnl-danger-foreground: 0 0% 100%;
 
   /* Content */
-  --heroui-content1: 0 0% 100%;
-  --heroui-content1-foreground: 232 68% 21%;
-  --heroui-content2: 230 75% 98%;
-  --heroui-content2-foreground: 232 68% 21%;
-  --heroui-content3: 220 67% 96%;
-  --heroui-content3-foreground: 232 68% 21%;
-  --heroui-content4: 219 68% 95%;
-  --heroui-content4-foreground: 232 68% 21%;
+  --mobielnl-content1: 0 0% 100%;
+  --mobielnl-content1-foreground: 232 68% 21%;
+  --mobielnl-content2: 230 75% 98%;
+  --mobielnl-content2-foreground: 232 68% 21%;
+  --mobielnl-content3: 220 67% 96%;
+  --mobielnl-content3-foreground: 232 68% 21%;
+  --mobielnl-content4: 219 68% 95%;
+  --mobielnl-content4-foreground: 232 68% 21%;
 
   /* Radius */
-  --heroui-radius-small: 8px;
-  --heroui-radius-medium: 12px;
-  --heroui-radius-large: 16px;
+  --mobielnl-radius-small: 8px;
+  --mobielnl-radius-medium: 12px;
+  --mobielnl-radius-large: 16px;
 
   /* Border Width */
-  --heroui-border-width-small: 1px;
-  --heroui-border-width-medium: 2px;
-  --heroui-border-width-large: 3px;
+  --mobielnl-border-width-small: 1px;
+  --mobielnl-border-width-medium: 2px;
+  --mobielnl-border-width-large: 3px;
 
   /* Box Shadow */
-  --heroui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06),
-    0px 0px 1px 0px rgb(0 0 0 / 0.3);
-  --heroui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08),
-    0px 0px 1px 0px rgb(0 0 0 / 0.3);
-  --heroui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12),
-    0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --mobielnl-box-shadow-small:
+    0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px
+    rgb(0 0 0 / 0.3);
+  --mobielnl-box-shadow-medium:
+    0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px
+    rgb(0 0 0 / 0.3);
+  --mobielnl-box-shadow-large:
+    0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px
+    rgb(0 0 0 / 0.3);
 
   /* Other */
-  --heroui-hover-opacity: 0.8;
-  --heroui-focus: 222 84% 54%;
-  --heroui-disabled-opacity: 0.5;
-  --heroui-divider: 218 23% 91%;
-  --heroui-overlay: 0 0% 0%;
+  --mobielnl-hover-opacity: 0.8;
+  --mobielnl-focus: 222 84% 54%;
+  --mobielnl-disabled-opacity: 0.5;
+  --mobielnl-divider: 218 18% 39%;
+  --mobielnl-overlay: 0 0% 0%;
 }
 
 /* Optional: dark theme overrides on the wrapper */
 [data-theme="dark"].mobielnl-elements,
 .mobielnl-elements[data-theme="dark"] {
-  --heroui-background: 0 0% 0%;
-  --heroui-foreground: 0 0% 94%;
+  --mobielnl-background: 0 0% 0%;
+  --mobielnl-foreground: 0 0% 94%;
 }
 ```