@m3-baseui/react-vanilla-extract 2.0.0 → 4.0.0

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { SideSheet } from './components/side-sheet/index.js';
 export { Search } from './components/search/index.js';
 export { DatePicker } from './components/date-picker/index.js';
 export { TimePicker } from './components/time-picker/index.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, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SelectFieldProps, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldIconAction, 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, ButtonShape, ButtonSize, 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, SelectFieldProps, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldIconAction, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 export { Toolbar } from './components/toolbar/index.js';
 export { Carousel } from './components/carousel/index.js';
 import '@base-ui/react';

package/dist/index.js

@@ -1,14 +1,16 @@
 "use client";
 import './index.css';
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, cx, createTextField, 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';
+import { createButton, toToggle, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, cx, createTextField, 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/components/button/button.ts
-var button = createRuntimeFn({ defaultClassName: "_1kd1ms00", variantClassNames: { variant: { filled: "_1kd1ms01", tonal: "_1kd1ms02", outlined: "_1kd1ms03", elevated: "_1kd1ms04", text: "_1kd1ms05" } }, defaultVariants: { variant: "filled" }, compoundVariants: [] });
+var button = createRuntimeFn({ defaultClassName: "_1kd1ms05", variantClassNames: { variant: { filled: "_1kd1ms06", tonal: "_1kd1ms07", outlined: "_1kd1ms08", elevated: "_1kd1ms09", text: "_1kd1ms0a" }, size: { xs: "_1kd1ms00", s: "_1kd1ms01", m: "_1kd1ms02", l: "_1kd1ms03", xl: "_1kd1ms04" }, shape: { round: "_1kd1ms0g", square: "_1kd1ms0h" }, toggle: { on: "_1kd1ms0i", off: "_1kd1ms0j" } }, defaultVariants: { variant: "filled", size: "s", shape: "round" }, compoundVariants: [[{ shape: "square", size: "xs" }, "_1kd1ms0k"], [{ shape: "square", size: "s" }, "_1kd1ms0l"], [{ shape: "square", size: "m" }, "_1kd1ms0m"], [{ shape: "square", size: "l" }, "_1kd1ms0n"], [{ shape: "square", size: "xl" }, "_1kd1ms0o"], [{ shape: "round", toggle: "on", size: "xs" }, "_1kd1ms0p"], [{ shape: "round", toggle: "on", size: "s" }, "_1kd1ms0q"], [{ shape: "round", toggle: "on", size: "m" }, "_1kd1ms0r"], [{ shape: "round", toggle: "on", size: "l" }, "_1kd1ms0s"], [{ shape: "round", toggle: "on", size: "xl" }, "_1kd1ms0t"], [{ shape: "square", toggle: "on", size: "xs" }, "_1kd1ms0u"], [{ shape: "square", toggle: "on", size: "s" }, "_1kd1ms0v"], [{ shape: "square", toggle: "on", size: "m" }, "_1kd1ms0w"], [{ shape: "square", toggle: "on", size: "l" }, "_1kd1ms0x"], [{ shape: "square", toggle: "on", size: "xl" }, "_1kd1ms0y"], [{ variant: "outlined", size: "l" }, "_1kd1ms0z"], [{ variant: "outlined", size: "xl" }, "_1kd1ms010"], [{ variant: "filled", toggle: "off" }, "_1kd1ms011"], [{ variant: "tonal", toggle: "off" }, "_1kd1ms012"], [{ variant: "elevated", toggle: "on" }, "_1kd1ms013"], [{ variant: "elevated", toggle: "off" }, "_1kd1ms014"], [{ variant: "outlined", toggle: "on" }, "_1kd1ms015"], [{ variant: "text", toggle: "on" }, "_1kd1ms016"]] });
 
 // src/components/button/button.ts
-var Button = createButton(({ variant }) => button({ variant }));
+var Button = createButton(
+  ({ variant, size, shape, selected }) => button({ variant, size, shape, toggle: toToggle(selected) })
+);
 var iconButton = createRuntimeFn({ defaultClassName: "_1k5uet55", variantClassNames: { variant: { standard: "_1k5uet56", filled: "_1k5uet57", tonal: "_1k5uet58", outlined: "_1k5uet59" }, selected: { true: "_1k5uet5a", false: "_1k5uet5b" }, size: { xs: "_1k5uet50", s: "_1k5uet51", m: "_1k5uet52", l: "_1k5uet53", xl: "_1k5uet54" }, width: { narrow: "_1k5uet5h", "default": "_1k5uet5i", wide: "_1k5uet5j" } }, defaultVariants: { variant: "standard", size: "s", width: "default" }, compoundVariants: [[{ size: "xs", width: "narrow" }, "_1k5uet5k"], [{ size: "xs", width: "default" }, "_1k5uet5l"], [{ size: "xs", width: "wide" }, "_1k5uet5m"], [{ size: "s", width: "narrow" }, "_1k5uet5n"], [{ size: "s", width: "default" }, "_1k5uet5o"], [{ size: "s", width: "wide" }, "_1k5uet5p"], [{ size: "m", width: "narrow" }, "_1k5uet5q"], [{ size: "m", width: "default" }, "_1k5uet5r"], [{ size: "m", width: "wide" }, "_1k5uet5s"], [{ size: "l", width: "narrow" }, "_1k5uet5t"], [{ size: "l", width: "default" }, "_1k5uet5u"], [{ size: "l", width: "wide" }, "_1k5uet5v"], [{ size: "xl", width: "narrow" }, "_1k5uet5w"], [{ size: "xl", width: "default" }, "_1k5uet5x"], [{ size: "xl", width: "wide" }, "_1k5uet5y"], [{ variant: "standard", selected: true }, "_1k5uet5z"], [{ variant: "filled", selected: false }, "_1k5uet510"], [{ variant: "tonal", selected: false }, "_1k5uet511"], [{ variant: "outlined", selected: true }, "_1k5uet512"]] });
 
 // src/components/icon-button/icon-button.ts
@@ -161,25 +163,23 @@ var Slider = createSlider({
 });
 
 // src/components/select/select.css.ts
-var field = "_1qkm50o6";
-var fieldIcon = "_1qkm50og";
-var fieldInputWrap = "_1qkm50o9";
-var fieldLabel = "_1qkm50od";
-var fieldLabelVariant = { filled: "_1qkm50oe", outlined: "_1qkm50of" };
-var fieldLeadingIcon = "_1qkm50oh";
-var fieldRoot = "_1qkm50o5";
-var fieldSupporting = "_1qkm50oi";
-var fieldSupportingText = "_1qkm50oj";
-var fieldValue = "_1qkm50oa";
-var fieldValueVariant = { filled: "_1qkm50ob", outlined: "_1qkm50oc" };
-var fieldVariant = { filled: "_1qkm50o7", outlined: "_1qkm50o8" };
+var field = "_1qkm50o4";
+var fieldIcon = "_1qkm50oe";
+var fieldInputWrap = "_1qkm50o7";
+var fieldLabel = "_1qkm50ob";
+var fieldLabelVariant = { filled: "_1qkm50oc", outlined: "_1qkm50od" };
+var fieldLeadingIcon = "_1qkm50of";
+var fieldRoot = "_1qkm50o3";
+var fieldSupporting = "_1qkm50og";
+var fieldSupportingText = "_1qkm50oh";
+var fieldValue = "_1qkm50o8";
+var fieldValueVariant = { filled: "_1qkm50o9", outlined: "_1qkm50oa" };
+var fieldVariant = { filled: "_1qkm50o5", outlined: "_1qkm50o6" };
 var groupLabel2 = "_1del1lt2";
 var icon4 = "_1qkm50o2";
 var item2 = "_1fs19uv0";
 var itemIndicator2 = "_1fs19uv2";
 var popup3 = "_1del1lt1";
-var scrollDownArrow = "_1qkm50o4";
-var scrollUpArrow = "_1qkm50o3";
 var trigger = "_1qkm50o0";
 var value2 = "_1qkm50o1";
 
@@ -192,9 +192,7 @@ var Select = createSelect(
     popup: popup3,
     item: item2,
     itemIndicator: itemIndicator2,
-    groupLabel: groupLabel2,
-    scrollUpArrow,
-    scrollDownArrow
+    groupLabel: groupLabel2
   },
   // Exposed Dropdown Menu anchor (issue #96): the field state lives on the
   // trigger, so the label float / focus border resolve via `${field}[data-*]`.
@@ -620,8 +618,8 @@ var toolbar = createRuntimeFn({ defaultClassName: "_1lu5gnh0", variantClassNames
 var Toolbar = createToolbar(
   ({ variant, orientation }) => toolbar({ variant, orientation })
 );
-var item11 = createRuntimeFn({ defaultClassName: "iao39e4", variantClassNames: { variant: { "multi-browse": "iao39e5", hero: "iao39e6", "full-screen": "iao39e7" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
-var root19 = createRuntimeFn({ defaultClassName: "iao39e0", variantClassNames: { variant: { "multi-browse": "iao39e1", hero: "iao39e2", "full-screen": "iao39e3" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+var item11 = createRuntimeFn({ defaultClassName: "iao39e5", variantClassNames: { variant: { "multi-browse": "iao39e6", uncontained: "iao39e7", hero: "iao39e8", "full-screen": "iao39e9" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+var root19 = createRuntimeFn({ defaultClassName: "iao39e0", variantClassNames: { variant: { "multi-browse": "iao39e1", uncontained: "iao39e2", hero: "iao39e3", "full-screen": "iao39e4" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
 
 // src/components/carousel/carousel.ts
 var Carousel = createCarousel((variant) => ({