@ship-it-ui/ui 0.0.7 → 0.0.9

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
 export { ClassValue } from 'clsx';
 import * as react from 'react';
-import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes, MouseEventHandler } from 'react';
+import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, forwardRef, LabelHTMLAttributes, FC, SVGAttributes, MouseEventHandler } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -10,6 +10,7 @@ import * as RadixRadio from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as RadixSwitch from '@radix-ui/react-switch';
+import * as RadixAccordion from '@radix-ui/react-accordion';
 import * as RadixContext from '@radix-ui/react-context-menu';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixAlert from '@radix-ui/react-alert-dialog';
@@ -376,6 +377,31 @@ interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
  */
 declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * NumberInput — numeric input with `−` / `+` stepper buttons. Long-press the
+ * buttons to repeat. Use for guest count, additional drivers, days, child
+ * seats — anywhere users tweak a small integer or decimal.
+ */
+interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> {
+    /** Current value (controlled). */
+    value?: number;
+    /** Default value (uncontrolled). */
+    defaultValue?: number;
+    /** Fires when the value changes via input or stepper. */
+    onValueChange?: (value: number) => void;
+    /** Minimum allowed value. Default `0`. */
+    min?: number;
+    /** Maximum allowed value. Default `Infinity`. */
+    max?: number;
+    /** Step increment. Default `1`. */
+    step?: number;
+    /** Visual size. Default `'md'`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible label. */
+    'aria-label'?: string;
+}
+declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
 interface OTPProps {
     /** Number of digit slots. Defaults to 6. */
     length?: number;
@@ -416,6 +442,31 @@ interface RadioProps extends Omit<RadixRadio.RadioGroupItemProps, 'asChild' | 'c
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * SegmentedControl — pill-styled radio group for filtering the current view's
+ * data (Daily / Weekly / Monthly rates, Map / List view). Distinct from
+ * `Tabs`, which changes navigational context.
+ */
+interface SegmentedControlOption {
+    /** Stable identifier. */
+    value: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon name (from `@ship-it-ui/icons`). */
+    icon?: string;
+    /** When true, this option is disabled. */
+    disabled?: boolean;
+}
+interface SegmentedControlProps extends Omit<RadixRadio.RadioGroupProps, 'orientation' | 'children'> {
+    /** Options to render. */
+    options: ReadonlyArray<SegmentedControlOption>;
+    /** Visual size. Default `md`. */
+    size?: 'sm' | 'md';
+    /** When true, stretches to fill the parent. */
+    fullWidth?: boolean;
+}
+declare const SegmentedControl: react.ForwardRefExoticComponent<SegmentedControlProps & react.RefAttributes<HTMLDivElement>>;
+
 declare const SelectRoot: react.FC<RadixSelect.SelectProps>;
 declare const SelectValue: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
 declare const SelectGroup: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
@@ -512,9 +563,29 @@ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, Var
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Accordion — collapsible sections. Built on Radix Accordion.
+ *
+ * Use `type='single'` for one-open-at-a-time (FAQ pages); `'multiple'` when
+ * sections are independent (filter groups, listing detail panels).
+ */
+type AccordionProps = (RadixAccordion.AccordionSingleProps | RadixAccordion.AccordionMultipleProps) & {
+    children?: ReactNode;
+};
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+type AccordionItemProps = RadixAccordion.AccordionItemProps;
+declare const AccordionItem: react.ForwardRefExoticComponent<RadixAccordion.AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends Omit<RadixAccordion.AccordionTriggerProps, 'asChild'> {
+    /** Optional icon name rendered to the left of the trigger label. */
+    leadingIcon?: string;
+}
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+type AccordionContentProps = RadixAccordion.AccordionContentProps;
+declare const AccordionContent: react.ForwardRefExoticComponent<RadixAccordion.AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
+
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarStatus = 'ok' | 'warn' | 'err' | 'off';
-interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Display name. Used to derive initials and a deterministic background color. */
     name?: string;
     /** Image source. Falls back to initials if loading fails. */
@@ -525,6 +596,11 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     /** Override the auto-generated initials (e.g., for non-Latin scripts). */
     initials?: string;
+    /**
+     * Override the hash-derived fallback background with a literal CSS color value.
+     * Only applies when the initials fallback is shown; image avatars are unaffected.
+     */
+    color?: string;
 }
 /**
  * Person/entity avatar. Auto-generates initials and a stable background color from
@@ -548,14 +624,24 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
 declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const badgeStyles: (props?: ({
-    variant?: "outline" | "err" | "pink" | "purple" | "solid" | "ok" | "warn" | "accent" | "neutral" | null | undefined;
+    variant?: "outline" | "err" | "pink" | "purple" | "solid" | "warn" | "ok" | "accent" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {
+/**
+ * Variant path: use one of the DS semantic variants.
+ *   <Badge variant="ok">Done</Badge>
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <Badge color="#7c3aed">VIP</Badge>
+ */
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeStyles> {
     /** Show a colored leading dot. */
     dot?: boolean;
     /** Optional leading icon (defers to children). */
     icon?: ReactNode;
+    /** Arbitrary CSS color override. When set, replaces the `variant` tint. */
+    color?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -638,7 +724,7 @@ interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Pill-style leading icon (typically a glyph or `@`/`#`). */
     icon?: ReactNode;
     /**
@@ -651,13 +737,10 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
      */
     density?: 'comfortable' | 'touch';
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
-/**
- * Pill-shaped filter chip. Used in command palette tag rows, search filter strips,
- * and AI suggestion lists. Differs from `Tag` by being pill-shaped (full radius)
- * and slightly more decorative.
- */
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
 
 type KbdProps = HTMLAttributes<HTMLElement>;
@@ -667,6 +750,39 @@ type KbdProps = HTMLAttributes<HTMLElement>;
  */
 declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
 
+/**
+ * Rating — star rating display and input.
+ *
+ * `readOnly` (default for displays of averaged values like 4.7) supports
+ * `precision='half'` for fractional fills via a clipped overlay. Interactive
+ * ratings step in whole units only — half-step input is uncommon UX and the
+ * keyboard model (radiogroup) doesn't map cleanly to it.
+ */
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'defaultValue' | 'role'> {
+    /** Current rating (controlled). Range `0` … `max`. */
+    value?: number;
+    /** Default rating (uncontrolled). */
+    defaultValue?: number;
+    /** Fires with the new whole-number rating on click / keyboard select. */
+    onValueChange?: (value: number) => void;
+    /** Maximum number of stars. Default `5`. */
+    max?: number;
+    /**
+     * Fractional precision for **read-only** display. Interactive ratings always
+     * step in whole units. Default `'full'`.
+     */
+    precision?: 'full' | 'half';
+    /** Visual size. Default `'md'`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** When true, renders a non-interactive display (`role='img'`). */
+    readOnly?: boolean;
+    /** Accessible label. For read-only this overrides the auto-generated "X out of Y stars" label. */
+    'aria-label'?: string;
+    /** Override the filled-star color. Accepts any CSS color. */
+    color?: string;
+}
+declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * ScrollArea — token-styled scrollbar primitive built on
  * `@radix-ui/react-scroll-area`. Wraps a viewport with custom scrollbars that
@@ -746,9 +862,19 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 declare const SkeletonGroup: react.ForwardRefExoticComponent<SkeletonGroupProps & react.RefAttributes<HTMLDivElement>>;
 
 type StatusState = 'ok' | 'warn' | 'err' | 'off' | 'sync' | 'accent';
-interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Semantic status. */
+/**
+ * State path: use a semantic state.
+ *   <StatusDot state="ok" />
+ *
+ * Color path (escape hatch): pass an arbitrary CSS color. When both are set,
+ * `color` wins at runtime.
+ *   <StatusDot color="#7c3aed" />
+ */
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Semantic state. Default `'ok'`. */
     state?: StatusState;
+    /** Arbitrary CSS color override. When set, replaces the state-derived color. */
+    color?: string;
     /** Optional label rendered next to the dot. */
     label?: ReactNode;
     /** Pulse the dot — used for `sync` state to indicate live activity. */
@@ -758,13 +884,15 @@ interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Optional close button. When provided, a `×` rendered on the right calls it. */
     onRemove?: () => void;
     /** Optional leading icon. */
     icon?: ReactNode;
     /** Pixel height. Defaults to 22px. */
     size?: number;
+    /** Arbitrary CSS color. When set, the default neutral tint is replaced with this color. */
+    color?: string;
     children: ReactNode;
 }
 /**
@@ -1014,7 +1142,7 @@ declare function SimpleTooltip({ content, children, side, delayDuration, }: Simp
  */
 type AlertTone = 'accent' | 'ok' | 'warn' | 'err';
 declare const alertStyles: (props?: ({
-    tone?: "err" | "ok" | "warn" | "accent" | null | undefined;
+    tone?: "err" | "warn" | "ok" | "accent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertStyles> {
     /** Bold title text. */
@@ -1045,7 +1173,7 @@ declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttri
  */
 type BannerTone = 'accent' | 'ok' | 'warn' | 'err';
 declare const bannerStyles: (props?: ({
-    tone?: "err" | "ok" | "warn" | "accent" | null | undefined;
+    tone?: "err" | "warn" | "ok" | "accent" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BannerProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerStyles> {
@@ -1083,6 +1211,40 @@ interface CrumbProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const Crumb: react.ForwardRefExoticComponent<CrumbProps & react.RefAttributes<HTMLAnchorElement>>;
 
+/**
+ * Carousel — a horizontal scroll-snap container with prev/next controls,
+ * dot indicators, and an optional thumbnail strip. Native CSS scroll
+ * behavior; no library.
+ *
+ * Pass an array of `items` and a `renderItem` function — the carousel
+ * handles snapping, active-index tracking, and keyboard nav.
+ */
+interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Slide data. */
+    items: ReadonlyArray<T>;
+    /** Renderer for each slide. */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Optional renderer for a thumbnail strip below the viewport. */
+    renderThumbnail?: (item: T, index: number) => ReactNode;
+    /** Active slide index (controlled). */
+    index?: number;
+    /** Default index (uncontrolled). Default `0`. */
+    defaultIndex?: number;
+    /** Fires when the active index changes. */
+    onIndexChange?: (index: number) => void;
+    /** Aspect ratio of each slide. Default `16/10`. */
+    aspectRatio?: string | number;
+    /** When false, hides the dot indicators. Default `true`. */
+    showDots?: boolean;
+    /** When false, hides the prev/next arrows. Default `true`. */
+    showArrows?: boolean;
+    /** Accessible label for the carousel region. */
+    'aria-label'?: string;
+}
+declare const Carousel: <T>(p: CarouselProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => ReactNode;
+
 /**
  * Combobox — text input with an attached, type-to-filter listbox. Implements
  * the WAI-ARIA combobox pattern (input owns focus; listbox is referenced via
@@ -1244,13 +1406,26 @@ declare function DataTable<T>(props: DataTableProps<T> & {
     ref?: Ref<HTMLTableElement>;
 }): react_jsx_runtime.JSX.Element;
 
+/** A `{from, to}` date range used by `Calendar` and `DateRangePicker`. */
+interface DateRange {
+    from?: Date;
+    to?: Date;
+}
 interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'defaultValue'> {
-    /** Currently selected date (controlled). */
+    /** Selection mode. Default `'single'`. */
+    mode?: 'single' | 'range';
+    /** Currently selected date (controlled, single mode). */
     value?: Date;
-    /** Default selected date (uncontrolled). */
+    /** Default selected date (uncontrolled, single mode). */
     defaultValue?: Date;
-    /** Fires with the newly selected date. */
+    /** Fires with the newly selected date (single mode). */
     onValueChange?: (date: Date) => void;
+    /** Currently selected range (controlled, range mode). */
+    range?: DateRange;
+    /** Default range (uncontrolled, range mode). */
+    defaultRange?: DateRange;
+    /** Fires when the range changes (range mode). */
+    onRangeChange?: (range: DateRange) => void;
     /** Currently visible month (0-indexed) and year. */
     month?: number;
     year?: number;
@@ -1291,6 +1466,201 @@ interface DatePickerProps {
 }
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * DateRangePicker — a button trigger that opens a popover with one or two
+ * adjacent `Calendar` grids in `mode="range"`. The anchor of every
+ * car-rental booking: pickup → return.
+ */
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (range: DateRange) => void;
+    /** Number of months shown side-by-side. Default `2` for desktop, `1` for mobile. */
+    months?: 1 | 2;
+    /** Placeholder shown when no range is set. */
+    placeholder?: string;
+    /** Custom formatter. Default uses each date's `toLocaleDateString()`. */
+    format?: (d: Date) => string;
+    /** Pixel width of the trigger. */
+    width?: number | string;
+    disabled?: boolean;
+    /** Optional disable predicate forwarded to each Calendar. */
+    isDateDisabled?: (date: Date) => boolean;
+    'aria-label'?: string;
+    id?: string;
+}
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Lightbox — fullscreen photo viewer. Built on Radix Dialog (reuses the
+ * focus trap, portal, and escape-to-close). Adds keyboard ←/→ navigation
+ * between items and a counter overlay.
+ */
+interface LightboxProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Items to view — usually image URLs but anything renderable is fine. */
+    items: ReadonlyArray<unknown>;
+    /** Renderer for the active item. */
+    renderItem: (item: unknown, index: number) => ReactNode;
+    /** Current index (controlled). */
+    index?: number;
+    /** Default index (uncontrolled). */
+    defaultIndex?: number;
+    /** Fires when the index changes. */
+    onIndexChange?: (index: number) => void;
+    /** Accessible title (visually hidden). */
+    title?: ReactNode;
+}
+declare const Lightbox: react.ForwardRefExoticComponent<LightboxProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ListingCard — a consumer-marketplace card composing photos (`Carousel`),
+ * title, `Rating`, price, host, and an optional verified badge / favorite
+ * toggle. Distinct from `EntityCard`, which is dev-tool entity chrome.
+ */
+interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** Photo URLs (or anything `Carousel` can render). At least one. */
+    photos: ReadonlyArray<string>;
+    /** Listing title — e.g. "2023 Tesla Model 3". */
+    title: ReactNode;
+    /** Optional eyebrow text above the title (location, vehicle type). */
+    eyebrow?: ReactNode;
+    /** Average rating (0–5). When undefined, the rating row is hidden. */
+    rating?: number;
+    /** Number of reviews — shown next to the rating. */
+    reviewCount?: number;
+    /** Headline price (e.g. `89`). */
+    price: ReactNode;
+    /** Price unit suffix (e.g. `/day`). */
+    priceUnit?: ReactNode;
+    /** Original price for sale strike-through. */
+    originalPrice?: ReactNode;
+    /** Host / owner name. */
+    host?: ReactNode;
+    /** Distance label (e.g. `0.4 mi away`). */
+    distance?: ReactNode;
+    /** When true, shows a `verified` badge on the photo. */
+    verified?: boolean;
+    /** Link target for the whole card. */
+    href?: string;
+    /** Heart-icon favorite toggle handler. */
+    onFavorite?: (next: boolean) => void;
+    /** Current favorite state. */
+    favorited?: boolean;
+    /** Card width override. */
+    width?: number | string;
+}
+declare const ListingCard: react.ForwardRefExoticComponent<ListingCardProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Country data for `PhoneInput`. Subset of common origins — extend as the
+ * product grows or replace with a full ISO 3166-1 list (e.g. `libphonenumber-js`
+ * `getCountries()`). Each country lists its ISO code (cca2), display name,
+ * E.164 dial code, and flag emoji.
+ */
+interface PhoneCountry {
+    /** ISO 3166-1 alpha-2 code, e.g. "US". */
+    code: string;
+    /** Display name. */
+    name: string;
+    /** E.164 country calling code without `+`, e.g. "1" or "44". */
+    dialCode: string;
+    /** Unicode flag (regional indicator pair). */
+    flag: string;
+}
+declare const phoneCountries: ReadonlyArray<PhoneCountry>;
+
+/**
+ * PhoneInput — country-code Select + national-number text input. Emits
+ * E.164-formatted strings (`+CC<NSN>`) via `onValueChange`.
+ *
+ * The country list is a curated subset of common origins. Pass a custom
+ * `countries` prop to supply your own (e.g. via `libphonenumber-js`).
+ */
+interface PhoneInputProps {
+    /** E.164 value (controlled), e.g. `+14155550100`. */
+    value?: string;
+    /** Default E.164 value (uncontrolled). */
+    defaultValue?: string;
+    /** Fires with the new E.164 value. Empty national number → empty string. */
+    onValueChange?: (value: string) => void;
+    /** Custom country list. Defaults to the bundled subset. */
+    countries?: ReadonlyArray<PhoneCountry>;
+    /** Default selected country code. Default `'US'`. */
+    defaultCountry?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Accessible label for the national-number input. */
+    'aria-label'?: string;
+}
+declare const PhoneInput: react.ForwardRefExoticComponent<PhoneInputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * PriceBreakdown — labelled line items + a totals row. Used in booking
+ * summaries, checkout sheets, trip receipts.
+ *
+ * Compose with `<PriceBreakdown.Line>` for individual rows, or pass an
+ * `items` array for the common case. The `total` is rendered last with a
+ * top border separator.
+ */
+interface PriceBreakdownItem {
+    label: ReactNode;
+    /** Optional secondary text (e.g. `$89 × 3 nights`). */
+    subLabel?: ReactNode;
+    amount: ReactNode;
+    /** When set, renders the amount with a strike-through in the `sale` token. */
+    originalAmount?: ReactNode;
+    /** When true, renders the amount in the `sale` color (e.g. discounts). */
+    discount?: boolean;
+}
+interface PriceBreakdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Line items rendered in order. */
+    items?: ReadonlyArray<PriceBreakdownItem>;
+    /** Final total. Pre-formatted (e.g. `$267`). */
+    total?: ReactNode;
+    /** Label for the total row. Default `'Total'`. */
+    totalLabel?: ReactNode;
+    /** Currency hint shown next to the total. */
+    currency?: ReactNode;
+    /** Optional bespoke children — use instead of `items` for custom rows. */
+    children?: ReactNode;
+}
+declare const PriceBreakdown: ReturnType<typeof forwardRef<HTMLDivElement, PriceBreakdownProps>> & {
+    Line: typeof PriceBreakdownLine;
+};
+interface PriceBreakdownLineProps extends PriceBreakdownItem {
+    className?: string;
+}
+declare const PriceBreakdownLine: react.ForwardRefExoticComponent<PriceBreakdownLineProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ReviewCard — a single review feed item. Composes Avatar, Rating, date,
+ * body, optional photos strip, and a `verified-trip` badge.
+ *
+ * Distinct from `Testimonial`, which is curated marketing chrome.
+ */
+interface ReviewCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Reviewer display name. */
+    author: ReactNode;
+    /** Optional author avatar URL. */
+    authorAvatar?: string;
+    /** Star rating, 0–5. */
+    rating: number;
+    /** When set, renders as a Date — otherwise as a string. */
+    date: ReactNode;
+    /** Review body. */
+    body: ReactNode;
+    /** Optional photo URLs (rendered as a horizontal strip). */
+    photos?: ReadonlyArray<string>;
+    /** When true, shows the "Verified trip" badge. */
+    verified?: boolean;
+    /** Optional reviewer subtitle (location, member-since date). */
+    subtitle?: ReactNode;
+}
+declare const ReviewCard: react.ForwardRefExoticComponent<ReviewCardProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * Dots — progress dots for carousels and onboarding tours. The current dot
  * widens into a pill (per the handoff spec); the rest stay circular.
@@ -1339,7 +1709,7 @@ declare const Dropzone: react.ForwardRefExoticComponent<DropzoneProps & react.Re
  * signal semantic intent (e.g., `err` for sync failures).
  */
 declare const plateStyles: (props?: ({
-    tone?: "err" | "ok" | "warn" | "accent" | "neutral" | null | undefined;
+    tone?: "err" | "warn" | "ok" | "accent" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type PlateVariantProps = VariantProps<typeof plateStyles>;
 interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -1647,7 +2017,7 @@ declare const trackStyles: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fillStyles: (props?: ({
-    tone?: "err" | "ok" | "warn" | "accent" | null | undefined;
+    tone?: "err" | "warn" | "ok" | "accent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, VariantProps<typeof trackStyles>, VariantProps<typeof fillStyles> {
     /** Numeric progress, 0..max. Ignored when `indeterminate`. */
@@ -2078,4 +2448,4 @@ interface WizardDialogProps {
 }
 declare const WizardDialog: react.ForwardRefExoticComponent<WizardDialogProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, InlineEdit, type InlineEditHandle, type InlineEditProps, Input, type InputProps, Kbd, type KbdProps, LargeTitle, type LargeTitleProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, type PullToRefreshState, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, SimpleTooltip, type SimpleTooltipProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, TabBar, type TabBarItem, type TabBarProps, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, InlineEdit, type InlineEditHandle, type InlineEditProps, Input, type InputProps, Kbd, type KbdProps, LargeTitle, type LargeTitleProps, Lightbox, type LightboxProps, ListingCard, type ListingCardProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, NumberInput, type NumberInputProps, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PriceBreakdown, type PriceBreakdownItem, PriceBreakdownLine, type PriceBreakdownLineProps, type PriceBreakdownProps, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, type PullToRefreshState, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, ReviewCard, type ReviewCardProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, SimpleTooltip, type SimpleTooltipProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, TabBar, type TabBarItem, type TabBarProps, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, phoneCountries, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };