lucent-ui 0.14.2 → 0.15.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;
@@ -402,9 +425,7 @@ export declare interface CompositionNode {
  * @example
  * const tokens = createTheme({
  *   bgBase:         '#ffffff',
- *   surface:        '#f9fafb',
  *   borderDefault:  '#e5e7eb',
- *   textPrimary:    '#111827',
  *   accentDefault:  '#6366f1',
  *   successDefault: '#22c55e',
  *   warningDefault: '#f59e0b',
@@ -1004,6 +1025,7 @@ declare interface SemanticColorTokens {
     surfaceSecondary: string;
     surfaceRaised: string;
     surfaceOverlay: string;
+    surfaceTint: string;
     borderDefault: string;
     borderSubtle: string;
     borderStrong: string;
@@ -1250,9 +1272,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 +1280,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.