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

package/ui/journey-card/JourneyCard.js

@@ -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

@@ -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

@@ -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

@@ -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 { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Icon as c } from "@clubmed/trident-icons";
+//#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__ */ s("div", {
+		"data-name": "JourneyDetails",
+		...P,
+		className: e("flex h-fit w-full flex-col gap-8", M),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex h-48 w-full flex-row items-center justify-between",
+				children: [/* @__PURE__ */ s("div", {
+					className: "flex h-fit flex-row items-center gap-12",
+					children: [/* @__PURE__ */ o(c, {
+						name: L ? "PlaneOutbound" : "PlaneInBound",
+						width: "24px",
+						className: "text-black"
+					}), /* @__PURE__ */ o("span", {
+						className: "font-sans text-b3 font-semibold",
+						children: u
+					})]
+				}), /* @__PURE__ */ o("img", {
+					src: x,
+					alt: S,
+					width: 100,
+					height: 28,
+					className: "object-contain"
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "flex h-fit w-full flex-col gap-4",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "flex w-full flex-row items-end justify-between",
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ o("span", {
+									className: "font-sans text-b4",
+									children: f
+								}), /* @__PURE__ */ o("span", {
+									className: "font-sans text-b1 font-semibold",
+									children: p
+								})]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "flex flex-1 justify-center",
+								children: /* @__PURE__ */ o("span", {
+									className: "text-center font-sans text-b4",
+									children: g
+								})
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [
+									/* @__PURE__ */ s("div", {
+										className: e("flex", !N && "flex-row items-center justify-end gap-4", N && "flex-col items-end justify-start gap-0"),
+										children: [/* @__PURE__ */ o("span", {
+											className: "font-sans text-b4",
+											children: m
+										}), k && k > 0 && /* @__PURE__ */ o(n, {
+											label: `+${k} ${A}`,
+											theme: "label",
+											backgroundColor: "black",
+											color: "white",
+											className: "rounded-full"
+										})]
+									}),
+									/* @__PURE__ */ o("span", {
+										className: "text-right font-sans text-b4",
+										children: j
+									}),
+									/* @__PURE__ */ o("span", {
+										className: "text-right font-sans text-b1 font-semibold",
+										children: h
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ o(r, { nbStopovers: b }),
+					/* @__PURE__ */ s("div", {
+						className: "flex w-full flex-row items-start justify-between",
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ o("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: _.name
+								}), _.terminal && /* @__PURE__ */ o("span", {
+									className: "font-sans text-b4",
+									children: _.terminal
+								})]
+							}),
+							/* @__PURE__ */ o("span", {
+								className: "flex-1 text-center font-sans text-b4",
+								children: y
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [/* @__PURE__ */ o("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: v.name
+								}), v.terminal && /* @__PURE__ */ o("span", {
+									className: "text-right font-sans text-b4",
+									children: v.terminal
+								})]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ s("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 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+				children: [/* @__PURE__ */ s("div", {
+					className: "flex flex-col text-left",
+					children: [/* @__PURE__ */ o("span", {
+						className: "font-sans text-b4 font-semibold",
+						children: C
+					}), w && /* @__PURE__ */ o("span", {
+						className: "font-sans text-b4",
+						children: w
+					})]
+				}), /* @__PURE__ */ o(c, {
+					name: "ArrowOutlinedUp",
+					width: "24px",
+					className: e("text-black transition-transform duration-200", { "rotate-180": !F })
+				})]
+			}),
+			/* @__PURE__ */ s(t, {
+				isExpanded: F,
+				innerClassName: "flex flex-col gap-8",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ o(c, {
+							name: "Luggage",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ o("span", {
+							className: "font-sans text-b4",
+							children: T
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ o(c, {
+							name: "HappyToCare",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ s("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ o("span", {
+								className: "font-sans text-b4",
+								children: E
+							}), D && /* @__PURE__ */ o("a", {
+								href: D,
+								className: "font-sans text-b4 underline outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill",
+								children: O
+							})]
+						})]
+					}),
+					l && /* @__PURE__ */ o(i, { ...l })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { l as JourneyDetails };
+
+//# sourceMappingURL=JourneyDetails.js.map

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

@@ -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 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\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\n                href={carbonEmissionLearnMoreUrl}\n                className=\"font-sans text-b4 underline outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill\"\n              >\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

@@ -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
      */