@jcsoftdev/ui 0.1.7 → 0.2.0

package/src/navigation/segmented/segmented.tsx

@@ -1,36 +1,124 @@
 "use client";
 
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import type { ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithRef, createContext, useContext } from "react";
 import { cn } from "../../utils/cn.js";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import {
+  type RovingDirection,
+  type RovingOrientation,
+  useRovingFocus,
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
 
-export interface SegmentedProps extends Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, "type"> {}
+type GetItemProps = ReturnType<typeof useRovingFocus>["getItemProps"];
+
+interface SegmentedContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  disabled: boolean;
+  getItemProps: GetItemProps | null;
+}
+
+const SegmentedContext = createContext<SegmentedContextValue | null>(null);
+
+export interface SegmentedProps
+  extends Omit<ComponentPropsWithRef<"div">, "dir" | "defaultValue" | "onChange"> {
+  /** Controlled selected value; an empty string means nothing selected. */
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onValueChange?: ((value: string) => void) | undefined;
+  /** Disables every item. */
+  disabled?: boolean | undefined;
+  /** Set to `false` to put every item in the tab order instead of roving. Defaults to `true`. */
+  rovingFocus?: boolean | undefined;
+  orientation?: RovingOrientation | undefined;
+  dir?: RovingDirection | undefined;
+  loop?: boolean | undefined;
+}
+
+/** Exclusive selector for 2-4 options. Like Radix `type="single"`, it uses the `radiogroup` role. */
+export function Segmented({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  rovingFocus = true,
+  orientation,
+  dir = "ltr",
+  loop = true,
+  ref,
+  onFocus,
+  ...props
+}: SegmentedProps) {
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange,
+  });
+  const roving = useRovingFocus({ orientation, dir, loop, activeId: value || null });
+  const { ref: rovingRef, onFocus: rovingOnFocus, tabIndex } = roving.rootProps;
+  const composedRef = useComposedRefs<HTMLDivElement>(rovingRef, ref);
 
-/** Exclusive selector for 2-4 options. `type="single"` gives Radix the `radiogroup` role. */
-export function Segmented({ className, ...props }: SegmentedProps) {
   return (
-    <ToggleGroupPrimitive.Root
-      type="single"
-      className={cn(
-        "inline-flex max-w-full overflow-x-auto rounded-button bg-seg-track p-0.75",
-        className,
-      )}
-      {...props}
-    />
+    <SegmentedContext.Provider
+      value={{ value, setValue, disabled, getItemProps: rovingFocus ? roving.getItemProps : null }}
+    >
+      <div
+        role="radiogroup"
+        dir={dir}
+        {...(rovingFocus ? { tabIndex } : {})}
+        {...props}
+        ref={composedRef}
+        onFocus={rovingFocus ? composeHandlers(onFocus, rovingOnFocus) : onFocus}
+        className={cn(
+          "inline-flex max-w-full overflow-x-auto rounded-button bg-seg-track p-0.75",
+          className,
+        )}
+      />
+    </SegmentedContext.Provider>
   );
 }
 
