@bug-on/m3-expressive 1.2.3 → 1.2.5
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 +15 -0
- package/README.md +128 -41
- package/dist/buttons.d.mts +1 -1
- package/dist/buttons.d.ts +1 -1
- package/dist/buttons.js +33 -14
- package/dist/buttons.js.map +1 -1
- package/dist/buttons.mjs +33 -14
- package/dist/buttons.mjs.map +1 -1
- package/dist/forms.d.mts +2 -2
- package/dist/forms.d.ts +2 -2
- package/dist/index.d.mts +79 -7
- package/dist/index.d.ts +79 -7
- package/dist/index.js +6071 -5547
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5964 -5441
- package/dist/index.mjs.map +1 -1
- package/dist/layout.js +10 -7
- package/dist/layout.js.map +1 -1
- package/dist/layout.mjs +10 -7
- package/dist/layout.mjs.map +1 -1
- package/dist/md3-expressive-shapes-CPcfl_Hf.d.mts +498 -0
- package/dist/md3-expressive-shapes-CPcfl_Hf.d.ts +498 -0
- package/dist/navigation.d.mts +93 -20
- package/dist/navigation.d.ts +93 -20
- package/dist/navigation.js +2824 -561
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +2815 -554
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlays.d.mts +2 -2
- package/dist/overlays.d.ts +2 -2
- package/dist/shapes.d.mts +3 -498
- package/dist/shapes.d.ts +3 -498
- package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-DdEZR6Vl.d.ts} +1 -1
- package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-Dgjt739k.d.mts} +1 -1
- package/dist/{split-button-trailing-uncheckable-C-qQlyZx.d.ts → split-button-trailing-uncheckable--BhNTEJw.d.ts} +10 -5
- package/dist/{split-button-trailing-uncheckable-DHJqNeq_.d.mts → split-button-trailing-uncheckable-DPJL3bO6.d.mts} +10 -5
- package/dist/{text-field-T4Rg-9Bw.d.mts → text-field-DWC7qOvp.d.mts} +128 -128
- package/dist/{text-field-T4Rg-9Bw.d.ts → text-field-DWC7qOvp.d.ts} +128 -128
- package/package.json +3 -3
package/dist/forms.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
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,
|
|
1
|
+
import { S as SliderThumbProps } from './text-field-DWC7qOvp.mjs';
|
|
2
|
+
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, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.mjs';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import 'class-variance-authority/types';
|
|
5
5
|
import 'class-variance-authority';
|
package/dist/forms.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
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,
|
|
1
|
+
import { S as SliderThumbProps } from './text-field-DWC7qOvp.js';
|
|
2
|
+
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, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.js';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import 'class-variance-authority/types';
|
|
5
5
|
import 'class-variance-authority';
|
package/dist/index.d.mts
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-D4048_K5.mjs';
|
|
2
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';
|
|
3
|
-
export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic,
|
|
3
|
+
export { A as ANGLE_EPSILON, C as CornerFeature, a as CornerRounding, b as Cubic, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, M as MD3ShapeName, d as MD3Shapes, e as MutableCubic, P as Point, f as PointTransformer, R as RoundedPolygon, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as getDirection, s as getDistance, t as getDistanceSquared, u as interpolate, v as lerpPoint, w as point, x as positiveModulo, y as radialToCartesian, z as rotate90, B as scalePoint, G as square, H as subtractPoints, I as transformFeature, J as transformPoint } from './md3-expressive-shapes-CPcfl_Hf.mjs';
|
|
4
|
+
export { CubicPair, DoubleMapper, MD3CornerRadius, MD3CornerRadiusToken, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph } from './shapes.mjs';
|
|
4
5
|
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.mjs';
|
|
5
|
-
|
|
6
|
+
import { MenuColorVariant, MenuVariant } from './navigation.mjs';
|
|
7
|
+
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, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarLabelVisibility, NavigationBarProps, NavigationBarVariant, NavigationItemShape, 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';
|
|
6
8
|
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';
|
|
7
|
-
export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-
|
|
9
|
+
export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DPJL3bO6.mjs';
|
|
8
10
|
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.mjs';
|
|
9
11
|
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';
|
|
10
|
-
|
|
12
|
+
import { x as TextFieldProps, v as TextFieldHandle } from './text-field-DWC7qOvp.mjs';
|
|
13
|
+
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, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, w as TextFieldInputType, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.mjs';
|
|
11
14
|
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';
|
|
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,
|
|
15
|
+
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, L as Scrim, M as ScrimProps, N as SheetEdge, O as SheetState, P as SideSheet, Q as SideSheetModal, R as SideSheetModalProps, T as SideSheetProps, U as UseBottomSheetOptions, V as UseBottomSheetReturn, W as useBottomSheet } from './side-sheet-modal-Dgjt739k.mjs';
|
|
13
16
|
export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
|
|
17
|
+
import * as React from 'react';
|
|
14
18
|
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';
|
|
15
|
-
import 'react';
|
|
16
19
|
import 'react/jsx-runtime';
|
|
17
20
|
import 'clsx';
|
|
18
21
|
import 'motion';
|
|
@@ -83,4 +86,73 @@ interface Md3ThemeResult {
|
|
|
83
86
|
*/
|
|
84
87
|
declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
|
|
85
88
|
|
|
86
|
-
|
|
89
|
+
interface SelectOption {
|
|
90
|
+
/** Display label for the option */
|
|
91
|
+
label: string;
|
|
92
|
+
/** Unique value for the option */
|
|
93
|
+
value: string;
|
|
94
|
+
/** Optional disabled state for this option */
|
|
95
|
+
disabled?: boolean;
|
|
96
|
+
/** Optional leading icon for this option */
|
|
97
|
+
leadingIcon?: React.ReactNode;
|
|
98
|
+
/** Supporting text below option label */
|
|
99
|
+
supportingText?: React.ReactNode;
|
|
100
|
+
}
|
|
101
|
+
interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defaultValue" | "type" | "multiline"> {
|
|
102
|
+
/** Array of selectable options */
|
|
103
|
+
options: SelectOption[];
|
|
104
|
+
/** Controlled selected value */
|
|
105
|
+
value?: string;
|
|
106
|
+
/** Default selected value (uncontrolled) */
|
|
107
|
+
defaultValue?: string;
|
|
108
|
+
/** Callback fired when selection changes */
|
|
109
|
+
onChange?: (value: string, option?: SelectOption) => void;
|
|
110
|
+
/** Enable autocomplete mode (input filtering real-time search) */
|
|
111
|
+
searchable?: boolean;
|
|
112
|
+
/** Custom placeholder when no option is selected or when searching */
|
|
113
|
+
placeholder?: string;
|
|
114
|
+
/** Label text for the input field */
|
|
115
|
+
label?: string;
|
|
116
|
+
/** Supporting text below the input field */
|
|
117
|
+
supportingText?: string;
|
|
118
|
+
/** Color variant for the dropdown menu ('standard' | 'vibrant') */
|
|
119
|
+
colorVariant?: MenuColorVariant;
|
|
120
|
+
/** Menu visual variant ('expressive' | 'baseline') */
|
|
121
|
+
menuVariant?: MenuVariant;
|
|
122
|
+
/** Custom empty state message when searchable mode yields no results */
|
|
123
|
+
emptyText?: string;
|
|
124
|
+
/** Whether the popup menu automatically matches the input width. Default: true */
|
|
125
|
+
matchTriggerWidth?: boolean;
|
|
126
|
+
/** Additional class names for the root container */
|
|
127
|
+
className?: string;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* M3 Expressive Select component (Exposed Dropdown Menu & Autocomplete).
|
|
132
|
+
*
|
|
133
|
+
* Implements Material 3 Exposed Dropdown Menu spec (Figma Node `58966:3961`).
|
|
134
|
+
*
|
|
135
|
+
* @example
|
|
136
|
+
* // Standard Exposed Dropdown Menu
|
|
137
|
+
* <Select
|
|
138
|
+
* label="City"
|
|
139
|
+
* options={[
|
|
140
|
+
* { label: "Hanoi", value: "hn" },
|
|
141
|
+
* { label: "Ho Chi Minh City", value: "hcm" }
|
|
142
|
+
* ]}
|
|
143
|
+
* value={city}
|
|
144
|
+
* onChange={(val) => setCity(val)}
|
|
145
|
+
* />
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* // Searchable Autocomplete
|
|
149
|
+
* <Select
|
|
150
|
+
* searchable
|
|
151
|
+
* label="Search Employee"
|
|
152
|
+
* options={userList}
|
|
153
|
+
* onChange={(val, opt) => setSelected(opt)}
|
|
154
|
+
* />
|
|
155
|
+
*/
|
|
156
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
|
|
157
|
+
|
|
158
|
+
export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, MenuColorVariant, MenuVariant, SchemeVariant, Select, type SelectOption, type SelectProps, TextFieldHandle, TextFieldProps, createMd3ExpressiveTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-Bc5Wj_pc.js';
|
|
2
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';
|
|
3
|
-
export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic,
|
|
3
|
+
export { A as ANGLE_EPSILON, C as CornerFeature, a as CornerRounding, b as Cubic, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, M as MD3ShapeName, d as MD3Shapes, e as MutableCubic, P as Point, f as PointTransformer, R as RoundedPolygon, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as getDirection, s as getDistance, t as getDistanceSquared, u as interpolate, v as lerpPoint, w as point, x as positiveModulo, y as radialToCartesian, z as rotate90, B as scalePoint, G as square, H as subtractPoints, I as transformFeature, J as transformPoint } from './md3-expressive-shapes-CPcfl_Hf.js';
|
|
4
|
+
export { CubicPair, DoubleMapper, MD3CornerRadius, MD3CornerRadiusToken, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph } from './shapes.js';
|
|
4
5
|
export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.js';
|
|
5
|
-
|
|
6
|
+
import { MenuColorVariant, MenuVariant } from './navigation.js';
|
|
7
|
+
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, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarLabelVisibility, NavigationBarProps, NavigationBarVariant, NavigationItemShape, 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';
|
|
6
8
|
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';
|
|
7
|
-
export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable
|
|
9
|
+
export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable--BhNTEJw.js';
|
|
8
10
|
export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.js';
|
|
9
11
|
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';
|
|
10
|
-
|
|
12
|
+
import { x as TextFieldProps, v as TextFieldHandle } from './text-field-DWC7qOvp.js';
|
|
13
|
+
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, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, w as TextFieldInputType, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.js';
|
|
11
14
|
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';
|
|
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,
|
|
15
|
+
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, L as Scrim, M as ScrimProps, N as SheetEdge, O as SheetState, P as SideSheet, Q as SideSheetModal, R as SideSheetModalProps, T as SideSheetProps, U as UseBottomSheetOptions, V as UseBottomSheetReturn, W as useBottomSheet } from './side-sheet-modal-DdEZR6Vl.js';
|
|
13
16
|
export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
|
|
17
|
+
import * as React from 'react';
|
|
14
18
|
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.js';
|
|
15
|
-
import 'react';
|
|
16
19
|
import 'react/jsx-runtime';
|
|
17
20
|
import 'clsx';
|
|
18
21
|
import 'motion';
|
|
@@ -83,4 +86,73 @@ interface Md3ThemeResult {
|
|
|
83
86
|
*/
|
|
84
87
|
declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
|
|
85
88
|
|
|
86
|
-
|
|
89
|
+
interface SelectOption {
|
|
90
|
+
/** Display label for the option */
|
|
91
|
+
label: string;
|
|
92
|
+
/** Unique value for the option */
|
|
93
|
+
value: string;
|
|
94
|
+
/** Optional disabled state for this option */
|
|
95
|
+
disabled?: boolean;
|
|
96
|
+
/** Optional leading icon for this option */
|
|
97
|
+
leadingIcon?: React.ReactNode;
|
|
98
|
+
/** Supporting text below option label */
|
|
99
|
+
supportingText?: React.ReactNode;
|
|
100
|
+
}
|
|
101
|
+
interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defaultValue" | "type" | "multiline"> {
|
|
102
|
+
/** Array of selectable options */
|
|
103
|
+
options: SelectOption[];
|
|
104
|
+
/** Controlled selected value */
|
|
105
|
+
value?: string;
|
|
106
|
+
/** Default selected value (uncontrolled) */
|
|
107
|
+
defaultValue?: string;
|
|
108
|
+
/** Callback fired when selection changes */
|
|
109
|
+
onChange?: (value: string, option?: SelectOption) => void;
|
|
110
|
+
/** Enable autocomplete mode (input filtering real-time search) */
|
|
111
|
+
searchable?: boolean;
|
|
112
|
+
/** Custom placeholder when no option is selected or when searching */
|
|
113
|
+
placeholder?: string;
|
|
114
|
+
/** Label text for the input field */
|
|
115
|
+
label?: string;
|
|
116
|
+
/** Supporting text below the input field */
|
|
117
|
+
supportingText?: string;
|
|
118
|
+
/** Color variant for the dropdown menu ('standard' | 'vibrant') */
|
|
119
|
+
colorVariant?: MenuColorVariant;
|
|
120
|
+
/** Menu visual variant ('expressive' | 'baseline') */
|
|
121
|
+
menuVariant?: MenuVariant;
|
|
122
|
+
/** Custom empty state message when searchable mode yields no results */
|
|
123
|
+
emptyText?: string;
|
|
124
|
+
/** Whether the popup menu automatically matches the input width. Default: true */
|
|
125
|
+
matchTriggerWidth?: boolean;
|
|
126
|
+
/** Additional class names for the root container */
|
|
127
|
+
className?: string;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* M3 Expressive Select component (Exposed Dropdown Menu & Autocomplete).
|
|
132
|
+
*
|
|
133
|
+
* Implements Material 3 Exposed Dropdown Menu spec (Figma Node `58966:3961`).
|
|
134
|
+
*
|
|
135
|
+
* @example
|
|
136
|
+
* // Standard Exposed Dropdown Menu
|
|
137
|
+
* <Select
|
|
138
|
+
* label="City"
|
|
139
|
+
* options={[
|
|
140
|
+
* { label: "Hanoi", value: "hn" },
|
|
141
|
+
* { label: "Ho Chi Minh City", value: "hcm" }
|
|
142
|
+
* ]}
|
|
143
|
+
* value={city}
|
|
144
|
+
* onChange={(val) => setCity(val)}
|
|
145
|
+
* />
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* // Searchable Autocomplete
|
|
149
|
+
* <Select
|
|
150
|
+
* searchable
|
|
151
|
+
* label="Search Employee"
|
|
152
|
+
* options={userList}
|
|
153
|
+
* onChange={(val, opt) => setSelected(opt)}
|
|
154
|
+
* />
|
|
155
|
+
*/
|
|
156
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
|
|
157
|
+
|
|
158
|
+
export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, MenuColorVariant, MenuVariant, SchemeVariant, Select, type SelectOption, type SelectProps, TextFieldHandle, TextFieldProps, createMd3ExpressiveTheme };
|