@tui/design-system 1.11.0 → 1.13.0

package/types/components.ts

@@ -7,6 +7,10 @@ export type IconPosition = 'none' | 'leading' | 'trailing';
 export type ButtonVariantBase = 'primary' | 'secondary' | 'promotion' | 'search';
 export type HeadingLevel = '2' | '3' | '4' | '5' | '6';
 
+// ═══════════════════════════════════════════════════════════
+// COMPONENTS
+// ═══════════════════════════════════════════════════════════
+
 // ─── Accordion ─────────────────────────────────────────
 export interface AccordionProps {
 	hasImage?: 'none' | 'logo' | 'icon';
@@ -55,25 +59,6 @@ export interface AlertProps {
 	theme?: Theme;
 }
 
-// ─── Anchor Tabs ───────────────────────────────────────
-export interface AnchorTab {
-	label: string;
-	href: string;
-	icon?: string;
-	disabled?: boolean;
-	sectionContent?: string;
-}
-
-export interface AnchorTabsProps {
-	icon?: string;
-	tabsLabelledby?: string;
-	tabsLabel?: string;
-	/** @deprecated Use `tabsLabelledby` instead */
-	ariaLabelledby?: string;
-	tabs?: AnchorTab[];
-	sticky?: boolean;
-}
-
 // ─── Breadcrumb ────────────────────────────────────────
 export interface BreadcrumbItem {
 	label: string;
@@ -100,12 +85,34 @@ export interface ButtonProps {
 	theme?: Theme;
 }
 
+// ─── Cards ─────────────────────────────────────────────
+
+// ─── Card ──────────────────────────────────────
+export interface CardProps {
+	extraClasses?: string[];
+	extraAttributes?: string[];
+	link?: boolean;
+	iconButton?: boolean;
+	iconButtonLabel?: boolean;
+	iconButtonLabelText?: string;
+	linkText?: string;
+	linkHref?: string;
+	supplementaryContainer?: boolean;
+	cardContent?: string;
+	supplementaryContent?: string;
+	theme?: Theme;
+}
+
 // ─── Card Article ──────────────────────────────────────
 export interface CardArticleProps {
 	type?: 'static' | 'link' | 'multi-link';
+	iconButton?: boolean;
+	iconButtonLabel?: boolean;
+	iconButtonLabelText?: string;
 	elementType?: 'anchor' | 'button';
 	content?: 'short' | 'medium' | 'long' | 'rich';
 	headingText?: string;
+	theme?: Theme;
 }
 
 // ─── Card Icon ─────────────────────────────────────────
@@ -118,6 +125,26 @@ export interface CardIconProps {
 	cardText?: string;
 }
 
+// ─── Card Promotion ───────────────────────────────────────
+export interface CardPromotionProps {
+	type?: 'default' | 'promo-code';
+	condensed?: boolean;
+	headingLevel?: HeadingLevel;
+	headline?: string;
+	scarcityLabel?: string;
+	conditions?: string;
+	linkLabel?: string;
+	icon?: string;
+	code?: string;
+	copied?: boolean;
+	copyLabel?: string;
+	copiedLabel?: string;
+	expired?: boolean;
+	expiredLabel?: string;
+	announcementLabel?: string;
+	theme?: Theme;
+}
+
 // ─── Card Selectable ───────────────────────────────────
 export interface CardSelectableProps {
 	disabled?: boolean;
@@ -135,25 +162,42 @@ export interface CardSelectableProps {
 	includeTag?: boolean;
 }
 
-// ─── Datepicker ────────────────────────────────────────
-export interface DatepickerProps {
-	rangeSelection?: boolean;
-	dualView?: boolean;
-	scrollableMobile?: boolean;
-	weekNumbers?: boolean;
-	weekLabel?: string;
-	weekLabelFull?: string;
-	hideInput?: boolean;
-	separateCal?: boolean;
-	value?: string;
-	minDate?: string;
-	maxDate?: string;
-	previousLabel?: string;
+// ─── Carousel ──────────────────────────────────────────
+export interface CarouselProps {
+	variant?: 'page' | 'item';
+	itemsPerSlide?: string;
+	carouselLabel?: string;
+	prevLabel?: string;
 	nextLabel?: string;
-	announceStart?: string;
-	announceRange?: string;
-	instructions?: string;
-	locale?: string;
+	announcementLabel?: string;
+	secondaryButtonLabel?: string;
+	linkLabel?: string;
+	items?: string[];
+	theme?: Theme;
+}
+
+// ─── Product Card ──────────────────────────────────────
+export interface ProductCardProps {
+	flagship?: boolean;
+	productLabel?: boolean;
+	gallery?: boolean;
+	quickview?: boolean;
+	promoArea?: boolean;
+	highlightsArea?: boolean;
+	toggleOpen?: string;
+	toggleClose?: string;
+}
+
+// ─── Search Card ───────────────────────────────────────
+export interface SearchCardProps {
+	flagship?: boolean;
+	productLabel?: boolean;
+	gallery?: boolean;
+	quickview?: boolean;
+	promoArea?: boolean;
+	highlightsArea?: boolean;
+	toggleOpen?: string;
+	toggleClose?: string;
 }
 
 // ─── Divider ───────────────────────────────────────────
@@ -165,6 +209,43 @@ export interface DividerProps {
 	theme?: Theme;
 }
 
+// ─── Flight Details ────────────────────────────────────
+export interface FlightDetailsLegProps {
+	variant?: 'direct' | 'indirect' | 'indirect-concise';
+	airline?: string;
+	departureDate?: string;
+	departureDateLong?: string;
+	arrivalDate?: string;
+	arrivalDateLong?: string;
+	type?: string;
+	duration?: string;
+	durationLong?: string;
+	originTime: string;
+	originName: string;
+	originCode: string;
+	destinationTime: string;
+	destinationName: string;
+	destinationCode: string;
+	connectionTime?: string;
+	connectionTimeLong?: string;
+	connectionDetails?: string;
+}
+
+export interface FlightDetailsExtendedLegProps extends FlightDetailsLegProps {
+	extraLegs?: FlightDetailsLegProps[];
+}
+
+export interface FlightDetailsGroupProps {
+	outboundLeg: FlightDetailsExtendedLegProps;
+	returnLeg: FlightDetailsExtendedLegProps;
+}
+
+export interface FlightDetailsProps {
+	variant?: 'direct' | 'indirect';
+	open?: string;
+	close?: string;
+}
+
 // ─── Flyout Dropdown ───────────────────────────────────
 export interface FlyoutDropdownProps {
 	variant?: 'default' | 'menu-flyout';
@@ -175,6 +256,30 @@ export interface FlyoutDropdownProps {
 	scrollerAriaLabel?: string;
 }
 
+// ─── Forms ─────────────────────────────────────────────
+
+// ─── Datepicker ────────────────────────────────────────
+export interface DatepickerProps {
+	rangeSelection?: boolean;
+	dualView?: boolean;
+	scrollableMobile?: boolean;
+	weekNumbers?: boolean;
+	weekLabel?: string;
+	weekLabelFull?: string;
+	hideInput?: boolean;
+	separateCal?: boolean;
+	value?: string;
+	minDate?: string;
+	maxDate?: string;
+	previousLabel?: string;
+	nextLabel?: string;
+	announceStart?: string;
+	announceRange?: string;
+	instructions?: string;
+	locale?: string;
+	allowedDates?: string;
+}
+
 // ─── Form Row ────────────────────────────────────────────
 export interface FormRowProps {
 	labelText?: string;
@@ -187,90 +292,6 @@ export interface FormRowProps {
 	theme?: Theme;
 }
 
-// ─── Hero ──────────────────────────────────────────────
-export interface HeroProps {
-	alignment?: 'left' | 'right' | 'center';
-	reduced?: boolean;
-	variant?: 'default' | 'default slim' | 'flagship' | 'flagship slim' | 'illustration';
-	heading?: string;
-	content?: string;
-	hideButton?: boolean;
-	buttonLabel?: string;
-	caveat?: string;
-	imageUrl?: string;
-	altText?: string;
-}
-
-// ─── Icon ────────────────────────────────────────────────
-export interface IconProps {
-	type?: 'standard' | 'color' | 'bullet';
-	nameStandard?: string;
-	nameColor?: string;
-	nameBullet?: string;
-	size?: IconSize;
-	color?: string;
-	theme?: Theme;
-}
-
-// ─── Icon Button ─────────────────────────────────────────
-export interface IconButtonProps {
-	element?: 'a' | 'button';
-	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
-	size?: 'small' | 'medium' | 'large';
-	isDisabled?: boolean;
-	label?: string;
-	iconAsset?: string;
-	selected?: boolean;
-	theme?: Theme;
-}
-
-// ─── Image ─────────────────────────────────────────────
-export interface ImageSrcItem {
-	url: string;
-	size: string;
-}
-
-export type ImageFocalPoint =
-	'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-
-export interface ImageProps {
-	altText: string;
-	imageUrl: string;
-	srcset?: ImageSrcItem[];
-	ratio?: 'landscape' | 'panoramic' | 'portrait' | 'square' | 'wide';
-	shape?: 'rectangle' | 'rounded';
-	focalPoint?: ImageFocalPoint;
-}
-
-// ─── In-Page Tabs ──────────────────────────────────────
-export interface InPageTab {
-	label: string;
-	content?: string;
-	icon?: string;
-	disabled?: boolean;
-}
-
-export interface InPageTabsProps {
-	variant?: 'left-aligned' | 'full-width';
-	icon?: string;
-	active?: string;
-	tabsLabelledby?: string;
-	tabsLabel?: string;
-	/** @deprecated Use `tabsLabelledby` instead */
-	ariaLabelledby?: string;
-	tabs?: InPageTab[];
-}
-
-// ─── Info Tag ───────────────────────────────────────────
-export interface InfoTagProps {
-	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product';
-	size?: 'small' | 'medium';
-	label?: string;
-	leadingIcon?: boolean;
-	leadingIconAsset?: string;
-	theme?: Theme;
-}
-
 // ─── Input Checkbox ────────────────────────────────────
 export interface InputCheckboxProps {
 	isIndividual?: boolean;
@@ -370,6 +391,122 @@ export interface InputTextProps {
 	theme?: Theme;
 }
 
+// ─── Textarea ──────────────────────────────────────────
+export interface TextareaProps {
+	textareaValue?: string;
+	charCount?: number;
+	disabled?: boolean;
+	theme?: Theme;
+}
+
+// ─── Hero ──────────────────────────────────────────────
+export interface HeroProps {
+	alignment?: 'left' | 'right' | 'center';
+	reduced?: boolean;
+	variant?: 'default' | 'default slim' | 'flagship' | 'flagship slim' | 'illustration';
+	heading?: string;
+	content?: string;
+	hideButton?: boolean;
+	buttonLabel?: string;
+	caveat?: string;
+	imageUrl?: string;
+	altText?: string;
+}
+
+// ─── Highlight Panel ───────────────────────────────────
+export interface HighlightPanelProps {
+	variant?: 'no heading' | 'default' | 'strong' | 'brand';
+	title?: string;
+	subtitle?: string;
+	icon?: string;
+	collapsible?: boolean;
+	open?: boolean;
+	content?: string;
+	footer?: string;
+	divider?: boolean;
+	theme?: Theme;
+}
+
+// ─── Icon ────────────────────────────────────────────────
+export interface IconProps {
+	type?: 'standard' | 'color' | 'bullet';
+	nameStandard?: string;
+	nameColor?: string;
+	nameBullet?: string;
+	size?: IconSize;
+	color?: string;
+	theme?: Theme;
+}
+
+// ─── Icon Button ─────────────────────────────────────────
+export interface IconButtonProps {
+	element?: 'a' | 'button' | 'div';
+	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
+	size?: 'small' | 'medium' | 'large';
+	isDisabled?: boolean;
+	visibleLabel?: boolean;
+	labelRight?: boolean;
+	label?: string;
+	iconAsset?: string;
+	selected?: boolean;
+	theme?: Theme;
+}
+
+// ─── Image ─────────────────────────────────────────────
+export interface ImageSrcItem {
+	url: string;
+	size: string;
+}
+
+// prettier-ignore
+export type ImageFocalPoint =
+	| 'top-left'
+	| 'top-center'
+	| 'top-right'
+	| 'center-left'
+	| 'center'
+	| 'center-right'
+	| 'bottom-left'
+	| 'bottom-center'
+	| 'bottom-right';
+
+/**
+ * Responsive focal points, keyed by breakpoint (matching the library's
+ * breakpoint scale). `base` applies below the `xs` breakpoint; any breakpoint
+ * may be omitted — omitted breakpoints inherit the next smallest defined value
+ * (base → xs → sm → md → lg), falling back to `center`.
+ */
+export interface ImageResponsiveFocalPoint {
+	base?: ImageFocalPoint;
+	xs?: ImageFocalPoint;
+	sm?: ImageFocalPoint;
+	md?: ImageFocalPoint;
+	lg?: ImageFocalPoint;
+}
+
+export interface ImageProps {
+	altText: string;
+	imageUrl: string;
+	srcset?: ImageSrcItem[];
+	ratio?: 'landscape' | 'panoramic' | 'portrait' | 'square' | 'wide';
+	shape?: 'rectangle' | 'rounded';
+	/**
+	 * Focal point for the image. Accepts a single value applied at all breakpoints,
+	 * or an object with per-breakpoint values for responsive focal points.
+	 */
+	focalPoint?: ImageFocalPoint | ImageResponsiveFocalPoint;
+}
+
+// ─── Info Tag ───────────────────────────────────────────
+export interface InfoTagProps {
+	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product' | 'platinum';
+	size?: 'small' | 'medium';
+	label?: string;
+	leadingIcon?: boolean;
+	leadingIconAsset?: string;
+	theme?: Theme;
+}
+
 // ─── Link ────────────────────────────────────────────────
 export interface LinkProps {
 	href?: string;
@@ -482,26 +619,6 @@ export interface PriceBoxProps {
 	footerHtml?: string;
 }
 
-// ─── Card Promotion ───────────────────────────────────────
-export interface CardPromotionProps {
-	type?: 'default' | 'promo-code';
-	condensed?: boolean;
-	headingLevel?: HeadingLevel;
-	headline?: string;
-	scarcityLabel?: string;
-	conditions?: string;
-	linkLabel?: string;
-	icon?: string;
-	code?: string;
-	copied?: boolean;
-	copyLabel?: string;
-	copiedLabel?: string;
-	expired?: boolean;
-	expiredLabel?: string;
-	announcementLabel?: string;
-	theme?: Theme;
-}
-
 // ─── Promo Tag ──────────────────────────────────────────
 export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
 export type PromoTagSize = (typeof PromoTagSizes)[number];
@@ -515,7 +632,22 @@ export interface PromoTagProps {
 	theme?: Theme;
 }
 
+// ─── Ratings & Reviews ─────────────────────────────────
+
+// ─── Ratings: shared ───────────────────────────────────
+export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer' | 'holidaycheck';
+export type RangeIconsSize = 'medium' | 'large';
+
+export interface SchemaProps {
+	reviewCount?: number;
+	itemName?: string;
+	author?: string;
+	reviewAspect?: string;
+}
+
 // ─── Ratings: Customer review ─────────────────────────
+export type NumericalType = 'rating' | 'filter';
+
 export interface CustomerReviewProps {
 	type?: NumericalType;
 	variant?: 'brand' | 'tripadvisor';
@@ -530,7 +662,6 @@ export interface CustomerReviewProps {
 }
 
 // ─── Ratings: Numerical (9/10) ─────────────────────────
-export type NumericalType = 'rating' | 'filter';
 export type NumericalVariant = 'brand' | 'alt';
 
 export interface NumericalProps {
@@ -575,7 +706,7 @@ export interface RangeBarProps {
 	items?: { label: string; score: number; accessibleLabel?: string }[];
 }
 
-// ─── Ratings: Range icons (Sun/Star/TUI/TripAdvisor/TUI-T) ─
+// ─── Ratings: Range icons ──────────────────────────────
 export interface RangeIconsProps {
 	variant?: RangeIconsVariant;
 	size?: RangeIconsSize;
@@ -615,17 +746,6 @@ export interface RangeIconsGroupProps {
 	theme?: Theme;
 }
 
-// ─── Ratings: shared ───────────────────────────────────
-export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer' | 'holidaycheck';
-export type RangeIconsSize = 'medium' | 'large';
-
-export interface SchemaProps {
-	reviewCount?: number;
-	itemName?: string;
-	author?: string;
-	reviewAspect?: string;
-}
-
 // ─── Rich Text ─────────────────────────────────────────
 export interface RichTextProps {
 	content?: string;
@@ -641,30 +761,6 @@ export interface ScrollerProps {
 	label?: string;
 }
 
-// ─── Search Card ───────────────────────────────────────
-export interface SearchCardProps {
-	flagship?: boolean;
-	productLabel?: boolean;
-	gallery?: boolean;
-	quickview?: boolean;
-	promoArea?: boolean;
-	highlightsArea?: boolean;
-	toggleOpen?: string;
-	toggleClose?: string;
-}
-
-// ─── Product Card ──────────────────────────────────────
-export interface ProductCardProps {
-	flagship?: boolean;
-	productLabel?: boolean;
-	gallery?: boolean;
-	quickview?: boolean;
-	promoArea?: boolean;
-	highlightsArea?: boolean;
-	toggleOpen?: string;
-	toggleClose?: string;
-}
-
 // ─── Show More Or Less ──────────────────────────────────
 export interface ShowMoreOrLessProps {
 	isOpen?: boolean;
@@ -703,11 +799,66 @@ export interface SkeletonLayoutProps {
 	theme?: Theme;
 }
 
-// ─── Textarea ──────────────────────────────────────────
-export interface TextareaProps {
-	textareaValue?: string;
-	charCount?: number;
+// ─── Social Proofing ───────────────────────────────────
+export interface SocialProofingProps {
+	theme?: Theme;
+	iconAsset?: string;
+	iconSize?: 'small';
+	hasIcon?: boolean;
+	closeLabel?: string;
+}
+
+// ─── Tabs ──────────────────────────────────────────────
+
+// ─── Anchor Tabs ───────────────────────────────────────
+export interface AnchorTab {
+	label: string;
+	href: string;
+	icon?: string;
 	disabled?: boolean;
+	sectionContent?: string;
+}
+
+export interface AnchorTabsProps {
+	icon?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
+	ariaLabelledby?: string;
+	tabs?: AnchorTab[];
+	sticky?: boolean;
+}
+
+// ─── In-Page Tabs ──────────────────────────────────────
+export interface InPageTab {
+	label: string;
+	content?: string;
+	icon?: string;
+	disabled?: boolean;
+}
+
+export interface InPageTabsProps {
+	variant?: 'left-aligned' | 'full-width';
+	icon?: string;
+	active?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
+	ariaLabelledby?: string;
+	tabs?: InPageTab[];
+}
+
+// ─── Timeline ───────────────────────────────────────────
+export interface TimelineItemProps {
+	icon?: string;
+	content?: string;
+	gap?: boolean;
+}
+
+export interface TimelineProps {
+	items?: TimelineItemProps[];
+	itemCount?: number;
+	gap?: boolean;
 	theme?: Theme;
 }
 
@@ -721,7 +872,7 @@ export interface TooltipProps {
 	theme?: Theme;
 }
 
-// ─── Travel Aware Banner ─────────────────────────────────────────────
+// ─── Travel Aware Banner ────────────────────────────────
 export interface TravelAwareBannerProps {
 	imageUrl?: string;
 	imageText?: string;
@@ -732,18 +883,11 @@ export interface TravelAwareBannerProps {
 	isExternal?: boolean;
 }
 
-// ─── Social proofing ───────────────────────────────────────
-export interface SocialProofingProps {
-	theme?: Theme;
-	iconAsset?: string;
-	iconSize?: 'small';
-	hasIcon?: boolean;
-	closeLabel?: string;
-}
-
-// ─── PATTERNS ────────────────────────────────────────────
-// ─── Edit search ────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// PATTERNS
+// ═══════════════════════════════════════════════════════════
 
+// ─── Edit Search ────────────────────────────────────────
 export interface EditSearchProps {
 	variant?: 'back' | 'list';
 	heading?: string;
@@ -751,7 +895,24 @@ export interface EditSearchProps {
 	uniqueId?: string;
 }
 
-// ─── Review Card ───────────────────────────────────────────
+// ─── Reasons To Book ───────────────────────────────────
+export interface ReasonToBookItem {
+	pictogram: string;
+	text: string;
+}
+
+export interface ReasonsToBookProps {
+	heading?: string;
+	items?: ReasonToBookItem[];
+	linkLabel?: string;
+	carouselLabel?: string;
+	prevLabel?: string;
+	nextLabel?: string;
+	announcementLabel?: string;
+	theme?: Theme;
+}
+
+// ─── Review Card ───────────────────────────────────────
 export interface ReviewCardProps {
 	layout?: 'default' | 'compact' | 'dual';
 	switchLayout?: boolean;
@@ -759,7 +920,7 @@ export interface ReviewCardProps {
 	brand?: 'tripadvisor' | 'customer' | 'holidaycheck';
 }
 
-// ─── Review Summary ────────────────────────────────────────
+// ─── Review Summary ────────────────────────────────────
 export interface ReviewSummaryProps {
 	brand?: 'tripadvisor' | 'customer';
 }