npm - @react-md/core - Versions diffs - 1.0.0-next.7 → 1.0.0-next.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (713) hide show

package/dist/RootHtml.d.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type HtmlHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type PropsWithRef } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
+    /** @defaultValue `"ltr"` */
+    dir?: string;
+    /** @defaultValue `"en"` */
+    lang?: string;
+    /**
+     * Any additional props to provide to the `<body>` element and also supports a
+     * `ref` if that is required for some reason. Using a `ref` would make your
+     * root layout a client component though.
+     */
+    bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+    /**
+     * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
+     */
+    bodyClassName?: string;
+    /**
+     * Any content to render before the `<body>` tag. This can be useful if you
+     * need to render a custom `<head>` element.
+     */
+    beforeBodyChildren?: ReactNode;
+    /**
+     * Any content to render after the `<body>` tag. This can be useful to insert
+     * `<script>` tags for analytics or other external libraries.
+     */
+    afterBodyChildren?: ReactNode;
+}
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function RootHtml(props: RootHtmlProps): ReactElement;

package/dist/RootHtml.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export function RootHtml(props) {
+    const { dir = "ltr", lang = "en", children, bodyProps, bodyClassName, beforeBodyChildren, afterBodyChildren, ...remaining } = props;
+    return /*#__PURE__*/ _jsxs("html", {
+        dir: dir,
+        lang: lang,
+        ...remaining,
+        children: [
+            beforeBodyChildren,
+            /*#__PURE__*/ _jsx("body", {
+                ...bodyProps,
+                className: bodyClassName || bodyProps?.className,
+                children: children
+            }),
+            afterBodyChildren
+        ]
+    });
+}
+//# sourceMappingURL=RootHtml.js.map

package/dist/RootHtml.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /** @defaultValue `\"ltr\"` */\n dir?: string;\n\n /** @defaultValue `\"en\"` */\n lang?: string;\n\n /**\n * Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n */\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n /**\n * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n */\n bodyClassName?: string;\n\n /**\n * Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n */\n beforeBodyChildren?: ReactNode;\n\n /**\n * Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n */\n afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example\n * Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n *\n * return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}

package/dist/_core.scss CHANGED Viewed

@@ -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/avatar/Avatar.d.ts CHANGED Viewed

@@ -12,7 +12,18 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
 export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
