@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/dist/form/FormMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * **Server Component**\n *\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACT,GAAGC,WACJ,GAAGjB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIK,UAAUJ;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BI,wBACE,KAACC;YACCjB,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;YACnBkB,OAAOZ;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACO;QACE,GAAGJ,SAAS;QACbf,IAAIA;QACJD,KAAKA;QACLqB,aAAWlB,SAAS,UAAU,WAAWmB;QACzCnB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDa;YACA,OAAOH,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;gBACnBkB,OAAOd;gBACPD,WAAWE;0BAEV,CAAC,EAAEQ,OAAO,GAAG,EAAEC,UAAU,CAAC;;;;AAKrC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n *\n * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACT,GAAGC,WACJ,GAAGjB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIK,UAAUJ;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BI,wBACE,KAACC;YACCjB,IAAI,GAAGA,GAAG,QAAQ,CAAC;YACnBkB,OAAOZ;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACO;QACE,GAAGJ,SAAS;QACbf,IAAIA;QACJD,KAAKA;QACLqB,aAAWlB,SAAS,UAAU,WAAWmB;QACzCnB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDa;YACA,OAAOH,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBACnBkB,OAAOd;gBACPD,WAAWE;0BAEV,GAAGQ,OAAO,GAAG,EAAEC,WAAW;;;;AAKrC,GAAG"}

package/dist/form/FormMessageContainer.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormMessageProps } from "./types.js";
 /**
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -13,10 +13,10 @@ export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement
     messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;
 }
 /**
- * **Server Component**
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
  * and renders the {@link FormMessage} component.
  *
- * @remarks \@since 2.5.0
+ * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}
+ * @since 2.5.0
  */
 export declare const FormMessageContainer: import("react").ForwardRefExoticComponent<FormMessageContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/FormMessageContainer.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { FormMessage } from "./FormMessage.js";
