@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/ui/criteria/CriteriaTransports.js

@@ -0,0 +1,274 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ElasticHeight as t } from "../ElasticHeight.js";
+import { Button as n } from "../buttons/Button.js";
+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 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: "GlobePlane",
+				width: "24px"
+			})
+		}), /* @__PURE__ */ d("p", {
+			className: "text-b3 font-semibold",
+			children: e
+		})]
+	}), /* @__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
+			})
+		})]
+	});
+}, 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"
+			})
+		}), /* @__PURE__ */ d("p", {
+			className: "text-b3 font-semibold text-sienna",
+			children: e
+		})]
+	})
+}), 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 { y as CriteriaTransports };
+
+//# sourceMappingURL=CriteriaTransports.js.map

package/ui/criteria/CriteriaTransports.js.map

@@ -0,0 +1 @@
+{"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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"}

package/ui/forms/CheckboxSelect.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ValidationStatus } from '../hooks/useInternalStatus';
+export interface CheckboxSelectOption<Value = string> {
+    value: Value;
+    label: ReactNode;
+}
+export interface CheckboxSelectGroup<Value = string> {
+    label?: ReactNode;
+    options: CheckboxSelectOption<Value>[];
+}
+export interface CheckboxSelectProps<Value = string> {
+    id?: string;
+    name?: string;
+    label?: ReactNode;
+    description?: string;
+    placeholder?: string;
+    value?: Value[];
+    options?: CheckboxSelectOption<Value>[];
+    groups?: CheckboxSelectGroup<Value>[];
+    onChange?: (event: Event, value: Value[]) => void;
+    disabled?: boolean;
+    required?: boolean;
+    hideRequiredStar?: boolean;
+    validationStatus?: ValidationStatus;
+    errorMessage?: string;
+    className?: string;
+    'data-testid'?: string;
+    /** Renders the selected values summary in the trigger */
+    renderValue?: (selected: Value[]) => ReactNode;
+}
+export declare function CheckboxSelect<Value = string>({ id: idProp, name: nameProp, label, description, placeholder, value: controlledValue, options, groups, onChange, disabled, required, hideRequiredStar, validationStatus, errorMessage, className, 'data-testid': dataTestId, renderValue, }: CheckboxSelectProps<Value>): import("react/jsx-runtime").JSX.Element;

package/ui/forms/CheckboxSelect.js

@@ -0,0 +1,119 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Checkbox as t } from "./checkboxes/Checkbox.js";
+import { FormControl as n } from "./FormControl.js";
+import { useDropdown as r } from "../Dropdown.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@clubmed/trident-icons";
+//#region lib/ui/forms/CheckboxSelect.tsx
+function u({ children: t, selected: n }) {
+	return /* @__PURE__ */ s("span", {
+		ref: (e) => {
+			e && (e.title = e.textContent ?? "");
+		},
+		className: e("text-b3 text-black truncate", { "font-semibold": n }),
+		children: t
+	});
+}
+function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select...", value: g, options: _, groups: v, onChange: y, disabled: b = !1, required: x = !1, hideRequiredStar: S, validationStatus: C = "default", errorMessage: w, className: T, "data-testid": E, renderValue: D }) {
+	let O = a(), k = d ?? O, A = f ?? k, { open: j, toggle: M, containerRef: N, isLeaving: P } = r(), [F, I] = o(g ?? []);
+	i(() => {
+		g !== void 0 && I(g);
+	}, [g]);
+	let L = (e, t) => {
+		let n = F.includes(t) ? F.filter((e) => e !== t) : [...F, t];
+		I(n), y?.(e, n);
+	}, R = _ || (v ?? []).flatMap((e) => e.options), z = F.length === 0 ? /* @__PURE__ */ s("span", {
+		className: "text-darkGrey",
+		children: h
+	}) : D ? D(F) : /* @__PURE__ */ s("span", { children: R.filter((e) => F.includes(e.value)).map((e) => e.label).join(", ") }), B = C === "error", V = C === "success", H = b, U = (e) => /* @__PURE__ */ s("div", {
+		className: "flex flex-col gap-12",
+		children: e.map((e, n) => /* @__PURE__ */ s(t, {
+			name: A,
+			value: String(e.value),
+			checked: F.includes(e.value),
+			disabled: b,
+			onChange: (t) => L(t, e.value),
+			children: /* @__PURE__ */ s(u, {
+				selected: F.includes(e.value),
+				children: e.label
+			})
+		}, n))
+	});
+	return /* @__PURE__ */ s(n, {
+		id: k,
+		label: p,
+		description: m,
+		className: T,
+		dataName: "CheckboxSelect",
+		"data-testid": E,
+		disabled: b,
+		required: x,
+		hideRequiredStar: S,
+		validationStatus: C,
+		errorMessage: w,
+		children: /* @__PURE__ */ c("div", {
+			ref: N,
+			className: "relative",
+			children: [/* @__PURE__ */ c("button", {
+				type: "button",
+				id: k,
+				"aria-haspopup": "listbox",
+				"aria-expanded": j,
+				"aria-disabled": H,
+				disabled: H,
+				onClick: M,
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8", {
+					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
+					"bg-pearl border-middleGrey text-grey": H,
+					"border-red bg-white": B,
+					"border-green bg-white": V
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "truncate flex-1",
+					children: z
+				}), /* @__PURE__ */ c("span", {
+					className: "flex items-center gap-8 shrink-0",
+					children: [
+						B && /* @__PURE__ */ s(l, {
+							name: "CrossDefault",
+							width: "24px",
+							className: "text-red"
+						}),
+						V && /* @__PURE__ */ s(l, {
+							name: "CheckDefault",
+							width: "24px",
+							className: "text-green"
+						}),
+						/* @__PURE__ */ s(l, {
+							name: "ArrowDefaultDown",
+							width: "24px",
+							className: e("text-black transition-transform", { "rotate-180": j })
+						})
+					]
+				})]
+			}), /* @__PURE__ */ s("div", {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-hidden": !j && !P,
+				className: e("absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]", {
+					"animate-zoom-in": j,
+					"animate-zoom-out pointer-events-none": !j && P,
+					"opacity-0 scale-90 pointer-events-none": !j && !P
+				}),
+				children: v ? v.map((t, n) => /* @__PURE__ */ c("div", {
+					className: e({ "mt-16 first:mt-0": n > 0 }),
+					children: [t.label && /* @__PURE__ */ s("p", {
+						className: "text-b4 text-darkGrey font-semibold mb-8 ps-4",
+						children: t.label
+					}), U(t.options)]
+				}, n)) : U(R)
+			})]
+		})
+	});
+}
+//#endregion
+export { d as CheckboxSelect };
+
+//# sourceMappingURL=CheckboxSelect.js.map

