lucent-ui 0.23.0 → 0.25.0

package/dist/index.d.ts

@@ -145,7 +145,7 @@ export declare type ButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 
 export declare type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'danger-outline' | 'danger-ghost';
 
-export declare function Card({ variant, header, footer, children, padding, shadow, radius, style, onClick, href, target, rel, disabled, status, selected, media, }: CardProps): JSX_2.Element;
+export declare function Card({ variant, header, footer, children, padding, shadow, radius, style, onClick, href, target, rel, disabled, status, selected, hoverable, media, }: CardProps): JSX_2.Element;
 
 export declare function CardBleed({ children, style }: CardBleedProps): JSX_2.Element;
 
@@ -183,6 +183,8 @@ export declare interface CardProps {
     status?: CardStatus;
     /** Accent inset ring indicating selection. */
     selected?: boolean;
+    /** Enables hover/press visual feedback without making the card a button or link. */
+    hoverable?: boolean;
     /** Full-bleed content rendered at the top (before header). */
     media?: ReactNode;
 }
@@ -275,7 +277,7 @@ export declare interface CodeBlockTab {
 
 export declare type CodeBlockVariant = 'code' | 'prompt';
 
-export declare function Collapsible({ trigger, children, defaultOpen, open, onOpenChange, style }: CollapsibleProps): JSX_2.Element;
+export declare function Collapsible({ trigger, children, defaultOpen, open, onOpenChange, padded, disabled, style }: CollapsibleProps): JSX_2.Element;
 
 export declare interface CollapsibleProps {
     trigger: ReactNode;
@@ -283,6 +285,10 @@ export declare interface CollapsibleProps {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** When false, removes the default content padding so children can provide their own. */
+    padded?: boolean;
+    /** Disables the trigger button. */
+    disabled?: boolean;
     style?: CSSProperties;
 }
 
@@ -913,6 +919,76 @@ export declare interface NavLinkProps {
     style?: CSSProperties;
 }
 
+export declare function NavMenu({ children, orientation, inverse, size, hasIcons, style, 'aria-label': ariaLabel, }: NavMenuProps): JSX_2.Element;
+
+export declare namespace NavMenu {
+    var Item: typeof NavMenuItem;
+    var Group: typeof NavMenuGroup;
+    var Sub: typeof NavMenuSub;
+    var Separator: typeof NavMenuSeparator;
+}
+
+export declare function NavMenuGroup({ children, label, defaultOpen, open, onOpenChange, collapsible: collapsibleProp, style, }: NavMenuGroupProps): JSX_2.Element;
+
+export declare interface NavMenuGroupProps {
+    children: ReactNode;
+    /** Section header label. */
+    label?: ReactNode;
+    /** Whether this group starts open. Only applies to vertical orientation. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when the group open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the group is collapsible. Defaults to `true` when a label is provided. */
+    collapsible?: boolean;
+    style?: CSSProperties;
+}
+
+export declare function NavMenuItem({ children, href, isActive, icon, badge, disabled, onClick, as, style, }: NavMenuItemProps): JSX_2.Element;
+
+export declare interface NavMenuItemProps {
+    children: ReactNode;
+    href?: string;
+    isActive?: boolean;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+    onClick?: MouseEventHandler;
+    /** Polymorphic root element. Defaults to `<a>`. Use e.g. `Link` from react-router. */
+    as?: React.ElementType;
+    style?: CSSProperties;
+}
+
+export declare interface NavMenuProps {
+    children: ReactNode;
+    /** Layout direction. Defaults to `"vertical"`. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Uses surface background instead of accent for the active state. */
+    inverse?: boolean;
+    /** Size variant. `"sm"` for compact sidebar layouts. Defaults to `"md"`. */
+    size?: NavMenuSize;
+    /** Whether items use icons. Tightens left padding so group headers align with icons. */
+    hasIcons?: boolean;
+    style?: CSSProperties;
+    /** Accessible label for the `<nav>` element. */
+    'aria-label'?: string;
+}
+
+export declare function NavMenuSeparator({ style }: NavMenuSeparatorProps): JSX_2.Element;
+
+export declare interface NavMenuSeparatorProps {
+    style?: CSSProperties;
+}
+
+declare type NavMenuSize = 'sm' | 'md' | 'lg';
+
+export declare function NavMenuSub({ children }: NavMenuSubProps): JSX_2.Element;
+
+export declare interface NavMenuSubProps {
+    children: ReactNode;
+}
+
 export declare const oceanPalette: ColorPalette;
 
 export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, chromeBackground, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
@@ -1079,13 +1155,16 @@ export declare interface RowProps {
     'aria-labelledby'?: string;
 }
 
-export declare function SearchInput({ value, onChange, placeholder, size, label, helperText, errorText, results, onResultSelect, isLoading, disabled, id, style, }: SearchInputProps): JSX_2.Element;
+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;
 
+export declare type SearchInputMode = 'search' | 'filter';
+
 export declare interface SearchInputProps {
     value: string;
     onChange: (value: string) => void;
+    mode?: SearchInputMode;
     placeholder?: string;
     size?: InputSize;
     label?: string;