@react-md/core 1.0.0-next.7 → 1.0.0-next.8

package/dist/_core.scss

@@ -13,6 +13,7 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
@@ -21,7 +22,6 @@
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -361,53 +361,59 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @include css-utils;
-
-  @include app-bar.styles;
-  @include avatar.styles;
-  @include badge.styles;
-  @include box.styles;
-  @include button.styles;
-  @include card.styles;
-  @include chip.styles;
-  @include dialog.styles;
-  @include divider.styles;
-  @include draggable.styles;
-  @include expansion-panel.styles;
-  @include form.styles;
-  @include icon.styles;
-  @include interaction.styles;
-  @include layout.styles;
-  @include link.styles;
-  @include list.styles;
-  @include menu.styles;
-  @include overlay.styles;
-  @include progress.styles;
-  @include responsive-item.styles;
-  @include segmented-button.styles;
-  @include sheet.styles;
-  @include snackbar.styles;
-  @include table.styles;
-  @include tabs.styles;
-  @include tooltip.styles;
-  @include transition.transition-styles;
-  @include tree.styles;
-  @include typography.typography-styles;
-  @include window-splitter.styles;
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
       @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }

package/dist/badge/_badge.scss

@@ -69,31 +69,35 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
-      $light-theme-greyscale-background-color
-    );
-  }
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $light-theme-greyscale-background-color
+      );
+    }
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $light-theme-greyscale-color);
+    }
   }
 }
 
 @mixin use-dark-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
       $dark-theme-greyscale-background-color
-    );
-  }
+    {
+      @include set-var(
+        greyscale-background-color,
+        $dark-theme-greyscale-background-color
+      );
+    }
 
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    }
   }
 }
 

package/dist/form/MenuItemInputToggle.d.ts

