raft-ui 0.0.4 → 0.0.6

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,215 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentPropsWithRef } from "react";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import { Button, type ButtonProps } from "../button/index";
+
+const alertDialog = tv({
+  slots: {
+    overlay: [
+      "fixed inset-0 z-50",
+      "transition-opacity duration-100",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    ],
+    content: [
+      "fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+      "outline-none transition-[opacity,transform] duration-100",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    ],
+    header: ["grid min-w-0 gap-1"],
+    media: ["flex size-10 shrink-0 items-center justify-center"],
+    body: ["min-w-0"],
+    footer: ["flex items-center justify-end gap-3"],
+    title: ["m-0 min-w-0 text-foreground-strong"],
+    description: ["m-0 text-foreground-muted"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        overlay: ["bg-black/60"],
+        content: ["gap-4 border-2 border-line-strong bg-layer-panel p-6 shadow-xl"],
+        media: ["border-2 border-line-strong bg-warning-base text-foreground-inverse"],
+        title: ["font-heading text-lg leading-none font-bold uppercase"],
+        description: ["font-sans text-sm leading-5 text-foreground/60"],
+      },
+      elegant: {
+        overlay: ["bg-black/20"],
+        content: [
+          "gap-5 rounded-lg bg-layer-popover p-5",
+          "shadow-[0_24px_48px_-24px_oklch(0.21_0.006_285_/_0.30),0_0_0_1px_oklch(0.21_0.006_285_/_0.08),0_1px_2px_oklch(0.21_0.006_285_/_0.08)]",
+        ],
+        media: ["rounded-md bg-danger-lighter text-danger-base"],
+        title: ["font-sans text-base leading-5 font-medium tracking-[-0.005em]"],
+        description: [
+          "font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]",
+        ],
+      },
+    },
+    size: {
+      sm: {
+        content: ["max-w-sm"],
+      },
+      md: {
+        content: ["max-w-md"],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+export type AlertDialogProps = BaseDialog.Root.Props;
+
+export function AlertDialog(props: AlertDialogProps) {
+  return <BaseDialog.Root data-slot="alert-dialog" {...props} />;
+}
+
+export type AlertDialogTriggerProps = BaseDialog.Trigger.Props;
+
+export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <BaseDialog.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+export type AlertDialogPortalProps = BaseDialog.Portal.Props;
+
+export function AlertDialogPortal(props: AlertDialogPortalProps) {
+  return <BaseDialog.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+export type AlertDialogOverlayProps = StyledProps<BaseDialog.Backdrop.Props>;
+
+export function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
+  const theme = useThemeFamily();
+  const { overlay } = alertDialog({ theme });
+
+  return (
+    <BaseDialog.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={overlay({ className })}
+      {...props}
+    />
+  );
+}
+
+export type AlertDialogContentProps = StyledProps<BaseDialog.Popup.Props> & {
+  portalProps?: AlertDialogPortalProps;
+  overlay?: false | AlertDialogOverlayProps;
+  size?: "sm" | "md";
+};
+
+export function AlertDialogContent({
+  className,
+  children,
+  portalProps,
+  overlay,
+  size,
+  ...props
+}: AlertDialogContentProps) {
+  const theme = useThemeFamily();
+  const { content } = alertDialog({ theme, size });
+
+  return (
+    <AlertDialogPortal {...portalProps}>
+      {overlay === false ? null : <AlertDialogOverlay {...overlay} />}
+      <BaseDialog.Popup
+        data-slot="alert-dialog-content"
+        className={content({ className })}
+        {...props}
+        role="alertdialog"
+      >
+        {children}
+      </BaseDialog.Popup>
+    </AlertDialogPortal>
+  );
+}
+
+export type AlertDialogHeaderProps = ComponentPropsWithRef<"div">;
+
+export function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
+  const theme = useThemeFamily();
+  const { header } = alertDialog({ theme });
+
+  return <div data-slot="alert-dialog-header" className={header({ className })} {...props} />;
+}
+
+export type AlertDialogMediaProps = ComponentPropsWithRef<"div">;
+
+export function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {
+  const theme = useThemeFamily();
+  const { media } = alertDialog({ theme });
+
+  return <div data-slot="alert-dialog-media" className={media({ className })} {...props} />;
+}
+
+export type AlertDialogBodyProps = ComponentPropsWithRef<"div">;
+
+export function AlertDialogBody({ className, ...props }: AlertDialogBodyProps) {
+  const theme = useThemeFamily();
+  const { body } = alertDialog({ theme });
+
+  return <div data-slot="alert-dialog-body" className={body({ className })} {...props} />;
+}
+
+export type AlertDialogFooterProps = ComponentPropsWithRef<"div">;
+
+export function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
+  const theme = useThemeFamily();
+  const { footer } = alertDialog({ theme });
+
+  return <div data-slot="alert-dialog-footer" className={footer({ className })} {...props} />;
+}
+
+export type AlertDialogTitleProps = StyledProps<BaseDialog.Title.Props>;
+
+export function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = alertDialog({ theme });
+
+  return (
+    <BaseDialog.Title data-slot="alert-dialog-title" className={title({ className })} {...props} />
+  );
+}
+
+export type AlertDialogDescriptionProps = StyledProps<BaseDialog.Description.Props>;
+
+export function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = alertDialog({ theme });
+
+  return (
+    <BaseDialog.Description
+      data-slot="alert-dialog-description"
+      className={description({ className })}
+      {...props}
+    />
+  );
+}
+
+export type AlertDialogActionProps = ButtonProps;
+
+export function AlertDialogAction(props: AlertDialogActionProps) {
+  return <Button data-slot="alert-dialog-action" {...props} />;
+}
+
+export type AlertDialogCancelProps = Omit<BaseDialog.Close.Props, "render"> &
+  Pick<ButtonProps, "variant" | "size"> & {
+    className?: string;
+  };
+
+export function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "sm",
+  ...props
+}: AlertDialogCancelProps) {
+  return (
+    <BaseDialog.Close
+      data-slot="alert-dialog-cancel"
+      render={<Button className={className} variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}

package/src/components/alert-dialog/index.ts

@@ -0,0 +1,30 @@
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogMediaProps,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+} from "./alert-dialog";

package/src/components/avatar/avatar.tsx

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef } from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import type { StyledProps } from "../../lib/styled-props";
 
 // Avatar family built on Base UI's Avatar primitive. Compose `<AvatarImage>`,
 // `<AvatarFallback>`, and `<AvatarBadge>` as children; with no children a

