@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/Menu/index.js

@@ -0,0 +1,636 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { Highlight, HighlightItem } from "../../primitives/Highlight/index.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { useDataState } from "../../hooks/State/UseDataState.js";
+import { menuStyles } from "./Menu.styles.js";
+import * as React$1 from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+
+//#region src/react-ui/ui/Menu/index.tsx
+/**
+* Menu component -- animated dropdown/context menu built on base-ui Menu
+* with motion transitions, highlight tracking, and the v0.2.0 slot system.
+*
+* Provides sub-components for triggers, items, checkbox items, radio groups,
+* submenus, keyboard shortcut hints, separators, and animated highlights.
+*
+* @module @mks2508/mks-ui/react/ui/Menu
+*
+* @example
+* ```tsx
+* <Menu>
+*   <MenuTrigger>Open Menu</MenuTrigger>
+*   <MenuPortal>
+*     <MenuPositioner sideOffset={8}>
+*       <MenuPopup className="rounded-lg border bg-zinc-900 p-1 shadow-xl">
+*         <MenuHighlight className="rounded-md bg-white/10" />
+*         <MenuHighlightItem>
+*           <MenuItem id="edit">Edit</MenuItem>
+*         </MenuHighlightItem>
+*         <MenuSeparator className="my-1 border-white/10" />
+*         <MenuHighlightItem>
+*           <MenuItem id="delete">Delete</MenuItem>
+*         </MenuHighlightItem>
+*       </MenuPopup>
+*     </MenuPositioner>
+*   </MenuPortal>
+* </Menu>
+* ```
+*/
+const [MenuActiveValueProvider, useMenuActiveValue] = getStrictContext("MenuActiveValueContext");
+const [MenuProvider, useMenu] = getStrictContext("MenuContext");
+/**
+* Root Menu component -- provides open/close state and highlighted-value context.
+* Wraps base-ui Menu.Root with controlled state management.
+*
+* @param open - Controlled open state
+* @param defaultOpen - Uncontrolled initial open state
+* @param onOpenChange - Callback when open state changes
+* @param slots - Partial class overrides per slot
+* @param config - Menu behavior / animation configuration
+*
+* @example
+* ```tsx
+* <Menu slots={{ popup: 'bg-zinc-900' }}>
+*   <MenuTrigger>Actions</MenuTrigger>
+*   <MenuPortal>...</MenuPortal>
+* </Menu>
+* ```
+*/
+function Menu$1({ slots, config, ...props }) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	const [highlightedValue, setHighlightedValue] = React$1.useState(null);
+	return /* @__PURE__ */ jsx(MenuActiveValueProvider, {
+		value: {
+			highlightedValue,
+			setHighlightedValue
+		},
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			value: {
+				isOpen,
+				setIsOpen
+			},
+			children: /* @__PURE__ */ jsx(Menu.Root, {
+				"data-slot": "menu",
+				...props,
+				onOpenChange: setIsOpen
+			})
+		})
+	});
+}
+/**
+* MenuTrigger -- the interactive element that toggles the menu open/closed.
+* Renders a base-ui Menu.Trigger with the `trigger` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuTrigger className="rounded-md px-3 py-1.5">
+*   Open Menu
+* </MenuTrigger>
+* ```
+*/
+function MenuTrigger({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "menu-trigger",
+		className: cn(menuStyles.trigger, slots?.trigger, className),
+		...props
+	});
+}
+/**
+* MenuPortal -- wraps menu content in a portal with AnimatePresence.
+* Internally keeps the portal mounted and uses AnimatePresence for
+* smooth enter/exit transitions of children.
+*
+* @example
+* ```tsx
+* <MenuPortal>
+*   <MenuPositioner>
+*     <MenuPopup>...</MenuPopup>
+*   </MenuPositioner>
+* </MenuPortal>
+* ```
+*/
+function MenuPortal(props) {
+	const { isOpen } = useMenu();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Menu.Portal, {
+		keepMounted: true,
+		"data-slot": "menu-portal",
+		...props
+	}) });
+}
+/**
+* MenuGroup -- logical grouping of related menu items.
+* Renders a base-ui Menu.Group with the `group` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuGroup>
+*   <MenuGroupLabel>Editing</MenuGroupLabel>
+*   <MenuItem id="cut">Cut</MenuItem>
+*   <MenuItem id="copy">Copy</MenuItem>
+* </MenuGroup>
+* ```
+*/
+function MenuGroup({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "menu-group",
+		className: cn(menuStyles.group, slots?.group, className),
+		...props
+	});
+}
+/**
+* MenuGroupLabel -- heading text for a MenuGroup.
+* Renders a base-ui Menu.GroupLabel with the `groupLabel` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuGroupLabel className="text-xs font-medium uppercase tracking-wider">
+*   Navigation
+* </MenuGroupLabel>
+* ```
+*/
+function MenuGroupLabel({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "menu-group-label",
+		className: cn(menuStyles.groupLabel, slots?.groupLabel, className),
+		...props
+	});
+}
+/**
+* MenuSubmenu -- a nested sub-menu with its own open/close state.
+* Wraps base-ui Menu.SubmenuRoot and provides a scoped MenuProvider.
+*
+* @param open - Controlled open state
+* @param defaultOpen - Uncontrolled initial open state
+* @param onOpenChange - Callback when open state changes
+*
+* @example
+* ```tsx
+* <MenuSubmenu>
+*   <MenuSubmenuTrigger>More Actions</MenuSubmenuTrigger>
+*   <MenuPortal>
+*     <MenuPositioner>
+*       <MenuPopup>
+*         <MenuItem id="archive">Archive</MenuItem>
+*       </MenuPopup>
+*     </MenuPositioner>
+*   </MenuPortal>
+* </MenuSubmenu>
+* ```
+*/
+function MenuSubmenu(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(MenuProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+			"data-slot": "menu-submenu",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+/**
+* MenuSubmenuTrigger -- the item that opens a submenu on hover/focus.
+* Tracks its own highlighted state via useDataState for highlight integration.
+*
+* @param label - Accessible label for the trigger
+* @param id - Unique identifier used for highlight tracking
+* @param disabled - Whether the trigger is disabled
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuSubmenuTrigger id="more" label="More actions">
+*   More...
+* </MenuSubmenuTrigger>
+* ```
+*/
+function MenuSubmenuTrigger({ label, id, nativeButton, slots, className, ...props }) {
+	const { setHighlightedValue } = useMenuActiveValue();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		ref: highlightedRef,
+		label,
+		id,
+		nativeButton,
+		"data-slot": "menu-submenu-trigger",
+		className: cn(menuStyles.submenuTrigger, slots?.submenuTrigger, className),
+		...props
+	});
+}
+/**
+* MenuHighlight -- animated background that follows the currently
+* focused/highlighted menu item. Wraps the Highlight primitive with
+* menu-specific defaults (spring transition, no click activation).
+*
+* @param transition - Motion transition config (default: spring 350/35)
+* @param animateOnHover - Whether to activate on hover
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuHighlight className="rounded-md bg-white/10" />
+* ```
+*/
+function MenuHighlight({ transition = {
+	type: "spring",
+	stiffness: 350,
+	damping: 35
+}, slots, className, ...props }) {
+	const { highlightedValue } = useMenuActiveValue();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "menu-highlight",
+		click: false,
+		controlledItems: true,
+		transition,
+		value: highlightedValue,
+		className: cn(menuStyles.highlight, slots?.highlight, className),
+		...props
+	});
+}
+/**
+* MenuHighlightItem -- wraps a MenuItem for highlight position tracking.
+* Must be placed inside a MenuHighlight context.
+*
+* @param slots - Partial class overrides per slot
+*
+* @example
+* ```tsx
+* <MenuHighlight className="rounded bg-white/10">
+*   <MenuHighlightItem>
+*     <MenuItem id="edit">Edit</MenuItem>
+*   </MenuHighlightItem>
+* </MenuHighlight>
+* ```
+*/
+function MenuHighlightItem({ slots, ...props }) {
+	return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "menu-highlight-item",
+		...props
+	});
+}
+/**
+* MenuPositioner -- positions the popup relative to the trigger element.
+* Thin wrapper over base-ui Menu.Positioner.
+*
+* @param sideOffset - Gap between trigger and popup
+* @param align - Alignment along the trigger edge
+*
+* @example
+* ```tsx
+* <MenuPositioner sideOffset={8} align="start">
+*   <MenuPopup>...</MenuPopup>
+* </MenuPositioner>
+* ```
+*/
+function MenuPositioner(props) {
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		"data-slot": "menu-positioner",
+		...props
+	});
+}
+/**
+* MenuPopup -- the visible flyout surface containing menu items.
+* Uses Motion for animated entrance (scale + opacity) and exit.
+*
+* @param transition - Motion transition config (default: 0.2s duration)
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+* @param style - Inline styles merged with will-change hint
+*
+* @example
+* ```tsx
+* <MenuPopup className="min-w-[180px] rounded-lg border bg-zinc-900 p-1 shadow-xl">
+*   <MenuItem id="edit">Edit</MenuItem>
+*   <MenuItem id="delete">Delete</MenuItem>
+* </MenuPopup>
+* ```
+*/
+function MenuPopup({ finalFocus, id, transition = { duration: .2 }, style, slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		finalFocus,
+		id,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "menu-popup",
+			initial: {
+				opacity: 0,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .95
+			},
+			transition,
+			style: {
+				willChange: "opacity, transform",
+				...style
+			},
+			className: cn(menuStyles.popup, slots?.popup, className),
+			...props
+		}, "menu-popup")
+	});
+}
+/**
+* MenuItem -- a single actionable row within the menu.
+* Tracks highlight state via useDataState for animated highlight integration.
+*
+* @param id - Unique identifier, also used as highlight tracking value
+* @param label - Accessible label
+* @param disabled - Whether the item is disabled
+* @param closeOnClick - Close menu when this item is clicked
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuItem id="edit" label="Edit document">
+*   <PencilIcon className="mr-2 size-4" />
+*   Edit
+*   <MenuShortcut>Ctrl+E</MenuShortcut>
+* </MenuItem>
+* ```
+*/
+function MenuItem({ disabled, label, closeOnClick, nativeButton, id, slots, className, ...props }) {
+	const { setHighlightedValue } = useMenuActiveValue();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		ref: highlightedRef,
+		label,
+		closeOnClick,
+		nativeButton,
+		disabled,
+		id,
+		"data-slot": "menu-item",
+		className: cn(menuStyles.item, slots?.item, className),
+		...props
+	});
+}
+/**
+* MenuCheckboxItem -- a toggleable checkbox item within the menu.
+* Tracks highlight state for animated highlight integration.
+*
+* @param checked - Controlled checked state
+* @param defaultChecked - Uncontrolled initial checked state
+* @param onCheckedChange - Callback when checked state changes
+* @param disabled - Whether the item is disabled
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+*   <MenuCheckboxItemIndicator>
+*     <CheckIcon />
+*   </MenuCheckboxItemIndicator>
+*   Show Grid
+* </MenuCheckboxItem>
+* ```
+*/
+function MenuCheckboxItem({ label, defaultChecked, checked, onCheckedChange, disabled, closeOnClick, nativeButton, id, slots, className, ...props }) {
+	const { setHighlightedValue } = useMenuActiveValue();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		ref: highlightedRef,
+		label,
+		checked,
+		defaultChecked,
+		onCheckedChange,
+		disabled,
+		closeOnClick,
+		nativeButton,
+		id,
+		"data-slot": "menu-checkbox-item",
+		className: cn(menuStyles.checkboxItem, slots?.checkboxItem, className),
+		...props
+	});
+}
+/**
+* MenuCheckboxItemIndicator -- the visual check/indeterminate icon.
+* Renders via a motion.div for animated enter/exit transitions.
+*
+* @param keepMounted - Keep in DOM when unchecked (for exit animations)
+*
+* @example
+* ```tsx
+* <MenuCheckboxItemIndicator
+*   initial={{ opacity: 0, scale: 0.8 }}
+*   animate={{ opacity: 1, scale: 1 }}
+* >
+*   <CheckIcon className="size-4" />
+* </MenuCheckboxItemIndicator>
+* ```
+*/
+function MenuCheckboxItemIndicator({ keepMounted, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		"data-slot": "menu-checkbox-item-indicator",
+		keepMounted,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "menu-checkbox-item-indicator",
+			...props
+		})
+	});
+}
+/**
+* MenuRadioGroup -- groups radio items for single-selection within a menu.
+* Wraps base-ui Menu.RadioGroup.
+*
+* @param value - Controlled selected value
+* @param defaultValue - Uncontrolled initial selected value
+* @param onValueChange - Callback when selection changes
+*
+* @example
+* ```tsx
+* <MenuRadioGroup value={sortBy} onValueChange={setSortBy}>
+*   <MenuRadioItem value="name">Name</MenuRadioItem>
+*   <MenuRadioItem value="date">Date</MenuRadioItem>
+*   <MenuRadioItem value="size">Size</MenuRadioItem>
+* </MenuRadioGroup>
+* ```
+*/
+function MenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "menu-radio-group",
+		...props
+	});
+}
+/**
+* MenuRadioItem -- a single option within a MenuRadioGroup.
+* Tracks highlight state for animated highlight integration.
+*
+* @param value - The value this item represents
+* @param disabled - Whether the item is disabled
+* @param label - Accessible label
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuRadioItem value="name">
+*   <MenuRadioItemIndicator>
+*     <DotIcon />
+*   </MenuRadioItemIndicator>
+*   Sort by Name
+* </MenuRadioItem>
+* ```
+*/
+function MenuRadioItem({ value, disabled, label, closeOnClick, nativeButton, id, slots, className, ...props }) {
+	const { setHighlightedValue } = useMenuActiveValue();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		ref: highlightedRef,
+		value,
+		disabled,
+		label,
+		closeOnClick,
+		nativeButton,
+		id,
+		"data-slot": "menu-radio-item",
+		className: cn(menuStyles.radioItem, slots?.radioItem, className),
+		...props
+	});
+}
+/**
+* MenuRadioItemIndicator -- the selection dot/icon for a radio item.
+* Renders via a motion.div for animated enter/exit transitions.
+*
+* @param keepMounted - Keep in DOM when unselected (for exit animations)
+*
+* @example
+* ```tsx
+* <MenuRadioItemIndicator
+*   initial={{ opacity: 0 }}
+*   animate={{ opacity: 1 }}
+* >
+*   <DotFilledIcon className="size-4" />
+* </MenuRadioItemIndicator>
+* ```
+*/
+function MenuRadioItemIndicator({ keepMounted, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		"data-slot": "menu-radio-item-indicator",
+		keepMounted,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "menu-radio-item-indicator",
+			...props
+		})
+	});
+}
+/**
+* MenuShortcut -- displays a keyboard shortcut hint aligned to the right.
+* Renders a plain `<span>` with the `shortcut` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuItem id="copy">
+*   Copy
+*   <MenuShortcut>Ctrl+C</MenuShortcut>
+* </MenuItem>
+* ```
+*/
+function MenuShortcut({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-shortcut",
+		className: cn(menuStyles.shortcut, slots?.shortcut, className),
+		...props
+	});
+}
+/**
+* MenuArrow -- the directional caret/arrow on the popup edge.
+* Wraps base-ui Menu.Arrow.
+*
+* @example
+* ```tsx
+* <MenuPopup>
+*   <MenuArrow className="fill-zinc-800" />
+*   <MenuItem id="edit">Edit</MenuItem>
+* </MenuPopup>
+* ```
+*/
+function MenuArrow(props) {
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		"data-slot": "menu-arrow",
+		...props
+	});
+}
+/**
+* MenuSeparator -- a horizontal divider between menu items or groups.
+* Renders a base-ui Menu.Separator with the `separator` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <MenuItem id="edit">Edit</MenuItem>
+* <MenuSeparator className="my-1 h-px bg-white/10" />
+* <MenuItem id="delete">Delete</MenuItem>
+* ```
+*/
+function MenuSeparator({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "menu-separator",
+		className: cn(menuStyles.separator, slots?.separator, className),
+		...props
+	});
+}
+
+//#endregion
+export { Menu$1 as Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, useMenu, useMenuActiveValue };

package/dist/react-ui/ui/Popover/Popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,WAAW,CA+BjD,CAAC"}

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

@@ -0,0 +1,26 @@
+//#region src/react-ui/ui/Popover/Popover.styles.ts
+/**
+* Default Tailwind classes for each Popover visual region.
+* Consumers override via the `slots` prop; the merge order is:
+* `base -> slots -> className`.
+*
+* @example
+* ```typescript
+* import { popoverStyles } from './Popover.styles';
+* // popoverStyles.popup => 'z-50 w-72 rounded-md border ...'
+* ```
+*/
+const popoverStyles = {
+	root: "",
+	popup: ["z-50 w-72 rounded-md border border-border", "bg-popover p-4 text-popover-foreground shadow-md outline-none"].join(" "),
+	trigger: "",
+	positioner: "",
+	backdrop: "fixed inset-0",
+	arrow: "fill-popover",
+	title: "font-medium leading-none text-foreground",
+	description: "text-sm text-muted-foreground",
+	close: "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"
+};
+
+//#endregion
+export { popoverStyles };