@bug-on/md3-react 0.1.0

package/dist/ui/text-field/text-field.types.d.ts

@@ -0,0 +1,126 @@
+/**
+ * @file text-field.types.ts
+ * TypeScript interfaces and types for TextField MD3 Expressive component.
+ * @see https://m3.material.io/components/text-fields/overview
+ */
+import type * as React from "react";
+export type TextFieldVariant = "filled" | "outlined";
+export type TextFieldInputType = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "textarea";
+export type TextFieldTrailingIconMode = "none" | "clear" | "password-toggle" | "custom";
+/**
+ * Imperative handle exposed via forwardRef.
+ * Allows parent components to programmatically control the text field.
+ */
+export interface TextFieldHandle {
+    /** Focuses the input element. */
+    focus(): void;
+    /** Blurs the input element. */
+    blur(): void;
+    /** Selects all text in the input. */
+    select(): void;
+    /** Clears the current value and fires onChange with empty string. */
+    clear(): void;
+    /** Sets a custom validation message on the native input. */
+    setCustomValidity(message: string): void;
+    /** Returns true if the input is valid. Does not show validation UI. */
+    checkValidity(): boolean;
+    /** Returns true if the input is valid. Shows validation UI if invalid. */
+    reportValidity(): boolean;
+    /** Returns the current value string. */
+    getValue(): string;
+    /** Returns the underlying input or textarea element. */
+    getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
+}
+export interface TextFieldProps {
+    /** Filled or outlined variant. @default 'filled' */
+    variant?: TextFieldVariant;
+    /** Floating label text. Also used as accessible name when no aria-label is set. */
+    label?: string;
+    /** Controlled value. Use with onChange for controlled mode. */
+    value?: string;
+    /** Initial value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Fires when value changes. Receives new value string and native event. */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Input type. Use 'textarea' for multi-line input. @default 'text' */
+    type?: TextFieldInputType;
+    /** Placeholder text — shown only when no label OR label is floated. */
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    autoComplete?: string;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    /** Number of rows for textarea type. @default 2 */
+    rows?: number;
+    /** Number of columns for textarea type. @default 20 */
+    cols?: number;
+    /** Whether the textarea should automatically resize to fit its content. @default false */
+    autoResize?: boolean;
+    /** Maximum number of rows when autoResize is true. */
+    maxRows?: number;
+    /** CSS direction override for input text. */
+    textDirection?: "ltr" | "rtl" | "";
+    /** Marks field as required. Shows asterisk on label. */
+    required?: boolean;
+    /** Hides the asterisk even when required=true. */
+    noAsterisk?: boolean;
+    /** Manual error override — forces error visual state. */
+    error?: boolean;
+    /** Error message shown below the field (replaces supportingText). */
+    errorText?: string;
+    minLength?: number;
+    /** When set, enables character counter display. */
+    maxLength?: number;
+    min?: string;
+    max?: string;
+    step?: string;
+    pattern?: string;
+    /** For type="email" — allows multiple email addresses. */
+    multiple?: boolean;
+    /** Helper text shown below the field. Replaced by errorText when in error state. */
+    supportingText?: string;
+    /** Text displayed before the input value (e.g., "$"). */
+    prefixText?: string;
+    /** Text displayed after the input value (e.g., ".00"). */
+    suffixText?: string;
+    /** Icon node for the leading slot. Should be 24×24px. */
+    leadingIcon?: React.ReactNode;
+    /** Custom trailing icon node. Used when trailingIconMode='custom'. */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Built-in trailing icon behavior.
+     * - 'none' — no trailing icon
+     * - 'clear' — ✕ button, clears value when clicked
+     * - 'password-toggle' — eye icon, toggles password visibility
+     * - 'custom' — uses trailingIcon prop
+     * @default 'none'
+     */
+    trailingIconMode?: TextFieldTrailingIconMode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Hides spinner arrows on type="number". */
+    noSpinner?: boolean;
+    form?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    /** Extra class applied to the root wrapper element. */
+    className?: string;
+    /** Makes the component fill its container width. */
+    fullWidth?: boolean;
+    /** Dense variant — reduced height (48px instead of 56px). */
+    dense?: boolean;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    ref?: React.Ref<TextFieldHandle>;
+    /**
+     * Controls when the scrollbars are visible when type="textarea".
+     * - `hover`: Show on hover (default)
+     * - `scroll`: Show only while scrolling
+     * - `always`: Always visible
+     * - `none`: Never visible
+     */
+    scrollAreaType?: "hover" | "scroll" | "always" | "none";
+}

