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

package/ui/Promises/PromisesMenu.js

@@ -0,0 +1,154 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Button as t } from "../buttons/Button.js";
+import { n } from "../../chunks/Carousel.context.js";
+import { Carousel as r } from "../carousel/Carousel.js";
+import { CarouselBody as i } from "../carousel/CarouselBody.js";
+import { CarouselItem as a } from "../carousel/CarouselItem.js";
+import { useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region lib/ui/Promises/PromisesMenu.tsx
+var m = ({ anchorLabel: n, anchorName: r, isActive: i, labelNode: a }) => {
+	let o = u(null), s = u(null);
+	return c(() => {
+		if (!o.current || !s.current) return;
+		let e = new ResizeObserver(() => {
+			s.current && o.current && (s.current.style.height = `${o.current.offsetHeight}px`);
+		});
+		return e.observe(o.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ f("li", {
+		className: e("relative isolate transition-[opacity,height,margin-inline-start] ms-0 duration-300 overflow-hidden rounded-32 bg-white p-20", { "@3xl/promises:ms-52": !i }),
+		children: /* @__PURE__ */ p("div", {
+			ref: s,
+			className: "flex justify-between items-start overflow-hidden",
+			style: { anchorName: r },
+			children: [/* @__PURE__ */ f("div", {
+				ref: o,
+				className: "pe-40",
+				children: a
+			}), i && /* @__PURE__ */ f(t, {
+				"aria-hidden": !0,
+				className: "opacity-0 pointer-events-none",
+				icon: "ArrowDefaultRight",
+				inert: !0,
+				tabIndex: -1,
+				variant: "pill",
+				children: n
+			})]
+		})
+	});
+}, h = ({ activeIndex: e, onSelect: t }) => {
+	let { api: r, snapped: i } = n(), a = u(t);
+	a.current = t;
+	let s = i[0];
+	return o(() => {
+		s !== void 0 && a.current(s);
+	}, [s]), o(() => {
+		r?.scrollTo(e);
+	}, [r, e]), null;
+}, g = ({ activeIndex: t, className: n, onSelect: o, sliderItems: s }) => {
+	let c = u(t), m = l(() => ({
+		active: s.length > 1,
+		align: "center",
+		startIndex: c.current
+	}), [s.length]);
+	return /* @__PURE__ */ f(d, { children: /* @__PURE__ */ p(r, {
+		className: e("relative isolate flex h-full items-center", n),
+		options: m,
+		children: [/* @__PURE__ */ f(h, {
+			activeIndex: t,
+			onSelect: o
+		}), /* @__PURE__ */ f(i, {
+			className: "w-full px-20",
+			scrollClassName: "gap-12 md:gap-40 auto-cols-full",
+			children: s.map((t, n) => /* @__PURE__ */ f(a, {
+				index: n,
+				children: /* @__PURE__ */ f("div", {
+					"aria-label": `${n + 1}/${s.length}`,
+					className: e("rounded-16 overflow-hidden bg-white"),
+					children: t
+				})
+			}, n))
+		})]
+	}) });
+}, _ = ({ activeIndex: n, className: r, items: i, labels: a, onClickMenu: o }) => {
+	let c = s(), u = c.replace(/[^a-zA-Z0-9_-]/g, ""), { menuItems: h, sliderItems: _ } = l(() => {
+		let r = i.map(({ href: t, id: r, title: i }, a) => {
+			let s = a === n, l = r ?? `${c}_${a}`;
+			return {
+				anchorName: `--promises-${u}-${a}`,
+				href: t,
+				id: r,
+				isActive: s,
+				itemId: l,
+				labelNode: /* @__PURE__ */ f("button", {
+					id: l,
+					"aria-label": i,
+					className: e("text-start hover:underline text-h4 text-center font-serif @3xl/promises:text-h4 @5xl/promises:text-h2 @6xl/promises:text-h1 @3xl/promises:text-start"),
+					onClick: () => o(a),
+					type: "button",
+					children: i
+				}),
+				title: i
+			};
+		});
+		return {
+			menuItems: r,
+			sliderItems: r.map(({ labelNode: e, href: n, itemId: r }) => /* @__PURE__ */ p("div", {
+				className: "rounded-32 p-16",
+				children: [e, /* @__PURE__ */ f(t, {
+					"aria-describedby": r,
+					"aria-label": a.anchor.continue,
+					href: n,
+					icon: "ArrowDefaultRight",
+					variant: "pill",
+					children: a.anchor.continue
+				})]
+			}))
+		};
+	}, [
+		n,
+		i,
+		a,
+		c,
+		o,
+		u
+	]), v = h[n];
+	return /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ f("ul", {
+			className: e("hidden @3xl/promises:block", "absolute bottom-0 inset-x-0 overflow-hidden @3xl/promises:-ms-52 text-black w-full", "@3xl/promises:pointer-events-auto @3xl/promises:static @3xl/promises:p-0 @3xl/promises:pt-40", r),
+			children: h.map(({ anchorName: e, id: t, isActive: n, labelNode: r, title: i }, o) => /* @__PURE__ */ f(m, {
+				anchorLabel: a.anchor.continue,
+				anchorName: e,
+				isActive: n,
+				labelNode: r
+			}, t ?? `${i}-${o}`))
+		}),
+		v && /* @__PURE__ */ f(t, {
+			"aria-describedby": v.itemId,
+			"aria-label": a.anchor.continue,
+			className: "hidden @3xl/promises:inline-flex transition-[top] duration-200 ease-out-quad absolute z-1",
+			href: v.href,
+			icon: "ArrowDefaultRight",
+			style: {
+				positionAnchor: v.anchorName,
+				top: "anchor(top)",
+				right: "anchor(right)"
+			},
+			variant: "pill",
+			children: a.anchor.continue
+		}),
+		/* @__PURE__ */ f("div", {
+			className: "@3xl/promises:hidden absolute inset-x-0 bottom-20",
+			children: /* @__PURE__ */ f(g, {
+				activeIndex: n,
+				onSelect: o,
+				sliderItems: _
+			})
+		})
+	] });
+};
+//#endregion
+export { _ as PromisesMenu };
+
+//# sourceMappingURL=PromisesMenu.js.map

package/ui/Promises/PromisesMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromisesMenu.js","names":[],"sources":["../../../lib/ui/Promises/PromisesMenu.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useId, useMemo, useRef, useLayoutEffect } from 'react';\nimport { useCarousel } from '../carousel/Carousel.context';\n\nimport { Carousel } from '../carousel/Carousel';\nimport { CarouselBody } from '../carousel/CarouselBody';\nimport { CarouselItem } from '../carousel/CarouselItem';\nimport { Button } from '../buttons/Button';\nimport type { PromisesItem, PromisesLabels } from './Promises';\n\ninterface MenuItemProps {\n  anchorLabel: string;\n  anchorName: string;\n  isActive: boolean;\n  labelNode: ReactNode;\n}\n\nconst PromisesMenuItem: FunctionComponent<MenuItemProps> = ({\n  anchorLabel,\n  anchorName,\n  isActive,\n  labelNode,\n}) => {\n  const labelRef = useRef<HTMLDivElement>(null);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!labelRef.current || !containerRef.current) return;\n    const resizeObserver = new ResizeObserver(() => {\n      if (containerRef.current && labelRef.current) {\n        containerRef.current.style.height = `${labelRef.current.offsetHeight}px`;\n      }\n    });\n    resizeObserver.observe(labelRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <li\n      className={clsx(\n        'relative isolate transition-[opacity,height,margin-inline-start] ms-0 duration-300 overflow-hidden rounded-32 bg-white p-20',\n        { '@3xl/promises:ms-52': !isActive },\n      )}\n    >\n      <div\n        ref={containerRef}\n        className=\"flex justify-between items-start overflow-hidden\"\n        style={{ anchorName } as unknown as React.CSSProperties}\n      >\n        <div ref={labelRef} className=\"pe-40\">\n          {labelNode}\n        </div>\n        {isActive && (\n          <Button\n            aria-hidden\n            className=\"opacity-0 pointer-events-none\"\n            icon=\"ArrowDefaultRight\"\n            inert\n            tabIndex={-1}\n            variant=\"pill\"\n          >\n            {anchorLabel}\n          </Button>\n        )}\n      </div>\n    </li>\n  );\n};\n\ninterface Props {\n  activeIndex: number;\n  className?: string;\n  items: PromisesItem[];\n  labels: PromisesLabels;\n  onClickMenu: (index: number) => void;\n}\n\ninterface PromisesItemSliderProps {\n  activeIndex: number;\n  className?: string;\n  onSelect: (index: number) => void;\n  sliderItems: ReactNode[];\n}\n\nconst CarouselSync: FunctionComponent<{\n  activeIndex: number;\n  onSelect: (index: number) => void;\n}> = ({ activeIndex, onSelect }) => {\n  const { api, snapped } = useCarousel();\n  const onSelectRef = useRef(onSelect);\n  onSelectRef.current = onSelect;\n\n  const snappedIndex = snapped[0];\n  useEffect(() => {\n    if (snappedIndex !== undefined) onSelectRef.current(snappedIndex);\n  }, [snappedIndex]);\n\n  useEffect(() => {\n    api?.scrollTo(activeIndex);\n  }, [api, activeIndex]);\n\n  return null;\n};\n\nconst PromisesItemSlider: FunctionComponent<PromisesItemSliderProps> = ({\n  activeIndex,\n  className,\n  onSelect,\n  sliderItems,\n}) => {\n  const initialIndex = useRef(activeIndex);\n  const carouselOptions = useMemo(\n    () => ({\n      active: sliderItems.length > 1,\n      align: 'center' as const,\n      startIndex: initialIndex.current,\n    }),\n    [sliderItems.length],\n  );\n\n  return (\n    <>\n      <Carousel\n        className={clsx('relative isolate flex h-full items-center', className)}\n        options={carouselOptions}\n      >\n        <CarouselSync activeIndex={activeIndex} onSelect={onSelect} />\n        <CarouselBody className=\"w-full px-20\" scrollClassName=\"gap-12 md:gap-40 auto-cols-full\">\n          {sliderItems.map((item, i) => (\n            <CarouselItem index={i} key={i}>\n              <div\n                aria-label={`${i + 1}/${sliderItems.length}`}\n                className={clsx('rounded-16 overflow-hidden bg-white')}\n              >\n                {item}\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselBody>\n      </Carousel>\n    </>\n  );\n};\n\nexport const PromisesMenu: FunctionComponent<Props> = ({\n  activeIndex,\n  className,\n  items,\n  labels,\n  onClickMenu,\n}) => {\n  const menuId = useId();\n  const safeMenuId = menuId.replace(/[^a-zA-Z0-9_-]/g, '');\n\n  const { menuItems, sliderItems } = useMemo(() => {\n    const mItems = items.map(({ href, id, title }, index) => {\n      const isActive = index === activeIndex;\n      const itemId = id ?? `${menuId}_${index}`;\n      const anchorName = `--promises-${safeMenuId}-${index}`;\n\n      const labelNode = (\n        <button\n          id={itemId}\n          aria-label={title}\n          className={clsx(\n            'text-start hover:underline text-h4 text-center font-serif @3xl/promises:text-h4 @5xl/promises:text-h2 @6xl/promises:text-h1 @3xl/promises:text-start',\n          )}\n          onClick={() => onClickMenu(index)}\n          type=\"button\"\n        >\n          {title}\n        </button>\n      );\n\n      return { anchorName, href, id, isActive, itemId, labelNode, title };\n    });\n\n    const sItems = mItems.map(({ labelNode, href, itemId }) => (\n      <div className=\"rounded-32 p-16\">\n        {labelNode}\n        <Button\n          aria-describedby={itemId}\n          aria-label={labels.anchor.continue}\n          href={href}\n          icon=\"ArrowDefaultRight\"\n          variant=\"pill\"\n        >\n          {labels.anchor.continue}\n        </Button>\n      </div>\n    ));\n\n    return { menuItems: mItems, sliderItems: sItems };\n  }, [activeIndex, items, labels, menuId, onClickMenu, safeMenuId]);\n\n  const activeItem = menuItems[activeIndex];\n\n  return (\n    <>\n      <ul\n        className={clsx(\n          'hidden @3xl/promises:block',\n          'absolute bottom-0 inset-x-0 overflow-hidden @3xl/promises:-ms-52 text-black w-full',\n          '@3xl/promises:pointer-events-auto @3xl/promises:static @3xl/promises:p-0 @3xl/promises:pt-40',\n          className,\n        )}\n      >\n        {menuItems.map(({ anchorName, id, isActive, labelNode, title }, index) => (\n          <PromisesMenuItem\n            anchorLabel={labels.anchor.continue}\n            anchorName={anchorName}\n            isActive={isActive}\n            key={id ?? `${title}-${index}`}\n            labelNode={labelNode}\n          />\n        ))}\n      </ul>\n      {activeItem && (\n        <Button\n          aria-describedby={activeItem.itemId}\n          aria-label={labels.anchor.continue}\n          className=\"hidden @3xl/promises:inline-flex transition-[top] duration-200 ease-out-quad absolute z-1\"\n          href={activeItem.href}\n          icon=\"ArrowDefaultRight\"\n          style={\n            {\n              positionAnchor: activeItem.anchorName,\n              top: 'anchor(top)',\n              right: 'anchor(right)',\n            } as React.CSSProperties\n          }\n          variant=\"pill\"\n        >\n          {labels.anchor.continue}\n        </Button>\n      )}\n      <div className=\"@3xl/promises:hidden absolute inset-x-0 bottom-20\">\n        <PromisesItemSlider\n          activeIndex={activeIndex}\n          onSelect={onClickMenu}\n          sliderItems={sliderItems}\n        />\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}

package/ui/SparkleWrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    count?: number;
+}
+export declare function SparkleWrapper({ children, className, count, ...props }: PropsWithChildren<SparkleWrapperProps>): import("react/jsx-runtime").JSX.Element;

