lucent-ui 0.40.0 → 0.42.0

package/dist/index.d.ts

@@ -1187,6 +1187,9 @@ export declare interface LucentTokens extends SemanticColorTokens, TypographyTok
  * Generates a CSS string of custom properties from a token set.
  * Inject the result into a <style> tag or a CSS-in-JS solution.
  *
+ * Token values are sanitized to prevent CSS injection — characters that
+ * could break out of a property value context (`{};<>@\`) are stripped.
+ *
  * @example
  * const css = makeLibraryCSS(lightTokens);
  * document.getElementById('lucent-tokens').textContent = css;
@@ -1448,18 +1451,34 @@ export declare interface PageHeaderProps {
     style?: CSSProperties;
 }
 
-export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, chromeBackground, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
+export declare function PageLayout({ children, header, sidebar, sidebarHeader, sidebarFooter, sidebarWidth, sidebarCollapsedWidth, headerHeight, sidebarCollapsed, onSidebarCollapsedChange, sidebarMode, sidebarDrawerBreakpoint, sidebarDrawerOpen, onSidebarDrawerOpenChange, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, chromeBackground, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
 
 export declare interface PageLayoutProps {
     children: ReactNode;
     header?: ReactNode;
     sidebar?: ReactNode;
+    /** Pinned content at the top of the sidebar — logo, app name, branding. */
+    sidebarHeader?: ReactNode;
+    /** Pinned content at the bottom of the sidebar — account, help, secondary actions. */
+    sidebarFooter?: ReactNode;
     /** Sidebar width in px or any CSS value. Default: 240 */
     sidebarWidth?: number | string;
+    /** Width the sidebar collapses to (e.g. 56 for icon-only). Default: 0 */
+    sidebarCollapsedWidth?: number | string;
     /** Header height in px or any CSS value. Default: 48 */
     headerHeight?: number | string;
-    /** Collapse the sidebar to zero width */
+    /** Collapse the sidebar to sidebarCollapsedWidth */
     sidebarCollapsed?: boolean;
+    /** Called when the sidebar collapse handle is clicked. When provided, renders a handle on the sidebar edge. */
+    onSidebarCollapsedChange?: (collapsed: boolean) => void;
+    /** Sidebar display mode. 'inline' = always inline, 'drawer' = always drawer overlay, 'auto' = switches at breakpoint. Default: 'auto' */
+    sidebarMode?: 'inline' | 'drawer' | 'auto';
+    /** Viewport width (px) below which sidebar switches to drawer mode. Only used when sidebarMode='auto'. Default: 768 */
+    sidebarDrawerBreakpoint?: number;
+    /** Controlled open state when sidebar is in drawer mode. */
+    sidebarDrawerOpen?: boolean;
+    /** Called when the drawer open state changes (backdrop click, escape key). */
+    onSidebarDrawerOpenChange?: (open: boolean) => void;
     /** Right panel content rendered as a flex sibling of <main> */
     rightSidebar?: ReactNode;
     /** Right panel width in px or any CSS value. Default: 240 */
@@ -1612,6 +1631,15 @@ export declare interface RowProps {
     'aria-labelledby'?: string;
 }
 
+/**
+ * Returns the href unchanged if it uses a safe protocol (http, https, mailto, tel,
+ * or relative path), otherwise returns `undefined` to prevent navigation.
+ *
+ * Blocks `javascript:`, `data:`, `vbscript:`, and any other executable protocol
+ * that could be used for XSS via href injection.
+ */
+export declare function sanitizeHref(href: string | undefined): string | undefined;
+
 export declare function SearchInput({ value, onChange, mode, placeholder, size, label, helperText, errorText, results, onResultSelect, isLoading, disabled, id, style, }: SearchInputProps): JSX_2.Element;
 
 export declare const SearchInputManifest: ComponentManifest;
@@ -1997,7 +2025,7 @@ export declare interface TableProps extends HTMLAttributes<HTMLTableElement> {
     striped?: boolean;
 }
 
-export declare function Tabs({ tabs, defaultValue, value, onChange, variant, style }: TabsProps): JSX_2.Element;
+export declare function Tabs({ tabs, defaultValue, value, onChange, variant, size, style }: TabsProps): JSX_2.Element;
 
 export declare interface TabsProps {
     tabs: TabItem[];
@@ -2005,9 +2033,12 @@ export declare interface TabsProps {
     value?: string;
     onChange?: (value: string) => void;
     variant?: TabsVariant;
+    size?: TabsSize;
     style?: CSSProperties;
 }
 
+export declare type TabsSize = 'sm' | 'md';
+
 export declare type TabsVariant = 'underline' | 'pills';
 
 export declare function Tag({ children, variant, size, onDismiss, disabled }: TagProps): JSX_2.Element;
@@ -2219,7 +2250,7 @@ export declare interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputE
 
 export declare type ToggleSize = 'sm' | 'md' | 'lg';
 
-export declare function Tooltip({ content, children, placement, delay, open }: TooltipProps): JSX_2.Element;
+export declare function Tooltip({ content, children, placement, delay, open, interactive }: TooltipProps): JSX_2.Element;
 
 export declare const TooltipManifest: ComponentManifest;
 
@@ -2233,6 +2264,8 @@ export declare interface TooltipProps {
     delay?: number;
     /** Controlled visibility. When provided, overrides hover behavior. */
     open?: boolean;
+    /** When true, the popup stays visible while hovered and allows pointer events inside. */
+    interactive?: boolean;
 }
 
 declare interface TypographyTokens {
@@ -2281,6 +2314,14 @@ export declare interface UsageExample {
  */
 export declare function useLucent(): LucentContextValue;
 
+/**
+ * SSR-safe hook that subscribes to a CSS media query and returns whether it matches.
+ *
+ * @param query - A valid CSS media query string, e.g. `"(max-width: 767px)"`
+ * @returns `true` when the query matches, `false` otherwise (and on SSR).
+ */
+export declare function useMediaQuery(query: string): boolean;
+
 export declare function useToast(): ToastContextValue;
 
 /**