lucent-ui 0.37.0 → 0.38.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
+import { ComponentType } from 'react';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
@@ -7,6 +8,7 @@ import { HTMLAttributes } from 'react';
 import { ImgHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -142,7 +144,7 @@ export declare const brandPalette: ColorPalette;
  */
 export declare const brandTokens: Partial<LucentTokens>;
 
-export declare function Breadcrumb({ items, separator, style }: BreadcrumbProps): JSX_2.Element;
+export declare function Breadcrumb({ items, separator, style, LinkComponent }: BreadcrumbProps): JSX_2.Element;
 
 export declare interface BreadcrumbItem {
     label: ReactNode;
@@ -150,11 +152,44 @@ export declare interface BreadcrumbItem {
     onClick?: () => void;
 }
 
+/**
+ * Props that Breadcrumb passes to a user-supplied `LinkComponent`.
+ * Shape mirrors a native `<a>` so simple drop-ins work and custom link
+ * primitives (react-router `<Link>`, Next.js `<Link>`, etc.) can adapt
+ * with a thin wrapper.
+ */
+export declare interface BreadcrumbLinkProps {
+    href: string;
+    children: ReactNode;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    onMouseEnter?: (event: MouseEvent_2<HTMLElement>) => void;
+    onMouseLeave?: (event: MouseEvent_2<HTMLElement>) => void;
+}
+
 export declare interface BreadcrumbProps {
     items: BreadcrumbItem[];
     /** Separator between items. Defaults to "/" */
     separator?: ReactNode;
     style?: CSSProperties;
+    /**
+     * Optional custom link component used for items with an `href`.
+     * Enables SPA-friendly navigation (react-router, Next.js, etc.) without
+     * falling back to a full-page reload.
+     *
+     * The component receives `{ href, children, style, onClick, onMouseEnter, onMouseLeave }`.
+     * If your link primitive uses a different prop name for the URL (e.g. react-router's
+     * `to`), wrap it in a small adapter:
+     *
+     * ```tsx
+     * const RouterLink = ({ href, ...rest }) => <Link to={href} {...rest} />;
+     * <Breadcrumb LinkComponent={RouterLink} items={...} />
+     * ```
+     *
+     * Your adapter must forward `style` to the rendered DOM element so Breadcrumb's
+     * typography and hover styling are preserved.
+     */
+    LinkComponent?: ComponentType<BreadcrumbLinkProps>;
 }
 
 /**
@@ -177,7 +212,7 @@ export declare const brutalistPreset: DesignPreset;
  */
 export declare const brutalistShadow: ShadowPreset;
 
-export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 export declare function ButtonGroup({ children, style, }: ButtonGroupProps): JSX_2.Element;
 
@@ -196,7 +231,7 @@ export declare interface ButtonGroupProps {
 
 export declare const ButtonManifest: ComponentManifest;
 
-export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'href'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     loading?: boolean;
@@ -211,6 +246,20 @@ export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
     disableHoverStyles?: boolean;
     /** If false, the component renders without any border. Useful when you want a solid "flat" look. */
     bordered?: boolean;
+    /**
+     * When set, renders the Button as an `<a href={href}>` instead of a native `<button>`.
+     * Preserves full anchor affordances — middle-click, cmd-click, right-click "copy link",
+     * and "open in new tab" — which an onClick handler cannot.
+     *
+     * Useful for `mailto:`/`tel:` quick actions and external links that should look like buttons.
+     * When combined with `disabled`, the anchor is rendered with `aria-disabled="true"` and its
+     * `href` is removed so it can't be navigated.
+     */
+    href?: string;
+    /** Forwarded to the `<a>` element when `href` is set. */
+    target?: string;
+    /** Forwarded to the `<a>` element when `href` is set. */
+    rel?: string;
 }
 
 export declare type ButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
@@ -1253,6 +1302,44 @@ export declare const neumorphicShadow: ShadowPreset;
 
 export declare const oceanPalette: ColorPalette;
 
+export declare function PageHeader({ title, subtitle, breadcrumbs, action, secondaryActions, hideDivider, style, }: PageHeaderProps): JSX_2.Element;
+
+export declare interface PageHeaderAction {
+    label: ReactNode;
+    onClick?: () => void;
+    /** Optional href — when set, the underlying Button renders as a link via onClick navigation. */
+    href?: string;
+    /** Override the default variant. Primary action defaults to "primary", secondary actions to "outline". */
+    variant?: ButtonVariant;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    'aria-label'?: string;
+}
+
+export declare const PageHeaderManifest: ComponentManifest;
+
+export declare interface PageHeaderProps {
+    /** Page title — rendered as an h1 in display font. */
+    title: string;
+    /** Optional subtitle or metadata line below the title. */
+    subtitle?: ReactNode;
+    /** Breadcrumb items rendered above the title. */
+    breadcrumbs?: BreadcrumbItem[];
+    /** Primary CTA rendered rightmost. Pass `null` to explicitly omit. */
+    action?: PageHeaderAction | null;
+    /**
+     * 0–3 secondary actions rendered to the left of the primary `action`.
+     * Defaults to `variant="outline"` so they stay visually subordinate to the primary CTA.
+     * For more than 3 actions, use a SplitButton or overflow menu instead.
+     */
+    secondaryActions?: PageHeaderAction[];
+    /** Hide the bottom divider. Default: false. */
+    hideDivider?: boolean;
+    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 interface PageLayoutProps {
@@ -1394,7 +1481,7 @@ export declare function Row({ gap, align, justify, as, wrap, children, style, ..
 
 export declare type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 
-export declare type RowAs = 'div' | 'section' | 'nav' | 'form' | 'fieldset' | 'ul' | 'ol';
+export declare type RowAs = 'div' | 'section' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'article' | 'form' | 'fieldset' | 'ul' | 'ol';
 
 export declare type RowGap = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24';
 
@@ -1681,7 +1768,7 @@ export declare function Stack({ gap, align, justify, as, wrap, children, style,
 
 export declare type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 
-export declare type StackAs = 'div' | 'section' | 'nav' | 'form' | 'fieldset' | 'ul' | 'ol';
+export declare type StackAs = 'div' | 'section' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'article' | 'form' | 'fieldset' | 'ul' | 'ol';
 
 export declare type StackGap = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24';