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

package/src/form/Checkbox.tsx

@@ -7,8 +7,7 @@ import { InputToggle, type CheckboxProps } from "./InputToggle.js";
  * You'll generally want to use the `useCheckboxGroup` hook for managing the
  * checked state for groups of checkboxes and indeterminate checkbox behavior.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Checkbox } from "@react-md/core";

package/src/form/Fieldset.tsx

@@ -4,14 +4,14 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-fieldset");
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface FieldsetClassNameOptions {
   className?: string;
 
   /**
    * Set this to `true` to enable the default browser styles for a fieldset.
    *
-   * @remarks \@since 6.0.0 This was renamed from `unstyled`.
+   * @since 6.0.0 This was renamed from `unstyled`.
    * @defaultValue `false`
    */
   browserStyles?: boolean;
@@ -23,7 +23,7 @@ export interface FieldsetClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function fieldset(options: FieldsetClassNameOptions = {}): string {
   const { className, fullWidth, browserStyles = false } = options;
@@ -37,7 +37,7 @@ export function fieldset(options: FieldsetClassNameOptions = {}): string {
 /**
  * **Server Component**
  *
- * @remarks \@since 6.0.0 Removed the `legend`, `legendStyle`,
+ * @since 6.0.0 Removed the `legend`, `legendStyle`,
  * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`
  * yourself manually instead of using a prop.
  */
@@ -46,8 +46,7 @@ export interface FieldsetProps
     FieldsetClassNameOptions {}
 
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Form, Fieldset, Legend } from "@react-md/core";
  *

package/src/form/FileInput.tsx

@@ -17,22 +17,22 @@ import { type PropsWithRef } from "../types.js";
 import { SrOnly } from "../typography/SrOnly.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type FileInputClassNameOptions = ButtonClassNameOptions;
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export function fileInput(options: FileInputClassNameOptions = {}): string {
   return cnb("rmd-file-input", button(options));
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type FileInputHTMLAttributes = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "type"
 >;
 
 /**
- * @remarks \@since 6.0.0 Removed the `disableIconSpacing` prop since it is no
+ * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no
  * longer required.
  */
 export interface FileInputProps
@@ -91,8 +91,7 @@ export interface FileInputProps
  * **Client Component**
  * This might be able to become a server component if I remove the getIcon hook
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { FileInput, Form } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -133,7 +132,7 @@ export interface FileInputProps
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Added additional support for `iconSize` and
+ * @since 6.0.0 Added additional support for `iconSize` and
  * `responsive`. Also removed the `disableIconSpacing` prop since it is no
  * longer required.
  */

package/src/form/FormMessageContainer.tsx

@@ -5,7 +5,7 @@ import { FormMessage } from "./FormMessage.js";
 import { type FormMessageProps } from "./types.js";
 
 /**
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface FormMessageContainerProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -22,7 +22,7 @@ export interface FormMessageContainerProps
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
  * and renders the {@link FormMessage} component.
  *
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export const FormMessageContainer = forwardRef<
   HTMLDivElement,

package/src/form/FormMessageCounter.tsx

@@ -1,14 +1,13 @@
 import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { formMessageCounter } from "./formMessageStyles.js";
 
-/** @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}`
    * ```
@@ -25,8 +24,7 @@ export interface FormMessageCounterProps
  * 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;
@@ -44,7 +42,7 @@ export interface FormMessageCounterProps
  * }
  * ```
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function FormMessageCounter(
   props: FormMessageCounterProps

package/src/form/InputToggle.tsx

@@ -21,7 +21,7 @@ import {
 } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface InputToggleIconProps {
   /**
@@ -66,7 +66,7 @@ export interface InputToggleIconProps {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface InputToggleLabelProps {
   /**
@@ -144,7 +144,7 @@ export interface InputToggleLabelProps {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BaseInputToggleProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
@@ -160,9 +160,8 @@ export interface BaseInputToggleProps
 }
 
 /**
- * @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 {
@@ -186,7 +185,7 @@ export interface IndeterminateCheckboxProps {
    * {@link indeterminate} prop is `true`.
    *
    * @defaultValue `getIcon("checkboxIndeterminate")`
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   indeterminateIcon?: ReactNode;
 }
@@ -195,7 +194,7 @@ export interface CheckboxProps
   extends BaseInputToggleProps,
     IndeterminateCheckboxProps {}
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CheckboxInputToggleProps extends CheckboxProps {
   type: "checkbox";
 }
@@ -204,19 +203,19 @@ 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;
@@ -224,7 +223,7 @@ export type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0 Now supports the `FormMessage` behavior and requires
+ * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
  */
 export const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(

package/src/form/InputToggleIcon.tsx

@@ -5,9 +5,8 @@ import { FORM_CONFIG } from "./formConfig.js";
 import { inputToggle, 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
@@ -56,9 +55,8 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
 /**
  * **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/src/form/Label.tsx

@@ -17,7 +17,7 @@ declare module "react" {
 const labelStyles = bem("rmd-label");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function label(options: LabelClassNameOptions): string {
   const {
@@ -72,7 +72,7 @@ export function label(options: LabelClassNameOptions): string {
  * 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
+ * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(

package/src/form/Legend.tsx

@@ -4,7 +4,7 @@ import { cssUtils } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LegendProps extends TypographyProps {
   /**
@@ -18,7 +18,7 @@ export interface LegendProps extends TypographyProps {
  *
  * This should be used within a `Fieldset` to apply a label.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const Legend = forwardRef<HTMLLegendElement, LegendProps>(
   function Legend(props, ref) {

package/src/form/MenuItemCheckbox.tsx

@@ -14,8 +14,7 @@ import { type ICON_CONFIG } from "../icon/iconConfig.js";
  * render it as a checkbox and pulling the checkbox icon from the
  * {@link ICON_CONFIG}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { DropdownMenu, MenuItemCheckbox } from "@react-md/core";
  * import { ReactElement, useState } from "react";
@@ -36,7 +35,7 @@ import { type ICON_CONFIG } from "../icon/iconConfig.js";
  * }
  * ```
  *
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export const MenuItemCheckbox = forwardRef<
   HTMLLIElement,

package/src/form/MenuItemFileInput.tsx

@@ -13,7 +13,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0 Removed most of the shared `FileInputProps` from this
+ * @since 6.0.0 Removed most of the shared `FileInputProps` from this
  * implementation.
  */
 export interface MenuItemFileInputProps
@@ -29,7 +29,6 @@ export interface MenuItemFileInputProps
    * }}
    * ```
    *
-   * @remarks
    * This is actually a native `Event` and not a `SyntheticEvent` because the
    * file input is created through `document.createElement` instead of `React`.
    * You can still access the files through `event.currentTarget.files` like
@@ -55,9 +54,8 @@ export interface MenuItemFileInputProps
  *
  * A wrapper for the `<input type="file">` element that works within menus.
  *
- * @remarks
- * \@since 5.0.0
- * \@since 6.0.0 No longer creates an invisible file input element within the
+ * @since 5.0.0
+ * @since 6.0.0 No longer creates an invisible file input element within the
  * menu item. This allows the menu to be closed immediately when this menu item
  * is clicked.
  */

package/src/form/MenuItemInputToggle.tsx

@@ -35,14 +35,14 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MenuItemInputToggleCheckedCallback = (
   checked: boolean,
   event: MouseEvent<HTMLLIElement>
 ) => void;
 
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
   extends HTMLAttributes<HTMLLIElement>,
     InputToggleIconProps,
@@ -102,9 +102,8 @@ export interface MenuItemCheckboxProps
 export type MenuItemRadioProps = BaseMenuItemInputToggleProps;
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Added additional props for styling the track and ball.
+ * @since 2.8.0
+ * @since 6.0.0 Added additional props for styling the track and ball.
  */
 export interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {
   trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -116,9 +115,8 @@ export interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Updated to be a union of the different props to enforce the
+ * @since 2.8.0
+ * @since 6.0.0 Updated to be a union of the different props to enforce the
  * correct props based on `type`
  */
 export type MenuItemInputToggleProps =
@@ -136,7 +134,7 @@ export type MenuItemInputToggleProps =
  * @see {@link MenuItemCheckbox} for checkbox examples
  * @see {@link MenuItemRadio} for radio examples
  * @see {@link MenuItemSwitch} for switch examples
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export const MenuItemInputToggle = forwardRef<
   HTMLLIElement,

package/src/form/MenuItemRadio.tsx

@@ -21,8 +21,7 @@ import { type ICON_CONFIG } from "../icon/iconConfig.js";
  * with an element using the separator role.
  * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
  *
- * @example
- * Only Radio Items
+ * @example Only Radio Items
  * ```tsx
  * import { ReactElement, useState } from "react";
  * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
@@ -58,8 +57,7 @@ import { type ICON_CONFIG } from "../icon/iconConfig.js";
  * }
  * ```
  *
- * @example
- * With Other Items
+ * @example With Other Items
  * ```tsx
  * import {
  *   DropdownMenu,
@@ -108,7 +106,7 @@ import { type ICON_CONFIG } from "../icon/iconConfig.js";
  * }
  * ```
  *
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(
   function MenuItemRadio(props, ref) {

package/src/form/MenuItemSwitch.tsx

@@ -11,8 +11,7 @@ import {
  * This is a simple wrapper for the {@link MenuItemInputToggle} component to
  * render it as a switch.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { ReactElement, useState } from "react";
  * import { DropdownMenu, MenuItemSwitch } from "@react-md/core";
@@ -33,7 +32,7 @@ import {
  * }
  * ```
  *
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(
   function MenuItemSwitch(props, ref) {

package/src/form/MenuItemTextField.tsx

@@ -5,7 +5,7 @@ import { type PropsWithRef } from "../types.js";
 import { TextField, type TextFieldProps } from "./TextField.js";
 
 /**
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  */
 export interface MenuItemTextFieldProps extends TextFieldProps {
   /**
@@ -27,7 +27,7 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
  * hard to style nicely within menus. You'd most likely want to use another menu
  * for displaying errors.
  *
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  */
 export const MenuItemTextField = forwardRef<
   HTMLInputElement,

package/src/form/NativeSelect.tsx

@@ -19,7 +19,7 @@ import {
 } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
  */
 export interface NativeSelectProps
   extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
@@ -71,8 +71,7 @@ export interface NativeSelectProps
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * <NativeSelect label="Label">
  *   <option value="a">Value 1</option>
@@ -82,8 +81,7 @@ export interface NativeSelectProps
  * </NativeSelect>
  * ```
  *
- * @example
- * Required Value Example
+ * @example Required Value Example
  * ```tsx
  * function Example(): ReactElement {
  *   // using `defaultValue=""` makes it so the first option selected by default

package/src/form/OptGroup.tsx

@@ -9,7 +9,7 @@ import { MenuItemGroup } from "../menu/MenuItemGroup.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface OptGroupProps extends Omit<ListProps, "role"> {
   /**
    * This is really the `children` to display in a `ListSubheader` that
@@ -42,8 +42,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * correct accessibility when creating an `<optgroup>` with the `Select`
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Select, OptGroup, Option } from "@react-md/core";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
@@ -67,7 +66,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const OptGroup = forwardRef<ListElement, OptGroupProps>(
   function OptGroup(props, ref) {

package/src/form/Option.tsx

@@ -23,16 +23,15 @@ const noop = (): void => {
  * This icon is used while the option is unselected so that the selected and
  * unselected options have the same alignment.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const DEFAULT_OPTION_UNSELECTED_ICON = (
   <span className={icon({ type: "svg" })} />
 );
 
 /**
- * @remarks
- * \@since 6.0.0 removed the `selected` and `focused` props.
- * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */
 export interface OptionProps extends MenuItemProps {
@@ -92,9 +91,8 @@ export interface OptionProps extends MenuItemProps {
  * This component is a wrapper around the {@link MenuItem} to implement custom
  * select option behavior.
  *
- * @remarks
- * \@since 6.0.0 removed the `selected` and `focused` props.
- * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */
 export const Option = forwardRef<HTMLLIElement, OptionProps>(

package/src/form/Password.tsx

@@ -13,8 +13,7 @@ import {
 import { TextField, type TextFieldProps } from "./TextField.js";
 
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {
  *   if (isPasswordVisible) {
@@ -34,8 +33,7 @@ export type GetPasswordVisibilityIcon = (
 ) => ReactNode;
 
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const visibilityIcon: ConfigurableVisibilityIcon = {
  *   visible: <SecurityIcon />,
@@ -60,13 +58,12 @@ export interface PasswordProps
   extends Omit<TextFieldProps, "type" | "rightAddon"> {
   /**
    * @defaultValue `"password"`
-   * @remarks \@since 6.0.0 Defaults to `"password"`
+   * @since 6.0.0 Defaults to `"password"`
    */
   name?: string;
 
   /**
-   * @example
-   * Configurable Visibility Icon Object
+   * @example Configurable Visibility Icon Object
    * ```tsx
    * <Password
    *   {...props}
@@ -77,8 +74,7 @@ export interface PasswordProps
    * />
    * ```
    *
-   * @example
-   * Get Password Visibility Icon Function
+   * @example Get Password Visibility Icon Function
    * ```tsx
    * <Password
    *   {...props}
@@ -92,8 +88,7 @@ export interface PasswordProps
    * />
    * ```
    *
-   * @example
-   * Custom Icon
+   * @example Custom Icon
    * ```tsx
    * <Password
    *   {...props}
@@ -124,8 +119,7 @@ export interface PasswordProps
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Password } from "@react-md/core";
  *

package/src/form/Radio.tsx

@@ -8,8 +8,7 @@ import { InputToggle, type RadioProps } from "./InputToggle.js";
  * You'll generally want to use the `useRadioGroup` hook along with this
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *

package/src/form/ResizingTextAreaWrapper.tsx

@@ -9,7 +9,7 @@ import {
 import { textArea } from "./textAreaStyles.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface ResizingTextAreaWrapperProps
@@ -24,7 +24,7 @@ export interface ResizingTextAreaWrapperProps
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export const ResizingTextAreaWrapper = forwardRef<