@prijsvrijtechsupport/ui 0.0.35 → 0.0.36

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

@@ -1,12 +1,5 @@
-import '../src/globals.css';
-export declare const parameters: {
-    actions: {
-        argTypesRegex: string;
-    };
-    controls: {
-        matchers: {
-            color: RegExp;
-            date: RegExp;
-        };
-    };
-};
+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/index.cjs

@@ -1762,8 +1762,8 @@ const IconCocktail = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_r
 		d: "M14.1133 2.41675C15.7701 2.41675 17.1133 3.75989 17.1133 5.41675C17.1133 7.0736 15.7701 8.41675 14.1133 8.41675C13.6742 8.41669 13.2587 8.32315 12.8848 8.15503C12.7668 8.102 12.6533 8.04073 12.5439 7.97339C12.2728 7.80642 11.9307 7.83126 11.6875 8.02222L11.5898 8.11401L8.96387 11.0701C8.82175 11.2301 8.75432 11.4435 8.7793 11.656C8.77968 11.6593 8.78027 11.6628 8.78027 11.6667V17.4998C8.78027 17.9139 9.11609 18.2497 9.53027 18.2498H10.833C10.879 18.2498 10.917 18.2877 10.917 18.3337C10.9168 18.3796 10.8789 18.4167 10.833 18.4167H6.66699C6.62108 18.4167 6.58318 18.3796 6.58301 18.3337C6.58301 18.2877 6.62097 18.2498 6.66699 18.2498H7.86328C8.27749 18.2498 8.61328 17.914 8.61328 17.4998V11.6667C8.61328 11.6628 8.61388 11.6592 8.61426 11.656C8.63927 11.4434 8.57183 11.2301 8.42969 11.0701L3.27246 5.26343C3.25458 5.24321 3.25201 5.22943 3.25098 5.22144C3.24956 5.20985 3.25053 5.19309 3.25879 5.17456C3.26726 5.1557 3.27934 5.14309 3.28906 5.13647C3.29576 5.13192 3.30771 5.12476 3.33496 5.12476H10.5107C10.8447 5.12455 11.1379 4.90365 11.2305 4.58276C11.2948 4.3599 11.3845 4.14752 11.4961 3.94897C12.0092 3.03643 12.9837 2.42151 14.1006 2.41675H14.1133ZM5.18945 5.29175C4.89438 5.29187 4.6269 5.46503 4.50586 5.73413C4.38485 6.00346 4.43285 6.31902 4.62891 6.53979L5.49023 7.50952C5.61786 7.65321 5.79401 7.73988 5.98047 7.75757C5.97615 7.94381 6.04071 8.12882 6.16895 8.27319L8.13672 10.488C8.27905 10.6483 8.48294 10.74 8.69727 10.74C8.91151 10.7399 9.11553 10.6482 9.25781 10.488L10.4414 9.15601C10.6207 8.95411 10.675 8.67407 10.5918 8.42261C10.6437 8.40522 10.6952 8.38974 10.7441 8.37085C10.9753 8.28158 11.1808 8.17627 11.3467 8.07983C11.4155 8.0398 11.4784 7.98899 11.5312 7.92944L12.7646 6.53979C12.9607 6.31902 13.0097 6.00349 12.8887 5.73413C12.7827 5.49848 12.5642 5.33637 12.3135 5.29956L12.2041 5.29175H5.18945ZM14.04 2.58472C13.5274 2.5979 13.0467 2.7472 12.6357 2.99878C12.2329 3.24543 11.8971 3.5902 11.6602 3.99976C11.526 4.23173 11.5253 4.51759 11.6592 4.74976C11.7931 4.98196 12.0415 5.12476 12.3096 5.12476H14.0596C14.0627 5.12476 14.0658 5.12558 14.0684 5.12573C14.0863 5.12687 14.0958 5.13115 14.1016 5.13452C14.1086 5.13865 14.1178 5.14524 14.126 5.15698C14.145 5.18438 14.1466 5.21369 14.1426 5.22925C14.1416 5.23305 14.1393 5.23704 14.1367 5.24194C14.134 5.24697 14.1293 5.25423 14.1211 5.26343L12.7285 6.83276C12.5687 7.01269 12.5045 7.25801 12.5566 7.49292C12.6088 7.72789 12.7712 7.92391 12.9922 8.01929C13.337 8.16801 13.7165 8.2497 14.1133 8.24976C15.0146 8.24976 15.8182 7.8284 16.3359 7.17456C16.7181 6.69174 16.9473 6.0797 16.9473 5.41675C16.9473 3.85194 15.6781 2.58374 14.1133 2.58374C14.0888 2.58374 14.0644 2.58409 14.04 2.58472Z",
 		fill: "currentColor",
 		stroke: "currentColor",
-		"stroke-width": "1.5",
-		"stroke-linejoin": "round"
+		strokeWidth: "1.5",
+		strokeLinejoin: "round"
 	})
 });
 
