@bug-on/md3-react 2.0.2 → 3.0.0

package/src/ui/tooltip/use-tooltip-position.ts

@@ -0,0 +1,208 @@
+import { useEffect, useLayoutEffect, useState } from "react";
+import type { TooltipPlacement } from "./tooltip.types";
+
+interface PositionState {
+	top: number;
+	left: number;
+	actualSide: "top" | "bottom" | "left" | "right";
+}
+
+type Side = "top" | "bottom" | "left" | "right";
+
+const VIEWPORT_PADDING = 8;
+
+const useIsomorphicLayoutEffect =
+	typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+function resolveAutoPlacement(
+	spaceTop: number,
+	spaceBottom: number,
+	spaceLeft: number,
+	spaceRight: number,
+	tooltipWidth: number,
+	tooltipHeight: number,
+	spacing: number,
+): Side {
+	if (spaceTop >= tooltipHeight + spacing) return "top";
+	if (spaceBottom >= tooltipHeight + spacing) return "bottom";
+	if (spaceLeft >= tooltipWidth + spacing) return "left";
+	if (spaceRight >= tooltipWidth + spacing) return "right";
+	return "top";
+}
+
+function resolveActualSide(
+	targetPlacement: Side,
+	spaceTop: number,
+	spaceBottom: number,
+	spaceLeft: number,
+	spaceRight: number,
+	tooltipWidth: number,
+	tooltipHeight: number,
+	spacing: number,
+): Side {
+	const needsHeight = tooltipHeight + spacing;
+	const needsWidth = tooltipWidth + spacing;
+
+	if (targetPlacement === "top")
+		return spaceTop < needsHeight && spaceBottom >= needsHeight
+			? "bottom"
+			: "top";
+	if (targetPlacement === "bottom")
+		return spaceBottom < needsHeight && spaceTop >= needsHeight
+			? "top"
+			: "bottom";
+	if (targetPlacement === "left")
+		return spaceLeft < needsWidth && spaceRight >= needsWidth
+			? "right"
+			: "left";
+	return spaceRight < needsWidth && spaceLeft >= needsWidth ? "left" : "right";
+}
+
+function calculateXY(
+	side: Side,
+	anchorRect: DOMRect,
+	tooltipWidth: number,
+	tooltipHeight: number,
+	spacing: number,
+): { top: number; left: number } {
+	const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+	const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+
+	if (side === "top")
+		return {
+			top: anchorRect.top - tooltipHeight - spacing,
+			left: anchorCenterX - tooltipWidth / 2,
+		};
+	if (side === "bottom")
+		return {
+			top: anchorRect.bottom + spacing,
+			left: anchorCenterX - tooltipWidth / 2,
+		};
+	if (side === "left")
+		return {
+			top: anchorCenterY - tooltipHeight / 2,
+			left: anchorRect.left - tooltipWidth - spacing,
+		};
+	return {
+		top: anchorCenterY - tooltipHeight / 2,
+		left: anchorRect.right + spacing,
+	};
+}
+
+function clampToViewport(
+	side: Side,
+	top: number,
+	left: number,
+	tooltipWidth: number,
+	tooltipHeight: number,
+): { top: number; left: number } {
+	const isVertical = side === "top" || side === "bottom";
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+
+	if (isVertical) {
+		left = Math.max(
+			VIEWPORT_PADDING,
+			Math.min(left, viewportWidth - VIEWPORT_PADDING - tooltipWidth),
+		);
+	} else {
+		top = Math.max(
+			VIEWPORT_PADDING,
+			Math.min(top, viewportHeight - VIEWPORT_PADDING - tooltipHeight),
+		);
+	}
+
+	return { top, left };
+}
+
+export function useTooltipPosition(
+	anchorRef: React.RefObject<HTMLElement | null>,
+	tooltipRef: React.RefObject<HTMLElement | null>,
+	placement: TooltipPlacement,
+	spacing: number,
+	isVisible: boolean,
+): PositionState {
+	const [position, setPosition] = useState<PositionState>({
+		top: -9999,
+		left: -9999,
+		actualSide: placement === "auto" ? "top" : placement,
+	});
+
+	useIsomorphicLayoutEffect(() => {
+		if (!isVisible || !anchorRef.current || !tooltipRef.current) return;
+
+		const calculatePosition = () => {
+			const anchorEl = anchorRef.current;
+			const tooltipEl = tooltipRef.current;
+			if (!anchorEl || !tooltipEl) return;
+
+			const anchorRect = anchorEl.getBoundingClientRect();
+			const tooltipRect = tooltipEl.getBoundingClientRect();
+			const tooltipWidth = tooltipRect.width;
+			const tooltipHeight = tooltipRect.height;
+
+			const spaceTop = anchorRect.top;
+			const spaceBottom = window.innerHeight - anchorRect.bottom;
+			const spaceLeft = anchorRect.left;
+			const spaceRight = window.innerWidth - anchorRect.right;
+
+			const targetSide: Side =
+				placement === "auto"
+					? resolveAutoPlacement(
+							spaceTop,
+							spaceBottom,
+							spaceLeft,
+							spaceRight,
+							tooltipWidth,
+							tooltipHeight,
+							spacing,
+						)
+					: placement;
+
+			const actualSide = resolveActualSide(
+				targetSide,
+				spaceTop,
+				spaceBottom,
+				spaceLeft,
+				spaceRight,
+				tooltipWidth,
+				tooltipHeight,
+				spacing,
+			);
+
+			const { top, left } = calculateXY(
+				actualSide,
+				anchorRect,
+				tooltipWidth,
+				tooltipHeight,
+				spacing,
+			);
+			const clamped = clampToViewport(
+				actualSide,
+				top,
+				left,
+				tooltipWidth,
+				tooltipHeight,
+			);
+
+			setPosition({ ...clamped, actualSide });
+		};
+
+		calculatePosition();
+
+		window.addEventListener("resize", calculatePosition);
+		window.addEventListener("scroll", calculatePosition, true);
+
+		const resizeObserver = new ResizeObserver(calculatePosition);
+		if (anchorRef.current) resizeObserver.observe(anchorRef.current);
+		if (tooltipRef.current) resizeObserver.observe(tooltipRef.current);
+
+		return () => {
+			window.removeEventListener("resize", calculatePosition);
+			window.removeEventListener("scroll", calculatePosition, true);
+			resizeObserver.disconnect();
+		};
+	}, [isVisible, placement, spacing, anchorRef, tooltipRef]);
+
+	return position;
+}

