import * as class_variance_authority_types from 'class-variance-authority/types'; import * as React$1 from 'react'; import React__default, { HTMLAttributes, ReactNode } from 'react'; import { HTMLMotionProps } from 'motion/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'; /** * @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, "children" | "color">; 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 or is selectable. * @default false */ interactive?: boolean; /** * 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 `` element. Automatically enables interactive mode. * Prefer `href` over `onClick` for navigation. */ href?: string; /** Target for `` element (effective only when `href` is provided). */ target?: React$1.AnchorHTMLAttributes["target"]; /** rel for `` element (automatically adds `noreferrer` when `target="_blank"`). */ rel?: string; /** 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 `` or custom anchor tags. * @default false */ asChild?: boolean; } interface CardHeaderProps extends Omit, "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 { /** 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 { /** Additional CSS classes for custom padding or layout. */ className?: string; } interface CardFooterProps extends React$1.HTMLAttributes { /** * 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 & React$1.RefAttributes>; /** * @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>; declare const CardMedia: React$1.ForwardRefExoticComponent>; declare const CardContent: React$1.ForwardRefExoticComponent>; declare const CardFooter: React$1.ForwardRefExoticComponent>; /** * @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 extends Omit, "children"> { /** RSC Mode: Pass direct React Nodes (Supports Next.js ) */ 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({ children, items, renderItem, layout, preferredItemWidth, itemSpacing, contentPadding, verticalPadding, isExpanded: controlledExpanded, onShowAllClick, showAllLabel, userScrollEnabled, className, style, ...props }: CarouselProps): 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 extends React$1.HTMLAttributes { children?: React$1.ReactNode; items?: T[]; renderItem?: (item: T, index: number) => React$1.ReactNode; preferredItemWidth?: number; } declare function CarouselGrid({ children, items, renderItem, preferredItemWidth, className, style, ...props }: CarouselGridProps): 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 { 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>; interface CarouselScrollClientProps extends CarouselProps { totalItemsCount: number; } declare function CarouselScrollClient({ children, items, renderItem, layout, preferredItemWidth, itemSpacing, contentPadding, verticalPadding, userScrollEnabled, totalItemsCount, className, style, ...props }: CarouselScrollClientProps): 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>; handleKeyDown: (event: React.KeyboardEvent) => 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. */ code: string; /** Language label in the header (presentational only). @default "React" */ language?: string; /** Additional CSS classes for the outer wrapper. */ className?: string; /** * Pre-highlighted HTML from Shiki SSR. * Use `codeToHtml` with `themes: { light, dark }` for dual-theme support. */ html?: string; } declare function CodeBlock({ code, language, className, html, }: CodeBlockProps): react_jsx_runtime.JSX.Element; /** * @file divider.tsx * * MD3 Expressive Divider component. * * - `Divider` → A thin line that groups content in lists and layouts. * * @remarks * Token references (Kotlin source — DividerTokens.kt v0_117): * Color = ColorSchemeKeyTokens.OutlineVariant → bg-m3-outline-variant / text-m3-outline-variant * Thickness = 1.0.dp → h-px (flat horizontal) | w-px (flat vertical) | strokeWidth={1} (wavy SVG) * * Variants: * - "full-bleed" → spans full width, no indent * - "inset" → leading indent (16dp standard / 72dp after-icon via insetStart) * - "middle-inset" → 16dp indent both sides * - "subheader" → same as full-bleed (label provided externally) * * Shapes: * - "flat" → straight 1px line rendered as (default) * - "wavy" → sinusoidal SVG wave via + buildWavePath helper (horizontal only) * * Architecture: * - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes only * - Animation: Framer Motion LazyMotion/domMax, scaleX/scaleY spring entrance * - Wavy: SVG path generated by pure-JS `buildWavePath()` (cubic Bézier sine approx) * Uses ResizeObserver (via useContainerWidth) to measure container width so * the path has precise bounds and leading/trailing ends are properly rounded. * - A11y: role="separator", aria-orientation, aria-hidden when decorative * * @see https://m3.material.io/components/divider/overview */ type SafeHTMLDivAttrs = Omit, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">; interface DividerProps extends SafeHTMLDivAttrs { /** * Visual variant controlling indentation. * - "full-bleed" → no indent, spans full container width/height (default) * - "inset" → leading indent only (use `insetStart` to control amount) * - "middle-inset" → 16px indent on both sides * - "subheader" → alias for full-bleed, used before section labels * @default "full-bleed" */ variant?: "full-bleed" | "inset" | "middle-inset" | "subheader"; /** * Orientation of the divider line. * - "horizontal" → renders as `h-px w-full` bar (default) * - "vertical" → renders as `w-px h-full` column * Note: `shape="wavy"` is not supported with orientation="vertical". * @default "horizontal" */ orientation?: "horizontal" | "vertical"; /** * Shape of the divider line. * - "flat" → straight 1px line rendered as `
` (default) * - "wavy" → sinusoidal SVG wave (horizontal orientation only) * * When `shape="wavy"` and `orientation="vertical"`, silently falls back to * `shape="flat"` and emits a `console.warn`. * @default "flat" */ shape?: "flat" | "wavy"; /** * Leading inset size for the "inset" variant. * - "standard" → 16px (`ml-4`) * - "icon" → 72px (`ml-[72px]`) — use when list items have leading icons/avatars * Only applies when `variant="inset"`. * @default "standard" */ insetStart?: "standard" | "icon"; /** * Wavy shape visual parameters. Only applies when `shape="wavy"`. * All values are in pixels. */ waveConfig?: { /** * Peak displacement from the center line. * @default 2 */ amplitude?: number; /** * Pixels per full sine cycle. * @default 32 */ wavelength?: number; /** * Thickness of the wave stroke in pixels. * @default 1 */ strokeWidth?: number; }; /** * When true, marks the divider as decorative (`aria-hidden="true"`). * Use when the divider is purely visual with no semantic meaning. * @default false */ decorative?: boolean; /** * When true, plays an entrance animation (scaleX/scaleY from 0→1). * Automatically disabled when user prefers reduced motion. * @default true */ animate?: boolean; } /** * Generates an SVG path `d` string for a sinusoidal wave between two X bounds. * Uses cubic Bézier approximation of a sine curve for smooth rendering. * The error vs. a true sine is < 0.2%. * * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude). * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy. * * @param startX - X coordinate where the path begins (e.g. capWidth = strokeWidth/2) * @param endX - X coordinate where the path ends (e.g. containerWidth - capWidth) * @param amplitude - Peak displacement from center line (px). Default: 2 * @param wavelength - Pixels per full sine cycle. Default: 32 * @param yCenter - Y coordinate of the wave center line. Default: 4 * @returns SVG path `d` attribute string, or "" when startX >= endX * * @example * buildWavePath(0.5, 499.5, 2, 32, 4) * // → "M 0.5,4 C 11.17,... 500,4 ..." */ declare function buildWavePath(startX: number, endX: number, amplitude?: number, wavelength?: number, yCenter?: number): string; /** * MD3 Expressive Divider — a thin line that groups content in lists and layouts. * * Supports four layout variants (full-bleed, inset, middle-inset, subheader), * two orientations (horizontal, vertical), and two shape modes (flat, wavy). * * The wavy shape renders a sinusoidal SVG wave and is only supported with * `orientation="horizontal"`. * * @example * ```tsx * // Default flat full-bleed horizontal divider * * * // Inset after icon list items * * * // Vertical separator between panes * * * // Wavy expressive divider * * * // Wavy with custom wave config * * * // Decorative (no a11y semantics) * * * // No entrance animation * * * // Middle-inset wavy divider * * ``` * * @see https://m3.material.io/components/divider/overview */ declare const Divider: React$1.NamedExoticComponent>; type ListSelectionMode = "none" | "single-action" | "multi-action" | "single-select" | "multi-select"; type ListStyle = "standard" | "segmented"; 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, "onChange"> { /** List variant, supports 'baseline' and 'expressive'. Default: 'baseline' */ variant?: ListVariant; /** Display style, supports 'standard' (no gap) and 'segmented' (2px gap). Default: 'standard' */ listStyle?: ListStyle; /** Selection/interaction mode of the list. Default: 'none' */ selectionMode?: ListSelectionMode; /** Currently selected value (for controlled mode). String for single, string[] for multi */ value?: string | string[]; /** Default initial selected value (for uncontrolled mode) */ defaultValue?: string | string[]; /** Callback fired when selection changes */ onChange?: (value: string | string[]) => void; /** Enable drag-and-drop reordering */ reorderable?: boolean; /** Data items array used with reorderable mode */ items?: unknown[]; /** Callback returning reordered items */ onReorder?: (newItems: unknown[]) => void; /** Custom outer corner radius (for leading/trailing list items). Default per MD3 Expressive spec is 16px */ outerRadius?: number; /** Custom inner corner radius (for adjacent list items). Default per MD3 Expressive spec is 4px */ innerRadius?: number; children?: React$1.ReactNode; } type SafeHTMLLIAttrs = Omit, "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$1.ReactNode; /** Supporting text displayed below the headline */ 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$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' */ leadingSrc?: string; /** Alt text for image */ leadingAlt?: string; /** Custom leading content (used when leadingType = 'custom') */ 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$1.ReactNode; /** Disable interaction */ disabled?: boolean; /** Selected state (for single-select / multi-select) */ selected?: boolean; /** Target URL if rendering ListItem as an anchor tag */ href?: string; /** Callback when clicking on ListItem */ onClick?: (event: React$1.MouseEvent) => void; /** Force interactive mode (hover/focus overlay, ripple) even without onClick/href */ interactive?: boolean; /** Enable drag handle icon drag restriction */ dragHandle?: boolean; /** Override position of item in list (solo, leading, middle, trailing) */ position?: ListItemPosition; /** Internal item index passed automatically by parent List */ _listIndex?: number; } interface ListDividerProps extends React$1.HTMLAttributes { /** Indent start of divider */ inset?: boolean; /** Indent style: 'icon' (56px indent), 'avatar' (72px indent), or 'custom' */ insetType?: "icon" | "avatar" | "custom"; } declare const List: React$1.NamedExoticComponent>; interface ListContextValue { selectionMode: ListSelectionMode; variant: ListVariant; listStyle: ListStyle; selectedValues: Set; onItemChange: (value: string, selected: boolean) => void; reorderable: boolean; itemCount: number; outerRadius: number; innerRadius: number; } declare const ListContext: React$1.Context; declare const useListContext: () => ListContextValue | null; declare const ListDivider: React$1.NamedExoticComponent>; declare const ListItem: React$1.NamedExoticComponent>; declare const LIST_TOKENS: { readonly oneLineHeight: 56; readonly twoLineHeight: 72; readonly threeLineHeight: 88; readonly leadingSpace: 16; readonly trailingSpace: 16; readonly topSpace: 8; readonly bottomSpace: 8; readonly betweenSpace: 16; readonly segmentedGap: 2; readonly shape: { readonly containerShape: 16; readonly itemOuterRadius: 16; readonly itemInnerRadius: 4; readonly resting: 4; readonly hovered: 12; readonly focused: 16; readonly pressed: 16; readonly selected: 16; readonly dragged: 16; readonly disabled: 4; }; readonly stateLayer: { readonly hover: 0.08; readonly focus: 0.1; readonly pressed: 0.1; readonly dragged: 0.16; readonly disabled: 0.1; }; readonly leadingIconSize: 24; readonly leadingIconExpressiveSize: 20; readonly leadingAvatarSize: 40; readonly leadingImageWidth: 56; readonly leadingImageHeight: 56; readonly leadingVideoSmallWidth: 100; readonly leadingVideoSmallHeight: 56; readonly leadingVideoLargeWidth: 114; readonly leadingVideoLargeHeight: 64; readonly trailingIconSize: 24; readonly trailingIconExpressiveSize: 20; readonly focusIndicatorThickness: 3; readonly focusIndicatorOffset: -3; readonly cssVars: { readonly containerBg: "var(--md-sys-color-surface)"; readonly selectedContainerBg: "var(--md-sys-color-secondary-container)"; readonly labelText: "var(--md-sys-color-on-surface)"; readonly selectedLabelText: "var(--md-sys-color-on-secondary-container)"; readonly supportingText: "var(--md-sys-color-on-surface-variant)"; readonly overlineText: "var(--md-sys-color-on-surface-variant)"; readonly trailingText: "var(--md-sys-color-on-surface-variant)"; readonly leadingIcon: "var(--md-sys-color-on-surface-variant)"; readonly focusIndicator: "var(--md-sys-color-secondary)"; }; }; declare function getListItemHeight(hasOverline: boolean, supportingTextLines: 0 | 1 | 2): 56 | 72 | 88; declare function shouldTopAlign(height: number): boolean; declare function getExpressiveShape(state: "resting" | "hovered" | "focused" | "pressed" | "selected" | "dragged" | "disabled"): number; 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$1.HTMLAttributes, VariantProps { /** * Custom HTML element tag override. */ as?: React$1.ElementType; /** * Text color override (CSS color value or Tailwind color class). */ color?: string; /** * Font weight override. */ weight?: string | number; } declare const Text: React$1.ForwardRefExoticComponent>; /** * A single entry in the Table of Contents. * * @example * ```ts * const items: ToCItem[] = [ * { id: "installation", label: "Installation" }, * { id: "usage", label: "Usage" }, * ]; * ``` */ interface ToCItem { /** The DOM `id` attribute of the corresponding section heading. */ id: string; /** Human-readable label shown in the ToC. */ label: string; /** * Heading level depth (1 for h2, 2 for h3, etc.). * Indents lower-level items visually. * @default 1 */ depth?: number; } /** * Props for the `TableOfContents` component. */ interface TableOfContentsProps { /** * Ordered list of section items to display. * Each item must have a matching DOM element with the same `id`. */ items: ToCItem[]; /** * Additional CSS classes applied to the root `