+    /**
+     * Since avatars are normally presentational data, they are hidden from screen
+     * readers by default.
+     *
+     * @defaultValue `true`
+     */
+    "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
     /**
      * This should be an image `src` attribute to create an avatar from. When this
      * prop is defined, you should not add any children to the avatar as the
@@ -71,5 +82,8 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js CHANGED Viewed

@@ -19,8 +19,11 @@ import { avatar, avatarImage } from "./styles.js";
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
-    const { className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
+    const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;
     if (src || imgProps) {
         img = /*#__PURE__*/ _jsx("img", {
@@ -35,8 +38,8 @@ import { avatar, avatarImage } from "./styles.js";
     }
     return /*#__PURE__*/ _jsxs("span", {
         ...remaining,
+        "aria-hidden": ariaHidden,
         ref: ref,
-        role: "presentation",
         className: avatar({
             size,
             color,

package/dist/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /*\n This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n /\n src?: string;\n\n /\n An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n \n For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n \n @defaultValue `\"\"`\n /\n alt?: string;\n\n /\n An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy\|Referrer Policy}\n \n @remarks \\@since 2.2.0\n /\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /\n An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n \n Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n \n @remarks \\@since 2.2.0\n /\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/\n Server Component\n \n An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n \n @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n \n export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img;\n if (src \|\| imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n ~~ref~~={~~ref~~}\n ~~role=\"presentation~~\"\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","~~role~~"],"mappings":";AAAA,~~SAASA~~,UAAU,~~QAAqD~~,QAAQ;~~AAEhF~~,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;~~AA8D~~/E~~;;;;;;;;;;;;;;;;;;CAkBC~~,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,~~EACJC~~,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,~~GAAGX~~;IAEJ,~~IAAIY~~;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,~~WAAWJ~~,YAAY;~~gBAAEI~~,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;~~QACbV~~,~~KAAKA~~;~~QACLa~~,~~MAAK~~;~~QACLZ~~,~~WAAWL~~,OAAO;~~YAChBS~~;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
1	+ {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/*\n @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n /\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /\n Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n \n @defaultValue `true`\n /\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /\n This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n /\n src?: string;\n\n /\n An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n \n For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n \n @defaultValue `\"\"`\n /\n alt?: string;\n\n /\n An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy\|Referrer Policy}\n \n @remarks \\@since 2.2.0\n /\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /\n An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n \n Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n \n @remarks \\@since 2.2.0\n /\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/\n Server Component\n \n An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n \n @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n \n export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n \n @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src \|\| imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/badge/_badge.scss CHANGED Viewed

@@ -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/dialog/FixedDialog.d.ts CHANGED Viewed

@@ -35,8 +35,7 @@ export declare const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClas
  *   Typography,
  *   useToggle,
  * } from "@react-md/core";
- * import { useRef } from "react";
- * import type { ReactElement } from "react";
+ * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -44,18 +43,20 @@ export declare const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClas
  *     disable: onRequestClose,
  *     toggled: visible,
  *   } = useToggle(false);
+ *   const titleId = useId();
  *   const fixedTo = useRef<HTMLButtonElement>(null)
  *
  *   return (
  *     <>
  *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>
  *       <FixedDialog
- *         aria-labelledby="dialog-title"
+ *         aria-labelledby={titleId}
+ *         fixedTo={fixedTo}
  *         visible={visible}
  *         onRequestClose={onRequestClose}
  *       >
  *         <DialogHeader>
- *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>
  *         </DialogHeader>
  *         <DialogContent>
  *           <Typography margin="none">This is some text in a dialog.</Typography>

package/dist/dialog/FixedDialog.js CHANGED Viewed

@@ -32,8 +32,7 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES = {
  *   Typography,
  *   useToggle,
  * } from "@react-md/core";
- * import { useRef } from "react";
- * import type { ReactElement } from "react";
+ * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -41,18 +40,20 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES = {
  *     disable: onRequestClose,
  *     toggled: visible,
  *   } = useToggle(false);
+ *   const titleId = useId();
  *   const fixedTo = useRef<HTMLButtonElement>(null)
  *
  *   return (
  *     <>
  *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>
  *       <FixedDialog
- *         aria-labelledby="dialog-title"
+ *         aria-labelledby={titleId}
+ *         fixedTo={fixedTo}
  *         visible={visible}
  *         onRequestClose={onRequestClose}
  *       >
  *         <DialogHeader>
- *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>
  *         </DialogHeader>
  *         <DialogContent>
  *           <Typography margin="none">This is some text in a dialog.</Typography>

package/dist/dialog/FixedDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useRef, type RefObject } from \"react\";\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type CalculateFixedPositionOptions,\n type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { type CSSTransitionClassNamesObject } from \"../transition/types.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { Dialog, type BaseDialogProps } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n anchor?: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n options?: CalculateFixedPositionOptions;\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /*\n @defaultValue `true`\n /\n overlayHidden?: boolean;\n\n /\n @defaultValue `true`\n /\n disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n // do nothing\n};\nexport const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appear: \"rmd-dialog--fixed-enter\",\n appearActive: \"rmd-dialog--fixed-enter-active\",\n enter: \"rmd-dialog--fixed-enter\",\n enterActive: \"rmd-dialog--fixed-enter-active\",\n exit: \"rmd-dialog--fixed-exit\",\n exitActive: \"rmd-dialog--fixed-exit-active\",\n };\n\n/\n Client Component\n \n @example\n * Simple Example\n * ```tsx\n * import {\n * Button,\n * DialogHeader,\n * DialogTitle,\n * DialogContent,\n * DialogFooter,\n * FixedDialog,\n * Typography,\n * useToggle,\n * } from \"@react-md/core\";\n * import { useRef ~~} from \"react\";\n * import~~ type { ReactElement } from \"react\";\n \n function Example(): ReactElement {\n * const {\n * toggle,\n * disable: onRequestClose,\n * toggled: visible,\n * } = useToggle(false);\n * const fixedTo = useRef<HTMLButtonElement>(null)\n \n return (\n * <>\n * <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n * <FixedDialog\n * aria-labelledby~~=\"dialog-title~~\"\n * visible={visible}\n * onRequestClose={onRequestClose}\n * >\n * <DialogHeader>\n * <DialogTitle id~~=\"dialog-title\"~~>Simple Dialog</DialogTitle>\n * </DialogHeader>\n * <DialogContent>\n * <Typography margin=\"none\">This is some text in a dialog.</Typography>\n * </DialogContent>\n * <DialogFooter>\n * <Button onClick={onRequestClose}>\n * Close\n * </Button>\n * </DialogFooter>\n * </FixedDialog>\n * </>\n * );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n function FixedDialog(props, nodeRef) {\n const {\n fixedTo,\n style: propStyle,\n classNames = SCALE_CLASSNAMES,\n children,\n anchor = TOP_INNER_RIGHT_ANCHOR,\n options,\n getFixedPositionOptions,\n onEnter,\n onEntering,\n onEntered,\n onExited = noop,\n onRequestClose,\n overlayHidden = true,\n disableScrollLock = true,\n isFocusTypeDisabled = noop,\n ...remaining\n } = props;\n\n const disableExitFocus = useRef(false);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef,\n style: propStyle,\n transformOrigin: true,\n onEnter,\n onEntering,\n onEntered,\n onExited() {\n onExited();\n disableExitFocus.current = false;\n },\n anchor,\n fixedTo,\n onScroll(_event, data) {\n if (!data.visible) {\n disableExitFocus.current = true;\n onRequestClose();\n }\n },\n ...options,\n getFixedPositionOptions,\n });\n\n return (\n <Dialog\n {...remaining}\n {...callbacks}\n ref={ref}\n type=\"custom\"\n fixed\n style={style}\n classNames={classNames}\n onRequestClose={onRequestClose}\n overlayHidden={overlayHidden}\n disableScrollLock={disableScrollLock}\n isFocusTypeDisabled={(type) =>\n isFocusTypeDisabled(type) \|\|\n (type === \"unmount\" && disableExitFocus.current)\n }\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","DEFAULT_FIXED_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,MAAM,QAAwB,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAASC,MAAM,QAA8B,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AACA,OAAO,MAAMC,kCACX;IACEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEJ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC~~,GACD,OAAO,MAAMC,4BAAcd,WACzB,SAASc,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAahB,gBAAgB,EAC7BiB,QAAQ,EACRC,SAASpB,sBAAsB,EAC/BqB,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,WAAWtB,IAAI,EACfuB,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsB1B,IAAI,EAC1B,GAAG2B,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmBjC,OAAO;IAChC,MAAM,EAAEkC,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAGjC,oBAAoB;QACpDa;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ;QACAC;QACAC;QACAC;YACEA;YACAM,iBAAiBI,OAAO,GAAG;QAC7B;QACAhB;QACAL;QACAsB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBR,iBAAiBI,OAAO,GAAG;gBAC3BT;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACnB;QACE,GAAG4B,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLQ,MAAK;QACLC,KAAK;QACL1B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACW,OACpBX,oBAAoBW,SACnBA,SAAS,aAAaT,iBAAiBI,OAAO;kBAGhDjB;;AAGP,GACA"}
1	+ {"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useRef, type RefObject } from \"react\";\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type CalculateFixedPositionOptions,\n type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { type CSSTransitionClassNamesObject } from \"../transition/types.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { Dialog, type BaseDialogProps } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n anchor?: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n options?: CalculateFixedPositionOptions;\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /*\n @defaultValue `true`\n /\n overlayHidden?: boolean;\n\n /\n @defaultValue `true`\n /\n disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n // do nothing\n};\nexport const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appear: \"rmd-dialog--fixed-enter\",\n appearActive: \"rmd-dialog--fixed-enter-active\",\n enter: \"rmd-dialog--fixed-enter\",\n enterActive: \"rmd-dialog--fixed-enter-active\",\n exit: \"rmd-dialog--fixed-exit\",\n exitActive: \"rmd-dialog--fixed-exit-active\",\n };\n\n/\n Client Component\n \n @example\n * Simple Example\n * ```tsx\n * import {\n * Button,\n * DialogHeader,\n * DialogTitle,\n * DialogContent,\n * DialogFooter,\n * FixedDialog,\n * Typography,\n * useToggle,\n * } from \"@react-md/core\";\n * import { useId, useRef, type ReactElement } from \"react\";\n \n function Example(): ReactElement {\n * const {\n * toggle,\n * disable: onRequestClose,\n * toggled: visible,\n * } = useToggle(false);\n * const titleId = useId();\n * const fixedTo = useRef<HTMLButtonElement>(null)\n \n return (\n * <>\n * <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n * <FixedDialog\n * aria-labelledby={titleId}\n * fixedTo={fixedTo}\n * visible={visible}\n * onRequestClose={onRequestClose}\n * >\n * <DialogHeader>\n * <DialogTitle id={titleId}>Simple Dialog</DialogTitle>\n * </DialogHeader>\n * <DialogContent>\n * <Typography margin=\"none\">This is some text in a dialog.</Typography>\n * </DialogContent>\n * <DialogFooter>\n * <Button onClick={onRequestClose}>\n * Close\n * </Button>\n * </DialogFooter>\n * </FixedDialog>\n * </>\n * );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n function FixedDialog(props, nodeRef) {\n const {\n fixedTo,\n style: propStyle,\n classNames = SCALE_CLASSNAMES,\n children,\n anchor = TOP_INNER_RIGHT_ANCHOR,\n options,\n getFixedPositionOptions,\n onEnter,\n onEntering,\n onEntered,\n onExited = noop,\n onRequestClose,\n overlayHidden = true,\n disableScrollLock = true,\n isFocusTypeDisabled = noop,\n ...remaining\n } = props;\n\n const disableExitFocus = useRef(false);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef,\n style: propStyle,\n transformOrigin: true,\n onEnter,\n onEntering,\n onEntered,\n onExited() {\n onExited();\n disableExitFocus.current = false;\n },\n anchor,\n fixedTo,\n onScroll(_event, data) {\n if (!data.visible) {\n disableExitFocus.current = true;\n onRequestClose();\n }\n },\n ...options,\n getFixedPositionOptions,\n });\n\n return (\n <Dialog\n {...remaining}\n {...callbacks}\n ref={ref}\n type=\"custom\"\n fixed\n style={style}\n classNames={classNames}\n onRequestClose={onRequestClose}\n overlayHidden={overlayHidden}\n disableScrollLock={disableScrollLock}\n isFocusTypeDisabled={(type) =>\n isFocusTypeDisabled(type) \|\|\n (type === \"unmount\" && disableExitFocus.current)\n }\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","DEFAULT_FIXED_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,MAAM,QAAwB,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAASC,MAAM,QAA8B,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AACA,OAAO,MAAMC,kCACX;IACEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,4BAAcd,WACzB,SAASc,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAahB,gBAAgB,EAC7BiB,QAAQ,EACRC,SAASpB,sBAAsB,EAC/BqB,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,WAAWtB,IAAI,EACfuB,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsB1B,IAAI,EAC1B,GAAG2B,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmBjC,OAAO;IAChC,MAAM,EAAEkC,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAGjC,oBAAoB;QACpDa;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ;QACAC;QACAC;QACAC;YACEA;YACAM,iBAAiBI,OAAO,GAAG;QAC7B;QACAhB;QACAL;QACAsB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBR,iBAAiBI,OAAO,GAAG;gBAC3BT;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACnB;QACE,GAAG4B,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLQ,MAAK;QACLC,KAAK;QACL1B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACW,OACpBX,oBAAoBW,SACnBA,SAAS,aAAaT,iBAAiBI,OAAO;kBAGhDjB;;AAGP,GACA"}

package/dist/form/MenuItemInputToggle.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;