lucent-ui 0.14.2 → 0.16.0

package/dist/index.d.ts

@@ -130,7 +130,7 @@ export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export declare type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 
-export declare function Card({ header, footer, children, padding, shadow, radius, style, }: CardProps): JSX_2.Element;
+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 CardBleed({ children, style }: CardBleedProps): JSX_2.Element;
 
@@ -144,19 +144,42 @@ export declare const CardManifest: ComponentManifest;
 export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 
 export declare interface CardProps {
+    /** Elevation variant — controls background, border, and default shadow. */
+    variant?: CardVariant;
     header?: ReactNode;
     footer?: ReactNode;
     children: ReactNode;
     padding?: CardPadding;
+    /** Overrides the variant's default shadow when set explicitly. */
     shadow?: CardShadow;
     radius?: CardRadius;
     style?: CSSProperties;
+    /** Makes the card clickable. Renders as <button>. */
+    onClick?: MouseEventHandler;
+    /** Makes the card a link. Renders as <a>. */
+    href?: string;
+    /** Passed to <a> when href is set. */
+    target?: string;
+    /** Passed to <a> when href is set. */
+    rel?: string;
+    /** Disables interactive behavior. */
+    disabled?: boolean;
+    /** Colored left-edge accent bar indicating status. */
+    status?: CardStatus;
+    /** Accent inset ring indicating selection. */
+    selected?: boolean;
+    /** Full-bleed content rendered at the top (before header). */
+    media?: ReactNode;
 }
 
 export declare type CardRadius = 'none' | 'sm' | 'md' | 'lg';
 
 export declare type CardShadow = 'none' | 'sm' | 'md' | 'lg';
 
+export declare type CardStatus = 'success' | 'warning' | 'danger' | 'info';
+
+export declare type CardVariant = 'ghost' | 'outline' | 'filled' | 'elevated' | 'combo';
+
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 
 export declare const CheckboxManifest: ComponentManifest;
@@ -254,7 +277,7 @@ export declare interface ColorPalette {
     dark: ThemeAnchors;
 }
 
-export declare function ColorPicker({ value, onChange, label, disabled, presetGroups, id, style, }: ColorPickerProps): JSX_2.Element;
+export declare function ColorPicker({ value, onChange, label, size, inline, disabled, presetGroups, id, style, }: ColorPickerProps): JSX_2.Element;
 
 export declare namespace ColorPicker {
     var displayName: string;
@@ -264,6 +287,10 @@ export declare interface ColorPickerProps {
     value?: string;
     onChange?: (hex: string) => void;
     label?: string;
+    /** Swatch trigger size. Default: "md" (40px). */
+    size?: 'sm' | 'md';
+    /** Place label beside the swatch instead of above it. */
+    inline?: boolean;
     disabled?: boolean;
     presetGroups?: ColorPresetGroup[];
     id?: string;
@@ -402,9 +429,7 @@ export declare interface CompositionNode {
  * @example
  * const tokens = createTheme({
  *   bgBase:         '#ffffff',
- *   surface:        '#f9fafb',
  *   borderDefault:  '#e5e7eb',
- *   textPrimary:    '#111827',
  *   accentDefault:  '#6366f1',
  *   successDefault: '#22c55e',
  *   warningDefault: '#f59e0b',
@@ -786,7 +811,7 @@ export declare interface MultiSelectProps {
 
 declare type MultiSelectSize = 'sm' | 'md' | 'lg';
 
-export declare function NavLink({ children, href, isActive, icon, disabled, onClick, as, style, }: NavLinkProps): JSX_2.Element;
+export declare function NavLink({ children, href, isActive, icon, disabled, inverse, onClick, as, style, }: NavLinkProps): JSX_2.Element;
 
 export declare interface NavLinkProps {
     children: ReactNode;
@@ -794,6 +819,8 @@ export declare interface NavLinkProps {
     isActive?: boolean;
     icon?: ReactNode;
     disabled?: boolean;
+    /** Uses surface background instead of accent for the active state. */
+    inverse?: boolean;
     onClick?: MouseEventHandler;
     /** Polymorphic root element. Defaults to `<a>`. Use e.g. `Link` from react-router. */
     as?: React.ElementType;
@@ -802,7 +829,7 @@ export declare interface NavLinkProps {
 
 export declare const oceanPalette: ColorPalette;
 
-export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
+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 {
     children: ReactNode;
@@ -824,6 +851,8 @@ export declare interface PageLayoutProps {
     footer?: ReactNode;
     /** Footer height in px or any CSS value. Default: 48 */
     footerHeight?: number | string;
+    /** Background token for chrome regions (header, sidebar, footer). Default: "bgBase" */
+    chromeBackground?: 'bgBase' | 'bgSubtle' | 'surface';
     /** Style overrides for the main content card (border, borderRadius, boxShadow, etc.) */
     mainStyle?: CSSProperties;
     style?: CSSProperties;
@@ -1004,6 +1033,7 @@ declare interface SemanticColorTokens {
     surfaceSecondary: string;
     surfaceRaised: string;
     surfaceOverlay: string;
+    surfaceTint: string;
     borderDefault: string;
     borderSubtle: string;
     borderStrong: string;
@@ -1250,9 +1280,7 @@ export declare type Theme = 'light' | 'dark';
  * @example
  * const myTheme = createTheme({
  *   bgBase:          '#ffffff',
- *   surface:         '#f9fafb',
  *   borderDefault:   '#e5e7eb',
- *   textPrimary:     '#111827',
  *   accentDefault:   '#6366f1',
  *   successDefault:  '#22c55e',
  *   warningDefault:  '#f59e0b',
@@ -1260,7 +1288,7 @@ export declare type Theme = 'light' | 'dark';
  *   infoDefault:     '#3b82f6',
  * });
  */
-export declare type ThemeAnchors = Pick<LucentTokens, 'bgBase' | 'surface' | 'borderDefault' | 'accentDefault' | 'successDefault' | 'warningDefault' | 'dangerDefault' | 'infoDefault'> & Partial<Pick<LucentTokens, 'textPrimary'>>;
+export declare type ThemeAnchors = Pick<LucentTokens, 'bgBase' | 'borderDefault' | 'accentDefault' | 'successDefault' | 'warningDefault' | 'dangerDefault' | 'infoDefault'> & Partial<Pick<LucentTokens, 'textPrimary' | 'surface'>>;
 
 /**
  * Semantic guidance for each ThemeAnchors key.