@@ -1,23 +1,14 @@
 import { type CSSProperties, type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
-import { type ListItemAddonPosition, type ListItemAddonType, type ListItemHeight } from "../list/types.js";
+import { type ListItemAddonPosition, type ListItemAddonType, type ListItemChildrenTextProps, type ListItemHeight } from "../list/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type IndeterminateCheckboxProps, type InputToggleIconProps } from "./InputToggle.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
-/** @remarks \@since 6.0.0 */
-export interface MenuItemInputToggleClassNameOptions {
-    className?: string;
-    type: "radio" | "checkbox" | "switch";
-}
-/**
- * @remarks \@since 6.0.0
- */
-export declare function menuItemInputToggle(options: MenuItemInputToggleClassNameOptions): string;
 /**
  * @remarks \@since 6.0.0
  */
 export type MenuItemInputToggleCheckedCallback = (checked: boolean, event: MouseEvent<HTMLLIElement>) => void;
 /** @remarks \@since 2.8.0 */
-export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIElement>, InputToggleIconProps {
+export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIElement>, InputToggleIconProps, ListItemChildrenTextProps {
     checked: boolean;
     onCheckedChange: MenuItemInputToggleCheckedCallback;
     /**
@@ -47,10 +38,6 @@ export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIEleme
     /** @defaultValue `"auto"` */
     height?: ListItemHeight;
     /** @defaultValue `false` */
-    multiline?: boolean;
-    /** @defaultValue `false` */
-    disableTextChildren?: boolean;
-    /** @defaultValue `false` */
     iconAfter?: boolean;
     addon?: ReactNode;
     addonType?: ListItemAddonType;

package/dist/form/MenuItemInputToggle.js

@@ -4,21 +4,12 @@ import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { ListItem } from "../list/ListItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
+import { menuItemInputToggle, menuItemInputToggleBall, menuItemInputToggleIcon, menuItemInputToggleTrack } from "./menuItemInputToggleStyles.js";
 const noop = ()=>{
 // do nothing
 };
-const styles = bem("rmd-menu-item-input-toggle");
-/**
- * @remarks \@since 6.0.0
- */ export function menuItemInputToggle(options) {
-    const { className, type } = options;
-    return cnb(`rmd-${type}-menu-item`, styles({
-        switch: type === "switch"
-    }), className);
-}
 /**
  * **Client Component**
  *
@@ -34,33 +25,31 @@ const styles = bem("rmd-menu-item-input-toggle");
     const { id: propId, type, disabled = false, checked, onCheckedChange, preventMenuHideOnClick = false, onClick = noop, className, tabIndex = -1, children, size = "auto", icon: propIcon, iconAfter = false, iconProps, iconStyle, iconClassName, checkedIcon, indeterminate, indeterminateIcon, addon, addonType, addonPosition, addonForceWrap, disableAddonCenteredMedia, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, ...remaining } = props;
     const id = useEnsuredId(propId, "menu-item");
     let icon = propIcon;
-    if (typeof propIcon === "undefined") {
-        if (type === "switch") {
-            icon = /*#__PURE__*/ _jsx(SwitchTrack, {
-                style: trackStyle,
-                ...trackProps,
-                className: cnb(styles("track"), trackClassName, trackProps?.className),
-                active: checked,
-                ballProps: ballProps,
-                ballStyle: ballStyle,
-                ballClassName: cnb(styles("ball"), ballClassName)
-            });
-        } else {
-            icon = /*#__PURE__*/ _jsx(InputToggleIcon, {
-                style: iconStyle,
-                disableEm: true,
-                ...iconProps,
-                className: cnb(styles("icon"), iconClassName, iconProps?.className),
-                size: size,
-                type: type,
-                checked: checked,
-                disabled: disabled,
-                icon: propIcon,
-                checkedIcon: checkedIcon,
-                indeterminate: indeterminate,
-                indeterminateIcon: indeterminateIcon
-            });
-        }
+    if (type === "switch") {
+        icon = /*#__PURE__*/ _jsx(SwitchTrack, {
+            style: trackStyle,
+            ...trackProps,
+            className: cnb(menuItemInputToggleTrack(), trackClassName, trackProps?.className),
+            active: checked,
+            ballProps: ballProps,
+            ballStyle: ballStyle,
+            ballClassName: cnb(menuItemInputToggleBall(), ballClassName)
+        });
+    } else {
+        icon = /*#__PURE__*/ _jsx(InputToggleIcon, {
+            style: iconStyle,
+            disableEm: true,
+            ...iconProps,
+            className: cnb(menuItemInputToggleIcon(), iconClassName, iconProps?.className),
+            size: size,
+            type: type,
+            checked: checked,
+            disabled: disabled,
+            icon: propIcon,
+            checkedIcon: checkedIcon,
+            indeterminate: indeterminate,
+            indeterminateIcon: indeterminateIcon
+        });
     }
     let leftAddon;
     let leftAddonType;

package/dist/form/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  multiline?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          {...trackProps}\n          className={cnb(\n            styles(\"track\"),\n            trackClassName,\n            trackProps?.className\n          )}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./menuItemInputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps,\n    ListItemChildrenTextProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (type === \"switch\") {\n    icon = (\n      <SwitchTrack\n        style={trackStyle}\n        {...trackProps}\n        className={cnb(\n          menuItemInputToggleTrack(),\n          trackClassName,\n          trackProps?.className\n        )}\n        active={checked}\n        ballProps={ballProps}\n        ballStyle={ballStyle}\n        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n      />\n    );\n  } else {\n    icon = (\n      <InputToggleIcon\n        style={iconStyle}\n        disableEm\n        {...iconProps}\n        className={cnb(\n          menuItemInputToggleIcon(),\n          iconClassName,\n          iconProps?.className\n        )}\n        size={size}\n        type={type}\n        checked={checked}\n        disabled={disabled}\n        icon={propIcon}\n        checkedIcon={checkedIcon}\n        indeterminate={indeterminate}\n        indeterminateIcon={indeterminateIcon}\n      />\n    );\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","InputToggleIcon","SwitchTrack","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/form/_form.scss

@@ -271,6 +271,7 @@ $variables: (
   focus-color,
   addon-top,
   addon-margin-top,
+  addon-left-offset,
   label-floating-top,
   label-left-offset,
   label-top-offset,
@@ -331,10 +332,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-light-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-light-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-light-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -382,10 +385,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-dark-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-dark-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-dark-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -615,7 +620,6 @@ $variables: (
 @mixin text-field-container-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-container {
-      @include set-var(label-left-offset, get-var(text-field-padding-left));
       @include use-var(height, text-field-height);
 
       align-items: center;
@@ -684,13 +688,20 @@ $variables: (
             text-field-padding-right,
             $text-field-outlined-padding
           );
-          @include set-var(label-top-offset, -50%);
-          @include set-var(label-active-padding, 0 $label-floating-padding);
-          @include set-var(
-            label-active-background-color,
-            theme.theme-get-var(background-color)
-          );
           @include use-var(border-color, text-field-border-color);
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-outlined-padding);
+          }
+
+          @if not $disable-floating-label {
+            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(label-top-offset, -50%);
+            @include set-var(label-active-padding, 0 $label-floating-padding);
+            @include set-var(
+              label-active-background-color,
+              theme.theme-get-var(background-color)
+            );
+          }
 
           border-radius: $text-field-border-radius;
           border-style: solid;
@@ -738,6 +749,17 @@ $variables: (
             text-field-padding-right,
             $text-field-filled-padding
           );
+          @if not $disable-floating-label {
+            @include set-var(
+              label-left-offset,
+              $text-field-filled-padding + $label-floating-padding
+            );
+          }
+
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-filled-padding);
+          }
+
           @include use-var(background-color, text-field-filled-color);
         }
       }
@@ -1196,7 +1218,7 @@ $variables: (
       // `.rmd-text-field-container` which would prevent these styles from being
       // applied
       &--before {
-        @include utils.auto-rtl(left, get-var(label-left-offset));
+        @include utils.auto-rtl(left, get-var(addon-left-offset));
       }
 
       &--after {
@@ -1989,6 +2011,7 @@ $variables: (
     @if not $disable-text-field-addon {
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
+      @include set-var(addon-left-offset, 0px);
     }
 
     @if not $disable-switch {

package/dist/form/menuItemInputToggleStyles.d.ts

@@ -0,0 +1,39 @@
+/** @remarks \@since 6.0.0 */
+export interface MenuItemInputToggleClassNameOptions {
+    className?: string;
+    type: "radio" | "checkbox" | "switch";
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menuItemInputToggle(options: MenuItemInputToggleClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuItemInputToggleTrackClassNameOptions {
+    className?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menuItemInputToggleTrack(options?: MenuItemInputToggleTrackClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuItemInputToggleBallClassNameOptions {
+    className?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menuItemInputToggleBall(options?: MenuItemInputToggleBallClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuItemInputToggleIconClassNameOptions {
+    className?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menuItemInputToggleIcon(options?: MenuItemInputToggleIconClassNameOptions): string;

package/dist/form/menuItemInputToggleStyles.js

@@ -0,0 +1,31 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-menu-item-input-toggle");
+/**
+ * @remarks \@since 6.0.0
+ */ export function menuItemInputToggle(options) {
+    const { className, type } = options;
+    return cnb(`rmd-${type}-menu-item`, styles({
+        switch: type === "switch"
+    }), className);
+}
+/**
+ * @remarks \@since 6.0.0
+ */ export function menuItemInputToggleTrack(options = {}) {
+    const { className } = options;
+    return cnb(styles("track"), className);
+}
+/**
+ * @remarks \@since 6.0.0
+ */ export function menuItemInputToggleBall(options = {}) {
+    const { className } = options;
+    return cnb(styles("ball"), className);
+}
+/**
+ * @remarks \@since 6.0.0
+ */ export function menuItemInputToggleIcon(options = {}) {
+    const { className } = options;
+    return cnb(styles("icon"), className);
+}
+
+//# sourceMappingURL=menuItemInputToggleStyles.js.map

package/dist/form/menuItemInputToggleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/menuItemInputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuItemInputToggleTrackClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggleTrack(\n  options: MenuItemInputToggleTrackClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"track\"), className);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuItemInputToggleBallClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggleBall(\n  options: MenuItemInputToggleBallClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"ball\"), className);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuItemInputToggleIconClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggleIcon(\n  options: MenuItemInputToggleIconClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"icon\"), className);\n}\n"],"names":["cnb","bem","styles","menuItemInputToggle","options","className","type","switch","menuItemInputToggleTrack","menuItemInputToggleBall","menuItemInputToggleIcon"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAQnB;;CAEC,GACD,OAAO,SAASE,oBACdC,OAA4C;IAE5C,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGF;IAC5B,OAAOJ,IACL,CAAC,IAAI,EAAEM,KAAK,UAAU,CAAC,EACvBJ,OAAO;QAAEK,QAAQD,SAAS;IAAS,IACnCD;AAEJ;AASA;;CAEC,GACD,OAAO,SAASG,yBACdJ,UAAoD,CAAC,CAAC;IAEtD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,OAAO,UAAUG;AAC9B;AASA;;CAEC,GACD,OAAO,SAASI,wBACdL,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,OAAO,SAASG;AAC7B;AASA;;CAEC,GACD,OAAO,SAASK,wBACdN,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,OAAO,SAASG;AAC7B"}

package/dist/icon/_icon.scss

@@ -58,6 +58,9 @@ $variables: (
   symbol-optical-size
 );
 
+// shouldn't really use react-md without icons though...
+$_disable-icons: $disable-font and $disable-svg and $disable-symbol;
+
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "icon");
   @if $fallback {
@@ -78,13 +81,13 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $light-theme-color);
   }
 }
 
 @mixin use-dark-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $dark-theme-color);
   }
 }
@@ -96,7 +99,7 @@ $variables: (
 }
 
 @mixin variables {
-  @if not $disable-font or not $disable-svg or not $disable-symbol {
+  @if not $_disable-icons {
     @include set-var(color, $color);
     @include set-var(size, $size);
     @include set-var(spacing, $spacing);
@@ -116,8 +119,7 @@ $variables: (
 }
 
 @mixin styles($disable-layer: false) {
-  // shouldn't really use react-md without icons though...
-  @if not $disable-font or not $disable-svg or not $disable-symbol {
+  @if not $_disable-icons {
     @include utils.optional-layer(icon, $disable-layer) {
       @include theme.default-system-theme {
         @include use-dark-theme;

package/dist/index.d.ts

@@ -86,6 +86,7 @@ export * from "./form/TextFieldContainerStyles.js";
 export * from "./form/fileUtils.js";
 export * from "./form/formConfig.js";
 export * from "./form/formMessageStyles.js";
+export * from "./form/menuItemInputToggleStyles.js";
 export * from "./form/nativeSelectStyles.js";
 export * from "./form/optionStyles.js";
 export * from "./form/passwordStyles.js";

package/dist/index.js

@@ -86,6 +86,7 @@ export * from "./form/TextFieldContainerStyles.js";
 export * from "./form/fileUtils.js";
 export * from "./form/formConfig.js";
 export * from "./form/formMessageStyles.js";
+export * from "./form/menuItemInputToggleStyles.js";
 export * from "./form/nativeSelectStyles.js";
 export * from "./form/optionStyles.js";
 export * from "./form/passwordStyles.js";