@prijsvrijtechsupport/ui 0.0.34 → 0.0.36

package/dist/.storybook/preview.d.ts

@@ -0,0 +1,5 @@
+import "../src/globals.css";
+export declare const preview: import("@storybook/react").ReactPreview<import("@storybook/react").ReactTypes & import("@storybook/addon-docs").DocsTypes & import("@storybook/addon-a11y").A11yTypes & {
+    csf4: true;
+}>;
+export default preview;

package/dist/components/priceCheck/styles.css

@@ -64,4 +64,10 @@
   position: absolute;
   right: var(--price-minus-right);
   bottom: var(--price-minus-bottom);
+}
+
+/* Disabled state with grayscale filter */
+.price-check-disabled {
+  filter: grayscale(100%);
+  opacity: 0.7;
 }

package/dist/components/pvPopup/styles.css

@@ -1,3 +1,12 @@
 .popup-title {
     font-family: var(--popup-title-font-family);
+}
+
+.with-backdrop::backdrop {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Alternative approach for browsers that don't support ::backdrop */
+[data-popover].with-backdrop::backdrop {
+    background-color: rgba(0, 0, 0, 0.5) !important;
 }

package/dist/components/topHeaderMenu/styles.css

@@ -38,3 +38,22 @@
   font-size: 14px;
   font-family: var(--font-open-sans), sans-serif;
 }
+
+.flying-heart-icon {
+  animation: flyToHeart 1s ease-out forwards;
+}
+
+@keyframes flyToHeart {
+  0% {
+    transform: translate(var(--start-x), var(--start-y)) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--end-x), var(--end-y)) scale(0.8);
+    opacity: 0;
+  }
+}

package/dist/dist/index.css

@@ -554,6 +554,12 @@ button.btn-secondary:hover:active {
   bottom: var(--price-minus-bottom);
 }
 
