npm - @clubmed/trident-ui - Versions diffs - 2.0.0-beta.62 → 2.0.0-beta.64 - Mend

@clubmed/trident-ui 2.0.0-beta.62 → 2.0.0-beta.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/examples/journey-card-compact-demo.d.ts +1 -0
package/examples/journey-card-compact-demo.js +71 -0
package/examples/journey-card-compact-demo.js.map +1 -0
package/examples/journey-card-demo.d.ts +1 -0
package/examples/journey-card-demo.js +123 -0
package/examples/journey-card-demo.js.map +1 -0
package/examples/tabs-notification-demo.d.ts +1 -0
package/examples/tabs-notification-demo.js +64 -0
package/examples/tabs-notification-demo.js.map +1 -0
package/package.json +1 -1
package/ui/PageNavigation.js +1 -1
package/ui/PageNavigation.js.map +1 -1
package/ui/journey-card/FlightSegmentCard.d.ts +15 -0
package/ui/journey-card/FlightSegmentCard.js +73 -0
package/ui/journey-card/FlightSegmentCard.js.map +1 -0
package/ui/journey-card/FlightTimeline.d.ts +5 -0
package/ui/journey-card/FlightTimeline.js +27 -0
package/ui/journey-card/FlightTimeline.js.map +1 -0
package/ui/journey-card/ItineraryDetails.d.ts +9 -0
package/ui/journey-card/ItineraryDetails.js +40 -0
package/ui/journey-card/ItineraryDetails.js.map +1 -0
package/ui/journey-card/JourneyCard.d.ts +17 -0
package/ui/journey-card/JourneyCard.js +34 -0
package/ui/journey-card/JourneyCard.js.map +1 -0
package/ui/journey-card/JourneyDetails.d.ts +47 -0
package/ui/journey-card/JourneyDetails.js +183 -0
package/ui/journey-card/JourneyDetails.js.map +1 -0
package/ui/tabs/Tabs.d.ts +5 -1
package/ui/tabs/Tabs.js +49 -43
package/ui/tabs/Tabs.js.map +1 -1

package/examples/journey-card-compact-demo.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function JourneyCardCompactDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/journey-card-compact-demo.js ADDED Viewed

@@ -0,0 +1,71 @@
+"use client";
+import { JourneyCard as e } from "../ui/journey-card/JourneyCard.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/journey-card-compact-demo.tsx
+var n = {
+	direction: "Outbound",
+	directionType: "Outbound",
+	departureDate: "10 Apr. 2026",
+	departureTime: "11:55",
+	arrivalDate: "11 Apr. 2026",
+	arrivalTime: "15:25",
+	duration: "9h30mn",
+	departureAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	arrivalAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	stopLabel: "Direct",
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)"
+}, r = {
+	direction: "Inbound",
+	directionType: "Inbound",
+	departureDate: "16 Apr. 2026",
+	departureTime: "17:50",
+	arrivalDate: "17 Apr. 2026",
+	arrivalTime: "08:20",
+	duration: "8h40mn",
+	departureAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	arrivalAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	stopLabel: "1 Stop over",
+	nbStopovers: 1,
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)"
+};
+function i() {
+	return /* @__PURE__ */ t("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ t(e, {
+			compact: !0,
+			flight1Journey: n,
+			flight2Journey: r
+		})
+	});
+}
+//#endregion
+export { i as default };
+//# sourceMappingURL=journey-card-compact-demo.js.map

package/examples/journey-card-compact-demo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"journey-card-compact-demo.js","names":[],"sources":["../../lib/examples/journey-card-compact-demo.tsx"],"sourcesContent":["'use client';\n\nimport { JourneyCard } from '@/ui/journey-card/JourneyCard';\nimport type { JourneyDetailsProps } from '@/ui/journey-card/JourneyDetails';\n\nconst outbound: JourneyDetailsProps = {\n direction: 'Outbound',\n directionType: 'Outbound',\n departureDate: '10 Apr. 2026',\n departureTime: '11:55',\n arrivalDate: '11 Apr. 2026',\n arrivalTime: '15:25',\n duration: '9h30mn',\n departureAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n arrivalAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n stopLabel: 'Direct',\n airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n airlineLogoAlt: 'Transavia logo',\n operatedBy: 'Transavia',\n characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n carbonEmission: 'A total of 750 kg CO₂ emitted.',\n carbonEmissionLearnMoreLabel: 'Learn more',\n plusDaysLabel: 'day',\n localTimeLabel: '(local time)',\n};\n\nconst inbound: JourneyDetailsProps = {\n direction: 'Inbound',\n directionType: 'Inbound',\n departureDate: '16 Apr. 2026',\n departureTime: '17:50',\n arrivalDate: '17 Apr. 2026',\n arrivalTime: '08:20',\n duration: '8h40mn',\n departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n stopLabel: '1 Stop over',\n nbStopovers: 1,\n airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n airlineLogoAlt: 'Transavia logo',\n operatedBy: 'Transavia',\n characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n carbonEmission: 'A total of 750 kg CO₂ emitted.',\n carbonEmissionLearnMoreLabel: 'Learn more',\n plusDays: 1,\n plusDaysLabel: 'day',\n localTimeLabel: '(local time)',\n};\n\nexport default function JourneyCardCompactDemo() {\n return (\n <div className=\"w-full\">\n <JourneyCard compact flight1Journey={outbound} flight2Journey={inbound} />\n </div>\n );\n}\n"],"mappings":";;;;AAKA,IAAM,IAAgC;CACpC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAc;CAChE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAe;CAC/D,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,iBAAiB;CACjB,gBAAgB;CAChB,8BAA8B;CAC9B,eAAe;CACf,gBAAgB;CACjB,EAEK,IAA+B;CACnC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAe;CACjE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAc;CAC9D,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,iBAAiB;CACjB,gBAAgB;CAChB,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CACjB;AAED,SAAwB,IAAyB;AAC/C,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAa,SAAA;GAAQ,gBAAgB;GAAU,gBAAgB;GAAW,CAAA;EACtE,CAAA"}

package/examples/journey-card-demo.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function JourneyCardDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/journey-card-demo.js ADDED Viewed

@@ -0,0 +1,123 @@
+"use client";
+import { JourneyCard as e } from "../ui/journey-card/JourneyCard.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/journey-card-demo.tsx
+var n = {
+	direction: "Outbound",
+	directionType: "Outbound",
+	departureDate: "10 Apr. 2026",
+	departureTime: "11:55",
+	arrivalDate: "11 Apr. 2026",
+	arrivalTime: "15:25",
+	duration: "9h30mn",
+	departureAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	arrivalAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	stopLabel: "Direct",
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	companyName: "Operated by Hop",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreUrl: "#",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)",
+	itinerary: {
+		segments: [{
+			flightNumber: "LX 633 Transavia",
+			departureTime: "09:45",
+			arrivalTime: "11:05",
+			departureAirport: {
+				name: "Paris-Roissy CDG",
+				terminal: "Terminal 2"
+			},
+			arrivalAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalDate: "Arrival: 11 Apr. 2026"
+		}],
+		flexibleOption: "Flexible flight option\n• Cancellation fees limited to €300\n• Baggage included"
+	}
+}, r = {
+	direction: "Inbound",
+	directionType: "Inbound",
+	departureDate: "16 Apr. 2026",
+	departureTime: "17:50",
+	arrivalDate: "17 Apr. 2026",
+	arrivalTime: "08:20",
+	duration: "8h40mn",
+	departureAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	arrivalAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	stopLabel: "1 Stop over",
+	nbStopovers: 1,
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	companyName: "Operated by Hop",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreUrl: "#",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)",
+	itinerary: {
+		segments: [{
+			flightNumber: "LX 630 Transavia",
+			departureTime: "09:45",
+			arrivalTime: "11:05",
+			departureAirport: {
+				name: "Punta Cana",
+				terminal: "Terminal 2E"
+			},
+			arrivalAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalDate: "Arrival: 16 Apr. 2026"
+		}, {
+			flightNumber: "LX 654 Transavia",
+			departureTime: "12:30",
+			arrivalTime: "08:20",
+			departureAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalAirport: {
+				name: "Paris-Orly",
+				terminal: "Terminal 2"
+			},
+			arrivalDate: "Arrival: 17 Apr. 2026"
+		}],
+		connectionTime: "1h10min : Airport connection",
+		flexibleOption: "Flexible flight option\n• Cancellation fees limited to €300\n• Baggage included"
+	}
+};
+function i() {
+	return /* @__PURE__ */ t("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ t(e, {
+			flight1Journey: n,
+			flight2Journey: r
+		})
+	});
+}
+//#endregion
+export { i as default };
+//# sourceMappingURL=journey-card-demo.js.map

package/examples/journey-card-demo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"journey-card-demo.js","names":[],"sources":["../../lib/examples/journey-card-demo.tsx"],"sourcesContent":["'use client';\n\nimport { JourneyCard } from '@/ui/journey-card/JourneyCard';\nimport type { JourneyDetailsProps } from '@/ui/journey-card/JourneyDetails';\n\nconst outbound: JourneyDetailsProps = {\n direction: 'Outbound',\n directionType: 'Outbound',\n departureDate: '10 Apr. 2026',\n departureTime: '11:55',\n arrivalDate: '11 Apr. 2026',\n arrivalTime: '15:25',\n duration: '9h30mn',\n departureAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n arrivalAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n stopLabel: 'Direct',\n airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n airlineLogoAlt: 'Transavia logo',\n operatedBy: 'Transavia',\n companyName: 'Operated by Hop',\n characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n carbonEmission: 'A total of 750 kg CO₂ emitted.',\n carbonEmissionLearnMoreUrl: '#',\n carbonEmissionLearnMoreLabel: 'Learn more',\n plusDays: 1,\n plusDaysLabel: 'day',\n localTimeLabel: '(local time)',\n itinerary: {\n segments: [\n {\n flightNumber: 'LX 633 Transavia',\n departureTime: '09:45',\n arrivalTime: '11:05',\n departureAirport: { name: 'Paris-Roissy CDG', terminal: 'Terminal 2' },\n arrivalAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n arrivalDate: 'Arrival: 11 Apr. 2026',\n },\n ],\n flexibleOption:\n 'Flexible flight option\\n• Cancellation fees limited to €300\\n• Baggage included',\n },\n};\n\nconst inbound: JourneyDetailsProps = {\n direction: 'Inbound',\n directionType: 'Inbound',\n departureDate: '16 Apr. 2026',\n departureTime: '17:50',\n arrivalDate: '17 Apr. 2026',\n arrivalTime: '08:20',\n duration: '8h40mn',\n departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n stopLabel: '1 Stop over',\n nbStopovers: 1,\n airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n airlineLogoAlt: 'Transavia logo',\n operatedBy: 'Transavia',\n companyName: 'Operated by Hop',\n characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n carbonEmission: 'A total of 750 kg CO₂ emitted.',\n carbonEmissionLearnMoreUrl: '#',\n carbonEmissionLearnMoreLabel: 'Learn more',\n plusDays: 1,\n plusDaysLabel: 'day',\n localTimeLabel: '(local time)',\n itinerary: {\n segments: [\n {\n flightNumber: 'LX 630 Transavia',\n departureTime: '09:45',\n arrivalTime: '11:05',\n departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n arrivalAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n arrivalDate: 'Arrival: 16 Apr. 2026',\n },\n {\n flightNumber: 'LX 654 Transavia',\n departureTime: '12:30',\n arrivalTime: '08:20',\n departureAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n arrivalDate: 'Arrival: 17 Apr. 2026',\n },\n ],\n connectionTime: '1h10min : Airport connection',\n flexibleOption:\n 'Flexible flight option\\n• Cancellation fees limited to €300\\n• Baggage included',\n },\n};\n\nexport default function JourneyCardDemo() {\n return (\n <div className=\"w-full\">\n <JourneyCard flight1Journey={outbound} flight2Journey={inbound} />\n </div>\n );\n}\n"],"mappings":";;;;AAKA,IAAM,IAAgC;CACpC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAc;CAChE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAe;CAC/D,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,iBAAiB;CACjB,gBAAgB;CAChB,4BAA4B;CAC5B,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CAChB,WAAW;EACT,UAAU,CACR;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAoB,UAAU;IAAc;GACtE,gBAAgB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC3D,aAAa;GACd,CACF;EACD,gBACE;;CAEL,EAEK,IAA+B;CACnC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAe;CACjE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAc;CAC9D,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,iBAAiB;CACjB,gBAAgB;CAChB,4BAA4B;CAC5B,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CAChB,WAAW;EACT,UAAU,CACR;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAc,UAAU;IAAe;GACjE,gBAAgB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC3D,aAAa;GACd,EACD;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC7D,gBAAgB;IAAE,MAAM;IAAc,UAAU;IAAc;GAC9D,aAAa;GACd,CACF;EACD,gBAAgB;EAChB,gBACE;;CAEL;AAED,SAAwB,IAAkB;AACxC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAa,gBAAgB;GAAU,gBAAgB;GAAW,CAAA;EAC9D,CAAA"}

