@clubmed/trident-ui 2.0.0-beta.74 → 2.0.0-beta.76

package/ui/criteria/CriteriaTransports.js

@@ -2,223 +2,273 @@
 import { t as e } from "../../chunks/clsx.js";
 import { ElasticHeight as t } from "../ElasticHeight.js";
 import { Button as n } from "../buttons/Button.js";
-import { Chip as r } from "../Chip.js";
-import { Switch as i } from "../forms/Switch.js";
-import { Radio as a } from "../forms/radios/Radio.js";
-import { RadioSelect as o } from "../forms/RadioSelect.js";
-import { TextField as s } from "../forms/TextField.js";
-import { RadioGroup as c } from "../forms/radios/RadioGroup.js";
-import { memo as l, useCallback as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Icon as m } from "@clubmed/trident-icons";
+import { Switch as r } from "../forms/Switch.js";
+import { Radio as i } from "../forms/radios/Radio.js";
+import { RadioSelect as a } from "../forms/RadioSelect.js";
+import { TextField as o } from "../forms/TextField.js";
+import { forwardRef as s, useId as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Icon as p } from "@clubmed/trident-icons";
 //#region lib/ui/criteria/CriteriaTransports.tsx
-var h = l(function({ option: t, isSelected: n, isSmall: r, onChange: i }) {
-	let a = u(() => {
-		i({
-			type: "select",
-			payload: n ? null : t.id
-		});
-	}, [
-		n,
-		i,
-		t.id
-	]);
-	return /* @__PURE__ */ p("button", {
-		"aria-pressed": n,
-		className: e("flex w-full items-center gap-12 text-left", r ? "rounded-8 px-8 py-4 text-b4" : "rounded-16 p-12 text-b3", n ? "bg-black text-white" : "bg-white"),
-		onClick: a,
-		type: "button",
-		children: [/* @__PURE__ */ f("span", {
-			className: "min-w-0 flex-1",
-			children: t.label
-		}), /* @__PURE__ */ f("span", {
-			className: "shrink-0 size-24",
-			children: n ? /* @__PURE__ */ f(m, {
+var m = s(({ airport: t, selected: n, onSelect: r, tabIndex: i = 0, onKeyDown: a, small: o = !0 }, s) => /* @__PURE__ */ f("div", {
+	ref: s,
+	role: "option",
+	"aria-selected": n,
+	tabIndex: i,
+	className: e("flex w-full cursor-pointer justify-between gap-12 text-left bg-white text-black transition-all aria-selected:invert", o ? "text-b4 px-8 py-4 rounded-8 items-center" : "text-b3 p-12 rounded-16 items-start"),
+	onClick: () => r(n ? null : t.code),
+	onKeyDown: (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r(n ? null : t.code)), a?.(e);
+	},
+	children: [/* @__PURE__ */ d("span", {
+		className: "font-normal",
+		children: t.name
+	}), /* @__PURE__ */ d("span", {
+		className: e("text-inherit shrink-0 transition-all duration-300 in-[[aria-selected=true]]:opacity-100 in-[[aria-selected=false]]:opacity-0"),
+		children: /* @__PURE__ */ d(p, {
+			"aria-hidden": !0,
+			name: "CheckDefault",
+			width: "24px",
+			className: "shrink-0"
+		})
+	})]
+})), h = ({ label: e, airports: t, selectedCode: n, onSelect: r }) => {
+	let i = c(), a = l([]), o = t.findIndex((e) => e.code === n), s = o >= 0 ? o : 0, u = (e, n) => {
+		let r = n;
+		if (e.key === "ArrowDown") r = Math.min(n + 1, t.length - 1);
+		else if (e.key === "ArrowUp") r = Math.max(n - 1, 0);
+		else return;
+		e.preventDefault(), a.current[r]?.focus();
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ d("div", {
+			className: "border-lightGrey border-b px-1 py-12",
+			children: /* @__PURE__ */ d("p", {
+				id: i,
+				className: "text-b3 font-semibold",
+				children: e
+			})
+		}), /* @__PURE__ */ d("div", {
+			role: "listbox",
+			"aria-labelledby": i,
+			className: "flex flex-col gap-4",
+			children: t.map((e, t) => /* @__PURE__ */ d(m, {
+				ref: (e) => {
+					a.current[t] = e;
+				},
+				airport: e,
+				selected: n === e.code,
+				onSelect: r,
+				tabIndex: t === s ? 0 : -1,
+				onKeyDown: (e) => u(e, t)
+			}, e.code))
+		})]
+	});
+}, g = ({ title: e, description: t }) => /* @__PURE__ */ f("div", {
+	className: "rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 mb-20",
+	children: [/* @__PURE__ */ f("div", {
+		className: "flex items-center gap-20",
+		children: [/* @__PURE__ */ d("div", {
+			className: "bg-lightSand rounded-full flex shrink-0 items-center justify-center p-12",
+			children: /* @__PURE__ */ d(p, {
 				"aria-hidden": !0,
-				name: "CheckDefault",
+				name: "GlobePlane",
 				width: "24px"
-			}) : null
+			})
+		}), /* @__PURE__ */ d("p", {
+			className: "text-b3 font-semibold",
+			children: e
 		})]
-	});
-}), g = l(function({ section: e, selectedId: t, isSmall: n, onChange: r }) {
-	return /* @__PURE__ */ p("div", {
-		className: "space-y-8",
-		children: [/* @__PURE__ */ f("div", {
-			className: "border-lightGrey border-b px-4 py-12",
-			children: /* @__PURE__ */ f("p", {
-				className: "text-b3 font-semibold",
-				children: e.title
+	}), /* @__PURE__ */ d("p", {
+		className: "text-b3 font-normal",
+		children: t
+	})]
+}), _ = ({ roundTripLabel: e, oneWayLabel: t, value: n = "roundtrip", onChange: r }) => {
+	let a = c();
+	return /* @__PURE__ */ f("div", {
+		role: "radiogroup",
+		className: "flex gap-20",
+		children: [/* @__PURE__ */ d(i, {
+			name: a,
+			value: "roundtrip",
+			checked: n === "roundtrip",
+			onChange: () => r?.("roundtrip"),
+			children: /* @__PURE__ */ d("span", {
+				className: "text-b3 font-normal",
+				children: e
+			})
+		}), /* @__PURE__ */ d(i, {
+			name: a,
+			value: "oneway",
+			checked: n === "oneway",
+			onChange: () => r?.("oneway"),
+			children: /* @__PURE__ */ d("span", {
+				className: "text-b3 font-normal",
+				children: t
 			})
-		}), /* @__PURE__ */ f("div", {
-			className: "space-y-4",
-			children: e.options.map((e) => /* @__PURE__ */ f(h, {
-				isSelected: e.id === t,
-				isSmall: n,
-				onChange: r,
-				option: e
-			}, e.id))
 		})]
 	});
-}), _ = ({ onReset: e, onApply: t, resetLabel: r, applyLabel: i, withSpacer: a }) => !e && !t ? null : /* @__PURE__ */ p("div", {
-	className: "flex items-center justify-between",
-	children: [e && r ? /* @__PURE__ */ f("button", {
-		className: "text-b3 cursor-pointer font-semibold underline",
-		onClick: e,
-		type: "button",
-		children: r
-	}) : a ? /* @__PURE__ */ f("span", {}) : null, t && i ? /* @__PURE__ */ f(n, {
-		color: "saffron",
-		onClick: t,
-		children: i
-	}) : null]
-}), v = ({ labels: n, title: l, variant: u = "card", mode: h = "b2c", enabled: v, sections: y, selectedId: b, className: x, onChange: S, onReset: C, onApply: w, promotionalCard: T, error: E, flightType: D, flightTypeLabels: O, flightClass: k, flightClassLabel: A, flightClasses: j, fromQuery: M, fromQueryLabel: N }) => {
-	let P = u === "card", F = h === "b2b", I = F, L = /* @__PURE__ */ p("div", {
-		className: "gap-12 flex flex-col flex-1 min-h-0",
-		children: [
-			/* @__PURE__ */ p("div", {
-				className: "space-y-8 px-8 pb-8",
-				children: [l ? /* @__PURE__ */ f("p", {
-					className: "text-b2 font-semibold",
-					children: l
-				}) : null, /* @__PURE__ */ p("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ f("p", {
-						className: "text-b3 font-semibold",
-						children: n.addTransportationFrom
-					}), /* @__PURE__ */ f(i, {
-						checked: v,
-						onChange: (e, t) => S({
-							type: "enabled",
-							payload: t
-						})
-					})]
-				})]
-			}),
-			/* @__PURE__ */ f(t, {
-				isExpanded: !F && !v && !!T,
-				children: /* @__PURE__ */ f("div", {
-					className: "pb-4 px-8",
-					children: T ? /* @__PURE__ */ p("div", {
-						className: "rounded-16 border-lightGrey bg-white border p-20 space-y-12",
-						children: [/* @__PURE__ */ p("div", {
-							className: "flex items-start gap-20",
-							children: [T.icon ? /* @__PURE__ */ f("div", {
-								className: "rounded-full bg-lightSand shrink-0 p-12",
-								children: /* @__PURE__ */ f(m, {
-									"aria-hidden": !0,
-									name: T.icon,
-									width: "24px"
-								})
-							}) : null, /* @__PURE__ */ f("p", {
-								className: "text-b3 font-semibold",
-								children: T.title
-							})]
-						}), /* @__PURE__ */ f("p", {
-							className: "text-b3",
-							children: T.description
-						})]
-					}) : null
-				})
-			}),
-			/* @__PURE__ */ f(t, {
-				isExpanded: v,
-				className: "flex-1 min-h-0",
-				innerClassName: "flex flex-col min-h-0",
-				children: /* @__PURE__ */ f("div", {
-					className: "flex flex-col gap-8 px-8 pb-4 min-h-0 flex-1",
-					children: E ? /* @__PURE__ */ f("div", {
-						className: "rounded-16 border-lightGrey bg-white border p-20",
-						children: /* @__PURE__ */ p("div", {
-							className: "flex items-center gap-20",
-							children: [/* @__PURE__ */ f(r, {
-								color: "sienna",
-								icon: "Error",
-								size: "size-48",
-								theme: "solid"
-							}), /* @__PURE__ */ f("p", {
-								className: "text-b3 font-semibold text-sienna",
-								children: E
-							})]
-						})
-					}) : /* @__PURE__ */ p(d, { children: [
-						F && O && D !== void 0 ? /* @__PURE__ */ p(c, {
-							name: "flightType",
-							value: D,
-							onChange: (e, t) => S({
-								type: "flightType",
-								payload: t
-							}),
-							children: [/* @__PURE__ */ f(a, {
-								value: "round-trip",
-								className: "text-b3",
-								children: O.roundTrip
-							}), /* @__PURE__ */ f(a, {
-								value: "one-way",
-								className: "text-b3",
-								children: O.oneWay
-							})]
-						}) : null,
-						F && A && k !== void 0 && j?.length ? /* @__PURE__ */ f(o, {
-							label: A,
-							name: "flightClass",
-							value: k,
-							options: j.map((e) => ({
-								value: e,
-								label: e
-							})),
-							onChange: (e, t) => S({
-								type: "flightClass",
-								payload: t
-							})
-						}) : null,
-						F && N && M !== void 0 ? /* @__PURE__ */ f(s, {
-							label: N,
-							name: N,
-							value: M,
-							icon: "Search",
-							placeholder: N,
-							onChange: (e, t) => S({
-								type: "fromQuery",
-								payload: t
-							})
-						}) : null,
-						/* @__PURE__ */ f("div", {
-							className: "flex flex-col gap-20 overflow-y-auto flex-1 min-h-0",
-							children: y.map((e) => /* @__PURE__ */ f(g, {
-								isSmall: I,
-								onChange: S,
-								section: e,
-								selectedId: b
-							}, e.title))
-						})
-					] })
-				})
+}, v = ({ message: e }) => /* @__PURE__ */ d("div", {
+	className: "rounded-16 border-lightGrey flex border bg-white p-20 mb-20",
+	children: /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-20",
+		children: [/* @__PURE__ */ d("div", {
+			className: "bg-lightSand rounded-full flex shrink-0 items-center justify-center p-12",
+			children: /* @__PURE__ */ d(p, {
+				"aria-hidden": !0,
+				name: "Error",
+				width: "24px",
+				className: "text-sienna"
 			})
-		]
-	});
-	return P ? /* @__PURE__ */ p("div", {
-		className: e("rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 max-h-full", x),
-		children: [/* @__PURE__ */ f("div", {
-			className: "rounded-16 bg-lightSand flex flex-col flex-1 min-h-0 py-20 px-12",
-			children: L
-		}), /* @__PURE__ */ f(_, {
-			applyLabel: n.apply,
-			onApply: w,
-			onReset: C,
-			resetLabel: n.reset,
-			withSpacer: !0
+		}), /* @__PURE__ */ d("p", {
+			className: "text-b3 font-semibold text-sienna",
+			children: e
 		})]
-	}) : /* @__PURE__ */ p("div", {
-		className: e("space-y-20 flex flex-col h-full", x),
-		children: [L, /* @__PURE__ */ f(_, {
-			applyLabel: n.apply,
-			onApply: w,
-			onReset: C,
-			resetLabel: n.reset
+	})
+}), y = ({ labels: i, title: s, variant: l = "card", mode: p = "b2c", enabled: m, topCities: y, otherCities: b, selectedAirportCode: x, className: S, onToggle: C, onSelect: w, onReset: T, onApply: E, b2bLabels: D, flightType: O = "roundtrip", onFlightTypeChange: k, cabinClass: A, cabinClassOptions: j, onCabinClassChange: M, departureQuery: N, onDepartureQueryChange: P, error: F }) => {
+	let I = l === "card", L = p === "b2b", R = c(), z = /* @__PURE__ */ f("div", {
+		className: "flex flex-col gap-8",
+		children: [s && /* @__PURE__ */ d("p", {
+			className: "text-b2 font-semibold",
+			children: s
+		}), /* @__PURE__ */ f("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ d("p", {
+				id: R,
+				className: "text-b3 font-semibold",
+				children: i.toggleLabel
+			}), /* @__PURE__ */ d(r, {
+				checked: m,
+				onChange: (e, t) => C(t),
+				"aria-labelledby": R
+			})]
 		})]
-	});
+	}), B = /* @__PURE__ */ f("div", {
+		className: "relative",
+		style: { timelineScope: "--airport-list" },
+		children: [/* @__PURE__ */ d("div", {
+			"aria-hidden": !0,
+			className: "absolute top-0 left-0 right-0 pointer-events-none z-10",
+			style: {
+				height: "20px",
+				background: "linear-gradient(to bottom, rgba(246,239,231,1), rgba(246,239,231,0))",
+				animationName: "criteria-transports-top-blur",
+				animationTimeline: "--airport-list",
+				animationRange: "0px 40px",
+				animationFillMode: "both",
+				animationTimingFunction: "linear",
+				opacity: 0
+			}
+		}), /* @__PURE__ */ f("div", {
+			role: "region",
+			"aria-label": i.topCitiesLabel || i.otherCitiesLabel,
+			tabIndex: 0,
+			className: "flex max-h-[420px] flex-col gap-20 pb-20 overflow-y-auto",
+			style: { scrollTimelineName: "--airport-list" },
+			children: [y.length > 0 && /* @__PURE__ */ d(h, {
+				label: i.topCitiesLabel,
+				airports: y,
+				selectedCode: x,
+				onSelect: w
+			}), b.length > 0 && /* @__PURE__ */ d(h, {
+				label: i.otherCitiesLabel,
+				airports: b,
+				selectedCode: x,
+				onSelect: w
+			})]
+		})]
+	}), V = L && N ? y.filter((e) => e.name.toLowerCase().includes(N.toLowerCase())) : y, H = L && N ? b.filter((e) => e.name.toLowerCase().includes(N.toLowerCase())) : b, U = /* @__PURE__ */ f("div", {
+		className: "relative",
+		style: { timelineScope: "--airport-list" },
+		children: [/* @__PURE__ */ d("div", {
+			"aria-hidden": !0,
+			className: "absolute top-0 left-0 right-0 pointer-events-none z-10",
+			style: {
+				height: "20px",
+				background: "linear-gradient(to bottom, rgba(246,239,231,1), rgba(246,239,231,0))",
+				animationName: "criteria-transports-top-blur",
+				animationTimeline: "--airport-list",
+				animationRange: "0px 40px",
+				animationFillMode: "both",
+				animationTimingFunction: "linear",
+				opacity: 0
+			}
+		}), /* @__PURE__ */ f("div", {
+			role: "region",
+			"aria-label": i.topCitiesLabel || i.otherCitiesLabel,
+			tabIndex: 0,
+			className: "flex max-h-[420px] flex-col gap-20 pb-20 overflow-y-auto",
+			style: { scrollTimelineName: "--airport-list" },
+			children: [V.length > 0 && /* @__PURE__ */ d(h, {
+				label: i.topCitiesLabel,
+				airports: V,
+				selectedCode: x,
+				onSelect: w
+			}), H.length > 0 && /* @__PURE__ */ d(h, {
+				label: i.otherCitiesLabel,
+				airports: H,
+				selectedCode: x,
+				onSelect: w
+			})]
+		})]
+	}), W = /* @__PURE__ */ f(u, { children: [z, /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d(t, {
+		isExpanded: m,
+		children: (L && D ? F ? /* @__PURE__ */ d(v, { message: F }) : /* @__PURE__ */ f("div", {
+			className: "flex flex-col gap-8",
+			children: [
+				/* @__PURE__ */ d(_, {
+					roundTripLabel: D.roundTripLabel,
+					oneWayLabel: D.oneWayLabel,
+					value: O,
+					onChange: k
+				}),
+				/* @__PURE__ */ d(a, {
+					label: D.cabinClassLabel,
+					value: A,
+					options: j,
+					onChange: M
+				}),
+				/* @__PURE__ */ d(o, {
+					label: D.departureDateLabel,
+					value: N,
+					icon: "Search",
+					onChange: P
+				}),
+				U
+			]
+		}) : null) ?? B
+	}), /* @__PURE__ */ d(t, {
+		isExpanded: !m,
+		children: /* @__PURE__ */ d(g, {
+			title: i.clubMedTransportTitle,
+			description: i.clubMedTransportDescription
+		})
+	})] })] }), G = (T || E) && /* @__PURE__ */ f("div", {
+		className: "flex items-center justify-between",
+		children: [T && i.reset ? /* @__PURE__ */ d("button", {
+			className: "text-b3 cursor-pointer font-semibold underline",
+			onClick: T,
+			type: "button",
+			children: i.reset
+		}) : /* @__PURE__ */ d("span", {}), E && i.apply && /* @__PURE__ */ d(n, {
+			color: "saffron",
+			onClick: E,
+			children: i.apply
+		})]
+	}), K = /* @__PURE__ */ d("style", { children: "\n      @keyframes criteria-transports-top-blur {\n        from { opacity: 0; }\n        to   { opacity: 1; }\n      }\n    " });
+	return I ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+		className: e("rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20", S),
+		children: [/* @__PURE__ */ d("div", {
+			className: "rounded-16 bg-lightSand flex flex-col gap-20 px-20 pt-20",
+			children: W
+		}), G]
+	}), K] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+		className: e("flex flex-col gap-20", S),
+		children: [W, G]
+	}), K] });
 };
 //#endregion