package/src/components/avatar/index.ts

@@ -6,7 +6,7 @@ export {
   AvatarBadge,
   AvatarGroup,
   AvatarGroupCount,
-} from "./avatar.tsx";
+} from "./avatar";
 export type {
   AvatarProps,
   AvatarImageProps,
@@ -14,4 +14,4 @@ export type {
   AvatarBadgeProps,
   AvatarGroupProps,
   AvatarGroupCountProps,
-} from "./avatar.tsx";
+} from "./avatar";

package/src/components/badge/badge.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 export const badge = tv({
   slots: {

package/src/components/badge/index.ts

@@ -1,2 +1,2 @@
-export { Badge } from "./badge.tsx";
-export type { BadgeProps } from "./badge.tsx";
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";

package/src/components/banner/banner.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const banner = tv({
   slots: {

package/src/components/banner/index.ts

@@ -1,8 +1,8 @@
-export { Banner, BannerAction, BannerDescription, BannerTitle } from "./banner.tsx";
+export { Banner, BannerAction, BannerDescription, BannerTitle } from "./banner";
 export type {
   BannerActionProps,
   BannerDescriptionProps,
   BannerProps,
   BannerStatus,
   BannerTitleProps,
-} from "./banner.tsx";
+} from "./banner";

package/src/components/bottom-sheet/bottom-sheet.tsx

@@ -1,9 +1,9 @@
 import { Dialog } from "@base-ui/react/dialog";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 // Mobile bottom sheet, composed from base-ui Dialog parts and slot parts
 // (`BottomSheetTrigger`, `BottomSheetContent`, `BottomSheetHeader`,

package/src/components/bottom-sheet/index.ts

@@ -8,7 +8,7 @@ export {
   BottomSheetFooter,
   BottomSheetTitle,
   BottomSheetDescription,
-} from "./bottom-sheet.tsx";
+} from "./bottom-sheet";
 export type {
   BottomSheetProps,
   BottomSheetTriggerProps,
@@ -19,4 +19,4 @@ export type {
   BottomSheetFooterProps,
   BottomSheetTitleProps,
   BottomSheetDescriptionProps,
-} from "./bottom-sheet.tsx";
+} from "./bottom-sheet";

package/src/components/button/button.tsx

@@ -1,9 +1,9 @@
 import { Button as BaseButton } from "@base-ui/react/button";
 import type { ReactElement } from "react";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import { Spinner } from "../spinner/index.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import { Spinner } from "../spinner/index";
 
 export const buttonVariants = tv({
   slots: {
@@ -195,7 +195,9 @@ export const buttonVariants = tv({
     {
       theme: "brutal",
       variant: "warning",
-      class: { root: "bg-warning-base text-black hover:bg-warning-base" },
+      class: {
+        root: "bg-[oklch(0.785_0.123_50.11)] text-black hover:bg-[oklch(0.785_0.123_50.11)]",
+      },
     },
     {
       theme: "brutal",

package/src/components/button/index.ts

@@ -1,2 +1,2 @@
-export { Button, buttonVariants } from "./button.tsx";
-export type { ButtonProps } from "./button.tsx";
+export { Button, buttonVariants } from "./button";
+export type { ButtonProps } from "./button";

package/src/components/checkbox/checkbox-indicator.tsx

@@ -1,7 +1,7 @@
 import { Check, Minus } from "lucide-react";
 import type { ComponentPropsWithRef } from "react";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const checkboxIndicator = tv({
   slots: {

package/src/components/checkbox/checkbox.tsx

@@ -1,9 +1,9 @@
 import { useId } from "react";
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { CheckboxIndicator } from "./checkbox-indicator.tsx";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { CheckboxIndicator } from "./checkbox-indicator";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const checkbox = tv({
   slots: {

package/src/components/checkbox/index.ts

@@ -1,2 +1,2 @@
-export { Checkbox } from "./checkbox.tsx";
-export type { CheckboxProps } from "./checkbox.tsx";
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox";

package/src/components/combobox/combobox.tsx

@@ -1,10 +1,10 @@
 import { createContext, use, useState, type ComponentPropsWithRef } from "react";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { Check, X } from "lucide-react";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import { Button } from "../button/index.ts";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import { Button } from "../button/index";
 
 const combobox = tv({
   slots: {

package/src/components/combobox/index.ts

@@ -49,4 +49,4 @@ export {
   type ComboboxTriggerIndicatorProps,
   type ComboboxTriggerProps,
   type ComboboxValueProps,
-} from "./combobox.tsx";
+} from "./combobox";

package/src/components/context-menu/context-menu.tsx

@@ -1,9 +1,9 @@
 import { ContextMenu as BaseContextMenu } from "@base-ui/react";
 import type { ComponentPropsWithRef } from "react";
-import { tv } from "../../lib/tv.ts";
-import { Kbd, type KbdProps } from "../kbd/index.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { Kbd, type KbdProps } from "../kbd/index";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const contextMenu = tv({
   slots: {

package/src/components/context-menu/index.ts

@@ -14,7 +14,7 @@ export {
   ContextMenuSubmenu,
   ContextMenuSubmenuTrigger,
   ContextMenuTrigger,
-} from "./context-menu.tsx";
+} from "./context-menu";
 export type {
   ContextMenuCheckboxItemIndicatorProps,
   ContextMenuCheckboxItemProps,
@@ -31,4 +31,4 @@ export type {
   ContextMenuSubmenuProps,
   ContextMenuSubmenuTriggerProps,
   ContextMenuTriggerProps,
-} from "./context-menu.tsx";
+} from "./context-menu";

package/src/components/conversation-preview-card/conversation-preview-card.tsx

@@ -1,8 +1,8 @@
 import { Button as BaseButton } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const conversationPreviewCard = tv({
   slots: {

package/src/components/conversation-preview-card/index.ts

@@ -13,7 +13,7 @@ export {
   ConversationPreviewCardPreviewLeading,
   ConversationPreviewCardSecondaryPreview,
   ConversationPreviewCardTimestamp,
-} from "./conversation-preview-card.tsx";
+} from "./conversation-preview-card";
 export type {
   ConversationPreviewCardActionProps,
   ConversationPreviewCardAuthorNameProps,
@@ -29,4 +29,4 @@ export type {
   ConversationPreviewCardProps,
   ConversationPreviewCardSecondaryPreviewProps,
   ConversationPreviewCardTimestampProps,
-} from "./conversation-preview-card.tsx";
+} from "./conversation-preview-card";

package/src/components/description-list/description-list.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const descriptionList = tv({
   slots: {

package/src/components/description-list/index.ts

@@ -4,11 +4,11 @@ export {
   DescriptionItem,
   DescriptionList,
   DescriptionTerm,
-} from "./description-list.tsx";
+} from "./description-list";
 export type {
   DescriptionActionProps,
   DescriptionDetailsProps,
   DescriptionItemProps,
   DescriptionListProps,
   DescriptionTermProps,
-} from "./description-list.tsx";
+} from "./description-list";

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,152 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentPropsWithRef } from "react";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+
+const dialog = tv({
+  slots: {
+    overlay: [
+      "fixed inset-0 z-50",
+      "transition-opacity duration-100",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    ],
+    content: [
+      "fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2",
+      "outline-none transition-[opacity,transform] duration-100",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    ],
+    header: ["flex min-w-0 flex-col gap-1"],
+    body: ["min-w-0"],
+    footer: ["flex items-center justify-end gap-3"],
+    title: ["m-0 min-w-0 text-foreground-strong"],
+    description: ["m-0 text-foreground-muted"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        overlay: ["bg-black/60"],
+        content: ["gap-4 border-2 border-line-strong bg-layer-panel p-6 shadow-xl"],
+        title: ["font-heading text-lg leading-none font-bold uppercase"],
+        description: ["font-sans text-sm leading-5 text-foreground/60"],
+      },
+      elegant: {
+        overlay: ["bg-black/20"],
+        content: [
+          "gap-5 rounded-lg bg-layer-popover p-5",
+          "shadow-[0_24px_48px_-24px_oklch(0.21_0.006_285_/_0.30),0_0_0_1px_oklch(0.21_0.006_285_/_0.08),0_1px_2px_oklch(0.21_0.006_285_/_0.08)]",
+        ],
+        title: ["font-sans text-base leading-5 font-medium tracking-[-0.005em]"],
+        description: [
+          "font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]",
+        ],
+      },
+    },
+  },
+});
+
+export type DialogProps = BaseDialog.Root.Props;
+
+export function Dialog(props: DialogProps) {
+  return <BaseDialog.Root data-slot="dialog" {...props} />;
+}
+
+export type DialogTriggerProps = BaseDialog.Trigger.Props;
+
+export function DialogTrigger(props: DialogTriggerProps) {
+  return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export type DialogPortalProps = BaseDialog.Portal.Props;
+
+export function DialogPortal(props: DialogPortalProps) {
+  return <BaseDialog.Portal data-slot="dialog-portal" {...props} />;
+}
+
+export type DialogOverlayProps = StyledProps<BaseDialog.Backdrop.Props>;
+
+export function DialogOverlay({ className, ...props }: DialogOverlayProps) {
+  const theme = useThemeFamily();
+  const { overlay } = dialog({ theme });
+  return (
+    <BaseDialog.Backdrop data-slot="dialog-overlay" className={overlay({ className })} {...props} />
+  );
+}
+
+export type DialogContentProps = StyledProps<BaseDialog.Popup.Props> & {
+  portalProps?: DialogPortalProps;
+  overlay?: false | DialogOverlayProps;
+};
+
+export function DialogContent({
+  className,
+  children,
+  portalProps,
+  overlay,
+  ...props
+}: DialogContentProps) {
+  const theme = useThemeFamily();
+  const { content } = dialog({ theme });
+
+  return (
+    <DialogPortal {...portalProps}>
+      {overlay === false ? null : <DialogOverlay {...overlay} />}
+      <BaseDialog.Popup data-slot="dialog-content" className={content({ className })} {...props}>
+        {children}
+      </BaseDialog.Popup>
+    </DialogPortal>
+  );
+}
+
+export type DialogCloseProps = BaseDialog.Close.Props;
+
+export function DialogClose(props: DialogCloseProps) {
+  return <BaseDialog.Close data-slot="dialog-close" {...props} />;
+}
+
+export type DialogHeaderProps = ComponentPropsWithRef<"div">;
+
+export function DialogHeader({ className, ...props }: DialogHeaderProps) {
+  const theme = useThemeFamily();
+  const { header } = dialog({ theme });
+  return <div data-slot="dialog-header" className={header({ className })} {...props} />;
+}
+
+export type DialogBodyProps = ComponentPropsWithRef<"div">;
+
+export function DialogBody({ className, ...props }: DialogBodyProps) {
+  const theme = useThemeFamily();
+  const { body } = dialog({ theme });
+  return <div data-slot="dialog-body" className={body({ className })} {...props} />;
+}
+
+export type DialogFooterProps = ComponentPropsWithRef<"div">;
+
+export function DialogFooter({ className, ...props }: DialogFooterProps) {
+  const theme = useThemeFamily();
+  const { footer } = dialog({ theme });
+  return <div data-slot="dialog-footer" className={footer({ className })} {...props} />;
+}
+
+export type DialogTitleProps = StyledProps<BaseDialog.Title.Props>;
+
+export function DialogTitle({ className, ...props }: DialogTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = dialog({ theme });
+  return <BaseDialog.Title data-slot="dialog-title" className={title({ className })} {...props} />;
+}
+
+export type DialogDescriptionProps = StyledProps<BaseDialog.Description.Props>;
+
+export function DialogDescription({ className, ...props }: DialogDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = dialog({ theme });
+  return (
+    <BaseDialog.Description
+      data-slot="dialog-description"
+      className={description({ className })}
+      {...props}
+    />
+  );
+}