@bug-on/m3-expressive 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/buttons.d.mts +3 -3
- package/dist/buttons.d.ts +3 -3
- package/dist/buttons.js +708 -606
- package/dist/buttons.js.map +1 -1
- package/dist/buttons.mjs +707 -605
- package/dist/buttons.mjs.map +1 -1
- package/dist/core-Bc5Wj_pc.d.ts +497 -0
- package/dist/core-D4048_K5.d.mts +497 -0
- package/dist/core.d.mts +6 -422
- package/dist/core.d.ts +6 -422
- package/dist/core.js +223 -129
- package/dist/core.js.map +1 -1
- package/dist/core.mjs +224 -130
- package/dist/core.mjs.map +1 -1
- package/dist/feedback.js +85 -61
- package/dist/feedback.js.map +1 -1
- package/dist/feedback.mjs +85 -61
- package/dist/feedback.mjs.map +1 -1
- package/dist/forms.d.mts +2 -2
- package/dist/forms.d.ts +2 -2
- package/dist/forms.js +70 -8
- package/dist/forms.js.map +1 -1
- package/dist/forms.mjs +70 -8
- package/dist/forms.mjs.map +1 -1
- package/dist/{icon-button-D-gs0gfj.d.mts → icon-button-sSt6PPLg.d.mts} +6 -0
- package/dist/{icon-button-D-gs0gfj.d.ts → icon-button-sSt6PPLg.d.ts} +6 -0
- package/dist/index.css +6 -1
- package/dist/index.d.mts +68 -6
- package/dist/index.d.ts +68 -6
- package/dist/index.js +1177 -580
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1172 -583
- package/dist/index.mjs.map +1 -1
- package/dist/layout.d.mts +18 -1
- package/dist/layout.d.ts +18 -1
- package/dist/layout.js +94 -8
- package/dist/layout.js.map +1 -1
- package/dist/layout.mjs +94 -8
- package/dist/layout.mjs.map +1 -1
- package/dist/{md3-DFhj-NZj.d.mts → md3-Dty-Qcad.d.mts} +7 -1
- package/dist/{md3-DFhj-NZj.d.ts → md3-Dty-Qcad.d.ts} +7 -1
- package/dist/navigation.d.mts +134 -9
- package/dist/navigation.d.ts +134 -9
- package/dist/navigation.js +403 -93
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +397 -94
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlays.js +214 -189
- package/dist/overlays.js.map +1 -1
- package/dist/overlays.mjs +176 -151
- package/dist/overlays.mjs.map +1 -1
- package/dist/pickers.js +222 -197
- package/dist/pickers.js.map +1 -1
- package/dist/pickers.mjs +189 -164
- package/dist/pickers.mjs.map +1 -1
- package/dist/{split-button-trailing-uncheckable-BRPuTqi1.d.mts → split-button-trailing-uncheckable-BcPD_7uK.d.ts} +73 -7
- package/dist/{split-button-trailing-uncheckable-CjOFCoyW.d.ts → split-button-trailing-uncheckable-DtFJkTFr.d.mts} +73 -7
- package/dist/{text-field-eAIpz9z1.d.mts → text-field-T4Rg-9Bw.d.mts} +7 -0
- package/dist/{text-field-eAIpz9z1.d.ts → text-field-T4Rg-9Bw.d.ts} +7 -0
- package/package.json +4 -4
|
@@ -61,6 +61,12 @@ interface BaseIconButtonProps extends MotionButtonProps {
|
|
|
61
61
|
* @see https://m3.material.io/components/icon-buttons/accessibility
|
|
62
62
|
*/
|
|
63
63
|
"aria-label": string;
|
|
64
|
+
/**
|
|
65
|
+
* Change the component to the underlying child element and merge props/behavior.
|
|
66
|
+
* Useful when wrapping in Next.js `<Link>` or custom anchor tags.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
asChild?: boolean;
|
|
64
70
|
}
|
|
65
71
|
/**
|
|
66
72
|
* Complete `IconButton` props — discriminated union that enforces
|
|
@@ -61,6 +61,12 @@ interface BaseIconButtonProps extends MotionButtonProps {
|
|
|
61
61
|
* @see https://m3.material.io/components/icon-buttons/accessibility
|
|
62
62
|
*/
|
|
63
63
|
"aria-label": string;
|
|
64
|
+
/**
|
|
65
|
+
* Change the component to the underlying child element and merge props/behavior.
|
|
66
|
+
* Useful when wrapping in Next.js `<Link>` or custom anchor tags.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
asChild?: boolean;
|
|
64
70
|
}
|
|
65
71
|
/**
|
|
66
72
|
* Complete `IconButton` props — discriminated union that enforces
|
package/dist/index.css
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
/* @bug-on/m3-tokens — MD3 System Color Tokens */
|
|
2
|
-
/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
|
|
2
|
+
/* MD3 Expressive System Color Tokens — Light Theme (Baseline Scheme)
|
|
3
3
|
*
|
|
4
|
+
* Spec: Material 3 Expressive 2025 (SpecVersion '2025')
|
|
4
5
|
* Mapping: PaletteTokens → ColorLightTokens → CSS variable
|
|
5
6
|
* Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
|
|
7
|
+
*
|
|
8
|
+
* Static fallback for SSR / no-JS environments.
|
|
9
|
+
* At runtime, MD3ThemeProvider overrides all --md-sys-color-* via
|
|
10
|
+
* element.style.setProperty() using the dynamic color engine (theme-utils.ts).
|
|
6
11
|
*/
|
|
7
12
|
:root {
|
|
8
13
|
/* ── Primary ─────────────────────────────────────────────────────────── */
|
package/dist/index.d.mts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-D4048_K5.mjs';
|
|
2
|
+
export { G as GenerateM3ThemeOptions, I as Icon, a as IconProps, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-D4048_K5.mjs';
|
|
2
3
|
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';
|
|
3
|
-
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-
|
|
4
|
-
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';
|
|
4
|
+
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.mjs';
|
|
5
|
+
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, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.mjs';
|
|
5
6
|
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';
|
|
6
|
-
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-
|
|
7
|
-
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-
|
|
7
|
+
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-DtFJkTFr.mjs';
|
|
8
|
+
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-sSt6PPLg.mjs';
|
|
8
9
|
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';
|
|
9
|
-
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-
|
|
10
|
+
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-T4Rg-9Bw.mjs';
|
|
10
11
|
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';
|
|
11
12
|
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-64FGhDxL.mjs';
|
|
12
13
|
export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
|
|
@@ -22,3 +23,64 @@ import 'class-variance-authority/types';
|
|
|
22
23
|
import 'class-variance-authority';
|
|
23
24
|
import '@radix-ui/react-dialog';
|
|
24
25
|
import '@radix-ui/react-scroll-area';
|
|
26
|
+
|
|
27
|
+
interface CreateMd3ThemeOptions {
|
|
28
|
+
/** Seed color in hex format, e.g. `"#6750A4"`. */
|
|
29
|
+
seedColor: string;
|
|
30
|
+
/** Whether to generate a dark scheme. Defaults to `false`. */
|
|
31
|
+
isDark?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Color scheme variant. Defaults to `"expressive"` (MD3 Expressive 2025).
|
|
34
|
+
* @see SchemeVariant
|
|
35
|
+
*/
|
|
36
|
+
variant?: SchemeVariant;
|
|
37
|
+
/**
|
|
38
|
+
* Contrast adjustment. Defaults to `0` (standard).
|
|
39
|
+
* - `0` — Standard
|
|
40
|
+
* - `0.5` — Medium contrast
|
|
41
|
+
* - `1` — Maximum contrast (WCAG AAA)
|
|
42
|
+
*/
|
|
43
|
+
contrastLevel?: ContrastLevel;
|
|
44
|
+
}
|
|
45
|
+
interface Md3ThemeResult {
|
|
46
|
+
/**
|
|
47
|
+
* Flat map of CSS custom properties that can be injected into a style block.
|
|
48
|
+
* Keys use `--md-sys-color-*` naming.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* Object.entries(cssVariables).forEach(([k, v]) => {
|
|
52
|
+
* document.documentElement.style.setProperty(k, v);
|
|
53
|
+
* });
|
|
54
|
+
*/
|
|
55
|
+
cssVariables: Record<string, string>;
|
|
56
|
+
/** Fully-typed color scheme object with camelCase role names. */
|
|
57
|
+
colorScheme: MD3ColorScheme;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* High-level one-call API to generate a Material 3 Expressive theme.
|
|
61
|
+
*
|
|
62
|
+
* Returns both a CSS variable map (for injection into the DOM or SSR style tags)
|
|
63
|
+
* and a typed `MD3ColorScheme` object for use in TypeScript.
|
|
64
|
+
*
|
|
65
|
+
* Uses **SpecVersion 2025** and **Variant.EXPRESSIVE** by default, aligning with
|
|
66
|
+
* the MD3 Expressive 2025 color specification.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* const { cssVariables } = createMd3ExpressiveTheme({ seedColor: "#6750A4" });
|
|
70
|
+
* // Inject at runtime:
|
|
71
|
+
* for (const [k, v] of Object.entries(cssVariables)) {
|
|
72
|
+
* document.documentElement.style.setProperty(k, v);
|
|
73
|
+
* }
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* // High-contrast dark scheme with tonal_spot variant
|
|
77
|
+
* const theme = createMd3ExpressiveTheme({
|
|
78
|
+
* seedColor: "#00639B",
|
|
79
|
+
* isDark: true,
|
|
80
|
+
* variant: "tonal_spot",
|
|
81
|
+
* contrastLevel: 1,
|
|
82
|
+
* });
|
|
83
|
+
*/
|
|
84
|
+
declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
|
|
85
|
+
|
|
86
|
+
export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, SchemeVariant, createMd3ExpressiveTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-Bc5Wj_pc.js';
|
|
2
|
+
export { G as GenerateM3ThemeOptions, I as Icon, a as IconProps, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-Bc5Wj_pc.js';
|
|
2
3
|
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.js';
|
|
3
|
-
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-
|
|
4
|
-
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.js';
|
|
4
|
+
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.js';
|
|
5
|
+
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, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.js';
|
|
5
6
|
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.js';
|
|
6
|
-
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-
|
|
7
|
-
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-
|
|
7
|
+
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-BcPD_7uK.js';
|
|
8
|
+
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-sSt6PPLg.js';
|
|
8
9
|
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.js';
|
|
9
|
-
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-
|
|
10
|
+
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-T4Rg-9Bw.js';
|
|
10
11
|
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.js';
|
|
11
12
|
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-Bd5Qqvp9.js';
|
|
12
13
|
export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
|
|
@@ -22,3 +23,64 @@ import 'class-variance-authority/types';
|
|
|
22
23
|
import 'class-variance-authority';
|
|
23
24
|
import '@radix-ui/react-dialog';
|
|
24
25
|
import '@radix-ui/react-scroll-area';
|
|
26
|
+
|
|
27
|
+
interface CreateMd3ThemeOptions {
|
|
28
|
+
/** Seed color in hex format, e.g. `"#6750A4"`. */
|
|
29
|
+
seedColor: string;
|
|
30
|
+
/** Whether to generate a dark scheme. Defaults to `false`. */
|
|
31
|
+
isDark?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Color scheme variant. Defaults to `"expressive"` (MD3 Expressive 2025).
|
|
34
|
+
* @see SchemeVariant
|
|
35
|
+
*/
|
|
36
|
+
variant?: SchemeVariant;
|
|
37
|
+
/**
|
|
38
|
+
* Contrast adjustment. Defaults to `0` (standard).
|
|
39
|
+
* - `0` — Standard
|
|
40
|
+
* - `0.5` — Medium contrast
|
|
41
|
+
* - `1` — Maximum contrast (WCAG AAA)
|
|
42
|
+
*/
|
|
43
|
+
contrastLevel?: ContrastLevel;
|
|
44
|
+
}
|
|
45
|
+
interface Md3ThemeResult {
|
|
46
|
+
/**
|
|
47
|
+
* Flat map of CSS custom properties that can be injected into a style block.
|
|
48
|
+
* Keys use `--md-sys-color-*` naming.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* Object.entries(cssVariables).forEach(([k, v]) => {
|
|
52
|
+
* document.documentElement.style.setProperty(k, v);
|
|
53
|
+
* });
|
|
54
|
+
*/
|
|
55
|
+
cssVariables: Record<string, string>;
|
|
56
|
+
/** Fully-typed color scheme object with camelCase role names. */
|
|
57
|
+
colorScheme: MD3ColorScheme;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* High-level one-call API to generate a Material 3 Expressive theme.
|
|
61
|
+
*
|
|
62
|
+
* Returns both a CSS variable map (for injection into the DOM or SSR style tags)
|
|
63
|
+
* and a typed `MD3ColorScheme` object for use in TypeScript.
|
|
64
|
+
*
|
|
65
|
+
* Uses **SpecVersion 2025** and **Variant.EXPRESSIVE** by default, aligning with
|
|
66
|
+
* the MD3 Expressive 2025 color specification.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* const { cssVariables } = createMd3ExpressiveTheme({ seedColor: "#6750A4" });
|
|
70
|
+
* // Inject at runtime:
|
|
71
|
+
* for (const [k, v] of Object.entries(cssVariables)) {
|
|
72
|
+
* document.documentElement.style.setProperty(k, v);
|
|
73
|
+
* }
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* // High-contrast dark scheme with tonal_spot variant
|
|
77
|
+
* const theme = createMd3ExpressiveTheme({
|
|
78
|
+
* seedColor: "#00639B",
|
|
79
|
+
* isDark: true,
|
|
80
|
+
* variant: "tonal_spot",
|
|
81
|
+
* contrastLevel: 1,
|
|
82
|
+
* });
|
|
83
|
+
*/
|
|
84
|
+
declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
|
|
85
|
+
|
|
86
|
+
export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, SchemeVariant, createMd3ExpressiveTheme };
|