package/src/ui/tooltip/use-tooltip-state.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+import type { TooltipState, TooltipStateConfig } from "./tooltip.types";
+
+const activeTooltipDismissals = new Set<() => void>();
+
+export function useTooltipState(config?: TooltipStateConfig): TooltipState {
+	const {
+		initialVisible = false,
+		isPersistent = false,
+		duration = 1500,
+	} = config ?? {};
+
+	const [isVisible, setIsVisible] = useState(initialVisible);
+
+	const dismiss = useCallback(() => {
+		setIsVisible(false);
+		activeTooltipDismissals.delete(dismiss);
+	}, []);
+
+	const show = useCallback(() => {
+		for (const otherDismiss of activeTooltipDismissals) {
+			if (otherDismiss !== dismiss) otherDismiss();
+		}
+		setIsVisible(true);
+		activeTooltipDismissals.add(dismiss);
+	}, [dismiss]);
+
+	useEffect(() => {
+		if (!isVisible || isPersistent) return;
+		const timeoutId = setTimeout(dismiss, duration);
+		return () => clearTimeout(timeoutId);
+	}, [isVisible, isPersistent, duration, dismiss]);
+
+	useEffect(() => {
+		return () => {
+			activeTooltipDismissals.delete(dismiss);
+		};
+	}, [dismiss]);
+
+	return { isVisible, show, dismiss };
+}

package/src/ui/typography/__tests__/typography.test.tsx