@@ -1880,10 +1880,8 @@ const Dropdown = ({ className, loading, dropdownItems, selectedItem, onClick, dr
 	};
 	(0, react.useEffect)(() => {
 		const detectBrand = () => {
-			console.log("Dropdown useEffect - dropdownIcon prop:", dropdownIcon);
 			if (dropdownIcon) {
 				setDetectedIcon(dropdownIcon);
-				console.log("Dropdown - setting detectedIcon from dropdownIcon:", dropdownIcon);
 				return;
 			}
 			const element = triggerRef.current?.closest("[data-brand]") || document.documentElement.querySelector("[data-brand]") || document.documentElement;
@@ -4157,7 +4155,7 @@ const PageRating = ({ rating, ratingsCount, text, className }) => {
 					rating
 				})
 			}), text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-white font-bold text-sm",
+				className: "text-white font-bold text-sm whitespace-nowrap",
 				children: text
 			})]
 		})
@@ -4334,8 +4332,6 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 		return disabled || option?.disabled;
 	};
 	const isDisabledSingle = (optionId) => {
-		console.log("disabledSingle", disabledSingle);
-		console.log("optionId", optionId);
 		return disabledSingle && optionId === disabledSingle;
 	};
 	const isActive = (optionId) => {
@@ -4814,11 +4810,11 @@ const AccordionItem = ({ className, item, isOpen, onToggle,...props }) => {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "flex justify-between w-full py-4",
+			className: "flex justify-between w-full py-4 items-center",
 			"aria-expanded": resolvedIsOpen,
 			onClick: () => onToggle ? onToggle() : setUncontrolledIsOpen((v) => !v),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "w-10 h-10",
+				className: "w-10 h-10 items-center flex",
 				children: icon
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -5099,7 +5095,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 					children: scrollSnaps.map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"aria-label": `Go to slide ${index + 1}`,
-						className: cn("pointer-events-auto h-2 w-2 rounded-full bg-transparent border-2 border-white", index === selectedIndex && "bg-white"),
+						className: cn("pointer-events-auto cursor-pointer h-2 w-2 rounded-full bg-transparent border-2 border-white", index === selectedIndex && "bg-white"),
 						onClick: () => scrollTo(index)
 					}, index))
 				})]
@@ -5116,7 +5112,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": "Previous slide",
-					className: cn("pointer-events-auto ml-2 inline-flex size-9 items-center justify-center rounded-full bg-white text-gray-900 shadow", !canScrollPrev && "opacity-50"),
+					className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center rounded-full bg-white text-gray-900 shadow", !canScrollPrev && "opacity-50"),
 					onClick: scrollPrev,
 					disabled: !canScrollPrev,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5126,7 +5122,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": "Next slide",
-					className: cn("pointer-events-auto mr-2 inline-flex size-9 items-center justify-center rounded-full bg-white text-gray-900 shadow", !canScrollNext && "opacity-50"),
+					className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center rounded-full bg-white text-gray-900 shadow", !canScrollNext && "opacity-50"),
 					onClick: scrollNext,
 					disabled: !canScrollNext,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5140,7 +5136,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 				children: scrollSnaps.map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": `Go to slide ${index + 1}`,
-					className: cn("h-2 w-2 rounded-full bg-gray-300", index === selectedIndex && "bg-gray-900"),
+					className: cn("h-2 w-2 rounded-full cursor-pointer bg-gray-300", index === selectedIndex && "bg-gray-900"),
 					onClick: () => scrollTo(index)
 				}, index))
 			})
@@ -9127,7 +9123,7 @@ const Calendar = ({ className, month, year = 2026,...props }) => {
 						"aria-pressed": active,
 						onClick: () => handleDayClick(day),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: (0, clsx.default)("w-8 h-8 p-2 flex justify-center items-center", active && "bg-primary text-white rounded-full ", !disabled && !active && !subActive && "hover:bg-primary/20 hover:rounded-full "),
+							className: (0, clsx.default)("w-8 h-8 p-2 flex justify-center items-center cursor-pointer", active && "bg-primary text-white rounded-full ", !disabled && !active && !subActive && "hover:bg-primary/20 hover:rounded-full "),
 							children: day
 						})
 					}, testId);
@@ -10979,7 +10975,7 @@ const Weather = ({ className, weatherItems, title, direction = "horizontal",...p
 
 //#endregion
 //#region src/components/collection/index.tsx
-const Collection = ({ className, images, collectionTitle, collectionDescription, "data-testid": dataTestId = "collection",...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+const Collection = ({ className, images, collectionTitle, collectionDescription, shareAction, editAction, "data-testid": dataTestId = "collection",...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-component": "collection",
 	"data-testid": dataTestId,
 	className: (0, clsx.default)(className, "rounded-sm overflow-hidden bg-white"),
@@ -11025,15 +11021,25 @@ const Collection = ({ className, images, collectionTitle, collectionDescription,
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "m-5 gap-2 flex flex-row items-start",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconShare, {
-				className: "text-dark-600",
-				width: 24,
-				height: 24
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconEdit, {
-				className: "text-dark-600",
-				width: 24,
-				height: 24
-			}) })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				variant: "icon",
+				className: "cursor-pointer",
+				onClick: shareAction,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconShare, {
+					className: "text-dark-600 hover:text-dark-500",
+					width: 24,
+					height: 24
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				variant: "icon",
+				className: "cursor-pointer",
+				onClick: editAction,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconEdit, {
+					className: "text-dark-600 hover:text-dark-500",
+					width: 24,
+					height: 24
+				})
+			})]
 		})]
 	})]
 });