lucent-ui 0.17.0 → 0.18.1

package/dist/index.d.ts

@@ -277,7 +277,7 @@ export declare interface ColorPalette {
     dark: ThemeAnchors;
 }
 
-export declare function ColorPicker({ value, onChange, label, size, inline, disabled, presetGroups, id, style, }: ColorPickerProps): JSX_2.Element;
+export declare function ColorPicker({ value, onChange, label, size, inline, disabled, presetGroups, portalContainer, id, style, }: ColorPickerProps): JSX_2.Element;
 
 export declare namespace ColorPicker {
     var displayName: string;
@@ -293,6 +293,8 @@ export declare interface ColorPickerProps {
     inline?: boolean;
     disabled?: boolean;
     presetGroups?: ColorPresetGroup[];
+    /** DOM element to portal the popover into. Defaults to document.body. Use this to preserve CSS custom property inheritance for per-section theming. */
+    portalContainer?: HTMLElement | null;
     id?: string;
     style?: CSSProperties;
 }
@@ -772,6 +774,69 @@ export declare function makeLibraryCSS(tokens: LucentTokens, selector?: string):
 
 export declare const MANIFEST_SPEC_VERSION = "1.0";
 
+export declare function Menu({ trigger, children, placement, size, open: controlledOpen, onOpenChange, portalContainer, style, }: MenuProps): JSX_2.Element;
+
+export declare function MenuGroup({ label, children, style }: MenuGroupProps): JSX_2.Element;
+
+export declare interface MenuGroupProps {
+    /** Label shown above the group. */
+    label: string;
+    children: ReactNode;
+    style?: CSSProperties;
+}
+
+export declare function MenuItem({ onSelect, children, icon, shortcut, disabled, danger, selected, style, }: MenuItemProps): JSX_2.Element;
+
+export declare interface MenuItemProps {
+    /** Fires when item is selected (click or Enter). */
+    onSelect: () => void;
+    /** Label content. */
+    children: ReactNode;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Trailing shortcut hint text. */
+    shortcut?: string;
+    /** Disables selection and grays out. */
+    disabled?: boolean;
+    /** Renders in danger color. */
+    danger?: boolean;
+    /** Marks the item as currently selected (shows checkmark). */
+    selected?: boolean;
+    /** Style overrides. */
+    style?: CSSProperties;
+}
+
+export declare const MenuManifest: ComponentManifest;
+
+export declare type MenuPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+
+export declare interface MenuProps {
+    /** Element that toggles the menu on click. */
+    trigger: ReactNode;
+    /** MenuItem, MenuSeparator, or MenuGroup elements. */
+    children: ReactNode;
+    /** Preferred placement relative to the trigger. */
+    placement?: MenuPlacement;
+    /** Size of the menu items. */
+    size?: MenuSize;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** DOM element to portal the popover into. Defaults to document.body. Use this to preserve CSS custom property inheritance for per-section theming. */
+    portalContainer?: HTMLElement | null;
+    /** Style overrides for the popover panel. */
+    style?: CSSProperties;
+}
+
+export declare function MenuSeparator({ style }: MenuSeparatorProps): JSX_2.Element;
+
+export declare interface MenuSeparatorProps {
+    style?: CSSProperties;
+}
+
+export declare type MenuSize = 'sm' | 'md' | 'lg';
+
 export declare const modernPreset: DesignPreset;
 
 declare interface MotionTokens {