package/dist/ui/theme-provider/index.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import { type ThemeMode } from "../../lib/theme-utils";
+interface ThemeContextValue {
+    sourceColor: string;
+    setSourceColor: (color: string) => void;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+}
+export interface MD3ThemeProviderProps {
+    children: ReactNode;
+    sourceColor?: string;
+    defaultMode?: ThemeMode;
+    persistToLocalStorage?: boolean;
+}
+export declare function MD3ThemeProvider({ children, sourceColor: initialSourceColor, defaultMode, persistToLocalStorage, }: MD3ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode">;
+export {};

package/dist/ui/toc.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @file toc.tsx
+ *
+ * Table of Contents component for long-form documentation pages.
+ *
+ * Uses `IntersectionObserver` to track which section heading is currently in the
+ * viewport and highlights the corresponding link. Smooth-scrolls to the target
+ * when a link is clicked (respecting the browser's `prefers-reduced-motion`
+ * media query via the native `scrollIntoView` API).
+ *
+ * @remarks
+ * - SSR-safe: `IntersectionObserver` usage is guarded by a `typeof` check.
+ * - The observer `rootMargin` is tuned for documentation layout with a fixed header
+ *   (~100px) and early deactivation (~80% from bottom) so the active item changes
+ *   before the section scrolls off-screen.
+ */
+/**
+ * A single entry in the Table of Contents.
+ *
+ * @example
+ * ```ts
+ * const items: ToCItem[] = [
+ *   { id: "installation", label: "Installation" },
+ *   { id: "usage", label: "Usage" },
+ * ];
+ * ```
+ */
+export 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.
+ */
+export 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;
+}
+/**
+ * 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
+ */
+export declare function TableOfContents({ items, className }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/tooltip/index.d.ts

@@ -0,0 +1,8 @@
+export { PlainTooltip } from "./plain-tooltip";
+export { RichTooltip } from "./rich-tooltip";
+export * from "./tooltip.tokens";
+export * from "./tooltip.types";
+export { TooltipBox } from "./tooltip-box";
+export { TooltipCaretShape } from "./tooltip-caret-shape";
+export { useTooltipPosition } from "./use-tooltip-position";
+export { useTooltipState } from "./use-tooltip-state";

package/dist/ui/tooltip/plain-tooltip.d.ts

@@ -0,0 +1,2 @@
+import type { PlainTooltipProps } from "./tooltip.types";
+export declare const PlainTooltip: import("react").ForwardRefExoticComponent<PlainTooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ui/tooltip/rich-tooltip.d.ts

@@ -0,0 +1,2 @@
+import type { RichTooltipProps } from "./tooltip.types";
+export declare const RichTooltip: import("react").ForwardRefExoticComponent<RichTooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ui/tooltip/tooltip-box.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipBoxProps } from "./tooltip.types";
+export declare function TooltipBox({ children, tooltip, placement, trigger, state: controlledState, spacingFromAnchor, disabled, className, showDelay, hideDelay, "aria-label": ariaLabel, }: TooltipBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/tooltip/tooltip-caret-shape.d.ts

@@ -0,0 +1,9 @@
+export interface TooltipCaretProps {
+    side: "top" | "bottom" | "left" | "right";
+    width?: number;
+    height?: number;
+    color?: string;
+    customPath?: string;
+    className?: string;
+}
+export declare function TooltipCaretShape({ side, width, height, color, customPath, className, }: TooltipCaretProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/tooltip/tooltip.tokens.d.ts

@@ -0,0 +1,26 @@
+export declare const TooltipTokens: {
+    readonly PlainTooltip: {
+        readonly containerColor: "var(--md-sys-color-inverse-surface)";
+        readonly textColor: "var(--md-sys-color-inverse-on-surface)";
+        readonly shape: "rounded-[4px]";
+        readonly font: "text-[12px] font-normal tracking-[0.4px] leading-[16px]";
+        readonly height: "min-h-6";
+        readonly padding: "px-2 py-1";
+        readonly maxWidth: "max-w-50";
+    };
+    readonly RichTooltip: {
+        readonly containerColor: "var(--md-sys-color-surface-container)";
+        readonly elevation: "shadow-md";
+        readonly shape: "rounded-[12px]";
+        readonly paddingTop: "pt-3";
+        readonly paddingBottom: "pb-2";
+        readonly paddingX: "px-4";
+        readonly maxWidth: "max-w-80";
+        readonly subheadColor: "var(--md-sys-color-on-surface-variant)";
+        readonly subheadFont: "text-[14px] font-medium leading-[20px]";
+        readonly bodyColor: "var(--md-sys-color-on-surface-variant)";
+        readonly bodyFont: "text-[14px] font-normal leading-[20px]";
+        readonly actionColor: "var(--md-sys-color-primary)";
+        readonly actionFont: "text-[14px] font-medium leading-[20px]";
+    };
+};

package/dist/ui/tooltip/tooltip.types.d.ts

@@ -0,0 +1,56 @@
+import type * as React from "react";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right" | "auto";
+export type TooltipTrigger = "hover" | "focus" | "click" | "long-press" | "manual";
+export interface TooltipStateConfig {
+    initialVisible?: boolean;
+    isPersistent?: boolean;
+    duration?: number;
+}
+export interface TooltipState {
+    isVisible: boolean;
+    show: () => void;
+    dismiss: () => void;
+}
+export interface CaretConfig {
+    enabled: boolean;
+    width?: number;
+    height?: number;
+    customPath?: string;
+}
+export interface TooltipBoxProps {
+    children: React.ReactNode;
+    tooltip: React.ReactNode;
+    placement?: TooltipPlacement;
+    trigger?: TooltipTrigger | TooltipTrigger[];
+    state?: TooltipState;
+    spacingFromAnchor?: number;
+    disabled?: boolean;
+    className?: string;
+    showDelay?: number;
+    hideDelay?: number;
+    "aria-label"?: string;
+}
+export interface PlainTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    caret?: CaretConfig | null;
+    maxWidth?: number;
+    className?: string;
+    containerColor?: string;
+    textColor?: string;
+    "data-side"?: "top" | "bottom" | "left" | "right";
+}
+export interface RichTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+    action?: React.ReactNode;
+    caret?: CaretConfig | null;
+    maxWidth?: number;
+    className?: string;
+    colors?: {
+        container?: string;
+        title?: string;
+        body?: string;
+        action?: string;
+    };
+    "data-side"?: "top" | "bottom" | "left" | "right";
+}

