@react-md/core 6.3.3 → 6.4.0

package/dist/form/_text-field.scss

@@ -90,7 +90,7 @@ $label-dense-height: 3.25rem !default;
 
 /// The `border-radius` for a `TextField`.
 /// @type Number
-$border-radius: border-radius.get-var(xs) !default;
+$border-radius: null !default;
 
 /// The `border-width` for a `TextField`.
 /// @type Number
@@ -110,6 +110,12 @@ $filled-padding: calc(spacing.get-var(sm) * 1.5) !default;
 /// @type Number
 $outlined-padding: spacing.get-var(md) !default;
 
+/// The border radius to apply to a `TextField` with the `theme="outline"`.
+///
+/// @since 6.4.0
+/// @type Number
+$outlined-border-radius: border-radius.get-var(xs) !default;
+
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="underline"`.
 ///
@@ -232,6 +238,11 @@ $filled-background-color: theme.get-default-color(
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
+///
+/// In 6.4.0, added the following variables: `base-height`, `label-height`,
+/// `dense-height`, `dense-label-height`, `border-radius`,
+/// `outlined-border-radius`
+///
 /// @type List
 $variables: (
   addon-top,
@@ -239,14 +250,20 @@ $variables: (
   addon-margin-top,
   addon-left-offset,
   height,
+  base-height,
+  label-height,
+  dense-height,
+  dense-label-height,
   padding-left,
   padding-right,
   padding-top,
   border-color,
+  border-radius,
   hover-border-color,
   filled-color,
   filled-padding,
   outlined-padding,
+  outlined-border-radius,
   underlined-padding
 );
 
@@ -303,19 +320,36 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
+    @if $border-radius {
+      @include set-var(border-radius, $border-radius);
+    }
+
     @if not base.$form-disable-filled-theme and $filled-padding {
       @include set-var(filled-padding, $filled-padding);
     }
 
     @if not base.$form-disable-outlined-theme and $outlined-padding {
       @include set-var(outlined-padding, $outlined-padding);
+      @include set-var(outlined-border-radius, $outlined-border-radius);
     }
 
     @if not base.$form-disable-underlined-theme and $underlined-padding {
       @include set-var(underlined-padding, $underlined-padding);
     }
 
-    @include set-var(height, $height);
+    @include set-var(base-height, $height);
+    @if not label.$disable-floating {
+      @include set-var(label-height, $label-height);
+    }
+    @if not $disable-container-dense {
+      @include set-var(dense-height, $dense-height);
+
+      @if not label.$disable-floating {
+        @include set-var(dense-label-height, $label-dense-height);
+      }
+    }
+    @include set-var(height, get-var(base-height));
+
     @include set-var(padding-left, 0px);
     @include set-var(padding-right, 0px);
     @include set-var(padding-top, 0px);
@@ -346,7 +380,8 @@ $variables: (
       @if not label.$disable-floating {
         @include label.set-var(floating-x, get-var(padding-left));
       }
-      @include use-var(height, height);
+      @include use-var(height, height, get-var(base-height));
+      @include use-var(border-radius);
 
       align-items: center;
       display: flex;
@@ -406,6 +441,7 @@ $variables: (
           @if not $disable-addon {
             @include set-var(addon-left-offset, get-var(outlined-padding));
           }
+          @include set-var(border-radius, get-var(outlined-border-radius));
 
           @if not label.$disable-floating {
             @include label.set-var(
@@ -420,7 +456,6 @@ $variables: (
             );
           }
 
-          border-radius: $border-radius;
           border-style: solid;
           border-width: $border-width;
         }

package/dist/form/fieldsetStyles.d.ts

@@ -1,6 +1,10 @@
 /** @since 6.0.0 */
 export interface FieldsetClassNameOptions {
     className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    fullWidth?: boolean;
     /**
      * Set this to `true` to enable the default browser styles for a fieldset.
      *
@@ -9,9 +13,10 @@ export interface FieldsetClassNameOptions {
      */
     browserStyles?: boolean;
     /**
+     * @since 6.4.0
      * @defaultValue `false`
      */
-    fullWidth?: boolean;
+    floatingLegend?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/form/fieldsetStyles.js

@@ -4,10 +4,11 @@ const styles = bem("rmd-fieldset");
 /**
  * @since 6.0.0
  */ export function fieldset(options = {}) {
-    const { className, fullWidth, browserStyles = false } = options;
+    const { className, fullWidth, browserStyles = false, floatingLegend } = options;
     return cnb(styles({
         unstyled: !browserStyles,
-        "full-width": fullWidth
+        "full-width": fullWidth,
+        "floating-legend": floatingLegend
     }), className);
 }
 

package/dist/form/fieldsetStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/fieldsetStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @since 6.0.0 */\nexport interface FieldsetClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to enable the default browser styles for a fieldset.\n   *\n   * @since 6.0.0 This was renamed from `unstyled`.\n   * @defaultValue `false`\n   */\n  browserStyles?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function fieldset(options: FieldsetClassNameOptions = {}): string {\n  const { className, fullWidth, browserStyles = false } = options;\n\n  return cnb(\n    styles({ unstyled: !browserStyles, \"full-width\": fullWidth }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","fieldset","options","className","fullWidth","browserStyles","unstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,gBAAgB,KAAK,EAAE,GAAGH;IAExD,OAAOJ,IACLE,OAAO;QAAEM,UAAU,CAACD;QAAe,cAAcD;IAAU,IAC3DD;AAEJ"}
+{"version":3,"sources":["../../src/form/fieldsetStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @since 6.0.0 */\nexport interface FieldsetClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` to enable the default browser styles for a fieldset.\n   *\n   * @since 6.0.0 This was renamed from `unstyled`.\n   * @defaultValue `false`\n   */\n  browserStyles?: boolean;\n\n  /**\n   * @since 6.4.0\n   * @defaultValue `false`\n   */\n  floatingLegend?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function fieldset(options: FieldsetClassNameOptions = {}): string {\n  const {\n    className,\n    fullWidth,\n    browserStyles = false,\n    floatingLegend,\n  } = options;\n\n  return cnb(\n    styles({\n      unstyled: !browserStyles,\n      \"full-width\": fullWidth,\n      \"floating-legend\": floatingLegend,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","fieldset","options","className","fullWidth","browserStyles","floatingLegend","unstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,gBAAgB,KAAK,EACrBC,cAAc,EACf,GAAGJ;IAEJ,OAAOJ,IACLE,OAAO;QACLO,UAAU,CAACF;QACX,cAAcD;QACd,mBAAmBE;IACrB,IACAH;AAEJ"}

package/dist/form/inputToggleStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\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;AAEhC,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"}
+{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\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 extends Omit<\n  FormComponentStates,\n  \"readOnly\"\n> {\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;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAyCnB;;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/labelStyles.d.ts

@@ -2,4 +2,4 @@ import { type LabelClassNameOptions } from "./types.js";
 /**
  * @since 6.0.0
  */
-export declare function label(options: LabelClassNameOptions): string;
+export declare function label(options?: LabelClassNameOptions): string;

package/dist/form/labelStyles.js

@@ -4,7 +4,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-label");
 /**
  * @since 6.0.0
- */ export function label(options) {
+ */ export function label(options = {}) {
     const { className, gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active } = options;
     let textColor;
     if (disabled) {

package/dist/form/labelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/labelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\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    styles({\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"],"names":["cnb","cssUtils","bem","styles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAEnB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,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,OAAOjB,IACLG,OAAO;QACLI;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"}
+{"version":3,"sources":["../../src/form/labelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions = {}): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\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    styles({\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"],"names":["cnb","cssUtils","bem","styles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAEnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,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,OAAOjB,IACLG,OAAO;QACLI;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"}

package/dist/form/legendStyles.d.ts

@@ -0,0 +1,83 @@
+import { type FormTheme, type LabelClassNameOptions } from "./types.js";
+/**
+ * @since 6.4.0
+ */
+export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed">;
+/**
+ * @since 6.4.0
+ */
+export interface LegendClassNameOptions extends LegendLabelClassNameOptions {
+    className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    srOnly?: boolean;
+    /**
+     * Set this to `true` to make the `<legend>` have the styles of a floating label.
+     * This requires the parent `<fieldset>` to have the `floatingLegend` flag
+     * enabled.
+     *
+     * @defaultValue `false`
+     */
+    floating?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link FormTheme}
+     * @defaultValue `getFormConfig("theme")`
+     */
+    theme?: FormTheme;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.active}
+     * @defaultValue `false`
+     */
+    active?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.gap}
+     * @defaultValue `false`
+     */
+    gap?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.disabled}
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.dense}
+     * @defaultValue `false`
+     */
+    dense?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.error}
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.stacked}
+     * @defaultValue `false`
+     */
+    stacked?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.reversed}
+     * @defaultValue `false`
+     */
+    reversed?: boolean;
+}
+/**
+ * @since 6.4.0
+ */
+export declare function legend(options?: LegendClassNameOptions): string;

package/dist/form/legendStyles.js

@@ -0,0 +1,25 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+import { getFormConfig } from "./formConfig.js";
+import { label } from "./labelStyles.js";
+const styles = bem("rmd-legend");
+/**
+ * @since 6.4.0
+ */ export function legend(options = {}) {
+    const { className, srOnly, floating, theme = getFormConfig("theme"), ...labelOptions } = options;
+    return cnb(styles({
+        floating,
+        "floating-filled": floating && theme === "filled",
+        "floating-underline": floating && theme === "underline",
+        "floating-outline": floating && theme === "outline"
+    }), floating && label({
+        ...labelOptions,
+        floating: true,
+        floatingActive: true
+    }), cssUtils({
+        srOnly
+    }), className);
+}
+
+//# sourceMappingURL=legendStyles.js.map

package/dist/form/legendStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"dense\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}

package/dist/form/selectUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAajE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<\n  Value extends string | number = string,\n> extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAcjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}

package/dist/form/textFieldContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    rightAddon,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,qBAAqB,MAAM,EAC5B,GAAGZ;IACJ,MAAMa,YAAYX,UAAU;IAC5B,MAAMY,UAAUZ,UAAU;IAC1B,MAAMa,SAASb,UAAU;IACzB,MAAMc,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWR;IAEnC,IAAIY;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAId,OAAO;QAChBc,YAAY;IACd;IAEA,OAAOvB,IACLG,OAAO;QACLM;QACAG;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBZ,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASa;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWV;QAC5B,gBAAgBU,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACX;QAC1C,8BACEW,gBAAgB,CAACX,SAAS,CAACK,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBX;QACtC,oBAAoBW,gBAAgBV;QACpC,CAAC,CAAC,UAAU,EAAEM,oBAAoB,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAf,SAAS;QAAEsB;IAAU,IACrBjB;AAEJ"}
+{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions, FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    rightAddon,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,qBAAqB,MAAM,EAC5B,GAAGZ;IACJ,MAAMa,YAAYX,UAAU;IAC5B,MAAMY,UAAUZ,UAAU;IAC1B,MAAMa,SAASb,UAAU;IACzB,MAAMc,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWR;IAEnC,IAAIY;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAId,OAAO;QAChBc,YAAY;IACd;IAEA,OAAOvB,IACLG,OAAO;QACLM;QACAG;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBZ,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASa;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWV;QAC5B,gBAAgBU,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACX;QAC1C,8BACEW,gBAAgB,CAACX,SAAS,CAACK,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBX;QACtC,oBAAoBW,gBAAgBV;QACpC,CAAC,CAAC,UAAU,EAAEM,oBAAoB,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAf,SAAS;QAAEsB;IAAU,IACrBjB;AAEJ"}

package/dist/form/types.d.ts

@@ -14,15 +14,27 @@ declare module "react" {
         "--rmd-text-field-addon-spacing"?: string | number;
         "--rmd-text-field-addon-margin-top"?: string | number;
         "--rmd-text-field-addon-left-offset"?: string | number;
+        /** @since 6.4.0 */
+        "--rmd-text-field-base-height"?: string | number;
         "--rmd-text-field-height"?: string | number;
+        /** @since 6.4.0 */
+        "--rmd-text-field-dense-height"?: string | number;
+        /** @since 6.4.0 */
+        "--rmd-text-field-label-height"?: string | number;
+        /** @since 6.4.0 */
+        "--rmd-text-field-dense-label-height"?: string | number;
         "--rmd-text-field-padding-left"?: string | number;
         "--rmd-text-field-padding-right"?: string | number;
         "--rmd-text-field-padding-top"?: string | number;
         "--rmd-text-field-border-color"?: string;
+        /** @since 6.4.0 */
+        "--rmd-text-field-border-radius"?: string | number;
         "--rmd-text-field-hover-border-color"?: string;
         "--rmd-text-field-filled-color"?: string;
         "--rmd-text-field-filled-padding"?: string | number;
         "--rmd-text-field-outlined-padding"?: string | number;
+        /** @since 6.4.0 */
+        "--rmd-text-field-outlined-border-radius"?: string | number;
         "--rmd-text-field-underlined-padding"?: string | number;
     }
 }
@@ -79,18 +91,28 @@ export interface FormConfiguration extends Required<FormThemeOptions> {
     uncontrolledToggles: boolean;
 }
 /**
- * @since 6.0.0
+ * @since 6.4.0
  */
-export interface FormComponentStates {
-    /** @defaultValue `false` */
-    error?: boolean;
-    /** @defaultValue `false` */
-    active?: boolean;
+export interface InteractableFormComponentStates {
     /** @defaultValue `false` */
     disabled?: boolean;
     /** @defaultValue `false` */
     readOnly?: boolean;
 }
+/**
+ * @since 6.4.0
+ */
+export interface EditableFormComponentStates extends InteractableFormComponentStates {
+    /** @defaultValue `false` */
+    error?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export interface FormComponentStates extends EditableFormComponentStates {
+    /** @defaultValue `false` */
+    active?: boolean;
+}
 /**
  * @since 6.0.0
  * @see https://html.spec.whatwg.org/multipage/forms.html#autofill

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n\n    // NOTE: The label properties are in this file since all label types are\n    // in this file. If they are able to be moved to labelStyles or Label and\n    // the compiled `.d.ts` includes the types from those files, this can be\n    // moved.\n    \"--rmd-label-floating-x\"?: string | number;\n    \"--rmd-label-floating-y\"?: string | number;\n    \"--rmd-label-floating-active-x\"?: string | number;\n    \"--rmd-label-floating-active-y\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n\n    // NOTE: The text field properties are in this file since there are no\n    // typedefs included from `TextFieldContainer` or\n    // `textFieldContainerStyles`.\n    \"--rmd-text-field-addon-top\"?: string | number;\n    \"--rmd-text-field-addon-spacing\"?: string | number;\n    \"--rmd-text-field-addon-margin-top\"?: string | number;\n    \"--rmd-text-field-addon-left-offset\"?: string | number;\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-text-field-filled-padding\"?: string | number;\n    \"--rmd-text-field-outlined-padding\"?: string | number;\n    \"--rmd-text-field-underlined-padding\"?: string | number;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteAttributeValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Optional props to provide to inline counter.\n   *\n   * @since 6.3.0\n   */\n  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional props to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   *\n   * @since 6.3.0\n   */\n  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAmkBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n\n    // NOTE: The label properties are in this file since all label types are\n    // in this file. If they are able to be moved to labelStyles or Label and\n    // the compiled `.d.ts` includes the types from those files, this can be\n    // moved.\n    \"--rmd-label-floating-x\"?: string | number;\n    \"--rmd-label-floating-y\"?: string | number;\n    \"--rmd-label-floating-active-x\"?: string | number;\n    \"--rmd-label-floating-active-y\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n\n    // NOTE: The text field properties are in this file since there are no\n    // typedefs included from `TextFieldContainer` or\n    // `textFieldContainerStyles`.\n    \"--rmd-text-field-addon-top\"?: string | number;\n    \"--rmd-text-field-addon-spacing\"?: string | number;\n    \"--rmd-text-field-addon-margin-top\"?: string | number;\n    \"--rmd-text-field-addon-left-offset\"?: string | number;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-base-height\"?: string | number;\n    \"--rmd-text-field-height\"?: string | number;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-dense-height\"?: string | number;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-label-height\"?: string | number;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-dense-label-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-border-radius\"?: string | number;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-text-field-filled-padding\"?: string | number;\n    \"--rmd-text-field-outlined-padding\"?: string | number;\n    /** @since 6.4.0 */\n    \"--rmd-text-field-outlined-border-radius\"?: string | number;\n    \"--rmd-text-field-underlined-padding\"?: string | number;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface InteractableFormComponentStates {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport interface EditableFormComponentStates extends InteractableFormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormComponentStates extends EditableFormComponentStates {\n  /** @defaultValue `false` */\n  active?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteAttributeValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Optional props to provide to inline counter.\n   *\n   * @since 6.3.0\n   */\n  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional props to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   *\n   * @since 6.3.0\n   */\n  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps, FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>, LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions, FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions, FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAslBA,WAkDC"}

package/dist/form/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook and should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const;\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    checked: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n  getIndeterminateProps?: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\n/**\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const {\n    value: checkedValues,\n    setValue: setCheckedValues,\n    toggleValue,\n  } = useReadonlySet({\n    defaultValue: defaultCheckedValues,\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((checkedValues) => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, [setCheckedValues]),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          toggleValue(value);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useReadonlySet","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","value","checkedValues","setValue","setCheckedValues","toggleValue","defaultValue","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","Set","reset","current","getCheckboxProps","has"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAG5C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,aAAa,EAAE;AAuQrB;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,WAAW,EACZ,GAAGZ,eAAe;QACjBa,cAAcN;IAChB;IACA,MAAMO,UAAUf,OAAOU;IAEvB,IAAIM;IACJ,IAAIT,QAAQ;QACVS,wBAAwB;YACtB,MAAMC,UAAUP,cAAcQ,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWP,cAAcQ,IAAI,GAAGX,OAAOa,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1ChB;gBACAY;gBACAE;gBACA,CAACb,OAAO,oBAAoB,WAAW;oBACrCM,iBAAiB,CAACF;wBAChB,IAAIA,cAAcQ,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIG,IAAIf;wBACjB;wBAEA,OAAO,IAAIe;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLC,OAAOxB,YAAY;YACjBa,iBAAiBG,QAAQS,OAAO;QAClC,GAAG;YAACZ;SAAiB;QACrBF;QACAE;QACAI;QACAS,kBAAiBhB,KAAK;YACpB,OAAO;gBACLJ;gBACAI,OAAOH,OAAOe,YAAYZ;gBAC1BQ,SAASP,cAAcgB,GAAG,CAACjB;gBAC3B,CAACH,OAAO,oBAAoB,WAAW;oBACrCO,YAAYJ;gBACd;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook and should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const;\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<\n  V extends string,\n> extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    checked: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n  getIndeterminateProps?: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\n/**\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const {\n    value: checkedValues,\n    setValue: setCheckedValues,\n    toggleValue,\n  } = useReadonlySet({\n    defaultValue: defaultCheckedValues,\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((checkedValues) => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, [setCheckedValues]),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          toggleValue(value);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useReadonlySet","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","value","checkedValues","setValue","setCheckedValues","toggleValue","defaultValue","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","Set","reset","current","getCheckboxProps","has"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAG5C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,aAAa,EAAE;AAwQrB;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,WAAW,EACZ,GAAGZ,eAAe;QACjBa,cAAcN;IAChB;IACA,MAAMO,UAAUf,OAAOU;IAEvB,IAAIM;IACJ,IAAIT,QAAQ;QACVS,wBAAwB;YACtB,MAAMC,UAAUP,cAAcQ,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWP,cAAcQ,IAAI,GAAGX,OAAOa,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1ChB;gBACAY;gBACAE;gBACA,CAACb,OAAO,oBAAoB,WAAW;oBACrCM,iBAAiB,CAACF;wBAChB,IAAIA,cAAcQ,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIG,IAAIf;wBACjB;wBAEA,OAAO,IAAIe;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLC,OAAOxB,YAAY;YACjBa,iBAAiBG,QAAQS,OAAO;QAClC,GAAG;YAACZ;SAAiB;QACrBF;QACAE;QACAI;QACAS,kBAAiBhB,KAAK;YACpB,OAAO;gBACLJ;gBACAI,OAAOH,OAAOe,YAAYZ;gBAC1BQ,SAASP,cAAcgB,GAAG,CAACjB;gBAC3B,CAACH,OAAO,oBAAoB,WAAW;oBACrCO,YAAYJ;gBACd;YACF;QACF;IACF;AACF"}