package/ui/SparkleWrapper.js

@@ -0,0 +1,56 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Icon as o } from "@clubmed/trident-icons";
+//#region lib/ui/SparkleWrapper.tsx
+function s(e, t) {
+	return e + Math.random() * (t - e);
+}
+function c(e) {
+	return Array.from({ length: e }, () => ({
+		angle: Math.random() * 360,
+		distance: s(60, 110),
+		delay: Math.round(s(0, 150)),
+		size: Math.round(s(8, 20))
+	}));
+}
+function l(e, t, n, r) {
+	return Math.abs(e) < 1e-6 ? r / Math.abs(t) : Math.abs(t) < 1e-6 ? n / Math.abs(e) : Math.min(n / Math.abs(e), r / Math.abs(t));
+}
+function u({ children: u, className: d, count: f = 7, ...p }) {
+	let m = n(null), [h, g] = r([0, 0]), [_] = r(() => c(Math.round(s(f, f + 3))));
+	return t(() => {
+		if (!m.current) return;
+		let { width: e, height: t } = m.current.getBoundingClientRect();
+		g([e / 2, t / 2]);
+	}, []), /* @__PURE__ */ a("div", {
+		...p,
+		className: e("relative inline-flex items-center justify-center", d),
+		children: [_.map(({ angle: e, distance: t, delay: n, size: r }, a) => {
+			let s = e * Math.PI / 180, c = Math.cos(s), u = Math.sin(s), [d, f] = h, p = d > 0 || f > 0 ? l(c, u, d, f) : 0;
+			return /* @__PURE__ */ i(o, {
+				name: "Diamond",
+				"aria-hidden": "true",
+				className: "absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none",
+				style: {
+					"--sparkle-start-x": `${Math.round(c * p)}px`,
+					"--sparkle-start-y": `${Math.round(u * p)}px`,
+					"--sparkle-end-x": `${Math.round(c * (p + t))}px`,
+					"--sparkle-end-y": `${Math.round(u * (p + t))}px`,
+					animationDelay: `${n}ms`,
+					width: `${r}px`,
+					height: `${r}px`
+				}
+			}, a);
+		}), /* @__PURE__ */ i("div", {
+			ref: m,
+			className: "relative z-10 animate-bounce-enter",
+			children: u
+		})]
+	});
+}
+//#endregion
+export { u as SparkleWrapper };
+
+//# sourceMappingURL=SparkleWrapper.js.map

