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

package/src/button/Button.tsx

@@ -11,7 +11,7 @@ import {
   type FloatingActionButtonPosition,
   type FloatingActionButtonProps,
 } from "./FloatingActionButton.js";
-import { type ButtonClassNameThemeOptions, button } from "./buttonStyles.js";
+import { type ButtonClassNameThemeOptions, button } from "./styles.js";
 
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
@@ -38,7 +38,7 @@ export interface ButtonProps
  *
  * @example Simple Example
  * ```tsx
- * import { Button } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -56,7 +56,7 @@ export interface ButtonProps
  *
  * @example Theme Example
  * ```tsx
- * import { Button } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -76,8 +76,8 @@ export interface ButtonProps
  *
  * @example Icon Button Example
  * ```tsx
- * import { Button } from "@react-md/core";
- * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -90,7 +90,7 @@ export interface ButtonProps
  *         // do something
  *       }}
  *     >
- *       <FavoriteSVGIcon />
+ *       <FavoriteIcon />
  *     </Button>
  *   );
  * }
@@ -98,8 +98,8 @@ export interface ButtonProps
  *
  * @example Text Button with icons
  * ```tsx
- * import { Button } from "@react-md/core";
- * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -109,12 +109,14 @@ export interface ButtonProps
  *         // do something
  *       }}
  *     >
- *       <FavoriteSVGIcon />
+ *       <FavoriteIcon />
  *       Content
  *     </Button>
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/button | Button Demos}
  */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {

package/src/button/ButtonUnstyled.tsx

@@ -1,6 +1,6 @@
 import { type ButtonHTMLAttributes, forwardRef } from "react";
 
-import { buttonUnstyled } from "./buttonUnstyledStyles.js";
+import { buttonUnstyled } from "./styles.js";
 
 /**
  * The props for the unstyled button are just all the normal button html
@@ -20,6 +20,7 @@ export type ButtonUnstyledProps = Omit<
  *
  * Requires the `$disable-unstyled-utility-class` to be `false` to use.
  *
+ * @see {@link https://next.react-md.dev/components/button-unstyled | ButtonUnstyled Demos}
  * @see {@link buttonUnstyled}
  * @since 6.0.0 Renamed from `UnstyledButton`
  */

package/src/button/TooltippedButton.tsx

@@ -10,7 +10,7 @@ import {
   useTooltip,
 } from "../tooltip/useTooltip.js";
 import { Button, type ButtonProps } from "./Button.js";
-import { type ButtonType } from "./buttonStyles.js";
+import { type ButtonType } from "./styles.js";
 
 /**
  * @since 6.0.0
@@ -58,7 +58,7 @@ export interface TooltippedButtonProps extends ButtonProps {
  *
  * @example
  * ```tsx
- * import { TooltippedButton } from "@react-md/core";
+ * import { TooltippedButton } from "@react-md/core/button/TooltippedButton";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  *
  * export default function Example(): ReactElement {
@@ -70,6 +70,7 @@ export interface TooltippedButtonProps extends ButtonProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/button | Button Demos}
  * @since 6.0.0
  */
 export const TooltippedButton = forwardRef<

package/src/button/{buttonStyles.ts → styles.ts}

@@ -173,3 +173,21 @@ export function button(options: ButtonClassNameOptions = {}): string {
     className
   );
 }
+
+/** @since 6.0.0 */
+export interface ButtonUnstyledClassNameOptions {
+  className?: string;
+}
+
+/**
+ * This requires the `$disable-unstyled-utility-class` to be `false` to use.
+ *
+ * @since 6.0.0
+ */
+export function buttonUnstyled(
+  options: ButtonUnstyledClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb("rmd-button-unstyled", className);
+}

package/src/card/Card.tsx

@@ -30,16 +30,14 @@ export interface CardProps
 /**
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   Card,
- *   CardContent,
- *   CardFooter,
- *   CardHeader,
- *   CardTitle,
- *   CardSubtitle,
- *   Typography,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Card } from "@react-md/core/card/Card";
+ * import { CardContent } from "@react-md/core/card/CardContent";
+ * import { CardFooter } from "@react-md/core/card/CardFooter";
+ * import { CardHeader } from "@react-md/core/card/CardHeader";
+ * import { CardTitle } from "@react-md/core/card/CardTitle";
+ * import { CardSubtitle } from "@react-md/core/card/CardSubtitle";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -63,6 +61,7 @@ export interface CardProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Removed the deprecated `raiseable` prop
  * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of
  * `block`/`inline-block`.

package/src/card/CardContent.tsx

@@ -11,6 +11,7 @@ export interface CardContentProps
     CardContentClassNameOptions {}
 
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */

package/src/card/CardFooter.tsx

