@mks2508/mks-ui 0.1.3 → 0.2.0

package/dist/react/ui/Dialog/Dialog.types.d.ts

@@ -0,0 +1,221 @@
+/**
+ * Type definitions for the Dialog component.
+ *
+ * Provides all prop interfaces, slot types, context types, and configuration
+ * for the animated dialog system built on Base UI and Motion.
+ *
+ * @module @mks2508/mks-ui/react/ui/Dialog/Dialog.types
+ */
+import type * as React from '../../../react';
+import type { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import type { HTMLMotionProps } from 'motion/react';
+import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+/**
+ * Visual regions available for class-name overrides via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <DialogBackdrop slots={{ backdrop: 'bg-black/80' }} />
+ * <DialogPopup slots={{ popup: 'max-w-lg rounded-xl' }} />
+ * ```
+ */
+export type DialogSlot = 'root' | 'backdrop' | 'popup' | 'header' | 'footer' | 'title' | 'description' | 'close';
+/**
+ * Direction from which the dialog popup flips in during its entrance animation.
+ *
+ * @example
+ * ```tsx
+ * <DialogPopup from="bottom" />
+ * ```
+ */
+export type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Extended configuration for the Dialog component.
+ * Inherits base animation settings and adds dialog-specific options.
+ *
+ * @example
+ * ```typescript
+ * const config: IDialogConfig = {
+ *   animation: { duration: 0.2, easing: 'ease-in-out' },
+ * };
+ * ```
+ */
+export interface IDialogConfig extends IBaseConfig {
+}
+/**
+ * Internal context type shared between Dialog sub-components.
+ * Tracks open state so AnimatePresence can coordinate enter/exit animations.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, setIsOpen } = useDialog();
+ * ```
+ */
+export type DialogContextType = {
+    /** Whether the dialog is currently open. */
+    isOpen: boolean;
+    /** Callback to change the open state. */
+    setIsOpen: IDialogProps['onOpenChange'];
+};
+/**
+ * Props for the root `Dialog` component.
+ * Wraps Base UI Dialog.Root with controlled-state support and context provider.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *   <DialogTrigger>Open</DialogTrigger>
+ *   <DialogPortal>
+ *     <DialogBackdrop />
+ *     <DialogPopup>Content</DialogPopup>
+ *   </DialogPortal>
+ * </Dialog>
+ * ```
+ */
+export interface IDialogProps extends React.ComponentProps<typeof DialogPrimitive.Root> {
+    /** Style slot overrides for the root wrapper. */
+    slots?: SlotOverrides<DialogSlot>;
+    /** Component configuration. */
+    config?: IDialogConfig;
+}
+/**
+ * Props for the `DialogTrigger` component.
+ * Renders the element that opens the dialog on interaction.
+ *
+ * @example
+ * ```tsx
+ * <DialogTrigger>
+ *   <Button>Open Dialog</Button>
+ * </DialogTrigger>
+ * ```
+ */
+export interface IDialogTriggerProps extends React.ComponentProps<typeof DialogPrimitive.Trigger> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogPortal` component.
+ * Renders children into a React portal with AnimatePresence for exit animations.
+ * The `keepMounted` prop is handled internally and cannot be overridden.
+ *
+ * @example
+ * ```tsx
+ * <DialogPortal>
+ *   <DialogBackdrop />
+ *   <DialogPopup>...</DialogPopup>
+ * </DialogPortal>
+ * ```
+ */
+export interface IDialogPortalProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Portal>, 'keepMounted'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogBackdrop` component.
+ * Renders a motion-animated overlay behind the dialog popup.
+ * Accepts all HTMLMotionProps for full animation control.
+ *
+ * @example
+ * ```tsx
+ * <DialogBackdrop className="bg-black/60" />
+ * ```
+ */
+export interface IDialogBackdropProps extends Omit<Omit<React.ComponentProps<typeof DialogPrimitive.Backdrop>, 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogPopup` component.
+ * The main content container with perspective-flip entrance animation.
+ *
+ * @example
+ * ```tsx
+ * <DialogPopup from="bottom" className="rounded-xl p-6">
+ *   <DialogTitle>Confirm</DialogTitle>
+ *   <DialogDescription>Are you sure?</DialogDescription>
+ * </DialogPopup>
+ * ```
+ */
+export interface IDialogPopupProps extends Omit<Omit<React.ComponentProps<typeof DialogPrimitive.Popup>, 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /**
+     * Direction from which the popup flips in.
+     * @defaultValue 'top'
+     */
+    from?: DialogFlipDirection;
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogClose` component.
+ * Renders a button that closes the dialog when clicked.
+ *
+ * @example
+ * ```tsx
+ * <DialogClose>
+ *   <button aria-label="Close">X</button>
+ * </DialogClose>
+ * ```
+ */
+export interface IDialogCloseProps extends React.ComponentProps<typeof DialogPrimitive.Close> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogHeader` layout component.
+ * Renders a semantic header region inside the dialog popup.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Settings</DialogTitle>
+ *   <DialogDescription>Adjust your preferences.</DialogDescription>
+ * </DialogHeader>
+ * ```
+ */
+export interface IDialogHeaderProps extends React.ComponentProps<'div'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogFooter` layout component.
+ * Renders a semantic footer region inside the dialog popup.
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter>
+ *   <DialogClose><Button variant="outline">Cancel</Button></DialogClose>
+ *   <Button>Save</Button>
+ * </DialogFooter>
+ * ```
+ */
+export interface IDialogFooterProps extends React.ComponentProps<'div'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogTitle` component.
+ * Renders the accessible title for the dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogTitle>Delete Item</DialogTitle>
+ * ```
+ */
+export interface IDialogTitleProps extends React.ComponentProps<typeof DialogPrimitive.Title> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+/**
+ * Props for the `DialogDescription` component.
+ * Renders the accessible description for the dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogDescription>This action cannot be undone.</DialogDescription>
+ * ```
+ */
+export interface IDialogDescriptionProps extends React.ComponentProps<typeof DialogPrimitive.Description> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<DialogSlot>;
+}
+//# sourceMappingURL=Dialog.types.d.ts.map

