@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/navigation/segmented/segmented.js

@@ -1,30 +1,95 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { createContext, useContext } from "react";
 import { cn } from "../../utils/cn.js";
-function Segmented({ className, ...props }) {
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import {
+  useRovingFocus
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+const SegmentedContext = createContext(null);
+function Segmented({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  rovingFocus = true,
+  orientation,
+  dir = "ltr",
+  loop = true,
+  ref,
+  onFocus,
+  ...props
+}) {
+  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(rovingRef, ref);
   return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
+    SegmentedContext.Provider,
     {
-      type: "single",
-      className: cn(
-        "inline-flex max-w-full overflow-x-auto rounded-button bg-seg-track p-0.75",
-        className
-      ),
-      ...props
+      value: { value, setValue, disabled, getItemProps: rovingFocus ? roving.getItemProps : null },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          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
+          )
+        }
+      )
     }
   );
 }
-function SegmentedItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      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
-    }
+function SegmentedItem({
+  className,
+  value,
+  disabled: disabledProp,
+  onClick,
+  ...props
+}) {
+  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?.(value, {
+    disabled,
+    onKeyDown: props.onKeyDown,
+    onFocus: props.onFocus
+  });
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: toggle-style radio; native inputs cannot be deselected
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": pressed,
+        "data-state": pressed ? "on" : "off",
+        "data-disabled": disabled ? "" : void 0,
+        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
+        )
+      }
+    )
   );
 }
 export {

package/dist/navigation/stepper/index.d.ts

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

package/dist/navigation/stepper/stepper.d.ts

@@ -1,11 +1,15 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface Step {
     id: string;
     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 declare function Stepper({ steps, currentStepId, className }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ steps, currentStepId, className, classNames, ...props }: StepperProps): import("react").JSX.Element;

package/dist/navigation/stepper/stepper.js

@@ -1,28 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-function Stepper({ steps, currentStepId, className }) {
+function Stepper({ steps, currentStepId, className, classNames, ...props }) {
   return /* @__PURE__ */ jsx(
     "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
       ),
       children: steps.map((step, index) => {
         const isCurrent = step.id === currentStepId;
-        return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-center gap-1.5", children: [
+        return /* @__PURE__ */ jsxs("li", { className: cn("flex min-w-0 items-center gap-1.5", classNames?.step), children: [
           /* @__PURE__ */ jsxs(
             "span",
             {
               "aria-current": isCurrent ? "step" : void 0,
-              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
+              ),
               children: [
                 /* @__PURE__ */ jsx(
                   "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"
+                      isCurrent ? "border-accent-ink text-accent-ink" : "border-line-strong",
+                      classNames?.marker
                     ),
                     children: index + 1
                   }
@@ -33,7 +40,8 @@ function Stepper({ steps, currentStepId, className }) {
                     className: cn(
                       "min-w-0 truncate",
                       !isCurrent && "@max-[420px]/stepper:sr-only",
-                      isCurrent && "@max-[420px]/stepper:max-w-[40cqw]"
+                      isCurrent && "@max-[420px]/stepper:max-w-[40cqw]",
+                      classNames?.label
                     ),
                     children: step.label
                   }
@@ -45,7 +53,10 @@ function Stepper({ steps, currentStepId, className }) {
             "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
+              )
             }
           )
         ] }, step.id);

package/dist/navigation/tabs/tabs.d.ts

@@ -1,20 +1,37 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import type { ComponentPropsWithoutRef } from "react";
-export interface TabsProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+import { type ComponentPropsWithRef } from "react";
+import { type RovingDirection, type RovingOrientation } from "../../utils/roving-focus.js";
+type TabsActivationMode = "automatic" | "manual";
+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 declare function Tabs({ className, ...props }: TabsProps): import("react").JSX.Element;
-export interface TabsListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+export declare function Tabs({ className, value: valueProp, defaultValue, onValueChange, orientation, dir, activationMode, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabsListProps extends ComponentPropsWithRef<"div"> {
+    /** Wraps arrow navigation around the ends. Defaults to `true`. */
+    loop?: boolean | undefined;
 }
-export declare function TabsList({ className, ...props }: TabsListProps): import("react").JSX.Element;
-export interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+export declare function TabsList({ className, loop, ref, onFocus, ...props }: TabsListProps): import("react").JSX.Element;
+export interface TabsTriggerProps extends Omit<ComponentPropsWithRef<"button">, "value"> {
+    value: string;
     /** Optional record count shown after the label. */
     count?: number;
 }
-export declare function TabsTrigger({ className, count, children, ...props }: TabsTriggerProps): import("react").JSX.Element;
-export interface TabsContentProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+export declare function TabsTrigger({ className, count, children, value, disabled, onMouseDown, onKeyDown, onFocus, ...props }: TabsTriggerProps): import("react").JSX.Element;
+export interface TabsContentProps extends Omit<ComponentPropsWithRef<"div">, "value"> {
+    value: string;
+    /** Keeps the panel mounted (hidden) while inactive. */
+    forceMount?: boolean | undefined;
 }
-export declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
+export declare function TabsContent({ className, value, forceMount, children, ...props }: TabsContentProps): import("react").JSX.Element | null;
+export {};

package/dist/navigation/tabs/tabs.js

@@ -1,31 +1,128 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  createContext,
+  useContext,
+  useId
+} from "react";
 import { cn } from "../../utils/cn.js";
-function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { className: cn("flex min-w-0 flex-col", className), ...props });
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import {
+  useRovingFocus
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+const TabsContext = createContext(null);
+const TabsListContext = createContext(null);
+function useTabsContext(part) {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error(`\`${part}\` must be used within \`Tabs\``);
+  return context;
 }
-function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.List,
+const triggerId = (baseId, value) => `${baseId}-trigger-${value}`;
+const contentId = (baseId, value) => `${baseId}-content-${value}`;
+function Tabs({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  dir = "ltr",
+  activationMode = "automatic",
+  ...props
+}) {
+  const baseId = useId();
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { baseId, value, setValue, orientation, dir, activationMode }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      dir,
+      "data-orientation": orientation,
+      className: cn("flex min-w-0 flex-col", className),
+      ...props
+    }
+  ) });
+}
+function TabsList({ className, loop = true, ref, onFocus, ...props }) {
+  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(rovingRef, ref);
+  return /* @__PURE__ */ jsx(TabsListContext.Provider, { value: roving.getItemProps, children: /* @__PURE__ */ jsx(
+    "div",
     {
+      role: "tablist",
+      "aria-orientation": context.orientation,
+      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
-      ),
-      ...props
+      )
     }
-  );
+  ) });
 }