@@ -16,6 +16,7 @@ export interface CardFooterProps extends BoxProps {
  * A simple wrapper around the {@link Box} component that applies additional
  * padding and applies `justify-content: flex-end;` by default.
  *
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0
  */
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(

package/src/card/CardHeader.tsx

@@ -31,6 +31,7 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Removed the `align` prop.
  * @since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
  * `beforeAddon` and `afterAddon`.

package/src/card/CardSubtitle.tsx

@@ -30,6 +30,7 @@ export interface CardSubtitleProps extends TypographyProps {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Extends the {@link Typography} component and removed the
  * `noWrap`/`disableSecondaryColor` props.
  */

package/src/card/CardTitle.tsx

@@ -8,7 +8,7 @@ import {
 import { cardTitle } from "./styles.js";
 
 /**
- * @since 6,0.0 Extends the {@link TypographyProps} and removed the
+ * @since 6.0.0 Extends the {@link TypographyProps} and removed the
  * `small`/`noWrap` props.
  */
 export interface CardTitleProps extends TypographyProps {
@@ -23,6 +23,7 @@ export interface CardTitleProps extends TypographyProps {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */

package/src/card/ClickableCard.tsx

@@ -36,7 +36,8 @@ export interface ClickableCardProps
  *
  * @example Simple Example
  * ```tsx
- * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent"
+ * import { ClickableCard } from "@react-md/core/card/ClickableCard";
  * import { type ReactElement } from "react";
  *
  * export default function ClickableCardExample(): ReactElement {
@@ -52,6 +53,7 @@ export interface ClickableCardProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/card#clickable-card | ClickableCard Demos}
  * @since 6.0.0
  */
 export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(

package/src/chip/Chip.tsx

@@ -163,7 +163,7 @@ export interface ChipProps
 /**
  * @example Simple Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -173,7 +173,7 @@ export interface ChipProps
  *
  * @example Outlined Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -183,7 +183,8 @@ export interface ChipProps
  *
  * @example Addons Example
  * ```tsx
- * import { Avatar, Chip } from "@react-md/core";
+ * import { Avatar } from "@react-md/core/avatar/Avatar";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
  * import type { ReactElement } from "react";
  *
@@ -203,6 +204,7 @@ export interface ChipProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/chip | Chip Demos}
  * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
  */

package/src/cssUtils.ts

@@ -54,7 +54,7 @@ export type FontStyle = "italic" | "oblique" | "normal";
  * custom font.
  *
  * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}
- * @see {@link https://www.google.com/search?q=variable+fonts | Variable FOnts}
+ * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}
  * @since 6.0.0 This was `TextWeight` beforehand.
  */
 export type FontWeight =

package/src/dialog/Dialog.tsx

@@ -191,16 +191,14 @@ export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   Dialog,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -235,6 +233,7 @@ export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  * @since 6.0.0 The `Dialog` no longer supports focusing elements
  * within once it becomes visible. You must manually add `autoFocus` to a
  * element instead.

package/src/dialog/DialogContent.tsx

@@ -10,15 +10,15 @@ export interface DialogContentProps
  * The `DialogContent` component should be used as a child of the `Dialog`
  * component that applies some reasonable default styles. Look at the `Dialog`
  * or `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  function DialogContent(
-    { children, className, disablePadding = false, ...props },
-    ref
-  ) {
+  function DialogContent(props, ref) {
+    const { children, className, disablePadding = false, ...remaining } = props;
     return (
       <div
-        {...props}
+        {...remaining}
         ref={ref}
         className={dialogContent({
           className,

package/src/dialog/DialogFooter.tsx

@@ -9,12 +9,15 @@ export interface DialogFooterProps
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
  * applied. Look at the `Dialog` or `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
-  function DialogFooter({ children, className, align = "end", ...props }, ref) {
+  function DialogFooter(props, ref) {
+    const { children, className, align = "end", ...remaining } = props;
     return (
       <footer
-        {...props}
+        {...remaining}
         ref={ref}
         className={dialogFooter({
           align,

package/src/dialog/DialogHeader.tsx

@@ -1,22 +1,48 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { forwardRef } from "react";
 
+import { Box, type BoxProps } from "../box/Box.js";
+import { type BoxAlignItems } from "../box/styles.js";
 import { dialogHeader } from "./styles.js";
 
-export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * @since 6.0.0 Extends the `BoxProps`.
+ */
+export interface DialogHeaderProps extends BoxProps {
+  /** @defaultValue `"center"` */
+  align?: BoxAlignItems;
+
+  /** @defaultValue `true` */
+  disableWrap?: boolean;
+}
 
 /**
  * The `DialogHeader` component should be rendered within a `Dialog` component
  * and generally contains the `DialogTitle`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ * @since 6.0.0 Extends the `Box` component.
  */
 export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
   function DialogHeader(props, ref) {
-    const { children, className, ...remaining } = props;
+    const {
+      align = "center",
+      disableWrap = true,
+      children,
+      className,
+      ...remaining
+    } = props;
 
     return (
-      <div {...remaining} ref={ref} className={dialogHeader({ className })}>
+      <Box
+        {...remaining}
+        align={align}
+        disableWrap={disableWrap}
+        ref={ref}
+        className={dialogHeader({ className })}
+      >
         {children}
-      </div>
+      </Box>
     );
   }
 );

package/src/dialog/DialogTitle.tsx

@@ -28,22 +28,23 @@ export interface DialogTitleProps extends TypographyProps {
  * The `DialogTitle` component is a simple `Typography` component wrapper with
  * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  function DialogTitle(
-    {
+  function DialogTitle(props, ref) {
+    const {
       as = "h2",
       type = "headline-4",
       margin = "none",
       children,
       className,
-      ...props
-    },
-    ref
-  ) {
+      ...remaining
+    } = props;
+
     return (
       <Typography
-        {...props}
+        {...remaining}
         ref={ref}
         as={as}
         type={type}

package/src/dialog/FixedDialog.tsx

@@ -8,7 +8,7 @@ import {
   type PositionAnchor,
 } from "../positioning/types.js";
 import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import { SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
+import { DEFAULT_SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type BaseDialogProps, Dialog } from "./Dialog.js";
 
@@ -40,16 +40,15 @@ const noop = (): void => {
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   FixedDialog,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { FixedDialog } from "@react-md/core/dialog/FixedDialog";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -86,13 +85,15 @@ const noop = (): void => {
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/dialog#fixed-dialog | FixedDialog Demos}
  */
 export const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(
   function FixedDialog(props, nodeRef) {
     const {
       fixedTo,
       style: propStyle,
-      classNames = SCALE_CLASSNAMES,
+      classNames = DEFAULT_SCALE_CLASSNAMES,
       children,
       anchor = TOP_INNER_RIGHT_ANCHOR,
       options,

package/src/dialog/styles.ts

@@ -7,9 +7,6 @@ import {
 import { bem } from "../utils/bem.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 
-const styles = bem("rmd-dialog");
-const containerStyles = bem("rmd-dialog-container");
-
 declare module "react" {
   interface CSSProperties {
     "--rmd-dialog-background-color"?: string;
@@ -25,6 +22,9 @@ declare module "react" {
   }
 }
 
+const styles = bem("rmd-dialog");
+const containerStyles = bem("rmd-dialog-container");
+
 export type DialogType = "full-page" | "centered" | "custom";
 
 /**
@@ -132,7 +132,13 @@ export interface DialogHeaderClassNameOptions {
   className?: string;
 }
 
-/** @since 6.0.0 */
+/**
+ * NOTE: The default `DialogHeader` component uses the `Box` component so the
+ * `box` class name utility function or `Box` component will probably be
+ * required if using this util
+ *
+ * @since 6.0.0
+ */
 export function dialogHeader(
   options: DialogHeaderClassNameOptions = {}
 ): string {
@@ -199,6 +205,12 @@ export function dialogFooter(
   );
 }
 
+/** @since 4.0.0 */
+export const DEFAULT_DIALOG_TIMEOUT = {
+  enter: 200,
+  exit: 150,
+} as const satisfies TransitionTimeout;
+
 /** @since 4.0.0 */
 export const DEFAULT_DIALOG_CLASSNAMES = {
   appear: "rmd-dialog--enter",
@@ -208,9 +220,3 @@ export const DEFAULT_DIALOG_CLASSNAMES = {
   exit: "rmd-dialog--exit",
   exitActive: "rmd-dialog--exit-active",
 } as const satisfies CSSTransitionClassNames;
-
-/** @since 4.0.0 */
-export const DEFAULT_DIALOG_TIMEOUT = {
-  enter: 200,
-  exit: 150,
-} as const satisfies TransitionTimeout;

package/src/divider/Divider.tsx

@@ -14,13 +14,15 @@ export interface DividerProps
 /**
  * @example Simple Example
  * ```tsx
- * import { Divider } from "@react-md/core";
+ * import { Divider } from "@react-md/core/divider/Divider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return  <Divider />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/divider | Divider Demos}
  */
 export const Divider = forwardRef<DividerElement, DividerProps>(
   function Divider(props, ref) {

package/src/divider/styles.ts

@@ -2,8 +2,6 @@ import { cnb } from "cnbuilder";
 
 import { bem } from "../utils/bem.js";
 
-const styles = bem("rmd-divider");
-
 declare module "react" {
   interface CSSProperties {
     "--rmd-divider-size"?: string | number;
@@ -16,6 +14,8 @@ declare module "react" {
   }
 }
 
+const styles = bem("rmd-divider");
+
 /** @since 6.0.0 */
 export interface DividerClassNameOptions {
   className?: string;

package/src/draggable/useDraggable.ts

@@ -349,6 +349,7 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
  * NOTE: This requires `touch-action: none` to be applied to the draggable
  * element to help prevent page scrolling on mobile devices.
  *
+ * @see {@link https://next.react-md.dev/components/use-draggable | useDraggable Demos}
  * @since 6.0.0
  */
 export function useDraggable<E extends HTMLElement>(