lucent-ui 0.18.0 → 0.19.0

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;
 }
@@ -580,6 +582,8 @@ export declare interface DesignPreset {
     shadow: ShadowPreset;
 }
 
+declare type DismissFn = (id: string) => void;
+
 export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
 
 export declare const DividerManifest: ComponentManifest;
@@ -772,7 +776,7 @@ 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, style, }: MenuProps): JSX_2.Element;
+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;
 
@@ -821,6 +825,8 @@ export declare interface MenuProps {
     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;
 }
@@ -1388,6 +1394,57 @@ export declare interface TimelineProps {
     style?: CSSProperties;
 }
 
+export declare interface ToastAction {
+    label: string;
+    onClick: () => void;
+    /** Render as an underlined link or a bordered button. Default `'button'`. */
+    style?: ToastActionStyle;
+}
+
+export declare type ToastActionStyle = 'link' | 'button';
+
+declare interface ToastContextValue {
+    toast: ToastFn;
+    dismiss: DismissFn;
+}
+
+declare type ToastFn = (options: ToastOptions) => string;
+
+export declare const ToastManifest: ComponentManifest;
+
+export declare interface ToastOptions {
+    /** Primary message line. */
+    title: string;
+    /** Optional secondary description (supports multi-line). */
+    description?: string;
+    /** Visual variant — drives icon, border color, and tint. */
+    variant?: ToastVariant;
+    /** Auto-dismiss duration in ms. Pass `Infinity` to disable. Default 5000. */
+    duration?: number;
+    /** Action button or link rendered inline. */
+    action?: ToastAction;
+    /** Optional custom icon. */
+    icon?: ReactNode;
+}
+
+export declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare function ToastProvider({ children, position, duration: defaultDuration, max, portalContainer, }: ToastProviderProps): JSX_2.Element;
+
+export declare interface ToastProviderProps {
+    children: ReactNode;
+    /** Default position for all toasts. Default `'bottom-right'`. */
+    position?: ToastPosition;
+    /** Default auto-dismiss duration in ms. Default `5000`. */
+    duration?: number;
+    /** Max visible toasts at once. Default `5`. */
+    max?: number;
+    /** Portal container element. Default `document.body`. */
+    portalContainer?: HTMLElement;
+}
+
+export declare type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
 export declare function Toggle({ label, size, checked, defaultChecked, contained, helperText, align, disabled, id, onChange, style, ...rest }: ToggleProps): JSX_2.Element;
 
 export declare const ToggleManifest: ComponentManifest;
@@ -1467,6 +1524,8 @@ export declare interface UsageExample {
  */
 export declare function useLucent(): LucentContextValue;
 
+export declare function useToast(): ToastContextValue;
+
 /**
  * Validates a ComponentManifest object at runtime.
  * Returns a result object — does not throw.