@mks2508/mks-ui 0.1.4 → 0.2.0

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 };

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

@@ -0,0 +1,50 @@
+import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type { SlotOverrides } from '../../../core/types';
+import type { DropdownMenuSlot } from './DropdownMenu.styles';
+/** Props for the DropdownMenu root. */
+type IDropdownMenuProps = MenuPrimitive.Root.Props;
+/** Props for DropdownMenuPortal. */
+type IDropdownMenuPortalProps = MenuPrimitive.Portal.Props;
+/** Props for DropdownMenuTrigger. */
+type IDropdownMenuTriggerProps = MenuPrimitive.Trigger.Props;
+/** Props for DropdownMenuContent. */
+interface IDropdownMenuContentProps extends MenuPrimitive.Popup.Props, Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> {
+    /** Override classes for dropdown menu visual regions. */
+    slots?: SlotOverrides<DropdownMenuSlot>;
+}
+/** Props for DropdownMenuGroup. */
+type IDropdownMenuGroupProps = MenuPrimitive.Group.Props;
+/** Props for DropdownMenuLabel. */
+interface IDropdownMenuLabelProps extends MenuPrimitive.GroupLabel.Props {
+    /** Indent the label to align with items that have icons. */
+    inset?: boolean;
+}
+/** Props for DropdownMenuItem. */
+interface IDropdownMenuItemProps extends MenuPrimitive.Item.Props {
+    /** Indent the item. */
+    inset?: boolean;
+    /** Visual style variant. */
+    variant?: 'default' | 'destructive';
+}
+/** Props for DropdownMenuSub. */
+type IDropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
+/** Props for DropdownMenuSubTrigger. */
+interface IDropdownMenuSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuCheckboxItem. */
+interface IDropdownMenuCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuRadioGroup. */
+type IDropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+/** Props for DropdownMenuRadioItem. */
+interface IDropdownMenuRadioItemProps extends MenuPrimitive.RadioItem.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuSeparator. */
+type IDropdownMenuSeparatorProps = MenuPrimitive.Separator.Props;
+/** Props for DropdownMenuShortcut. */
+type IDropdownMenuShortcutProps = React.ComponentProps<'span'>;
+export type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps, };
+//# sourceMappingURL=DropdownMenu.types.d.ts.map

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

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

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

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

@@ -0,0 +1,181 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { dropdownMenuStyles } from "./DropdownMenu.styles.js";
+import "../../../react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowRight01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
+
+//#region src/react/ui/DropdownMenu/index.tsx
+/**
+* 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>
+* ```
+*/
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+/** DropdownMenuPortal — renders dropdown content in a portal. */
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+/** DropdownMenuTrigger — element that opens the dropdown. */
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+/** DropdownMenuContent — popup content area for the dropdown. */
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn(dropdownMenuStyles.content, slots?.content, className),
+			...props
+		})
+	}) });
+}
+/** DropdownMenuGroup — groups related menu items. */
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+/** DropdownMenuLabel — label for a group of menu items. */
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.label, className),
+		...props
+	});
+}
+/** DropdownMenuItem — a single selectable menu item. */
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn(dropdownMenuStyles.item, className),
+		...props
+	});
+}
+/** DropdownMenuSub — submenu root. */
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.subTrigger, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: ArrowRight01Icon,
+			strokeWidth: 2,
+			className: "ml-auto"
+		})]
+	});
+}
+/** DropdownMenuSubContent — content area for a submenu. */
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn(dropdownMenuStyles.subContent, className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.checkboxItem, className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex items-center justify-center pointer-events-none",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Tick02Icon,
+				strokeWidth: 2
+			}) })
+		}), children]
+	});
+}
+/** DropdownMenuRadioGroup — groups radio items. */
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+/** DropdownMenuRadioItem — menu item with radio behavior. */
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.radioItem, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex items-center justify-center pointer-events-none",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Tick02Icon,
+				strokeWidth: 2
+			}) })
+		}), children]
+	});
+}
+/** DropdownMenuSeparator — visual divider between menu items. */
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn(dropdownMenuStyles.separator, className),
+		...props
+	});
+}
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn(dropdownMenuStyles.shortcut, className),
+		...props
+	});
+}
+
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

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

@@ -0,0 +1,11 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Field component family. */
+type FieldSlot = 'root' | 'set' | 'legend' | 'group' | 'content' | 'label' | 'title' | 'description' | 'separator' | 'error';
+declare const fieldStyles: StyleSlots<FieldSlot>;
+/** CVA variants for the Field root orientation. */
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { fieldStyles, fieldVariants };
+export type { FieldSlot };
+//# sourceMappingURL=Field.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Field/Field.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,qDAAqD;AACrD,KAAK,SAAS,GACV,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,OAAO,GACP,aAAa,GACb,WAAW,GACX,OAAO,CAAC;AAEZ,QAAA,MAAM,WAAW,EAAE,UAAU,CAAC,SAAS,CAWtC,CAAC;AAEF,mDAAmD;AACnD,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/ui/Field/Field.styles.ts
+const fieldStyles = {
+	root: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+	set: "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+	legend: "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+	group: "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+	content: "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+	label: "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+	title: "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+	description: "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+	separator: "-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+	error: "text-destructive text-sm font-normal"
+};
+/** CVA variants for the Field root orientation. */
+const fieldVariants = cva(fieldStyles.root, {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+
+//#endregion
+export { fieldStyles, fieldVariants };