@bug-on/m3-expressive 1.0.0

package/dist/icon-button-D-gs0gfj.d.mts

@@ -0,0 +1,136 @@
+import { HTMLMotionProps } from 'motion/react';
+import * as React from 'react';
+
+/**
+ * @file icon-button.tsx
+ *
+ * MD3 Expressive Icon Button component.
+ *
+ * An icon-only button with shape morphing, ripple effect, loading state,
+ * and toggle variant. Requires `aria-label` for accessibility since there
+ * is no visible text label.
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+
+type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+/**
+ * Base props for the Icon Button component.
+ *
+ * @see {@link IconButtonProps} for the full discriminated union.
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+interface BaseIconButtonProps extends MotionButtonProps {
+    /**
+     * Visual color style following MD3 color roles.
+     * @default "standard"
+     */
+    colorStyle?: "standard" | "filled" | "tonal" | "outlined";
+    /**
+     * Button container size.
+     * Sizes: XS=32dp, SM=40dp, MD=56dp, LG=96dp, XL=136dp.
+     * @default "sm"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Container shape controlling border-radius morphing.
+     * - `round`: fully circular (CornerFull).
+     * - `square`: rounded square (CornerMedium–CornerExtraLarge per size).
+     * @default "round"
+     */
+    shape?: "round" | "square";
+    /**
+     * When `true`, replaces the icon with an animated loading indicator.
+     * Interaction is blocked and `aria-busy` is set.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Spinner style shown while `loading={true}`.
+     * @default "loading-indicator"
+     */
+    loadingVariant?: "loading-indicator" | "circular";
+    /** Explicit icon size override in px */
+    iconSize?: number | "inherit";
+    /** Icon content — typically a single SVG icon component. */
+    children: React.ReactNode;
+    /**
+     * Accessible label — **REQUIRED** because icon buttons have no visible text.
+     *
+     * @example "Close", "Add to favourites", "Toggle dark mode"
+     * @see https://m3.material.io/components/icon-buttons/accessibility
+     */
+    "aria-label": string;
+}
+/**
+ * Complete `IconButton` props — discriminated union that enforces
+ * `selected` is only valid with `variant="toggle"`.
+ *
+ * @example
+ * ```tsx
+ * // Standard
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
+ *
+ * // Toggle
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isLiked}
+ *   aria-label={isLiked ? "Unlike" : "Like"}
+ *   colorStyle="filled"
+ *   onClick={() => setIsLiked(!isLiked)}
+ * >
+ *   <HeartIcon />
+ * </IconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+type IconButtonProps = BaseIconButtonProps & ({
+    variant?: "default";
+    selected?: never;
+} | {
+    variant: "toggle";
+    selected: boolean;
+});
+/**
+ * MD3 Expressive Icon Button.
+ *
+ * An icon-only button with spring shape morphing, ripple effect, loading state support,
+ * and an optional toggle variant. Compliant with MD3 Expressive sizing and WCAG 2.5.5
+ * (touch target minimum for XS and SM sizes).
+ *
+ * @remarks
+ * - `aria-label` is **required** — icon buttons have no visible text label.
+ * - `variant="toggle"` requires `selected: boolean`.
+ * - Touch target is automatically extended to 48dp for `xs` and `sm` sizes.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
+ *
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isBookmarked}
+ *   aria-label={isBookmarked ? "Remove bookmark" : "Bookmark"}
+ *   colorStyle="filled"
+ *   onClick={toggleBookmark}
+ * >
+ *   <BookmarkIcon />
+ * </IconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+declare const IconButton: React.NamedExoticComponent<(Omit<BaseIconButtonProps & {
+    variant?: "default";
+    selected?: never;
+}, "ref"> | Omit<BaseIconButtonProps & {
+    variant: "toggle";
+    selected: boolean;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+
+export { type BaseIconButtonProps as B, IconButton as I, type IconButtonProps as a };

package/dist/icon-button-D-gs0gfj.d.ts

@@ -0,0 +1,136 @@
+import { HTMLMotionProps } from 'motion/react';
+import * as React from 'react';
+
+/**
+ * @file icon-button.tsx
+ *
+ * MD3 Expressive Icon Button component.
+ *
+ * An icon-only button with shape morphing, ripple effect, loading state,
+ * and toggle variant. Requires `aria-label` for accessibility since there
+ * is no visible text label.
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+
+type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+/**
+ * Base props for the Icon Button component.
+ *
+ * @see {@link IconButtonProps} for the full discriminated union.
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+interface BaseIconButtonProps extends MotionButtonProps {
+    /**
+     * Visual color style following MD3 color roles.
+     * @default "standard"
+     */
+    colorStyle?: "standard" | "filled" | "tonal" | "outlined";
+    /**
+     * Button container size.
+     * Sizes: XS=32dp, SM=40dp, MD=56dp, LG=96dp, XL=136dp.
+     * @default "sm"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Container shape controlling border-radius morphing.
+     * - `round`: fully circular (CornerFull).
+     * - `square`: rounded square (CornerMedium–CornerExtraLarge per size).
+     * @default "round"
+     */
+    shape?: "round" | "square";
+    /**
+     * When `true`, replaces the icon with an animated loading indicator.
+     * Interaction is blocked and `aria-busy` is set.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Spinner style shown while `loading={true}`.
+     * @default "loading-indicator"
+     */
+    loadingVariant?: "loading-indicator" | "circular";
+    /** Explicit icon size override in px */
+    iconSize?: number | "inherit";
+    /** Icon content — typically a single SVG icon component. */
+    children: React.ReactNode;
+    /**
+     * Accessible label — **REQUIRED** because icon buttons have no visible text.
+     *
+     * @example "Close", "Add to favourites", "Toggle dark mode"
+     * @see https://m3.material.io/components/icon-buttons/accessibility
+     */
+    "aria-label": string;
+}
+/**
+ * Complete `IconButton` props — discriminated union that enforces
+ * `selected` is only valid with `variant="toggle"`.
+ *
+ * @example
+ * ```tsx
+ * // Standard
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
+ *
+ * // Toggle
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isLiked}
+ *   aria-label={isLiked ? "Unlike" : "Like"}
+ *   colorStyle="filled"
+ *   onClick={() => setIsLiked(!isLiked)}
+ * >
+ *   <HeartIcon />
+ * </IconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+type IconButtonProps = BaseIconButtonProps & ({
+    variant?: "default";
+    selected?: never;
+} | {
+    variant: "toggle";
+    selected: boolean;
+});
+/**
+ * MD3 Expressive Icon Button.
+ *
+ * An icon-only button with spring shape morphing, ripple effect, loading state support,
+ * and an optional toggle variant. Compliant with MD3 Expressive sizing and WCAG 2.5.5
+ * (touch target minimum for XS and SM sizes).
+ *
+ * @remarks
+ * - `aria-label` is **required** — icon buttons have no visible text label.
+ * - `variant="toggle"` requires `selected: boolean`.
+ * - Touch target is automatically extended to 48dp for `xs` and `sm` sizes.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
+ *
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isBookmarked}
+ *   aria-label={isBookmarked ? "Remove bookmark" : "Bookmark"}
+ *   colorStyle="filled"
+ *   onClick={toggleBookmark}
+ * >
+ *   <BookmarkIcon />
+ * </IconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+declare const IconButton: React.NamedExoticComponent<(Omit<BaseIconButtonProps & {
+    variant?: "default";
+    selected?: never;
+}, "ref"> | Omit<BaseIconButtonProps & {
+    variant: "toggle";
+    selected: boolean;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+
+export { type BaseIconButtonProps as B, IconButton as I, type IconButtonProps as a };

package/dist/index.css

@@ -0,0 +1,309 @@
+/* @bug-on/m3-tokens — MD3 System Color Tokens */
+/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
+ *
+ * Mapping: PaletteTokens → ColorLightTokens → CSS variable
+ * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
+ */
+:root {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #6750a4; /* Primary40  */
+	--md-sys-color-on-primary: #ffffff; /* Primary100 */
+	--md-sys-color-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-on-primary-container: #21005d; /* Primary10  */
+	--md-sys-color-inverse-primary: #d0bcff; /* Primary80  */
+
+	/* ── Primary Fixed (stable across light/dark) ────────────────────────── */
+	--md-sys-color-primary-fixed: #eaddff; /* Primary90 */
+	--md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
+	--md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
+	--md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #625b71; /* Secondary40  */
+	--md-sys-color-on-secondary: #ffffff; /* Secondary100 */
+	--md-sys-color-secondary-container: #e8def8; /* Secondary90  */
+	--md-sys-color-on-secondary-container: #1d192b; /* Secondary10  */
+
+	/* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
+	--md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
+	--md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
+	--md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
+	--md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #7d5260; /* Tertiary40  */
+	--md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
+	--md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90  */
+	--md-sys-color-on-tertiary-container: #31111d; /* Tertiary10  */
+
+	/* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
+	--md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
+	--md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
+	--md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
+	--md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #b3261e; /* Error40  */
+	--md-sys-color-on-error: #ffffff; /* Error100 */
+	--md-sys-color-error-container: #f9dedc; /* Error90  */
+	--md-sys-color-on-error-container: #410e0b; /* Error10  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #fef7ff; /* Neutral98 */
+	--md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
+	--md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
+	--md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
+	--md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
+	--md-sys-color-surface-tint: #6750a4; /* = primary */
+	--md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
+	--md-sys-color-surface-container-low: #f7f2fa; /* Neutral96  */
+	--md-sys-color-surface-container: #f3edf7; /* Neutral94  */
+	--md-sys-color-surface-container-high: #ece6f0; /* Neutral92  */
+	--md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #313033; /* Neutral20 */
+	--md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
+	--md-sys-color-on-background: #1c1b1f; /* Neutral10  */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #79747e; /* NeutralVariant50 */
+	--md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000; /* Neutral0 */
+	--md-sys-color-shadow: #000000; /* Neutral0 */
+
+	/* ── Indicator tokens — Loading & Progress ───────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+/* Dark Theme overrides
+ * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
+ */
+[data-theme="dark"],
+.dark {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #d0bcff; /* Primary80  */
+	--md-sys-color-on-primary: #381e72; /* Primary20  */
+	--md-sys-color-primary-container: #4f378b; /* Primary30  */
+	--md-sys-color-on-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-inverse-primary: #6750a4; /* Primary40  */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #ccc2dc; /* Secondary80  */
+	--md-sys-color-on-secondary: #332d41; /* Secondary20  */
+	--md-sys-color-secondary-container: #4a4458; /* Secondary30  */
+	--md-sys-color-on-secondary-container: #e8def8; /* Secondary90  */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #efb8c8; /* Tertiary80  */
+	--md-sys-color-on-tertiary: #492532; /* Tertiary20  */
+	--md-sys-color-tertiary-container: #633b48; /* Tertiary30  */
+	--md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90  */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #f2b8b5; /* Error80  */
+	--md-sys-color-on-error: #601410; /* Error20  */
+	--md-sys-color-error-container: #8c1d18; /* Error30  */
+	--md-sys-color-on-error-container: #f9dedc; /* Error90  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #141218; /* Neutral6   */
+	--md-sys-color-on-surface: #e6e1e5; /* Neutral90  */
+	--md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
+	--md-sys-color-surface-dim: #141218; /* Neutral6  */
+	--md-sys-color-surface-bright: #3b383e; /* Neutral24 */
+	--md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
+	--md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4   */
+	--md-sys-color-surface-container-low: #1d1b20; /* Neutral10  */
+	--md-sys-color-surface-container: #211f26; /* Neutral12  */
+	--md-sys-color-surface-container-high: #2b2930; /* Neutral17  */
+	--md-sys-color-surface-container-highest: #36343b; /* Neutral22  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
+	--md-sys-color-inverse-on-surface: #313033; /* Neutral20 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
+	--md-sys-color-on-background: #e6e1e5; /* Neutral90 */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #938f99; /* NeutralVariant60 */
+	--md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000;
+	--md-sys-color-shadow: #000000;
+
+	/* ── Indicator tokens — Dark ─────────────────────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+:root {
+	/* ── MD3 Expressive Corner Radius Scale (10 levels) ─────────────────────── */
+	/* Source: https://m3.material.io/styles/shape/corner-radius-scale           */
+
+	--md-sys-shape-corner-none: 0px;
+	--md-sys-shape-corner-extra-small: 4px;
+	--md-sys-shape-corner-small: 8px;
+	--md-sys-shape-corner-medium: 12px;
+	--md-sys-shape-corner-large: 16px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-large-increased: 20px;
+	--md-sys-shape-corner-extra-large: 28px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-large-increased: 32px;
+	/* New in M3 Expressive (May 2025) */
+	--md-sys-shape-corner-extra-extra-large: 48px;
+	--md-sys-shape-corner-full: 9999px;
+}
+
+
+/* @bug-on/m3-expressive — Component Base Reset & Source Scan Configuration */
+@source "./**/*.{js,mjs}";
+/* @bug-on/m3-expressive - Base Reset Styles */
+
+/**
+ * Hide default browser UI elements that conflict with MD3 custom UI.
+ * - Hide search clear/decoration buttons in WebKit/Blink (Chrome, Safari, Edge).
+ * - Hide IE/Edge specific clear and reveal (password) buttons.
+ */
+
+/* Hide default search clear button and related decorations */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+	-webkit-appearance: none;
+}
+
+/* Hide IE/Edge clear and reveal (password toggle) buttons */
+input::-ms-clear,
+input::-ms-reveal {
+	display: none;
+	width: 0;
+	height: 0;
+}
+
+
+/* @bug-on/m3-expressive — Tailwind v4 Theme Registration */
+/* Registers MD3 tokens as Tailwind utilities. No manual @theme mapping needed. */
+@theme {
+  /* ── Colors: Primary ── */
+  --color-m3-primary: var(--md-sys-color-primary);
+  --color-m3-on-primary: var(--md-sys-color-on-primary);
+  --color-m3-primary-container: var(--md-sys-color-primary-container);
+  --color-m3-on-primary-container: var(--md-sys-color-on-primary-container);
+  --color-m3-primary-fixed: var(--md-sys-color-primary-fixed);
+  --color-m3-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+  --color-m3-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
+  --color-m3-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant);
+
+  /* ── Colors: Secondary ── */
+  --color-m3-secondary: var(--md-sys-color-secondary);
+  --color-m3-on-secondary: var(--md-sys-color-on-secondary);
+  --color-m3-secondary-container: var(--md-sys-color-secondary-container);
+  --color-m3-on-secondary-container: var(--md-sys-color-on-secondary-container);
+  --color-m3-secondary-fixed: var(--md-sys-color-secondary-fixed);
+  --color-m3-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
+  --color-m3-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
+  --color-m3-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant);
+
+  /* ── Colors: Tertiary ── */
+  --color-m3-tertiary: var(--md-sys-color-tertiary);
+  --color-m3-on-tertiary: var(--md-sys-color-on-tertiary);
+  --color-m3-tertiary-container: var(--md-sys-color-tertiary-container);
+  --color-m3-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+  --color-m3-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
+  --color-m3-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
+  --color-m3-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
+  --color-m3-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant);
+
+  /* ── Colors: Error ── */
+  --color-m3-error: var(--md-sys-color-error);
+  --color-m3-on-error: var(--md-sys-color-on-error);
+  --color-m3-error-container: var(--md-sys-color-error-container);
+  --color-m3-on-error-container: var(--md-sys-color-on-error-container);
+
+  /* ── Colors: Surface ── */
+  --color-m3-surface: var(--md-sys-color-surface);
+  --color-m3-surface-dim: var(--md-sys-color-surface-dim);
+  --color-m3-surface-bright: var(--md-sys-color-surface-bright);
+  --color-m3-on-surface: var(--md-sys-color-on-surface);
+  --color-m3-surface-variant: var(--md-sys-color-surface-variant);
+  --color-m3-on-surface-variant: var(--md-sys-color-on-surface-variant);
+  --color-m3-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
+  --color-m3-surface-container-low: var(--md-sys-color-surface-container-low);
+  --color-m3-surface-container: var(--md-sys-color-surface-container);
+  --color-m3-surface-container-high: var(--md-sys-color-surface-container-high);
+  --color-m3-surface-container-highest: var(--md-sys-color-surface-container-highest);
+
+  /* ── Colors: Inverse ── */
+  --color-m3-inverse-surface: var(--md-sys-color-inverse-surface);
+  --color-m3-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+  --color-m3-inverse-primary: var(--md-sys-color-inverse-primary);
+
+  /* ── Colors: Outline / Shadow / Scrim ── */
+  --color-m3-outline: var(--md-sys-color-outline);
+  --color-m3-outline-variant: var(--md-sys-color-outline-variant);
+  --color-m3-shadow: var(--md-sys-color-shadow);
+  --color-m3-scrim: var(--md-sys-color-scrim);
+  --color-m3-surface-tint: var(--md-sys-color-surface-tint);
+
+  /* ── Colors: Background ── */
+  --color-m3-background: var(--md-sys-color-background);
+  --color-m3-on-background: var(--md-sys-color-on-background);
+
+  /* ── Colors: Navigation Indicator ── */
+  --color-m3-indicator-active: var(--md-sys-color-indicator-active);
+  --color-m3-indicator-container: var(--md-sys-color-indicator-container);
+  --color-m3-indicator-contained-active: var(--md-sys-color-indicator-contained-active);
+  --color-m3-indicator-contained-container: var(--md-sys-color-indicator-contained-container);
+  --color-m3-indicator-track: var(--md-sys-color-indicator-track);
+  --color-m3-indicator-stop: var(--md-sys-color-indicator-stop);
+
+  /* ── Shape: Corner Radius Scale (10 levels, M3 Expressive) ── */
+  --radius-m3-none: var(--md-sys-shape-corner-none, 0px);
+  --radius-m3-xs: var(--md-sys-shape-corner-extra-small, 4px);
+  --radius-m3-sm: var(--md-sys-shape-corner-small, 8px);
+  --radius-m3-md: var(--md-sys-shape-corner-medium, 12px);
+  --radius-m3-lg: var(--md-sys-shape-corner-large, 16px);
+  --radius-m3-lg-inc: var(--md-sys-shape-corner-large-increased, 20px);
+  --radius-m3-xl: var(--md-sys-shape-corner-extra-large, 28px);
+  --radius-m3-xl-inc: var(--md-sys-shape-corner-extra-large-increased, 32px);
+  --radius-m3-xxl: var(--md-sys-shape-corner-extra-extra-large, 48px);
+  --radius-m3-full: var(--md-sys-shape-corner-full, 9999px);
+
+  /* ── Motion Easing ── */
+  --ease-m3-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --ease-m3-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --ease-m3-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --ease-m3-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-m3-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --ease-m3-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+}