@@ -0,0 +1,170 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Typography, TypographyProvider, useTypography } from "../typography";
+import { TypographyKeyTokens } from "../typography-key-tokens";
+import {
+	DEFAULT_FONT_VARIATION_AXES,
+	serializeFontVariationAxes,
+	TypographyTokens,
+} from "../typography-tokens";
+
+describe("Typography", () => {
+	describe("serializeFontVariationAxes", () => {
+		it("should serialize a single axis correctly", () => {
+			expect(serializeFontVariationAxes({ ROND: 100 })).toBe('"ROND" 100');
+		});
+
+		it("should serialize multiple axes correctly", () => {
+			const result = serializeFontVariationAxes({ ROND: 50, wght: 700 });
+			expect(result).toContain('"ROND" 50');
+			expect(result).toContain('"wght" 700');
+		});
+
+		it("should skip undefined axis values", () => {
+			const result = serializeFontVariationAxes({ ROND: 100, wght: undefined });
+			expect(result).toBe('"ROND" 100');
+		});
+	});
+
+	describe("TypographyTokens", () => {
+		it("should initialize with default Google Sans Flex font", () => {
+			const tokens = new TypographyTokens();
+			expect(tokens.BodyLarge.fontFamily).toContain("Google Sans Flex");
+			// MD3 Expressive requires ROND: 100 for maximum roundness
+			expect(tokens.BodyLarge.fontVariationSettings).toContain('"ROND" 100');
+		});
+
+		it("should support a custom fontFamily override (options object)", () => {
+			const tokens = new TypographyTokens({ fontFamily: "Inter, sans-serif" });
+			expect(tokens.HeadlineLarge.fontFamily).toBe("Inter, sans-serif");
+		});
+
+		it("should support legacy string constructor for backward compatibility", () => {
+			const tokens = new TypographyTokens("Inter, sans-serif");
+			expect(tokens.HeadlineLarge.fontFamily).toBe("Inter, sans-serif");
+		});
+
+		it("should apply custom fontVariationAxes", () => {
+			const tokens = new TypographyTokens({ fontVariationAxes: { ROND: 0 } });
+			expect(tokens.BodyLarge.fontVariationSettings).toContain('"ROND" 0');
+		});
+
+		it("should merge custom axes on top of defaults (ROND stays 100 unless overridden)", () => {
+			// Only wght is overridden; ROND should remain at default (100)
+			expect(DEFAULT_FONT_VARIATION_AXES.ROND).toBe(100);
+			const tokens = new TypographyTokens({ fontVariationAxes: { wght: 600 } });
+			expect(tokens.BodyLarge.fontVariationSettings).toContain('"ROND" 100');
+			expect(tokens.BodyLarge.fontVariationSettings).toContain('"wght" 600');
+		});
+
+		it("should lazily compute and cache styles on first access", () => {
+			const tokens = new TypographyTokens();
+			const first = tokens.DisplayLarge;
+			const second = tokens.DisplayLarge;
+			// Same object reference — cached
+			expect(first).toBe(second);
+		});
+
+		it("should return frozen TextStyle objects", () => {
+			const tokens = new TypographyTokens();
+			expect(Object.isFrozen(tokens.BodyLarge)).toBe(true);
+		});
+	});
+
+	describe("Typography (Class)", () => {
+		it("should expose all 30 TextStyle getters", () => {
+			const typography = new Typography();
+			expect(typography.displayLarge).toBeDefined();
+			expect(typography.bodyMedium).toBeDefined();
+			expect(typography.labelSmallEmphasized).toBeDefined();
+
+			// Check token delegation — should match token value
+			const tokens = new TypographyTokens();
+			expect(typography.headlineMedium).toEqual(tokens.HeadlineMedium);
+		});
+
+		it("should map TypographyKeyTokens correctly using fromToken()", () => {
+			const typography = new Typography();
+			const style = typography.fromToken(TypographyKeyTokens.TitleMedium);
+			expect(style.fontSize).toBe("1.143rem");
+			expect(style.fontWeight).toBe(500);
+
+			const emphStyle = typography.fromToken(
+				TypographyKeyTokens.TitleMediumEmphasized,
+			);
+			expect(emphStyle.fontWeight).toBe(700);
+		});
+
+		it("should create an overridden copy without mutating the original via copy()", () => {
+			const original = new Typography();
+			const overridden = original.copy({
+				bodyLarge: { fontSize: "99rem", lineHeight: "120rem" },
+			});
+
+			// Original remains intact
+			expect(original.bodyLarge.fontSize).toBe("1.143rem");
+
+			// Overridden instance reflects custom values
+			expect(overridden.bodyLarge.fontSize).toBe("99rem");
+			expect(overridden.bodyLarge.lineHeight).toBe("120rem");
+
+			// Untouched properties remain referentially stable
+			expect(overridden.headlineSmall).toBe(original.headlineSmall);
+		});
+	});
+
+	describe("TypographyProvider & useTypography", () => {
+		it("should provide default Google Sans Flex typography when no props given", () => {
+			const wrapper = ({ children }: { children: React.ReactNode }) => (
+				<TypographyProvider>{children}</TypographyProvider>
+			);
+			const { result } = renderHook(() => useTypography(), { wrapper });
+			expect(result.current.bodySmall.fontFamily).toContain("Google Sans Flex");
+		});
+
+		it("should respect fontFamily prop shorthand", () => {
+			const wrapper = ({ children }: { children: React.ReactNode }) => (
+				<TypographyProvider fontFamily="'Roboto', sans-serif">
+					{children}
+				</TypographyProvider>
+			);
+			const { result } = renderHook(() => useTypography(), { wrapper });
+			expect(result.current.bodySmall.fontFamily).toBe("'Roboto', sans-serif");
+		});
+
+		it("should apply custom fontVariationAxes via prop", () => {
+			const wrapper = ({ children }: { children: React.ReactNode }) => (
+				<TypographyProvider fontVariationAxes={{ ROND: 0 }}>
+					{children}
+				</TypographyProvider>
+			);
+			const { result } = renderHook(() => useTypography(), { wrapper });
+			expect(result.current.bodyLarge.fontVariationSettings).toContain(
+				'"ROND" 0',
+			);
+		});
+
+		it("should prioritize custom typography instance prop", () => {
+			const customTokens = new TypographyTokens({
+				fontFamily: "'Comic Sans MS'",
+			});
+			const customTypography = new Typography(customTokens);
+
+			const wrapper = ({ children }: { children: React.ReactNode }) => (
+				<TypographyProvider typography={customTypography}>
+					{children}
+				</TypographyProvider>
+			);
+			const { result } = renderHook(() => useTypography(), { wrapper });
+			expect(result.current.displayLarge.fontFamily).toBe("'Comic Sans MS'");
+		});
+
+		it("should return the default Typography if used without a provider", () => {
+			const { result } = renderHook(() => useTypography());
+			expect(result.current).toBeInstanceOf(Typography);
+			expect(result.current.displaySmall.fontFamily).toContain(
+				"Google Sans Flex",
+			);
+		});
+	});
+});