+/* Disabled state with grayscale filter */
+.price-check-disabled {
+  filter: grayscale(100%);
+  opacity: 0.7;
+}
+
 .toggle {
     background-color: color-mix(in srgb, var(--toggle-inactive-background-color) 20%, transparent);
     container-type: inline-size;
@@ -630,6 +636,25 @@ button.btn-secondary:hover:active {
   font-family: var(--font-open-sans), sans-serif;
 }
 
+.flying-heart-icon {
+  animation: flyToHeart 1s ease-out forwards;
+}
+
+@keyframes flyToHeart {
+  0% {
+    transform: translate(var(--start-x), var(--start-y)) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--end-x), var(--end-y)) scale(0.8);
+    opacity: 0;
+  }
+}
+
 
 .filter-button {
   background-color: var(--filter-button-background-color);
@@ -1093,6 +1118,15 @@ button.btn-secondary:hover:active {
     font-family: var(--popup-title-font-family);
 }
 
+.with-backdrop::backdrop {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Alternative approach for browsers that don't support ::backdrop */
+[data-popover].with-backdrop::backdrop {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
 .rotated-image-0,
 .rotated-image-1 {
     box-shadow: 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
@@ -1193,6 +1227,7 @@ button.btn-secondary:hover:active {
 /**
  * Custom Utilities
  * Additional utility classes for the UI Package
+ * These styles are scoped to prevent global conflicts
  */
 
 /* Custom utilities */
@@ -1203,172 +1238,157 @@ button.btn-secondary:hover:active {
 }
 
 @layer utilities {
-  /* Animation utility classes */
+  /* Animation utility classes - Only for UI components with data-pv-ui */
+  [data-pv-ui] .animate-spin,
   .animate-spin {
     animation: spin 1s linear infinite;
   }
+  [data-pv-ui] .animate-spin-slow,
   .animate-spin-slow {
     animation: spin 2s linear infinite;
   }
+  [data-pv-ui] .animate-spin-once,
   .animate-spin-once {
     animation: spin 2s linear forwards;
   }
 
+  [data-pv-ui] .animate-plane-bounce,
   .animate-plane-bounce {
     animation: airplane-bounce 5s ease-in-out infinite;
   }
 
+  [data-pv-ui] .animate-cloud-float,
   .animate-cloud-float {
     animation: cloud-move 7s infinite linear;
   }
 
+  [data-pv-ui] .animate-cloud-float-2,
   .animate-cloud-float-2 {
     animation: cloud-move 7s -5s infinite linear;
   }
 
+  [data-pv-ui] .animate-cloud-float-3,
   .animate-cloud-float-3 {
     animation: cloud-move 7s -10s infinite linear;
   }
 
-  /* Duration utility classes */
+  /* Duration utility classes - Only for UI components with data-pv-ui */
+  [data-pv-ui] .duration-sidebar,
   .duration-sidebar {
-    transition-duration: var(--transition-duration-sidebar);
+    transition-duration: var(--pv-transition-duration-sidebar, 300ms);
   }
 
+  [data-pv-ui] .duration-1000,
   .duration-1000 {
     transition-duration: 1000ms;
   }
 
+  [data-pv-ui] .duration-700,
   .duration-700 {
     transition-duration: 700ms;
   }
 
-  /* Gradient background utility classes */
+  /* Gradient background utility classes - Only for UI components with data-pv-ui */
+  [data-pv-ui] .bg-linear-gradient-y,
   .bg-linear-gradient-y {
-    background-image: var(--color-linear-gradient-y);
+    background-image: var(--pv-color-linear-gradient-y);
   }
+  [data-pv-ui] .bg-linear-gradient-x,
   .bg-linear-gradient-x {
-    background-image: var(--color-linear-gradient-x);
+    background-image: var(--pv-color-linear-gradient-x);
   }
+  [data-pv-ui] .bg-gradient-blue-pink,
   .bg-gradient-blue-pink {
-    background-image: var(--color-linear-gradient-x) !important;
+    background-image: var(--pv-color-linear-gradient-x) !important;
   }
+  [data-pv-ui] .bg-gradient-blue-green-y,
   .bg-gradient-blue-green-y {
-    background-image: var(--color-gradient-blue-green-y);
+    background-image: var(--pv-color-gradient-blue-green-y);
   }
+  [data-pv-ui] .bg-gradient-blue-green-x,
   .bg-gradient-blue-green-x {
-    background-image: var(--color-gradient-blue-green-x);
+    background-image: var(--pv-color-gradient-blue-green-x);
   }
+  [data-pv-ui] .bg-gradient-calendar,
   .bg-gradient-calendar {
-    background-image: var(--color-gradient-calendar);
+    background-image: var(--pv-color-gradient-calendar);
   }
+  [data-pv-ui] .hover\:bg-gradient-calendar:hover,
   .hover\:bg-gradient-calendar:hover {
-    background-image: var(--color-gradient-calendar);
+    background-image: var(--pv-color-gradient-calendar);
   }
   @media (min-width: 768px) {
+    [data-pv-ui] .md\:hover\:bg-gradient-calendar:hover,
     .md\:hover\:bg-gradient-calendar:hover {
-      background-image: var(--color-gradient-calendar);
+      background-image: var(--pv-color-gradient-calendar);
     }
   }
+  [data-pv-ui] .bg-nav-gradient,
   .bg-nav-gradient {
-    background-image: var(--color-nav-gradient);
+    background-image: var(--pv-color-nav-gradient);
   }
+  [data-pv-ui] .bg-nav-gradient-mobile,
   .bg-nav-gradient-mobile {
-    background-image: var(--color-nav-gradient-mobile);
+    background-image: var(--pv-color-nav-gradient-mobile);
   }
 
-  /* Toast notification colors */
+  /* Toast notification colors - Scoped with prefix */
   :root {
-    --toastify-color-info: #2a67f6;
-    --toastify-color-success: #10d1bb;
-    --toastify-color-warning: #f8ec5b;
-    --toastify-color-error: #ed3f55;
-  }
-
-  /* Base element styles */
-  * {
-    box-sizing: inherit;
-  }
-
-  html {
-    -ms-overflow-style: scrollbar;
-    -webkit-tap-highlight-color: rgba(#000, 0);
-    font-family: var(--font-open-sans), sans-serif;
-    @reference min-h-screen;
-    @reference overflow-y-scroll;
-    @reference text-base;
-  }
-
-  body {
-    @reference m-0;
-    @reference bg-ultra-light-blue;
+    --pv-toastify-color-info: #2a67f6;
+    --pv-toastify-color-success: #10d1bb;
+    --pv-toastify-color-warning: #f8ec5b;
+    --pv-toastify-color-error: #ed3f55;
   }
 
-  /* Focus styles */
-  button:focus-visible {
+  /* Focus styles - Only for UI components with data-pv-ui */
+  [data-pv-ui] button:focus-visible,
+  button.pv-button:focus-visible {
     @reference focus:outline-hidden;
     @reference focus:ring-2;
     @reference focus:ring-offset-2;
   }
 
-  /* Link styles */
-  a {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--color-accent-blue);
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  /* Base layer styles */
+  /* Base layer styles - Only for UI components with data-pv-ui */
   @layer base {
-    button:not(:disabled),
-    [role="button"]:not(:disabled) {
+    [data-pv-ui] button:not(:disabled),
+    [data-pv-ui] [role="button"]:not(:disabled) {
       cursor: pointer;
     }
   }
 
-  /* Heading styles */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @reference m-0;
-  }
-
-  /* Editor styles */
-  .is-editor-empty:first-of-type::before {
+  /* Editor styles - Only for UI components with data-pv-ui */
+  [data-pv-ui] .is-editor-empty:first-of-type::before {
     @reference text-gray-800;
     color: #333333 !important;
   }
 
-  /* List styles */
-  ul {
+  /* List styles - Only for UI components with data-pv-ui */
+  [data-pv-ui] ul {
     @reference list-disc;
   }
 
-  ol {
+  [data-pv-ui] ol {
     @reference list-decimal;
   }
 }
 
-/* Table animations */
+/* Table animations - Only for UI components with data-pv-ui */
+[data-pv-ui] .table-animation-exit,
 .table-animation-exit {
   opacity: 1;
   transition: opacity 300ms ease-out;
 }
+[data-pv-ui] .table-animation-exit-active,
 .table-animation-exit-active {
   opacity: 0;
   transition: opacity 300ms ease-out;
 }
+[data-pv-ui] .table-animation-enter,
 .table-animation-enter {
   opacity: 0;
   transition: opacity 300ms ease-in;
 }
+[data-pv-ui] .table-animation-enter-active,
 .table-animation-enter-active {
   opacity: 1;
   transition: opacity 300ms ease-in;