@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/dist/expansion-panel/_expansion-panel.scss

@@ -2,6 +2,7 @@
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
+@use "../theme/theme";
 
 $disable-everything: false !default;
 $disable-margin-top-transition: false !default;
@@ -12,69 +13,94 @@ $button-spacing: icon.$spacing !default;
 $rotate-from: icon.$rotate-from !default;
 $rotate-to: icon.$rotate-to !default;
 
-@mixin styles {
+$box-shadow-overlay-height: 10px !default;
+$box-shadow-overlay-bottom: -6px !default;
+
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    // does not require custom styles
-    .rmd-expansion-panel {
-      @if not $disable-margin-top-transition and $spacing {
-        &--animate {
-          transition: margin-top transition.$linear-duration;
+    @include utils.optional-layer(expansion-panel, $disable-layer) {
+      // does not require custom styles
+      .rmd-expansion-panel {
+        @if not $disable-margin-top-transition and $spacing {
+          &--animate {
+            transition: margin-top transition.$linear-duration;
+          }
         }
-      }
 
-      @if $spacing {
-        &--expanded + .rmd-expansion-panel {
-          margin-top: $spacing;
+        @if $spacing {
+          &--expanded + .rmd-expansion-panel {
+            margin-top: $spacing;
+          }
         }
-      }
 
-      // once firefox supports the `:has` selector, I can handle most of this in CSS instead of javascript:
-      // &:where(:not(.rmd-expansion-panel--expanded)):has(+ .rmd-expansion-panel) {
-      //   border-bottom-left-radius: 0;
-      //   border-bottom-right-radius: 0;
-      //   position: relative;
+        @if not utils.$disable-has-selectors {
+          // this makes it so that the box-shadow between closed panels is not
+          // visible by covering it in a small overlay of the current
+          // background-color
+          &:where(:not(.rmd-expansion-panel--expanded)):has(
+              + .rmd-expansion-panel
+            ) {
+            position: relative;
+
+            &::after {
+              @include theme.theme-use-var(background-color);
 
-      //   &::after {
-      //     background: #fff;
-      //     bottom: -5px;
-      //     content: "";
-      //     height: 8px;
-      //     left: 0;
-      //     position: absolute;
-      //     right: 0;
-      //     z-index: 1;
-      //   }
+              bottom: $box-shadow-overlay-bottom;
+              content: "";
+              height: $box-shadow-overlay-height;
+              left: 0;
+              position: absolute;
+              right: 0;
+              z-index: 1;
+            }
+          }
+        }
+      }
+
+      // .rmd-expansion-panel__header {
       // }
-    }
 
-    // .rmd-expansion-panel__header {
-    // }
+      .rmd-expansion-panel__button {
+        @if $rotate-from != icon.$rotate-from {
+          @include icon.set-var(rotate-from, $rotate-from);
+        }
 
-    .rmd-expansion-panel__button {
-      @if $rotate-from != icon.$rotate-from {
-        @include icon.set-var(rotate-from, $rotate-from);
-      }
+        @if $rotate-to != icon.$rotate-to {
+          @include icon.set-var(rotate-to, $rotate-to);
+        }
 
-      @if $rotate-to != icon.$rotate-to {
-        @include icon.set-var(rotate-to, $rotate-to);
-      }
+        @if button.$disable-unstyled-utility-class {
+          @include button.unstyled;
+        }
+        @include utils.auto-rtl(text-align, left);
 
-      @if button.$disable-unstyled-utility-class {
-        @include button.unstyled;
-      }
-      @include utils.auto-rtl(text-align, left);
+        align-items: center;
+        color: inherit;
+        font: inherit;
+        gap: $button-spacing;
+        justify-content: space-between;
+        letter-spacing: inherit;
+        padding: $padding;
+        width: 100%;
 
-      align-items: center;
-      color: inherit;
-      font: inherit;
-      gap: $button-spacing;
-      justify-content: space-between;
-      letter-spacing: inherit;
-      padding: $padding;
-      width: 100%;
+        &[aria-disabled="true"] {
+          cursor: auto;
+        }
 
-      &[aria-disabled="true"] {
-        cursor: auto;
+        // need to raise the focus outline z-index so it is above the box-shadow
+        @if not utils.$disable-has-selectors {
+          @if not utils.$disable-focus-visible {
+            &::before {
+              z-index: 2;
+            }
+          } @else {
+            @include utils.keyboard-only {
+              &::before {
+                z-index: 2;
+              }
+            }
+          }
+        }
       }
     }
   }

package/dist/expansion-panel/useExpansionPanels.d.ts

@@ -20,7 +20,7 @@ export interface ExpansionPanelHookOptions {
      *
      * @defaultValue `false`
      */
-    preventAllClosed?: boolean;
+    preventAllCollapsed?: boolean;
     /**
      * This is a convenience option to disable the expansion transition for all
      * panels.
@@ -29,7 +29,7 @@ export interface ExpansionPanelHookOptions {
      */
     disableTransition?: boolean;
     /**
-     * @defaultValue `preventAllClosed ? ["expansion-panel-" + useId() + "-1"] : []`
+     * @defaultValue `preventAllCollapsed ? ["expansion-panel-" + useId() + "-1"] : []`
      */
     defaultExpandedIds?: UseStateInitializer<string[]>;
     /**
@@ -58,7 +58,9 @@ export interface ExpansionPanelHookOptions {
     disableContentPadding?: boolean;
 }
 /** @remarks \@since 6.0.0 */
-export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "id" | "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding">;
+export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding"> & {
+    id?: string;
+};
 /**
  * @param indexOrPanelId - This should either be a DOM id to use for the panel
  * or the panel's index.

package/dist/expansion-panel/useExpansionPanels.js

@@ -80,13 +80,13 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * panel props based on the provided `count`, and the hook no longer supports
  * having all panels expanded by default.
  */ export function useExpansionPanels(options = {}) {
-    const { baseId: propBaseId, multiple = false, preventAllClosed = false, disableTransition = false, defaultExpandedIds, defaultExpandedIndex, disableContentPadding = false } = options;
+    const { baseId: propBaseId, multiple = false, preventAllCollapsed = false, disableTransition = false, defaultExpandedIds, defaultExpandedIndex, disableContentPadding = false } = options;
     const baseId = useEnsuredId(propBaseId, "expansion-panel");
     const createId = (index)=>`${baseId}-${index + 1}`;
     const [expandedIds, setExpandedIds] = useState(()=>{
         if (typeof defaultExpandedIds === "undefined") {
             const initialList = [];
-            if (typeof defaultExpandedIndex === "number" || preventAllClosed) {
+            if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
                 initialList.push(createId(defaultExpandedIndex ?? 0));
             }
             return new Set(initialList);
@@ -98,9 +98,16 @@ import { useEnsuredId } from "../useEnsuredId.js";
         expandedIds,
         setExpandedIds,
         getPanelProps (indexOrPanelId) {
-            const id = typeof indexOrPanelId === "string" ? indexOrPanelId : createId(indexOrPanelId);
-            const expanded = expandedIds.has(id);
-            const disabled = expanded && preventAllClosed && expandedIds.size === 1;
+            let id;
+            let panelId;
+            if (typeof indexOrPanelId === "number") {
+                id = createId(indexOrPanelId);
+                panelId = id;
+            } else {
+                panelId = indexOrPanelId;
+            }
+            const expanded = expandedIds.has(panelId);
+            const disabled = expanded && preventAllCollapsed && expandedIds.size === 1;
             return {
                 id,
                 disabled,
@@ -110,17 +117,17 @@ import { useEnsuredId } from "../useEnsuredId.js";
                         return;
                     }
                     setExpandedIds((prevIds)=>{
-                        const expanded = prevIds.has(id);
+                        const expanded = prevIds.has(panelId);
                         if (!multiple) {
                             return new Set(expanded ? [] : [
-                                id
+                                panelId
                             ]);
                         }
                         const nextIds = new Set(prevIds);
                         if (expanded) {
-                            nextIds.delete(id);
+                            nextIds.delete(panelId);
                         } else {
-                            nextIds.add(id);
+                            nextIds.add(panelId);
                         }
                         return nextIds;
                     });

package/dist/expansion-panel/useExpansionPanels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllClosed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllClosed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"id\"\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n>;\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @remarks \\@since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example\n   * Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example\n   * Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example\n * Index Based Panels\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example\n * Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllClosed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\n    if (typeof defaultExpandedIds === \"undefined\") {\n      const initialList: string[] = [];\n      if (typeof defaultExpandedIndex === \"number\" || preventAllClosed) {\n        initialList.push(createId(defaultExpandedIndex ?? 0));\n      }\n\n      return new Set(initialList);\n    }\n\n    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      const id =\n        typeof indexOrPanelId === \"string\"\n          ? indexOrPanelId\n          : createId(indexOrPanelId);\n\n      const expanded = expandedIds.has(id);\n      const disabled = expanded && preventAllClosed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(id);\n            if (!multiple) {\n              return new Set(expanded ? [] : [id]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(id);\n            } else {\n              nextIds.add(id);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllClosed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAyHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,mBAAmB,KAAK,EACxBC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,kBAAkB;gBAChES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,MAAMC,KACJ,OAAOD,mBAAmB,WACtBA,iBACAT,SAASS;YAEf,MAAME,WAAWT,YAAYU,GAAG,CAACF;YACjC,MAAMG,WAAWF,YAAYhB,oBAAoBO,YAAYY,IAAI,KAAK;YACtE,OAAO;gBACLJ;gBACAG;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAV,eAAe,CAACa;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAAChB,UAAU;4BACb,OAAO,IAAIY,IAAIK,WAAW,EAAE,GAAG;gCAACD;6BAAG;wBACrC;wBAEA,MAAMO,UAAU,IAAIX,IAAIU;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACArB;gBACAG;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllCollapsed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllCollapsed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n> & { id?: string };\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @remarks \\@since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example\n   * Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example\n   * Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example\n * Index Based Panels\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example\n * Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllCollapsed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\n    if (typeof defaultExpandedIds === \"undefined\") {\n      const initialList: string[] = [];\n      if (typeof defaultExpandedIndex === \"number\" || preventAllCollapsed) {\n        initialList.push(createId(defaultExpandedIndex ?? 0));\n      }\n\n      return new Set(initialList);\n    }\n\n    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      let id: string | undefined;\n      let panelId: string;\n      if (typeof indexOrPanelId === \"number\") {\n        id = createId(indexOrPanelId);\n        panelId = id;\n      } else {\n        panelId = indexOrPanelId;\n      }\n\n      const expanded = expandedIds.has(panelId);\n      const disabled =\n        expanded && preventAllCollapsed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(panelId);\n            if (!multiple) {\n              return new Set(expanded ? [] : [panelId]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(panelId);\n            } else {\n              nextIds.add(panelId);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAwHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,sBAAsB,KAAK,EAC3BC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,qBAAqB;gBACnES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKV,SAASS;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWV,YAAYW,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYjB,uBAAuBO,YAAYa,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAX,eAAe,CAACc;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAACjB,UAAU;4BACb,OAAO,IAAIY,IAAIM,WAAW,EAAE,GAAG;gCAACD;6BAAQ;wBAC1C;wBAEA,MAAMO,UAAU,IAAIZ,IAAIW;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACAtB;gBACAG;YACF;QACF;IACF;AACF"}

package/dist/form/Form.d.ts

@@ -10,7 +10,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     disablePreventDefault?: boolean;
 }
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const noop = ()=>{
 // do nothing
 };
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["import { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":";AAAA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}

package/dist/form/Label.d.ts

@@ -2,11 +2,11 @@
 import { type LabelClassNameOptions, type LabelProps } from "./types.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-form-label-floating-top"?: string | number;
-        "--rmd-form-label-left-offset"?: string | number;
-        "--rmd-form-label-top-offset"?: string | number;
-        "--rmd-form-label-active-padding"?: string | number;
-        "--rmd-form-label-active-background-color"?: string;
+        "--rmd-label-floating-top"?: string | number;
+        "--rmd-label-left-offset"?: string | number;
+        "--rmd-label-top-offset"?: string | number;
+        "--rmd-label-active-padding"?: string | number;
+        "--rmd-label-active-background-color"?: string;
     }
 }
 /**

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-label-floating-top\"?: string | number;\n    \"--rmd-form-label-left-offset\"?: string | number;\n    \"--rmd-form-label-top-offset\"?: string | number;\n    \"--rmd-form-label-active-padding\"?: string | number;\n    \"--rmd-form-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @remarks \\@since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @remarks \\@since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}

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` */
-    threeLines?: 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  threeLines?: 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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAO/C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AAKtC,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,WAAW,QAAQ,mBAAmB;AAG/C,MAAMC,OAAO;AACX,aAAa;AACf;AACA,MAAMC,SAASJ,IAAI;AAQnB;;CAEC,GACD,OAAO,SAASK,oBACdC,OAA4C;IAE5C,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGF;IAC5B,OAAOV,IACL,CAAC,IAAI,EAAEY,KAAK,UAAU,CAAC,EACvBJ,OAAO;QAAEK,QAAQD,SAAS;IAAS,IACnCD;AAEJ;AAmGA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMG,oCAAsBb,WAGjC,SAASa,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,IAAIC,MAAM,EACVN,IAAI,EACJO,WAAW,KAAK,EAChBC,OAAO,EACPC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,UAAUhB,IAAI,EACdI,SAAS,EACTa,WAAW,CAAC,CAAC,EACbC,QAAQ,EACRC,OAAO,MAAM,EACbC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,yBAAyB,EACzBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,cAAc,EACd,GAAGC,WACJ,GAAGhC;IAEJ,MAAME,KAAKd,aAAae,QAAQ;IAEhC,IAAIS,OAAOC;IACX,IAAI,OAAOA,aAAa,aAAa;QACnC,IAAIhB,SAAS,UAAU;YACrBe,qBACE,KAACrB;gBACC0C,OAAOH;gBACN,GAAGD,UAAU;gBACdjC,WAAWX,IACTQ,OAAO,UACPsC,gBACAF,YAAYjC;gBAEdsC,QAAQ7B;gBACRqB,WAAWA;gBACXC,WAAWA;gBACXC,eAAe3C,IAAIQ,OAAO,SAASmC;;QAGzC,OAAO;YACLhB,qBACE,KAACtB;gBACC2C,OAAOjB;gBACPmB,SAAS;gBACR,GAAGpB,SAAS;gBACbnB,WAAWX,IAAIQ,OAAO,SAASwB,eAAeF,WAAWnB;gBACzDe,MAAMA;gBACNd,MAAMA;gBACNQ,SAASA;gBACTD,UAAUA;gBACVQ,MAAMC;gBACNK,aAAaA;gBACbC,eAAeA;gBACfC,mBAAmBA;;QAGzB;IACF;IAEA,IAAIgB;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAI/B,WAAW;QACbsB,YAAYf;QACZgB,gBAAgBf;QAChBgB,oBAAoBf;QACpBgB,qBAAqBf;QACrBgB,gCAAgCf;QAChCgB,aAAa7B;IACf,OAAO;QACLwB,YAAYxB;QACZ6B,aAAapB;QACbqB,iBAAiBpB;QACjBqB,qBAAqBpB;QACrBqB,sBAAsBpB;QACtBqB,iCAAiCpB;IACnC;IAEA,qBACE,KAACtC;QACE,GAAG6C,SAAS;QACb,2CAA2C;QAC3Cc,gBAAc3B,iBAAiBd,UAAU,UAAUA;QACnDH,IAAIA;QACJ6C,MAAMlD,SAAS,UAAU,kBAAkB;QAC3CW,SAAS,CAACwC;YACRxC,QAAQwC;YACR1C,gBAAgB,CAACD,SAAS2C;YAE1B,IAAIzC,wBAAwB;gBAC1ByC,MAAMC,eAAe;YACvB;QACF;QACAhD,KAAKA;QACLL,WAAWF,oBAAoB;YAAEG;YAAMD;QAAU;QACjDQ,UAAUA;QACVK,UAAUA;QACV2B,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,+BAA+BA;QAC/BC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,gCAAgCA;kBAE/BnC;;AAGP,GAAG"}
+{"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/NativeSelect.d.ts

@@ -1,7 +1,10 @@
 import { type CSSProperties, type HTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
-export interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement>, UserAgentAutoCompleteProps, FormFieldOptions {
+import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ */
+export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">, UserAgentAutocompleteProps, FormFieldOptions {
     /**
      * A custom dropdown icon to use instead of the browser's default select
      * dropdown icon.