-function TabsTrigger({ className, count, children, ...props }) {
+function TabsTrigger({
+  className,
+  count,
+  children,
+  value,
+  disabled = false,
+  onMouseDown,
+  onKeyDown,
+  onFocus,
+  ...props
+}) {
+  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(value, {
+    disabled,
+    onKeyDown: composeHandlers(onKeyDown, (event) => {
+      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 /* @__PURE__ */ jsxs(
-    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 ? "" : void 0,
+      disabled,
+      id: triggerId(context.baseId, value),
+      ...props,
+      ...item,
+      onMouseDown: composeHandlers(onMouseDown, (event) => {
+        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: [
         children,
         count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-count text-ink-3", children: count })
@@ -33,8 +130,31 @@ function TabsTrigger({ className, count, children, ...props }) {
     }
   );
 }
-function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { className: cn(className), ...props });
+function TabsContent({
+  className,
+  value,
+  forceMount,
+  children,
+  ...props
+}) {
+  const context = useTabsContext("TabsContent");
+  const selected = value === context.value;
+  const present = forceMount || selected;
+  if (!present) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-state": selected ? "active" : "inactive",
+      "data-orientation": context.orientation,
+      role: "tabpanel",
+      "aria-labelledby": triggerId(context.baseId, value),
+      id: contentId(context.baseId, value),
+      tabIndex: 0,
+      ...props,
+      className: cn(className),
+      children
+    }
+  );
 }
 export {
   Tabs,

package/dist/overlays/context-menu/context-menu.d.ts

@@ -1,5 +1,5 @@
-import * as MenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } from "react";
+import * as MenuPrimitive from "../../primitives/menu/menu.js";
 export interface ContextMenuProps {
     children: ReactNode;
     onOpenChange?: (open: boolean) => void;
@@ -22,19 +22,19 @@ export interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement>
 }
 /** The area that answers to right-click. Wrap a card, row or canvas. */
 export declare function ContextMenuTrigger({ disabled, onContextMenu, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
-export interface ContextMenuContentProps extends Omit<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>, "side" | "align"> {
+export interface ContextMenuContentProps extends Omit<MenuPrimitive.MenuContentProps, "side" | "align"> {
     /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
     container?: HTMLElement | null;
 }
 export declare function ContextMenuContent({ className, container, collisionPadding, onCloseAutoFocus, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-export interface ContextMenuItemProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.Item> {
+export interface ContextMenuItemProps extends MenuPrimitive.MenuItemProps {
     /** Destructive action styling. */
     tone?: "default" | "danger";
 }
 export declare function ContextMenuItem({ className, tone, ...props }: ContextMenuItemProps): import("react").JSX.Element;
-export type ContextMenuCheckboxItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;
+export type ContextMenuCheckboxItemProps = MenuPrimitive.MenuCheckboxItemProps;
 export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function ContextMenuLabel({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function ContextMenuSeparator({ className, ...props }: ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>): import("react").JSX.Element;
+export declare function ContextMenuSeparator({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react").JSX.Element;
 /** Right-aligned hint such as "Ctrl+D"; purely visual. */
 export declare function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;

package/dist/overlays/context-menu/context-menu.js

@@ -1,7 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as MenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check } from "lucide-react";
 import {
   createContext,
   useCallback,
@@ -11,6 +9,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";
 const ContextMenuContext = createContext(null);
 const LONG_PRESS_MS = 600;
@@ -42,7 +42,7 @@ function ContextMenu({
     [change]
   );
   return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: state, children: /* @__PURE__ */ jsxs(MenuPrimitive.Root, { open, onOpenChange: change, modal: false, children: [
-    /* @__PURE__ */ jsx(MenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(MenuPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
         "aria-hidden": "true",
@@ -138,7 +138,7 @@ 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
@@ -174,10 +174,7 @@ function ContextMenuLabel({ className, ...props }) {
     }
   );
 }
-function ContextMenuSeparator({
-  className,
-  ...props
-}) {
+function ContextMenuSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { className: cn("my-1 h-px bg-divider", className), ...props });
 }
 function ContextMenuShortcut({ className, ...props }) {

package/dist/overlays/dialog/dialog.d.ts

@@ -1,14 +1,18 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import type { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import * as DialogPrimitive from "../../primitives/dialog/dialog.js";
+import type { ClassNames } from "../../utils/class-names.js";
 /**
  * Wraps `DialogPrimitive.Root` so focus is restored on close even when the
  * dialog is opened in a controlled way, without its own `DialogTrigger`.
  */
-export declare function Dialog({ open, children, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;
-export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Dialog({ open, children, ...props }: DialogPrimitive.DialogRootProps): import("react").JSX.Element;
+export declare const DialogTrigger: typeof DialogPrimitive.Trigger;
+export declare const DialogClose: typeof DialogPrimitive.Close;
 export type DialogWidth = "md" | "lg";
-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
@@ -20,8 +24,9 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
     container?: HTMLElement | null;
 }
-export declare function DialogContent({ className, width, blocking, closeLabel, container, children, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogContent({ className, classNames, width, blocking, closeLabel, container, children, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }: DialogContentProps): import("react").JSX.Element;
 export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function DialogTitle({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Title>): import("react").JSX.Element;
+export declare function DialogDescription({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>): import("react").JSX.Element;
 export declare function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/overlays/dialog/dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import { useUiStrings } from "../../i18n/index.js";
+import { X } from "../../icons/index.js";
+import * as DialogPrimitive from "../../primitives/dialog/dialog.js";
 import { cn } from "../../utils/cn.js";
 import {
   PreviousFocusProvider,
@@ -10,11 +10,7 @@ import {
   useCapturePreviousFocus,
   usePreviousFocus
 } from "../focus-return/index.js";
-function Dialog({
-  open,
-  children,
-  ...props
-}) {
+function Dialog({ open, children, ...props }) {
   const focusRef = useCapturePreviousFocus(open);
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, ...props, children: /* @__PURE__ */ jsx(PreviousFocusProvider, { focusRef, children }) });
 }
@@ -26,6 +22,7 @@ const widthClasses = {
 };
 function DialogContent({
   className,
+  classNames,
   width = "md",
   blocking = false,
   closeLabel,
@@ -40,13 +37,14 @@ function DialogContent({
   const previousFocusRef = usePreviousFocus();
   const strings = useUiStrings();
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
-    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-70 bg-scrim" }),
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cn("fixed inset-0 z-70 bg-scrim", classNames?.overlay) }),
     /* @__PURE__ */ jsxs(
       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) => {
@@ -72,7 +70,10 @@ function DialogContent({
             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
+              ),
               children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
             }
           )
@@ -102,6 +103,12 @@ function DialogTitle({
     }
   );
 }
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: cn("m-0 text-ink-2", className), ...props });
+}
 function DialogBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 p-4.5", className), ...props });
 }
@@ -123,6 +130,7 @@ export {
   DialogBody,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,

package/dist/overlays/dialog/index.d.ts

@@ -1 +1 @@
-export { Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, type DialogWidth, } from "./dialog.js";
+export { Dialog, DialogBody, DialogClose, DialogContent, type DialogContentPart, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, type DialogWidth, } from "./dialog.js";

package/dist/overlays/dialog/index.js

@@ -3,6 +3,7 @@ import {
   DialogBody,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -13,6 +14,7 @@ export {
   DialogBody,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,