package/dist/index.css.d.ts

@@ -0,0 +1,2 @@
+// CSS module — no runtime types
+export {};

package/dist/index.d.mts

@@ -0,0 +1,24 @@
+export { Icon, IconProps, MD3ColorScheme, MD3ThemeProvider, MD3ThemeProviderProps, MaterialSymbolsPreconnect, Ripple, RippleOrigin, RippleProps, ThemeMode, UseRippleStateOptions, applyTheme, cn, generateM3Theme, resolveMode, useDOMRipple, useMediaQuery, useRipple, useRippleState, useTheme, useThemeMode } from './core.mjs';
+export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic, CubicPair, DISTANCE_EPSILON, DoubleMapper, EdgeFeature, FLOAT_PI, Feature, MD3CornerRadius, MD3CornerRadiusToken, MD3ShapeName, MD3Shapes, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, MutableCubic, Point, PointTransformer, RoundedPolygon, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UNROUNDED, UseShapeMorphResult, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, getDirection, getDistance, getDistanceSquared, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph } from './shapes.mjs';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-DFhj-NZj.mjs';
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarProps, NavigationBarVariant, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, SubMenuProps, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonSize, ToolbarIconButtonTokens, ToolbarIconButtonVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors } from './navigation.mjs';
+export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-MXj_kyNt.mjs';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-D-gs0gfj.mjs';
+export { Card, CardProps, CodeBlock, CodeBlockProps, Divider, DividerProps, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, useListContext } from './layout.mjs';
+export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-eAIpz9z1.mjs';
+export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DateLocale, DatePicker, DatePickerDialog, DatePickerDialogProps, DatePickerInput, DatePickerInputProps, DatePickerProps, DatePickerState, DateRange, DateRangePicker, DateRangePickerProps, DateRangePickerState, DisplayMode, SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimeInputProps, TimePicker, TimePickerDialog, TimePickerDialogProps, TimePickerLayout, TimePickerProps, TimePickerSelectionMode, TimePickerState, UseDatePickerStateOptions, UseDateRangePickerStateOptions, UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState } from './pickers.mjs';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-BY6VCC8p.mjs';
+export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
+export { 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, u as useTypography } from './typography-339RV6v7.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'motion';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dropdown-menu';
+import 'motion/react';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-scroll-area';