@bug-on/m3-expressive 1.3.0 → 1.3.2

package/dist/layout.d.ts

@@ -1,35 +1,205 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import * as React$1 from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { HTMLMotionProps } from 'motion/react';
-import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 export { S as ScrollArea, a as ScrollAreaOrientation, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
+import { VariantProps } from 'class-variance-authority';
 export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-339RV6v7.js';
 import '@radix-ui/react-scroll-area';
 
-declare const cardVariants: (props?: ({
-    variant?: "outlined" | "elevated" | "filled" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * @file card-tokens.ts
+ *
+ * MD3 Expressive Card Elevation & Motion Tokens.
+ *
+ * Elevation levels translated from:
+ * - ElevatedCardTokens.kt
+ * - FilledCardTokens.kt
+ * - OutlinedCardTokens.kt
+ * - Elevation.kt
+ *
+ * Elevation Levels:
+ * - Level 0: 0dp (Flat - "none")
+ * - Level 1: 1dp (Slight elevation - Elevated rest)
+ * - Level 2: 3dp (Hover / Focus elevation for Elevated, Hover for Filled/Outlined)
+ * - Level 3: 6dp (Dragged state elevation)
+ * - Level 4: 8dp (Pickers/Popups elevation)
+ * - Level 5: 12dp (Modals/Dialogs elevation)
+ */
+declare const SHADOW: {
+    readonly level0: "none";
+    readonly level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+    readonly level2: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15)";
+    readonly level3: "0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px 0px rgba(0,0,0,.3)";
+    readonly level4: "0px 6px 10px 4px rgba(0,0,0,.15), 0px 2px 3px 0px rgba(0,0,0,.3)";
+    readonly level5: "0px 8px 12px 6px rgba(0,0,0,.15), 0px 4px 4px 0px rgba(0,0,0,.3)";
+};
+type ShadowLevel = keyof typeof SHADOW;
+type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;
+type CardElevationConfig = ElevationLevel | {
+    rest?: ElevationLevel | string;
+    hover?: ElevationLevel | string;
+    pressed?: ElevationLevel | string;
+    dragged?: ElevationLevel | string;
+};
+/**
+ * Resolves a numeric level (0–5) or custom box-shadow string to an MD3 shadow value.
+ */
+declare function resolveElevationShadow(level: ElevationLevel | string | undefined): string | undefined;
+/**
+ * Maps each card variant to its elevation level across interaction states.
+ * - Elevated: Rest (Level 1) -> Hover/Focus (Level 2) -> Pressed (Level 1) -> Dragged (Level 3)
+ * - Filled: Rest (Level 0) -> Hover/Focus (Level 1) -> Pressed (Level 0) -> Dragged (Level 3)
+ * - Outlined: Rest (Level 0) -> Hover/Focus (Level 1) -> Pressed (Level 0) -> Dragged (Level 3)
+ */
+declare const VARIANT_ELEVATION: {
+    readonly elevated: {
+        readonly rest: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+        readonly hover: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15)";
+        readonly pressed: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+        readonly dragged: "0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px 0px rgba(0,0,0,.3)";
+        readonly disabled: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+    };
+    readonly filled: {
+        readonly rest: "none";
+        readonly hover: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+        readonly pressed: "none";
+        readonly dragged: "0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px 0px rgba(0,0,0,.3)";
+        readonly disabled: "none";
+    };
+    readonly outlined: {
+        readonly rest: "none";
+        readonly hover: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
+        readonly pressed: "none";
+        readonly dragged: "0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px 0px rgba(0,0,0,.3)";
+        readonly disabled: "none";
+    };
+};
+type CardVariant = keyof typeof VARIANT_ELEVATION;
+interface CardElevationOptions {
+    variant?: CardVariant;
+    disabled?: boolean;
+    draggable?: boolean;
+    elevation?: CardElevationConfig;
+    disableElevation?: boolean;
+    hoverEffect?: boolean;
+}
+/**
+ * Hook: Card Elevation Animation
+ * Calculates animated boxShadow states based on variant, overrides, and interaction flags.
+ */
+declare function useCardElevation({ variant, disabled, draggable, elevation, disableElevation, hoverEffect, }: CardElevationOptions): {
+    animate: {
+        boxShadow: string;
+    };
+    whileHover: {
+        boxShadow: string;
+    } | undefined;
+    whileTap: {
+        boxShadow: string;
+    } | undefined;
+    whileFocus: {
+        boxShadow: string;
+    } | undefined;
+    whileDrag: {
+        boxShadow: string;
+    } | undefined;
+    transition: {
+        boxShadow: {
+            duration: number;
+            ease: [number, number, number, number];
+        };
+    };
+};
+
+/**
+ * @file types.ts
+ *
+ * Types and interfaces for the MD3 Expressive Card system.
+ */
+
 type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
-interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
-    /** Disables interaction and reduces opacity (MD3 disabled state). */
+interface CardProps extends MotionDivProps {
+    /**
+     * Visual style variant of the card.
+     * - `elevated`: Surface container low + elevation drop shadow (rest: level1, hover: level2).
+     * - `filled`: Surface container highest (rest: level0, hover: level1).
+     * - `outlined`: Surface background + outline variant border (rest: level0, hover: level1).
+     * @default "elevated"
+     */
+    variant?: CardVariant;
+    /**
+     * Custom numeric elevation level (0–5) or granular per-state elevation configuration.
+     * - Numeric: `elevation={0}` (flat/none), `elevation={2}`, etc.
+     * - Object: `elevation={{ rest: 0, hover: 2, pressed: 1, dragged: 3 }}`
+     */
+    elevation?: CardElevationConfig;
+    /**
+     * Disables all elevation drop shadows completely (forces Level 0 / "none").
+     * @default false
+     */
+    disableElevation?: boolean;
+    /**
+     * Controls whether the ripple effect is enabled on interactive cards.
+     * @default true (on interactive cards)
+     */
+    ripple?: boolean;
+    /**
+     * Shorthand flag to disable the ripple effect.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Controls whether hover elevates the card.
+     * Set to `false` to disable hover elevation changes while keeping interactivity.
+     * @default true
+     */
+    hoverEffect?: boolean;
+    /**
+     * Shorthand flag to disable hover elevation changes.
+     * @default false
+     */
+    disableHoverEffect?: boolean;
+    /**
+     * Controls whether MD3 interactive state layer overlays (hover/focus/active) are shown.
+     * @default true
+     */
+    stateLayer?: boolean;
+    /**
+     * Shorthand flag to disable the state layer overlay.
+     * @default false
+     */
+    disableStateLayer?: boolean;
+    /**
+     * Disables interaction and reduces opacity to 38% (MD3 disabled specification).
+     * @default false
+     */
     disabled?: boolean;
     /**
      * Forces card to be interactive even without `onClick`.
-     * Useful when card contains child interactive elements.
+     * Useful when card contains child interactive elements or is selectable.
+     * @default false
      */
     interactive?: boolean;
     /**
-     * If provided, renders card as `<a>` element. Automatically enables interactive mode.
-     * Prefer `href` over `onClick` for page navigation.
+     * Opts in to MD3 drag state elevation and interaction layer.
+     * When true, animates to Level 3 elevation on drag.
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * If provided, renders card as an `<a>` element. Automatically enables interactive mode.
+     * Prefer `href` over `onClick` for navigation.
      */
     href?: string;
     /** Target for `<a>` element (effective only when `href` is provided). */
-    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    target?: React$1.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
     /** rel for `<a>` element (automatically adds `noreferrer` when `target="_blank"`). */
     rel?: string;
-    children?: React.ReactNode;
+    /** Card inner children. */
+    children?: React$1.ReactNode;
     /**
      * Change the component to the underlying child element and merge props/behavior.
      * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
@@ -37,7 +207,285 @@ interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
      */
     asChild?: boolean;
 }
-declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
+interface CardHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Leading avatar or icon node. */
+    avatar?: React$1.ReactNode;
+    /** Primary title text or element. */
+    title?: React$1.ReactNode;
+    /** Subheader or supporting text below the title. */
+    subheader?: React$1.ReactNode;
+    /** Trailing action element (e.g., IconButton for overflow menu). */
+    action?: React$1.ReactNode;
+}
+interface CardMediaProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Image or media source URL. */
+    src?: string;
+    /** Alternative text for screen readers. */
+    alt?: string;
+    /**
+     * Aspect ratio for the media container.
+     * - `video`: 16/9
+     * - `square`: 1/1
+     * - `wide`: 21/9
+     * - `auto`: natural dimensions
+     * @default "video"
+     */
+    aspectRatio?: "video" | "square" | "wide" | "auto" | string;
+    /**
+     * Custom element or component override (e.g. `img`, `video`, `div`, Next.js `Image`).
+     * @default "div" (or "img" when src is provided without children)
+     */
+    component?: React$1.ElementType;
+}
+interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes for custom padding or layout. */
+    className?: string;
+}
+interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Alignment of actions within the footer.
+     * @default "end"
+     */
+    align?: "start" | "center" | "end" | "between";
+}
+
+declare const cardVariants: (props?: ({
+    variant?: "outlined" | "elevated" | "filled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Card: React$1.NamedExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * @file card-sub-components.tsx
+ *
+ * Sub-components for MD3 Expressive Card layout anatomy:
+ * - CardHeader: Avatar / Icon + Title + Subtitle + Action slot
+ * - CardMedia: Responsive media region (image/video) with aspect ratio control
+ * - CardContent: Main body text & descriptive content area
+ * - CardFooter: Action buttons row with flexible alignment
+ *
+ * @see https://m3.material.io/components/cards/guidelines#anatomy
+ */
+
+declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardMedia: React$1.ForwardRefExoticComponent<CardMediaProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file carousel.types.ts
+ * MD3 Expressive Carousel — TypeScript prop definitions and keyline types.
+ * Spec: https://m3.material.io/components/carousel/specs
+ * Accessibility: https://m3.material.io/components/carousel/accessibility
+ * Jetpack Compose Reference: docs/m3/carousel/HorizontalMultiBrowseCarousel.md
+ */
+
+/**
+ * Material Design 3 Carousel layout variants.
+ * - `multi-browse`: Displays Large, Medium, and Small items simultaneously with dynamic sizing.
+ * - `uncontained`: Fixed width items bleeding off container edge.
+ * - `uncontained-multi-aspect`: Uncontained with variable aspect ratios (9:16 to 16:9).
+ * - `hero`: Single primary Large item with Small preview item. Single-item snap.
+ * - `center-aligned-hero`: Centered Large item with Small previews on leading & trailing edges.
+ * - `full-screen`: Vertical edge-to-edge carousel with mandatory snap.
+ */
+type CarouselLayout = "multi-browse" | "uncontained" | "uncontained-multi-aspect" | "hero" | "center-aligned-hero" | "full-screen";
+type KeylineType = "small" | "medium" | "large";
+interface CarouselKeyline {
+    /** Calculated item width in px */
+    width: number;
+    /** Offset from container start in px */
+    offset: number;
+    /** Role of this keyline position */
+    type: KeylineType;
+    /** Cutoff/mask clip percentage [0..1] */
+    maskClip: number;
+}
+interface CarouselKeylineResult {
+    /** Width of large carousel items (px) */
+    largeWidth: number;
+    /** Width of medium carousel items (px) */
+    mediumWidth: number;
+    /** Width of small preview items (px, clamped 40..56) */
+    smallWidth: number;
+    /** Array of calculated keylines */
+    keylines: CarouselKeyline[];
+    /** Calculated snap positions (px scrollLeft values) */
+    snapPositions: number[];
+    /** Pre-calculated maximum accumulated shift in pixels */
+    maxAccumulatedShift: number;
+}
+interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** RSC Mode: Pass direct React Nodes (Supports Next.js <Image />) */
+    children?: ReactNode;
+    /** CSR Mode: Data source array */
+    items?: T[];
+    /** CSR Mode: Render callback for item rendering */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** Material Design 3 Layout Variant (Default: 'multi-browse') */
+    layout?: CarouselLayout;
+    /** Preferred width for large items in px */
+    preferredItemWidth?: number;
+    /** Gap between adjacent items in px (Default: 8) */
+    itemSpacing?: number;
+    /** Leading/Trailing padding in px (Default: 16) */
+    contentPadding?: number;
+    /** Top/Bottom padding in px (Default: 8) */
+    verticalPadding?: number;
+    /** Controlled state for expanded Grid view */
+    isExpanded?: boolean;
+    /** Callback fired when 'Show all' is clicked */
+    onShowAllClick?: () => void;
+    /** Label text for 'Show all' button (Default: 'Show all') */
+    showAllLabel?: string;
+    /** Disable user touch/scroll gestures (Default: true) */
+    userScrollEnabled?: boolean;
+    /** Custom accessible label for carousel container */
+    "aria-label"?: string;
+}
+/** Context passed to individual item scope renderers */
+interface CarouselItemScope {
+    index: number;
+    totalItems: number;
+    isFocused: boolean;
+    isSelected: boolean;
+}
+
+declare function Carousel<T = unknown>({ children, items, renderItem, layout, preferredItemWidth, itemSpacing, contentPadding, verticalPadding, isExpanded: controlledExpanded, onShowAllClick, showAllLabel, userScrollEnabled, className, style, ...props }: CarouselProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file carousel.tokens.ts
+ * MD3 Expressive Carousel — Design tokens ported from Material 3 Carousel Specs.
+ * All dimensional values are in px (dp equivalents for web).
+ * Colors reference CSS custom properties — no hardcoded hex.
+ * @see docs/m3/carousel/Carousel_Specs_Material_Design_3.md
+ */
+declare const CarouselTokens: {
+    /** Corner radius shape (M3 extraLarge shape: 28dp) */
+    readonly containerRadius: 28;
+    /** Small item dimension limits (dp) */
+    readonly smallItemMin: 40;
+    readonly smallItemMax: 56;
+    /** Layout defaults (dp) */
+    readonly itemSpacing: 8;
+    readonly contentPadding: 16;
+    readonly verticalPadding: 8;
+    /** Interactive state overlays */
+    readonly hoverOpacity: 0.08;
+    readonly focusOpacity: 0.1;
+    readonly pressedOpacity: 0.1;
+    readonly disabledOpacity: 0.38;
+    /** Focus indicator dimensions */
+    readonly focusThickness: 3;
+    readonly focusOffset: 2;
+    /** Touch target minimum size for accessibility (WCAG 2.1 AAA / M3) */
+    readonly minTouchTargetSize: 48;
+    /** CSS Custom Property token maps for fallback and runtime injection */
+    readonly cssVars: {
+        readonly shape: "--carousel-item-shape";
+        readonly spacing: "--carousel-item-spacing";
+        readonly contentPadding: "--carousel-content-padding";
+        readonly verticalPadding: "--carousel-vertical-padding";
+        readonly smallMin: "--carousel-small-item-min";
+        readonly smallMax: "--carousel-small-item-max";
+        readonly hoverOpacity: "--carousel-hover-opacity";
+        readonly focusThickness: "--carousel-focus-thickness";
+        readonly focusOffset: "--carousel-focus-offset";
+        readonly pressedOpacity: "--carousel-pressed-opacity";
+        readonly disabledOpacity: "--carousel-disabled-opacity";
+    };
+};
+
+interface CarouselGridProps<T = unknown> extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+    items?: T[];
+    renderItem?: (item: T, index: number) => React$1.ReactNode;
+    preferredItemWidth?: number;
+}
+declare function CarouselGrid<T = unknown>({ children, items, renderItem, preferredItemWidth, className, style, ...props }: CarouselGridProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file carousel-item.tsx
+ * Single Carousel slide wrapper supporting ARIA roles, dynamic clip-path masks,
+ * inner parallax content translation, and MD3 touch ripples.
+ *
+ * @see docs/m3/carousel/Carousel_Specs_Material_Design_3.md
+ * @see docs/m3/carousel/Carousel_Accessibility_Material_Design_3.md
+ */
+
+interface CarouselItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    index: number;
+    totalItems: number;
+    layout?: CarouselLayout;
+    width?: number;
+    minContentWidth?: number;
+    maskClipPercent?: number;
+    parallaxOffset?: number;
+    isFocused?: boolean;
+    isScrolling?: boolean;
+    disabled?: boolean;
+    children: React$1.ReactNode;
+}
+declare const CarouselItem: React$1.ForwardRefExoticComponent<CarouselItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface CarouselScrollClientProps<T = unknown> extends CarouselProps<T> {
+    totalItemsCount: number;
+}
+declare function CarouselScrollClient<T = unknown>({ children, items, renderItem, layout, preferredItemWidth, itemSpacing, contentPadding, verticalPadding, userScrollEnabled, totalItemsCount, className, style, ...props }: CarouselScrollClientProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file useCarouselA11y.ts
+ * Custom hook providing WCAG 2.1 AA compliant keyboard navigation and ARIA attribute mapping.
+ *
+ * Navigation rules per Material Design 3 Specs:
+ * - Tab: Initial focus on first item (index 0).
+ * - ArrowLeft / ArrowRight: Moves focus to previous or next item and scrolls it into view.
+ * - ArrowUp / ArrowDown: Exits carousel navigation to move focus to adjacent page elements.
+ * - Space / Enter: Activates the currently focused carousel item.
+ *
+ * @see docs/m3/carousel/Carousel_Accessibility_Material_Design_3.md
+ */
+interface UseCarouselA11yOptions {
+    totalItems: number;
+    onItemSelect?: (index: number) => void;
+    onExitNavigation?: () => void;
+    scrollToIndex?: (index: number) => void;
+}
+declare function useCarouselA11y({ totalItems, onItemSelect, onExitNavigation, scrollToIndex, }: UseCarouselA11yOptions): {
+    focusedIndex: number;
+    setFocusedIndex: React$1.Dispatch<React$1.SetStateAction<number>>;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    getItemA11yProps: (index: number, customLabel?: string) => {
+        role: "group";
+        "aria-roledescription": string;
+        "aria-label": string;
+        tabIndex: number;
+        onFocus: () => void;
+    };
+};
+
+/**
+ * @file useCarouselKeylines.ts
+ * Custom hook calculating M3 Carousel keyline matrices, item widths,
+ * snap positions, dynamic clip-path mask percentages, and parallax offsets.
+ *
+ * Specification: Material Design 3 Carousel Specs
+ * @see docs/m3/carousel/Carousel_Specs_Material_Design_3.md
+ */
+
+interface UseCarouselKeylinesOptions {
+    containerWidth: number;
+    preferredItemWidth?: number;
+    layout?: CarouselLayout;
+    itemSpacing?: number;
+    contentPadding?: number;
+    totalItems: number;
+    scrollX?: number;
+}
+declare function useCarouselKeylines({ containerWidth, preferredItemWidth, layout, itemSpacing, contentPadding, totalItems, scrollX: _scrollX, }: UseCarouselKeylinesOptions): CarouselKeylineResult & {
+    getItemMaskClip: (index: number) => number;
+    getItemParallaxOffset: (index: number) => number;
+    getItemWidth: (index: number) => number;
+};
 
 interface CodeBlockProps {
     /** Raw code string to display and copy. */
@@ -87,7 +535,7 @@ declare function CodeBlock({ code, language, className, html, }: CodeBlockProps)
  * @see https://m3.material.io/components/divider/overview
  */
 
-type SafeHTMLDivAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+type SafeHTMLDivAttrs = Omit<React$1.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
 interface DividerProps extends SafeHTMLDivAttrs {
     /**
      * Visual variant controlling indentation.
@@ -216,7 +664,7 @@ declare function buildWavePath(startX: number, endX: number, amplitude?: number,
  *
  * @see https://m3.material.io/components/divider/overview
  */
-declare const Divider: React.NamedExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+declare const Divider: React$1.NamedExoticComponent<DividerProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type ListSelectionMode = "none" | "single-action" | "multi-action" | "single-select" | "multi-select";
 type ListStyle = "standard" | "segmented";
@@ -224,7 +672,7 @@ type ListVariant = "baseline" | "expressive";
 type ListItemPosition = "solo" | "leading" | "middle" | "trailing";
 type ListItemLeadingType = "none" | "icon" | "avatar" | "image" | "video" | "checkbox" | "radio" | "custom";
 type ListItemTrailingType = "none" | "icon" | "icon-button" | "text" | "checkbox" | "radio" | "switch" | "custom";
-interface ListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "onChange"> {
+interface ListProps extends Omit<React$1.HTMLAttributes<HTMLUListElement>, "onChange"> {
     /** List variant, supports 'baseline' and 'expressive'. Default: 'baseline' */
     variant?: ListVariant;
     /** Display style, supports 'standard' (no gap) and 'segmented' (2px gap). Default: 'standard' */
@@ -247,20 +695,20 @@ interface ListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "onChan
     outerRadius?: number;
     /** Custom inner corner radius (for adjacent list items). Default per MD3 Expressive spec is 4px */
     innerRadius?: number;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-type SafeHTMLLIAttrs = Omit<React.HTMLAttributes<HTMLLIElement>, "onClick" | "color" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onTransitionEnd">;
+type SafeHTMLLIAttrs = Omit<React$1.HTMLAttributes<HTMLLIElement>, "onClick" | "color" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onTransitionEnd">;
 interface ListItemProps extends SafeHTMLLIAttrs {
     /** Unique identifier value for the ListItem */
     value: string;
     /** Main headline title of the item */
-    headline: React.ReactNode;
+    headline: React$1.ReactNode;
     /** Supporting text displayed below the headline */
-    supportingText?: React.ReactNode;
+    supportingText?: React$1.ReactNode;
     /** Max lines for supporting text (1 or 2) to calculate height. Default: 1 */
     supportingTextLines?: 1 | 2;
     /** Small overline text displayed above the main headline */
-    overline?: React.ReactNode;
+    overline?: React$1.ReactNode;
     /** Type of element rendered at the start of the list item */
     leadingType?: ListItemLeadingType;
     /** Source URL for image or video when leadingType is 'image' or 'video' */
@@ -268,13 +716,13 @@ interface ListItemProps extends SafeHTMLLIAttrs {
     /** Alt text for image */
     leadingAlt?: string;
     /** Custom leading content (used when leadingType = 'custom') */
-    leadingContent?: React.ReactNode;
+    leadingContent?: React$1.ReactNode;
     /** Type of element rendered at the end of the list item */
     trailingType?: ListItemTrailingType;
     /** Text displayed at the end of the list item */
     trailingText?: string;
     /** Custom content or callback for trailing element */
-    trailingContent?: React.ReactNode;
+    trailingContent?: React$1.ReactNode;
     /** Disable interaction */
     disabled?: boolean;
     /** Selected state (for single-select / multi-select) */
@@ -282,7 +730,7 @@ interface ListItemProps extends SafeHTMLLIAttrs {
     /** Target URL if rendering ListItem as an anchor <a> tag */
     href?: string;
     /** Callback when clicking on ListItem */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLElement>) => void;
     /** Force interactive mode (hover/focus overlay, ripple) even without onClick/href */
     interactive?: boolean;
     /** Enable drag handle icon drag restriction */
@@ -292,14 +740,14 @@ interface ListItemProps extends SafeHTMLLIAttrs {
     /** Internal item index passed automatically by parent List */
     _listIndex?: number;
 }
-interface ListDividerProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListDividerProps extends React$1.HTMLAttributes<HTMLLIElement> {
     /** Indent start of divider */
     inset?: boolean;
     /** Indent style: 'icon' (56px indent), 'avatar' (72px indent), or 'custom' */
     insetType?: "icon" | "avatar" | "custom";
 }
 
-declare const List: React.NamedExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+declare const List: React$1.NamedExoticComponent<ListProps & React$1.RefAttributes<HTMLUListElement>>;
 
 interface ListContextValue {
     selectionMode: ListSelectionMode;
@@ -312,12 +760,12 @@ interface ListContextValue {
     outerRadius: number;
     innerRadius: number;
 }
-declare const ListContext: React.Context<ListContextValue | null>;
+declare const ListContext: React$1.Context<ListContextValue | null>;
 declare const useListContext: () => ListContextValue | null;
 
-declare const ListDivider: React.NamedExoticComponent<ListDividerProps & React.RefAttributes<HTMLLIElement>>;
+declare const ListDivider: React$1.NamedExoticComponent<ListDividerProps & React$1.RefAttributes<HTMLLIElement>>;
 
-declare const ListItem: React.NamedExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const ListItem: React$1.NamedExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;
 
 declare const LIST_TOKENS: {
     readonly oneLineHeight: 56;
@@ -381,11 +829,11 @@ declare function getExpressiveShape(state: "resting" | "hovered" | "focused" | "
 declare const typographyVariants: (props?: ({
     variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+interface TextProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     /**
      * Custom HTML element tag override.
      */
-    as?: React.ElementType;
+    as?: React$1.ElementType;
     /**
      * Text color override (CSS color value or Tailwind color class).
      */
@@ -395,7 +843,7 @@ interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<type
      */
     weight?: string | number;
 }
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
  * A single entry in the Table of Contents.
@@ -624,4 +1072,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-export { Card, type CardProps, CodeBlock, type CodeBlockProps, Divider, type DividerProps, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, ScrollAreaProps, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, typographyVariants, useListContext };
+export { Card, CardContent, type CardContentProps, type CardElevationConfig, type CardElevationOptions, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Carousel, CarouselGrid, CarouselItem, type CarouselItemScope, type CarouselKeyline, type CarouselKeylineResult, type CarouselLayout, type CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, type CodeBlockProps, Divider, type DividerProps, type ElevationLevel, type KeylineType, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, type MotionDivProps, SHADOW, ScrollAreaProps, type ShadowLevel, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext };