@landtrustinc/design-system 1.2.21 → 1.2.25

package/dist/helpers.ts

@@ -0,0 +1,34 @@
+import { elementScrollIntoView } from 'seamless-scroll-polyfill';
+
+/**
+ * Detect if the browser is Safari
+ */
+export const isSafari = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
+};
+
+/**
+ * Scroll an element into view with smooth behavior
+ * Chrome seems to only work sporadically if not in a timeout
+ * Safari's built-in el.scrollIntoView doesn't support the options so use the polyfill directly
+ */
+export const scrollTo = (
+  el: HTMLElement,
+  config: ScrollIntoViewOptions,
+  parent?: HTMLElement | null
+): void => {
+  setTimeout(() => {
+    if (isSafari()) {
+      elementScrollIntoView(el, config);
+    } else {
+      // In certain scenarios there can be many carousels embedded in each other, so we need to
+      // have the parent explicitly scroll to the given element's position
+      if (parent) {
+        parent.scroll({ left: el.offsetLeft, behavior: 'smooth' });
+      } else {
+        el.scrollIntoView(config);
+      }
+    }
+  });
+};

package/dist/index.d.ts

@@ -1818,9 +1818,9 @@ type IconLabelProps = {
      */
     variant: IconVariantTypes$1;
     /**
-     * Text label to display next to the icon
+     * Text label or React node to display next to the icon
      */
-    label: string;
+    label: React__default.ReactNode;
     /**
      * Size of the label text
      */
@@ -2022,6 +2022,20 @@ type NavigationProps = {
 };
 declare const Navigation: ({ onMenuToggle, className, logoVariant, logoTheme, navLinks, onAvatarClick, ...rest }: NavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type PackageCardBadge = {
+    /**
+     * Icon variant for the badge
+     */
+    variant: IconVariantTypes$1;
+    /**
+     * Label text or React node for the badge
+     */
+    label: React__default.ReactNode;
+    /**
+     * Icon size for the badge
+     */
+    iconSize?: IconLabelProps['iconSize'];
+};
 type PackageCardProps = {
     /**
      * Array of image URLs to display
@@ -2034,15 +2048,11 @@ type PackageCardProps = {
     /**
      * Subtitle or description
      */
-    subtitle: string;
+    subtitle: React__default.ReactNode;
     /**
      * Starting price text
      */
     startingPrice: string;
-    /**
-     * Number of trips remaining
-     */
-    tripsLeft?: number;
     /**
      * Whether the package is favorited
      */
@@ -2060,27 +2070,45 @@ type PackageCardProps = {
      */
     className?: string;
     /**
-     * Number of days for the package
+     * Array of badges to display (features/amenities)
      */
-    days?: number;
+    badges?: PackageCardBadge[];
     /**
-     * Number of guests
+     * Optional badge element to display
      */
-    guests?: number;
+    badge?: React__default.ReactNode;
     /**
-     * Whether lodging is included
-     */
-    hasLodging?: boolean;
+     * Array of availability badges to display (can include both top-left and bottom-right badges)
+     */
+    availabilityBadges?: Array<{
+        /**
+         * Variant of the availability badge
+         */
+        variant: AvailabilityBadgeVariant;
+        /**
+         * Text to display in the badge
+         */
+        text: React__default.ReactNode;
+        /**
+         * Position of the badge
+         */
+        position: 'top-left' | 'bottom-right';
+        /**
+         * Whether this badge should trigger the overlay (for sold out or unavailable states)
+         */
+        showOverlay?: boolean;
+    }>;
     /**
-     * Optional badge element to display
+     * Optional ID for the carousel (for accessibility and tracking)
      */
-    badge?: React__default.ReactNode;
+    id?: string;
     /**
-     * Availability status text
+     * Whether to show white background and full padding on content area (default: true)
+     * When false, only shows top padding without background
      */
-    availability?: string;
+    hasContentBackground?: boolean;
 };
-declare const PackageCard: ({ images, title, subtitle, startingPrice, tripsLeft, isFavorited, onFavoriteClick, onClick, className, days, guests, hasLodging, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const PackageCard: ({ images, title, subtitle, startingPrice, isFavorited, onFavoriteClick, onClick, className, badges, availabilityBadges, id, hasContentBackground, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type PackageHeaderProps = {
     /**
@@ -2160,6 +2188,106 @@ declare const Reviews: FC<ReviewsProps>;
 
 declare const ReviewsShowcase: FC;
 
+type CarouselPositions = 'bottom' | 'left-right' | 'top-right' | 'inner-bottom';
+type DotsColors = 'light' | 'dark' | 'neutral';
+type ScrollingCarouselStepProps = {
+    /**
+     * Child elements to display in the carousel step
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Index of the step (automatically provided by parent)
+     */
+    index?: number;
+    /**
+     * ID of the parent carousel (must match the id of the ScrollingCarousel)
+     */
+    parentId: string;
+    /**
+     * Click handler for the step
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+type ScrollingCarouselProps = {
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Child carousel steps
+     */
+    children: ReactNode;
+    /**
+     * Use custom left button styling
+     */
+    customLeftButton?: boolean;
+    /**
+     * Show navigation buttons
+     * @default true
+     */
+    showButtons?: boolean;
+    /**
+     * Show navigation dots
+     * @default false
+     */
+    showDots?: boolean;
+    /**
+     * Color scheme for dots
+     * @default 'light'
+     */
+    dotsColor?: DotsColors;
+    /**
+     * Number of dots to display at once
+     * @default 5
+     */
+    numberOfDots?: number;
+    /**
+     * Enable infinite scrolling
+     * @default false
+     */
+    infiniteScroll?: boolean;
+    /**
+     * Position of navigation buttons
+     * @default 'left-right'
+     */
+    buttonsPosition?: CarouselPositions;
+    /**
+     * Custom back button icon
+     */
+    customBackIcon?: ReactNode;
+    /**
+     * Custom next button icon
+     */
+    customNextIcon?: ReactNode;
+    /**
+     * Only show navigation on hover
+     * @default false
+     */
+    showNavigationOnHover?: boolean;
+    /**
+     * Current active slide index (for controlled mode)
+     */
+    current?: number;
+    /**
+     * Unique identifier for the carousel (required for DOM queries)
+     */
+    id: string;
+};
+
+declare const ScrollingCarouselStep: {
+    ({ children, index, className, parentId, onClick, }: ScrollingCarouselStepProps): _emotion_react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ScrollingCarousel: {
+    ({ className, children, showButtons, showDots, dotsColor, numberOfDots, buttonsPosition, customLeftButton, infiniteScroll, customBackIcon, customNextIcon, showNavigationOnHover, id, current, }: ScrollingCarouselProps): _emotion_react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type SpinnerProps = {
     /**
      * Size of the spinner using IconSize tokens
@@ -2293,4 +2421,4 @@ declare const Widget: React__default.FC<WidgetProps> & {
     }>;
 };
 
-export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, Column, type ColumnProps, Container, Divider, type DividerProps, type FeatureItem, FeatureList, FeatureListItem, type FeatureListItemProps, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LandownerProfile, type LandownerProfileProps, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MarkdownContent, type MarkdownContentProps, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type SuggestedPrompt, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, type TopMatchingFieldNote, type TopMatchingReview, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };
+export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, type CarouselPositions, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, Column, type ColumnProps, Container, Divider, type DividerProps, type DotsColors, type FeatureItem, FeatureList, FeatureListItem, type FeatureListItemProps, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LandownerProfile, type LandownerProfileProps, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MarkdownContent, type MarkdownContentProps, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardBadge, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, ScrollingCarousel, type ScrollingCarouselProps, ScrollingCarouselStep, type ScrollingCarouselStepProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type SuggestedPrompt, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, type TopMatchingFieldNote, type TopMatchingReview, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };