@react-md/core 1.0.0-next.0

package/dist/form/FormMessageCounter.js

@@ -0,0 +1,43 @@
+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
+ * ```ts
+ * interface ExampleProps {
+ *   min: number;
+ *   max: number;
+ * }
+ *
+ * function Example({ min, max }: ExampleProps) {
+ *   return (
+ *     <FormMessage disableWrap>
+ *       <FormMessageCounter>
+ *         {`${min} / ${max}`}
+ *       </FormMessageCounter>
+ *     </FormMessage>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.9.0
+ */ export function FormMessageCounter(props) {
+    const { children, className, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("span", {
+        ...remaining,
+        className: formMessageCounter({
+            className
+        }),
+        children: children
+    });
+}
+
+//# sourceMappingURL=FormMessageCounter.js.map

package/dist/form/FormMessageCounter.js.map

@@ -0,0 +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"}

package/dist/form/InputToggle.d.ts

@@ -0,0 +1,184 @@
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+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
+ */
+export interface InputToggleIconProps {
+    /**
+     * @see {@link InputToggleSize}
+     * @defaultValue `"normal"`
+     */
+    size?: InputToggleSize;
+    /**
+     * The icon to use while unchecked. This defaults to the unchecked
+     * checkbox/radio icon from the `ICON_CONFIG`.
+     *
+     * @defaultValue `getIcon(props.type)`
+     */
+    icon?: ReactNode;
+    /**
+     * The icon to use while unchecked. This defaults to the unchecked
+     * checkbox/radio icon from the `ICON_CONFIG`.
+     *
+     * @defaultValue `getIcon(``${props.type}Checked``)`
+     */
+    checkedIcon?: ReactNode;
+    /**
+     * Any props that should be passed to the `<span>` that surrounds the current
+     * icon element.
+     */
+    iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    /**
+     * Optional style to set on the `<span>` that surrounds the current icon
+     * element.
+     */
+    iconStyle?: CSSProperties;
+    /**
+     * Optional className to set on the `<span>` that surrounds the current icon
+     * element.
+     */
+    iconClassName?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface InputToggleLabelProps {
+    /**
+     * An optional label to display with the checkbox. If this is omitted, it is
+     * recommended to provide an `aria-label` for accessibility.
+     */
+    label?: ReactNode;
+    /**
+     * Any props that should be passed to the `<Label>` component.
+     *
+     * Note: If `style` or `className` are provided in this object, they will be
+     * ignored. Use the top-level `style` and `className` props instead.
+     *
+     * @example
+     * ```
+     *  // bad
+     * labelProps={{
+     *   "aria-label": "checkbox",
+     *   style: { color: "red" },
+     *   className: "custom"
+     * }}
+     *
+     * // good
+     * style={{ color: "red" }}
+     * className="custom"
+     * labelProps={{
+     *   "aria-label": "checkbox",
+     * }}
+     * ```
+     */
+    labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /**
+     * @see {@link LabelClassNameOptions.gap}
+     * @defaultValue `false`
+     */
+    disableLabelGap?: boolean;
+    /**
+     * Set this to `true` to swap the position of the {@link label} and the current
+     * icon. This prop can be used with the {@link stacked} prop to change the
+     * position if the icon and label:
+     *
+     * ____________________________________
+     * | stacked | iconAfter | position   |
+     * ____________________________________
+     * |         |           | icon label |
+     * ____________________________________
+     * |         | X         | label icon |
+     * ____________________________________
+     * | X       |           | icon       |
+     * |         |           | label      |
+     * ____________________________________
+     * | X       | X         | label      |
+     * |         |           | icon       |
+     * ____________________________________
+     *
+     *
+     * @defaultValue `false`
+     */
+    iconAfter?: boolean;
+    /**
+     * Set this to `true` if the label should be stacked instead of inline with
+     * the current icon.
+     *
+     * @see {@link iconAfter}
+     * @defaultValue `false`
+     */
+    stacked?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface BaseInputToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, FormMessageContainerExtension, FormComponentStates, InputToggleIconProps, InputToggleLabelProps {
+    /**
+     * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
+     * @defaultValue `type === "checkbox" ? "off" : undefined`
+     */
+    autoComplete?: string;
+}
+/**
+ * @remarks
+ * \@since 2.8.5
+ * \@since 6.0.0 Removed the `aria-controls` prop and added the
+ * `indeterminateIcon` prop.
+ */
+export interface IndeterminateCheckboxProps {
+    /**
+     * Set this value to `true` if the checkbox is in an "indeterminate" state:
+     *
+     * - this checkbox controls the select all/select none behavior of other
+     *   checkboxes in a group
+     * - at least one of the checkboxes have been checked
+     *   - the `checked` prop for this Checkbox should also be `true`
+     *
+     * You should normally use the `useCheckboxGroup` hook to handle this
+     * behavior.
+     *
+     * @defaultValue `false`
+     */
+    indeterminate?: boolean;
+    /**
+     * The icon to display when the checkbox is checked and the
+     * {@link indeterminate} prop is `true`.
+     *
+     * @defaultValue `getIcon("checkboxIndeterminate")`
+     * @remarks \@since 6.0.0
+     */
+    indeterminateIcon?: ReactNode;
+}
+export interface CheckboxProps extends BaseInputToggleProps, IndeterminateCheckboxProps {
+}
+/** @remarks \@since 6.0.0 */
+export interface CheckboxInputToggleProps extends CheckboxProps {
+    type: "checkbox";
+}
+export interface RadioProps extends BaseInputToggleProps {
+    /**
+     * The value for the radio button.
+     *
+     * @remarks \@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 */
+export interface RadioInputToggleProps extends RadioProps {
+    type: "radio";
+}
+/**
+ * @remarks \@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
+ * different icons for each checked state.
+ */
+export declare const InputToggle: import("react").ForwardRefExoticComponent<InputToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/InputToggle.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { FormMessageContainer } from "./FormMessageContainer.js";
+import { InputToggleIcon } from "./InputToggleIcon.js";
+import { Label } from "./Label.js";
+/**
+ * **Client Component**
+ *
+ * @remarks \@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 { disabled = false, checked } = props;
+    const id = useEnsuredId(propId, type);
+    const { pressedClassName, ripples, handlers } = useElementInteraction({
+        disabled,
+        onBlur,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        onMouseDown,
+        onMouseLeave,
+        onDragStart,
+        onMouseUp,
+        onTouchEnd,
+        onTouchMove,
+        onTouchStart
+    });
+    // set on the `remaining` object to bypass the eslint rule about
+    // aria-checked not being valid for textbox role
+    remaining["aria-checked"] = remaining["aria-checked"] ?? indeterminate ? "mixed" : undefined;
+    return /*#__PURE__*/ _jsx(FormMessageContainer, {
+        ...messageContainerProps,
+        messageProps: messageProps,
+        children: /*#__PURE__*/ _jsxs(Label, {
+            ...labelProps,
+            gap: !disableLabelGap,
+            style: style,
+            stacked: stacked,
+            reversed: !iconAfter,
+            active: active,
+            error: error,
+            disabled: disabled,
+            className: className,
+            children: [
+                label,
+                /*#__PURE__*/ _jsxs(InputToggleIcon, {
+                    style: iconStyle,
+                    ...iconProps,
+                    className: cnb(pressedClassName, iconClassName, iconProps?.className),
+                    error: error,
+                    checked: checked,
+                    disabled: disabled,
+                    size: size,
+                    type: type,
+                    icon: icon,
+                    checkedIcon: checkedIcon,
+                    indeterminate: indeterminate,
+                    indeterminateIcon: indeterminateIcon,
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            ...remaining,
+                            ...handlers,
+                            autoComplete: autoComplete,
+                            id: id,
+                            ref: ref,
+                            type: type,
+                            className: "rmd-hidden-input"
+                        }),
+                        ripples
+                    ]
+                })
+            ]
+        })
+    });
+});
+
+//# sourceMappingURL=InputToggle.js.map

package/dist/form/InputToggle.js.map

@@ -0,0 +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"}

package/dist/form/InputToggleIcon.d.ts

@@ -0,0 +1,52 @@
+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
+ * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and
+ * `indeterminateIcon` props.
+ * @internal
+ */
+export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
+    type: "checkbox" | "radio";
+    /**
+     * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,
+     * the icon state won't work.
+     */
+    checked?: boolean;
+    /**
+     * The icon to display while {@link checked} is `false`.
+     */
+    icon?: ReactNode;
+    /**
+     * The icon to display while {@link checked} is `true` and
+     * {@link indeterminate} is `false`.
+     */
+    checkedIcon?: ReactNode;
+    /**
+     * The icon to display while both {@link checked} and {@link indeterminate}
+     * are `true`.
+     */
+    indeterminateIcon?: ReactNode;
+    /** @defaultValue `"normal"` */
+    size?: InputToggleSize;
+    /** @defaultValue `false` */
+    error?: boolean;
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /** @defaultValue `false` */
+    disableEm?: boolean;
+    /** @defaultValue `false` */
+    indeterminate?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * @remarks
+ * \@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 declare const InputToggleIcon: import("react").ForwardRefExoticComponent<InputToggleIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/form/InputToggleIcon.js

@@ -0,0 +1,54 @@
+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 { 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
+ * of a css overlay hack.
+ * @internal
+ */ export const InputToggleIcon = /*#__PURE__*/ forwardRef(function InputToggleIcon(props, ref) {
+    const { type, size = "normal", icon: propIcon, error, checked, children, disabled, indeterminate, className, disableEm = false, checkedIcon: propCheckedIcon, indeterminateIcon: propIndeterminateIcon, ...remaining } = props;
+    const uncheckedIcon = getIcon(type, propIcon);
+    const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);
+    const indeterminateIcon = getIcon("checkboxIndeterminate", propIndeterminateIcon);
+    let icon;
+    let active = false;
+    const uncontrolled = typeof checked !== "boolean";
+    if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {
+        active = !!checked && !error;
+        icon = checked ? indeterminate ? indeterminateIcon : checkedIcon : uncheckedIcon;
+    } else {
+        icon = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                uncheckedIcon,
+                indeterminate ? indeterminateIcon : checkedIcon
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("span", {
+        ...remaining,
+        ref: ref,
+        className: cnb(inputToggle({
+            em: !disableEm,
+            size,
+            type,
+            error,
+            active,
+            disabled,
+            uncontrolled,
+            className
+        })),
+        children: [
+            children,
+            icon
+        ]
+    });
+});
+
+//# sourceMappingURL=InputToggleIcon.js.map

package/dist/form/InputToggleIcon.js.map

@@ -0,0 +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"}

package/dist/form/Label.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { type LabelClassNameOptions, type LabelProps } from "./types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-form-label-floating-top"?: string | number;
+        "--rmd-form-label-left-offset"?: string | number;
+        "--rmd-form-label-top-offset"?: string | number;
+        "--rmd-form-label-active-padding"?: string | number;
+        "--rmd-form-label-active-background-color"?: string;
+    }
+}
+/**
+ * @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
+ * 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

@@ -0,0 +1,67 @@
+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");
+/**
+ * @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
+ * 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;
+    return /*#__PURE__*/ _jsx("label", {
+        ref: ref,
+        ...remaining,
+        className: label({
+            gap,
+            error,
+            dense,
+            active,
+            stacked,
+            reversed,
+            disabled,
+            floating,
+            floatingActive,
+            inactive,
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=Label.js.map

package/dist/form/Label.js.map

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

package/dist/form/Legend.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type TypographyProps } from "../typography/Typography.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface LegendProps extends TypographyProps {
+    /**
+     * @defaultValue `false`
+     */
+    srOnly?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * This should be used within a `Fieldset` to apply a label.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const Legend: import("react").ForwardRefExoticComponent<LegendProps & import("react").RefAttributes<HTMLLegendElement>>;

package/dist/form/Legend.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+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
+ */ export const Legend = /*#__PURE__*/ forwardRef(function Legend(props, ref) {
+    const { srOnly = false, className, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Typography, {
+        ...remaining,
+        as: "legend",
+        ref: ref,
+        className: cnb("rmd-legend", cssUtils({
+            srOnly
+        }), className),
+        children: children
+    });
+});
+
+//# sourceMappingURL=Legend.js.map

package/dist/form/Legend.js.map

@@ -0,0 +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"}

package/dist/form/MenuItemCheckbox.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { type MenuItemCheckboxProps } from "./MenuItemInputToggle.js";
+/**
+ * **Client Component**
+ *
+ * This is a simple wrapper for the {@link MenuItemInputToggle} component to
+ * render it as a checkbox and pulling the checkbox icon from the
+ * {@link ICON_CONFIG}.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { DropdownMenu, MenuItemCheckbox } from "@react-md/core";
+ * import { ReactElement, useState } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [checked, setChecked] = useState(false);
+ *
+ *   return (
+ *     <DropdownMenu buttonChildren="Button">
+ *       <MenuItemCheckbox
+ *         checked={checked}
+ *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}
+ *       >
+ *         Checkbox
+ *      </MenuItemCheckbox>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.8.0
+ */
+export declare const MenuItemCheckbox: import("react").ForwardRefExoticComponent<MenuItemCheckboxProps & import("react").RefAttributes<HTMLLIElement>>;