package/examples/tabs-notification-demo.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function TabsNotificationDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/tabs-notification-demo.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from "../ui/tabs/Tabs.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/tabs-notification-demo.tsx
+function s() {
+	return /* @__PURE__ */ o(r, {
+		selected: 1,
+		children: [/* @__PURE__ */ o(t, {
+			constrained: !0,
+			children: [
+				/* @__PURE__ */ a(e, {
+					label: "Overview",
+					value: 1
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Messages",
+					value: 2,
+					notification: 3
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Alerts",
+					value: 3,
+					notification: "!"
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Settings",
+					value: 4
+				})
+			]
+		}), /* @__PURE__ */ o(i, { children: [
+			/* @__PURE__ */ a(n, {
+				value: 1,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Overview panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 2,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-saffron",
+					children: "3 unread messages"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 3,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lavender",
+					children: "Alerts panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 4,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Settings panel"
+				})
+			})
+		] })]
+	});
+}
+//#endregion
+export { s as default };
+//# sourceMappingURL=tabs-notification-demo.js.map

package/examples/tabs-notification-demo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-notification-demo.js","names":[],"sources":["../../lib/examples/tabs-notification-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsNotificationDemo() {\n return (\n <Tabs selected={1}>\n <TabList constrained>\n <Tab label=\"Overview\" value={1} />\n <Tab label=\"Messages\" value={2} notification={3} />\n <Tab label=\"Alerts\" value={3} notification=\"!\" />\n <Tab label=\"Settings\" value={4} />\n </TabList>\n <TabsBody>\n <TabPanel value={1}>\n <div className=\"p-16 bg-lightSand\">Overview panel</div>\n </TabPanel>\n <TabPanel value={2}>\n <div className=\"p-16 bg-saffron\">3 unread messages</div>\n </TabPanel>\n <TabPanel value={3}>\n <div className=\"p-16 bg-lavender\">Alerts panel</div>\n </TabPanel>\n <TabPanel value={4}>\n <div className=\"p-16 bg-lightSand\">Settings panel</div>\n </TabPanel>\n </TabsBody>\n </Tabs>\n );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD;GAAS,aAAA;aAAT;IACE,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAClC,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAG,cAAc;KAAK,CAAA;IACnD,kBAAC,GAAD;KAAK,OAAM;KAAS,OAAO;KAAG,cAAa;KAAM,CAAA;IACjD,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAC1B;MACV,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAkB;KAAuB,CAAA;IAC/C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAmB;KAAkB,CAAA;IAC3C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACF,EAAA,CAAA,CACN"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.62",
+  "version": "2.0.0-beta.64",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/ui/PageNavigation.js CHANGED Viewed

@@ -44,7 +44,7 @@ var o = {
 						href: t.href,
 						"aria-current": n ? "page" : void 0,
 						style: n ? s : void 0,
-						className: e("relative z-10 grid items-center justify-center gap-2 rounded-pill", "font-sans text-b3 font-medium focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none", n ? "[@supports(not(anchor-name:--x))]:bg-black" : "focus:bg-pearl", n ? "px-20 py-12" : "md:px-20 md:py-12", n ? "text-white" : "text-black"),
+						className: e("relative z-10 grid items-center justify-center gap-2 rounded-pill", "font-sans text-b3 font-semibold focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none", n ? "[@supports(not(anchor-name:--x))]:bg-black" : "focus:bg-pearl", n ? "px-20 py-12" : "md:px-20 md:py-12", n ? "text-white" : "text-black"),
 						children: [t.icon && /* @__PURE__ */ i("div", {
 							className: e("row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden", "md:opacity-0 transition-opacity mx-auto", n && "opacity-0"),
 							"aria-hidden": "true",

package/ui/PageNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageNavigation.js","names":[],"sources":["../../lib/ui/PageNavigation.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n CSSProperties,\n FunctionComponent,\n KeyboardEvent,\n} from 'react';\nimport { useCallback, useRef } from 'react';\nimport clsx from 'clsx';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\n\nexport interface PageNavigationItem {\n id: string;\n label: string;\n href: string;\n icon?: IconicNames;\n}\n\nexport interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {\n items: PageNavigationItem[];\n activeItem: string;\n}\n\n// Static — hoisted outside component so it's not recreated on every render\nconst PILL_STYLE: CSSProperties = {\n positionAnchor: '--page-nav-active',\n top: 'anchor(top)',\n bottom: 'anchor(bottom)',\n left: 'anchor(left)',\n right: 'anchor(right)',\n position: 'absolute',\n};\n\nconst ACTIVE_ANCHOR_STYLE: CSSProperties = { anchorName: '--page-nav-active' };\n\nconst PILL = (\n <span\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]\"\n style={PILL_STYLE}\n />\n);\n\nexport const PageNavigation: FunctionComponent<PageNavigationProps> = ({\n items,\n activeItem,\n className,\n ...attrs\n}) => {\n const listRef = useRef<HTMLUListElement>(null);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLUListElement>) => {\n const links = Array.from(listRef.current?.querySelectorAll<HTMLAnchorElement>('a') ?? []);\n const focused = links.indexOf(document.activeElement as HTMLAnchorElement);\n if (focused === -1) return;\n\n let next = focused;\n if (e.key === 'ArrowRight') next = (focused + 1) % links.length;\n else if (e.key === 'ArrowLeft') next = (focused - 1 + links.length) % links.length;\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = links.length - 1;\n else return;\n\n e.preventDefault();\n links[next].focus();\n }, []);\n\n return (\n <nav aria-label=\"Page navigation\" {...attrs} className={clsx('flex items-center', className)}>\n <ul\n ref={listRef}\n onKeyDown={handleKeyDown}\n className=\"relative flex items-center gap-4 md:gap-16\"\n role=\"list\"\n >\n {PILL}\n\n {items.map((item) => {\n const isActive = item.id === activeItem;\n\n return (\n <li key={item.id} className=\"relative\">\n <a\n href={item.href}\n aria-current={isActive ? 'page' : undefined}\n style={isActive ? ACTIVE_ANCHOR_STYLE : undefined}\n className={clsx(\n 'relative z-10 grid items-center justify-center gap-2 rounded-pill',\n 'font-sans text-b3 font-~~medium~~ focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none',\n isActive ? '[@supports(not(anchor-name:--x))]:bg-black' : 'focus:bg-pearl',\n isActive ? 'px-20 py-12' : 'md:px-20 md:py-12',\n isActive ? 'text-white' : 'text-black',\n )}\n >\n {item.icon && (\n <div\n className={clsx(\n 'row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden',\n 'md:opacity-0 transition-opacity mx-auto',\n isActive && 'opacity-0',\n )}\n aria-hidden=\"true\"\n >\n <Icon name={item.icon} width=\"30px\" />\n </div>\n )}\n\n <span\n className={clsx(\n 'row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center',\n isActive && 'grid-cols-[1fr] opacity-100',\n )}\n >\n <span className=\"overflow-hidden mx-auto\">{item.label}</span>\n </span>\n </a>\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n"],"mappings":";;;;;;AAyBA,IAAM,IAA4B;CAChC,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,UAAU;CACX,EAEK,IAAqC,EAAE,YAAY,qBAAqB,EAExE,IACJ,kBAAC,QAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAO;CACP,CAAA,EAGS,KAA0D,EACrE,UACA,eACA,cACA,GAAG,QACC;CACJ,IAAM,IAAU,EAAyB,KAAK,EAExC,IAAgB,GAAa,MAAuC;EACxE,IAAM,IAAQ,MAAM,KAAK,EAAQ,SAAS,iBAAoC,IAAI,IAAI,EAAE,CAAC,EACnF,IAAU,EAAM,QAAQ,SAAS,cAAmC;AAC1E,MAAI,MAAY,GAAI;EAEpB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAU,KAAK,EAAM;WAChD,EAAE,QAAQ,YAAa,MAAQ,IAAU,IAAI,EAAM,UAAU,EAAM;WACnE,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,cAAW;EAAkB,GAAI;EAAO,WAAW,EAAK,qBAAqB,EAAU;YAC1F,kBAAC,MAAD;GACE,KAAK;GACL,WAAW;GACX,WAAU;GACV,MAAK;aAJP,CAMG,GAEA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAW,EAAK,OAAO;AAE7B,WACE,kBAAC,MAAD;KAAkB,WAAU;eAC1B,kBAAC,KAAD;MACE,MAAM,EAAK;MACX,gBAAc,IAAW,SAAS,KAAA;MAClC,OAAO,IAAW,IAAsB,KAAA;MACxC,WAAW,EACT,qEACA,~~kGACA~~,IAAW,+CAA+C,kBAC1D,IAAW,gBAAgB,qBAC3B,IAAW,eAAe,aAC3B;gBAVH,CAYG,EAAK,QACJ,kBAAC,OAAD;OACE,WAAW,EACT,0HACA,2CACA,KAAY,YACb;OACD,eAAY;iBAEZ,kBAAC,GAAD;QAAM,MAAM,EAAK;QAAM,OAAM;QAAS,CAAA;OAClC,CAAA,EAGR,kBAAC,QAAD;OACE,WAAW,EACT,wKACA,KAAY,8BACb;iBAED,kBAAC,QAAD;QAAM,WAAU;kBAA2B,EAAK;QAAa,CAAA;OACxD,CAAA,CAAA;;KAEN,EAnCI,EAAK,GAmCT;KAEP,CAAA;;EAEA,CAAA"}
1	+ {"version":3,"file":"PageNavigation.js","names":[],"sources":["../../lib/ui/PageNavigation.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n CSSProperties,\n FunctionComponent,\n KeyboardEvent,\n} from 'react';\nimport { useCallback, useRef } from 'react';\nimport clsx from 'clsx';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\n\nexport interface PageNavigationItem {\n id: string;\n label: string;\n href: string;\n icon?: IconicNames;\n}\n\nexport interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {\n items: PageNavigationItem[];\n activeItem: string;\n}\n\n// Static — hoisted outside component so it's not recreated on every render\nconst PILL_STYLE: CSSProperties = {\n positionAnchor: '--page-nav-active',\n top: 'anchor(top)',\n bottom: 'anchor(bottom)',\n left: 'anchor(left)',\n right: 'anchor(right)',\n position: 'absolute',\n};\n\nconst ACTIVE_ANCHOR_STYLE: CSSProperties = { anchorName: '--page-nav-active' };\n\nconst PILL = (\n <span\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]\"\n style={PILL_STYLE}\n />\n);\n\nexport const PageNavigation: FunctionComponent<PageNavigationProps> = ({\n items,\n activeItem,\n className,\n ...attrs\n}) => {\n const listRef = useRef<HTMLUListElement>(null);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLUListElement>) => {\n const links = Array.from(listRef.current?.querySelectorAll<HTMLAnchorElement>('a') ?? []);\n const focused = links.indexOf(document.activeElement as HTMLAnchorElement);\n if (focused === -1) return;\n\n let next = focused;\n if (e.key === 'ArrowRight') next = (focused + 1) % links.length;\n else if (e.key === 'ArrowLeft') next = (focused - 1 + links.length) % links.length;\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = links.length - 1;\n else return;\n\n e.preventDefault();\n links[next].focus();\n }, []);\n\n return (\n <nav aria-label=\"Page navigation\" {...attrs} className={clsx('flex items-center', className)}>\n <ul\n ref={listRef}\n onKeyDown={handleKeyDown}\n className=\"relative flex items-center gap-4 md:gap-16\"\n role=\"list\"\n >\n {PILL}\n\n {items.map((item) => {\n const isActive = item.id === activeItem;\n\n return (\n <li key={item.id} className=\"relative\">\n <a\n href={item.href}\n aria-current={isActive ? 'page' : undefined}\n style={isActive ? ACTIVE_ANCHOR_STYLE : undefined}\n className={clsx(\n 'relative z-10 grid items-center justify-center gap-2 rounded-pill',\n 'font-sans text-b3 font-semibold focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none',\n isActive ? '[@supports(not(anchor-name:--x))]:bg-black' : 'focus:bg-pearl',\n isActive ? 'px-20 py-12' : 'md:px-20 md:py-12',\n isActive ? 'text-white' : 'text-black',\n )}\n >\n {item.icon && (\n <div\n className={clsx(\n 'row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden',\n 'md:opacity-0 transition-opacity mx-auto',\n isActive && 'opacity-0',\n )}\n aria-hidden=\"true\"\n >\n <Icon name={item.icon} width=\"30px\" />\n </div>\n )}\n\n <span\n className={clsx(\n 'row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center',\n isActive && 'grid-cols-[1fr] opacity-100',\n )}\n >\n <span className=\"overflow-hidden mx-auto\">{item.label}</span>\n </span>\n </a>\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n"],"mappings":";;;;;;AAyBA,IAAM,IAA4B;CAChC,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,UAAU;CACX,EAEK,IAAqC,EAAE,YAAY,qBAAqB,EAExE,IACJ,kBAAC,QAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAO;CACP,CAAA,EAGS,KAA0D,EACrE,UACA,eACA,cACA,GAAG,QACC;CACJ,IAAM,IAAU,EAAyB,KAAK,EAExC,IAAgB,GAAa,MAAuC;EACxE,IAAM,IAAQ,MAAM,KAAK,EAAQ,SAAS,iBAAoC,IAAI,IAAI,EAAE,CAAC,EACnF,IAAU,EAAM,QAAQ,SAAS,cAAmC;AAC1E,MAAI,MAAY,GAAI;EAEpB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAU,KAAK,EAAM;WAChD,EAAE,QAAQ,YAAa,MAAQ,IAAU,IAAI,EAAM,UAAU,EAAM;WACnE,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,cAAW;EAAkB,GAAI;EAAO,WAAW,EAAK,qBAAqB,EAAU;YAC1F,kBAAC,MAAD;GACE,KAAK;GACL,WAAW;GACX,WAAU;GACV,MAAK;aAJP,CAMG,GAEA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAW,EAAK,OAAO;AAE7B,WACE,kBAAC,MAAD;KAAkB,WAAU;eAC1B,kBAAC,KAAD;MACE,MAAM,EAAK;MACX,gBAAc,IAAW,SAAS,KAAA;MAClC,OAAO,IAAW,IAAsB,KAAA;MACxC,WAAW,EACT,qEACA,oGACA,IAAW,+CAA+C,kBAC1D,IAAW,gBAAgB,qBAC3B,IAAW,eAAe,aAC3B;gBAVH,CAYG,EAAK,QACJ,kBAAC,OAAD;OACE,WAAW,EACT,0HACA,2CACA,KAAY,YACb;OACD,eAAY;iBAEZ,kBAAC,GAAD;QAAM,MAAM,EAAK;QAAM,OAAM;QAAS,CAAA;OAClC,CAAA,EAGR,kBAAC,QAAD;OACE,WAAW,EACT,wKACA,KAAY,8BACb;iBAED,kBAAC,QAAD;QAAM,WAAU;kBAA2B,EAAK;QAAa,CAAA;OACxD,CAAA,CAAA;;KAEN,EAnCI,EAAK,GAmCT;KAEP,CAAA;;EAEA,CAAA"}

package/ui/journey-card/FlightSegmentCard.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface AirportInfo {
+    name: string;
+    terminal?: string;
+}
+export interface FlightSegmentCardProps extends ComponentPropsWithoutRef<'div'> {
+    flightNumber: string;
+    departureTime: string;
+    arrivalTime: string;
+    departureAirport: AirportInfo;
+    arrivalAirport: AirportInfo;
+    arrivalDate?: string;
+    plusDays?: number;
+}
+export declare function FlightSegmentCard({ flightNumber, departureTime, arrivalTime, departureAirport, arrivalAirport, arrivalDate, className, ...props }: FlightSegmentCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/FlightSegmentCard.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { t as e } from "../../chunks/clsx.js";
+import { FlightTimeline as t } from "./FlightTimeline.js";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/journey-card/FlightSegmentCard.tsx
+function a({ flightNumber: a, departureTime: o, arrivalTime: s, departureAirport: c, arrivalAirport: l, arrivalDate: u, className: d, ...f }) {
+	return /* @__PURE__ */ i("div", {
+		"data-name": "FlightSegmentCard",
+		...f,
+		className: e("flex h-fit w-full flex-col gap-12 rounded-32 bg-white p-20", d),
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex h-24 w-full flex-row items-center gap-8",
+			children: [/* @__PURE__ */ r(n, {
+				name: "PlaneOutbound",
+				width: "24px",
+				className: "shrink-0 text-black"
+			}), /* @__PURE__ */ r("span", {
+				className: "font-sans text-b4",
+				children: a
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex w-full flex-col gap-4",
+			children: [
+				/* @__PURE__ */ i("div", {
+					className: "flex w-full flex-row items-end justify-between",
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex flex-1 flex-col justify-center",
+						children: /* @__PURE__ */ r("span", {
+							className: "font-sans text-b3 font-semibold",
+							children: o
+						})
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-col items-end justify-center",
+						children: [u && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4",
+							children: u
+						}), /* @__PURE__ */ r("span", {
+							className: "font-sans text-b3 font-semibold",
+							children: s
+						})]
+					})]
+				}),
+				/* @__PURE__ */ r(t, {}),
+				/* @__PURE__ */ i("div", {
+					className: "flex w-full flex-row items-start justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "flex w-120 min-w-120 flex-col",
+						children: [/* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 font-semibold",
+							children: c.name
+						}), c.terminal && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4",
+							children: c.terminal
+						})]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex w-120 min-w-120 flex-col items-end",
+						children: [/* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 font-semibold",
+							children: l.name
+						}), l.terminal && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 text-right",
+							children: l.terminal
+						})]
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { a as FlightSegmentCard };
+//# sourceMappingURL=FlightSegmentCard.js.map

package/ui/journey-card/FlightSegmentCard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlightSegmentCard.js","names":[],"sources":["../../../lib/ui/journey-card/FlightSegmentCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { FlightTimeline } from './FlightTimeline';\n\nexport interface AirportInfo {\n name: string;\n terminal?: string;\n}\n\nexport interface FlightSegmentCardProps extends ComponentPropsWithoutRef<'div'> {\n flightNumber: string;\n departureTime: string;\n arrivalTime: string;\n departureAirport: AirportInfo;\n arrivalAirport: AirportInfo;\n arrivalDate?: string;\n plusDays?: number;\n}\n\nexport function FlightSegmentCard({\n flightNumber,\n departureTime,\n arrivalTime,\n departureAirport,\n arrivalAirport,\n arrivalDate,\n className,\n ...props\n}: FlightSegmentCardProps) {\n return (\n <div\n data-name=\"FlightSegmentCard\"\n {...props}\n className={clsx('flex h-fit w-full flex-col gap-12 rounded-32 bg-white p-20', className)}\n >\n <div className=\"flex h-24 w-full flex-row items-center gap-8\">\n <Icon name=\"PlaneOutbound\" width=\"24px\" className=\"shrink-0 text-black\" />\n <span className=\"font-sans text-b4\">{flightNumber}</span>\n </div>\n\n <div className=\"flex w-full flex-col gap-4\">\n <div className=\"flex w-full flex-row items-end justify-between\">\n <div className=\"flex flex-1 flex-col justify-center\">\n <span className=\"font-sans text-b3 font-semibold\">{departureTime}</span>\n </div>\n <div className=\"flex flex-col items-end justify-center\">\n {arrivalDate && <span className=\"font-sans text-b4\">{arrivalDate}</span>}\n <span className=\"font-sans text-b3 font-semibold\">{arrivalTime}</span>\n </div>\n </div>\n\n <FlightTimeline />\n\n <div className=\"flex w-full flex-row items-start justify-between\">\n <div className=\"flex w-120 min-w-120 flex-col\">\n <span className=\"font-sans text-b4 font-semibold\">{departureAirport.name}</span>\n {departureAirport.terminal && (\n <span className=\"font-sans text-b4\">{departureAirport.terminal}</span>\n )}\n </div>\n <div className=\"flex w-120 min-w-120 flex-col items-end\">\n <span className=\"font-sans text-b4 font-semibold\">{arrivalAirport.name}</span>\n {arrivalAirport.terminal && (\n <span className=\"font-sans text-b4 text-right\">{arrivalAirport.terminal}</span>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAoBA,SAAgB,EAAkB,EAChC,iBACA,kBACA,gBACA,qBACA,mBACA,gBACA,cACA,GAAG,KACsB;AACzB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,8DAA8D,EAAU;YAH1F,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAgB,OAAM;IAAO,WAAU;IAAwB,CAAA,EAC1E,kBAAC,QAAD;IAAM,WAAU;cAAqB;IAAoB,CAAA,CACrD;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OAAM,WAAU;iBAAmC;OAAqB,CAAA;MACpE,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,KAAe,kBAAC,QAAD;OAAM,WAAU;iBAAqB;OAAmB,CAAA,EACxE,kBAAC,QAAD;OAAM,WAAU;iBAAmC;OAAmB,CAAA,CAClE;QACF;;IAEN,kBAAC,GAAD,EAAkB,CAAA;IAElB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmC,EAAiB;OAAY,CAAA,EAC/E,EAAiB,YAChB,kBAAC,QAAD;OAAM,WAAU;iBAAqB,EAAiB;OAAgB,CAAA,CAEpE;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmC,EAAe;OAAY,CAAA,EAC7E,EAAe,YACd,kBAAC,QAAD;OAAM,WAAU;iBAAgC,EAAe;OAAgB,CAAA,CAE7E;QACF;;IACF;KACF"}

package/ui/journey-card/FlightTimeline.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface FlightTimelineProps extends ComponentPropsWithoutRef<'div'> {
+    nbStopovers?: number;
+}
+export declare function FlightTimeline({ nbStopovers, className, ...props }: FlightTimelineProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/FlightTimeline.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { t as e } from "../../chunks/clsx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/ui/journey-card/FlightTimeline.tsx
+function r({ nbStopovers: r = 0, className: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		"data-name": "FlightTimeline",
+		...a,
+		className: e("relative flex w-full items-center h-12", i),
+		children: [
+			/* @__PURE__ */ t("span", { className: "absolute left-0 h-12 w-12 rounded-full border-2 border-black bg-white" }),
+			/* @__PURE__ */ t("span", { className: "h-2 flex-1 rounded-pill bg-black" }),
+			r > 0 && /* @__PURE__ */ t("div", {
+				className: "flex shrink-0 flex-row items-center gap-2",
+				children: Array.from({ length: r }).map((e, r) => /* @__PURE__ */ n("span", {
+					className: "flex flex-row items-center gap-2",
+					children: [r !== 0 && /* @__PURE__ */ t("span", { className: "h-2 w-8 rounded-pill bg-black" }), /* @__PURE__ */ t("span", { className: "h-12 w-12 rounded-full border-2 border-white bg-black" })]
+				}, r))
+			}),
+			/* @__PURE__ */ t("span", { className: "h-2 flex-1 rounded-pill bg-black" }),
+			/* @__PURE__ */ t("span", { className: "absolute right-0 h-12 w-12 rounded-full border-2 border-black bg-white" })
+		]
+	});
+}
+//#endregion
+export { r as FlightTimeline };
+//# sourceMappingURL=FlightTimeline.js.map

package/ui/journey-card/FlightTimeline.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlightTimeline.js","names":[],"sources":["../../../lib/ui/journey-card/FlightTimeline.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nexport interface FlightTimelineProps extends ComponentPropsWithoutRef<'div'> {\n nbStopovers?: number;\n}\n\nexport function FlightTimeline({ nbStopovers = 0, className, ...props }: FlightTimelineProps) {\n return (\n <div\n data-name=\"FlightTimeline\"\n {...props}\n className={clsx('relative flex w-full items-center h-12', className)}\n >\n <span className=\"absolute left-0 h-12 w-12 rounded-full border-2 border-black bg-white\" />\n <span className=\"h-2 flex-1 rounded-pill bg-black\" />\n {nbStopovers > 0 && (\n <div className=\"flex shrink-0 flex-row items-center gap-2\">\n {Array.from({ length: nbStopovers }).map((_, i) => (\n <span key={i} className=\"flex flex-row items-center gap-2\">\n {i !== 0 && <span className=\"h-2 w-8 rounded-pill bg-black\" />}\n <span className=\"h-12 w-12 rounded-full border-2 border-white bg-black\" />\n </span>\n ))}\n </div>\n )}\n <span className=\"h-2 flex-1 rounded-pill bg-black\" />\n <span className=\"absolute right-0 h-12 w-12 rounded-full border-2 border-black bg-white\" />\n </div>\n );\n}\n"],"mappings":";;;AAOA,SAAgB,EAAe,EAAE,iBAAc,GAAG,cAAW,GAAG,KAA8B;AAC5F,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,0CAA0C,EAAU;YAHtE;GAKE,kBAAC,QAAD,EAAM,WAAU,yEAA0E,CAAA;GAC1F,kBAAC,QAAD,EAAM,WAAU,oCAAqC,CAAA;GACpD,IAAc,KACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAa,CAAC,CAAC,KAAK,GAAG,MAC3C,kBAAC,QAAD;KAAc,WAAU;eAAxB,CACG,MAAM,KAAK,kBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA,EAC9D,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA,CACrE;OAHI,EAGJ,CACP;IACE,CAAA;GAER,kBAAC,QAAD,EAAM,WAAU,oCAAqC,CAAA;GACrD,kBAAC,QAAD,EAAM,WAAU,0EAA2E,CAAA;GACvF"}

package/ui/journey-card/ItineraryDetails.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { AirportInfo, FlightSegmentCardProps } from './FlightSegmentCard';
+export type { AirportInfo };
+export interface ItineraryDetailsProps extends ComponentPropsWithoutRef<'div'> {
+    segments: FlightSegmentCardProps[];
+    connectionTime?: string;
+    flexibleOption?: string;
+}
+export declare function ItineraryDetails({ segments, connectionTime, flexibleOption, className, ...props }: ItineraryDetailsProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/ItineraryDetails.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { t as e } from "../../chunks/clsx.js";
+import { FlightSegmentCard as t } from "./FlightSegmentCard.js";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/journey-card/ItineraryDetails.tsx
+function a({ segments: a, connectionTime: o, flexibleOption: s, className: c, ...l }) {
+	return /* @__PURE__ */ i("div", {
+		"data-name": "ItineraryDetails",
+		...l,
+		className: e("flex h-fit w-full flex-col gap-8 rounded-44 bg-lightSand p-16", c),
+		children: [a.map((e, s) => /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ r(t, { ...e }), o && s < a.length - 1 && /* @__PURE__ */ i("div", {
+				className: "flex h-fit w-full flex-row items-center gap-2 pl-20",
+				children: [/* @__PURE__ */ r(n, {
+					name: "ClockDefault",
+					width: "24px",
+					className: "shrink-0 text-black"
+				}), /* @__PURE__ */ r("span", {
+					className: "font-sans text-b4",
+					children: o
+				})]
+			})]
+		}, s)), s && /* @__PURE__ */ i("div", {
+			className: "flex w-full flex-row items-start gap-2",
+			children: [/* @__PURE__ */ r(n, {
+				name: "LightBulb",
+				width: "24px",
+				className: "mt-2 shrink-0 text-black"
+			}), /* @__PURE__ */ r("div", {
+				className: "whitespace-pre-wrap font-sans text-b4",
+				children: s
+			})]
+		})]
+	});
+}
+//#endregion
+export { a as ItineraryDetails };
+//# sourceMappingURL=ItineraryDetails.js.map

package/ui/journey-card/ItineraryDetails.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ItineraryDetails.js","names":[],"sources":["../../../lib/ui/journey-card/ItineraryDetails.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { FlightSegmentCard } from './FlightSegmentCard';\nimport type { AirportInfo, FlightSegmentCardProps } from './FlightSegmentCard';\n\nexport type { AirportInfo };\n\nexport interface ItineraryDetailsProps extends ComponentPropsWithoutRef<'div'> {\n segments: FlightSegmentCardProps[];\n connectionTime?: string;\n flexibleOption?: string;\n}\n\nexport function ItineraryDetails({\n segments,\n connectionTime,\n flexibleOption,\n className,\n ...props\n}: ItineraryDetailsProps) {\n return (\n <div\n data-name=\"ItineraryDetails\"\n {...props}\n className={clsx('flex h-fit w-full flex-col gap-8 rounded-44 bg-lightSand p-16', className)}\n >\n {segments.map((segment, index) => (\n <div key={index} className=\"flex flex-col gap-8\">\n <FlightSegmentCard {...segment} />\n\n {connectionTime && index < segments.length - 1 && (\n <div className=\"flex h-fit w-full flex-row items-center gap-2 pl-20\">\n <Icon name=\"ClockDefault\" width=\"24px\" className=\"shrink-0 text-black\" />\n <span className=\"font-sans text-b4\">{connectionTime}</span>\n </div>\n )}\n </div>\n ))}\n\n {flexibleOption && (\n <div className=\"flex w-full flex-row items-start gap-2\">\n <Icon name=\"LightBulb\" width=\"24px\" className=\"mt-2 shrink-0 text-black\" />\n <div className=\"whitespace-pre-wrap font-sans text-b4\">{flexibleOption}</div>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;AAcA,SAAgB,EAAiB,EAC/B,aACA,mBACA,mBACA,cACA,GAAG,KACqB;AACxB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,iEAAiE,EAAU;YAH7F,CAKG,EAAS,KAAK,GAAS,MACtB,kBAAC,OAAD;GAAiB,WAAU;aAA3B,CACE,kBAAC,GAAD,EAAmB,GAAI,GAAW,CAAA,EAEjC,KAAkB,IAAQ,EAAS,SAAS,KAC3C,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAO,WAAU;KAAwB,CAAA,EACzE,kBAAC,QAAD;KAAM,WAAU;eAAqB;KAAsB,CAAA,CACvD;MAEJ;KATI,EASJ,CACN,EAED,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAY,OAAM;IAAO,WAAU;IAA6B,CAAA,EAC3E,kBAAC,OAAD;IAAK,WAAU;cAAyC;IAAqB,CAAA,CACzE;KAEJ"}

package/ui/journey-card/JourneyCard.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { JourneyDetailsProps } from './JourneyDetails';
+export type { JourneyDetailsProps };
+export type { AirportInfo, ItineraryDetailsProps } from './ItineraryDetails';
+export type { FlightSegmentCardProps } from './FlightSegmentCard';
+export interface JourneyCardProps extends ComponentPropsWithoutRef<'div'> {
+    /** Outbound or inbound flight leg */
+    flight1Journey: JourneyDetailsProps;
+    /** Return flight leg */
+    flight2Journey: JourneyDetailsProps;
+    /**
+     * When true, both legs are displayed side-by-side with a vertical divider
+     * instead of stacked with a horizontal divider.
+     */
+    compact?: boolean;
+}
+export declare function JourneyCard({ flight1Journey, flight2Journey, compact, className, ...props }: JourneyCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/JourneyCard.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { t as e } from "../../chunks/clsx.js";
+import { JourneyDetails as t } from "./JourneyDetails.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/ui/journey-card/JourneyCard.tsx
+function i({ flight1Journey: i, flight2Journey: a, compact: o = !1, className: s, ...c }) {
+	return /* @__PURE__ */ n("div", {
+		"data-name": "JourneyCard",
+		...c,
+		className: e("flex h-fit w-full flex-col", s),
+		children: /* @__PURE__ */ r("div", {
+			className: e("flex w-full rounded-32 border border-lightGrey bg-white p-20", o ? "flex-row gap-0" : "flex-col gap-12"),
+			children: [
+				/* @__PURE__ */ n(t, {
+					...i,
+					className: e(o && "flex-1 pe-12"),
+					vertical: o
+				}),
+				!o && /* @__PURE__ */ n("div", {
+					role: "separator",
+					className: e("shrink-0 bg-lightGrey h-px w-full")
+				}),
+				/* @__PURE__ */ n(t, {
+					...a,
+					className: e(o && "flex-1 ps-12"),
+					vertical: o
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { i as JourneyCard };
+//# sourceMappingURL=JourneyCard.js.map

package/ui/journey-card/JourneyCard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"JourneyCard.js","names":[],"sources":["../../../lib/ui/journey-card/JourneyCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { JourneyDetails } from './JourneyDetails';\nimport type { JourneyDetailsProps } from './JourneyDetails';\n\nexport type { JourneyDetailsProps };\nexport type { AirportInfo, ItineraryDetailsProps } from './ItineraryDetails';\nexport type { FlightSegmentCardProps } from './FlightSegmentCard';\n\nexport interface JourneyCardProps extends ComponentPropsWithoutRef<'div'> {\n /** Outbound or inbound flight leg */\n flight1Journey: JourneyDetailsProps;\n /** Return flight leg */\n flight2Journey: JourneyDetailsProps;\n /**\n * When true, both legs are displayed side-by-side with a vertical divider\n * instead of stacked with a horizontal divider.\n */\n compact?: boolean;\n}\n\nexport function JourneyCard({\n flight1Journey,\n flight2Journey,\n compact = false,\n className,\n ...props\n}: JourneyCardProps) {\n return (\n <div\n data-name=\"JourneyCard\"\n {...props}\n className={clsx('flex h-fit w-full flex-col', className)}\n >\n <div\n className={clsx(\n 'flex w-full rounded-32 border border-lightGrey bg-white p-20',\n compact ? 'flex-row gap-0' : 'flex-col gap-12',\n )}\n >\n <JourneyDetails\n {...flight1Journey}\n className={clsx(compact && 'flex-1 pe-12')}\n vertical={compact}\n />\n {!compact && <div role=\"separator\" className={clsx('shrink-0 bg-lightGrey h-px w-full')} />}\n <JourneyDetails\n {...flight2Journey}\n className={clsx(compact && 'flex-1 ps-12')}\n vertical={compact}\n />\n </div>\n </div>\n );\n}\n"],"mappings":";;;;AAqBA,SAAgB,EAAY,EAC1B,mBACA,mBACA,aAAU,IACV,cACA,GAAG,KACgB;AACnB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,8BAA8B,EAAU;YAExD,kBAAC,OAAD;GACE,WAAW,EACT,gEACA,IAAU,mBAAmB,kBAC9B;aAJH;IAME,kBAAC,GAAD;KACE,GAAI;KACJ,WAAW,EAAK,KAAW,eAAe;KAC1C,UAAU;KACV,CAAA;IACD,CAAC,KAAW,kBAAC,OAAD;KAAK,MAAK;KAAY,WAAW,EAAK,oCAAoC;KAAI,CAAA;IAC3F,kBAAC,GAAD;KACE,GAAI;KACJ,WAAW,EAAK,KAAW,eAAe;KAC1C,UAAU;KACV,CAAA;IACE;;EACF,CAAA"}

package/ui/journey-card/JourneyDetails.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ItineraryDetailsProps } from './ItineraryDetails';
+export interface AirportInfo {
+    name: string;
+    terminal?: string;
+}
+export interface JourneyDetailsProps extends ComponentPropsWithoutRef<'div'> {
+    /** Human-readable leg label, e.g. "Outbound" or "Inbound" */
+    direction: string;
+    /** Controls which plane icon is rendered; falls back to `direction` when omitted */
+    directionType?: 'Inbound' | 'Outbound';
+    departureDate: string;
+    departureTime: string;
+    arrivalDate: string;
+    arrivalTime: string;
+    /** Total flight duration, e.g. "9h30mn" */
+    duration: string;
+    departureAirport: AirportInfo;
+    arrivalAirport: AirportInfo;
+    /** Connection label shown on the timeline, e.g. "Direct" or "1 Stop over" */
+    stopLabel: string;
+    /** Number of stopover dots on the timeline */
+    nbStopovers?: number;
+    airlineLogoSrc: string;
+    airlineLogoAlt: string;
+    /** Primary operator name */
+    operatedBy: string;
+    /** Secondary operator line, e.g. "Operated by Hop" */
+    companyName?: string;
+    /** Cabin / luggage summary text */
+    characteristics: string;
+    /** Carbon footprint text */
+    carbonEmission: string;
+    carbonEmissionLearnMoreUrl?: string;
+    carbonEmissionLearnMoreLabel: string;
+    /** How many calendar days after departure the arrival falls */
+    plusDays?: number;
+    /** Label appended to plusDays value, e.g. "day" */
+    plusDaysLabel: string;
+    /** Local time qualifier shown near arrival time, e.g. "(local time)" */
+    localTimeLabel: string;
+    /** Optional expanded itinerary with per-segment flight cards */
+    itinerary?: ItineraryDetailsProps;
+    /** When true, the component is displayed in a vertical layout for side-by-side JourneyCards */
+    vertical?: boolean;
+}
+export declare function JourneyDetails({ itinerary, direction, directionType, departureDate, departureTime, arrivalDate, arrivalTime, duration, departureAirport, arrivalAirport, stopLabel, nbStopovers, airlineLogoSrc, airlineLogoAlt, operatedBy, companyName, characteristics, carbonEmission, carbonEmissionLearnMoreUrl, carbonEmissionLearnMoreLabel, plusDays, plusDaysLabel, localTimeLabel, className, vertical, ...props }: JourneyDetailsProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/JourneyDetails.js ADDED Viewed

@@ -0,0 +1,183 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ElasticHeight as t } from "../ElasticHeight.js";
+import { Tag as n } from "../Tag.js";
+import { FlightTimeline as r } from "./FlightTimeline.js";
+import { ItineraryDetails as i } from "./ItineraryDetails.js";
+import { useState as a } from "react";
+import { Icon as o } from "@clubmed/trident-icons";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/ui/journey-card/JourneyDetails.tsx
+function l({ itinerary: l, direction: u, directionType: d, departureDate: f, departureTime: p, arrivalDate: m, arrivalTime: h, duration: g, departureAirport: _, arrivalAirport: v, stopLabel: y, nbStopovers: b, airlineLogoSrc: x, airlineLogoAlt: S, operatedBy: C, companyName: w, characteristics: T, carbonEmission: E, carbonEmissionLearnMoreUrl: D, carbonEmissionLearnMoreLabel: O, plusDays: k, plusDaysLabel: A, localTimeLabel: j, className: M, vertical: N = !1, ...P }) {
+	let [F, I] = a(!1), L = (d ?? u) === "Outbound";
+	return /* @__PURE__ */ c("div", {
+		"data-name": "JourneyDetails",
+		...P,
+		className: e("flex h-fit w-full flex-col gap-8", M),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex h-48 w-full flex-row items-center justify-between",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex h-fit flex-row items-center gap-12",
+					children: [/* @__PURE__ */ s(o, {
+						name: L ? "PlaneOutbound" : "PlaneInBound",
+						width: "24px",
+						className: "text-black"
+					}), /* @__PURE__ */ s("span", {
+						className: "font-sans text-b3 font-semibold",
+						children: u
+					})]
+				}), /* @__PURE__ */ s("img", {
+					src: x,
+					alt: S,
+					width: 100,
+					height: 28,
+					className: "object-contain"
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex h-fit w-full flex-col gap-4",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "flex w-full flex-row items-end justify-between",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4",
+									children: f
+								}), /* @__PURE__ */ s("span", {
+									className: "font-sans text-b1 font-semibold",
+									children: p
+								})]
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 justify-center",
+								children: /* @__PURE__ */ s("span", {
+									className: "text-center font-sans text-b4",
+									children: g
+								})
+							}),
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [
+									/* @__PURE__ */ c("div", {
+										className: e("flex", !N && "flex-row items-center justify-end gap-4", N && "flex-col items-end justify-start gap-0"),
+										children: [/* @__PURE__ */ s("span", {
+											className: "font-sans text-b4",
+											children: m
+										}), k && k > 0 && /* @__PURE__ */ s(n, {
+											label: `+${k} ${A}`,
+											theme: "label",
+											backgroundColor: "black",
+											color: "white",
+											className: "rounded-full"
+										})]
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "text-right font-sans text-b4",
+										children: j
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "text-right font-sans text-b1 font-semibold",
+										children: h
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ s(r, { nbStopovers: b }),
+					/* @__PURE__ */ c("div", {
+						className: "flex w-full flex-row items-start justify-between",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: _.name
+								}), _.terminal && /* @__PURE__ */ s("span", {
+									className: "font-sans text-b4",
+									children: _.terminal
+								})]
+							}),
+							/* @__PURE__ */ s("span", {
+								className: "flex-1 text-center font-sans text-b4",
+								children: y
+							}),
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: v.name
+								}), v.terminal && /* @__PURE__ */ s("span", {
+									className: "text-right font-sans text-b4",
+									children: v.terminal
+								})]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: () => I((e) => !e),
+				"aria-expanded": F,
+				className: "flex w-full cursor-pointer flex-row items-end justify-between border-none bg-transparent p-0",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex flex-col text-left",
+					children: [/* @__PURE__ */ s("span", {
+						className: "font-sans text-b4 font-semibold",
+						children: C
+					}), w && /* @__PURE__ */ s("span", {
+						className: "font-sans text-b4",
+						children: w
+					})]
+				}), /* @__PURE__ */ s(o, {
+					name: "ArrowOutlinedUp",
+					width: "24px",
+					className: e("text-black transition-transform duration-200", { "rotate-180": !F })
+				})]
+			}),
+			/* @__PURE__ */ c(t, {
+				isExpanded: F,
+				innerClassName: "flex flex-col gap-8",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ s(o, {
+							name: "Luggage",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ s("span", {
+							className: "font-sans text-b4",
+							children: T
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ s(o, {
+							name: "HappyToCare",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ c("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ s("span", {
+								className: "font-sans text-b4",
+								children: E
+							}), D && /* @__PURE__ */ s("a", {
+								href: D,
+								className: "font-sans text-b4 underline",
+								children: O
+							})]
+						})]
+					}),
+					l && /* @__PURE__ */ s(i, { ...l })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { l as JourneyDetails };
+//# sourceMappingURL=JourneyDetails.js.map

package/ui/journey-card/JourneyDetails.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"JourneyDetails.js","names":[],"sources":["../../../lib/ui/journey-card/JourneyDetails.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useState } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Tag } from '../Tag';\nimport { ElasticHeight } from '../ElasticHeight';\nimport { FlightTimeline } from './FlightTimeline';\nimport { ItineraryDetails } from './ItineraryDetails';\nimport type { ItineraryDetailsProps } from './ItineraryDetails';\n\nexport interface AirportInfo {\n name: string;\n terminal?: string;\n}\n\nexport interface JourneyDetailsProps extends ComponentPropsWithoutRef<'div'> {\n /** Human-readable leg label, e.g. \"Outbound\" or \"Inbound\" */\n direction: string;\n /** Controls which plane icon is rendered; falls back to `direction` when omitted */\n directionType?: 'Inbound' | 'Outbound';\n departureDate: string;\n departureTime: string;\n arrivalDate: string;\n arrivalTime: string;\n /** Total flight duration, e.g. \"9h30mn\" */\n duration: string;\n departureAirport: AirportInfo;\n arrivalAirport: AirportInfo;\n /** Connection label shown on the timeline, e.g. \"Direct\" or \"1 Stop over\" */\n stopLabel: string;\n /** Number of stopover dots on the timeline */\n nbStopovers?: number;\n airlineLogoSrc: string;\n airlineLogoAlt: string;\n /** Primary operator name */\n operatedBy: string;\n /** Secondary operator line, e.g. \"Operated by Hop\" */\n companyName?: string;\n /** Cabin / luggage summary text */\n characteristics: string;\n /** Carbon footprint text */\n carbonEmission: string;\n carbonEmissionLearnMoreUrl?: string;\n carbonEmissionLearnMoreLabel: string;\n /** How many calendar days after departure the arrival falls */\n plusDays?: number;\n /** Label appended to plusDays value, e.g. \"day\" */\n plusDaysLabel: string;\n /** Local time qualifier shown near arrival time, e.g. \"(local time)\" */\n localTimeLabel: string;\n /** Optional expanded itinerary with per-segment flight cards */\n itinerary?: ItineraryDetailsProps;\n /** When true, the component is displayed in a vertical layout for side-by-side JourneyCards */\n vertical?: boolean;\n}\n\nexport function JourneyDetails({\n itinerary,\n direction,\n directionType,\n departureDate,\n departureTime,\n arrivalDate,\n arrivalTime,\n duration,\n departureAirport,\n arrivalAirport,\n stopLabel,\n nbStopovers,\n airlineLogoSrc,\n airlineLogoAlt,\n operatedBy,\n companyName,\n characteristics,\n carbonEmission,\n carbonEmissionLearnMoreUrl,\n carbonEmissionLearnMoreLabel,\n plusDays,\n plusDaysLabel,\n localTimeLabel,\n className,\n vertical = false,\n ...props\n}: JourneyDetailsProps) {\n const [isOpen, setIsOpen] = useState(false);\n const isOutbound = (directionType ?? direction) === 'Outbound';\n\n return (\n <div\n data-name=\"JourneyDetails\"\n {...props}\n className={clsx('flex h-fit w-full flex-col gap-8', className)}\n >\n {/* Row 1 — direction label + airline logo */}\n <div className=\"flex h-48 w-full flex-row items-center justify-between\">\n <div className=\"flex h-fit flex-row items-center gap-12\">\n <Icon\n name={isOutbound ? 'PlaneOutbound' : 'PlaneInBound'}\n width=\"24px\"\n className=\"text-black\"\n />\n <span className=\"font-sans text-b3 font-semibold\">{direction}</span>\n </div>\n <img\n src={airlineLogoSrc}\n alt={airlineLogoAlt}\n width={100}\n height={28}\n className=\"object-contain\"\n />\n </div>\n\n {/* Row 2 — schedule */}\n <div className=\"flex h-fit w-full flex-col gap-4\">\n <div className=\"flex w-full flex-row items-end justify-between\">\n <div className=\"flex flex-1 flex-col\">\n <span className=\"font-sans text-b4\">{departureDate}</span>\n <span className=\"font-sans text-b1 font-semibold\">{departureTime}</span>\n </div>\n\n <div className=\"flex flex-1 justify-center\">\n <span className=\"text-center font-sans text-b4\">{duration}</span>\n </div>\n\n <div className=\"flex flex-1 flex-col items-end\">\n <div\n className={clsx(\n 'flex',\n !vertical && 'flex-row items-center justify-end gap-4',\n vertical && 'flex-col items-end justify-start gap-0',\n )}\n >\n <span className=\"font-sans text-b4\">{arrivalDate}</span>\n {plusDays && plusDays > 0 && (\n <Tag\n label={`+${plusDays} ${plusDaysLabel}`}\n theme=\"label\"\n backgroundColor=\"black\"\n color=\"white\"\n className=\"rounded-full\"\n />\n )}\n </div>\n <span className=\"text-right font-sans text-b4\">{localTimeLabel}</span>\n <span className=\"text-right font-sans text-b1 font-semibold\">{arrivalTime}</span>\n </div>\n </div>\n\n <FlightTimeline nbStopovers={nbStopovers} />\n\n <div className=\"flex w-full flex-row items-start justify-between\">\n <div className=\"flex flex-1 flex-col\">\n <span className=\"font-sans text-b4 font-semibold\">{departureAirport.name}</span>\n {departureAirport.terminal && (\n <span className=\"font-sans text-b4\">{departureAirport.terminal}</span>\n )}\n </div>\n <span className=\"flex-1 text-center font-sans text-b4\">{stopLabel}</span>\n <div className=\"flex flex-1 flex-col items-end\">\n <span className=\"font-sans text-b4 font-semibold\">{arrivalAirport.name}</span>\n {arrivalAirport.terminal && (\n <span className=\"text-right font-sans text-b4\">{arrivalAirport.terminal}</span>\n )}\n </div>\n </div>\n </div>\n\n {/* Row 3 — operator toggle */}\n <button\n type=\"button\"\n onClick={() => setIsOpen((v) => !v)}\n aria-expanded={isOpen}\n className=\"flex w-full cursor-pointer flex-row items-end justify-between border-none bg-transparent p-0\"\n >\n <div className=\"flex flex-col text-left\">\n <span className=\"font-sans text-b4 font-semibold\">{operatedBy}</span>\n {companyName && <span className=\"font-sans text-b4\">{companyName}</span>}\n </div>\n <Icon\n name=\"ArrowOutlinedUp\"\n width=\"24px\"\n className={clsx('text-black transition-transform duration-200', {\n 'rotate-180': !isOpen,\n })}\n />\n </button>\n\n {/* Rows 4 & 5 — accordion */}\n <ElasticHeight isExpanded={isOpen} innerClassName=\"flex flex-col gap-8\">\n <div className=\"flex h-fit w-full flex-row items-start gap-8\">\n <Icon name=\"Luggage\" width=\"24px\" className=\"shrink-0 text-black\" />\n <span className=\"font-sans text-b4\">{characteristics}</span>\n </div>\n <div className=\"flex h-fit w-full flex-row items-start gap-8\">\n <Icon name=\"HappyToCare\" width=\"24px\" className=\"shrink-0 text-black\" />\n <div className=\"flex flex-col\">\n <span className=\"font-sans text-b4\">{carbonEmission}</span>\n {carbonEmissionLearnMoreUrl && (\n <a href={carbonEmissionLearnMoreUrl} className=\"font-sans text-b4 underline\">\n {carbonEmissionLearnMoreLabel}\n </a>\n )}\n </div>\n </div>\n {itinerary && <ItineraryDetails {...itinerary} />}\n </ElasticHeight>\n </div>\n );\n}\n"],"mappings":"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"}

package/ui/tabs/Tabs.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ComponentProps, ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren } from 'react';
+import { ComponentProps, ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import { TabsProvider } from '../contexts/TabControl';
 type ProviderProps = ComponentProps<typeof TabsProvider>;
 interface Props extends ProviderProps {
@@ -46,6 +46,10 @@ export interface TabSelectProps {
 }
 export declare const TabSelect: FunctionComponent<TabSelectProps>;
 interface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /**
+     * Notification content
+     */
+    notification?: ReactNode;
     /**
      * Tab Heading text
      */

package/ui/tabs/Tabs.js CHANGED Viewed

@@ -156,79 +156,85 @@ var g = ({ className: e, compacted: t = !1, selected: r, children: i }) => /* @_
 			children: e.label
 		}, e.value))
 	});
-}, x = ({ as: e = "h2", label: t, children: n, value: i, onSelect: o, className: p, ...g }) => {
-	let _ = f(null), v = r(), y = s(), b = a({
+}, x = ({ as: e = "h2", label: t, children: n, value: i, onSelect: o, className: p, notification: g, ..._ }) => {
+	let v = f(null), y = r(), b = s(), x = a({
 		value: i,
-		ref: _
-	}), x = f(v), S = f(v === i);
-	S.current = v === i;
-	let C = { "--tab-index": i };
+		ref: v
+	}), S = f(y), C = f(y === i);
+	C.current = y === i;
+	let w = { "--tab-index": i };
 	d(() => {
-		x.current !== v && i === v && (_.current?.focus(), o?.({
+		S.current !== y && i === y && (v.current?.focus(), o?.({
 			value: i,
 			label: t
-		})), x.current !== v && (x.current = v);
+		})), S.current !== y && (S.current = y);
 	}, [
 		t,
 		i,
 		o,
-		v
+		y
 	]);
-	let w = c({
+	let T = c({
 		start: u(() => {
-			b({ type: "start" });
-		}, [b]),
+			x({ type: "start" });
+		}, [x]),
 		end: u(() => {
-			b({ type: "end" });
-		}, [b]),
+			x({ type: "end" });
+		}, [x]),
 		up: u(() => {
-			b({ type: "previous" });
-		}, [b]),
+			x({ type: "previous" });
+		}, [x]),
 		down: u(() => {
-			b({ type: "next" });
-		}, [b]),
+			x({ type: "next" });
+		}, [x]),
 		left: u(() => {
-			b({ type: document.documentElement.dir === "rtl" ? "next" : "previous" });
-		}, [b]),
+			x({ type: document.documentElement.dir === "rtl" ? "next" : "previous" });
+		}, [x]),
 		right: u(() => {
-			b({ type: document.documentElement.dir === "rtl" ? "previous" : "next" });
-		}, [b])
-	}), T = u((e) => {
+			x({ type: document.documentElement.dir === "rtl" ? "previous" : "next" });
+		}, [x])
+	}), E = u((e) => {
 		let t = e.key === " " || e.key === "Spacebar" || e.code === "Space", n = e.key === "Enter" || e.code === "Enter";
-		if (S.current && (t || n)) {
+		if (C.current && (t || n)) {
 			e.preventDefault();
 			return;
 		}
-		w(e);
-	}, [w]), E = () => {
-		S.current || b({
+		T(e);
+	}, [T]), D = () => {
+		C.current || x({
 			type: "update",
 			payload: i
 		});
 	};
 	return /* @__PURE__ */ m("div", {
-		...g,
-		id: g.id || `Tab_${i}_${y}`,
+		..._,
+		id: _.id || `Tab_${i}_${b}`,
 		"data-name": "Tab",
-		ref: _,
+		ref: v,
 		role: "tab",
-		"aria-selected": S.current,
-		"aria-controls": `TabPanel_${i}_${y}`,
-		tabIndex: S.current ? 0 : -1,
-		className: l("group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none", {
-			"text-white": S.current,
-			"text-black": !S.current,
-			"transition-transform active:scale-[1.03]": S.current
+		"aria-selected": C.current,
+		"aria-controls": `TabPanel_${i}_${b}`,
+		tabIndex: C.current ? 0 : -1,
+		className: l("group/tab text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none", {
+			"text-white": C.current,
+			"text-black": !C.current,
+			"transition-transform active:scale-[1.03]": C.current
 		}),
-		onKeyDown: T,
-		onClick: E,
+		onKeyDown: E,
+		onClick: D,
 		children: /* @__PURE__ */ h(e, {
-			className: l("relative inline-block px-20 py-12", "before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)", p),
-			...S ? {} : { role: "presentation" },
+			className: l("relative inline-block px-20 py-12", "before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within/tab:before:bg-(--color-pearl) group-hover/tab:before:bg-(--color-pearl) group/tab-focus:before:bg-(--color-pearl)", p),
+			...C ? {} : { role: "presentation" },
 			children: [/* @__PURE__ */ m("span", {
 				className: l("tab-focus-pill ease transition-transform/colors", "rounded-pill absolute inset-0 -z-1 duration-300", "bg-black"),
-				style: C
-			}), n ?? t]
+				style: w
+			}), /* @__PURE__ */ h("span", {
+				className: "flex items-center gap-8",
+				children: [n ?? t, g && /* @__PURE__ */ m("div", {
+					className: l("size-18 flex items-center justify-center text-b5 rounded-full bg-saffron text-black transition-colors duration-300", { "group-focus-within/tab:bg-darkGrey group-hover/tab:bg-darkGrey group-focus-within/tab:text-pearl group-hover/tab:text-pearl": !C.current }),
+					children: g
+				})]
+			})]
 		})
 	});
 };

package/ui/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FunctionComponent,\n type PropsWithChildren,\n type RefObject,\n type KeyboardEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n useActiveTab,\n useActiveTabControl,\n useRegisterTabControl,\n useTabDispatch,\n useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\nimport { cn } from '../helpers/cn';\nimport { ArrowButton } from '../buttons/ArrowButton';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n className?: string;\n /*\n Shrink the spacing between tabs and panels\n /\n compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n compacted = false,\n selected,\n children,\n}) => {\n return (\n <div\n className={cn(\n 'flex flex-col',\n {\n 'sm:gap-y-20': !compacted,\n },\n className,\n )}\n data-name=\"Tabs\"\n >\n <TabsProvider selected={selected}>{children}</TabsProvider>\n </div>\n );\n};\n\ninterface TabsBodyProps {\n className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n className,\n children,\n}) => {\n return (\n <div data-name=\"TabsBody\" className={cn('grid grid-rows-1 overflow-hidden', className)}>\n {children}\n </div>\n );\n};\n\ninterface TabPanelProps {\n className?: string;\n /\n Tab panel index<br/>\n * _Can be 0 or 1 indexed_\n /\n value: number;\n /\n on panel select handler\n /\n onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n value,\n className,\n onSelect,\n children,\n ...attrs\n}) => {\n const uid = useTabsUid();\n const mounted = useRef(false);\n const tabSelected = useActiveTab();\n const isActive = tabSelected === value;\n\n useEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n return;\n }\n\n if (isActive) {\n onSelect?.({ value });\n }\n }, [isActive, value, onSelect]);\n\n return (\n <div\n {...attrs}\n aria-hidden={!isActive}\n className={cn(\n 'relative col-start-1 row-start-1 transition-opacity duration-500',\n {\n 'pointer-events-none z-0 h-0 opacity-0': !isActive,\n 'pointer-events-auto z-1 h-auto opacity-100': isActive,\n },\n className,\n )}\n inert={isActive ? undefined : true}\n tabIndex={isActive ? 0 : -1}\n id={`TabPanel_${value}_${uid}`}\n data-name={`TabPanel_${value}`}\n role=\"tabpanel\"\n aria-labelledby={`Tab_${value}_${uid}`}\n >\n {children}\n </div>\n );\n};\n\ninterface TabListProps {\n className?: string;\n /\n Remove filler placeholders\n /\n constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n className,\n constrained = false,\n children,\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const spacerRef = useRef<HTMLDivElement>(null);\n const [currentTab, currentControl] = useActiveTabControl();\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const updateScrollState = useCallback(() => {\n const el = ref.current;\n if (!el) return;\n setCanScrollLeft(el.scrollLeft > 0);\n setCanScrollRight(Math.ceil(el.scrollLeft) < el.scrollWidth - el.clientWidth);\n }, []);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n updateScrollState();\n\n const observer = new ResizeObserver(updateScrollState);\n observer.observe(el);\n el.addEventListener('scroll', updateScrollState, { passive: true });\n\n return () => {\n observer.disconnect();\n el.removeEventListener('scroll', updateScrollState);\n };\n }, [updateScrollState]);\n\n useEffect(() => {\n if (!currentControl?.current \|\| !ref.current) {\n return;\n }\n\n const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n const currentRect = currentControl.current.getBoundingClientRect();\n const containerRect = ref.current!.getBoundingClientRect();\n\n ref.current.scrollBy({\n left: currentRect.left - containerRect.left - spacerWidth,\n behavior: 'smooth',\n });\n }, [currentControl]);\n\n const scrollRafRef = useRef<number \| null>(null);\n\n const stopScroll = useCallback(() => {\n if (scrollRafRef.current !== null) {\n cancelAnimationFrame(scrollRafRef.current);\n scrollRafRef.current = null;\n }\n }, []);\n\n const startScroll = useCallback((direction: -1 \| 1) => {\n if (scrollRafRef.current !== null) return;\n const step = () => {\n ref.current?.scrollBy({ left: direction 6 });\n scrollRafRef.current = requestAnimationFrame(step);\n };\n scrollRafRef.current = requestAnimationFrame(step);\n }, []);\n\n const handleScrollKeyUp = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') stopScroll();\n },\n [stopScroll],\n );\n\n const handleScrollLeftKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n startScroll(-1);\n }\n },\n [startScroll],\n );\n\n const handleScrollRightKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n startScroll(1);\n }\n },\n [startScroll],\n );\n\n useEffect(() => stopScroll, [stopScroll]);\n\n const style = { '--active-tab': currentTab } as CSSProperties;\n const isScrollable = canScrollLeft \|\| canScrollRight;\n\n return (\n <div className=\"relative\" data-name=\"TabsHeader\">\n {isScrollable && (\n <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center\">\n <ArrowButton\n icon=\"ArrowDefaultLeft\"\n size=\"small\"\n className={cn(\n 'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n canScrollLeft ? 'opacity-100' : 'pointer-events-none opacity-0',\n )}\n onMouseDown={() => startScroll(-1)}\n onMouseUp={stopScroll}\n onMouseLeave={stopScroll}\n onKeyDown={handleScrollLeftKeyDown}\n onKeyUp={handleScrollKeyUp}\n inert={!canScrollLeft}\n tabIndex={canScrollLeft ? 0 : -1}\n >\n Scroll tabs left\n </ArrowButton>\n </div>\n )}\n <div\n className={cn(\n 'scrollbar-hidden relative isolate flex max-w-full overflow-x-auto py-20',\n className,\n )}\n ref={ref}\n >\n <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n <div\n ref={spacerRef}\n className={cn('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n {children}\n <div\n className={cn('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n </div>\n </div>\n {isScrollable && (\n <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center\">\n <ArrowButton\n icon=\"ArrowDefaultRight\"\n size=\"small\"\n className={cn(\n 'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n canScrollRight ? 'opacity-100' : 'pointer-events-none opacity-0',\n )}\n onMouseDown={() => startScroll(1)}\n onMouseUp={stopScroll}\n onMouseLeave={stopScroll}\n onKeyDown={handleScrollRightKeyDown}\n onKeyUp={handleScrollKeyUp}\n inert={!canScrollRight}\n tabIndex={canScrollRight ? 0 : -1}\n >\n Scroll tabs right\n </ArrowButton>\n </div>\n )}\n </div>\n );\n};\n\nexport interface TabSelectProps {\n items: { label: string; value: number }[];\n className?: string;\n 'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n items,\n className,\n 'aria-label': ariaLabel = 'Select tab',\n}) => {\n const activeTab = useActiveTab();\n const dispatch = useTabDispatch();\n\n const handleChange = (_event: Event, value: string) => {\n dispatch({ type: 'update', payload: Number(value) });\n };\n\n const selectValue = activeTab === -1 ? undefined : activeTab;\n\n return (\n <Select\n value={selectValue?.toString()}\n onChange={handleChange}\n name={ariaLabel}\n className={cn(className)}\n >\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </Select>\n );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n /*\n Tab Heading text\n /\n label?: string;\n /\n Tab heading index<br/>\n * _Can be 0 or 1 indexed_\n /\n value: number;\n /\n on tab select handler\n /\n onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n /\n Heading type\n * _default: h2_\n */\n as?: 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n as: TagName = 'h2',\n label,\n children,\n value,\n onSelect,\n className,\n ...attr\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const activeTab = useActiveTab();\n const uid = useTabsUid();\n const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n const previousActiveTab = useRef(activeTab);\n\n const isActive = useRef(activeTab === value);\n isActive.current = activeTab === value;\n\n const pillStyle = { '--tab-index': value } as CSSProperties;\n\n useEffect(() => {\n if (previousActiveTab.current !== activeTab && value === activeTab) {\n ref.current?.focus();\n onSelect?.({ value, label });\n }\n if (previousActiveTab.current !== activeTab) {\n previousActiveTab.current = activeTab;\n }\n }, [label, value, onSelect, activeTab]);\n\n const start = useCallback(() => {\n dispatch({ type: 'start' });\n }, [dispatch]);\n\n const end = useCallback(() => {\n dispatch({ type: 'end' });\n }, [dispatch]);\n\n const up = useCallback(() => {\n dispatch({ type: 'previous' });\n }, [dispatch]);\n\n const down = useCallback(() => {\n dispatch({ type: 'next' });\n }, [dispatch]);\n\n const left = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'next' : 'previous' });\n }, [dispatch]);\n\n const right = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'previous' : 'next' });\n }, [dispatch]);\n\n const keyboardHandler = useKeyboardControls({\n start,\n end,\n up,\n down,\n left,\n right,\n });\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n const isSpace = e.key === ' ' \|\| e.key === 'Spacebar' \|\| e.code === 'Space';\n const isEnter = e.key === 'Enter' \|\| e.code === 'Enter';\n\n if (isActive.current && (isSpace \|\| isEnter)) {\n e.preventDefault();\n return;\n }\n\n keyboardHandler(e);\n },\n [keyboardHandler],\n );\n\n const handleClick = () => {\n if (isActive.current) {\n return;\n }\n\n dispatch({ type: 'update', payload: value });\n };\n\n return (\n <div\n {...attr}\n id={attr.id \|\| `Tab_${value}_${uid}`}\n data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\n aria-controls={`TabPanel_${value}_${uid}`}\n tabIndex={isActive.current ? 0 : -1}\n className={cn(\n 'group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n {\n 'text-white': isActive.current,\n 'text-black': !isActive.current,\n 'transition-transform active:scale-[1.03]': isActive.current,\n },\n )}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n >\n <TagName\n className={cn(\n 'relative inline-block px-20 py-12',\n 'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)',\n className,\n )}\n {...(!isActive ? { role: 'presentation' } : {})}\n >\n <span\n className={cn(\n 'tab-focus-pill ease transition-transform/colors',\n 'rounded-pill absolute inset-0 -z-1 duration-300',\n 'bg-black',\n )}\n style={pillStyle}\n />\n {children ?? label}\n </TagName>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FunctionComponent,\n type PropsWithChildren,\n type RefObject,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n useActiveTab,\n useActiveTabControl,\n useRegisterTabControl,\n useTabDispatch,\n useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\nimport { cn } from '../helpers/cn';\nimport { ArrowButton } from '../buttons/ArrowButton';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n className?: string;\n /*\n Shrink the spacing between tabs and panels\n /\n compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n compacted = false,\n selected,\n children,\n}) => {\n return (\n <div\n className={cn(\n 'flex flex-col',\n {\n 'sm:gap-y-20': !compacted,\n },\n className,\n )}\n data-name=\"Tabs\"\n >\n <TabsProvider selected={selected}>{children}</TabsProvider>\n </div>\n );\n};\n\ninterface TabsBodyProps {\n className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n className,\n children,\n}) => {\n return (\n <div data-name=\"TabsBody\" className={cn('grid grid-rows-1 overflow-hidden', className)}>\n {children}\n </div>\n );\n};\n\ninterface TabPanelProps {\n className?: string;\n /\n Tab panel index<br/>\n * _Can be 0 or 1 indexed_\n /\n value: number;\n /\n on panel select handler\n /\n onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n value,\n className,\n onSelect,\n children,\n ...attrs\n}) => {\n const uid = useTabsUid();\n const mounted = useRef(false);\n const tabSelected = useActiveTab();\n const isActive = tabSelected === value;\n\n useEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n return;\n }\n\n if (isActive) {\n onSelect?.({ value });\n }\n }, [isActive, value, onSelect]);\n\n return (\n <div\n {...attrs}\n aria-hidden={!isActive}\n className={cn(\n 'relative col-start-1 row-start-1 transition-opacity duration-500',\n {\n 'pointer-events-none z-0 h-0 opacity-0': !isActive,\n 'pointer-events-auto z-1 h-auto opacity-100': isActive,\n },\n className,\n )}\n inert={isActive ? undefined : true}\n tabIndex={isActive ? 0 : -1}\n id={`TabPanel_${value}_${uid}`}\n data-name={`TabPanel_${value}`}\n role=\"tabpanel\"\n aria-labelledby={`Tab_${value}_${uid}`}\n >\n {children}\n </div>\n );\n};\n\ninterface TabListProps {\n className?: string;\n /\n Remove filler placeholders\n /\n constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n className,\n constrained = false,\n children,\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const spacerRef = useRef<HTMLDivElement>(null);\n const [currentTab, currentControl] = useActiveTabControl();\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const updateScrollState = useCallback(() => {\n const el = ref.current;\n if (!el) return;\n setCanScrollLeft(el.scrollLeft > 0);\n setCanScrollRight(Math.ceil(el.scrollLeft) < el.scrollWidth - el.clientWidth);\n }, []);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n updateScrollState();\n\n const observer = new ResizeObserver(updateScrollState);\n observer.observe(el);\n el.addEventListener('scroll', updateScrollState, { passive: true });\n\n return () => {\n observer.disconnect();\n el.removeEventListener('scroll', updateScrollState);\n };\n }, [updateScrollState]);\n\n useEffect(() => {\n if (!currentControl?.current \|\| !ref.current) {\n return;\n }\n\n const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n const currentRect = currentControl.current.getBoundingClientRect();\n const containerRect = ref.current!.getBoundingClientRect();\n\n ref.current.scrollBy({\n left: currentRect.left - containerRect.left - spacerWidth,\n behavior: 'smooth',\n });\n }, [currentControl]);\n\n const scrollRafRef = useRef<number \| null>(null);\n\n const stopScroll = useCallback(() => {\n if (scrollRafRef.current !== null) {\n cancelAnimationFrame(scrollRafRef.current);\n scrollRafRef.current = null;\n }\n }, []);\n\n const startScroll = useCallback((direction: -1 \| 1) => {\n if (scrollRafRef.current !== null) return;\n const step = () => {\n ref.current?.scrollBy({ left: direction 6 });\n scrollRafRef.current = requestAnimationFrame(step);\n };\n scrollRafRef.current = requestAnimationFrame(step);\n }, []);\n\n const handleScrollKeyUp = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') stopScroll();\n },\n [stopScroll],\n );\n\n const handleScrollLeftKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n startScroll(-1);\n }\n },\n [startScroll],\n );\n\n const handleScrollRightKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n startScroll(1);\n }\n },\n [startScroll],\n );\n\n useEffect(() => stopScroll, [stopScroll]);\n\n const style = { '--active-tab': currentTab } as CSSProperties;\n const isScrollable = canScrollLeft \|\| canScrollRight;\n\n return (\n <div className=\"relative\" data-name=\"TabsHeader\">\n {isScrollable && (\n <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center\">\n <ArrowButton\n icon=\"ArrowDefaultLeft\"\n size=\"small\"\n className={cn(\n 'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n canScrollLeft ? 'opacity-100' : 'pointer-events-none opacity-0',\n )}\n onMouseDown={() => startScroll(-1)}\n onMouseUp={stopScroll}\n onMouseLeave={stopScroll}\n onKeyDown={handleScrollLeftKeyDown}\n onKeyUp={handleScrollKeyUp}\n inert={!canScrollLeft}\n tabIndex={canScrollLeft ? 0 : -1}\n >\n Scroll tabs left\n </ArrowButton>\n </div>\n )}\n <div\n className={cn(\n 'scrollbar-hidden relative isolate flex max-w-full overflow-x-auto py-20',\n className,\n )}\n ref={ref}\n >\n <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n <div\n ref={spacerRef}\n className={cn('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n {children}\n <div\n className={cn('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n </div>\n </div>\n {isScrollable && (\n <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center\">\n <ArrowButton\n icon=\"ArrowDefaultRight\"\n size=\"small\"\n className={cn(\n 'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n canScrollRight ? 'opacity-100' : 'pointer-events-none opacity-0',\n )}\n onMouseDown={() => startScroll(1)}\n onMouseUp={stopScroll}\n onMouseLeave={stopScroll}\n onKeyDown={handleScrollRightKeyDown}\n onKeyUp={handleScrollKeyUp}\n inert={!canScrollRight}\n tabIndex={canScrollRight ? 0 : -1}\n >\n Scroll tabs right\n </ArrowButton>\n </div>\n )}\n </div>\n );\n};\n\nexport interface TabSelectProps {\n items: { label: string; value: number }[];\n className?: string;\n 'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n items,\n className,\n 'aria-label': ariaLabel = 'Select tab',\n}) => {\n const activeTab = useActiveTab();\n const dispatch = useTabDispatch();\n\n const handleChange = (_event: Event, value: string) => {\n dispatch({ type: 'update', payload: Number(value) });\n };\n\n const selectValue = activeTab === -1 ? undefined : activeTab;\n\n return (\n <Select\n value={selectValue?.toString()}\n onChange={handleChange}\n name={ariaLabel}\n className={cn(className)}\n >\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </Select>\n );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n /*\n Notification content\n /\n notification?: ReactNode;\n /\n Tab Heading text\n /\n label?: string;\n /\n Tab heading index<br/>\n * _Can be 0 or 1 indexed_\n /\n value: number;\n /\n on tab select handler\n /\n onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n /\n Heading type\n * _default: h2_\n */\n as?: 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n as: TagName = 'h2',\n label,\n children,\n value,\n onSelect,\n className,\n notification,\n ...attr\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const activeTab = useActiveTab();\n const uid = useTabsUid();\n const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n const previousActiveTab = useRef(activeTab);\n\n const isActive = useRef(activeTab === value);\n isActive.current = activeTab === value;\n\n const pillStyle = { '--tab-index': value } as CSSProperties;\n\n useEffect(() => {\n if (previousActiveTab.current !== activeTab && value === activeTab) {\n ref.current?.focus();\n onSelect?.({ value, label });\n }\n if (previousActiveTab.current !== activeTab) {\n previousActiveTab.current = activeTab;\n }\n }, [label, value, onSelect, activeTab]);\n\n const start = useCallback(() => {\n dispatch({ type: 'start' });\n }, [dispatch]);\n\n const end = useCallback(() => {\n dispatch({ type: 'end' });\n }, [dispatch]);\n\n const up = useCallback(() => {\n dispatch({ type: 'previous' });\n }, [dispatch]);\n\n const down = useCallback(() => {\n dispatch({ type: 'next' });\n }, [dispatch]);\n\n const left = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'next' : 'previous' });\n }, [dispatch]);\n\n const right = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'previous' : 'next' });\n }, [dispatch]);\n\n const keyboardHandler = useKeyboardControls({\n start,\n end,\n up,\n down,\n left,\n right,\n });\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n const isSpace = e.key === ' ' \|\| e.key === 'Spacebar' \|\| e.code === 'Space';\n const isEnter = e.key === 'Enter' \|\| e.code === 'Enter';\n\n if (isActive.current && (isSpace \|\| isEnter)) {\n e.preventDefault();\n return;\n }\n\n keyboardHandler(e);\n },\n [keyboardHandler],\n );\n\n const handleClick = () => {\n if (isActive.current) {\n return;\n }\n\n dispatch({ type: 'update', payload: value });\n };\n\n return (\n <div\n {...attr}\n id={attr.id \|\| `Tab_${value}_${uid}`}\n data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\n aria-controls={`TabPanel_${value}_${uid}`}\n tabIndex={isActive.current ? 0 : -1}\n className={cn(\n 'group/tab text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n {\n 'text-white': isActive.current,\n 'text-black': !isActive.current,\n 'transition-transform active:scale-[1.03]': isActive.current,\n },\n )}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n >\n <TagName\n className={cn(\n 'relative inline-block px-20 py-12',\n 'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within/tab:before:bg-(--color-pearl) group-hover/tab:before:bg-(--color-pearl) group/tab-focus:before:bg-(--color-pearl)',\n className,\n )}\n {...(!isActive ? { role: 'presentation' } : {})}\n >\n <span\n className={cn(\n 'tab-focus-pill ease transition-transform/colors',\n 'rounded-pill absolute inset-0 -z-1 duration-300',\n 'bg-black',\n )}\n style={pillStyle}\n />\n <span className=\"flex items-center gap-8\">\n {children ?? label}\n {notification && (\n <div\n className={cn(\n 'size-18 flex items-center justify-center text-b5 rounded-full bg-saffron text-black transition-colors duration-300',\n {\n 'group-focus-within/tab:bg-darkGrey group-hover/tab:bg-darkGrey group-focus-within/tab:text-pearl group-hover/tab:text-pearl':\n !isActive.current,\n },\n )}\n >\n {notification}\n </div>\n )}\n </span>\n </TagName>\n </div>\n );\n};\n"],"mappings":"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"}