package/ui/SparkleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkleWrapper.js","names":[],"sources":["../../lib/ui/SparkleWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nfunction randomBetween(min: number, max: number) {\n  return min + Math.random() * (max - min);\n}\n\nfunction generateSparkles(count: number) {\n  return Array.from({ length: count }, () => ({\n    angle: Math.random() * 360,\n    distance: randomBetween(60, 110),\n    delay: Math.round(randomBetween(0, 150)),\n    size: Math.round(randomBetween(8, 20)),\n  }));\n}\n\nfunction edgeT(cos: number, sin: number, hw: number, hh: number): number {\n  if (Math.abs(cos) < 1e-6) return hh / Math.abs(sin);\n  if (Math.abs(sin) < 1e-6) return hw / Math.abs(cos);\n  return Math.min(hw / Math.abs(cos), hh / Math.abs(sin));\n}\n\nexport interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  count?: number;\n}\n\nexport function SparkleWrapper({\n  children,\n  className,\n  count = 7,\n  ...props\n}: PropsWithChildren<SparkleWrapperProps>) {\n  const childRef = useRef<HTMLDivElement>(null);\n  const [halfSize, setHalfSize] = useState<[number, number]>([0, 0]);\n  const [sparkles] = useState(() => generateSparkles(Math.round(randomBetween(count, count + 3))));\n\n  useLayoutEffect(() => {\n    if (!childRef.current) return;\n    const { width, height } = childRef.current.getBoundingClientRect();\n    setHalfSize([width / 2, height / 2]);\n  }, []);\n\n  return (\n    <div {...props} className={clsx('relative inline-flex items-center justify-center', className)}>\n      {sparkles.map(({ angle, distance, delay, size }, i) => {\n        const rad = (angle * Math.PI) / 180;\n        const cos = Math.cos(rad);\n        const sin = Math.sin(rad);\n        const [hw, hh] = halfSize;\n        const t = hw > 0 || hh > 0 ? edgeT(cos, sin, hw, hh) : 0;\n\n        return (\n          <Icon\n            key={i}\n            name=\"Diamond\"\n            aria-hidden=\"true\"\n            className=\"absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none\"\n            style={\n              {\n                '--sparkle-start-x': `${Math.round(cos * t)}px`,\n                '--sparkle-start-y': `${Math.round(sin * t)}px`,\n                '--sparkle-end-x': `${Math.round(cos * (t + distance))}px`,\n                '--sparkle-end-y': `${Math.round(sin * (t + distance))}px`,\n                animationDelay: `${delay}ms`,\n                width: `${size}px`,\n                height: `${size}px`,\n              } as React.CSSProperties\n            }\n          />\n        );\n      })}\n      <div ref={childRef} className=\"relative z-10 animate-bounce-enter\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,EAAc,GAAa,GAAa;AAC/C,QAAO,IAAM,KAAK,QAAQ,IAAI,IAAM;;AAGtC,SAAS,EAAiB,GAAe;AACvC,QAAO,MAAM,KAAK,EAAE,QAAQ,GAAO,SAAS;EAC1C,OAAO,KAAK,QAAQ,GAAG;EACvB,UAAU,EAAc,IAAI,IAAI;EAChC,OAAO,KAAK,MAAM,EAAc,GAAG,IAAI,CAAC;EACxC,MAAM,KAAK,MAAM,EAAc,GAAG,GAAG,CAAA;EACtC,EAAE;;AAGL,SAAS,EAAM,GAAa,GAAa,GAAY,GAAoB;AAGvE,QAFI,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC/C,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC5C,KAAK,IAAI,IAAK,KAAK,IAAI,EAAI,EAAE,IAAK,KAAK,IAAI,EAAI,CAAC;;AAOzD,SAAgB,EAAe,EAC7B,aACA,cACA,WAAQ,GACR,GAAG,KACsC;CACzC,IAAM,IAAW,EAAuB,KAAK,EACvC,CAAC,GAAU,KAAe,EAA2B,CAAC,GAAG,EAAE,CAAC,EAC5D,CAAC,KAAY,QAAe,EAAiB,KAAK,MAAM,EAAc,GAAO,IAAQ,EAAE,CAAC,CAAC,CAAC;AAQhG,QANA,QAAsB;AACpB,MAAI,CAAC,EAAS,QAAS;EACvB,IAAM,EAAE,UAAO,cAAW,EAAS,QAAQ,uBAAuB;AAClE,IAAY,CAAC,IAAQ,GAAG,IAAS,EAAE,CAAC;IACnC,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAK,oDAAoD,EAAU;YAA9F,CACG,EAAS,KAAK,EAAE,UAAO,aAAU,UAAO,WAAQ,MAAM;GACrD,IAAM,IAAO,IAAQ,KAAK,KAAM,KAC1B,IAAM,KAAK,IAAI,EAAI,EACnB,IAAM,KAAK,IAAI,EAAI,EACnB,CAAC,GAAI,KAAM,GACX,IAAI,IAAK,KAAK,IAAK,IAAI,EAAM,GAAK,GAAK,GAAI,EAAG,GAAG;AAEvD,UACE,kBAAC,GAAD;IAEE,MAAK;IACL,eAAY;IACZ,WAAU;IACV,OACE;KACE,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,gBAAgB,GAAG,EAAM;KACzB,OAAO,GAAG,EAAK;KACf,QAAQ,GAAG,EAAK;;IAGpB,EAfK,EAeL;IAEJ,EACF,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;GACG,CAAA,CAAA"}

package/ui/criteria/CriteriaTransports.d.ts

@@ -1,72 +1,53 @@
-import { Dispatch, FunctionComponent } from 'react';
-export interface TransportOption {
-    id: string;
-    label: string;
-}
-export interface TransportSection {
-    title: string;
-    options: TransportOption[];
-}
-export interface TransportPromotionalCard {
-    icon?: string;
-    title: string;
-    description: string;
+import { FunctionComponent } from 'react';
+import { RadioSelectOption } from '../forms/RadioSelect';
+export interface Airport {
+    code: string;
+    name: string;
 }
 export interface CriteriaTransportsLabels {
-    addTransportationFrom: string;
+    toggleLabel: string;
+    topCitiesLabel: string;
+    otherCitiesLabel: string;
+    clubMedTransportTitle: string;
+    clubMedTransportDescription: string;
     reset?: string;
     apply?: string;
 }
-export type CriteriaTransportsAction = {
-    type: 'enabled';
-    payload: boolean;
-} | {
-    type: 'select';
-    payload: string | null;
-} | {
-    type: 'flightType';
-    payload: 'round-trip' | 'one-way';
-} | {
-    type: 'flightClass';
-    payload: string;
-} | {
-    type: 'fromQuery';
-    payload: string;
-};
+export interface CriteriaTransportsB2BLabels {
+    roundTripLabel: string;
+    oneWayLabel: string;
+    cabinClassLabel: string;
+    departureDateLabel: string;
+}
 export interface CriteriaTransportsProps {
     labels: CriteriaTransportsLabels;
     title?: string;
-    /** card (default): white outer card with sand inner. flat: no background, content rendered directly */
+    /** card (default): white outer card with sand inner. flat: no background, fields rendered directly */
     variant?: 'card' | 'flat';
-    /** b2c (default): large items + promotional card. b2b: compact items + flight controls */
+    /** Switches between B2C (default) and B2B mode. B2B mode adds flight type, cabin class, and departure selectors. */
     mode?: 'b2c' | 'b2b';
     enabled: boolean;
-    sections: TransportSection[];
-    selectedId: string | null;
+    topCities: Airport[];
+    otherCities: Airport[];
+    selectedAirportCode?: string | null;
     className?: string;
-    onChange: Dispatch<CriteriaTransportsAction>;
+    onToggle: (enabled: boolean) => void;
+    onSelect: (code: string | null) => void;
     onReset?: () => void;
     onApply?: () => void;
-    /** B2C: promotional card shown in the sand area when enabled=false */
-    promotionalCard?: TransportPromotionalCard;
-    /** Error message — shown instead of sections when enabled=true */
+    b2bLabels?: CriteriaTransportsB2BLabels;
+    /** Currently selected flight type (B2B mode). Defaults to 'roundtrip'. */
+    flightType?: 'roundtrip' | 'oneway';
+    onFlightTypeChange?: (type: 'roundtrip' | 'oneway') => void;
+    /** Currently selected cabin class value (B2B mode). */
+    cabinClass?: string;
+    /** Options for the cabin class RadioSelect (B2B mode). */
+    cabinClassOptions?: RadioSelectOption<string>[];
+    onCabinClassChange?: (event: Event, value: string) => void;
+    /** Controlled value for the departure airport TextField; also used to filter the airport list. */
+    departureQuery?: string;
+    onDepartureQueryChange?: (event: Event, value: string) => void;
+    /** Error message shown in B2B mode when a prerequisite (e.g. resort selection) is missing. */
     error?: string;
-    /** B2B: controlled flight type */
-    flightType?: 'round-trip' | 'one-way';
-    /** B2B: labels for the round-trip/one-way radio row */
-    flightTypeLabels?: {
-        roundTrip: string;
-        oneWay: string;
-    };
-    /** B2B: controlled selected class label */
-    flightClass?: string;
-    /** B2B: label for the class selector field */
-    flightClassLabel?: string;
-    /** B2B: available class options */
-    flightClasses?: string[];
-    /** B2B: controlled from/search query */
-    fromQuery?: string;
-    /** B2B: label for the from search field */
-    fromQueryLabel?: string;
 }
 export declare const CriteriaTransports: FunctionComponent<CriteriaTransportsProps>;