lucent-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { ImgHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MouseEventHandler } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SelectHTMLAttributes } from 'react';
@@ -55,7 +56,7 @@ export declare interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageEle
 
 export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-export declare function Badge({ variant, size, dot, children }: BadgeProps): JSX_2.Element;
+export declare function Badge({ variant, size, dot, children, style }: BadgeProps): JSX_2.Element;
 
 export declare const BadgeManifest: ComponentManifest;
 
@@ -64,6 +65,7 @@ export declare interface BadgeProps {
     size?: BadgeSize;
     children: ReactNode;
     dot?: boolean;
+    style?: CSSProperties;
 }
 
 export declare type BadgeSize = 'sm' | 'md';
@@ -83,6 +85,21 @@ export declare type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger'
  */
 export declare const brandTokens: Partial<LucentTokens>;
 
+export declare function Breadcrumb({ items, separator, style }: BreadcrumbProps): JSX_2.Element;
+
+export declare interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+
+export declare interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Separator between items. Defaults to "/" */
+    separator?: ReactNode;
+    style?: CSSProperties;
+}
+
 export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 
 export declare const ButtonManifest: ComponentManifest;
@@ -92,10 +109,14 @@ export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
     size?: ButtonSize;
     loading?: boolean;
     fullWidth?: boolean;
+    /** When true, spaces content to the edges (justifyContent: space-between). Useful with fullWidth + rightIcon/chevron. */
+    spread?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     /** Appends a chevron-down icon after the label (or rightIcon). Useful for dropdown triggers. */
     chevron?: boolean;
+    /** Disables the built-in hover background/border overrides. Use when passing custom colours via style. */
+    disableHoverStyles?: boolean;
 }
 
 export declare type ButtonSize = 'sm' | 'md' | 'lg';
@@ -134,6 +155,17 @@ export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInpu
 
 export declare type CheckboxSize = 'sm' | 'md';
 
+export declare function Collapsible({ trigger, children, defaultOpen, open, onOpenChange, style }: CollapsibleProps): JSX_2.Element;
+
+export declare interface CollapsibleProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    style?: CSSProperties;
+}
+
 /**
  * The domain of a component.
  * "neutral" means the component is domain-agnostic and reusable
@@ -205,7 +237,7 @@ export declare interface CompositionNode {
 
 export declare const darkTokens: LucentTokens;
 
-export declare function Divider({ orientation, label, spacing }: DividerProps): JSX_2.Element;
+export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
 
 export declare const DividerManifest: ComponentManifest;
 
@@ -215,6 +247,7 @@ export declare interface DividerProps {
     orientation?: DividerOrientation;
     label?: string;
     spacing?: string;
+    style?: CSSProperties;
 }
 
 export declare function EmptyState({ illustration, title, description, action, style, }: EmptyStateProps): JSX_2.Element;
@@ -340,6 +373,37 @@ declare interface MotionTokens {
     easingDecelerate: string;
 }
 
+export declare function NavLink({ children, href, isActive, icon, disabled, onClick, as, style, }: NavLinkProps): JSX_2.Element;
+
+export declare interface NavLinkProps {
+    children: ReactNode;
+    href?: string;
+    isActive?: boolean;
+    icon?: 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 function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
+
+export declare interface PageLayoutProps {
+    children: ReactNode;
+    header?: ReactNode;
+    sidebar?: ReactNode;
+    /** Sidebar width in px or any CSS value. Default: 240 */
+    sidebarWidth?: number | string;
+    /** Header height in px or any CSS value. Default: 48 */
+    headerHeight?: number | string;
+    /** Collapse the sidebar to zero width */
+    sidebarCollapsed?: boolean;
+    /** Style overrides for the main content card (border, borderRadius, boxShadow, etc.) */
+    mainStyle?: CSSProperties;
+    style?: CSSProperties;
+}
+
 export declare interface PropDescriptor {
     /** Prop name as it appears in the component API */
     name: string;
@@ -529,6 +593,23 @@ export declare interface SpinnerProps {
 
 export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
+export declare interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+
+export declare function Tabs({ tabs, defaultValue, value, onChange, style }: TabsProps): JSX_2.Element;
+
+export declare interface TabsProps {
+    tabs: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    style?: CSSProperties;
+}
+
 export declare function Tag({ children, variant, size, onDismiss, disabled }: TagProps): JSX_2.Element;
 
 export declare const TagManifest: ComponentManifest;