@bug-on/m3-expressive 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client";
 import * as React59 from 'react';
 import { createContext, forwardRef, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, useReducer, useContext, useId, cloneElement, createElement } from 'react';
+import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
@@ -118,6 +118,143 @@ function useRipple(options = {}) {
   );
   return { rippleRef: ref, onPointerDown };
 }
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new SchemeExpressive(hct, isDark, contrastLevel, spec);
+  }
+}
+function argbFromHex(hex) {
+  const sanitized = hex.replace(/^#/, "");
+  const r = Number.parseInt(sanitized.substring(0, 2), 16);
+  const g = Number.parseInt(sanitized.substring(2, 4), 16);
+  const b = Number.parseInt(sanitized.substring(4, 6), 16);
+  return (4278190080 | r << 16 | g << 8 | b) >>> 0;
+}
+function generateM3Theme(sourceColorHex, mode = "light", options = {}) {
+  const { variant = "expressive", contrastLevel = 0 } = options;
+  const isDark = mode === "dark";
+  const scheme = createDynamicScheme(
+    sourceColorHex,
+    isDark,
+    variant,
+    contrastLevel
+  );
+  const hex = (argb) => hexFromArgb(argb);
+  return {
+    // Primary
+    primary: hex(scheme.primary),
+    onPrimary: hex(scheme.onPrimary),
+    primaryContainer: hex(scheme.primaryContainer),
+    onPrimaryContainer: hex(scheme.onPrimaryContainer),
+    inversePrimary: hex(scheme.inversePrimary),
+    primaryFixed: hex(scheme.primaryFixed),
+    primaryFixedDim: hex(scheme.primaryFixedDim),
+    onPrimaryFixed: hex(scheme.onPrimaryFixed),
+    onPrimaryFixedVariant: hex(scheme.onPrimaryFixedVariant),
+    primaryDim: hex(scheme.primaryDim),
+    // Secondary
+    secondary: hex(scheme.secondary),
+    onSecondary: hex(scheme.onSecondary),
+    secondaryContainer: hex(scheme.secondaryContainer),
+    onSecondaryContainer: hex(scheme.onSecondaryContainer),
+    secondaryFixed: hex(scheme.secondaryFixed),
+    secondaryFixedDim: hex(scheme.secondaryFixedDim),
+    onSecondaryFixed: hex(scheme.onSecondaryFixed),
+    onSecondaryFixedVariant: hex(scheme.onSecondaryFixedVariant),
+    secondaryDim: hex(scheme.secondaryDim),
+    // Tertiary
+    tertiary: hex(scheme.tertiary),
+    onTertiary: hex(scheme.onTertiary),
+    tertiaryContainer: hex(scheme.tertiaryContainer),
+    onTertiaryContainer: hex(scheme.onTertiaryContainer),
+    tertiaryFixed: hex(scheme.tertiaryFixed),
+    tertiaryFixedDim: hex(scheme.tertiaryFixedDim),
+    onTertiaryFixed: hex(scheme.onTertiaryFixed),
+    onTertiaryFixedVariant: hex(scheme.onTertiaryFixedVariant),
+    tertiaryDim: hex(scheme.tertiaryDim),
+    // Error
+    error: hex(scheme.error),
+    onError: hex(scheme.onError),
+    errorContainer: hex(scheme.errorContainer),
+    onErrorContainer: hex(scheme.onErrorContainer),
+    // Surface
+    surface: hex(scheme.surface),
+    onSurface: hex(scheme.onSurface),
+    surfaceVariant: hex(scheme.surfaceVariant),
+    onSurfaceVariant: hex(scheme.onSurfaceVariant),
+    surfaceTint: hex(scheme.surfaceTint),
+    surfaceDim: hex(scheme.surfaceDim),
+    surfaceBright: hex(scheme.surfaceBright),
+    surfaceContainerLowest: hex(scheme.surfaceContainerLowest),
+    surfaceContainerLow: hex(scheme.surfaceContainerLow),
+    surfaceContainer: hex(scheme.surfaceContainer),
+    surfaceContainerHigh: hex(scheme.surfaceContainerHigh),
+    surfaceContainerHighest: hex(scheme.surfaceContainerHighest),
+    // Inverse
+    inverseSurface: hex(scheme.inverseSurface),
+    inverseOnSurface: hex(scheme.inverseOnSurface),
+    // Background
+    background: hex(scheme.background),
+    onBackground: hex(scheme.onBackground),
+    // Outline
+    outline: hex(scheme.outline),
+    outlineVariant: hex(scheme.outlineVariant),
+    // Utility
+    shadow: hex(scheme.shadow),
+    scrim: hex(scheme.scrim)
+  };
+}
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement, options = {}) {
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved, options);
+  for (const [key, value] of Object.entries(colors)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
+    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
+    root.style.setProperty(`--color-m3-${kebabKey}`, value);
+  }
+  root.setAttribute("data-theme", resolved);
+}
+
+// src/lib/create-theme.ts
+function createMd3ExpressiveTheme(options) {
+  const { seedColor, isDark = false, variant, contrastLevel } = options;
+  const themeOptions = { variant, contrastLevel };
+  const colorScheme = generateM3Theme(
+    seedColor,
+    isDark ? "dark" : "light",
+    themeOptions
+  );
+  const cssVariables = schemeToCssVariables(colorScheme);
+  return { cssVariables, colorScheme };
+}
+function schemeToCssVariables(scheme) {
+  const result = {};
+  for (const [key, value] of Object.entries(scheme)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
+    result[`--md-sys-color-${kebabKey}`] = value;
+  }
+  return result;
+}
 function MaterialSymbolsPreconnect({
   variants = ["outlined"]
 }) {
@@ -157,78 +294,6 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
-function resolveMode(mode) {
-  if (mode !== "system") return mode;
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function generateM3Theme(sourceColorHex, mode = "light") {
-  const sourceColor = argbFromHex(sourceColorHex);
-  const theme = themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => hexFromArgb(palette.tone(t));
-  return {
-    primary: hexFromArgb(scheme.primary),
-    onPrimary: hexFromArgb(scheme.onPrimary),
-    primaryContainer: hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: hexFromArgb(scheme.secondary),
-    onSecondary: hexFromArgb(scheme.onSecondary),
-    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: hexFromArgb(scheme.tertiary),
-    onTertiary: hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: hexFromArgb(scheme.error),
-    onError: hexFromArgb(scheme.onError),
-    errorContainer: hexFromArgb(scheme.errorContainer),
-    onErrorContainer: hexFromArgb(scheme.onErrorContainer),
-    surface: hexFromArgb(scheme.surface),
-    onSurface: hexFromArgb(scheme.onSurface),
-    surfaceVariant: hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: hexFromArgb(scheme.primary),
-    // Surface container roles from neutral palette tones
-    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
-    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
-    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
-    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
-    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
-    inverseSurface: hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
-    background: hexFromArgb(scheme.background),
-    onBackground: hexFromArgb(scheme.onBackground),
-    outline: hexFromArgb(scheme.outline),
-    outlineVariant: hexFromArgb(scheme.outlineVariant),
-    shadow: hexFromArgb(scheme.shadow),
-    scrim: hexFromArgb(scheme.scrim)
-  };
-}
-function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const resolved = resolveMode(mode);
-  const colors = generateM3Theme(sourceColorHex, resolved);
-  for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
-    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
-    root.style.setProperty(`--color-m3-${kebabKey}`, value);
-  }
-  root.setAttribute("data-theme", resolved);
-}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -6559,6 +6624,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -6930,7 +7024,7 @@ var PILL_BORDER_RADIUS = 9999;
 var MIN_FLEX_GROW = 0.01;
 var PADDING_EXPAND_MULTIPLIER = 4;
 var CHECK_ICON_SIZE = 24;
