lucent-ui 0.39.1 → 0.40.0

package/dist/index.d.ts

@@ -80,6 +80,47 @@ export declare interface AlertProps {
 
 export declare type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
 
+export declare function AreaChart({ data, series, width, height, color, gridLines, showDots, dotRadius, smooth, fillOpacity, formatValue, xLabelCount, ariaLabel, style, }: AreaChartProps): JSX_2.Element | null;
+
+export declare interface AreaChartDataPoint {
+    label: string;
+    value: number;
+}
+
+export declare const AreaChartManifest: ComponentManifest;
+
+export declare interface AreaChartProps {
+    /** Single-series shorthand. */
+    data?: AreaChartDataPoint[];
+    /** Multi-series data. */
+    series?: AreaChartSeries[];
+    width?: number | string;
+    height?: number;
+    /** Color for single-series mode. */
+    color?: ChartColorVariant | string;
+    gridLines?: boolean;
+    /** Show dots at data points. */
+    showDots?: boolean;
+    dotRadius?: number;
+    /** Use smooth curves. */
+    smooth?: boolean;
+    /** Area fill opacity (0–1). */
+    fillOpacity?: number;
+    /** Custom y-axis value formatter. */
+    formatValue?: (value: number) => string;
+    /** Max number of x-axis labels to display. */
+    xLabelCount?: number;
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+
+export declare interface AreaChartSeries {
+    id: string;
+    name: string;
+    data: AreaChartDataPoint[];
+    color?: string;
+}
+
 /**
  * Asserts a manifest is valid. Throws a descriptive error if not.
  * Use in tests or at component module load time.
@@ -115,6 +156,36 @@ export declare type BadgeSize = 'sm' | 'md';
 
 export declare type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
 
+export declare function BarChart({ data, width, height, color, gridLines, showValues, formatValue, barGap, barRadius, ariaLabel, style, }: BarChartProps): JSX_2.Element | null;
+
+export declare interface BarChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+export declare const BarChartManifest: ComponentManifest;
+
+export declare interface BarChartProps {
+    data: BarChartDataPoint[];
+    width?: number | string;
+    height?: number;
+    /** Bar color variant or CSS color. Per-point color overrides this. */
+    color?: ChartColorVariant | string;
+    /** Show horizontal grid lines. */
+    gridLines?: boolean;
+    /** Show value labels above bars. */
+    showValues?: boolean;
+    /** Custom value formatter for y-axis and value labels. */
+    formatValue?: (value: number) => string;
+    /** Gap between bars as fraction of slot width (0–1). */
+    barGap?: number;
+    /** Corner radius on bar tops. */
+    barRadius?: number;
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+
 /**
  * Modern Bento — the product grid standard.
  * Layered natural shadows, balanced roundness, consistent spacing.
@@ -323,6 +394,16 @@ export declare type CardStatus = 'success' | 'warning' | 'danger' | 'info';
 
 export declare type CardVariant = 'ghost' | 'outline' | 'filled' | 'elevated' | 'combo';
 
+declare const chartColors: {
+    readonly accent: "var(--lucent-accent-default)";
+    readonly success: "var(--lucent-success-default)";
+    readonly warning: "var(--lucent-warning-default)";
+    readonly danger: "var(--lucent-danger-default)";
+    readonly info: "var(--lucent-info-default)";
+};
+
+declare type ChartColorVariant = keyof typeof chartColors;
+
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 
 export declare const CheckboxManifest: ComponentManifest;
@@ -757,6 +838,33 @@ export declare interface DividerProps {
     style?: CSSProperties;
 }
 
+export declare function DonutChart({ data, size, thickness, segmentGap, centerLabel, startAngle, ariaLabel, style, }: DonutChartProps): JSX_2.Element | null;
+
+export declare const DonutChartManifest: ComponentManifest;
+
+export declare interface DonutChartProps {
+    data: DonutChartSegment[];
+    /** Overall pixel size (square). */
+    size?: number;
+    /** Ring thickness as fraction of radius (0–1). */
+    thickness?: number;
+    /** Gap between segments in degrees. */
+    segmentGap?: number;
+    /** Content to display in the center of the ring. */
+    centerLabel?: ReactNode;
+    /** Starting angle in degrees (0 = 12 o'clock). */
+    startAngle?: number;
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+
+export declare interface DonutChartSegment {
+    label: string;
+    /** Absolute value (chart computes proportions). */
+    value: number;
+    color?: string;
+}
+
 /**
  * Elevated — light mode uses stronger drop shadows for clear lift.
  * Dark mode shifts to "inset glow" — light radiating from inside
@@ -1707,6 +1815,32 @@ declare interface SpacingTokens {
 
 export declare const spaciousDensity: DensityPreset;
 
+export declare function SparkLine({ data, width, height, color, filled, strokeWidth, smooth, formatTooltip, ariaLabel, style, }: SparkLineProps): JSX_2.Element | null;
+
+export declare const SparkLineManifest: ComponentManifest;
+
+export declare interface SparkLineProps {
+    /** Array of numeric values representing the trend. */
+    data: number[];
+    /** Pixel width. Defaults to '100%'. */
+    width?: number | string;
+    /** Pixel height. Defaults to 32. */
+    height?: number;
+    /** Color of the line. Accepts a variant name or any CSS color string. */
+    color?: ChartColorVariant | string;
+    /** Show a translucent area fill below the line. */
+    filled?: boolean;
+    /** Line stroke width in SVG units. */
+    strokeWidth?: number;
+    /** Use smooth curves (monotone-x). Defaults to true. */
+    smooth?: boolean;
+    /** Custom tooltip formatter. */
+    formatTooltip?: (value: number, index: number) => string;
+    /** Accessible label for the chart SVG. */
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+
 export declare function Spinner({ size, label, color }: SpinnerProps): JSX_2.Element;
 
 export declare const SpinnerManifest: ComponentManifest;
@@ -2085,7 +2219,7 @@ export declare interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputE
 
 export declare type ToggleSize = 'sm' | 'md' | 'lg';
 
-export declare function Tooltip({ content, children, placement, delay }: TooltipProps): JSX_2.Element;
+export declare function Tooltip({ content, children, placement, delay, open }: TooltipProps): JSX_2.Element;
 
 export declare const TooltipManifest: ComponentManifest;
 
@@ -2097,6 +2231,8 @@ export declare interface TooltipProps {
     placement?: TooltipPlacement;
     /** Delay in ms before the tooltip appears. Default: 300 */
     delay?: number;
+    /** Controlled visibility. When provided, overrides hover behavior. */
+    open?: boolean;
 }
 
 declare interface TypographyTokens {