@prijsvrijtechsupport/ui 0.0.29 → 0.0.31

package/dist/components/button/styles.css

@@ -45,6 +45,9 @@ button.btn-secondary:hover:active {
 }
 
 /* Button primary variant with CSS custom properties */
+.btn-glow:hover {
+  background-color: var(--primary-btn-hover-color);
+}
 .btn-primary {
   background-color: var(--primary-btn-color);
   border-color: transparent;

package/dist/components/counterIcon/index.d.ts

@@ -5,6 +5,9 @@ interface DividerProps {
     count: number;
     allowZero?: boolean;
     onClick?: () => void;
+    id?: string;
+    isPop?: boolean;
+    isFilled?: boolean;
 }
-export declare const CounterIcon: ({ className, icon, count, allowZero, onClick, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CounterIcon: ({ className, icon, id, count, allowZero, onClick, isPop, isFilled, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rangeSlider/RangeSlider.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RangeSlider } from "./index";
+declare const meta: Meta<typeof RangeSlider>;
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const PrimaryVariant: Story;
+export declare const SecondaryVariant: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const Disabled: Story;
+export declare const CustomRange: Story;
+export declare const PriceRange: Story;
+export declare const Interactive: Story;
+export declare const AllVariants: Story;
+export declare const AllSizes: Story;

package/dist/components/rangeSlider/index.d.ts

@@ -0,0 +1,16 @@
+export interface RangeSliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "className" | "onChange" | "size"> {
+    "data-testid"?: string;
+    className?: string;
+    min?: number;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    step?: number;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+    variant?: "default" | "primary" | "secondary";
+    size?: "sm" | "md" | "lg";
+    showValue?: boolean;
+    valueFormatter?: (value: number) => string;
+}
+export declare const RangeSlider: any;

package/dist/components/rangeSlider/rangeSlider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/topHeaderMenu/index.d.ts

@@ -3,6 +3,7 @@ interface TopHeaderMenuProps {
     "data-testid"?: string;
     className?: string;
     menuItems?: React.ReactNode[];
+    onHeartClick?: () => void;
 }
-export declare const TopHeaderMenu: ({ className, menuItems, ...props }: TopHeaderMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TopHeaderMenu: ({ className, menuItems, onHeartClick, ...props }: TopHeaderMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/weather/Weather.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Weather>;
 export default meta;
 type Story = StoryObj<typeof Weather>;
 export declare const Default: Story;
+export declare const Vertical: Story;

package/dist/components/weather/icons/cloud_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_lightning.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudLightning: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_moon.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudMoon: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_off.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudOff: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_04.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining04: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_05.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining05: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_06.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining06: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_snowing_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSnowing01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_snowing_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSnowing02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSun01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconcloudsun02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconcloudsun03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/lightning_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconlightning01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/lightning_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconlightning02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoon01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoon02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_eclipse.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmooneclipse: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_star.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoonstar: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/snowflake_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsnowflake01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/snowflake_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsnowflake02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconSun: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sunrise.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunrise: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sunset.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunset: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_cold.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometercold: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_warm.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometerwarm: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/waves.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwaves: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/index.d.ts

@@ -1,6 +1,15 @@
+interface WeatherItem {
+    icon: React.ReactNode;
+    temperature: string;
+    temperature_percent: number;
+    month: number;
+}
 interface WeatherProps {
     "data-testid"?: string;
     className?: string;
+    weatherItems: WeatherItem[];
+    title: string;
+    direction?: 'horizontal' | 'vertical';
 }
-export declare const Weather: ({ className, ...props }: WeatherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Weather: ({ className, weatherItems, title, direction, ...props }: WeatherProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/weather/weather.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dist/index.css

@@ -378,6 +378,9 @@ button.btn-secondary:hover:active {
 }
 
 /* Button primary variant with CSS custom properties */
+.btn-glow:hover {
+  background-color: var(--primary-btn-hover-color);
+}
 .btn-primary {
   background-color: var(--primary-btn-color);
   border-color: transparent;
@@ -1424,6 +1427,44 @@ button.btn-secondary:hover:active {
   }
 }
 
+@keyframes flyToTarget {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+  20% {
+    transform: translate(0, 0) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(
+      calc(var(--end-x) - var(--start-x)),
+      calc(var(--end-y) - var(--start-y))
+    ) scale(0.9);
+    opacity: 1;
+  }
+}
+
+@keyframes popEffect {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.flying-heart-icon {
+  animation: flyToTarget 1s cubic-bezier(0.25, -0.3, 0.75, 1.1) forwards;
+}
+
+.counter-icon-pop {
+  animation: popEffect 0.3s ease-out;
+}
+
 .tiptap {
   :first-child {
     margin-top: 0;
@@ -2003,5 +2044,149 @@ button.btn-secondary:hover:active {
   --popup-title-font-family: var(--font-lato), sans-serif;
 }
 
+/* Custom Range Slider Styles */
+.range-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  z-index: 10;
+  height: 16px; /* Match thumb height for proper alignment */
+}
+
+/* Track styles - Webkit browsers - DEFAULT (md) */
+.range-slider::-webkit-slider-track {
+  background: transparent;
+  height: 8px;
+  border-radius: 9999px;
+}
+
+/* Track styles - Firefox - DEFAULT (md) */
+.range-slider::-moz-range-track {
+  background: transparent;
+  height: 8px;
+  border-radius: 9999px;
+  border: none;
+}
+
+/* Thumb styles - Webkit browsers - DEFAULT (md) */
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: white;
+  border: 2px solid #3b82f6;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.15s ease-in-out;
+}
+
+.range-slider::-webkit-slider-thumb:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transform: scale(1.1);
+}
+
+.range-slider::-webkit-slider-thumb:active {
+  transform: scale(0.95);
+}
+
+/* Thumb styles - Firefox - DEFAULT (md) */
+.range-slider::-moz-range-thumb {
+  background: white;
+  border: 2px solid #3b82f6;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.15s ease-in-out;
+  border: none;
+}
+
+.range-slider::-moz-range-thumb:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transform: scale(1.1);
+}
+
+.range-slider::-moz-range-thumb:active {
+  transform: scale(0.95);
+}
+
+/* SMALL SIZE VARIANT */
+.range-slider[data-size="sm"] {
+  height: 12px !important;
+}
+
+.range-slider[data-size="sm"]::-webkit-slider-track {
+  height: 4px !important;
+}
+
+.range-slider[data-size="sm"]::-webkit-slider-thumb {
+  height: 12px !important;
+  width: 12px !important;
+  margin-top: 0 !important;
+}
+
+.range-slider[data-size="sm"]::-moz-range-track {
+  height: 4px !important;
+}
+
+.range-slider[data-size="sm"]::-moz-range-thumb {
+  height: 12px !important;
+  width: 12px !important;
+}
+
+/* LARGE SIZE VARIANT */
+.range-slider[data-size="lg"] {
+  height: 20px !important;
+}
+
+.range-slider[data-size="lg"]::-webkit-slider-track {
+  height: 12px !important;
+}
+
+.range-slider[data-size="lg"]::-webkit-slider-thumb {
+  height: 20px !important;
+  width: 20px !important;
+  margin-top: 0 !important;
+}
+
+.range-slider[data-size="lg"]::-moz-range-track {
+  height: 12px !important;
+}
+
+.range-slider[data-size="lg"]::-moz-range-thumb {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+/* Disabled state */
+.range-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.range-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Focus styles */
+.range-slider:focus {
+  outline: none;
+}
+
+.range-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+.range-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
 
 /*# sourceMappingURL=index.css.map*/