@m3-baseui/react-vanilla-extract 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -16,18 +16,26 @@ export { Fab } from './fab.js';
 export { FabMenu } from './fab-menu.js';
 export { Divider } from './divider.js';
 export { Progress } from './progress.js';
+export { LoadingIndicator } from './loading-indicator.js';
 export { List } from './list.js';
 export { Snackbar } from './snackbar.js';
 export { Item } from './item.js';
 export { Badge } from './badge.js';
 export { Card } from './card.js';
 export { SegmentedButton } from './segmented-button.js';
+export { ButtonGroup } from './button-group.js';
+export { SplitButton } from './split-button.js';
 export { NavigationDrawer } from './navigation-drawer.js';
 export { TopAppBar } from './top-app-bar.js';
 export { BottomAppBar } from './bottom-app-bar.js';
 export { NavigationRail } from './navigation-rail.js';
 export { BottomSheet } from './bottom-sheet.js';
 export { SideSheet } from './side-sheet.js';
-export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+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 { Toolbar } from './toolbar.js';
+export { Carousel } from './carousel.js';
 import '@base-ui/react';
 import 'react';

package/dist/index.js

@@ -1,6 +1,6 @@
 "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, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet } from '@m3-baseui/core';
+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 { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
@@ -44,14 +44,16 @@ 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
@@ -112,15 +114,28 @@ 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 icon3 = "_1b1a46l2";
 var item2 = "_1b1a46l4";
 var itemIndicator2 = "_1b1a46l7";
 var popup4 = "_1b1a46l3";
@@ -133,7 +148,7 @@ var value2 = "_1b1a46l1";
 var Select = createSelect({
   trigger,
   value: value2,
-  icon: icon2,
+  icon: icon3,
   popup: popup4,
   item: item2,
   itemIndicator: itemIndicator2,
@@ -146,7 +161,7 @@ var Select = createSelect({
 var counter = "_1dqesowe";
 var field = "_1dqesow1";
 var fieldVariant = { filled: "_1dqesow2", outlined: "_1dqesow3" };
-var icon3 = "_1dqesowb";
+var icon4 = "_1dqesowb";
 var input = "_1dqesow5";
 var inputVariant = { filled: "_1dqesow6", outlined: "_1dqesow7" };
 var inputWrap = "_1dqesow4";
@@ -163,15 +178,15 @@ var TextField = createTextField(({ variant }) => ({
   inputWrap,
   input: cx(input, inputVariant[variant]),
   label: cx(label, labelVariant[variant]),
-  leadingIcon: icon3,
-  trailingIcon: icon3,
+  leadingIcon: icon4,
+  trailingIcon: icon4,
   supporting,
   supportingText,
   counter
 }));
 
 // src/navigation-bar.css.ts
-var icon4 = "_1oj6paf4";
+var icon5 = "_1oj6paf4";
 var iconWrap = "_1oj6paf2";
 var indicator5 = "_1oj6paf3";
 var item3 = "_1oj6paf1";
@@ -184,7 +199,7 @@ var NavigationBar = createNavigationBar({
   item: item3,
   iconWrap,
   indicator: indicator5,
-  icon: icon4,
+  icon: icon5,
   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: [] });
@@ -217,18 +232,29 @@ var Progress = createProgress({
   linear: { root: linearRoot, track: linearTrack, indicator: linearIndicator },
   circular: { root: circularRoot, track: circularTrack, indicator: circularIndicator }
 });
+
+// src/loading-indicator.css.ts
+var contained = "_1lfskkf2";
+var indicator6 = "_1lfskkf3";
+var root8 = "_1lfskkf1";
+
+// src/loading-indicator.ts
+var LoadingIndicator = createLoadingIndicator(({ contained: contained2 }) => ({
+  root: contained2 ? cx(root8, contained) : root8,
+  indicator: indicator6
+}));
 var content = "_3g3dnl9";
 var headline = "_3g3dnla";
 var item5 = createRuntimeFn({ defaultClassName: "_3g3dnl2", variantClassNames: { lines: { "1": "_3g3dnl3", "2": "_3g3dnl4", "3": "_3g3dnl5" }, interactive: { true: "_3g3dnl6", false: "_3g3dnl7" } }, defaultVariants: { lines: 1, interactive: false }, compoundVariants: [] });
 var itemBase = "_3g3dnl1";
 var leading = "_3g3dnl8";
-var root8 = "_3g3dnl0";
+var root9 = "_3g3dnl0";
 var supporting2 = "_3g3dnlb";
 var trailing = "_3g3dnlc";
 
 // src/list.ts
 var List = createList({
-  root: root8,
+  root: root9,
   item: ({ lines, interactive }) => ({
     item: cx(itemBase, item5({ lines, interactive })),
     leading,
@@ -244,12 +270,12 @@ var action = "_1tfknov5";
 var close2 = "_1tfknov6";
 var content2 = "_1tfknov2";
 var description2 = "_1tfknov4";
-var root9 = "_1tfknov1";
+var root10 = "_1tfknov1";
 var title2 = "_1tfknov3";
 var viewport = "_1tfknov0";
 var Snackbar = createSnackbar({
   viewport,
-  root: root9,
+  root: root10,
   content: content2,
   title: title2,
   description: description2,
@@ -262,13 +288,13 @@ var content3 = "_17nusht2";
 var headline2 = "_17nusht4";
 var leading2 = "_17nusht1";
 var overline = "_17nusht3";
-var root10 = "_17nusht0";
+var root11 = "_17nusht0";
 var supporting3 = "_17nusht5";
 var trailing2 = "_17nusht6";
 
 // src/item.ts
 var Item = createItem({
-  root: root10,
+  root: root11,
   leading: leading2,
   content: content3,
   overline,
@@ -291,75 +317,100 @@ var Card = createCard({
 
 // src/segmented-button.css.ts
 var check2 = "ne7szb2";
-var icon5 = "ne7szb3";
+var icon6 = "ne7szb3";
 var item6 = "ne7szb1";
 var label3 = "ne7szb4";
-var root11 = "ne7szb0";
+var root12 = "ne7szb0";
 
 // src/segmented-button.ts
 var SegmentedButton = createSegmentedButton({
-  root: root11,
+  root: root12,
   item: item6,
   check: check2,
-  icon: icon5,
+  icon: icon6,
   label: label3
 });
+
+// src/button-group.css.ts
+var connected = "ja34ba2";
+var root13 = "ja34ba0";
+var standard = "ja34ba1";
+
+// src/button-group.ts
+var variantClass = { standard, connected };
+var ButtonGroup = createButtonGroup(({ variant }) => cx(root13, variantClass[variant]));
+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 trailing3 = createRuntimeFn({ defaultClassName: "_1457ms39 _1457ms32", variantClassNames: { variant: { filled: "_1457ms3a", tonal: "_1457ms3b", outlined: "_1457ms3c", elevated: "_1457ms3d", text: "_1457ms3e" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/split-button.ts
+var SplitButton = createSplitButton({
+  group: group2,
+  leading: (variant) => leading3({ variant }),
+  trailing: (variant) => trailing3({ variant }),
+  chevron,
+  popup: popup6,
+  item: item7
+});
 var headline3 = "_1ptmpsj3";
-var item7 = "_1ptmpsj4";
+var item8 = "_1ptmpsj4";
 var label4 = "_1ptmpsj6";
-var leading3 = "_1ptmpsj5";
-var root12 = createRuntimeFn({ defaultClassName: "_1ptmpsj0", variantClassNames: { variant: { standard: "_1ptmpsj1", modal: "_1ptmpsj2" } }, defaultVariants: { variant: "standard" }, compoundVariants: [] });
-var trailing3 = "_1ptmpsj7";
+var leading4 = "_1ptmpsj5";
+var root14 = createRuntimeFn({ defaultClassName: "_1ptmpsj0", variantClassNames: { variant: { standard: "_1ptmpsj1", modal: "_1ptmpsj2" } }, defaultVariants: { variant: "standard" }, compoundVariants: [] });
+var trailing4 = "_1ptmpsj7";
 
 // src/navigation-drawer.ts
 var NavigationDrawer = createNavigationDrawer({
-  root: ({ variant }) => root12({ variant }),
+  root: ({ variant }) => root14({ variant }),
   headline: headline3,
-  item: item7,
-  leading: leading3,
+  item: item8,
+  leading: leading4,
   label: label4,
-  trailing: trailing3
+  trailing: trailing4
 });
 var headline4 = createRuntimeFn({ defaultClassName: "jnp3607", variantClassNames: { variant: { small: "jnp3608", center: "jnp3609", medium: "jnp360a", large: "jnp360b" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
-var leading4 = "jnp3606";
-var root13 = createRuntimeFn({ defaultClassName: "jnp3600", variantClassNames: { variant: { small: "jnp3601", center: "jnp3602", medium: "jnp3603", large: "jnp3604" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
+var leading5 = "jnp3606";
+var root15 = createRuntimeFn({ defaultClassName: "jnp3600", variantClassNames: { variant: { small: "jnp3601", center: "jnp3602", medium: "jnp3603", large: "jnp3604" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
 var row = "jnp3605";
-var trailing4 = "jnp360c";
+var trailing5 = "jnp360c";
 
 // src/top-app-bar.ts
 var TopAppBar = createTopAppBar(({ variant }) => ({
-  root: root13({ variant }),
+  root: root15({ variant }),
   row,
-  leading: leading4,
+  leading: leading5,
   headline: headline4({ variant }),
-  trailing: trailing4
+  trailing: trailing5
 }));
 
 // src/bottom-app-bar.css.ts
 var actions = "_1lj3j9f1";
 var fab2 = "_1lj3j9f2";
-var root14 = "_1lj3j9f0";
+var root16 = "_1lj3j9f0";
 
 // src/bottom-app-bar.ts
-var BottomAppBar = createBottomAppBar({ root: root14, actions, fab: fab2 });
+var BottomAppBar = createBottomAppBar({ root: root16, actions, fab: fab2 });
 
 // src/navigation-rail.css.ts
 var header = "w6243j1";
-var icon6 = "w6243j5";
+var icon7 = "w6243j5";
 var iconWrap2 = "w6243j3";
-var indicator6 = "w6243j4";
-var item8 = "w6243j2";
+var indicator7 = "w6243j4";
+var item9 = "w6243j2";
 var label5 = "w6243j6";
-var root15 = "w6243j0";
+var root17 = "w6243j0";
 
 // src/navigation-rail.ts
 var NavigationRail = createNavigationRail({
-  root: root15,
+  root: root17,
   header,
-  item: item8,
+  item: item9,
   iconWrap: iconWrap2,
-  indicator: indicator6,
-  icon: icon6,
+  indicator: indicator7,
+  icon: icon7,
   label: label5
 });
 
@@ -367,7 +418,7 @@ var NavigationRail = createNavigationRail({
 var backdrop2 = "fam1rf0";
 var description3 = "fam1rf5";
 var handle = "fam1rf3";
-var popup6 = "fam1rf2";
+var popup7 = "fam1rf2";
 var title3 = "fam1rf4";
 var viewport2 = "fam1rf1";
 
@@ -375,7 +426,7 @@ var viewport2 = "fam1rf1";
 var BottomSheet = createBottomSheet({
   backdrop: backdrop2,
   viewport: viewport2,
-  popup: popup6,
+  popup: popup7,
   handle,
   title: title3,
   description: description3
@@ -384,7 +435,7 @@ var backdrop3 = "d9o4yx0";
 var close3 = "d9o4yx8";
 var description4 = "d9o4yx7";
 var header2 = "d9o4yx5";
-var popup7 = createRuntimeFn({ defaultClassName: "d9o4yx2", variantClassNames: { variant: { modal: "d9o4yx3", standard: "d9o4yx4" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
+var popup8 = createRuntimeFn({ defaultClassName: "d9o4yx2", variantClassNames: { variant: { modal: "d9o4yx3", standard: "d9o4yx4" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
 var title4 = "d9o4yx6";
 var viewport3 = "d9o4yx1";
 
@@ -392,13 +443,131 @@ var viewport3 = "d9o4yx1";
 var SideSheet = createSideSheet({
   backdrop: backdrop3,
   viewport: viewport3,
-  popup: ({ variant }) => popup7({ variant }),
+  popup: ({ variant }) => popup8({ variant }),
   header: header2,
   title: title4,
   description: description4,
   close: close3
 });
 
-export { Badge, BottomAppBar, BottomSheet, Button, Card, Checkbox, Chip, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, SegmentedButton, Select, SideSheet, Slider, Snackbar, Switch, Tabs, TextField, Tooltip, TopAppBar };
+// src/search.css.ts
+var bar = "b8ymue0";
+var clear = "b8ymue3";
+var empty = "b8ymue8";
+var groupLabel3 = "b8ymuea";
+var icon8 = "b8ymue1";
+var input2 = "b8ymue2";
+var item10 = "b8ymue6";
+var itemIndicator3 = "b8ymue7";
+var list2 = "b8ymue5";
+var popup9 = "b8ymue4";
+var separator2 = "b8ymue9";
+
+// src/search.ts
+var Search = createSearch({
+  bar,
+  icon: icon8,
+  input: input2,
+  clear,
+  popup: popup9,
+  list: list2,
+  item: item10,
+  itemIndicator: itemIndicator3,
+  empty,
+  separator: separator2,
+  groupLabel: groupLabel3
+});
+
+// src/date-picker.css.ts
+var calendar = "_1vbcevx0";
+var day = "_1vbcevx7";
+var field2 = "_1vbcevxa";
+var fieldIcon = "_1vbcevxc";
+var grid = "_1vbcevx4";
+var header3 = "_1vbcevx1";
+var input3 = "_1vbcevxb";
+var modalActions = "_1vbcevxi";
+var modalBackdrop = "_1vbcevxe";
+var modalHeader = "_1vbcevxg";
+var modalHeadline = "_1vbcevxh";
+var modalPopup = "_1vbcevxf";
+var monthLabel = "_1vbcevx3";
+var navButton = "_1vbcevx2";
+var popup10 = "_1vbcevxd";
+var weekday = "_1vbcevx6";
+var weekdays = "_1vbcevx5";
+var yearButton = "_1vbcevx9";
+var yearGrid = "_1vbcevx8";
+
+// src/date-picker.ts
+var DatePicker = createDatePicker({
+  calendar,
+  header: header3,
+  navButton,
+  monthLabel,
+  grid,
+  weekdays,
+  weekday,
+  day,
+  yearGrid,
+  yearButton,
+  field: field2,
+  input: input3,
+  fieldIcon,
+  popup: popup10,
+  modalBackdrop,
+  modalPopup,
+  modalHeader,
+  modalHeadline,
+  modalActions
+});
+
+// src/time-picker.css.ts
+var colon = "_1xr2p7a3";
+var dial = "_1xr2p7a6";
+var dialCenter = "_1xr2p7a9";
+var dialHand = "_1xr2p7a8";
+var dialNumber = "_1xr2p7a7";
+var field3 = "_1xr2p7a2";
+var header4 = "_1xr2p7a1";
+var inputBox = "_1xr2p7ab";
+var inputCaption = "_1xr2p7ac";
+var inputs = "_1xr2p7aa";
+var period = "_1xr2p7a5";
+var periods = "_1xr2p7a4";
+var root18 = "_1xr2p7a0";
+
+// src/time-picker.ts
+var TimePicker = createTimePicker(() => ({
+  root: root18,
+  header: header4,
+  field: field3,
+  colon,
+  periods,
+  period,
+  dial,
+  dialNumber,
+  dialHand,
+  dialCenter,
+  inputs,
+  inputBox,
+  inputCaption
+}));
+var toolbar = createRuntimeFn({ defaultClassName: "_1a8bqtt0", variantClassNames: { variant: { standard: "_1a8bqtt1", vibrant: "_1a8bqtt2" }, orientation: { horizontal: "_1a8bqtt3", vertical: "_1a8bqtt4" } }, defaultVariants: { variant: "standard", orientation: "horizontal" }, compoundVariants: [] });
+
+// src/toolbar.ts
+var Toolbar = createToolbar(
+  ({ variant, orientation }) => toolbar({ variant, orientation })
+);
+var item11 = createRuntimeFn({ defaultClassName: "dkoi9n4", variantClassNames: { variant: { "multi-browse": "dkoi9n5", hero: "dkoi9n6", "full-screen": "dkoi9n7" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+var root19 = createRuntimeFn({ defaultClassName: "dkoi9n0", variantClassNames: { variant: { "multi-browse": "dkoi9n1", hero: "dkoi9n2", "full-screen": "dkoi9n3" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+
+// src/carousel.ts
+var Carousel = createCarousel((variant) => ({
+  root: root19({ 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map