@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/form/_form.scss

@@ -24,7 +24,6 @@ $disable-label-gap: $disable-everything !default;
 $disable-label-reversed: $disable-everything !default;
 $disable-label-stacked: $disable-everything !default;
 $disable-label-stacked-reversed: $disable-everything !default;
-$disable-file-input: $disable-everything !default;
 $disable-text-field: $disable-everything !default;
 $disable-textarea: $disable-everything !default;
 $disable-password: $disable-text-field !default;
@@ -437,25 +436,12 @@ $variables: (
   }
 }
 
-@mixin file-input-styles($disable-layer: false) {
-  @if utils.$disable-has-selectors or utils.$disable-focus-visible {
-    .rmd-file-input:focus-within::before {
-      @include utils.keyboard-only {
-        @include interaction.focus-styles;
-      }
-    }
-  } @else {
-    .rmd-file-input:has(:focus-visible)::before {
-      @include interaction.focus-styles;
-    }
-  }
-}
-
 @mixin form-message-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-form-message-container {
       display: flex;
       flex-direction: column;
+      width: 100%;
     }
 
     .rmd-form-message {
@@ -492,11 +478,17 @@ $variables: (
 
       @if not $disable-text-field-counter {
         &__counter {
-          @include utils.auto-rtl(margin-left, auto);
-          @include utils.auto-rtl(padding-left, $message-counter-spacing);
-
           flex-shrink: 0;
+          margin-left: auto;
+          padding-left: $message-counter-spacing;
           white-space: nowrap;
+
+          @include utils.rtl {
+            margin-left: 0;
+            margin-right: auto;
+            padding-left: 0;
+            padding-right: $message-counter-spacing;
+          }
         }
       }
     }
@@ -525,6 +517,14 @@ $variables: (
 
       @if not $disable-floating-label {
         &--floating {
+          left: 0;
+          position: absolute;
+          top: 0;
+          transform: translate(
+            get-var(text-field-padding-left),
+            get-var(label-floating-top)
+          );
+
           @include utils.rtl {
             left: auto;
             right: 0;
@@ -533,14 +533,6 @@ $variables: (
               get-var(label-floating-top)
             );
           }
-
-          left: 0;
-          position: absolute;
-          top: 0;
-          transform: translate(
-            get-var(text-field-padding-left),
-            get-var(label-floating-top)
-          );
         }
 
         &--floating-dense {
@@ -555,23 +547,15 @@ $variables: (
         {
           $floating-active-selector: $floating-active-selector +
             ", .rmd-text-field-container:focus-within &--floating" +
-            ", .rmd-text-field:not(:placeholder-shown) + &--floating";
+            ", .rmd-text-field:not(:placeholder-shown) ~ &--floating";
         }
         @if not $disable-native-select {
           $floating-active-selector: $floating-active-selector +
-            ", .rmd-native-select[multiple] + &--floating" +
-            ", .rmd-native-select:not(:invalid) + &--floating";
+            ", .rmd-native-select[multiple] ~ &--floating" +
+            ", .rmd-native-select:not(:invalid) ~ &--floating";
         }
 
         #{$floating-active-selector} {
-          @include utils.rtl {
-            transform: scale($label-floating-scale)
-              translate(
-                utils.negate-var(get-var(label-left-offset)),
-                get-var(label-top-offset)
-              );
-            transform-origin: 100% 0;
-          }
           @include use-var(background-color, label-active-background-color);
           @include use-var(padding, label-active-padding);
 
@@ -581,6 +565,15 @@ $variables: (
           // it'll change the position based on the size of the label otherwise
           transform-origin: 0 0;
           z-index: 1;
+
+          @include utils.rtl {
+            transform: scale($label-floating-scale)
+              translate(
+                utils.negate-var(get-var(label-left-offset)),
+                get-var(label-top-offset)
+              );
+            transform-origin: 100% 0;
+          }
         }
       }
 
@@ -620,7 +613,9 @@ $variables: (
 
       align-items: center;
       display: flex;
+      flex: 1 1 auto;
       position: relative;
+      width: 100%;
 
       @if not $disable-text-field-container-dense {
         &--dense {
@@ -634,11 +629,7 @@ $variables: (
 
       &--inline {
         display: inline-flex;
-      }
-
-      &--stretch {
-        flex: 1 1 auto;
-        width: 100%;
+        width: auto;
       }
 
       &--label {
@@ -750,6 +741,11 @@ $variables: (
 
       @if not $disable-text-field-filled-theme {
         &--filled {
+          @include theme.theme-set-var(
+            background-color,
+            get-var(text-field-filled-color)
+          );
+          @include theme.theme-use-var(background-color);
           @include set-var(text-field-padding-left, $text-field-filled-padding);
           @include set-var(
             text-field-padding-right,
@@ -765,8 +761,6 @@ $variables: (
           @if not $disable-text-field-addon {
             @include set-var(addon-left-offset, $text-field-filled-padding);
           }
-
-          @include use-var(background-color, text-field-filled-color);
         }
       }
 
@@ -878,10 +872,6 @@ $variables: (
 
 @mixin _text-field-base-styles {
   @include utils.map-to-styles($text-field-typography);
-  @include utils.rtl {
-    @include use-var(padding-left, text-field-padding-right);
-    @include use-var(padding-right, text-field-padding-left);
-  }
   @include use-var(padding-left, text-field-padding-left);
   @include use-var(padding-right, text-field-padding-right);
   @include use-var(padding-top, text-field-padding-top);
@@ -893,10 +883,6 @@ $variables: (
   height: 100%;
   outline: none;
   width: 100%;
-
-  &[disabled] {
-    @include theme.theme-use-var(color, text-disabled-color);
-  }
 }
 
 @mixin text-field-styles($disable-layer: false) {
@@ -904,6 +890,10 @@ $variables: (
     .rmd-text-field {
       @include _text-field-base-styles;
 
+      &[disabled] {
+        @include theme.theme-use-var(color, text-disabled-color);
+      }
+
       @if $text-field-color-min-width {
         &[type="color"] {
           min-width: $text-field-color-min-width;
@@ -937,6 +927,11 @@ $variables: (
       &--placeholder-hidden:not(:focus)::placeholder {
         opacity: 0;
       }
+
+      @include utils.rtl {
+        @include use-var(padding-left, text-field-padding-right);
+        @include use-var(padding-right, text-field-padding-left);
+      }
     }
   }
 }
@@ -950,13 +945,23 @@ $variables: (
       );
 
       &__input {
-        @include utils.auto-rtl(margin-right, button.get-var(icon-size));
+        @include button.use-var(margin-right, icon-size);
+
+        @include utils.rtl {
+          @include button.use-var(margin-left, icon-size);
+
+          margin-right: 0;
+        }
       }
 
       &__toggle {
-        @include utils.auto-rtl(right, 0);
-
         position: absolute;
+        right: 0;
+
+        @include utils.rtl {
+          left: 0;
+          right: auto;
+        }
       }
     }
   }
@@ -1081,25 +1086,19 @@ $variables: (
     }
 
     .rmd-select {
-      // disable pointer events on touch devices so the soft keyboard does not
-      // appear when clicking the select
-      @media (hover: none) and (pointer: coarse) {
-        pointer-events: none;
-      }
-
       opacity: 0;
 
       // All these additional overrides are provided so that the select will have
       // the same sizing as a text field with the same props provided.
       @if not $disable-text-field-underlined-theme {
         &--underline {
+          padding-right: 0;
+
           @include utils.rtl {
             @include use-var(padding-right, text-field-padding-left);
 
             padding-left: 0;
           }
-
-          padding-right: 0;
         }
       }
 
@@ -1123,6 +1122,12 @@ $variables: (
           }
         }
       }
+
+      // disable pointer events on touch devices so the soft keyboard does not
+      // appear when clicking the select
+      @media (hover: none) and (pointer: coarse) {
+        pointer-events: none;
+      }
     }
   }
 }
@@ -1131,13 +1136,13 @@ $variables: (
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-option {
       &--icon {
+        padding-left: $option-padding-left;
+
         @include utils.rtl {
           @include list.use-var(padding-left, item-horizontal-padding);
 
           padding-right: $option-padding-left;
         }
-
-        padding-left: $option-padding-left;
       }
 
       &--selected {
@@ -1188,9 +1193,18 @@ $variables: (
 
       appearance: none;
 
+      &[disabled] {
+        @include theme.theme-use-var(color, text-disabled-color);
+      }
+
       &[multiple] {
         overflow: auto;
       }
+
+      @include utils.rtl {
+        @include use-var(padding-left, text-field-padding-right);
+        @include use-var(padding-right, text-field-padding-left);
+      }
     }
   }
 }
@@ -1218,11 +1232,21 @@ $variables: (
       // `.rmd-text-field-container` which would prevent these styles from being
       // applied
       &--before {
-        @include utils.auto-rtl(left, get-var(addon-left-offset));
+        @include use-var(left, addon-left-offset);
+
+        @include utils.rtl {
+          @include use-var(right, addon-left-offset);
+          left: auto;
+        }
       }
 
       &--after {
-        @include utils.auto-rtl(right, get-var(addon-spacing));
+        @include use-var(right, addon-spacing);
+
+        @include utils.rtl {
+          @include use-var(left, addon-spacing);
+          right: auto;
+        }
       }
 
       &--presentational {
@@ -1253,6 +1277,7 @@ $variables: (
 @mixin input-toggle-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-input-toggle {
+      @include icon.set-var(color, currentcolor);
       @include interaction.surface(
         $focus-selector:
           if(
@@ -1265,14 +1290,16 @@ $variables: (
         $disabled-selector: "&--disabled",
         $higher-contrast: false
       );
-      @include icon.set-var(color, currentcolor);
 
-      align-items: center;
-      border-radius: $input-toggle-border-radius;
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      padding: $input-toggle-padding;
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        align-items: center;
+        border-radius: $input-toggle-border-radius;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+        padding: $input-toggle-padding;
+      }
 
       &--em {
         @include icon.set-var(size, 1em);
@@ -1407,19 +1434,22 @@ $variables: (
           $disabled-selector: null,
           $clickable: false
         );
-        @include utils.auto-rtl(left, calc(-50% + #{$switch-ball-offset}));
 
-        align-items: center;
-        border-radius: $switch-ball-border-radius;
-        display: flex;
-        height: $switch-ball-size * 2;
-        justify-content: center;
-        top: calc(-50% - #{$switch-ball-size - $switch-track-height});
-        transition-duration: transition.$linear-duration;
-        transition-property: background-color, transform;
-        transition-timing-function: transition.$linear-timing-function;
-        width: $switch-ball-size * 2;
-        z-index: 1;
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          align-items: center;
+          border-radius: $switch-ball-border-radius;
+          display: flex;
+          height: $switch-ball-size * 2;
+          justify-content: center;
+          left: calc(-50% + #{$switch-ball-offset});
+          top: calc(-50% - #{$switch-ball-size - $switch-track-height});
+          transition-duration: transition.$linear-duration;
+          transition-property: background-color, transform;
+          transition-timing-function: transition.$linear-timing-function;
+          width: $switch-ball-size * 2;
+          z-index: 1;
+        }
 
         &::after {
           @include use-var(background-color, switch-ball-background-color);
@@ -1442,12 +1472,18 @@ $variables: (
         #{$active-selector} {
           $offset: $switch-ball-size + $switch-ball-offset;
 
+          @include set-var(switch-ball-background-color, get-var(active-color));
+
+          transform: translateX($offset);
+
           @include utils.rtl {
             transform: translateX(-$offset);
           }
-          @include set-var(switch-ball-background-color, get-var(active-color));
+        }
 
-          transform: translateX($offset);
+        @include utils.rtl {
+          left: auto;
+          right: calc(-50% + #{$switch-ball-offset});
         }
       }
     }
@@ -1480,9 +1516,8 @@ $variables: (
         // by the ListItem instead. without decreasing the ball size, horizontal
         // scrollbars will appear when the switch is checked
         &__ball {
-          @include utils.auto-rtl(left, -$switch-ball-offset);
-
           height: $switch-ball-size;
+          left: -$switch-ball-offset;
           top: calc(50% - $switch-ball-size * 0.5);
           width: $switch-ball-size;
 
@@ -1493,6 +1528,11 @@ $variables: (
           &::after {
             inset: 0;
           }
+
+          @include utils.rtl {
+            left: auto;
+            right: -$switch-ball-offset;
+          }
         }
       }
     }
@@ -1624,24 +1664,29 @@ $variables: (
         }
 
         &--h1::after {
-          @include utils.auto-rtl(left, 0);
           @include use-var(max-width, slider-offset-1);
 
+          left: 0;
           transition-property: max-width;
           width: 100%;
+
+          @include utils.rtl {
+            left: auto;
+            right: 0;
+          }
         }
 
         @if not $disable-range-slider {
           &--h2::after {
-            @include utils.rtl {
-              left: calc(100% - get-var(slider-offset-2));
-              right: get-var(slider-offset-1);
-            }
-
             left: get-var(slider-offset-1);
             right: calc(100% - get-var(slider-offset-2));
             transition-property: left, right;
             will-change: left, right;
+
+            @include utils.rtl {
+              left: calc(100% - get-var(slider-offset-2));
+              right: get-var(slider-offset-1);
+            }
           }
         }
       }
@@ -1750,39 +1795,51 @@ $variables: (
 
       @if not $disable-horizontal-slider {
         &--h {
+          transform: translateX(-50%);
+          transition-property: left;
+
           @include utils.rtl {
             transform: translateX(50%);
             transition-property: right;
           }
-
-          transform: translateX(-50%);
-          transition-property: left;
         }
 
         &--h1 {
-          @include utils.auto-rtl(left, get-var(slider-offset-1));
+          @include use-var(left, slider-offset-1);
+
+          @include utils.rtl {
+            @include use-var(right, slider-offset-1);
+
+            left: auto;
+          }
         }
 
         @if not $disable-range-slider {
           &--h2 {
-            @include utils.auto-rtl(left, get-var(slider-offset-2));
+            @include use-var(left, slider-offset-2);
+
+            @include utils.rtl {
+              @include use-var(right, slider-offset-2);
+
+              left: auto;
+            }
           }
         }
 
         &--disabled-h {
+          transform: translateX(-50%) scale($slider-thumb-disabled-scale);
+
           @include utils.rtl {
             transform: translateX(50%) scale($slider-thumb-disabled-scale);
           }
-
-          transform: translateX(-50%) scale($slider-thumb-disabled-scale);
         }
 
         &--mask-h {
+          transform: translateX(-50%) scale($slider-thumb-mask-scale);
+
           @include utils.rtl {
             transform: translateX(50%) scale($slider-thumb-mask-scale);
           }
-
-          transform: translateX(-50%) scale($slider-thumb-mask-scale);
         }
       }
 
@@ -1844,10 +1901,6 @@ $variables: (
 
         @if not $disable-horizontal-slider {
           &--h {
-            @include utils.rtl {
-              @include set-var(slider-tooltip-translate, 50%);
-            }
-
             top: $slider-tooltip-offset;
             transform: translateX(get-var(slider-tooltip-translate))
               scale(get-var(slider-tooltip-scale));
@@ -1859,6 +1912,10 @@ $variables: (
               top: 100%;
               transform: translateX(get-var(slider-tooltip-translate));
             }
+
+            @include utils.rtl {
+              @include set-var(slider-tooltip-translate, 50%);
+            }
           }
 
           &--h-off {
@@ -1921,18 +1978,25 @@ $variables: (
 
         @if not $disable-horizontal-slider {
           &--h {
-            @include utils.auto-rtl(left, get-var(slider-mark-offset));
+            @include use-var(left, slider-mark-offset);
 
             height: $slider-mark-height;
             top: 50%;
             transform: translateY(-50%);
             width: $slider-mark-width;
+
+            @include utils.rtl {
+              @include use-var(right, slider-mark-offset);
+
+              left: auto;
+            }
           }
         }
 
         @if not $disable-vertical-slider {
           &--v {
-            bottom: get-var(slider-mark-offset);
+            @include use-var(bottom, slider-mark-offset);
+
             height: $slider-mark-width;
             transform: translateY(50%);
             width: $slider-mark-height;
@@ -1947,25 +2011,30 @@ $variables: (
 
         @if not $disable-horizontal-slider {
           &--h {
+            @include use-var(left, slider-mark-offset);
+
+            top: 100%;
+            transform: translateX(-50%);
+
             @include utils.rtl {
               @include use-var(right, slider-mark-offset);
 
               left: auto;
               transform: translateX(50%);
             }
-            @include use-var(left, slider-mark-offset);
-
-            top: 100%;
-            transform: translateX(-50%);
           }
         }
 
         @if not $disable-vertical-slider {
           &--v {
-            @include utils.auto-rtl(left, 100%);
-
+            left: 100%;
             top: get-var(slider-mark-offset);
             transform: translateY(-50%);
+
+            @include utils.rtl {
+              left: auto;
+              right: 100%;
+            }
           }
         }
       }
@@ -2120,10 +2189,6 @@ $variables: (
         @include label-styles(true);
       }
 
-      @if not $disable-file-input {
-        @include file-input-styles(true);
-      }
-
       @if not $disable-message {
         @include form-message-styles(true);
       }

package/dist/form/formMessageContainerStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @since 6.0.0
+ */
+export interface FormMessageContainerClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function formMessageContainer(options?: FormMessageContainerClassNameOptions): string;

package/dist/form/formMessageContainerStyles.js

@@ -0,0 +1,11 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-form-message-container");
+/**
+ * @since 6.0.0
+ */ export function formMessageContainer(options = {}) {
+    const { className } = options;
+    return cnb(styles(), className);
+}
+
+//# sourceMappingURL=formMessageContainerStyles.js.map

package/dist/form/formMessageContainerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/formMessageContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-form-message-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageContainerClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function formMessageContainer(\n  options: FormMessageContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","formMessageContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}

package/dist/form/inputToggleStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions\n  extends Omit<FormComponentStates, \"readOnly\"> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({\n      textColor: disabled ? \"text-disabled\" : error ? \"error\" : undefined,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","small","dense","normal","large","textColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAuCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,OAAOL,IACL,CAAC,IAAI,EAAEQ,KAAK,CAAC,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAE,OAAOL,SAAS;QAChBM,OAAON,SAAS;QAChBO,QAAQP,SAAS;QACjBQ,OAAOR,SAAS;QAChBI;IACF,IACAZ,SAAS;QACPiB,WAAWN,WAAW,kBAAkBF,QAAQ,UAAUS;IAC5D,IACAb;AAEJ"}
+{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions\n  extends Omit<FormComponentStates, \"readOnly\"> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({\n      textColor: disabled ? \"text-disabled\" : error ? \"error\" : undefined,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","small","dense","normal","large","textColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAuCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,OAAOL,IACL,CAAC,IAAI,EAAEQ,MAAM,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAE,OAAOL,SAAS;QAChBM,OAAON,SAAS;QAChBO,QAAQP,SAAS;QACjBQ,OAAOR,SAAS;QAChBI;IACF,IACAZ,SAAS;QACPiB,WAAWN,WAAW,kBAAkBF,QAAQ,UAAUS;IAC5D,IACAb;AAEJ"}

package/dist/form/optionStyles.d.ts

@@ -5,6 +5,7 @@ export interface OptionClassNameOptions {
     className?: string;
     icon: boolean;
     selected: boolean;
+    selectedClassName?: string;
 }
 /**
  * @since 6.0.0