-export interface SegmentedItemProps
-  extends ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {}
+export interface SegmentedItemProps extends Omit<ComponentPropsWithRef<"button">, "value"> {
+  value: string;
+}
+
+export function SegmentedItem({
+  className,
+  value,
+  disabled: disabledProp,
+  onClick,
+  ...props
+}: SegmentedItemProps) {
+  const context = useContext(SegmentedContext);
+  if (!context) throw new Error("`SegmentedItem` must be used within `Segmented`");
+  const pressed = context.value === value;
+  const disabled = context.disabled || disabledProp;
+  const item = context.getItemProps?.<HTMLButtonElement>(value, {
+    disabled,
+    onKeyDown: props.onKeyDown,
+    onFocus: props.onFocus,
+  });
 
-export function SegmentedItem({ className, ...props }: SegmentedItemProps) {
   return (
-    <ToggleGroupPrimitive.Item
+    // biome-ignore lint/a11y/useSemanticElements: toggle-style radio; native inputs cannot be deselected
+    <button
+      type="button"
+      role="radio"
+      aria-checked={pressed}
+      data-state={pressed ? "on" : "off"}
+      data-disabled={disabled ? "" : undefined}
+      disabled={disabled}
+      {...props}
+      {...item}
+      onClick={composeHandlers(onClick, () => {
+        if (!disabled) context.setValue(pressed ? "" : value);
+      })}
       className={cn(
         "inline-flex h-control-sm shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-button px-3.5 @max-[420px]:px-2.5 text-control text-ink-2 hover:text-ink data-[state=on]:bg-seg-on data-[state=on]:text-ink data-[state=on]:shadow-sel",
         className,
       )}
-      {...props}
     />
   );
 }

package/src/navigation/stepper/index.ts

@@ -1 +1 @@
-export { type Step, Stepper, type StepperProps } from "./stepper.js";
+export { type Step, Stepper, type StepperPart, type StepperProps } from "./stepper.js";

package/src/navigation/stepper/stepper.tsx

@@ -1,3 +1,5 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export interface Step {
@@ -5,33 +7,43 @@ export interface Step {
   label: string;
 }
 
-export interface StepperProps {
+export type StepperPart = "root" | "step" | "current" | "marker" | "label" | "connector";
+
+export interface StepperProps extends Omit<ComponentPropsWithRef<"ol">, "children"> {
   steps: Step[];
   currentStepId: string;
-  className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<StepperPart>;
 }
 
 /** Step 1-N indicator for multi-stage flows. */
-export function Stepper({ steps, currentStepId, className }: StepperProps) {
+export function Stepper({ steps, currentStepId, className, classNames, ...props }: StepperProps) {
   return (
     <ol
+      {...props}
       className={cn(
         "@container/stepper flex min-w-0 flex-wrap items-center gap-1.5 text-meta text-ink-3",
+        classNames?.root,
         className,
       )}
     >
       {steps.map((step, index) => {
         const isCurrent = step.id === currentStepId;
         return (
-          <li key={step.id} className="flex min-w-0 items-center gap-1.5">
+          <li key={step.id} className={cn("flex min-w-0 items-center gap-1.5", classNames?.step)}>
             <span
               aria-current={isCurrent ? "step" : undefined}
-              className={cn("flex items-center gap-1.5", isCurrent && "text-ink")}
+              className={cn(
+                "flex items-center gap-1.5",
+                isCurrent && "text-ink",
+                isCurrent && classNames?.current,
+              )}
             >
               <span
                 className={cn(
                   "grid size-4.5 place-items-center rounded-pill border text-count",
                   isCurrent ? "border-accent-ink text-accent-ink" : "border-line-strong",
+                  classNames?.marker,
                 )}
               >
                 {index + 1}
@@ -41,6 +53,7 @@ export function Stepper({ steps, currentStepId, className }: StepperProps) {
                   "min-w-0 truncate",
                   !isCurrent && "@max-[420px]/stepper:sr-only",
                   isCurrent && "@max-[420px]/stepper:max-w-[40cqw]",
+                  classNames?.label,
                 )}
               >
                 {step.label}
@@ -49,7 +62,10 @@ export function Stepper({ steps, currentStepId, className }: StepperProps) {
             {index < steps.length - 1 && (
               <span
                 aria-hidden="true"
-                className="h-px w-4.5 bg-line-strong @max-[420px]/stepper:w-2.5"
+                className={cn(
+                  "h-px w-4.5 bg-line-strong @max-[420px]/stepper:w-2.5",
+                  classNames?.connector,
+                )}
               />
             )}
           </li>

package/src/navigation/tabs/tabs.tsx

@@ -1,55 +1,222 @@
 "use client";
 
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import type { ComponentPropsWithoutRef } from "react";
+import {
+  type ComponentPropsWithRef,
+  createContext,
+  type KeyboardEvent,
+  type MouseEvent,
+  useContext,
+  useId,
+} from "react";
 import { cn } from "../../utils/cn.js";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import {
+  type RovingDirection,
+  type RovingOrientation,
+  useRovingFocus,
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
 
-export interface TabsProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {}
+type TabsActivationMode = "automatic" | "manual";
+type GetItemProps = ReturnType<typeof useRovingFocus>["getItemProps"];
+
+interface TabsContextValue {
+  baseId: string;
+  value: string;
+  setValue: (value: string) => void;
+  orientation: RovingOrientation;
+  dir: RovingDirection;
+  activationMode: TabsActivationMode;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+const TabsListContext = createContext<GetItemProps | null>(null);
+
+function useTabsContext(part: string): TabsContextValue {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error(`\`${part}\` must be used within \`Tabs\``);
+  return context;
+}
+
+const triggerId = (baseId: string, value: string) => `${baseId}-trigger-${value}`;
+const contentId = (baseId: string, value: string) => `${baseId}-content-${value}`;
+
+export interface TabsProps
+  extends Omit<ComponentPropsWithRef<"div">, "dir" | "defaultValue" | "onChange"> {
+  /** Controlled active tab. */
+  value?: string | undefined;
+  /** Initial active tab when uncontrolled. */
+  defaultValue?: string | undefined;
+  onValueChange?: ((value: string) => void) | undefined;
+  orientation?: RovingOrientation | undefined;
+  dir?: RovingDirection | undefined;
+  /** `automatic` activates a tab on focus; `manual` waits for Enter, Space or a click. */
+  activationMode?: TabsActivationMode | undefined;
+}
 
 /**
- * To sync the active tab with a search param, use Radix's controlled pattern:
+ * To sync the active tab with a search param, use the controlled pattern:
  * `value={param}` + `onValueChange={(v) => updateParam(v)}`.
  */
-export function Tabs({ className, ...props }: TabsProps) {
-  return <TabsPrimitive.Root className={cn("flex min-w-0 flex-col", className)} {...props} />;
+export function Tabs({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  dir = "ltr",
+  activationMode = "automatic",
+  ...props
+}: TabsProps) {
+  const baseId = useId();
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange,
+  });
+
+  return (
+    <TabsContext.Provider value={{ baseId, value, setValue, orientation, dir, activationMode }}>
+      <div
+        dir={dir}
+        data-orientation={orientation}
+        className={cn("flex min-w-0 flex-col", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  );
 }
 
-export interface TabsListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List> {}
+export interface TabsListProps extends ComponentPropsWithRef<"div"> {
+  /** Wraps arrow navigation around the ends. Defaults to `true`. */
+  loop?: boolean | undefined;
+}
+
+export function TabsList({ className, loop = true, ref, onFocus, ...props }: TabsListProps) {
+  const context = useTabsContext("TabsList");
+  const roving = useRovingFocus({
+    orientation: context.orientation,
+    dir: context.dir,
+    loop,
+    activeId: context.value,
+  });
+  const { ref: rovingRef, onFocus: rovingOnFocus, tabIndex } = roving.rootProps;
+  const composedRef = useComposedRefs<HTMLDivElement>(rovingRef, ref);
 
-export function TabsList({ className, ...props }: TabsListProps) {
   return (
-    <TabsPrimitive.List
-      className={cn(
-        "@container/tabs flex max-w-full gap-0.5 overflow-x-auto overscroll-x-contain border-b-divider px-2",
-        className,
-      )}
-      {...props}
-    />
+    <TabsListContext.Provider value={roving.getItemProps}>
+      <div
+        role="tablist"
+        aria-orientation={context.orientation}
+        tabIndex={tabIndex}
+        {...props}
+        ref={composedRef}
+        onFocus={composeHandlers(onFocus, rovingOnFocus)}
+        className={cn(
+          "@container/tabs flex max-w-full gap-0.5 overflow-x-auto overscroll-x-contain border-b-divider px-2",
+          className,
+        )}
+      />
+    </TabsListContext.Provider>
   );
 }
 
-export interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+export interface TabsTriggerProps extends Omit<ComponentPropsWithRef<"button">, "value"> {
+  value: string;
   /** Optional record count shown after the label. */
   count?: number;
 }
 
-export function TabsTrigger({ className, count, children, ...props }: TabsTriggerProps) {
+export function TabsTrigger({
+  className,
+  count,
+  children,
+  value,
+  disabled = false,
+  onMouseDown,
+  onKeyDown,
+  onFocus,
+  ...props
+}: TabsTriggerProps) {
+  const context = useTabsContext("TabsTrigger");
+  const getItemProps = useContext(TabsListContext);
+  if (!getItemProps) throw new Error("`TabsTrigger` must be used within `TabsList`");
+  const selected = value === context.value;
+
+  const item = getItemProps<HTMLButtonElement>(value, {
+    disabled,
+    onKeyDown: composeHandlers(onKeyDown, (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled || event.target !== event.currentTarget) return;
+      if (event.key === " " || event.key === "Enter") context.setValue(value);
+    }),
+    onFocus: composeHandlers(onFocus, () => {
+      if (!selected && !disabled && context.activationMode !== "manual") context.setValue(value);
+    }),
+  });
+
   return (
-    <TabsPrimitive.Trigger
+    <button
+      type="button"
+      role="tab"
+      aria-selected={selected}
+      aria-controls={contentId(context.baseId, value)}
+      data-state={selected ? "active" : "inactive"}
+      data-orientation={context.orientation}
+      data-disabled={disabled ? "" : undefined}
+      disabled={disabled}
+      id={triggerId(context.baseId, value)}
+      {...props}
+      {...item}
+      onMouseDown={composeHandlers(onMouseDown, (event: MouseEvent<HTMLButtonElement>) => {
+        if (!disabled && event.button === 0 && !event.ctrlKey) {
+          event.currentTarget.focus();
+          context.setValue(value);
+        } else {
+          event.preventDefault();
+        }
+      })}
       className={cn(
         "inline-flex shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap border-b-2 border-transparent px-2.5 @max-[420px]/tabs:px-2 pt-2.75 pb-2.5 text-control text-ink-3 hover:text-ink focus-visible:-outline-offset-2 data-[state=active]:border-accent-word data-[state=active]:text-ink",
         className,
       )}
-      {...props}
     >
       {children}
       {count !== undefined && <span className="text-count text-ink-3">{count}</span>}
-    </TabsPrimitive.Trigger>
+    </button>
   );
 }
 
-export interface TabsContentProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}
+export interface TabsContentProps extends Omit<ComponentPropsWithRef<"div">, "value"> {
+  value: string;
+  /** Keeps the panel mounted (hidden) while inactive. */
+  forceMount?: boolean | undefined;
+}
+
+export function TabsContent({
+  className,
+  value,
+  forceMount,
+  children,
+  ...props
+}: TabsContentProps) {
+  const context = useTabsContext("TabsContent");
+  const selected = value === context.value;
+  const present = forceMount || selected;
+  if (!present) return null;
 
-export function TabsContent({ className, ...props }: TabsContentProps) {
-  return <TabsPrimitive.Content className={cn(className)} {...props} />;
+  return (
+    <div
+      data-state={selected ? "active" : "inactive"}
+      data-orientation={context.orientation}
+      role="tabpanel"
+      aria-labelledby={triggerId(context.baseId, value)}
+      id={contentId(context.baseId, value)}
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: WAI-ARIA tabpanels are focusable so keyboard users can reach the content
+      tabIndex={0}
+      {...props}
+      className={cn(className)}
+    >
+      {children}
+    </div>
+  );
 }

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

@@ -1,7 +1,5 @@
 "use client";
 
-import * as MenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check } from "lucide-react";
 import {
   type ComponentPropsWithoutRef,
   createContext,
@@ -16,6 +14,8 @@ import {
   useRef,
   useState,
 } from "react";
+import { Check } from "../../icons/index.js";
+import * as MenuPrimitive from "../../primitives/menu/menu.js";
 import { cn } from "../../utils/cn.js";
 
 interface ContextMenuState {
@@ -73,7 +73,7 @@ export function ContextMenu({
   return (
     <ContextMenuContext.Provider value={state}>
       <MenuPrimitive.Root open={open} onOpenChange={change} modal={false}>
-        <MenuPrimitive.Trigger asChild>
+        <MenuPrimitive.Anchor asChild>
           <span
             aria-hidden="true"
             tabIndex={-1}
@@ -86,7 +86,7 @@ export function ContextMenu({
               pointerEvents: "none",
             }}
           />
-        </MenuPrimitive.Trigger>
+        </MenuPrimitive.Anchor>
         {children}
       </MenuPrimitive.Root>
     </ContextMenuContext.Provider>
@@ -157,7 +157,7 @@ export function ContextMenuTrigger({
 }
 
 export interface ContextMenuContentProps
-  extends Omit<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>, "side" | "align"> {
+  extends Omit<MenuPrimitive.MenuContentProps, "side" | "align"> {
   /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
   container?: HTMLElement | null;
 }
@@ -182,7 +182,7 @@ export function ContextMenuContent({
           event.preventDefault();
         }}
         className={cn(
-          "z-85 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-popover border-card surface-overlay bg-surface-overlay p-1.5 text-ink shadow-overlay",
+          "z-85 max-h-(--ui-popper-available-height) min-w-48 max-w-(--ui-popper-available-width) overflow-y-auto rounded-popover border-card surface-overlay bg-surface-overlay p-1.5 text-ink shadow-overlay",
           className,
         )}
         {...props}
@@ -194,7 +194,7 @@ export function ContextMenuContent({
 const itemBase =
   "relative flex min-h-control-sm w-full cursor-pointer select-none items-center gap-density-sm rounded-button px-control-x text-body outline-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 [&_svg]:size-4 [&_svg]:shrink-0";
 
-export interface ContextMenuItemProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.Item> {
+export interface ContextMenuItemProps extends MenuPrimitive.MenuItemProps {
   /** Destructive action styling. */
   tone?: "default" | "danger";
 }
@@ -208,9 +208,7 @@ export function ContextMenuItem({ className, tone = "default", ...props }: Conte
   );
 }
 
-export type ContextMenuCheckboxItemProps = ComponentPropsWithoutRef<
-  typeof MenuPrimitive.CheckboxItem
->;
+export type ContextMenuCheckboxItemProps = MenuPrimitive.MenuCheckboxItemProps;
 
 export function ContextMenuCheckboxItem({
   className,
@@ -238,10 +236,7 @@ export function ContextMenuLabel({ className, ...props }: HTMLAttributes<HTMLDiv
   );
 }
 
-export function ContextMenuSeparator({
-  className,
-  ...props
-}: ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>) {
+export function ContextMenuSeparator({ className, ...props }: ComponentPropsWithoutRef<"div">) {
   return <MenuPrimitive.Separator className={cn("my-1 h-px bg-divider", className)} {...props} />;
 }
 

package/src/overlays/dialog/dialog.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef, HTMLAttributes } from "react";
 import { useUiStrings } from "../../i18n/index.js";
+import { X } from "../../icons/index.js";
+import * as DialogPrimitive from "../../primitives/dialog/dialog.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   PreviousFocusProvider,
@@ -16,11 +17,7 @@ import {
  * Wraps `DialogPrimitive.Root` so focus is restored on close even when the
  * dialog is opened in a controlled way, without its own `DialogTrigger`.
  */
-export function Dialog({
-  open,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {
+export function Dialog({ open, children, ...props }: DialogPrimitive.DialogRootProps) {
   const focusRef = useCapturePreviousFocus(open);
   return (
     <DialogPrimitive.Root open={open} {...props}>
@@ -39,8 +36,11 @@ const widthClasses: Record<DialogWidth, string> = {
   lg: "w-[min(780px,100%)]",
 };
 
-export interface DialogContentProps
-  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+export type DialogContentPart = "root" | "overlay" | "close";
+
+export interface DialogContentProps extends DialogPrimitive.DialogContentProps {
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the content and is merged last. */
+  classNames?: ClassNames<DialogContentPart>;
   width?: DialogWidth;
   /**
    * While a mutation is in flight: `Escape`, outside click and the close button
@@ -55,6 +55,7 @@ export interface DialogContentProps
 
 export function DialogContent({
   className,
+  classNames,
   width = "md",
   blocking = false,
   closeLabel,
@@ -70,11 +71,12 @@ export function DialogContent({
   const strings = useUiStrings();
   return (
     <DialogPrimitive.Portal container={container}>
-      <DialogPrimitive.Overlay className="fixed inset-0 z-70 bg-scrim" />
+      <DialogPrimitive.Overlay className={cn("fixed inset-0 z-70 bg-scrim", classNames?.overlay)} />
       <DialogPrimitive.Content
         className={cn(
-          "@container/dialog fixed top-[9dvh] left-1/2 z-70 flex max-h-[84dvh] max-w-full -translate-x-1/2 flex-col overflow-auto rounded-dialog surface-overlay shadow-overlay",
+          "@container/dialog fixed top-[9dvh] left-1/2 z-70 flex max-h-[84dvh] max-w-full -translate-x-1/2 flex-col overflow-auto rounded-dialog outline-none surface-overlay shadow-overlay",
           widthClasses[width],
+          classNames?.root,
           className,
         )}
         onEscapeKeyDown={(event) => {
@@ -99,7 +101,10 @@ export function DialogContent({
         {!blocking && (
           <DialogPrimitive.Close
             aria-label={closeLabel ?? strings.close}
-            className="absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5"
+            className={cn(
+              "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5",
+              classNames?.close,
+            )}
           >
             <X aria-hidden="true" className="size-4" />
           </DialogPrimitive.Close>
@@ -130,6 +135,13 @@ export function DialogTitle({
   );
 }
 
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>) {
+  return <DialogPrimitive.Description className={cn("m-0 text-ink-2", className)} {...props} />;
+}
+
 export function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col gap-4 p-4.5", className)} {...props} />;
 }

package/src/overlays/dialog/index.ts

@@ -3,7 +3,9 @@ export {
   DialogBody,
   DialogClose,
   DialogContent,
+  type DialogContentPart,
   type DialogContentProps,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,