-var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
   xs: 6,
   sm: 8,
@@ -9574,19 +9668,19 @@ var CardImpl = React59.forwardRef(
     const baseClass = cn(
       cardVariants({ variant }),
       // Disabled state:
-      // - pointer-events-none → vô hiệu hóa tương tác hoàn toàn
+      // - pointer-events-none → disable interactions completely
       // - opacity-[0.38] → MD3 DisabledContainerOpacity
       disabled && "pointer-events-none opacity-[0.38]",
       className
     );
     const interactiveClass = cn(
-      // Xóa outline default, dùng state overlay & elevation của MD3 để biểu hiện focus
+      // Remove default outline, use MD3 state overlay & elevation for focus
       "focus-visible:outline-none focus:outline-none group",
-      // Layer overlay base pseudo-element
+      // Base pseudo-element overlay layer
       "before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200",
-      // Interactive states opacities
+      // Interactive state opacities
       "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]",
-      // Outlined interactive card: đổi màu border sang m3-outline khi focus/press/hover
+      // Outlined interactive card: change border color to m3-outline on focus/press/hover
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
     if (!isInteractive) {
@@ -12628,7 +12722,7 @@ var TimeInput = ({ state, className }) => {
                 fontWeight: 400,
                 lineHeight: 1,
                 width: 24,
-                // Căn theo height của input field
+                // Aligned with height of input field
                 marginTop: `${(TP_SIZE.timeFieldHeight - 57) / 2}px`
               },
               "aria-hidden": true,
@@ -13442,7 +13536,7 @@ var DrawerContent = React59.forwardRef(
       m.div,
       __spreadProps(__spreadValues({
         className: cn(
-          // MD3 Bottom Sheet shape: chỉ bo góc trên
+          // MD3 Bottom Sheet shape: top rounded corners only
           "fixed bottom-0 left-0 right-0 z-50",
           "rounded-t-[28px] bg-m3-surface-container-low",
           "flex flex-col overflow-hidden",
@@ -13471,7 +13565,7 @@ var DrawerContent = React59.forwardRef(
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
                 "transition-colors duration-200"
               ),
-              "aria-label": "\u0110\xF3ng b\u1EA3ng \u0111i\u1EC1u khi\u1EC3n",
+              "aria-label": "Close drawer panel",
               children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 20, "aria-hidden": "true" })
             }
           ),
@@ -22314,6 +22408,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -22322,6 +22418,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = useState(initialSourceColor);
   const [mode, setMode] = useState(defaultMode);
   const [isHydrated, setIsHydrated] = useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = useState("light");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemMode = () => {
+      setSystemMode(mediaQuery.matches ? "dark" : "light");
+    };
+    updateSystemMode();
+    mediaQuery.addEventListener("change", updateSystemMode);
+    return () => mediaQuery.removeEventListener("change", updateSystemMode);
+  }, []);
   useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -22333,25 +22440,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   useEffect(() => {
     if (!isHydrated) return;
-    applyTheme(sourceColor, mode);
+    applyTheme(sourceColor, effectiveMode, document.documentElement, {
+      variant,
+      contrastLevel
+    });
     if (persistToLocalStorage) {
       localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
-  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  useEffect(() => {
-    if (mode !== "system" || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyTheme(sourceColor, "system");
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [mode, sourceColor]);
-  const effectiveMode = resolveMode(mode);
+  }, [
+    sourceColor,
+    mode,
+    effectiveMode,
+    persistToLocalStorage,
+    isHydrated,
+    variant,
+    contrastLevel
+  ]);
   const themeValue = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -23663,6 +23782,6 @@ function TooltipBox({
   ] });
 }
 
-export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors };
+export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map