@bug-on/md3-react 2.0.3 → 3.0.0

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

@@ -1,56 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,162 +0,0 @@
-/**
- * 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

@@ -1,40 +0,0 @@
-/**
- * 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"
-}

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

@@ -1,220 +0,0 @@
-/**
- * @file typography-tokens.ts
- * @description MD3 Expressive Typography Token Definitions.
- *
- * Port of `androidx.compose.material3.tokens.TypographyTokens` (Kotlin class).
- *
- * ### Memory Optimization
- * All 30 `TextStyle` properties are implemented as **lazy getters** — they are
- * computed on first access and cached, rather than being computed eagerly at
- * construction time. This reduces the instantiation cost of `TypographyTokens`.
- *
- * ### Variable Font Axes
- * Supports customizable CSS `font-variation-settings` via {@link FontVariationAxes}.
- * - Default `ROND` value is `100` (maximum roundness of Google Sans Flex).
- * - Other axes remain at font defaults unless explicitly overridden.
- *
- * @example Basic usage (default tokens)
- * ```ts
- * const tokens = new TypographyTokens();
- * const style = tokens.BodyLarge; // { fontSize, fontWeight, ... }
- * ```
- *
- * @example Custom font family
- * ```ts
- * const tokens = new TypographyTokens({ fontFamily: "'Inter', sans-serif" });
- * ```
- *
- * @example Custom ROND axis (partial roundness)
- * ```ts
- * const tokens = new TypographyTokens({ fontVariationAxes: { ROND: 50 } });
- * ```
- */
-/**
- * Configurable axes for CSS `font-variation-settings`.
- *
- * Each key maps to a named variable font axis. Any axis not specified falls
- * back to the font's own default value.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings
- *
- * @example
- * ```ts
- * const axes: FontVariationAxes = { ROND: 100, wght: 600 };
- * ```
- */
-export interface FontVariationAxes {
-    /**
-     * Roundness axis of Google Sans Flex Variable Font.
-     * Range: `0` (sharp corners) – `100` (fully rounded).
-     * @default 100
-     */
-    ROND?: number;
-    /**
-     * Weight axis. Overrides `font-weight` via variation settings.
-     * @default font default
-     */
-    wght?: number;
-    /**
-     * Width axis. Controls glyph condensation/expansion.
-     * @default font default
-     */
-    wdth?: number;
-    /** Any additional named variation axis supported by the font. */
-    [axis: string]: number | undefined;
-}
-/**
- * Default font variation axes for MD3 Expressive.
- * Sets `ROND` to `100` for maximum roundness; all other axes use font defaults.
- */
-export declare const DEFAULT_FONT_VARIATION_AXES: Readonly<FontVariationAxes>;
-/**
- * Serializes a {@link FontVariationAxes} map into a CSS `font-variation-settings` string.
- *
- * @example
- * ```ts
- * serializeFontVariationAxes({ ROND: 100, wght: 700 });
- * // → '"ROND" 100, "wght" 700'
- * ```
- */
-export declare function serializeFontVariationAxes(axes: FontVariationAxes): string;
-/**
- * Pre-computed default `font-variation-settings` string.
- * Equivalent to `'"ROND" 100'`.
- */
-export declare const MD3_EXPRESSIVE_FONT_VARIATION: string;
-/**
- * Web equivalent of Compose's `TextStyle`.
- *
- * All properties are readonly and map directly to CSS font properties.
- * The `fontVariationSettings` field carries the serialized variable-font axes.
- */
-export interface TextStyle {
-    /** CSS `font-family` value. */
-    readonly fontFamily: string;
-    /** CSS `font-weight` numeric value (e.g. `400`, `700`). */
-    readonly fontWeight: number;
-    /** CSS `font-size` in `rem` units. */
-    readonly fontSize: string;
-    /** CSS `line-height` in `rem` units. */
-    readonly lineHeight: string;
-    /** CSS `letter-spacing` in `px` units. */
-    readonly letterSpacing: string;
-    /**
-     * CSS `font-variation-settings` string.
-     * @example '"ROND" 100'
-     * @example '"ROND" 50, "wght" 600'
-     */
-    readonly fontVariationSettings: string;
-}
-/**
- * Constructor options for {@link TypographyTokens}.
- */
-export interface TypographyTokensOptions {
-    /**
-     * Custom CSS `font-family` string. When provided, overrides the default
-     * Google Sans Flex font for all token styles.
-     *
-     * @example "'Roboto', sans-serif"
-     */
-    fontFamily?: string;
-    /**
-     * Variable font axes to apply via `font-variation-settings`.
-     * Merged on top of {@link DEFAULT_FONT_VARIATION_AXES}.
-     * Provide only the axes you want to override.
-     *
-     * @example { ROND: 0 } // sharp corners
-     */
-    fontVariationAxes?: FontVariationAxes;
-}
-/**
- * MD3 Expressive Typography Token class.
- *
- * Port of `internal class TypographyTokens(val fontFamily: FontFamily? = null)`
- * from `androidx.compose.material3.tokens.TypographyTokens`.
- *
- * Provides 30 pre-defined {@link TextStyle} properties (15 baseline + 15 emphasized),
- * each implemented as a **lazy getter** — computed once on first access, then cached.
- *
- * ### Customization
- * Pass {@link TypographyTokensOptions} to the constructor to override:
- * - `fontFamily` — swap the typeface
- * - `fontVariationAxes` — control variable font axes (e.g., `ROND`)
- *
- * @example Default
- * ```ts
- * const tokens = new TypographyTokens();
- * ```
- *
- * @example Custom font + half-rounded
- * ```ts
- * const tokens = new TypographyTokens({
- *   fontFamily: "'Inter', sans-serif",
- *   fontVariationAxes: { ROND: 50 },
- * });
- * ```
- */
-export declare class TypographyTokens {
-    #private;
-    constructor(options?: TypographyTokensOptions | string);
-    /** Display Large – `57px`, weight 400 */
-    get DisplayLarge(): TextStyle;
-    /** Display Medium – `45px`, weight 400 */
-    get DisplayMedium(): TextStyle;
-    /** Display Small – `36px`, weight 400 */
-    get DisplaySmall(): TextStyle;
-    /** Headline Large – `32px`, weight 400 */
-    get HeadlineLarge(): TextStyle;
-    /** Headline Medium – `28px`, weight 400 */
-    get HeadlineMedium(): TextStyle;
-    /** Headline Small – `24px`, weight 400 */
-    get HeadlineSmall(): TextStyle;
-    /** Title Large – `22px`, weight 400 */
-    get TitleLarge(): TextStyle;
-    /** Title Medium – `16px`, weight 500 */
-    get TitleMedium(): TextStyle;
-    /** Title Small – `14px`, weight 500 */
-    get TitleSmall(): TextStyle;
-    /** Body Large – `16px`, weight 400 */
-    get BodyLarge(): TextStyle;
-    /** Body Medium – `14px`, weight 400 */
-    get BodyMedium(): TextStyle;
-    /** Body Small – `12px`, weight 400 */
-    get BodySmall(): TextStyle;
-    /** Label Large – `14px`, weight 500 */
-    get LabelLarge(): TextStyle;
-    /** Label Medium – `12px`, weight 500 */
-    get LabelMedium(): TextStyle;
-    /** Label Small – `11px`, weight 500 */
-    get LabelSmall(): TextStyle;
-    /** Display Large Emphasized – `57px`, weight 800 */
-    get DisplayLargeEmphasized(): TextStyle;
-    /** Display Medium Emphasized – `45px`, weight 800 */
-    get DisplayMediumEmphasized(): TextStyle;
-    /** Display Small Emphasized – `36px`, weight 800 */
-    get DisplaySmallEmphasized(): TextStyle;
-    /** Headline Large Emphasized – `32px`, weight 800 */
-    get HeadlineLargeEmphasized(): TextStyle;
-    /** Headline Medium Emphasized – `28px`, weight 800 */
-    get HeadlineMediumEmphasized(): TextStyle;
-    /** Headline Small Emphasized – `24px`, weight 800 */
-    get HeadlineSmallEmphasized(): TextStyle;
-    /** Title Large Emphasized – `22px`, weight 700 */
-    get TitleLargeEmphasized(): TextStyle;
-    /** Title Medium Emphasized – `16px`, weight 700 */
-    get TitleMediumEmphasized(): TextStyle;
-    /** Title Small Emphasized – `14px`, weight 700 */
-    get TitleSmallEmphasized(): TextStyle;
-    /** Body Large Emphasized – `16px`, weight 700 */
-    get BodyLargeEmphasized(): TextStyle;
-    /** Body Medium Emphasized – `14px`, weight 700 */
-    get BodyMediumEmphasized(): TextStyle;
-    /** Body Small Emphasized – `12px`, weight 700 */
-    get BodySmallEmphasized(): TextStyle;
-    /** Label Large Emphasized – `14px`, weight 800 */
-    get LabelLargeEmphasized(): TextStyle;
-    /** Label Medium Emphasized – `12px`, weight 800 */
-    get LabelMediumEmphasized(): TextStyle;
-    /** Label Small Emphasized – `11px`, weight 800 */
-    get LabelSmallEmphasized(): TextStyle;
-}