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

package/src/form/Label.tsx

@@ -1,9 +1,7 @@
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 
-import { type TextColor, type ThemeColor, cssUtils } from "../cssUtils.js";
-import { bem } from "../utils/bem.js";
-import { type LabelClassNameOptions, type LabelProps } from "./types.js";
+import { label } from "./labelStyles.js";
+import { type LabelProps } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -15,62 +13,15 @@ declare module "react" {
   }
 }
 
-const labelStyles = bem("rmd-label");
-
-/**
- * @since 6.0.0
- */
-export function label(options: LabelClassNameOptions): string {
-  const {
-    className,
-    gap,
-    error,
-    dense,
-    active,
-    stacked,
-    reversed,
-    disabled,
-    floating,
-    inactive,
-    floatingActive = active,
-  } = options;
-
-  let textColor: TextColor | ThemeColor | undefined;
-  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
-  );
-}
-
 /**
  * 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.
  *
+ * @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.
  */

package/src/form/Legend.tsx

@@ -17,6 +17,7 @@ export interface LegendProps extends TypographyProps {
 /**
  * This should be used within a `Fieldset` to apply a label.
  *
+ * @see {@link https://next.react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
  */
 export const Legend = forwardRef<HTMLLegendElement, LegendProps>(

package/src/form/Listbox.tsx

@@ -15,7 +15,7 @@ import { type OptionSelectedIconProps } from "./Option.js";
  * @since 6.0.0
  * @internal
  */
-export type ListboxValue = string | number | null | Record<string, unknown>;
+export type ListboxValue = string | number | null | object;
 
 /**
  * @since 6.0.0

package/src/form/MenuItemCheckbox.tsx

@@ -18,7 +18,8 @@ import {
  *
  * @example Simple Example
  * ```tsx
- * import { DropdownMenu, MenuItemCheckbox } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItemCheckbox } from "@react-md/core/menu/MenuItemCheckbox";
  * import { ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
@@ -37,6 +38,7 @@ import {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/menu#menuitemcheckbox-example | DropdownMenu Demos}
  * @since 2.8.0
  */
 export const MenuItemCheckbox = forwardRef<

package/src/form/MenuItemFileInput.tsx

@@ -56,6 +56,7 @@ export interface MenuItemFileInputProps
  *
  * A wrapper for the `<input type="file">` element that works within menus.
  *
+ * @see {@link https://next.react-md.dev/components/menu#menuitemfileinput-example | DropdownMenu Demos}
  * @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

package/src/form/MenuItemInputToggle.tsx

@@ -19,8 +19,8 @@ import {
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import {
+  type ConfigurableInputToggleIconProps,
   type IndeterminateCheckboxProps,
-  type InputToggleIconProps,
 } from "./InputToggle.js";
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
@@ -47,7 +47,7 @@ export type MenuItemInputToggleCheckedCallback = (
 /** @since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
   extends HTMLAttributes<HTMLLIElement>,
-    InputToggleIconProps,
+    ConfigurableInputToggleIconProps,
     ListItemChildrenTextProps {
   checked: boolean;
   onCheckedChange: MenuItemInputToggleCheckedCallback;
@@ -133,6 +133,7 @@ export type MenuItemInputToggleProps =
  * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should
  * be used instead.
  *
+ * @see {@link https://next.react-md.dev/components/menu | DropdownMenu Demos}
  * @see {@link MenuItemCheckbox} for checkbox examples
  * @see {@link MenuItemRadio} for radio examples
  * @see {@link MenuItemSwitch} for switch examples

package/src/form/MenuItemRadio.tsx

@@ -26,7 +26,8 @@ import {
  * @example Only Radio Items
  * ```tsx
  * import { ReactElement, useState } from "react";
- * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItemRadio } from "@react-md/core/menu/MenuItemRadio";
  *
  * function Example(): ReactElement {
  *   const [value, setValue] = useState("value1");
@@ -61,13 +62,11 @@ import {
  *
  * @example With Other Items
  * ```tsx
- * import {
- *   DropdownMenu,
- *   MenuItemGroup,
- *   MenuItemRadio,
- *   MenuItemSwitch,
- *   MenuItemSeparator,
- * } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItemGroup } from "@react-md/core/menu/MenuItemGroup";
+ * import { MenuItemRadio } from "@react-md/core/menu/MenuItemRadio";
+ * import { MenuItemSeparator } from "@react-md/core/menu/MenuItemSeparator";
+ * import { MenuItemSwitch } from "@react-md/core/menu/MenuItemSwitch";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -108,6 +107,7 @@ import {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}
  * @since 2.8.0
  */
 export const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(

package/src/form/MenuItemSwitch.tsx

@@ -16,7 +16,8 @@ import {
  * @example Simple Example
  * ```tsx
  * import { ReactElement, useState } from "react";
- * import { DropdownMenu, MenuItemSwitch } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItemSwitch } from "@react-md/core/menu/MenuItemSwitch";
  *
  * function Example(): ReactElement {
  *   const [checked, setChecked] = useState(false);
@@ -34,6 +35,7 @@ import {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}
  * @since 2.8.0
  */
 export const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(

package/src/form/MenuItemTextField.tsx

@@ -29,6 +29,7 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
  * hard to style nicely within menus. You'd most likely want to use another menu
  * for displaying errors.
  *
+ * @see {@link https://next.react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}
  * @since 5.0.0
  */
 export const MenuItemTextField = forwardRef<

package/src/form/NativeSelect.tsx

@@ -107,6 +107,8 @@ export interface NativeSelectProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/native-select | NativeSelect Demos}
  */
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   function NativeSelect(props, ref) {

package/src/form/OptGroup.tsx

@@ -46,7 +46,9 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  *
  * @example Simple Example
  * ```tsx
- * import { Select, OptGroup, Option } from "@react-md/core";
+ * import { Select } from "@react-md/core/form/Select";
+ * import { OptGroup } from "@react-md/core/form/OptGroup";
+ * import { Option } from "@react-md/core/form/Option";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement } from "react";
  *
@@ -68,6 +70,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
  * @since 6.0.0
  */
 export const OptGroup = forwardRef<ListElement, OptGroupProps>(

package/src/form/Option.tsx

@@ -72,7 +72,7 @@ export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
    * @defaultValue `"option"`
    */
   role?: string;
-  value: string | number | Record<string, unknown>;
+  value: string | number | object;
 
   /**
    * An optional className to apply only while the current option is selected to
@@ -132,6 +132,7 @@ export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
  * This component is a wrapper around the {@link MenuItem} to implement custom
  * select option behavior.
  *
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
  * @since 6.0.0 removed the `selected` and `focused` props.
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.

package/src/form/Password.tsx

@@ -123,7 +123,7 @@ export interface PasswordProps
  *
  * @example Simple Example
  * ```tsx
- * import { Password } from "@react-md/core";
+ * import { Password } from "@react-md/core/form/Password";
  *
  * function Example(): ReactElement {
  *   return (
@@ -135,6 +135,8 @@ export interface PasswordProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/password | Password Demos}
  */
 export const Password = forwardRef<HTMLInputElement, PasswordProps>(
   function Password(props, ref) {

package/src/form/Radio.tsx

@@ -22,6 +22,8 @@ import { InputToggle, type RadioProps } from "./InputToggle.js";
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
  */
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
   function Radio(props, ref) {

package/src/form/Select.tsx

@@ -25,7 +25,6 @@ import {
 } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { label as labelStyles } from "./Label.js";
 import { Listbox } from "./Listbox.js";
 import { SelectedOption } from "./SelectedOption.js";
 import {
@@ -33,6 +32,7 @@ import {
   type TextFieldContainerProps,
 } from "./TextFieldContainer.js";
 import { getFormConfig } from "./formConfig.js";
+import { label as labelStyles } from "./labelStyles.js";
 import { select } from "./selectStyles.js";
 import { extractOptionsFromChildren } from "./selectUtils.js";
 import { textField } from "./textFieldStyles.js";
@@ -57,8 +57,8 @@ const noop = (): void => {
  *
  * @example Simple Usage
  * ```tsx
- * import type { SelectedChangeEvent } from "@react-md/core";
- * import { Select, Option } from "@react-md/core";
+ * import { Select, type SelectChangeEvent } from "@react-md/core/form/Select";
+ * import { Option } from "@react-md/core/form/Option";
  * import type { ReactElement } from "react";
  *
  * type Value = "" | "a" | "b" | "c" | "d";
@@ -219,7 +219,8 @@ export interface SelectProps<Value extends string>
  *
  * @example Simple Example
  * ```tsx
- * import { Select, Option } from "react-md";
+ * import { Option } from "@react-md/core/form/Option";
+ * import { Select } from "@react-md/core/form/Select";
  * import { useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -241,31 +242,7 @@ export interface SelectProps<Value extends string>
  * }
  * ```
  *
- * @example Testing
- * ```tsx
- * rmdRender(
- *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
- *     <Option value="a">Option 1</Option>
- *     <Option value="b">Option 2</Option>
- *     <Option value="c">Option 3</Option>
- *     <Option value="d">Option 4</Option>
- *   </Select>
- * );
- *
- * const user = userEvent.setup();
- * const select = screen.getByRole("combobox", { name: "Select" });
- * const selected = screen.getByTestId("selected")
- * const selectInput = screen.getByRole("textbox", { hidden: true });
- * expect(selected).toHaveTextContent("");
- * expect(selectInput).toHaveValue("");
- *
- * await user.click(select);
- * await user.click(screen.getByRole("option"), { name: "Option 2" });
- *
- * expect(selected).toHaveTextContent("Option 2");
- * expect(selectInput).toHaveValue("b");
- * ```
- *
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
  * @since 6.0.0 Rewritten with a new API.
  */
 export function Select<Value extends string>(

package/src/form/Slider.tsx

@@ -268,7 +268,9 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  *
  * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -294,7 +296,11 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  *
  * @example Range Slider Example
  * ```tsx
- * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Legend } from "@react-md/core/form/Legend";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useRangeSlider } from "@react-md/core/form/useRangeSlider";
  * import type { ReactElement } from "react";
  * import { useId } from "react";
  *
@@ -323,6 +329,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @since 2.5.0
  * @since 6.0.0 The `Slider` and `RangeSlider` have been combined into the
  * single `Slider` component and removed the `label` support.

package/src/form/SliderContainer.tsx

@@ -1,9 +1,6 @@
-import { cnb } from "cnbuilder";
 import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-slider-container");
+import { sliderContainer } from "./sliderStyles.js";
 
 /**
  * @since 2.5.0
@@ -66,17 +63,12 @@ export const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(
       <div
         {...remaining}
         ref={ref}
-        className={cnb(
-          styles({
-            h: !vertical,
-            "pad-left": !vertical && !beforeAddon,
-            "pad-right": !vertical && !afterAddon,
-            v: vertical,
-            "pad-bottom": vertical && !beforeAddon,
-            "pad-top": vertical && !afterAddon,
-          }),
-          className
-        )}
+        className={sliderContainer({
+          className,
+          vertical,
+          beforeAddon: !!beforeAddon,
+          afterAddon: !!afterAddon,
+        })}
       >
         {beforeAddon}
         {children}

package/src/form/SliderMark.tsx

@@ -1,9 +1,6 @@
-import { cnb } from "cnbuilder";
 import { type HTMLAttributes, type ReactElement } from "react";
 
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-slider-mark");
+import { sliderMark } from "./sliderStyles.js";
 
 /**
  * @internal
@@ -26,15 +23,7 @@ export function SliderMark(props: SliderMarkProps): ReactElement {
     <span
       {...remaining}
       style={{ ...style, "--rmd-slider-mark-offset": offset }}
-      className={cnb(
-        styles({
-          active,
-          inactive: !active,
-          h: !vertical,
-          v: vertical,
-        }),
-        className
-      )}
+      className={sliderMark({ className, active, vertical })}
     />
   );
 }

package/src/form/SliderMarkLabel.tsx

@@ -1,4 +1,3 @@
-import { cnb } from "cnbuilder";
 import { type ReactElement } from "react";
 
 import {
@@ -7,9 +6,7 @@ import {
   type TypographyProps,
 } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-slider-mark-label");
+import { sliderMarkLabel } from "./sliderStyles.js";
 
 /**
  * @since 6.0.0
@@ -53,7 +50,7 @@ export function SliderMarkLabel(props: SliderMarkLabelProps): ReactElement {
       as={as}
       type={type}
       style={{ ...style, "--rmd-slider-mark-offset": offset }}
-      className={cnb(styles({ h: !vertical, v: vertical }), className)}
+      className={sliderMarkLabel({ className, vertical })}
     >
       {children}
     </Typography>

package/src/form/SliderThumb.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { cnb } from "cnbuilder";
 import {
   type ChangeEventHandler,
   type HTMLAttributes,
@@ -13,61 +12,14 @@ import {
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import { type LabelRequiredForA11y } from "../types.js";
-import { bem } from "../utils/bem.js";
 import { SliderValueTooltip } from "./SliderValueTooltip.js";
+import { sliderThumb, sliderThumbInput } from "./sliderStyles.js";
 import { type SliderValueOptions } from "./useSlider.js";
 
-const styles = bem("rmd-slider-thumb");
-
 const noop = (): void => {
   // do nothing
 };
 
-/**
- * @internal
- * @since 6.0.0
- */
-interface SliderThumbClassNameOptions {
-  className?: string;
-
-  mask?: boolean;
-  index: 1 | 2;
-  active: boolean;
-  animate: boolean;
-  vertical: boolean;
-  disabled: boolean;
-}
-
-/**
- * @internal
- * @since 6.0.0
- */
-function sliderThumb(options: SliderThumbClassNameOptions): string {
-  const { className, mask, index, active, animate, disabled, vertical } =
-    options;
-
-  const isSecondThumb = index === 2;
-  return cnb(
-    styles({
-      h: !vertical,
-      h1: !vertical && !isSecondThumb,
-      h2: !vertical && isSecondThumb,
-      v: vertical,
-      v1: vertical && !isSecondThumb,
-      v2: vertical && isSecondThumb,
-      mask,
-      "mask-h": mask && !vertical,
-      "mask-v": mask && vertical,
-      active,
-      animate,
-      disabled,
-      "disabled-h": disabled && !vertical && !mask,
-      "disabled-v": disabled && vertical && !mask,
-    }),
-    className
-  );
-}
-
 /**
  * @since 6.0.0
  */
@@ -309,7 +261,7 @@ export const SliderThumb = forwardRef<
         disabled={disabled}
         tabIndex={-1}
         onChange={onChange}
-        className={styles("input")}
+        className={sliderThumbInput()}
       />
       {discrete && (
         <SliderValueTooltip

package/src/form/SliderTrack.tsx

@@ -1,7 +1,6 @@
-import { cnb } from "cnbuilder";
 import { type HTMLAttributes, forwardRef } from "react";
 
-import { bem } from "../utils/bem.js";
+import { sliderTrack } from "./sliderStyles.js";
 import {
   type ClosestThumbEventHandlersOptions,
   type ThumbOffsetsOptions,
@@ -9,8 +8,6 @@ import {
   getThumbOffsets,
 } from "./sliderUtils.js";
 
-const styles = bem("rmd-slider-track");
-
 /**
  * @internal
  * @since 2.5.0
@@ -80,20 +77,13 @@ export const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(
             isRangeSlider,
           }),
         }}
-        className={cnb(
-          styles({
-            animate,
-            disabled,
-            hoverable: !disabled,
-            h: !vertical,
-            h1: !vertical && !isRangeSlider,
-            h2: !vertical && isRangeSlider,
-            v: vertical,
-            v1: vertical && !isRangeSlider,
-            v2: vertical && isRangeSlider,
-          }),
-          className
-        )}
+        className={sliderTrack({
+          className,
+          animate,
+          disabled,
+          vertical,
+          isRangeSlider,
+        })}
         {...getClosestThumbEventHandlers({
           vertical,
           isRangeSlider,

package/src/form/SliderValueTooltip.tsx

@@ -1,13 +1,10 @@
 "use client";
 
-import { cnb } from "cnbuilder";
 import { type ReactElement, type ReactNode } from "react";
 
 import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
 import { type CSSTransitionClassNames } from "../transition/types.js";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-slider-tooltip");
+import { sliderValueTooltip } from "./sliderStyles.js";
 
 const HORIZONTAL_CLASS_NAMES: CSSTransitionClassNames = {
   enter: "rmd-slider-tooltip--h-off",
@@ -63,12 +60,7 @@ export function SliderValueTooltip(
       dense
       disablePortal
       textOverflow="nowrap"
-      className={cnb(
-        styles({ h: !vertical, v: vertical }),
-        animate && "rmd-slider-thumb--animate",
-        `rmd-slider-thumb--${vertical ? "v" : "h"}${index}`,
-        className
-      )}
+      className={sliderValueTooltip({ className, animate, index, vertical })}
       classNames={classNames}
       {...remaining}
     >

package/src/form/Switch.tsx

@@ -19,6 +19,13 @@ import {
   type FormMessageContainerExtension,
 } from "./types.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-switch-track-background-color"?: string;
+    "--rmd-switch-ball-background-color"?: string;
+  }
+}
+
 /**
  * @since 6.0.0 Added `containerProps` and support for the
  * `FormMessage` behavior.
@@ -41,7 +48,8 @@ export interface SwitchProps
 /**
  * @example Simple Example
  * ```tsx
- * import { Form, Switch } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Switch } from "@react-md/core/form/Switch";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -61,6 +69,7 @@ export interface SwitchProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/switch | Switch Demos}
  * @since 6.0.0 Added support for `FormMessage` behavior.
  */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(