package/dist/ui/tooltip/use-tooltip-position.d.ts

@@ -0,0 +1,8 @@
+import type { TooltipPlacement } from "./tooltip.types";
+interface PositionState {
+    top: number;
+    left: number;
+    actualSide: "top" | "bottom" | "left" | "right";
+}
+export declare function useTooltipPosition(anchorRef: React.RefObject<HTMLElement | null>, tooltipRef: React.RefObject<HTMLElement | null>, placement: TooltipPlacement, spacing: number, isVisible: boolean): PositionState;
+export {};

package/dist/ui/tooltip/use-tooltip-state.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipState, TooltipStateConfig } from "./tooltip.types";
+export declare function useTooltipState(config?: TooltipStateConfig): TooltipState;

package/dist/ui/typography/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file index.ts
+ * @description Public API for the MD3 Expressive Typography module.
+ *
+ * Re-exports all types, classes, constants, and hooks required to integrate
+ * the typography system into a React application.
+ *
+ * @module typography
+ */
+export type { TypeScaleTokensType } from "./type-scale-tokens";
+export { TypeScaleTokens } from "./type-scale-tokens";
+export type { TypographyProviderProps } from "./typography";
+export { Typography, TypographyContext, TypographyProvider, useTypography, } from "./typography";
+export { TypographyKeyTokens } from "./typography-key-tokens";
+export type { FontVariationAxes, TextStyle, TypographyTokensOptions, } from "./typography-tokens";
+export { DEFAULT_FONT_VARIATION_AXES, MD3_EXPRESSIVE_FONT_VARIATION, serializeFontVariationAxes, TypographyTokens, } from "./typography-tokens";

package/dist/ui/typography/type-scale-tokens.d.ts

@@ -0,0 +1,162 @@
+/**
+ * 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.
+ */
+export 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";
+};
+export type TypeScaleTokensType = typeof TypeScaleTokens;

package/dist/ui/typography/typography-key-tokens.d.ts

@@ -0,0 +1,40 @@
+/**
+ * TypographyKeyTokens - MD3 Expressive Typography Key Tokens Enum
+ *
+ * Port of androidx.compose.material3.tokens.TypographyKeyTokens (Kotlin enum class).
+ * Used to reference a specific TextStyle via Typography.fromToken().
+ *
+ * Contains 30 keys: 15 baseline + 15 emphasized (MD3 Expressive).
+ */
+export declare enum TypographyKeyTokens {
+    BodyLarge = "BodyLarge",
+    BodyMedium = "BodyMedium",
+    BodySmall = "BodySmall",
+    DisplayLarge = "DisplayLarge",
+    DisplayMedium = "DisplayMedium",
+    DisplaySmall = "DisplaySmall",
+    HeadlineLarge = "HeadlineLarge",
+    HeadlineMedium = "HeadlineMedium",
+    HeadlineSmall = "HeadlineSmall",
+    LabelLarge = "LabelLarge",
+    LabelMedium = "LabelMedium",
+    LabelSmall = "LabelSmall",
+    TitleLarge = "TitleLarge",
+    TitleMedium = "TitleMedium",
+    TitleSmall = "TitleSmall",
+    BodyLargeEmphasized = "BodyLargeEmphasized",
+    BodyMediumEmphasized = "BodyMediumEmphasized",
+    BodySmallEmphasized = "BodySmallEmphasized",
+    DisplayLargeEmphasized = "DisplayLargeEmphasized",
+    DisplayMediumEmphasized = "DisplayMediumEmphasized",
+    DisplaySmallEmphasized = "DisplaySmallEmphasized",
+    HeadlineLargeEmphasized = "HeadlineLargeEmphasized",
+    HeadlineMediumEmphasized = "HeadlineMediumEmphasized",
+    HeadlineSmallEmphasized = "HeadlineSmallEmphasized",
+    LabelLargeEmphasized = "LabelLargeEmphasized",
+    LabelMediumEmphasized = "LabelMediumEmphasized",
+    LabelSmallEmphasized = "LabelSmallEmphasized",
+    TitleLargeEmphasized = "TitleLargeEmphasized",
+    TitleMediumEmphasized = "TitleMediumEmphasized",
+    TitleSmallEmphasized = "TitleSmallEmphasized"
+}