@bug-on/m3-expressive 1.0.0

package/dist/layout.d.ts

@@ -0,0 +1,610 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+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';
+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;
+type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
+    /** Vô hiệu hóa tương tác và giảm opacity (MD3 disabled state). */
+    disabled?: boolean;
+    /**
+     * Buộc card trở thành interactive dù không có `onClick`.
+     * Hữu ích khi card chứa các element con là interactive.
+     */
+    interactive?: boolean;
+    /**
+     * Nếu có, card render thành thẻ `<a>`. Tự động kích hoạt interactive mode.
+     * Ưu tiên dùng `href` thay vì `onClick` khi điều hướng trang.
+     */
+    href?: string;
+    /** Target cho thẻ `<a>` (chỉ có hiệu lực khi `href` được cung cấp). */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    /** rel cho thẻ `<a>` (tự động thêm `noreferrer` khi `target="_blank"`). */
+    rel?: string;
+    children?: React.ReactNode;
+}
+declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
+
+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 <m.div> (default)
+ *   - "wavy"  → sinusoidal SVG wave via <m.svg> + 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<React.HTMLAttributes<HTMLDivElement>, "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 `<div>` (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
+ * <Divider />
+ *
+ * // Inset after icon list items
+ * <Divider variant="inset" insetStart="icon" />
+ *
+ * // Vertical separator between panes
+ * <Divider orientation="vertical" />
+ *
+ * // Wavy expressive divider
+ * <Divider shape="wavy" />
+ *
+ * // Wavy with custom wave config
+ * <Divider shape="wavy" waveConfig={{ amplitude: 5, wavelength: 24 }} />
+ *
+ * // Decorative (no a11y semantics)
+ * <Divider decorative />
+ *
+ * // No entrance animation
+ * <Divider animate={false} />
+ *
+ * // Middle-inset wavy divider
+ * <Divider variant="middle-inset" shape="wavy" />
+ * ```
+ *
+ * @see https://m3.material.io/components/divider/overview
+ */
+declare const Divider: React.NamedExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+
+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<React.HTMLAttributes<HTMLUListElement>, "onChange"> {
+    /** Variant của danh sách, hỗ trợ 'baseline' và 'expressive'. Default: 'baseline' */
+    variant?: ListVariant;
+    /** Kiểu hiển thị, hỗ trợ 'standard' (không khoảng cách) và 'segmented' (có gap 2px). Default: 'standard' */
+    listStyle?: ListStyle;
+    /** Chế độ chọn/tương tác của danh sách. Default: 'none' */
+    selectionMode?: ListSelectionMode;
+    /** Giá trị đang được chọn (dành cho controlled). String cho single, string[] cho multi */
+    value?: string | string[];
+    /** Giá trị được chọn mặc định ban đầu (dành cho uncontrolled) */
+    defaultValue?: string | string[];
+    /** Callback khi giá trị thay đổi */
+    onChange?: (value: string | string[]) => void;
+    /** Bật chế độ kéo thả sắp xếp danh sách */
+    reorderable?: boolean;
+    /** Mảng chứa dữ liệu các item khi sử dụng reorderable */
+    items?: unknown[];
+    /** Callback trả về danh sách sau khi đã được sắp xếp lại */
+    onReorder?: (newItems: unknown[]) => void;
+    /** Custom radius góc ngoài (cho leading/trailing list items). Default từ spec MD3 Expressive là 16px */
+    outerRadius?: number;
+    /** Custom radius góc trong (cho các list items kề nhau). Default từ spec MD3 Expressive là 4px */
+    innerRadius?: number;
+    children?: React.ReactNode;
+}
+type SafeHTMLLIAttrs = Omit<React.HTMLAttributes<HTMLLIElement>, "onClick" | "color" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onTransitionEnd">;
+interface ListItemProps extends SafeHTMLLIAttrs {
+    /** Giá trị định danh duy nhất cho ListItem */
+    value: string;
+    /** Tiêu đề chính của item */
+    headline: React.ReactNode;
+    /** Văn bản hỗ trợ bên dưới tiêu đề */
+    supportingText?: React.ReactNode;
+    /** Số dòng hiển thị tối đa của supportingText (1 hoặc 2) để tính chiều cao tương ứng. Default: 1 */
+    supportingTextLines?: 1 | 2;
+    /** Văn bản nhỏ hiển thị phía trên tiêu đề chính */
+    overline?: React.ReactNode;
+    /** Loại thành phần hiển thị ở phần đầu dòng */
+    leadingType?: ListItemLeadingType;
+    /** Đường dẫn hình ảnh/video nếu leadingType là 'image' hoặc 'video' */
+    leadingSrc?: string;
+    /** Alt text cho hình ảnh */
+    leadingAlt?: string;
+    /** Custom content cho phần leading (sử dụng khi leadingType = 'custom') */
+    leadingContent?: React.ReactNode;
+    /** Loại thành phần hiển thị ở phần cuối dòng */
+    trailingType?: ListItemTrailingType;
+    /** Văn bản hiển thị ở phần cuối dòng */
+    trailingText?: string;
+    /** Custom content hoặc callback cho trailing element */
+    trailingContent?: React.ReactNode;
+    /** Vô hiệu hóa tương tác */
+    disabled?: boolean;
+    /** Trạng thái được chọn (áp dụng cho single-select / multi-select) */
+    selected?: boolean;
+    /** Địa chỉ liên kết nếu render ListItem dưới dạng thẻ Anchor <a> */
+    href?: string;
+    /** Callback khi click vào ListItem */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Buộc item ở chế độ interactive (có hover/focus overlay, ripple) kể cả khi không truyền onClick/href */
+    interactive?: boolean;
+    /** Bật chế độ chỉ kéo qua handle icon thay vì kéo toàn bộ item */
+    dragHandle?: boolean;
+    /** Override vị trí của item trong danh sách (solo, leading, middle, trailing) */
+    position?: ListItemPosition;
+    /** Index nội bộ của item, được tự động truyền bởi List component */
+    _listIndex?: number;
+}
+interface ListDividerProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** Thụt lề đầu dòng của divider */
+    inset?: boolean;
+    /** Kiểu thụt lề: 'icon' (thụt lề 56px), 'avatar' (thụt lề 72px) hoặc 'custom' */
+    insetType?: "icon" | "avatar" | "custom";
+}
+
+declare const List: React.NamedExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+
+interface ListContextValue {
+    selectionMode: ListSelectionMode;
+    variant: ListVariant;
+    listStyle: ListStyle;
+    selectedValues: Set<string>;
+    onItemChange: (value: string, selected: boolean) => void;
+    reorderable: boolean;
+    itemCount: number;
+    outerRadius: number;
+    innerRadius: number;
+}
+declare const ListContext: React.Context<ListContextValue | null>;
+declare const useListContext: () => ListContextValue | null;
+
+declare const ListDivider: React.NamedExoticComponent<ListDividerProps & React.RefAttributes<HTMLLIElement>>;
+
+declare const ListItem: React.NamedExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+
+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.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React.ElementType;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * 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;
+}
+/**
+ * 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 `<nav>` element.
+     * Use this to control positioning (e.g. sticky, fixed) from the consumer.
+     */
+    className?: string;
+    /**
+     * Configuration for the internal ScrollArea.
+     * @default { type: "hover" }
+     */
+    scrollAreaProps?: Omit<ScrollAreaProps, "children">;
+}
+/**
+ * Table of Contents sidebar component.
+ *
+ * Renders a `<nav>` sidebar with links to page sections. Tracks the active
+ * section using `IntersectionObserver` and applies active styles to the
+ * current link.
+ *
+ * @remarks
+ * - Visible only on `xl` screens (`hidden xl:block` — sticky sidebar).
+ * - The `aria-current` attribute is set on the active link for screen readers.
+ * - Click scroll is smooth: `scrollIntoView({ behavior: "smooth" })`.
+ *
+ * @example
+ * ```tsx
+ * const toc: ToCItem[] = [
+ *   { id: "overview", label: "Overview" },
+ *   { id: "props", label: "Props" },
+ *   { id: "examples", label: "Examples" },
+ * ];
+ *
+ * <TableOfContents items={toc} />
+ * ```
+ *
+ * @see https://m3.material.io/foundations/content-design/navigation
+ */
+declare function TableOfContents({ items, className, scrollAreaProps, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TypeScaleTokens - MD3 Expressive Typography Physical Tokens
+ *
+ * Port of androidx.compose.material3.tokens.TypeScaleTokens
+ * Adapted for Web with Google Sans Flex Variable Font (ROND axis = 100).
+ *
+ * All font sizes use rem units based on 14px root (project default).
+ * Reference: Material Design 3 Type Scale Tokens spec.
+ */
+declare const TypeScaleTokens: {
+    readonly DisplayLargeFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplayLargeWeight: 400;
+    readonly DisplayLargeSize: "3.571rem";
+    readonly DisplayLargeLineHeight: "4rem";
+    readonly DisplayLargeTracking: "-0.25px";
+    readonly DisplayMediumFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplayMediumWeight: 400;
+    readonly DisplayMediumSize: "2.857rem";
+    readonly DisplayMediumLineHeight: "3.286rem";
+    readonly DisplayMediumTracking: "0px";
+    readonly DisplaySmallFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplaySmallWeight: 400;
+    readonly DisplaySmallSize: "2.571rem";
+    readonly DisplaySmallLineHeight: "3.143rem";
+    readonly DisplaySmallTracking: "0px";
+    readonly HeadlineLargeFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineLargeWeight: 400;
+    readonly HeadlineLargeSize: "2.286rem";
+    readonly HeadlineLargeLineHeight: "2.857rem";
+    readonly HeadlineLargeTracking: "0px";
+    readonly HeadlineMediumFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineMediumWeight: 400;
+    readonly HeadlineMediumSize: "2rem";
+    readonly HeadlineMediumLineHeight: "2.571rem";
+    readonly HeadlineMediumTracking: "0px";
+    readonly HeadlineSmallFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineSmallWeight: 400;
+    readonly HeadlineSmallSize: "1.714rem";
+    readonly HeadlineSmallLineHeight: "2.286rem";
+    readonly HeadlineSmallTracking: "0px";
+    readonly TitleLargeFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleLargeWeight: 400;
+    readonly TitleLargeSize: "1.571rem";
+    readonly TitleLargeLineHeight: "2rem";
+    readonly TitleLargeTracking: "0px";
+    readonly TitleMediumFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleMediumWeight: 500;
+    readonly TitleMediumSize: "1.143rem";
+    readonly TitleMediumLineHeight: "1.714rem";
+    readonly TitleMediumTracking: "0.15px";
+    readonly TitleSmallFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleSmallWeight: 500;
+    readonly TitleSmallSize: "1rem";
+    readonly TitleSmallLineHeight: "1.429rem";
+    readonly TitleSmallTracking: "0.1px";
+    readonly BodyLargeFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodyLargeWeight: 400;
+    readonly BodyLargeSize: "1.143rem";
+    readonly BodyLargeLineHeight: "1.714rem";
+    readonly BodyLargeTracking: "0.5px";
+    readonly BodyMediumFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodyMediumWeight: 400;
+    readonly BodyMediumSize: "1rem";
+    readonly BodyMediumLineHeight: "1.429rem";
+    readonly BodyMediumTracking: "0.25px";
+    readonly BodySmallFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodySmallWeight: 400;
+    readonly BodySmallSize: "0.857rem";
+    readonly BodySmallLineHeight: "1.143rem";
+    readonly BodySmallTracking: "0.4px";
+    readonly LabelLargeFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelLargeWeight: 500;
+    readonly LabelLargeSize: "1rem";
+    readonly LabelLargeLineHeight: "1.429rem";
+    readonly LabelLargeTracking: "0.1px";
+    readonly LabelMediumFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelMediumWeight: 500;
+    readonly LabelMediumSize: "0.857rem";
+    readonly LabelMediumLineHeight: "1.143rem";
+    readonly LabelMediumTracking: "0.5px";
+    readonly LabelSmallFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelSmallWeight: 500;
+    readonly LabelSmallSize: "0.786rem";
+    readonly LabelSmallLineHeight: "1.143rem";
+    readonly LabelSmallTracking: "0.5px";
+    readonly DisplayLargeEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplayLargeEmphasizedWeight: 800;
+    readonly DisplayLargeEmphasizedSize: "3.571rem";
+    readonly DisplayLargeEmphasizedLineHeight: "4rem";
+    readonly DisplayLargeEmphasizedTracking: "-0.25px";
+    readonly DisplayMediumEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplayMediumEmphasizedWeight: 800;
+    readonly DisplayMediumEmphasizedSize: "2.857rem";
+    readonly DisplayMediumEmphasizedLineHeight: "3.286rem";
+    readonly DisplayMediumEmphasizedTracking: "0px";
+    readonly DisplaySmallEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly DisplaySmallEmphasizedWeight: 800;
+    readonly DisplaySmallEmphasizedSize: "2.571rem";
+    readonly DisplaySmallEmphasizedLineHeight: "3.143rem";
+    readonly DisplaySmallEmphasizedTracking: "0px";
+    readonly HeadlineLargeEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineLargeEmphasizedWeight: 800;
+    readonly HeadlineLargeEmphasizedSize: "2.286rem";
+    readonly HeadlineLargeEmphasizedLineHeight: "2.857rem";
+    readonly HeadlineLargeEmphasizedTracking: "0px";
+    readonly HeadlineMediumEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineMediumEmphasizedWeight: 800;
+    readonly HeadlineMediumEmphasizedSize: "2rem";
+    readonly HeadlineMediumEmphasizedLineHeight: "2.571rem";
+    readonly HeadlineMediumEmphasizedTracking: "0px";
+    readonly HeadlineSmallEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly HeadlineSmallEmphasizedWeight: 800;
+    readonly HeadlineSmallEmphasizedSize: "1.714rem";
+    readonly HeadlineSmallEmphasizedLineHeight: "2.286rem";
+    readonly HeadlineSmallEmphasizedTracking: "0px";
+    readonly TitleLargeEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleLargeEmphasizedWeight: 700;
+    readonly TitleLargeEmphasizedSize: "1.571rem";
+    readonly TitleLargeEmphasizedLineHeight: "2rem";
+    readonly TitleLargeEmphasizedTracking: "0px";
+    readonly TitleMediumEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleMediumEmphasizedWeight: 700;
+    readonly TitleMediumEmphasizedSize: "1.143rem";
+    readonly TitleMediumEmphasizedLineHeight: "1.714rem";
+    readonly TitleMediumEmphasizedTracking: "0.15px";
+    readonly TitleSmallEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly TitleSmallEmphasizedWeight: 700;
+    readonly TitleSmallEmphasizedSize: "1rem";
+    readonly TitleSmallEmphasizedLineHeight: "1.429rem";
+    readonly TitleSmallEmphasizedTracking: "0.1px";
+    readonly BodyLargeEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodyLargeEmphasizedWeight: 700;
+    readonly BodyLargeEmphasizedSize: "1.143rem";
+    readonly BodyLargeEmphasizedLineHeight: "1.714rem";
+    readonly BodyLargeEmphasizedTracking: "0.5px";
+    readonly BodyMediumEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodyMediumEmphasizedWeight: 700;
+    readonly BodyMediumEmphasizedSize: "1rem";
+    readonly BodyMediumEmphasizedLineHeight: "1.429rem";
+    readonly BodyMediumEmphasizedTracking: "0.25px";
+    readonly BodySmallEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly BodySmallEmphasizedWeight: 700;
+    readonly BodySmallEmphasizedSize: "0.857rem";
+    readonly BodySmallEmphasizedLineHeight: "1.143rem";
+    readonly BodySmallEmphasizedTracking: "0.4px";
+    readonly LabelLargeEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelLargeEmphasizedWeight: 800;
+    readonly LabelLargeEmphasizedSize: "1rem";
+    readonly LabelLargeEmphasizedLineHeight: "1.429rem";
+    readonly LabelLargeEmphasizedTracking: "0.1px";
+    readonly LabelMediumEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelMediumEmphasizedWeight: 800;
+    readonly LabelMediumEmphasizedSize: "0.857rem";
+    readonly LabelMediumEmphasizedLineHeight: "1.143rem";
+    readonly LabelMediumEmphasizedTracking: "0.5px";
+    readonly LabelSmallEmphasizedFont: "'Google Sans Flex', system-ui, sans-serif";
+    readonly LabelSmallEmphasizedWeight: 800;
+    readonly LabelSmallEmphasizedSize: "0.786rem";
+    readonly LabelSmallEmphasizedLineHeight: "1.143rem";
+    readonly LabelSmallEmphasizedTracking: "0.5px";
+};
+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 };