@mks2508/mks-ui 0.1.4 → 0.2.0

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

@@ -0,0 +1,354 @@
+import type { MenuActiveValueContextType, MenuContextType, IMenuProps, IMenuTriggerProps, IMenuPortalProps, IMenuGroupProps, IMenuGroupLabelProps, IMenuSubmenuProps, IMenuSubmenuTriggerProps, IMenuHighlightProps, IMenuHighlightItemProps, IMenuPositionerProps, IMenuPopupProps, IMenuItemProps, IMenuCheckboxItemProps, IMenuCheckboxItemIndicatorProps, IMenuRadioGroupProps, IMenuRadioItemProps, IMenuRadioItemIndicatorProps, IMenuShortcutProps, IMenuArrowProps, IMenuSeparatorProps } from './Menu.types';
+declare const useMenuActiveValue: () => MenuActiveValueContextType;
+declare const useMenu: () => MenuContextType;
+/**
+ * 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>
+ * ```
+ */
+declare function Menu({ slots, config, ...props }: IMenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuTrigger({ slots, className, ...props }: IMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuPortal(props: IMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuGroup({ slots, className, ...props }: IMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuGroupLabel({ slots, className, ...props }: IMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuSubmenu(props: IMenuSubmenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuSubmenuTrigger({ label, id, nativeButton, slots, className, ...props }: IMenuSubmenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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" />
+ * ```
+ */
+declare function MenuHighlight({ transition, slots, className, ...props }: IMenuHighlightProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuHighlightItem({ slots, ...props }: IMenuHighlightItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuPositioner(props: IMenuPositionerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuPopup({ finalFocus, id, transition, style, slots, className, ...props }: IMenuPopupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuItem({ disabled, label, closeOnClick, nativeButton, id, slots, className, ...props }: IMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuCheckboxItem({ label, defaultChecked, checked, onCheckedChange, disabled, closeOnClick, nativeButton, id, slots, className, ...props }: IMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuCheckboxItemIndicator({ keepMounted, ...props }: IMenuCheckboxItemIndicatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuRadioGroup(props: IMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuRadioItem({ value, disabled, label, closeOnClick, nativeButton, id, slots, className, ...props }: IMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuRadioItemIndicator({ keepMounted, ...props }: IMenuRadioItemIndicatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuShortcut({ slots, className, ...props }: IMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuArrow(props: IMenuArrowProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function MenuSeparator({ slots, className, ...props }: IMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Menu, MenuTrigger, MenuPortal, MenuPositioner, MenuPopup, MenuArrow, MenuItem, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuGroup, MenuGroupLabel, MenuSeparator, MenuShortcut, MenuHighlight, MenuHighlightItem, MenuSubmenu, MenuSubmenuTrigger, useMenuActiveValue, useMenu, };
+export type { IMenuProps, IMenuTriggerProps, IMenuPortalProps, IMenuPositionerProps, IMenuPopupProps, IMenuArrowProps, IMenuItemProps, IMenuCheckboxItemProps, IMenuCheckboxItemIndicatorProps, IMenuRadioItemProps, IMenuRadioItemIndicatorProps, IMenuRadioGroupProps, IMenuGroupProps, IMenuGroupLabelProps, IMenuSeparatorProps, IMenuShortcutProps, IMenuHighlightProps, IMenuHighlightItemProps, IMenuSubmenuProps, IMenuSubmenuTriggerProps, IMenuConfig, MenuActiveValueContextType, MenuContextType, } from './Menu.types';
+export type { MenuSlot } from './Menu.styles';
+//# sourceMappingURL=index.d.ts.map

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

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