package/dist/react/ui/Dialog/Dialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Dialog/Dialog.types.ts"],"names":[],"mappings":"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"}

package/dist/react/ui/Dialog/index.d.ts

@@ -0,0 +1,138 @@
+import type { DialogContextType, IDialogProps, IDialogTriggerProps, IDialogPortalProps, IDialogBackdropProps, IDialogPopupProps, IDialogCloseProps, IDialogHeaderProps, IDialogFooterProps, IDialogTitleProps, IDialogDescriptionProps } from './Dialog.types';
+declare const useDialog: () => DialogContextType;
+/**
+ * Root Dialog component.
+ * Manages controlled/uncontrolled open state and provides context to children.
+ *
+ * @param props - Dialog root props including `open`, `defaultOpen`, and `onOpenChange`
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *   {children}
+ * </Dialog>
+ * ```
+ */
+declare function Dialog(props: IDialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Trigger element that opens the dialog on interaction.
+ *
+ * @param props - Trigger props forwarded to Base UI Dialog.Trigger
+ *
+ * @example
+ * ```tsx
+ * <DialogTrigger>
+ *   <button>Open</button>
+ * </DialogTrigger>
+ * ```
+ */
+declare function DialogTrigger({ slots, className, ...props }: IDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Portal wrapper with AnimatePresence for coordinated enter/exit animations.
+ * Internally sets `keepMounted` so motion exit animations play correctly.
+ *
+ * @param props - Portal props (without keepMounted)
+ *
+ * @example
+ * ```tsx
+ * <DialogPortal>
+ *   <DialogBackdrop />
+ *   <DialogPopup>...</DialogPopup>
+ * </DialogPortal>
+ * ```
+ */
+declare function DialogPortal({ slots: _slots, ...props }: IDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Animated overlay backdrop behind the dialog popup.
+ * Uses a blur + fade entrance/exit animation via Motion.
+ *
+ * @param props - Backdrop props including motion transition overrides
+ *
+ * @example
+ * ```tsx
+ * <DialogBackdrop slots={{ backdrop: 'bg-black/60' }} />
+ * ```
+ */
+declare function DialogBackdrop({ slots, className, transition, ...props }: IDialogBackdropProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main dialog content container with a perspective-flip entrance animation.
+ * The `from` prop controls the axis and direction of the 3D rotation.
+ *
+ * @param props - Popup props including `from` direction and motion transition overrides
+ *
+ * @example
+ * ```tsx
+ * <DialogPopup from="bottom" className="max-w-md">
+ *   <DialogTitle>Confirm</DialogTitle>
+ *   <p>Are you sure?</p>
+ * </DialogPopup>
+ * ```
+ */
+declare function DialogPopup({ from, initialFocus, finalFocus, slots, className, transition, ...props }: IDialogPopupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button that closes the dialog when clicked.
+ *
+ * @param props - Close button props forwarded to Base UI Dialog.Close
+ *
+ * @example
+ * ```tsx
+ * <DialogClose slots={{ close: 'text-muted-foreground' }}>
+ *   <button>Cancel</button>
+ * </DialogClose>
+ * ```
+ */
+declare function DialogClose({ slots, className, ...props }: IDialogCloseProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Layout wrapper for the dialog header region (title + description).
+ *
+ * @param props - Standard div props with optional slot overrides
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Settings</DialogTitle>
+ *   <DialogDescription>Configure your preferences.</DialogDescription>
+ * </DialogHeader>
+ * ```
+ */
+declare function DialogHeader({ slots, className, ...props }: IDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Layout wrapper for the dialog footer region (action buttons).
+ *
+ * @param props - Standard div props with optional slot overrides
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter>
+ *   <DialogClose><button>Cancel</button></DialogClose>
+ *   <button>Confirm</button>
+ * </DialogFooter>
+ * ```
+ */
+declare function DialogFooter({ slots, className, ...props }: IDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accessible title for the dialog. Rendered as a heading element.
+ *
+ * @param props - Title props forwarded to Base UI Dialog.Title
+ *
+ * @example
+ * ```tsx
+ * <DialogTitle>Delete Workspace</DialogTitle>
+ * ```
+ */
+declare function DialogTitle({ slots, className, ...props }: IDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accessible description for the dialog. Provides supplementary context.
+ *
+ * @param props - Description props forwarded to Base UI Dialog.Description
+ *
+ * @example
+ * ```tsx
+ * <DialogDescription>This will permanently remove the workspace.</DialogDescription>
+ * ```
+ */
+declare function DialogDescription({ slots, className, ...props }: IDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogPortal, DialogBackdrop, DialogClose, DialogTrigger, DialogPopup, DialogHeader, DialogFooter, DialogTitle, DialogDescription, useDialog, };
+export type { IDialogProps, IDialogTriggerProps, IDialogPortalProps, IDialogCloseProps, IDialogBackdropProps, IDialogPopupProps, IDialogHeaderProps, IDialogFooterProps, IDialogTitleProps, IDialogDescriptionProps, DialogContextType, DialogFlipDirection, DialogSlot, IDialogConfig, } from './Dialog.types';
+export { dialogStyles } from './Dialog.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Dialog/index.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EACV,iBAAiB,EAEjB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAMxB,QAAA,MAAuB,SAAS,yBACsB,CAAC;AAMvD;;;;;;;;;;;;GAYG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,YAAY,2CAkBlC;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAcpE;AAMD;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,SAAS,EACT,UAAiD,EACjD,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAiBtB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,SAAS,EACT,UAA4D,EAC5D,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoCnB;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQrE;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQrE;AAMD;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,SAAS,GACV,CAAC;AAGF,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,aAAa,GACd,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/react/ui/Dialog/index.js

@@ -0,0 +1,265 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { dialogStyles } from "./Dialog.styles.js";
+import "../../../react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/react/ui/Dialog/index.tsx
+const [DialogProvider, useDialog] = getStrictContext("DialogContext");
+/**
+* Root Dialog component.
+* Manages controlled/uncontrolled open state and provides context to children.
+*
+* @param props - Dialog root props including `open`, `defaultOpen`, and `onOpenChange`
+*
+* @example
+* ```tsx
+* <Dialog open={isOpen} onOpenChange={setIsOpen}>
+*   {children}
+* </Dialog>
+* ```
+*/
+function Dialog$1(props) {
+	const { slots, config: _config, ...rest } = props;
+	const [isOpen, setIsOpen] = useControlledState({
+		value: rest?.open,
+		defaultValue: rest?.defaultOpen,
+		onChange: rest?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(DialogProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			"data-slot": "dialog",
+			...rest,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+/**
+* Trigger element that opens the dialog on interaction.
+*
+* @param props - Trigger props forwarded to Base UI Dialog.Trigger
+*
+* @example
+* ```tsx
+* <DialogTrigger>
+*   <button>Open</button>
+* </DialogTrigger>
+* ```
+*/
+function DialogTrigger({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		className: cn(dialogStyles.root, slots?.root, className),
+		...props
+	});
+}
+/**
+* Portal wrapper with AnimatePresence for coordinated enter/exit animations.
+* Internally sets `keepMounted` so motion exit animations play correctly.
+*
+* @param props - Portal props (without keepMounted)
+*
+* @example
+* ```tsx
+* <DialogPortal>
+*   <DialogBackdrop />
+*   <DialogPopup>...</DialogPopup>
+* </DialogPortal>
+* ```
+*/
+function DialogPortal({ slots: _slots, ...props }) {
+	const { isOpen } = useDialog();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		keepMounted: true,
+		...props
+	}) });
+}
+/**
+* Animated overlay backdrop behind the dialog popup.
+* Uses a blur + fade entrance/exit animation via Motion.
+*
+* @param props - Backdrop props including motion transition overrides
+*
+* @example
+* ```tsx
+* <DialogBackdrop slots={{ backdrop: 'bg-black/60' }} />
+* ```
+*/
+function DialogBackdrop({ slots, className, transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-backdrop",
+		render: /* @__PURE__ */ jsx(motion.div, {
+			className: cn(dialogStyles.backdrop, slots?.backdrop, className),
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "dialog-backdrop")
+	});
+}
+/**
+* Main dialog content container with a perspective-flip entrance animation.
+* The `from` prop controls the axis and direction of the 3D rotation.
+*
+* @param props - Popup props including `from` direction and motion transition overrides
+*
+* @example
+* ```tsx
+* <DialogPopup from="bottom" className="max-w-md">
+*   <DialogTitle>Confirm</DialogTitle>
+*   <p>Are you sure?</p>
+* </DialogPopup>
+* ```
+*/
+function DialogPopup({ from = "top", initialFocus, finalFocus, slots, className, transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 25
+}, ...props }) {
+	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
+	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		initialFocus,
+		finalFocus,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dialog-popup",
+			className: cn(dialogStyles.popup, slots?.popup, className),
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			transition,
+			...props
+		}, "dialog-popup")
+	});
+}
+/**
+* Button that closes the dialog when clicked.
+*
+* @param props - Close button props forwarded to Base UI Dialog.Close
+*
+* @example
+* ```tsx
+* <DialogClose slots={{ close: 'text-muted-foreground' }}>
+*   <button>Cancel</button>
+* </DialogClose>
+* ```
+*/
+function DialogClose({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		className: cn(dialogStyles.close, slots?.close, className),
+		...props
+	});
+}
+/**
+* Layout wrapper for the dialog header region (title + description).
+*
+* @param props - Standard div props with optional slot overrides
+*
+* @example
+* ```tsx
+* <DialogHeader>
+*   <DialogTitle>Settings</DialogTitle>
+*   <DialogDescription>Configure your preferences.</DialogDescription>
+* </DialogHeader>
+* ```
+*/
+function DialogHeader({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn(dialogStyles.header, slots?.header, className),
+		...props
+	});
+}
+/**
+* Layout wrapper for the dialog footer region (action buttons).
+*
+* @param props - Standard div props with optional slot overrides
+*
+* @example
+* ```tsx
+* <DialogFooter>
+*   <DialogClose><button>Cancel</button></DialogClose>
+*   <button>Confirm</button>
+* </DialogFooter>
+* ```
+*/
+function DialogFooter({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn(dialogStyles.footer, slots?.footer, className),
+		...props
+	});
+}
+/**
+* Accessible title for the dialog. Rendered as a heading element.
+*
+* @param props - Title props forwarded to Base UI Dialog.Title
+*
+* @example
+* ```tsx
+* <DialogTitle>Delete Workspace</DialogTitle>
+* ```
+*/
+function DialogTitle({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn(dialogStyles.title, slots?.title, className),
+		...props
+	});
+}
+/**
+* Accessible description for the dialog. Provides supplementary context.
+*
+* @param props - Description props forwarded to Base UI Dialog.Description
+*
+* @example
+* ```tsx
+* <DialogDescription>This will permanently remove the workspace.</DialogDescription>
+* ```
+*/
+function DialogDescription({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn(dialogStyles.description, slots?.description, className),
+		...props
+	});
+}
+
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog };

package/dist/react/ui/DropdownMenu/DropdownMenu.styles.d.ts

@@ -0,0 +1,7 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the DropdownMenu component family. */
+type DropdownMenuSlot = 'root' | 'content' | 'item' | 'label' | 'separator' | 'shortcut' | 'subTrigger' | 'subContent' | 'checkboxItem' | 'radioItem';
+declare const dropdownMenuStyles: StyleSlots<DropdownMenuSlot>;
+export { dropdownMenuStyles };
+export type { DropdownMenuSlot };
+//# sourceMappingURL=DropdownMenu.styles.d.ts.map

package/dist/react/ui/DropdownMenu/DropdownMenu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/DropdownMenu/DropdownMenu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,4DAA4D;AAC5D,KAAK,gBAAgB,GACjB,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,GACP,WAAW,GACX,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,WAAW,CAAC;AAEhB,QAAA,MAAM,kBAAkB,EAAE,UAAU,CAAC,gBAAgB,CAgBpD,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/react/ui/DropdownMenu/DropdownMenu.styles.js

@@ -0,0 +1,16 @@
+//#region src/react/ui/DropdownMenu/DropdownMenu.styles.ts
+const dropdownMenuStyles = {
+	root: "",
+	content: "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+	item: "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	label: "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+	separator: "bg-border -mx-1 my-1 h-px",
+	shortcut: "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+	subTrigger: "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	subContent: "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto",
+	checkboxItem: "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	radioItem: "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+};
+
+//#endregion
+export { dropdownMenuStyles };