+import { formMessageContainer } from "./formMessageContainerStyles.js";
 /**
- * **Server Component**
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
  * and renders the {@link FormMessage} component.
  *
- * @remarks \@since 2.5.0
+ * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}
+ * @since 2.5.0
  */ export const FormMessageContainer = /*#__PURE__*/ forwardRef(function FormMessageContainer(props, ref) {
     const { className, children, messageProps, ...remaining } = props;
     if (!messageProps) {
@@ -18,7 +18,9 @@ import { FormMessage } from "./FormMessage.js";
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
-        className: cnb("rmd-form-message-container", className),
+        className: formMessageContainer({
+            className
+        }),
         children: [
             children,
             /*#__PURE__*/ _jsx(FormMessage, {

package/dist/form/FormMessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\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<FormMessageProps, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @remarks \\@since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\"rmd-form-message-container\", className)}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","FormMessage","FormMessageContainer","props","ref","className","children","messageProps","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,WAAW,QAAQ,mBAAmB;AAgB/C;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBF,WAGlC,SAASE,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGL;IAC5D,IAAI,CAACI,cAAc;QACjB,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,MAACG;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWN,IAAI,8BAA8BM;;YAE5CC;0BACD,KAACL;gBAAa,GAAGM,YAAY;;;;AAGnC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport { formMessageContainer } from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\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<FormMessageProps, HTMLDivElement>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,kCAAkC;AAgBvE;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGL;IAC5D,IAAI,CAACI,cAAc;QACjB,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,MAACG;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;QAAU;;YAE3CC;0BACD,KAACN;gBAAa,GAAGO,YAAY;;;;AAGnC,GAAG"}

package/dist/form/FormMessageCounter.d.ts

@@ -1,11 +1,10 @@
 import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * The children to display in the counter. This is normally a string like:
      *
-     * @example
-     * String Example
+     * @example String Example
      * ```ts
      * `${min} / ${max}`
      * ```
@@ -13,16 +12,13 @@ export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement>
     children: ReactNode;
 }
 /**
- * **Server Component**
- *
  * This component can be used to create a "counter" within the
  * {@link FormMessage} component.
  *
  * Note: This is really only useful when using the {@link FormMessage} component
  * without a {@link TextField}.
  *
- * @example
- * Example Usage
+ * @example Example Usage
  * ```ts
  * interface ExampleProps {
  *   min: number;
@@ -40,6 +36,8 @@ export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement>
  * }
  * ```
  *
- * @remarks \@since 2.9.0
+ * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @since 2.9.0
  */
 export declare function FormMessageCounter(props: FormMessageCounterProps): ReactElement;

package/dist/form/FormMessageCounter.js

@@ -1,16 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formMessageCounter } from "./formMessageStyles.js";
 /**
- * **Server Component**
- *
  * This component can be used to create a "counter" within the
  * {@link FormMessage} component.
  *
  * Note: This is really only useful when using the {@link FormMessage} component
  * without a {@link TextField}.
  *
- * @example
- * Example Usage
+ * @example Example Usage
  * ```ts
  * interface ExampleProps {
  *   min: number;
@@ -28,7 +25,9 @@ import { formMessageCounter } from "./formMessageStyles.js";
  * }
  * ```
  *
- * @remarks \@since 2.9.0
+ * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @since 2.9.0
  */ export function FormMessageCounter(props) {
     const { children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {

package/dist/form/FormMessageCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @remarks \\@since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example\n   * String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example\n * Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.9.0\n */\nexport function FormMessageCounter(\n  props: FormMessageCounterProps\n): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span {...remaining} className={formMessageCounter({ className })}>\n      {children}\n    </span>\n  );\n}\n"],"names":["formMessageCounter","FormMessageCounter","props","children","className","remaining","span"],"mappings":";AACA,SAASA,kBAAkB,QAAQ,yBAAyB;AAiB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAE9C,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAED,WAAWJ,mBAAmB;YAAEI;QAAU;kBAC5DD;;AAGP"}
+{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n */\nexport function FormMessageCounter(\n  props: FormMessageCounterProps\n): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span {...remaining} className={formMessageCounter({ className })}>\n      {children}\n    </span>\n  );\n}\n"],"names":["formMessageCounter","FormMessageCounter","props","children","className","remaining","span"],"mappings":";AAEA,SAASA,kBAAkB,QAAQ,yBAAyB;AAgB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAE9C,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAED,WAAWJ,mBAAmB;YAAEI;QAAU;kBAC5DD;;AAGP"}

package/dist/form/InputToggle.d.ts

@@ -1,11 +1,12 @@
 import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
 import { type FormComponentStates, type FormMessageContainerExtension } from "./types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface InputToggleIconProps {
+export interface ConfigurableInputToggleIconProps {
     /**
      * @see {@link InputToggleSize}
      * @defaultValue `"normal"`
@@ -42,7 +43,7 @@ export interface InputToggleIconProps {
     iconClassName?: string;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface InputToggleLabelProps {
     /**
@@ -112,9 +113,9 @@ export interface InputToggleLabelProps {
     stacked?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface BaseInputToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, FormMessageContainerExtension, FormComponentStates, InputToggleIconProps, InputToggleLabelProps {
+export interface BaseInputToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, FormMessageContainerExtension, FormComponentStates, ConfigurableInputToggleIconProps, InputToggleLabelProps, ComponentWithRippleProps {
     /**
      * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
      * @defaultValue `type === "checkbox" ? "off" : undefined`
@@ -122,9 +123,8 @@ export interface BaseInputToggleProps extends Omit<InputHTMLAttributes<HTMLInput
     autoComplete?: string;
 }
 /**
- * @remarks
- * \@since 2.8.5
- * \@since 6.0.0 Removed the `aria-controls` prop and added the
+ * @since 2.8.5
+ * @since 6.0.0 Removed the `aria-controls` prop and added the
  * `indeterminateIcon` prop.
  */
 export interface IndeterminateCheckboxProps {
@@ -147,13 +147,13 @@ export interface IndeterminateCheckboxProps {
      * {@link indeterminate} prop is `true`.
      *
      * @defaultValue `getIcon("checkboxIndeterminate")`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     indeterminateIcon?: ReactNode;
 }
 export interface CheckboxProps extends BaseInputToggleProps, IndeterminateCheckboxProps {
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CheckboxInputToggleProps extends CheckboxProps {
     type: "checkbox";
 }
@@ -161,24 +161,26 @@ export interface RadioProps extends BaseInputToggleProps {
     /**
      * The value for the radio button.
      *
-     * @remarks \@since 6.0.0 This is now optional and no longer supports
+     * @since 6.0.0 This is now optional and no longer supports
      * `string[]` since there isn't much of a use case for array values.
      */
     value?: string | number;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface RadioInputToggleProps extends RadioProps {
     type: "radio";
 }
 /**
- * @remarks \@since 6.0.0 Updated to be a union between
+ * @since 6.0.0 Updated to be a union between
  * `CheckboxInputToggleProps` and `RadioInputToggleProps`
  */
 export type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0 Now supports the `FormMessage` behavior and requires
+ * @see {@link https://next.react-md.dev/components/checkbox | Checkbox Demos}
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
+ * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
  */
 export declare const InputToggle: import("react").ForwardRefExoticComponent<InputToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/InputToggle.js

@@ -10,13 +10,16 @@ import { Label } from "./Label.js";
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0 Now supports the `FormMessage` behavior and requires
+ * @see {@link https://next.react-md.dev/components/checkbox | Checkbox Demos}
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
+ * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
  */ export const InputToggle = /*#__PURE__*/ forwardRef(function InputToggle(props, ref) {
-    const { id: propId, type, label, labelProps, style, className, autoComplete = type === "checkbox" ? "off" : undefined, disableLabelGap = false, stacked = false, iconAfter = false, size = "normal", error = false, active = false, indeterminate = false, messageProps, messageContainerProps, icon, checkedIcon, indeterminateIcon, iconProps, iconStyle, iconClassName, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onDragStart, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, ...remaining } = props;
+    const { id: propId, type, label, labelProps, style, className, autoComplete = type === "checkbox" ? "off" : undefined, disableLabelGap = false, stacked = false, iconAfter = false, size = "normal", error = false, active = false, indeterminate = false, messageProps, messageContainerProps, icon, checkedIcon, indeterminateIcon, iconProps, iconStyle, iconClassName, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onDragStart, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, disableRipple, ...remaining } = props;
     const { disabled = false, checked } = props;
     const id = useEnsuredId(propId, type);
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         disabled,
         onBlur,
         onClick,

package/dist/form/InputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { Label } from \"./Label.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface InputToggleIconProps {\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"normal\"`\n   */\n  size?: InputToggleSize;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(props.type)`\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(``${props.type}Checked``)`\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<span>` that surrounds the current\n   * icon element.\n   */\n  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * Optional style to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconStyle?: CSSProperties;\n\n  /**\n   * Optional className to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface InputToggleLabelProps {\n  /**\n   * An optional label to display with the checkbox. If this is omitted, it is\n   * recommended to provide an `aria-label` for accessibility.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<Label>` component.\n   *\n   * Note: If `style` or `className` are provided in this object, they will be\n   * ignored. Use the top-level `style` and `className` props instead.\n   *\n   * @example\n   * ```\n   *  // bad\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   *   style: { color: \"red\" },\n   *   className: \"custom\"\n   * }}\n   *\n   * // good\n   * style={{ color: \"red\" }}\n   * className=\"custom\"\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  disableLabelGap?: boolean;\n\n  /**\n   * Set this to `true` to swap the position of the {@link label} and the current\n   * icon. This prop can be used with the {@link stacked} prop to change the\n   * position if the icon and label:\n   *\n   * ____________________________________\n   * | stacked | iconAfter | position   |\n   * ____________________________________\n   * |         |           | icon label |\n   * ____________________________________\n   * |         | X         | label icon |\n   * ____________________________________\n   * | X       |           | icon       |\n   * |         |           | label      |\n   * ____________________________________\n   * | X       | X         | label      |\n   * |         |           | icon       |\n   * ____________________________________\n   *\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the label should be stacked instead of inline with\n   * the current icon.\n   *\n   * @see {@link iconAfter}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    InputToggleIconProps,\n    InputToggleLabelProps {\n  /**\n   * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing\n   * @defaultValue `type === \"checkbox\" ? \"off\" : undefined`\n   */\n  autoComplete?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.5\n * \\@since 6.0.0 Removed the `aria-controls` prop and added the\n * `indeterminateIcon` prop.\n */\nexport interface IndeterminateCheckboxProps {\n  /**\n   * Set this value to `true` if the checkbox is in an \"indeterminate\" state:\n   *\n   * - this checkbox controls the select all/select none behavior of other\n   *   checkboxes in a group\n   * - at least one of the checkboxes have been checked\n   *   - the `checked` prop for this Checkbox should also be `true`\n   *\n   * You should normally use the `useCheckboxGroup` hook to handle this\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  indeterminate?: boolean;\n\n  /**\n   * The icon to display when the checkbox is checked and the\n   * {@link indeterminate} prop is `true`.\n   *\n   * @defaultValue `getIcon(\"checkboxIndeterminate\")`\n   * @remarks \\@since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps,\n    IndeterminateCheckboxProps {}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CheckboxInputToggleProps extends CheckboxProps {\n  type: \"checkbox\";\n}\n\nexport interface RadioProps extends BaseInputToggleProps {\n  /**\n   * The value for the radio button.\n   *\n   * @remarks \\@since 6.0.0 This is now optional and no longer supports\n   * `string[]` since there isn't much of a use case for array values.\n   */\n  value?: string | number;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @remarks \\@since 6.0.0 Updated to be a union between\n * `CheckboxInputToggleProps` and `RadioInputToggleProps`\n */\nexport type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(\n  function InputToggle(props, ref) {\n    const {\n      id: propId,\n      type,\n      label,\n      labelProps,\n      style,\n      className,\n      autoComplete = type === \"checkbox\" ? \"off\" : undefined,\n      disableLabelGap = false,\n      stacked = false,\n      iconAfter = false,\n      size = \"normal\",\n      error = false,\n      active = false,\n      indeterminate = false,\n      messageProps,\n      messageContainerProps,\n      icon,\n      checkedIcon,\n      indeterminateIcon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n      ...remaining\n    } = props as CheckboxInputToggleProps;\n    const { disabled = false, checked } = props;\n\n    const id = useEnsuredId(propId, type);\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      disabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n    });\n\n    // set on the `remaining` object to bypass the eslint rule about\n    // aria-checked not being valid for textbox role\n    remaining[\"aria-checked\"] =\n      remaining[\"aria-checked\"] ?? indeterminate ? \"mixed\" : undefined;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          {...labelProps}\n          gap={!disableLabelGap}\n          style={style}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n          className={className}\n        >\n          {label}\n          <InputToggleIcon\n            style={iconStyle}\n            {...iconProps}\n            className={cnb(\n              pressedClassName,\n              iconClassName,\n              iconProps?.className\n            )}\n            error={error}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            type={type}\n            icon={icon}\n            checkedIcon={checkedIcon}\n            indeterminate={indeterminate}\n            indeterminateIcon={indeterminateIcon}\n          >\n            <input\n              {...remaining}\n              {...handlers}\n              autoComplete={autoComplete}\n              id={id}\n              ref={ref}\n              type={type}\n              className=\"rmd-hidden-input\"\n            />\n            {ripples}\n          </InputToggleIcon>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","ref","id","propId","type","label","labelProps","style","className","autoComplete","undefined","disableLabelGap","stacked","iconAfter","size","error","active","indeterminate","messageProps","messageContainerProps","icon","checkedIcon","indeterminateIcon","iconProps","iconStyle","iconClassName","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onDragStart","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","remaining","disabled","checked","pressedClassName","ripples","handlers","gap","reversed","input"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAML,QAAQ;AACf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AAgNnC;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcN,WACzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,eAAeL,SAAS,aAAa,QAAQM,SAAS,EACtDC,kBAAkB,KAAK,EACvBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,QAAQ,EACfC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,YAAY,EACZC,qBAAqB,EACrBC,IAAI,EACJC,WAAW,EACXC,iBAAiB,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZ,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGvC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEoC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGhD,sBAAsB;QACpE4C;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDC,SAAS,CAAC,eAAe,GACvBA,SAAS,CAAC,eAAe,IAAIpB,gBAAgB,UAAUP;IAEzD,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACdqC,KAAK,CAAChC;YACNJ,OAAOA;YACPK,SAASA;YACTgC,UAAU,CAAC/B;YACXG,QAAQA;YACRD,OAAOA;YACPuB,UAAUA;YACV9B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTgD,kBACAf,eACAF,WAAWf;oBAEbO,OAAOA;oBACPwB,SAASA;oBACTD,UAAUA;oBACVxB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACuB;4BACE,GAAGR,SAAS;4BACZ,GAAGK,QAAQ;4BACZjC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXiC;;;;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { Label } from \"./Label.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableInputToggleIconProps {\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"normal\"`\n   */\n  size?: InputToggleSize;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(props.type)`\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(``${props.type}Checked``)`\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<span>` that surrounds the current\n   * icon element.\n   */\n  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * Optional style to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconStyle?: CSSProperties;\n\n  /**\n   * Optional className to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface InputToggleLabelProps {\n  /**\n   * An optional label to display with the checkbox. If this is omitted, it is\n   * recommended to provide an `aria-label` for accessibility.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<Label>` component.\n   *\n   * Note: If `style` or `className` are provided in this object, they will be\n   * ignored. Use the top-level `style` and `className` props instead.\n   *\n   * @example\n   * ```\n   *  // bad\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   *   style: { color: \"red\" },\n   *   className: \"custom\"\n   * }}\n   *\n   * // good\n   * style={{ color: \"red\" }}\n   * className=\"custom\"\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  disableLabelGap?: boolean;\n\n  /**\n   * Set this to `true` to swap the position of the {@link label} and the current\n   * icon. This prop can be used with the {@link stacked} prop to change the\n   * position if the icon and label:\n   *\n   * ____________________________________\n   * | stacked | iconAfter | position   |\n   * ____________________________________\n   * |         |           | icon label |\n   * ____________________________________\n   * |         | X         | label icon |\n   * ____________________________________\n   * | X       |           | icon       |\n   * |         |           | label      |\n   * ____________________________________\n   * | X       | X         | label      |\n   * |         |           | icon       |\n   * ____________________________________\n   *\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the label should be stacked instead of inline with\n   * the current icon.\n   *\n   * @see {@link iconAfter}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    ConfigurableInputToggleIconProps,\n    InputToggleLabelProps,\n    ComponentWithRippleProps {\n  /**\n   * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing\n   * @defaultValue `type === \"checkbox\" ? \"off\" : undefined`\n   */\n  autoComplete?: string;\n}\n\n/**\n * @since 2.8.5\n * @since 6.0.0 Removed the `aria-controls` prop and added the\n * `indeterminateIcon` prop.\n */\nexport interface IndeterminateCheckboxProps {\n  /**\n   * Set this value to `true` if the checkbox is in an \"indeterminate\" state:\n   *\n   * - this checkbox controls the select all/select none behavior of other\n   *   checkboxes in a group\n   * - at least one of the checkboxes have been checked\n   *   - the `checked` prop for this Checkbox should also be `true`\n   *\n   * You should normally use the `useCheckboxGroup` hook to handle this\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  indeterminate?: boolean;\n\n  /**\n   * The icon to display when the checkbox is checked and the\n   * {@link indeterminate} prop is `true`.\n   *\n   * @defaultValue `getIcon(\"checkboxIndeterminate\")`\n   * @since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps,\n    IndeterminateCheckboxProps {}\n\n/** @since 6.0.0 */\nexport interface CheckboxInputToggleProps extends CheckboxProps {\n  type: \"checkbox\";\n}\n\nexport interface RadioProps extends BaseInputToggleProps {\n  /**\n   * The value for the radio button.\n   *\n   * @since 6.0.0 This is now optional and no longer supports\n   * `string[]` since there isn't much of a use case for array values.\n   */\n  value?: string | number;\n}\n\n/** @since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @since 6.0.0 Updated to be a union between\n * `CheckboxInputToggleProps` and `RadioInputToggleProps`\n */\nexport type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;\n\n/**\n * **Client Component**\n *\n * @see {@link https://next.react-md.dev/components/checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/components/radio | Radio Demos}\n * @since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(\n  function InputToggle(props, ref) {\n    const {\n      id: propId,\n      type,\n      label,\n      labelProps,\n      style,\n      className,\n      autoComplete = type === \"checkbox\" ? \"off\" : undefined,\n      disableLabelGap = false,\n      stacked = false,\n      iconAfter = false,\n      size = \"normal\",\n      error = false,\n      active = false,\n      indeterminate = false,\n      messageProps,\n      messageContainerProps,\n      icon,\n      checkedIcon,\n      indeterminateIcon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n      disableRipple,\n      ...remaining\n    } = props as CheckboxInputToggleProps;\n    const { disabled = false, checked } = props;\n\n    const id = useEnsuredId(propId, type);\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n    });\n\n    // set on the `remaining` object to bypass the eslint rule about\n    // aria-checked not being valid for textbox role\n    remaining[\"aria-checked\"] =\n      (remaining[\"aria-checked\"] ?? indeterminate) ? \"mixed\" : undefined;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          {...labelProps}\n          gap={!disableLabelGap}\n          style={style}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n          className={className}\n        >\n          {label}\n          <InputToggleIcon\n            style={iconStyle}\n            {...iconProps}\n            className={cnb(\n              pressedClassName,\n              iconClassName,\n              iconProps?.className\n            )}\n            error={error}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            type={type}\n            icon={icon}\n            checkedIcon={checkedIcon}\n            indeterminate={indeterminate}\n            indeterminateIcon={indeterminateIcon}\n          >\n            <input\n              {...remaining}\n              {...handlers}\n              autoComplete={autoComplete}\n              id={id}\n              ref={ref}\n              type={type}\n              className=\"rmd-hidden-input\"\n            />\n            {ripples}\n          </InputToggleIcon>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","ref","id","propId","type","label","labelProps","style","className","autoComplete","undefined","disableLabelGap","stacked","iconAfter","size","error","active","indeterminate","messageProps","messageContainerProps","icon","checkedIcon","indeterminateIcon","iconProps","iconStyle","iconClassName","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onDragStart","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","disableRipple","remaining","disabled","checked","pressedClassName","ripples","handlers","mode","gap","reversed","input"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAMEC,UAAU,QACL,QAAQ;AAGf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AAgNnC;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAAcN,WACzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,eAAeL,SAAS,aAAa,QAAQM,SAAS,EACtDC,kBAAkB,KAAK,EACvBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,QAAQ,EACfC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,YAAY,EACZC,qBAAqB,EACrBC,IAAI,EACJC,WAAW,EACXC,iBAAiB,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGtC;IACJ,MAAM,EAAEuC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGxC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEqC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGjD,sBAAsB;QACpEkD,MAAMP,gBAAgB,SAAS3B;QAC/B6B;QACAb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDE,SAAS,CAAC,eAAe,GACvB,AAACA,SAAS,CAAC,eAAe,IAAIrB,gBAAiB,UAAUP;IAE3D,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACduC,KAAK,CAAClC;YACNJ,OAAOA;YACPK,SAASA;YACTkC,UAAU,CAACjC;YACXG,QAAQA;YACRD,OAAOA;YACPwB,UAAUA;YACV/B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTiD,kBACAhB,eACAF,WAAWf;oBAEbO,OAAOA;oBACPyB,SAASA;oBACTD,UAAUA;oBACVzB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACyB;4BACE,GAAGT,SAAS;4BACZ,GAAGK,QAAQ;4BACZlC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXkC;;;;;;AAKX,GACA"}

package/dist/form/InputToggleIcon.d.ts

@@ -1,9 +1,8 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { type InputToggleSize } from "./inputToggleStyles.js";
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Removed the `circle` and `overlay` props since they are no
+ * @since 2.8.0
+ * @since 6.0.0 Removed the `circle` and `overlay` props since they are no
  * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and
  * `indeterminateIcon` props.
  * @internal
@@ -41,11 +40,8 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
     indeterminate?: boolean;
 }
 /**
- * **Server Component**
- *
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Updated to use different icons for each checked state instead
+ * @since 2.8.0
+ * @since 6.0.0 Updated to use different icons for each checked state instead
  * of a css overlay hack.
  * @internal
  */

package/dist/form/InputToggleIcon.js

@@ -1,15 +1,12 @@
 import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { FORM_CONFIG } from "./formConfig.js";
 import { inputToggle } from "./inputToggleStyles.js";
 /**
- * **Server Component**
- *
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Updated to use different icons for each checked state instead
+ * @since 2.8.0
+ * @since 6.0.0 Updated to use different icons for each checked state instead
  * of a css overlay hack.
  * @internal
  */ export const InputToggleIcon = /*#__PURE__*/ forwardRef(function InputToggleIcon(props, ref) {

package/dist/form/InputToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { inputToggle, type InputToggleSize } from \"./inputToggleStyles.js\";\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,WAAW,QAA8B,yBAAyB;AAmD3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,CAAC,EAAEM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { type InputToggleSize, inputToggle } from \"./inputToggleStyles.js\";\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAA+BC,WAAW,QAAQ,yBAAyB;AAkD3E;;;;;CAKC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,GAAGM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}

package/dist/form/Label.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type LabelClassNameOptions, type LabelProps } from "./types.js";
+import { type LabelProps } from "./types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-label-floating-top"?: string | number;
@@ -10,18 +9,15 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
- */
-export declare function label(options: LabelClassNameOptions): string;
-/**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to
  * create a custom implementation of a form component.
  *
- * @remarks \@since 6.0.0 Updated to be usable externally and combines the
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/components/text-field#simple-textarea | TextArea Demos}
+ * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */
 export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/form/Label.js

@@ -1,49 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { cssUtils } from "../cssUtils.js";
-import { bem } from "../utils/bem.js";
-const labelStyles = bem("rmd-label");
+import { label } from "./labelStyles.js";
 /**
- * @remarks \@since 6.0.0
- */ export function label(options) {
-    const { className, gap = false, error = false, dense = false, active = false, stacked = false, reversed = false, disabled = false, floating = false, inactive = false, floatingActive = active } = options;
-    let textColor;
-    if (disabled) {
-        textColor = "text-disabled";
-    } else if (error) {
-        textColor = "error";
-    } else if (floating && inactive) {
-        textColor = "text-secondary";
-    }
-    return cnb(labelStyles({
-        gap,
-        error,
-        dense,
-        active,
-        disabled,
-        floating,
-        stacked: stacked && !reversed,
-        reversed: !stacked && reversed,
-        "stacked-reversed": stacked && reversed,
-        "floating-dense": floating && dense,
-        "floating-active": floating && floatingActive
-    }), cssUtils({
-        textColor
-    }), className);
-}
-/**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to
  * create a custom implementation of a form component.
  *
- * @remarks \@since 6.0.0 Updated to be usable externally and combines the
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/components/text-field#simple-textarea | TextArea Demos}
+ * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */ export const Label = /*#__PURE__*/ forwardRef(function Label(props, ref) {
-    const { gap = false, error = false, dense = false, active = false, stacked = false, reversed = false, disabled = false, floating = false, inactive = false, floatingActive = active, className, children, ...remaining } = props;
+    const { gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("label", {
         ref: ref,
         ...remaining,

package/dist/form/Label.js.map

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

package/dist/form/Legend.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { type TypographyProps } from "../typography/Typography.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LegendProps extends TypographyProps {
     /**
@@ -10,10 +9,9 @@ export interface LegendProps extends TypographyProps {
     srOnly?: boolean;
 }
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/fieldset | Fieldset Demos}
+ * @since 6.0.0
  */
 export declare const Legend: import("react").ForwardRefExoticComponent<LegendProps & import("react").RefAttributes<HTMLLegendElement>>;

package/dist/form/Legend.js

@@ -4,11 +4,10 @@ import { forwardRef } from "react";
 import { cssUtils } from "../cssUtils.js";
 import { Typography } from "../typography/Typography.js";
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/fieldset | Fieldset Demos}
+ * @since 6.0.0
  */ export const Legend = /*#__PURE__*/ forwardRef(function Legend(props, ref) {
     const { srOnly = false, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {

package/dist/form/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This should be used within a `Fieldset` to apply a label.\n *\n * @remarks \\@since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;;;CAMC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * This should be used within a `Fieldset` to apply a label.\n *\n * @see {@link https://next.react-md.dev/components/fieldset | Fieldset Demos}\n * @since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;;CAKC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}

package/dist/form/Listbox.d.ts

@@ -0,0 +1,24 @@
+import { type Dispatch, type ReactElement, type ReactNode, type Ref } from "react";
+import { type MenuProps } from "../menu/Menu.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type OptionSelectedIconProps } from "./Option.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | object;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface ListboxProps<Value extends ListboxValue> extends MenuProps, OptionSelectedIconProps {
+    nodeRef?: Ref<HTMLDivElement>;
+    value: Value | readonly NonNullable<ListboxValue>[];
+    setValue: Dispatch<NonNullable<Value>>;
+    children: ReactNode;
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function Listbox<T extends ListboxValue>(props: LabelRequiredForA11y<ListboxProps<T>>): ReactElement;