@m3-baseui/react-vanilla-extract 3.0.0 → 5.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,19 +1,21 @@
 "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 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"]] });
+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" }, toggle: { on: "_1k5uet5a", off: "_1k5uet5b" }, size: { xs: "_1k5uet50", s: "_1k5uet51", m: "_1k5uet52", l: "_1k5uet53", xl: "_1k5uet54" }, width: { narrow: "_1k5uet5h", "default": "_1k5uet5i", wide: "_1k5uet5j" }, shape: { round: "_1k5uet5k", square: "_1k5uet5l" } }, defaultVariants: { variant: "standard", size: "s", width: "default", shape: "round" }, compoundVariants: [[{ size: "xs", width: "narrow" }, "_1k5uet5m"], [{ size: "xs", width: "default" }, "_1k5uet5n"], [{ size: "xs", width: "wide" }, "_1k5uet5o"], [{ size: "s", width: "narrow" }, "_1k5uet5p"], [{ size: "s", width: "default" }, "_1k5uet5q"], [{ size: "s", width: "wide" }, "_1k5uet5r"], [{ size: "m", width: "narrow" }, "_1k5uet5s"], [{ size: "m", width: "default" }, "_1k5uet5t"], [{ size: "m", width: "wide" }, "_1k5uet5u"], [{ size: "l", width: "narrow" }, "_1k5uet5v"], [{ size: "l", width: "default" }, "_1k5uet5w"], [{ size: "l", width: "wide" }, "_1k5uet5x"], [{ size: "xl", width: "narrow" }, "_1k5uet5y"], [{ size: "xl", width: "default" }, "_1k5uet5z"], [{ size: "xl", width: "wide" }, "_1k5uet510"], [{ shape: "square", size: "xs" }, "_1k5uet511"], [{ shape: "square", size: "s" }, "_1k5uet512"], [{ shape: "square", size: "m" }, "_1k5uet513"], [{ shape: "square", size: "l" }, "_1k5uet514"], [{ shape: "square", size: "xl" }, "_1k5uet515"], [{ shape: "round", toggle: "on", size: "xs" }, "_1k5uet516"], [{ shape: "round", toggle: "on", size: "s" }, "_1k5uet517"], [{ shape: "round", toggle: "on", size: "m" }, "_1k5uet518"], [{ shape: "round", toggle: "on", size: "l" }, "_1k5uet519"], [{ shape: "round", toggle: "on", size: "xl" }, "_1k5uet51a"], [{ shape: "square", toggle: "on", size: "xs" }, "_1k5uet51b"], [{ shape: "square", toggle: "on", size: "s" }, "_1k5uet51c"], [{ shape: "square", toggle: "on", size: "m" }, "_1k5uet51d"], [{ shape: "square", toggle: "on", size: "l" }, "_1k5uet51e"], [{ shape: "square", toggle: "on", size: "xl" }, "_1k5uet51f"], [{ variant: "outlined", size: "l" }, "_1k5uet51g"], [{ variant: "outlined", size: "xl" }, "_1k5uet51h"], [{ variant: "standard", toggle: "on" }, "_1k5uet51i"], [{ variant: "filled", toggle: "off" }, "_1k5uet51j"], [{ variant: "tonal", toggle: "on" }, "_1k5uet51k"], [{ variant: "outlined", toggle: "on" }, "_1k5uet51l"]] });
 
 // src/components/icon-button/icon-button.ts
 var IconButton = createIconButton(
-  ({ variant, selected, size, width }) => iconButton({ variant, selected, size, width })
+  ({ variant, selected, size, width, shape }) => iconButton({ variant, size, width, shape, toggle: toToggle(selected) })
 );
 
 // src/components/switch/switch.css.ts