package/ui/forms/CheckboxSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out pointer-events-none': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}

package/ui/forms/Filter.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
     /**
      * Is it attached to a dropdown?
      */
@@ -9,5 +9,7 @@ export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'si
      */
     dataTestId?: string;
     'data-testid'?: string;
+    value?: string | number | boolean;
+    onChange?: (event: Event, value: boolean) => void;
 }
 export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Filter.js

@@ -1,36 +1,40 @@
 import { t as e } from "../../chunks/clsx.js";
 import { useId as t } from "react";
-import { Icon as n } from "@clubmed/trident-icons";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
 //#region lib/ui/forms/Filter.tsx
 function a(a) {
-	let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, children: h, ...g } = a;
-	return /* @__PURE__ */ r("div", {
+	let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, onChange: h, value: g, children: _, ...v } = a;
+	return /* @__PURE__ */ n("div", {
 		className: e(l, "relative"),
-		children: /* @__PURE__ */ i("label", {
+		children: /* @__PURE__ */ r("label", {
 			"data-testid": `filter-container-${s}`,
 			className: "relative",
-			children: [/* @__PURE__ */ r("input", {
-				...g,
+			children: [/* @__PURE__ */ n("input", {
+				...v,
 				id: s,
 				name: c,
 				"data-testid": f ?? u,
 				type: "checkbox",
 				tabIndex: p,
 				"data-name": "Filter",
-				disabled: d
-			}), /* @__PURE__ */ i("span", { children: [
-				/* @__PURE__ */ r("span", {
+				value: typeof g == "boolean" ? String(g) : g,
+				disabled: d,
+				onChange: (e) => {
+					h?.(e.nativeEvent, e.target.checked);
+				}
+			}), /* @__PURE__ */ r("span", { children: [
+				/* @__PURE__ */ n("span", {
 					className: "font-semibold",
-					children: h
+					children: _
 				}),
-				/* @__PURE__ */ r(n, {
+				/* @__PURE__ */ n(i, {
 					className: "check",
 					width: null,
 					name: "CheckDefault",
 					color: "black"
 				}),
-				m && /* @__PURE__ */ r(n, {
+				m && /* @__PURE__ */ n(i, {
 					name: "ArrowDefaultDown",
 					className: "ml-8",
 					width: "24px",

package/ui/forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          disabled={disabled}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACA;IACV,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}
+{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    onChange,\n    value,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          value={typeof value === 'boolean' ? String(value) : value}\n          disabled={disabled}\n          onChange={(e) => {\n            onChange?.(e.nativeEvent, e.target.checked);\n          }}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,UACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACV,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IAC1C;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}

package/ui/forms/FloatingLabelTextField.d.ts

@@ -0,0 +1,12 @@
+import { UseValueProps } from '../hooks/useValue';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { FormControlProps } from './FormControl';
+export interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {
+    icon?: IconicNames;
+    iconType?: IconicTypes;
+    formatter?: UseValueProps<Value>['formatter'];
+    hasDropdown?: boolean;
+    clear?: string;
+    iconFirst?: boolean;
+}
+export declare const FloatingLabelTextField: <Value = string>(props: FloatingLabelTextFieldProps<Value>) => import("react/jsx-runtime").JSX.Element;