-export { v as CriteriaTransports };
+export { y as CriteriaTransports };
 
 //# sourceMappingURL=CriteriaTransports.js.map

package/ui/criteria/CriteriaTransports.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriteriaTransports.js","names":[],"sources":["../../../lib/ui/criteria/CriteriaTransports.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { memo, useCallback, type Dispatch, type FunctionComponent } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Chip } from '../Chip';\nimport { ElasticHeight } from '../ElasticHeight';\nimport { Button } from '../buttons/Button';\nimport { RadioSelect } from '../forms/RadioSelect';\nimport { Switch } from '../forms/Switch';\nimport { TextField } from '../forms/TextField';\nimport { Radio } from '../forms/radios/Radio';\nimport { RadioGroup } from '../forms/radios/RadioGroup';\n\nexport interface TransportOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransportSection {\n  title: string;\n  options: TransportOption[];\n}\n\nexport interface TransportPromotionalCard {\n  icon?: string;\n  title: string;\n  description: string;\n}\n\nexport interface CriteriaTransportsLabels {\n  addTransportationFrom: string;\n  reset?: string;\n  apply?: string;\n}\n\nexport type CriteriaTransportsAction =\n  | { type: 'enabled'; payload: boolean }\n  | { type: 'select'; payload: string | null }\n  | { type: 'flightType'; payload: 'round-trip' | 'one-way' }\n  | { type: 'flightClass'; payload: string }\n  | { type: 'fromQuery'; payload: string };\n\nexport interface CriteriaTransportsProps {\n  labels: CriteriaTransportsLabels;\n  title?: string;\n  /** card (default): white outer card with sand inner. flat: no background, content rendered directly */\n  variant?: 'card' | 'flat';\n  /** b2c (default): large items + promotional card. b2b: compact items + flight controls */\n  mode?: 'b2c' | 'b2b';\n  enabled: boolean;\n  sections: TransportSection[];\n  selectedId: string | null;\n  className?: string;\n  onChange: Dispatch<CriteriaTransportsAction>;\n  onReset?: () => void;\n  onApply?: () => void;\n  /** B2C: promotional card shown in the sand area when enabled=false */\n  promotionalCard?: TransportPromotionalCard;\n  /** Error message — shown instead of sections when enabled=true */\n  error?: string;\n  /** B2B: controlled flight type */\n  flightType?: 'round-trip' | 'one-way';\n  /** B2B: labels for the round-trip/one-way radio row */\n  flightTypeLabels?: { roundTrip: string; oneWay: string };\n  /** B2B: controlled selected class label */\n  flightClass?: string;\n  /** B2B: label for the class selector field */\n  flightClassLabel?: string;\n  /** B2B: available class options */\n  flightClasses?: string[];\n  /** B2B: controlled from/search query */\n  fromQuery?: string;\n  /** B2B: label for the from search field */\n  fromQueryLabel?: string;\n}\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\ninterface TransportOptionButtonProps {\n  option: TransportOption;\n  isSelected: boolean;\n  isSmall: boolean;\n  onChange: Dispatch<CriteriaTransportsAction>;\n}\n\n/** Toggle button for a single airport / transport option. */\nconst TransportOptionButton = memo(function TransportOptionButton({\n  option,\n  isSelected,\n  isSmall,\n  onChange,\n}: TransportOptionButtonProps) {\n  const handleClick = useCallback(() => {\n    onChange({ type: 'select', payload: isSelected ? null : option.id });\n  }, [isSelected, onChange, option.id]);\n\n  return (\n    <button\n      aria-pressed={isSelected}\n      className={clsx(\n        'flex w-full items-center gap-12 text-left',\n        isSmall ? 'rounded-8 px-8 py-4 text-b4' : 'rounded-16 p-12 text-b3',\n        isSelected ? 'bg-black text-white' : 'bg-white',\n      )}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <span className=\"min-w-0 flex-1\">{option.label}</span>\n      <span className=\"shrink-0 size-24\">\n        {isSelected ? <Icon aria-hidden name=\"CheckDefault\" width=\"24px\" /> : null}\n      </span>\n    </button>\n  );\n});\n\ninterface TransportSectionItemProps {\n  section: TransportSection;\n  selectedId: string | null;\n  isSmall: boolean;\n  onChange: Dispatch<CriteriaTransportsAction>;\n}\n\n/** A titled section with its list of selectable transport option buttons. */\nconst TransportSectionItem = memo(function TransportSectionItem({\n  section,\n  selectedId,\n  isSmall,\n  onChange,\n}: TransportSectionItemProps) {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"border-lightGrey border-b px-4 py-12\">\n        <p className=\"text-b3 font-semibold\">{section.title}</p>\n      </div>\n      <div className=\"space-y-4\">\n        {section.options.map((option) => (\n          <TransportOptionButton\n            key={option.id}\n            isSelected={option.id === selectedId}\n            isSmall={isSmall}\n            onChange={onChange}\n            option={option}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nconst Footer: FunctionComponent<{\n  onReset?: () => void;\n  onApply?: () => void;\n  resetLabel?: string;\n  applyLabel?: string;\n  withSpacer?: boolean;\n}> = ({ onReset, onApply, resetLabel, applyLabel, withSpacer }) => {\n  if (!onReset && !onApply) return null;\n  return (\n    <div className=\"flex items-center justify-between\">\n      {onReset && resetLabel ? (\n        <button\n          className=\"text-b3 cursor-pointer font-semibold underline\"\n          onClick={onReset}\n          type=\"button\"\n        >\n          {resetLabel}\n        </button>\n      ) : withSpacer ? (\n        <span />\n      ) : null}\n      {onApply && applyLabel ? (\n        <Button color=\"saffron\" onClick={onApply}>\n          {applyLabel}\n        </Button>\n      ) : null}\n    </div>\n  );\n};\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\nexport const CriteriaTransports: FunctionComponent<CriteriaTransportsProps> = ({\n  labels,\n  title,\n  variant = 'card',\n  mode = 'b2c',\n  enabled,\n  sections,\n  selectedId,\n  className,\n  onChange,\n  onReset,\n  onApply,\n  promotionalCard,\n  error,\n  flightType,\n  flightTypeLabels,\n  flightClass,\n  flightClassLabel,\n  flightClasses,\n  fromQuery,\n  fromQueryLabel,\n}) => {\n  const isCard = variant === 'card';\n  const isB2b = mode === 'b2b';\n  const isSmall = isB2b;\n\n  const sandContent = (\n    <div className=\"gap-12 flex flex-col flex-1 min-h-0\">\n      <div className=\"space-y-8 px-8 pb-8\">\n        {title ? <p className=\"text-b2 font-semibold\">{title}</p> : null}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-b3 font-semibold\">{labels.addTransportationFrom}</p>\n          <Switch\n            checked={enabled}\n            onChange={(_, val) => onChange({ type: 'enabled', payload: val })}\n          />\n        </div>\n      </div>\n\n      <ElasticHeight isExpanded={!isB2b && !enabled && !!promotionalCard}>\n        <div className=\"pb-4 px-8\">\n          {promotionalCard ? (\n            <div className=\"rounded-16 border-lightGrey bg-white border p-20 space-y-12\">\n              <div className=\"flex items-start gap-20\">\n                {promotionalCard.icon ? (\n                  <div className=\"rounded-full bg-lightSand shrink-0 p-12\">\n                    <Icon aria-hidden name={promotionalCard.icon as never} width=\"24px\" />\n                  </div>\n                ) : null}\n                <p className=\"text-b3 font-semibold\">{promotionalCard.title}</p>\n              </div>\n              <p className=\"text-b3\">{promotionalCard.description}</p>\n            </div>\n          ) : null}\n        </div>\n      </ElasticHeight>\n\n      <ElasticHeight\n        isExpanded={enabled}\n        className=\"flex-1 min-h-0\"\n        innerClassName=\"flex flex-col min-h-0\"\n      >\n        <div className=\"flex flex-col gap-8 px-8 pb-4 min-h-0 flex-1\">\n          {error ? (\n            <div className=\"rounded-16 border-lightGrey bg-white border p-20\">\n              <div className=\"flex items-center gap-20\">\n                <Chip color=\"sienna\" icon=\"Error\" size=\"size-48\" theme=\"solid\" />\n                <p className=\"text-b3 font-semibold text-sienna\">{error}</p>\n              </div>\n            </div>\n          ) : (\n            <>\n              {isB2b && flightTypeLabels && flightType !== undefined ? (\n                <RadioGroup\n                  name=\"flightType\"\n                  value={flightType}\n                  onChange={(_event, value) =>\n                    onChange({ type: 'flightType', payload: value as 'round-trip' | 'one-way' })\n                  }\n                >\n                  <Radio value=\"round-trip\" className=\"text-b3\">\n                    {flightTypeLabels.roundTrip}\n                  </Radio>\n                  <Radio value=\"one-way\" className=\"text-b3\">\n                    {flightTypeLabels.oneWay}\n                  </Radio>\n                </RadioGroup>\n              ) : null}\n\n              {isB2b && flightClassLabel && flightClass !== undefined && flightClasses?.length ? (\n                <RadioSelect\n                  label={flightClassLabel}\n                  name=\"flightClass\"\n                  value={flightClass}\n                  options={flightClasses.map((cls) => ({ value: cls, label: cls }))}\n                  onChange={(_event, value) => onChange({ type: 'flightClass', payload: value })}\n                />\n              ) : null}\n\n              {isB2b && fromQueryLabel && fromQuery !== undefined ? (\n                <TextField\n                  label={fromQueryLabel}\n                  name={fromQueryLabel}\n                  value={fromQuery}\n                  icon=\"Search\"\n                  placeholder={fromQueryLabel}\n                  onChange={(_event, value) =>\n                    onChange({ type: 'fromQuery', payload: value as string })\n                  }\n                />\n              ) : null}\n\n              <div className=\"flex flex-col gap-20 overflow-y-auto flex-1 min-h-0\">\n                {sections.map((section) => (\n                  <TransportSectionItem\n                    key={section.title}\n                    isSmall={isSmall}\n                    onChange={onChange}\n                    section={section}\n                    selectedId={selectedId}\n                  />\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n\n  if (!isCard) {\n    return (\n      <div className={clsx('space-y-20 flex flex-col h-full', className)}>\n        {sandContent}\n        <Footer\n          applyLabel={labels.apply}\n          onApply={onApply}\n          onReset={onReset}\n          resetLabel={labels.reset}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={clsx(\n        'rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 max-h-full',\n        className,\n      )}\n    >\n      <div className=\"rounded-16 bg-lightSand flex flex-col flex-1 min-h-0 py-20 px-12\">\n        {sandContent}\n      </div>\n      <Footer\n        applyLabel={labels.apply}\n        onApply={onApply}\n        onReset={onReset}\n        resetLabel={labels.reset}\n        withSpacer\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CriteriaTransports.js","names":[],"sources":["../../../lib/ui/criteria/CriteriaTransports.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport React, { forwardRef, type FunctionComponent, useId, useRef } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Button } from '../buttons/Button';\nimport { Switch } from '../forms/Switch';\nimport { ElasticHeight } from '../ElasticHeight';\nimport { Radio } from '../forms/radios/Radio';\nimport { RadioSelect } from '../forms/RadioSelect';\nimport type { RadioSelectOption } from '../forms/RadioSelect';\nimport { TextField } from '../forms/TextField';\n\nexport interface Airport {\n  code: string;\n  name: string;\n}\n\nexport interface CriteriaTransportsLabels {\n  toggleLabel: string;\n  topCitiesLabel: string;\n  otherCitiesLabel: string;\n  clubMedTransportTitle: string;\n  clubMedTransportDescription: string;\n  reset?: string;\n  apply?: string;\n}\n\nexport interface CriteriaTransportsB2BLabels {\n  roundTripLabel: string;\n  oneWayLabel: string;\n  cabinClassLabel: string;\n  departureDateLabel: string;\n}\n\nexport interface CriteriaTransportsProps {\n  labels: CriteriaTransportsLabels;\n  title?: string;\n  /** card (default): white outer card with sand inner. flat: no background, fields rendered directly */\n  variant?: 'card' | 'flat';\n  /** Switches between B2C (default) and B2B mode. B2B mode adds flight type, cabin class, and departure selectors. */\n  mode?: 'b2c' | 'b2b';\n  enabled: boolean;\n  topCities: Airport[];\n  otherCities: Airport[];\n  selectedAirportCode?: string | null;\n  className?: string;\n  onToggle: (enabled: boolean) => void;\n  onSelect: (code: string | null) => void;\n  onReset?: () => void;\n  onApply?: () => void;\n  // B2B-specific props (ignored in b2c mode)\n  b2bLabels?: CriteriaTransportsB2BLabels;\n  /** Currently selected flight type (B2B mode). Defaults to 'roundtrip'. */\n  flightType?: 'roundtrip' | 'oneway';\n  onFlightTypeChange?: (type: 'roundtrip' | 'oneway') => void;\n  /** Currently selected cabin class value (B2B mode). */\n  cabinClass?: string;\n  /** Options for the cabin class RadioSelect (B2B mode). */\n  cabinClassOptions?: RadioSelectOption<string>[];\n  onCabinClassChange?: (event: Event, value: string) => void;\n  /** Controlled value for the departure airport TextField; also used to filter the airport list. */\n  departureQuery?: string;\n  onDepartureQueryChange?: (event: Event, value: string) => void;\n  /** Error message shown in B2B mode when a prerequisite (e.g. resort selection) is missing. */\n  error?: string;\n}\n\nconst AirportItem = forwardRef<\n  HTMLDivElement,\n  {\n    airport: Airport;\n    selected: boolean;\n    onSelect: (code: string | null) => void;\n    tabIndex?: number;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n    small?: boolean;\n  }\n>(({ airport, selected, onSelect, tabIndex = 0, onKeyDown, small = true }, ref) => (\n  <div\n    ref={ref}\n    role=\"option\"\n    aria-selected={selected}\n    tabIndex={tabIndex}\n    className={clsx(\n      'flex w-full cursor-pointer justify-between gap-12 text-left bg-white text-black transition-all aria-selected:invert',\n      small ? 'text-b4 px-8 py-4 rounded-8 items-center' : 'text-b3 p-12 rounded-16 items-start',\n    )}\n    onClick={() => onSelect(selected ? null : airport.code)}\n    onKeyDown={(e) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect(selected ? null : airport.code);\n      }\n      onKeyDown?.(e);\n    }}\n  >\n    <span className=\"font-normal\">{airport.name}</span>\n    <span\n      className={clsx(\n        'text-inherit shrink-0 transition-all duration-300 in-[[aria-selected=true]]:opacity-100 in-[[aria-selected=false]]:opacity-0',\n      )}\n    >\n      <Icon aria-hidden name=\"CheckDefault\" width=\"24px\" className=\"shrink-0\" />\n    </span>\n  </div>\n));\n\nconst AirportGroup: FunctionComponent<{\n  label: string;\n  airports: Airport[];\n  selectedCode?: string | null;\n  onSelect: (code: string | null) => void;\n}> = ({ label, airports, selectedCode, onSelect }) => {\n  const labelId = useId();\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const selectedIndex = airports.findIndex((a) => a.code === selectedCode);\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, index: number) => {\n    let next = index;\n    if (e.key === 'ArrowDown') next = Math.min(index + 1, airports.length - 1);\n    else if (e.key === 'ArrowUp') next = Math.max(index - 1, 0);\n    else return;\n    e.preventDefault();\n    itemRefs.current[next]?.focus();\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"border-lightGrey border-b px-1 py-12\">\n        <p id={labelId} className=\"text-b3 font-semibold\">\n          {label}\n        </p>\n      </div>\n      <div role=\"listbox\" aria-labelledby={labelId} className=\"flex flex-col gap-4\">\n        {airports.map((airport, index) => (\n          <AirportItem\n            key={airport.code}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            airport={airport}\n            selected={selectedCode === airport.code}\n            onSelect={onSelect}\n            tabIndex={index === tabbableIndex ? 0 : -1}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nconst TransportCard: FunctionComponent<{ title: string; description: string }> = ({\n  title,\n  description,\n}) => (\n  <div className=\"rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20 mb-20\">\n    <div className=\"flex items-center gap-20\">\n      <div className=\"bg-lightSand rounded-full flex shrink-0 items-center justify-center p-12\">\n        <Icon aria-hidden name=\"GlobePlane\" width=\"24px\" />\n      </div>\n      <p className=\"text-b3 font-semibold\">{title}</p>\n    </div>\n    <p className=\"text-b3 font-normal\">{description}</p>\n  </div>\n);\n\nconst B2BFlightTypeSelector: FunctionComponent<{\n  roundTripLabel: string;\n  oneWayLabel: string;\n  value?: 'roundtrip' | 'oneway';\n  onChange?: (type: 'roundtrip' | 'oneway') => void;\n}> = ({ roundTripLabel, oneWayLabel, value = 'roundtrip', onChange }) => {\n  const groupName = useId();\n  return (\n    <div role=\"radiogroup\" className=\"flex gap-20\">\n      <Radio\n        name={groupName}\n        value=\"roundtrip\"\n        checked={value === 'roundtrip'}\n        onChange={() => onChange?.('roundtrip')}\n      >\n        <span className=\"text-b3 font-normal\">{roundTripLabel}</span>\n      </Radio>\n      <Radio\n        name={groupName}\n        value=\"oneway\"\n        checked={value === 'oneway'}\n        onChange={() => onChange?.('oneway')}\n      >\n        <span className=\"text-b3 font-normal\">{oneWayLabel}</span>\n      </Radio>\n    </div>\n  );\n};\n\nconst B2BErrorCard: FunctionComponent<{ message: string }> = ({ message }) => (\n  <div className=\"rounded-16 border-lightGrey flex border bg-white p-20 mb-20\">\n    <div className=\"flex items-center gap-20\">\n      <div className=\"bg-lightSand rounded-full flex shrink-0 items-center justify-center p-12\">\n        <Icon aria-hidden name=\"Error\" width=\"24px\" className=\"text-sienna\" />\n      </div>\n      <p className=\"text-b3 font-semibold text-sienna\">{message}</p>\n    </div>\n  </div>\n);\n\nexport const CriteriaTransports: FunctionComponent<CriteriaTransportsProps> = ({\n  labels,\n  title,\n  variant = 'card',\n  mode = 'b2c',\n  enabled,\n  topCities,\n  otherCities,\n  selectedAirportCode,\n  className,\n  onToggle,\n  onSelect,\n  onReset,\n  onApply,\n  b2bLabels,\n  flightType = 'roundtrip',\n  onFlightTypeChange,\n  cabinClass,\n  cabinClassOptions,\n  onCabinClassChange,\n  departureQuery,\n  onDepartureQueryChange,\n  error,\n}) => {\n  const isCard = variant === 'card';\n  const isB2B = mode === 'b2b';\n  const switchLabelId = useId();\n\n  const header = (\n    <div className=\"flex flex-col gap-8\">\n      {title && <p className=\"text-b2 font-semibold\">{title}</p>}\n      <div className=\"flex items-center justify-between\">\n        <p id={switchLabelId} className=\"text-b3 font-semibold\">\n          {labels.toggleLabel}\n        </p>\n        <Switch\n          checked={enabled}\n          onChange={(_, val) => onToggle(val)}\n          aria-labelledby={switchLabelId}\n        />\n      </div>\n    </div>\n  );\n\n  const airportList = (\n    <div className=\"relative\" style={{ timelineScope: '--airport-list' } as React.CSSProperties}>\n      <div\n        aria-hidden\n        className=\"absolute top-0 left-0 right-0 pointer-events-none z-10\"\n        style={\n          {\n            height: '20px',\n            background: 'linear-gradient(to bottom, rgba(246,239,231,1), rgba(246,239,231,0))',\n            animationName: 'criteria-transports-top-blur',\n            animationTimeline: '--airport-list',\n            animationRange: '0px 40px',\n            animationFillMode: 'both',\n            animationTimingFunction: 'linear',\n            opacity: 0,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        role=\"region\"\n        aria-label={labels.topCitiesLabel || labels.otherCitiesLabel}\n        tabIndex={0}\n        className=\"flex max-h-[420px] flex-col gap-20 pb-20 overflow-y-auto\"\n        style={{ scrollTimelineName: '--airport-list' } as React.CSSProperties}\n      >\n        {topCities.length > 0 && (\n          <AirportGroup\n            label={labels.topCitiesLabel}\n            airports={topCities}\n            selectedCode={selectedAirportCode}\n            onSelect={onSelect}\n          />\n        )}\n        {otherCities.length > 0 && (\n          <AirportGroup\n            label={labels.otherCitiesLabel}\n            airports={otherCities}\n            selectedCode={selectedAirportCode}\n            onSelect={onSelect}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const filteredTopCities =\n    isB2B && departureQuery\n      ? topCities.filter((a) => a.name.toLowerCase().includes(departureQuery.toLowerCase()))\n      : topCities;\n\n  const filteredOtherCities =\n    isB2B && departureQuery\n      ? otherCities.filter((a) => a.name.toLowerCase().includes(departureQuery.toLowerCase()))\n      : otherCities;\n\n  const b2bAirportList = (\n    <div className=\"relative\" style={{ timelineScope: '--airport-list' } as React.CSSProperties}>\n      <div\n        aria-hidden\n        className=\"absolute top-0 left-0 right-0 pointer-events-none z-10\"\n        style={\n          {\n            height: '20px',\n            background: 'linear-gradient(to bottom, rgba(246,239,231,1), rgba(246,239,231,0))',\n            animationName: 'criteria-transports-top-blur',\n            animationTimeline: '--airport-list',\n            animationRange: '0px 40px',\n            animationFillMode: 'both',\n            animationTimingFunction: 'linear',\n            opacity: 0,\n          } as React.CSSProperties\n        }\n      />\n      <div\n        role=\"region\"\n        aria-label={labels.topCitiesLabel || labels.otherCitiesLabel}\n        tabIndex={0}\n        className=\"flex max-h-[420px] flex-col gap-20 pb-20 overflow-y-auto\"\n        style={{ scrollTimelineName: '--airport-list' } as React.CSSProperties}\n      >\n        {filteredTopCities.length > 0 && (\n          <AirportGroup\n            label={labels.topCitiesLabel}\n            airports={filteredTopCities}\n            selectedCode={selectedAirportCode}\n            onSelect={onSelect}\n          />\n        )}\n        {filteredOtherCities.length > 0 && (\n          <AirportGroup\n            label={labels.otherCitiesLabel}\n            airports={filteredOtherCities}\n            selectedCode={selectedAirportCode}\n            onSelect={onSelect}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const b2bExpandedContent =\n    isB2B && b2bLabels ? (\n      error ? (\n        <B2BErrorCard message={error} />\n      ) : (\n        <div className=\"flex flex-col gap-8\">\n          <B2BFlightTypeSelector\n            roundTripLabel={b2bLabels.roundTripLabel}\n            oneWayLabel={b2bLabels.oneWayLabel}\n            value={flightType}\n            onChange={onFlightTypeChange}\n          />\n          <RadioSelect\n            label={b2bLabels.cabinClassLabel}\n            value={cabinClass}\n            options={cabinClassOptions}\n            onChange={onCabinClassChange}\n          />\n          <TextField\n            label={b2bLabels.departureDateLabel}\n            value={departureQuery}\n            icon=\"Search\"\n            onChange={onDepartureQueryChange}\n          />\n          {b2bAirportList}\n        </div>\n      )\n    ) : null;\n\n  const content = (\n    <>\n      {header}\n      <div>\n        <ElasticHeight isExpanded={enabled}>{b2bExpandedContent ?? airportList}</ElasticHeight>\n        <ElasticHeight isExpanded={!enabled}>\n          <TransportCard\n            title={labels.clubMedTransportTitle}\n            description={labels.clubMedTransportDescription}\n          />\n        </ElasticHeight>\n      </div>\n    </>\n  );\n\n  const footer = (onReset || onApply) && (\n    <div className=\"flex items-center justify-between\">\n      {onReset && labels.reset ? (\n        <button\n          className=\"text-b3 cursor-pointer font-semibold underline\"\n          onClick={onReset}\n          type=\"button\"\n        >\n          {labels.reset}\n        </button>\n      ) : (\n        <span />\n      )}\n      {onApply && labels.apply && (\n        <Button color=\"saffron\" onClick={onApply}>\n          {labels.apply}\n        </Button>\n      )}\n    </div>\n  );\n\n  const keyframes = (\n    <style>{`\n      @keyframes criteria-transports-top-blur {\n        from { opacity: 0; }\n        to   { opacity: 1; }\n      }\n    `}</style>\n  );\n\n  if (!isCard) {\n    return (\n      <>\n        <div className={clsx('flex flex-col gap-20', className)}>\n          {content}\n          {footer}\n        </div>\n        {keyframes}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className={clsx(\n          'rounded-16 border-lightGrey flex flex-col gap-20 border bg-white p-20',\n          className,\n        )}\n      >\n        <div className=\"rounded-16 bg-lightSand flex flex-col gap-20 px-20 pt-20\">{content}</div>\n        {footer}\n      </div>\n      {keyframes}\n    </>\n  );\n};\n"],"mappings":"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"}