@m3-baseui/react-vanilla-extract 1.2.0 → 1.4.0

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Switch } from './switch.js';
 export { Checkbox } from './checkbox.js';
 export { Radio, RadioGroup } from './radio.js';
 export { Chip } from './chip.js';
-export { Tooltip } from './tooltip.js';
+export { RichTooltip, Tooltip } from './tooltip.js';
 export { Dialog } from './dialog.js';
 export { Menu } from './menu.js';
 export { Tabs } from './tabs.js';
@@ -34,7 +34,7 @@ export { SideSheet } from './side-sheet.js';
 export { Search } from './search.js';
 export { DatePicker } from './date-picker.js';
 export { TimePicker } from './time-picker.js';
-export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 export { Toolbar } from './toolbar.js';
 export { Carousel } from './carousel.js';
 import '@base-ui/react';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import './index.css';
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, cx, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
-export { Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, cx, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
+export { ITEM_LEADING_VARIANTS, LIST_LEADING_VARIANTS, Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 // src/button.ts
@@ -44,46 +44,75 @@ var RadioGroup = createRadioGroup(group);
 var avatar = "_1sqif107";
 var check = "_1sqif100";
 var chip = createRuntimeFn({ defaultClassName: "_1sqif101", variantClassNames: { variant: { assist: "_1sqif102", suggestion: "_1sqif103", input: "_1sqif104", filter: "_1sqif105" }, elevated: { true: "_1sqif106" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
-var remove = "_1sqif108";
+var icon2 = createRuntimeFn({ defaultClassName: "_1sqif108", variantClassNames: { variant: { assist: "_1sqif109", suggestion: "_1sqif10a", input: "_1sqif10b", filter: "_1sqif10c" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
+var remove = "_1sqif10d";
 
 // src/chip.ts
 var Chip = createChip(({ variant, elevated }) => ({
   root: chip({ variant, elevated }),
   remove,
   check,
-  avatar
+  avatar,
+  icon: icon2({ variant })
 }));
 
 // src/tooltip.css.ts
+var actions = "_18z37wz6";
 var arrow = "_18z37wz1";
 var popup = "_18z37wz0";
+var richArrow = "_18z37wz3";
+var richPopup = "_18z37wz2";
+var subhead = "_18z37wz4";
+var supportingText = "_18z37wz5";
 
 // src/tooltip.ts
 var Tooltip = createTooltip({ popup, arrow });
+var RichTooltip = createRichTooltip({
+  popup: richPopup,
+  arrow: richArrow,
+  subhead,
+  supportingText,
+  actions
+});
 
 // src/dialog.css.ts
+var actions2 = "_1x88mtg9";
 var backdrop = "_1x88mtg0";
-var close = "_1x88mtg4";
-var description = "_1x88mtg3";
-var popup2 = "_1x88mtg1";
-var title = "_1x88mtg2";
+var close = "_1x88mtga";
+var description = "_1x88mtg7";
+var divider = "_1x88mtg8";
+var header = "_1x88mtg4";
+var icon3 = "_1x88mtg5";
+var popupBasic = "_1x88mtg2 _1x88mtg1";
+var popupFullscreen = "_1x88mtg3 _1x88mtg1";
+var title = "_1x88mtg6";
 
 // src/dialog.ts
-var Dialog = createDialog({ backdrop, popup: popup2, title, description, close });
+var Dialog = createDialog({
+  backdrop,
+  popup: ({ fullscreen }) => fullscreen ? popupFullscreen : popupBasic,
+  header,
+  icon: icon3,
+  title,
+  description,
+  divider,
+  actions: actions2,
+  close
+});
 
 // src/menu.css.ts
 var checkboxItem = "_1r1oyqt6";
 var groupLabel = "_1r1oyqt3";
 var item = "_1r1oyqt1";
 var itemIndicator = "_1r1oyqt5";
-var popup3 = "_1r1oyqt0";
+var popup2 = "_1r1oyqt0";
 var radioItem = "_1r1oyqt7";
 var separator = "_1r1oyqt2";
 var submenuTrigger = "_1r1oyqt4";
 
 // src/menu.ts
 var Menu = createMenu({
-  popup: popup3,
+  popup: popup2,
   item,
   separator,
   groupLabel,
@@ -112,18 +141,31 @@ var control = "_52wif31";
 var indicator4 = "_52wif33";
 var root5 = "_52wif30";
 var thumb2 = "_52wif34";
+var tick = "_52wif37";
+var tickList = "_52wif36";
 var track = "_52wif32";
 var value = "_52wif35";
+var valueLabel = "_52wif38";
 
 // src/slider.ts
-var Slider = createSlider({ root: root5, control, track, indicator: indicator4, thumb: thumb2, value });
+var Slider = createSlider({
+  root: root5,
+  control,
+  track,
+  indicator: indicator4,
+  thumb: thumb2,
+  value,
+  tickList,
+  tick,
+  valueLabel
+});
 
 // src/select.css.ts
 var groupLabel2 = "_1b1a46l8";
-var icon2 = "_1b1a46l2";
+var icon4 = "_1b1a46l2";
 var item2 = "_1b1a46l4";
 var itemIndicator2 = "_1b1a46l7";
-var popup4 = "_1b1a46l3";
+var popup3 = "_1b1a46l3";
 var scrollDownArrow = "_1b1a46l6";
 var scrollUpArrow = "_1b1a46l5";
 var trigger = "_1b1a46l0";
@@ -133,8 +175,8 @@ var value2 = "_1b1a46l1";
 var Select = createSelect({
   trigger,
   value: value2,
-  icon: icon2,
-  popup: popup4,
+  icon: icon4,
+  popup: popup3,
   item: item2,
   itemIndicator: itemIndicator2,
   groupLabel: groupLabel2,
@@ -146,7 +188,7 @@ var Select = createSelect({
 var counter = "_1dqesowe";
 var field = "_1dqesow1";
 var fieldVariant = { filled: "_1dqesow2", outlined: "_1dqesow3" };
-var icon3 = "_1dqesowb";
+var icon5 = "_1dqesowb";
 var input = "_1dqesow5";
 var inputVariant = { filled: "_1dqesow6", outlined: "_1dqesow7" };
 var inputWrap = "_1dqesow4";
@@ -154,7 +196,7 @@ var label = "_1dqesow8";
 var labelVariant = { filled: "_1dqesow9", outlined: "_1dqesowa" };
 var root6 = "_1dqesow0";
 var supporting = "_1dqesowc";
-var supportingText = "_1dqesowd";
+var supportingText2 = "_1dqesowd";
 
 // src/textfield.ts
 var TextField = createTextField(({ variant }) => ({
@@ -163,15 +205,15 @@ var TextField = createTextField(({ variant }) => ({
   inputWrap,
   input: cx(input, inputVariant[variant]),
   label: cx(label, labelVariant[variant]),
-  leadingIcon: icon3,
-  trailingIcon: icon3,
+  leadingIcon: icon5,
+  trailingIcon: icon5,
   supporting,
-  supportingText,
+  supportingText: supportingText2,
   counter
 }));
 
 // src/navigation-bar.css.ts
-var icon4 = "_1oj6paf4";
+var icon6 = "_1oj6paf4";
 var iconWrap = "_1oj6paf2";
 var indicator5 = "_1oj6paf3";
 var item3 = "_1oj6paf1";
@@ -184,7 +226,7 @@ var NavigationBar = createNavigationBar({
   item: item3,
   iconWrap,
   indicator: indicator5,
-  icon: icon4,
+  icon: icon6,
   label: label2
 });
 var fab = createRuntimeFn({ defaultClassName: "_11t8aaa4", variantClassNames: { size: { small: "_11t8aaa0", regular: "_11t8aaa1", large: "_11t8aaa2", extended: "_11t8aaa3" }, color: { surface: "_11t8aaa9", primary: "_11t8aaaa", secondary: "_11t8aaab", tertiary: "_11t8aaac" } }, defaultVariants: { size: "regular", color: "surface" }, compoundVariants: [] });
@@ -192,17 +234,17 @@ var fab = createRuntimeFn({ defaultClassName: "_11t8aaa4", variantClassNames: {
 // src/fab.ts
 var Fab = createFab(({ size, color }) => fab({ size, color }));
 var item4 = createRuntimeFn({ defaultClassName: "_1vyg8hz2 _1vyg8hz1", variantClassNames: { color: { surface: "_1vyg8hz3", primary: "_1vyg8hz4", secondary: "_1vyg8hz5", tertiary: "_1vyg8hz6" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
-var popup5 = "_1vyg8hz0";
+var popup4 = "_1vyg8hz0";
 
 // src/fab-menu.ts
 var FabMenu = createFabMenu(({ size, color }) => fab({ size, color }), {
-  popup: popup5,
+  popup: popup4,
   item: (color) => item4({ color })
 });
-var divider = createRuntimeFn({ defaultClassName: "n9bqce0", variantClassNames: { orientation: { horizontal: "n9bqce1", vertical: "n9bqce2" }, inset: { full: "n9bqce3", inset: "n9bqce4", middle: "n9bqce5" } }, defaultVariants: { orientation: "horizontal", inset: "full" }, compoundVariants: [[{ orientation: "horizontal", inset: "inset" }, "n9bqce6"], [{ orientation: "horizontal", inset: "middle" }, "n9bqce7"], [{ orientation: "vertical", inset: "inset" }, "n9bqce8"], [{ orientation: "vertical", inset: "middle" }, "n9bqce9"]] });
+var divider2 = createRuntimeFn({ defaultClassName: "n9bqce0", variantClassNames: { orientation: { horizontal: "n9bqce1", vertical: "n9bqce2" }, inset: { full: "n9bqce3", inset: "n9bqce4", middle: "n9bqce5" } }, defaultVariants: { orientation: "horizontal", inset: "full" }, compoundVariants: [[{ orientation: "horizontal", inset: "inset" }, "n9bqce6"], [{ orientation: "horizontal", inset: "middle" }, "n9bqce7"], [{ orientation: "vertical", inset: "inset" }, "n9bqce8"], [{ orientation: "vertical", inset: "middle" }, "n9bqce9"]] });
 
 // src/divider.ts
-var Divider = createDivider(({ inset, orientation }) => divider({ inset, orientation }));
+var Divider = createDivider(({ inset, orientation }) => divider2({ inset, orientation }));
 
 // src/progress.css.ts
 var circularIndicator = "_1dp13497";
@@ -236,8 +278,6 @@ var leading = "_3g3dnl8";
 var root9 = "_3g3dnl0";
 var supporting2 = "_3g3dnlb";
 var trailing = "_3g3dnlc";
-
-// src/list.ts
 var List = createList({
   root: root9,
   item: ({ lines, interactive }) => ({
@@ -276,8 +316,6 @@ var overline = "_17nusht3";
 var root11 = "_17nusht0";
 var supporting3 = "_17nusht5";
 var trailing2 = "_17nusht6";
-
-// src/item.ts
 var Item = createItem({
   root: root11,
   leading: leading2,
@@ -302,7 +340,7 @@ var Card = createCard({
 
 // src/segmented-button.css.ts
 var check2 = "ne7szb2";
-var icon5 = "ne7szb3";
+var icon7 = "ne7szb3";
 var item6 = "ne7szb1";
 var label3 = "ne7szb4";
 var root12 = "ne7szb0";
@@ -312,7 +350,7 @@ var SegmentedButton = createSegmentedButton({
   root: root12,
   item: item6,
   check: check2,
-  icon: icon5,
+  icon: icon7,
   label: label3
 });
 
@@ -328,7 +366,7 @@ var chevron = "_1457ms3f";
 var group2 = "_1457ms30";
 var item7 = "_1457ms3h";
 var leading3 = createRuntimeFn({ defaultClassName: "_1457ms33 _1457ms31", variantClassNames: { variant: { filled: "_1457ms34", tonal: "_1457ms35", outlined: "_1457ms36", elevated: "_1457ms37", text: "_1457ms38" } }, defaultVariants: {}, compoundVariants: [] });
-var popup6 = "_1457ms3g";
+var popup5 = "_1457ms3g";
 var trailing3 = createRuntimeFn({ defaultClassName: "_1457ms39 _1457ms32", variantClassNames: { variant: { filled: "_1457ms3a", tonal: "_1457ms3b", outlined: "_1457ms3c", elevated: "_1457ms3d", text: "_1457ms3e" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/split-button.ts
@@ -337,7 +375,7 @@ var SplitButton = createSplitButton({
   leading: (variant) => leading3({ variant }),
   trailing: (variant) => trailing3({ variant }),
   chevron,
-  popup: popup6,
+  popup: popup5,
   item: item7
 });
 var headline3 = "_1ptmpsj3";
@@ -372,16 +410,16 @@ var TopAppBar = createTopAppBar(({ variant }) => ({
 }));
 
 // src/bottom-app-bar.css.ts
-var actions = "_1lj3j9f1";
+var actions3 = "_1lj3j9f1";
 var fab2 = "_1lj3j9f2";
 var root16 = "_1lj3j9f0";
 
 // src/bottom-app-bar.ts
-var BottomAppBar = createBottomAppBar({ root: root16, actions, fab: fab2 });
+var BottomAppBar = createBottomAppBar({ root: root16, actions: actions3, fab: fab2 });
 
 // src/navigation-rail.css.ts
-var header = "w6243j1";
-var icon6 = "w6243j5";
+var header2 = "w6243j1";
+var icon8 = "w6243j5";
 var iconWrap2 = "w6243j3";
 var indicator7 = "w6243j4";
 var item9 = "w6243j2";
@@ -391,11 +429,11 @@ var root17 = "w6243j0";
 // src/navigation-rail.ts
 var NavigationRail = createNavigationRail({
   root: root17,
-  header,
+  header: header2,
   item: item9,
   iconWrap: iconWrap2,
   indicator: indicator7,
-  icon: icon6,
+  icon: icon8,
   label: label5
 });
 
@@ -403,7 +441,7 @@ var NavigationRail = createNavigationRail({
 var backdrop2 = "fam1rf0";
 var description3 = "fam1rf5";
 var handle = "fam1rf3";
-var popup7 = "fam1rf2";
+var popup6 = "fam1rf2";
 var title3 = "fam1rf4";
 var viewport2 = "fam1rf1";
 
@@ -411,7 +449,7 @@ var viewport2 = "fam1rf1";
 var BottomSheet = createBottomSheet({
   backdrop: backdrop2,
   viewport: viewport2,
-  popup: popup7,
+  popup: popup6,
   handle,
   title: title3,
   description: description3
@@ -419,8 +457,8 @@ var BottomSheet = createBottomSheet({
 var backdrop3 = "d9o4yx0";
 var close3 = "d9o4yx8";
 var description4 = "d9o4yx7";
-var header2 = "d9o4yx5";
-var popup8 = createRuntimeFn({ defaultClassName: "d9o4yx2", variantClassNames: { variant: { modal: "d9o4yx3", standard: "d9o4yx4" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
+var header3 = "d9o4yx5";
+var popup7 = createRuntimeFn({ defaultClassName: "d9o4yx2", variantClassNames: { variant: { modal: "d9o4yx3", standard: "d9o4yx4" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
 var title4 = "d9o4yx6";
 var viewport3 = "d9o4yx1";
 
@@ -428,8 +466,8 @@ var viewport3 = "d9o4yx1";
 var SideSheet = createSideSheet({
   backdrop: backdrop3,
   viewport: viewport3,
-  popup: ({ variant }) => popup8({ variant }),
-  header: header2,
+  popup: ({ variant }) => popup7({ variant }),
+  header: header3,
   title: title4,
   description: description4,
   close: close3
@@ -440,21 +478,21 @@ var bar = "b8ymue0";
 var clear = "b8ymue3";
 var empty = "b8ymue8";
 var groupLabel3 = "b8ymuea";
-var icon7 = "b8ymue1";
+var icon9 = "b8ymue1";
 var input2 = "b8ymue2";
 var item10 = "b8ymue6";
 var itemIndicator3 = "b8ymue7";
 var list2 = "b8ymue5";
-var popup9 = "b8ymue4";
+var popup8 = "b8ymue4";
 var separator2 = "b8ymue9";
 
 // src/search.ts
 var Search = createSearch({
   bar,
-  icon: icon7,
+  icon: icon9,
   input: input2,
   clear,
-  popup: popup9,
+  popup: popup8,
   list: list2,
   item: item10,
   itemIndicator: itemIndicator3,
@@ -469,7 +507,7 @@ var day = "_1vbcevx7";
 var field2 = "_1vbcevxa";
 var fieldIcon = "_1vbcevxc";
 var grid = "_1vbcevx4";
-var header3 = "_1vbcevx1";
+var header4 = "_1vbcevx1";
 var input3 = "_1vbcevxb";
 var modalActions = "_1vbcevxi";
 var modalBackdrop = "_1vbcevxe";
@@ -478,7 +516,7 @@ var modalHeadline = "_1vbcevxh";
 var modalPopup = "_1vbcevxf";
 var monthLabel = "_1vbcevx3";
 var navButton = "_1vbcevx2";
-var popup10 = "_1vbcevxd";
+var popup9 = "_1vbcevxd";
 var weekday = "_1vbcevx6";
 var weekdays = "_1vbcevx5";
 var yearButton = "_1vbcevx9";
@@ -487,7 +525,7 @@ var yearGrid = "_1vbcevx8";
 // src/date-picker.ts
 var DatePicker = createDatePicker({
   calendar,
-  header: header3,
+  header: header4,
   navButton,
   monthLabel,
   grid,
@@ -499,7 +537,7 @@ var DatePicker = createDatePicker({
   field: field2,
   input: input3,
   fieldIcon,
-  popup: popup10,
+  popup: popup9,
   modalBackdrop,
   modalPopup,
   modalHeader,
@@ -514,7 +552,7 @@ var dialCenter = "_1xr2p7a9";
 var dialHand = "_1xr2p7a8";
 var dialNumber = "_1xr2p7a7";
 var field3 = "_1xr2p7a2";
-var header4 = "_1xr2p7a1";
+var header5 = "_1xr2p7a1";
 var inputBox = "_1xr2p7ab";
 var inputCaption = "_1xr2p7ac";
 var inputs = "_1xr2p7aa";
@@ -525,7 +563,7 @@ var root18 = "_1xr2p7a0";
 // src/time-picker.ts
 var TimePicker = createTimePicker(() => ({
   root: root18,
-  header: header4,
+  header: header5,
   field: field3,
   colon,
   periods,
@@ -553,6 +591,6 @@ var Carousel = createCarousel((variant) => ({
   item: item11({ variant })
 }));
 
-export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar };
+export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, RichTooltip, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map