@bug-on/md3-react 2.0.3 → 3.0.0

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

@@ -1,265 +0,0 @@
-/**
- * @file typography.tsx
- * @description MD3 Expressive Typography System for React.
- *
- * Port of `androidx.compose.material3.Typography` (Kotlin `@Immutable` class).
- *
- * Provides 30 {@link TextStyle} definitions via the React Context API, mirroring
- * the Compose `LocalTypography` / `MaterialTheme.typography` pattern.
- *
- * ### Memory & Performance Optimizations
- * - The `Typography` class delegates all property access to a `TypographyTokens`
- *   instance that uses **lazy getters**, so styles are computed only on first use.
- * - `TypographyProvider` memoizes the context value via `useMemo` to prevent
- *   unnecessary re-renders downstream.
- *
- * @example Wrap your application
- * ```tsx
- * <TypographyProvider>
- *   <App />
- * </TypographyProvider>
- * ```
- *
- * @example Consume in a component
- * ```tsx
- * const typography = useTypography();
- * <p style={typography.bodyLarge}>Hello</p>
- * ```
- *
- * @example Via token key
- * ```tsx
- * const style = typography.fromToken(TypographyKeyTokens.BodyLarge);
- * ```
- *
- * @example Custom font + half-rounded corners
- * ```tsx
- * <TypographyProvider
- *   fontFamily="'Roboto', sans-serif"
- *   fontVariationAxes={{ ROND: 50 }}
- * >
- *   <App />
- * </TypographyProvider>
- * ```
- */
-import { type ReactNode } from "react";
-import { TypographyKeyTokens } from "./typography-key-tokens";
-import { type FontVariationAxes, type TextStyle, TypographyTokens } from "./typography-tokens";
-/**
- * MD3 Expressive Typography — port of Compose's `@Immutable class Typography(...)`.
- *
- * All 30 style properties are **readonly** and lazily resolved from the
- * underlying {@link TypographyTokens} instance. Use {@link Typography.copy}
- * to create a customized variant without mutating the original.
- *
- * @example Default
- * ```ts
- * const typography = new Typography();
- * const style = typography.displayLarge; // lazy — computed on first access
- * ```
- *
- * @example Custom tokens
- * ```ts
- * const typography = new Typography(
- *   new TypographyTokens({ fontFamily: "'Inter', sans-serif", fontVariationAxes: { ROND: 0 } })
- * );
- * ```
- */
-export declare class Typography {
-    #private;
-    constructor(tokens?: TypographyTokens);
-    /** Display Large text style (`57px`, weight `400`). */
-    get displayLarge(): TextStyle;
-    /** Display Medium text style (`45px`, weight `400`). */
-    get displayMedium(): TextStyle;
-    /** Display Small text style (`36px`, weight `400`). */
-    get displaySmall(): TextStyle;
-    /** Headline Large text style (`32px`, weight `400`). */
-    get headlineLarge(): TextStyle;
-    /** Headline Medium text style (`28px`, weight `400`). */
-    get headlineMedium(): TextStyle;
-    /** Headline Small text style (`24px`, weight `400`). */
-    get headlineSmall(): TextStyle;
-    /** Title Large text style (`22px`, weight `400`). */
-    get titleLarge(): TextStyle;
-    /** Title Medium text style (`16px`, weight `500`). */
-    get titleMedium(): TextStyle;
-    /** Title Small text style (`14px`, weight `500`). */
-    get titleSmall(): TextStyle;
-    /** Body Large text style (`16px`, weight `400`). */
-    get bodyLarge(): TextStyle;
-    /** Body Medium text style (`14px`, weight `400`). */
-    get bodyMedium(): TextStyle;
-    /** Body Small text style (`12px`, weight `400`). */
-    get bodySmall(): TextStyle;
-    /** Label Large text style (`14px`, weight `500`). */
-    get labelLarge(): TextStyle;
-    /** Label Medium text style (`12px`, weight `500`). */
-    get labelMedium(): TextStyle;
-    /** Label Small text style (`11px`, weight `500`). */
-    get labelSmall(): TextStyle;
-    /** Display Large Emphasized text style (`57px`, weight `800`). */
-    get displayLargeEmphasized(): TextStyle;
-    /** Display Medium Emphasized text style (`45px`, weight `800`). */
-    get displayMediumEmphasized(): TextStyle;
-    /** Display Small Emphasized text style (`36px`, weight `800`). */
-    get displaySmallEmphasized(): TextStyle;
-    /** Headline Large Emphasized text style (`32px`, weight `800`). */
-    get headlineLargeEmphasized(): TextStyle;
-    /** Headline Medium Emphasized text style (`28px`, weight `800`). */
-    get headlineMediumEmphasized(): TextStyle;
-    /** Headline Small Emphasized text style (`24px`, weight `800`). */
-    get headlineSmallEmphasized(): TextStyle;
-    /** Title Large Emphasized text style (`22px`, weight `700`). */
-    get titleLargeEmphasized(): TextStyle;
-    /** Title Medium Emphasized text style (`16px`, weight `700`). */
-    get titleMediumEmphasized(): TextStyle;
-    /** Title Small Emphasized text style (`14px`, weight `700`). */
-    get titleSmallEmphasized(): TextStyle;
-    /** Body Large Emphasized text style (`16px`, weight `700`). */
-    get bodyLargeEmphasized(): TextStyle;
-    /** Body Medium Emphasized text style (`14px`, weight `700`). */
-    get bodyMediumEmphasized(): TextStyle;
-    /** Body Small Emphasized text style (`12px`, weight `700`). */
-    get bodySmallEmphasized(): TextStyle;
-    /** Label Large Emphasized text style (`14px`, weight `800`). */
-    get labelLargeEmphasized(): TextStyle;
-    /** Label Medium Emphasized text style (`12px`, weight `800`). */
-    get labelMediumEmphasized(): TextStyle;
-    /** Label Small Emphasized text style (`11px`, weight `800`). */
-    get labelSmallEmphasized(): TextStyle;
-    /**
-     * Returns the `TextStyle` corresponding to the given {@link TypographyKeyTokens}.
-     *
-     * Port of `internal fun Typography.fromToken(value: TypographyKeyTokens): TextStyle`.
-     *
-     * @example
-     * ```ts
-     * const style = typography.fromToken(TypographyKeyTokens.BodyLarge);
-     * ```
-     */
-    fromToken(value: TypographyKeyTokens): TextStyle;
-    /**
-     * Creates a new `Typography` instance with the specified property overrides
-     * merged on top of the current instance's styles.
-     *
-     * Port of Compose's `fun Typography.copy(...)`.
-     *
-     * Unlike a shallow `Object.assign`, this method preserves the lazy-getter
-     * architecture — overridden styles are stored separately and looked up first
-     * on each property access, while non-overridden styles continue to be
-     * resolved from the underlying {@link TypographyTokens}.
-     *
-     * @param overrides - Map of camelCase property names to partial `TextStyle` overrides.
-     * @returns A new `Typography` instance. The original is never mutated.
-     *
-     * @example
-     * ```ts
-     * const custom = typography.copy({ bodyLarge: { fontSize: "2rem" } });
-     * custom.bodyLarge.fontSize; // "2rem"
-     * custom.bodySmall.fontSize; // original token value — untouched
-     * ```
-     */
-    copy(overrides: Partial<Record<TypographyStyleKey, Partial<TextStyle>>>): Typography;
-}
-/**
- * Union of all camelCase property names on {@link Typography} that return a
- * {@link TextStyle}. Used as the key type for `copy()` overrides and the
- * `OverriddenTypography` resolver.
- */
-type TypographyStyleKey = {
-    [K in keyof Typography]: Typography[K] extends TextStyle ? K : never;
-}[keyof Typography];
-/**
- * React context that holds the current {@link Typography} instance.
- *
- * Port of `internal val LocalTypography = staticCompositionLocalOf { Typography() }`.
- *
- * @internal — Prefer {@link useTypography} and {@link TypographyProvider}.
- */
-export declare const TypographyContext: import("react").Context<Typography>;
-/**
- * React hook to access the current {@link Typography} from the nearest
- * {@link TypographyProvider} in the tree. Falls back to the default
- * googleapis Typography when no provider is present.
- *
- * @returns The current `Typography` instance.
- *
- * @example
- * ```tsx
- * const typography = useTypography();
- * <p style={typography.bodyLarge}>Hello</p>
- * ```
- */
-export declare function useTypography(): Typography;
-/**
- * Props for {@link TypographyProvider}.
- */
-export interface TypographyProviderProps {
-    /** The child tree that will have access to the provided typography. */
-    children: ReactNode;
-    /**
-     * A fully custom {@link Typography} instance.
-     * When provided, `fontFamily` and `fontVariationAxes` are ignored.
-     */
-    typography?: Typography;
-    /**
-     * Shorthand to override the CSS `font-family` for all typography styles.
-     * Ignored when `typography` is provided.
-     *
-     * @example "'Roboto', sans-serif"
-     */
-    fontFamily?: string;
-    /**
-     * Variable font axes to apply globally via `font-variation-settings`.
-     * Merged on top of the defaults (`ROND: 100`). Only the axes you specify
-     * will be overridden; unspecified axes retain font defaults.
-     * Ignored when `typography` is provided.
-     *
-     * @example { ROND: 50 }  // half-rounded
-     * @example { ROND: 0 }   // sharp corners
-     */
-    fontVariationAxes?: FontVariationAxes;
-}
-/**
- * Typography Provider component.
- *
- * Port of `CompositionLocalProvider(LocalTypography provides typography)`.
- * Wrap your application (or a subtree) to provide MD3 Expressive typography
- * to all descendant components that call {@link useTypography}.
- *
- * The context value is **memoized** — it is only re-computed when `typography`,
- * `fontFamily`, or `fontVariationAxes` change, preventing unnecessary re-renders.
- *
- * @example Default (Google Sans Flex, ROND = 100)
- * ```tsx
- * <TypographyProvider>
- *   <App />
- * </TypographyProvider>
- * ```
- *
- * @example Custom font
- * ```tsx
- * <TypographyProvider fontFamily="'Inter', sans-serif">
- *   <App />
- * </TypographyProvider>
- * ```
- *
- * @example Partially rounded corners (ROND = 50)
- * ```tsx
- * <TypographyProvider fontVariationAxes={{ ROND: 50 }}>
- *   <App />
- * </TypographyProvider>
- * ```
- *
- * @example Fully sharp (ROND = 0) with a custom font
- * ```tsx
- * <TypographyProvider
- *   fontFamily="'Outfit', sans-serif"
- *   fontVariationAxes={{ ROND: 0 }}
- * >
- *   <App />
- * </TypographyProvider>
- * ```
- */
-export declare function TypographyProvider({ children, typography, fontFamily, fontVariationAxes, }: TypographyProviderProps): import("react/jsx-runtime").JSX.Element;
-export {};