package/{dist/ui/typography/index.d.ts → src/ui/typography/index.ts}

@@ -7,10 +7,28 @@
  *
  * @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 {
+	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";
+
+export type {
+	FontVariationAxes,
+	TextStyle,
+	TypographyTokensOptions,
+} from "./typography-tokens";
+export {
+	DEFAULT_FONT_VARIATION_AXES,
+	MD3_EXPRESSIVE_FONT_VARIATION,
+	serializeFontVariationAxes,
+	TypographyTokens,
+} from "./typography-tokens";

package/src/ui/typography/type-scale-tokens.ts

@@ -0,0 +1,205 @@
+/**
+ * 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.
+ */
+
+const font = "'Google Sans Flex', system-ui, sans-serif";
+
+export const TypeScaleTokens = {
+	// ─── DISPLAY ────────────────────────────────────────────────────────────────
+	DisplayLargeFont: font,
+	DisplayLargeWeight: 400,
+	DisplayLargeSize: "3.571rem", // 57sp → ~57px / 14 = 4.071, MD3 uses 57px on 16px base → 3.5625rem
+	DisplayLargeLineHeight: "4rem", // 64px
+	DisplayLargeTracking: "-0.25px",
+
+	DisplayMediumFont: font,
+	DisplayMediumWeight: 400,
+	DisplayMediumSize: "2.857rem", // 45px
+	DisplayMediumLineHeight: "3.286rem", // 52px
+	DisplayMediumTracking: "0px",
+
+	DisplaySmallFont: font,
+	DisplaySmallWeight: 400,
+	DisplaySmallSize: "2.571rem", // 36px
+	DisplaySmallLineHeight: "3.143rem", // 44px
+	DisplaySmallTracking: "0px",
+
+	// ─── HEADLINE ───────────────────────────────────────────────────────────────
+	HeadlineLargeFont: font,
+	HeadlineLargeWeight: 400,
+	HeadlineLargeSize: "2.286rem", // 32px
+	HeadlineLargeLineHeight: "2.857rem", // 40px
+	HeadlineLargeTracking: "0px",
+
+	HeadlineMediumFont: font,
+	HeadlineMediumWeight: 400,
+	HeadlineMediumSize: "2rem", // 28px
+	HeadlineMediumLineHeight: "2.571rem", // 36px
+	HeadlineMediumTracking: "0px",
+
+	HeadlineSmallFont: font,
+	HeadlineSmallWeight: 400,
+	HeadlineSmallSize: "1.714rem", // 24px
+	HeadlineSmallLineHeight: "2.286rem", // 32px
+	HeadlineSmallTracking: "0px",
+
+	// ─── TITLE ──────────────────────────────────────────────────────────────────
+	TitleLargeFont: font,
+	TitleLargeWeight: 400,
+	TitleLargeSize: "1.571rem", // 22px
+	TitleLargeLineHeight: "2rem", // 28px
+	TitleLargeTracking: "0px",
+
+	TitleMediumFont: font,
+	TitleMediumWeight: 500,
+	TitleMediumSize: "1.143rem", // 16px
+	TitleMediumLineHeight: "1.714rem", // 24px
+	TitleMediumTracking: "0.15px",
+
+	TitleSmallFont: font,
+	TitleSmallWeight: 500,
+	TitleSmallSize: "1rem", // 14px
+	TitleSmallLineHeight: "1.429rem", // 20px
+	TitleSmallTracking: "0.1px",
+
+	// ─── BODY ───────────────────────────────────────────────────────────────────
+	BodyLargeFont: font,
+	BodyLargeWeight: 400,
+	BodyLargeSize: "1.143rem", // 16px
+	BodyLargeLineHeight: "1.714rem", // 24px
+	BodyLargeTracking: "0.5px",
+
+	BodyMediumFont: font,
+	BodyMediumWeight: 400,
+	BodyMediumSize: "1rem", // 14px
+	BodyMediumLineHeight: "1.429rem", // 20px
+	BodyMediumTracking: "0.25px",
+
+	BodySmallFont: font,
+	BodySmallWeight: 400,
+	BodySmallSize: "0.857rem", // 12px
+	BodySmallLineHeight: "1.143rem", // 16px
+	BodySmallTracking: "0.4px",
+
+	// ─── LABEL ──────────────────────────────────────────────────────────────────
+	LabelLargeFont: font,
+	LabelLargeWeight: 500,
+	LabelLargeSize: "1rem", // 14px
+	LabelLargeLineHeight: "1.429rem", // 20px
+	LabelLargeTracking: "0.1px",
+
+	LabelMediumFont: font,
+	LabelMediumWeight: 500,
+	LabelMediumSize: "0.857rem", // 12px
+	LabelMediumLineHeight: "1.143rem", // 16px
+	LabelMediumTracking: "0.5px",
+
+	LabelSmallFont: font,
+	LabelSmallWeight: 500,
+	LabelSmallSize: "0.786rem", // 11px
+	LabelSmallLineHeight: "1.143rem", // 16px
+	LabelSmallTracking: "0.5px",
+
+	// ─── EMPHASIZED (MD3 Expressive) ────────────────────────────────────────────
+	// Emphasized styles share Font/Size/LineHeight/Tracking with baseline.
+	// Only fontWeight is elevated to create visual emphasis.
+	// Source: TypographyTokens.kt (Emphasized entries reference same scale)
+
+	DisplayLargeEmphasizedFont: font,
+	DisplayLargeEmphasizedWeight: 800,
+	DisplayLargeEmphasizedSize: "3.571rem",
+	DisplayLargeEmphasizedLineHeight: "4rem",
+	DisplayLargeEmphasizedTracking: "-0.25px",
+
+	DisplayMediumEmphasizedFont: font,
+	DisplayMediumEmphasizedWeight: 800,
+	DisplayMediumEmphasizedSize: "2.857rem",
+	DisplayMediumEmphasizedLineHeight: "3.286rem",
+	DisplayMediumEmphasizedTracking: "0px",
+
+	DisplaySmallEmphasizedFont: font,
+	DisplaySmallEmphasizedWeight: 800,
+	DisplaySmallEmphasizedSize: "2.571rem",
+	DisplaySmallEmphasizedLineHeight: "3.143rem",
+	DisplaySmallEmphasizedTracking: "0px",
+
+	HeadlineLargeEmphasizedFont: font,
+	HeadlineLargeEmphasizedWeight: 800,
+	HeadlineLargeEmphasizedSize: "2.286rem",
+	HeadlineLargeEmphasizedLineHeight: "2.857rem",
+	HeadlineLargeEmphasizedTracking: "0px",
+
+	HeadlineMediumEmphasizedFont: font,
+	HeadlineMediumEmphasizedWeight: 800,
+	HeadlineMediumEmphasizedSize: "2rem",
+	HeadlineMediumEmphasizedLineHeight: "2.571rem",
+	HeadlineMediumEmphasizedTracking: "0px",
+
+	HeadlineSmallEmphasizedFont: font,
+	HeadlineSmallEmphasizedWeight: 800,
+	HeadlineSmallEmphasizedSize: "1.714rem",
+	HeadlineSmallEmphasizedLineHeight: "2.286rem",
+	HeadlineSmallEmphasizedTracking: "0px",
+
+	TitleLargeEmphasizedFont: font,
+	TitleLargeEmphasizedWeight: 700,
+	TitleLargeEmphasizedSize: "1.571rem",
+	TitleLargeEmphasizedLineHeight: "2rem",
+	TitleLargeEmphasizedTracking: "0px",
+
+	TitleMediumEmphasizedFont: font,
+	TitleMediumEmphasizedWeight: 700,
+	TitleMediumEmphasizedSize: "1.143rem",
+	TitleMediumEmphasizedLineHeight: "1.714rem",
+	TitleMediumEmphasizedTracking: "0.15px",
+
+	TitleSmallEmphasizedFont: font,
+	TitleSmallEmphasizedWeight: 700,
+	TitleSmallEmphasizedSize: "1rem",
+	TitleSmallEmphasizedLineHeight: "1.429rem",
+	TitleSmallEmphasizedTracking: "0.1px",
+
+	BodyLargeEmphasizedFont: font,
+	BodyLargeEmphasizedWeight: 700,
+	BodyLargeEmphasizedSize: "1.143rem",
+	BodyLargeEmphasizedLineHeight: "1.714rem",
+	BodyLargeEmphasizedTracking: "0.5px",
+
+	BodyMediumEmphasizedFont: font,
+	BodyMediumEmphasizedWeight: 700,
+	BodyMediumEmphasizedSize: "1rem",
+	BodyMediumEmphasizedLineHeight: "1.429rem",
+	BodyMediumEmphasizedTracking: "0.25px",
+
+	BodySmallEmphasizedFont: font,
+	BodySmallEmphasizedWeight: 700,
+	BodySmallEmphasizedSize: "0.857rem",
+	BodySmallEmphasizedLineHeight: "1.143rem",
+	BodySmallEmphasizedTracking: "0.4px",
+
+	LabelLargeEmphasizedFont: font,
+	LabelLargeEmphasizedWeight: 800,
+	LabelLargeEmphasizedSize: "1rem",
+	LabelLargeEmphasizedLineHeight: "1.429rem",
+	LabelLargeEmphasizedTracking: "0.1px",
+
+	LabelMediumEmphasizedFont: font,
+	LabelMediumEmphasizedWeight: 800,
+	LabelMediumEmphasizedSize: "0.857rem",
+	LabelMediumEmphasizedLineHeight: "1.143rem",
+	LabelMediumEmphasizedTracking: "0.5px",
+
+	LabelSmallEmphasizedFont: font,
+	LabelSmallEmphasizedWeight: 800,
+	LabelSmallEmphasizedSize: "0.786rem",
+	LabelSmallEmphasizedLineHeight: "1.143rem",
+	LabelSmallEmphasizedTracking: "0.5px",
+} as const;
+
+export type TypeScaleTokensType = typeof TypeScaleTokens;

package/src/ui/typography/typography-key-tokens.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 enum TypographyKeyTokens {
+	// ─── Baseline (15) ──────────────────────────────────────────────────────
+	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",
+
+	// ─── Emphasized (15) - MD3 Expressive ───────────────────────────────────
+	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",
+}