@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/Dialog/Dialog.styles.js

@@ -0,0 +1,29 @@
+//#region src/react-ui/ui/Dialog/Dialog.styles.ts
+/**
+* Default Tailwind classes for each Dialog visual region.
+* Consumers override via the `slots` prop; the merge order is:
+* `base -> slots -> className`.
+*
+* @example
+* ```typescript
+* import { dialogStyles } from './Dialog.styles';
+* // dialogStyles.backdrop => 'fixed inset-0 z-50 bg-black/80'
+* ```
+*/
+const dialogStyles = {
+	root: "",
+	backdrop: "fixed inset-0 z-50 bg-black/80",
+	popup: [
+		"fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+		"w-full max-w-lg",
+		"rounded-lg border border-border bg-background p-6 shadow-lg"
+	].join(" "),
+	header: "flex flex-col gap-2 text-center sm:text-left",
+	footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+	title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+	description: "text-sm text-muted-foreground",
+	close: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+};
+
+//#endregion
+export { dialogStyles };

package/dist/react-ui/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/ui/Dialog/Dialog.types.d.ts.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/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/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/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/ui/DropdownMenu/DropdownMenu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/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/ui/DropdownMenu/DropdownMenu.styles.js

@@ -0,0 +1,16 @@
+//#region src/react-ui/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 };

package/dist/react-ui/ui/DropdownMenu/DropdownMenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DropdownMenu/DropdownMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,uCAAuC;AACvC,KAAK,kBAAkB,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnD,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC;AAE3D,qCAAqC;AACrC,KAAK,yBAAyB,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,qCAAqC;AACrC,UAAU,yBACR,SAAQ,aAAa,CAAC,KAAK,CAAC,KAAK,EAC/B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC;IACvF,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACzC;AAED,mCAAmC;AACnC,KAAK,uBAAuB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,mCAAmC;AACnC,UAAU,uBAAwB,SAAQ,aAAa,CAAC,UAAU,CAAC,KAAK;IACtE,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,kCAAkC;AAClC,UAAU,sBAAuB,SAAQ,aAAa,CAAC,IAAI,CAAC,KAAK;IAC/D,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC;AAE7D,wCAAwC;AACxC,UAAU,4BAA6B,SAAQ,aAAa,CAAC,cAAc,CAAC,KAAK;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,0CAA0C;AAC1C,UAAU,8BAA+B,SAAQ,aAAa,CAAC,YAAY,CAAC,KAAK;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wCAAwC;AACxC,KAAK,4BAA4B,GAAG,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;AAEnE,uCAAuC;AACvC,UAAU,2BAA4B,SAAQ,aAAa,CAAC,SAAS,CAAC,KAAK;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,uCAAuC;AACvC,KAAK,2BAA2B,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC;AAEjE,sCAAsC;AACtC,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE/D,YAAY,EACV,kBAAkB,EAClB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,4BAA4B,EAC5B,8BAA8B,EAC9B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,GAC3B,CAAC"}

package/dist/react-ui/ui/DropdownMenu/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps } from './DropdownMenu.types';
+/**
+ * DropdownMenu — context menu built on Base UI Menu primitive.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu({ ...props }: IDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuPortal — renders dropdown content in a portal. */
+declare function DropdownMenuPortal({ ...props }: IDropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuTrigger — element that opens the dropdown. */
+declare function DropdownMenuTrigger({ ...props }: IDropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuContent — popup content area for the dropdown. */
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, slots, ...props }: IDropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuGroup — groups related menu items. */
+declare function DropdownMenuGroup({ ...props }: IDropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuLabel — label for a group of menu items. */
+declare function DropdownMenuLabel({ className, inset, ...props }: IDropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuItem — a single selectable menu item. */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: IDropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSub — submenu root. */
+declare function DropdownMenuSub({ ...props }: IDropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: IDropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSubContent — content area for a submenu. */
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: IDropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuRadioGroup — groups radio items. */
+declare function DropdownMenuRadioGroup({ ...props }: IDropdownMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuRadioItem — menu item with radio behavior. */
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: IDropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSeparator — visual divider between menu items. */
+declare function DropdownMenuSeparator({ className, ...props }: IDropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
+declare function DropdownMenuShortcut({ className, ...props }: IDropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps, } from './DropdownMenu.types';
+export type { DropdownMenuSlot } from './DropdownMenu.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/DropdownMenu/index.d.ts.map

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