react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/types/components/lib/cards/GlassCard.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import './GlassCard.css';
+/**
+ * GlassCard — A versatile glassmorphism card with hover lift effect and gradient border.
+ *
+ * @param {string} title - Optional title for the glass card header.
+ * @param {string} subtitle - Optional description below the title.
+ * @param {boolean} hoverable - Whether the card lifts on hover. Default is true.
+ * @param {'sm'|'md'|'lg'} padding - Internal padding control. Default is 'md'.
+ */
+export interface GlassCardProps {
+    title?: string;
+    subtitle?: string;
+    hoverable?: boolean;
+    padding?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+}
+export declare function GlassCard({ title, subtitle, hoverable, padding, children }: GlassCardProps): import("react").JSX.Element;
+export default GlassCard;

package/dist/types/components/lib/cards/GlassEventCard.d.ts

@@ -0,0 +1,17 @@
+import './GlassEventCard.css';
+/**
+ * GlassEventCard — Vibrant card for events with date badge and glass effect.
+ *
+ * @param {string|number} day - The event date numeric segment.
+ * @param {string} month - The event month string indicator.
+ * @param {string} title - The name of the event.
+ * @param {string} details - Additional string metadata (e.g location and time).
+ */
+export interface GlassEventCardProps {
+    day: string | number;
+    month: string;
+    title: string;
+    details: string;
+}
+export declare function GlassEventCard({ day, month, title, details }: GlassEventCardProps): import("react").JSX.Element;
+export default GlassEventCard;

package/dist/types/components/lib/cards/GlowPortfolioCard.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './GlowPortfolioCard.css';
+/**
+ * GlowPortfolioCard — Card with a hovering background glow that follows the card edges.
+ *
+ * @param {string} title - Project title heading.
+ * @param {string} subtitle - Project metadata (e.g. "Web design / 2024").
+ * @param {string} glowColor - Optional. Hex color for the animated border glow. Default is '#6366f1'.
+ */
+export interface GlowPortfolioCardProps {
+    title: string;
+    subtitle: string;
+    glowColor?: string;
+    children?: ReactNode;
+}
+export declare function GlowPortfolioCard({ title, subtitle, glowColor, children }: GlowPortfolioCardProps): import("react").JSX.Element;
+export default GlowPortfolioCard;

package/dist/types/components/lib/cards/InteractiveTiltCard.d.ts

@@ -0,0 +1,13 @@
+import './InteractiveTiltCard.css';
+/**
+ * InteractiveTiltCard — Card that tilts in 3D space based on mouse position.
+ *
+ * @param {string} title - The card's heading text.
+ * @param {string} description - The descriptive paragraph attached to the card.
+ */
+export interface InteractiveTiltCardProps {
+    title: string;
+    description: string;
+}
+export declare function InteractiveTiltCard({ title, description }: InteractiveTiltCardProps): import("react").JSX.Element;
+export default InteractiveTiltCard;

package/dist/types/components/lib/cards/KanbanItemCard.d.ts

@@ -0,0 +1,15 @@
+import './KanbanItemCard.css';
+/**
+ * KanbanItemCard — Small card optimized for list-based project management.
+ *
+ * @param {string} title - The description of the ticket/task.
+ * @param {string} priority - Priority level label (e.g. "Prio").
+ * @param {string} tag - Contextual label tag (e.g. "SEO", "Bug").
+ */
+export interface KanbanItemCardProps {
+    title: string;
+    priority?: string;
+    tag?: string;
+}
+export declare function KanbanItemCard({ title, priority, tag }: KanbanItemCardProps): import("react").JSX.Element;
+export default KanbanItemCard;

package/dist/types/components/lib/cards/MinimalLinkCard.d.ts

@@ -0,0 +1,13 @@
+import './MinimalLinkCard.css';
+/**
+ * MinimalLinkCard — Elegant arrow-link card for site navigation sections.
+ *
+ * @param {string} title - The text label of the link.
+ * @param {string} href - The destination URL.
+ */
+export interface MinimalLinkCardProps {
+    title: string;
+    href: string;
+}
+export declare function MinimalLinkCard({ title, href }: MinimalLinkCardProps): import("react").JSX.Element;
+export default MinimalLinkCard;

package/dist/types/components/lib/cards/MusicPlayerMini.d.ts

@@ -0,0 +1,17 @@
+import './MusicPlayerMini.css';
+/**
+ * MusicPlayerMini — Compact player widget with controls and progress bar.
+ *
+ * @param {string} title - The song track title.
+ * @param {string} artist - The artist or band name.
+ * @param {string} coverUrl - Optional string matching the album cover image URL.
+ * @param {number} progress - The song progress representation (0 to 100). Default is 40.
+ */
+export interface MusicPlayerMiniProps {
+    title: string;
+    artist: string;
+    coverUrl?: string;
+    progress?: number;
+}
+export declare function MusicPlayerMini({ title, artist, coverUrl, progress }: MusicPlayerMiniProps): import("react").JSX.Element;
+export default MusicPlayerMini;

package/dist/types/components/lib/cards/NeumorphicCard.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './NeumorphicCard.css';
+/**
+ * NeumorphicCard — A soft UI card with deep shadows for a realistic elevated look.
+ *
+ * @param {'sm'|'md'|'lg'} padding - Optional. Inner padding layout size. Default is 'md'.
+ */
+export interface NeumorphicCardProps {
+    padding?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+}
+export declare function NeumorphicCard({ padding, children }: NeumorphicCardProps): import("react").JSX.Element;
+export default NeumorphicCard;

package/dist/types/components/lib/cards/NotificationCard.d.ts

@@ -0,0 +1,15 @@
+import './NotificationCard.css';
+/**
+ * NotificationCard — Toast-like card for app notifications and alerts.
+ *
+ * @param {string} title - The notification headline.
+ * @param {string} message - The notification detail text.
+ * @param {'info'|'warning'|'success'|'error'} type - Optional. Changes the notification dot indicator color. Default is 'info'.
+ */
+export interface NotificationCardProps {
+    title: string;
+    message: string;
+    type?: 'info' | 'warning' | 'success' | 'error';
+}
+export declare function NotificationCard({ title, message, type }: NotificationCardProps): import("react").JSX.Element;
+export default NotificationCard;

package/dist/types/components/lib/cards/PricingCard.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './PricingCard.css';
+/**
+ * PricingCard — Optimized card for showing product plans and features.
+ *
+ * @param {string} plan - The plan name (e.g. "Pro").
+ * @param {string} price - The integer/decimal price value.
+ * @param {boolean} featured - Applies a highlighted styling variant if true.
+ */
+export interface PricingCardProps {
+    plan: string;
+    price: string;
+    featured?: boolean;
+    children?: ReactNode;
+}
+export declare function PricingCard({ plan, price, featured, children }: PricingCardProps): import("react").JSX.Element;
+export default PricingCard;

package/dist/types/components/lib/cards/PricingCompareMiniCard.d.ts

@@ -0,0 +1,25 @@
+import './PricingCompareMiniCard.css';
+/**
+ * PricingCompareMiniCard — High-conversion mini pricing card with plan perks, price tier, and action button.
+ *
+ * @param {string} planName - Plan name (e.g. 'Pro Developer').
+ * @param {string} price - Price figure (e.g. '$29').
+ * @param {string} period - Frequency string (e.g. '/month').
+ * @param {string} description - Plan highlight subtitle.
+ * @param {string[]} features - List of plan feature bullet points.
+ * @param {boolean} featured - Whether the card is visually emphasized.
+ * @param {string} ctaText - Label for the call to action button. Default is 'Get Started'.
+ * @param {string} ctaHref - Link URL for the button.
+ */
+export interface PricingCompareMiniCardProps {
+    planName: string;
+    price: string;
+    period?: string;
+    description?: string;
+    features?: string[];
+    featured?: boolean;
+    ctaText?: string;
+    ctaHref?: string;
+}
+export declare function PricingCompareMiniCard({ planName, price, period, description, features, featured, ctaText, ctaHref, }: PricingCompareMiniCardProps): import("react").JSX.Element;
+export default PricingCompareMiniCard;

package/dist/types/components/lib/cards/ProfileCard.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './ProfileCard.css';
+/**
+ * ProfileCard — Image-centric profile card with social links and blur effect.
+ *
+ * @param {string} name - The person's full name.
+ * @param {string} role - Their job title or role.
+ * @param {string} avatarUrl - Optional URL string pointing to their avatar image.
+ */
+export interface ProfileCardProps {
+    name: string;
+    role: string;
+    avatarUrl?: string;
+    socials?: ReactNode;
+}
+export declare function ProfileCard({ name, role, avatarUrl, socials }: ProfileCardProps): import("react").JSX.Element;
+export default ProfileCard;

package/dist/types/components/lib/cards/RetroGameCard.d.ts

@@ -0,0 +1,15 @@
+import './RetroGameCard.css';
+/**
+ * RetroGameCard — Bold gaming card with scanlines and pixel fonts.
+ *
+ * @param {string} title - The retro game title.
+ * @param {string} level - Current stage or level string.
+ * @param {number|string} score - The player's score.
+ */
+export interface RetroGameCardProps {
+    title: string;
+    level: string;
+    score: number | string;
+}
+export declare function RetroGameCard({ title, level, score }: RetroGameCardProps): import("react").JSX.Element;
+export default RetroGameCard;

package/dist/types/components/lib/cards/StatCard.d.ts

@@ -0,0 +1,15 @@
+import './StatCard.css';
+/**
+ * StatCard — Compact card for displaying key metrics with an icon.
+ *
+ * @param {string} label - The metric name (e.g., "Total Revenue").
+ * @param {string} value - The primary statistic value (e.g., "$124,590").
+ * @param {string} icon - The emoji or text character representing the stat.
+ */
+export interface StatCardProps {
+    label: string;
+    value: string;
+    icon: string;
+}
+export declare function StatCard({ label, value, icon }: StatCardProps): import("react").JSX.Element;
+export default StatCard;

package/dist/types/components/lib/cards/StatsTrendCard.d.ts

@@ -0,0 +1,19 @@
+import './StatsTrendCard.css';
+/**
+ * StatsTrendCard — Compact KPI metric card featuring delta percentages, trend directions, and mini activity bars.
+ *
+ * @param {string} label - Metric name (e.g. 'Active Users').
+ * @param {string} value - Formatted value figure (e.g. '42,850').
+ * @param {string} change - Delta percentage string (e.g. '+18.4%').
+ * @param {'up' | 'down' | 'neutral'} trend - Direction of the trend. Default is 'up'.
+ * @param {string} timeframe - Timeframe subtitle (e.g. 'vs last month').
+ */
+export interface StatsTrendCardProps {
+    label: string;
+    value: string;
+    change: string;
+    trend?: 'up' | 'down' | 'neutral';
+    timeframe?: string;
+}
+export declare function StatsTrendCard({ label, value, change, trend, timeframe, }: StatsTrendCardProps): import("react").JSX.Element;
+export default StatsTrendCard;

package/dist/types/components/lib/cards/TaskKanbanCard.d.ts

@@ -0,0 +1,17 @@
+import './TaskKanbanCard.css';
+/**
+ * TaskKanbanCard — Agile task card with priority labels and due dates.
+ *
+ * @param {string} task - The description of the task being managed.
+ * @param {string} date - Visual date string indicator (e.g. "📅 Oct 24").
+ * @param {string} assigneeInitials - Short initials for the user avatar (e.g "MJ").
+ * @param {'low'|'med'|'high'} priority - Controls the appearance of the priority tag label. Default is 'low'.
+ */
+export interface TaskKanbanCardProps {
+    task: string;
+    date: string;
+    assigneeInitials: string;
+    priority?: 'low' | 'med' | 'high';
+}
+export declare function TaskKanbanCard({ task, date, assigneeInitials, priority }: TaskKanbanCardProps): import("react").JSX.Element;
+export default TaskKanbanCard;

package/dist/types/components/lib/cards/TestimonialCardClean.d.ts

@@ -0,0 +1,17 @@
+import './TestimonialCardClean.css';
+/**
+ * TestimonialCardClean — Minimalist card for user quotes and reviews.
+ *
+ * @param {string} quote - The body of the testimonial review.
+ * @param {string} name - The reviewer's full name.
+ * @param {string} role - The reviewer's job title or company role.
+ * @param {string} avatarUrl - Optional string tracking the avatar headshot URL.
+ */
+export interface TestimonialCardCleanProps {
+    quote: string;
+    name: string;
+    role: string;
+    avatarUrl?: string;
+}
+export declare function TestimonialCardClean({ quote, name, role, avatarUrl }: TestimonialCardCleanProps): import("react").JSX.Element;
+export default TestimonialCardClean;

package/dist/types/components/lib/cards/WeatherWidgetCard.d.ts

@@ -0,0 +1,17 @@
+import './WeatherWidgetCard.css';
+/**
+ * WeatherWidgetCard — Glassmorphism card showing weather conditions.
+ *
+ * @param {string} temp - The formatted temperature (e.g. "24°").
+ * @param {string} city - The location name.
+ * @param {string} condition - Short weather condition string (e.g. "Partly Cloudy").
+ * @param {string} icon - Emoji or symbol representing the weather.
+ */
+export interface WeatherWidgetCardProps {
+    temp: string;
+    city: string;
+    condition: string;
+    icon: string;
+}
+export declare function WeatherWidgetCard({ temp, city, condition, icon }: WeatherWidgetCardProps): import("react").JSX.Element;
+export default WeatherWidgetCard;

package/dist/types/components/lib/cards/index.d.ts

@@ -0,0 +1,22 @@
+export { default as BlogHorizontalCard } from './BlogHorizontalCard';
+export { default as CyberFeatureCard } from './CyberFeatureCard';
+export { default as EcommerceProductCard } from './EcommerceProductCard';
+export { default as GlassCard } from './GlassCard';
+export { default as GlassEventCard } from './GlassEventCard';
+export { default as GlowPortfolioCard } from './GlowPortfolioCard';
+export { default as InteractiveTiltCard } from './InteractiveTiltCard';
+export { default as KanbanItemCard } from './KanbanItemCard';
+export { default as MinimalLinkCard } from './MinimalLinkCard';
+export { default as MusicPlayerMini } from './MusicPlayerMini';
+export { default as NeumorphicCard } from './NeumorphicCard';
+export { default as NotificationCard } from './NotificationCard';
+export { default as PricingCard } from './PricingCard';
+export { default as ProfileCard } from './ProfileCard';
+export { default as RetroGameCard } from './RetroGameCard';
+export { default as StatCard } from './StatCard';
+export { default as TaskKanbanCard } from './TaskKanbanCard';
+export { default as TestimonialCardClean } from './TestimonialCardClean';
+export { default as WeatherWidgetCard } from './WeatherWidgetCard';
+export { default as PricingCompareMiniCard } from './PricingCompareMiniCard';
+export { default as GithubRepoCard } from './GithubRepoCard';
+export { default as StatsTrendCard } from './StatsTrendCard';

package/dist/types/components/lib/charts/ActivityRings.d.ts

@@ -0,0 +1,26 @@
+import './ActivityRings.css';
+/**
+ * ActivityRings — Concentric closed rings tracking daily goals (move, exercise,
+ * stand style). Values over 100% wrap with a stronger overlap stroke.
+ *
+ * @param {Array<{label: string, value: number, goal: number, unit?: string}>} rings - Up to 4 goals.
+ * @param {string[]} colors - Optional per-ring colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface ActivityRingsProps {
+    title?: string;
+    subtitle?: string;
+    rings?: Array<{
+        label: string;
+        value: number;
+        goal: number;
+        unit?: string;
+    }>;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function ActivityRings({ title, subtitle, rings, colors, variant, size, className, }: ActivityRingsProps): import("react").JSX.Element;
+export default ActivityRings;

package/dist/types/components/lib/charts/AreaChart.d.ts

@@ -0,0 +1,16 @@
+import './AreaChart.css';
+/**
+ * AreaChart — A premium, smooth area chart component.
+ */
+export interface AreaChartProps {
+    title?: string;
+    subtitle?: string;
+    categories?: any[];
+    series?: any[];
+    height?: number | string;
+    colors?: string[];
+    showGrid?: boolean;
+    className?: string;
+}
+export declare function AreaChart({ title, subtitle, categories, series, height, colors, showGrid, className, }: AreaChartProps): import("react").JSX.Element;
+export default AreaChart;

package/dist/types/components/lib/charts/BarChart.d.ts

@@ -0,0 +1,17 @@
+import './BarChart.css';
+/**
+ * BarChart — A premium bar chart component.
+ */
+export interface BarChartProps {
+    title?: string;
+    subtitle?: string;
+    categories?: any[];
+    series?: any[];
+    height?: number | string;
+    colors?: string[];
+    horizontal?: boolean;
+    stacked?: boolean;
+    className?: string;
+}
+export declare function BarChart({ title, subtitle, categories, series, height, colors, horizontal, stacked, className, }: BarChartProps): import("react").JSX.Element;
+export default BarChart;

package/dist/types/components/lib/charts/BoxPlotChart.d.ts

@@ -0,0 +1,26 @@
+/**
+ * BoxPlotChart — Distribution summary per group: median, interquartile box,
+ * 1.5×IQR whiskers and outlier dots. Computes stats from raw values.
+ *
+ * @param {Array<{label: string, values: number[]}>} groups - Raw observations per group.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Box color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface BoxPlotChartProps {
+    title?: string;
+    subtitle?: string;
+    groups?: Array<{
+        label: string;
+        values: number[];
+    }>;
+    suffix?: string;
+    height?: number;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function BoxPlotChart({ title, subtitle, groups, suffix, height, color, variant, size, className, }: BoxPlotChartProps): import("react").JSX.Element;
+export default BoxPlotChart;

package/dist/types/components/lib/charts/BubbleChart.d.ts

@@ -0,0 +1,35 @@
+/**
+ * BubbleChart — Three-variable scatter: x, y and bubble area (z). Larger
+ * bubbles are drawn first so small ones stay visible on top.
+ *
+ * @param {Array<{label: string, x: number, y: number, z: number, group?: number}>} items - Bubbles.
+ * @param {string[]} groups - Group names (max 3) mapped to color slots.
+ * @param {string} xLabel - X-axis title.
+ * @param {string} yLabel - Y-axis title.
+ * @param {string} zLabel - Bubble size meaning.
+ * @param {string[]} colors - Optional per-group colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface BubbleChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        x: number;
+        y: number;
+        z: number;
+        group?: number;
+    }>;
+    groups?: string[];
+    xLabel?: string;
+    yLabel?: string;
+    zLabel?: string;
+    height?: number;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function BubbleChart({ title, subtitle, items, groups, xLabel, yLabel, zLabel, height, colors, variant, size, className, }: BubbleChartProps): import("react").JSX.Element;
+export default BubbleChart;

package/dist/types/components/lib/charts/BulletChart.d.ts

@@ -0,0 +1,29 @@
+import './BulletChart.css';
+interface Metric {
+    label: string;
+    value: number;
+    target: number;
+    ranges: [number, number, number];
+    unit?: string;
+}
+/**
+ * BulletChart — Compact KPI-vs-target bars with qualitative bands
+ * (poor / ok / good), a measure bar and a target tick. Stack several for a grid.
+ *
+ * @param {Array<{label: string, value: number, target: number, ranges: [number, number, number], unit?: string}>} metrics
+ *   - Each metric with its qualitative band thresholds (ascending).
+ * @param {string} color - Measure bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface BulletChartProps {
+    title?: string;
+    subtitle?: string;
+    metrics?: Metric[];
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function BulletChart({ title, subtitle, metrics, color, variant, size, className, }: BulletChartProps): import("react").JSX.Element;
+export default BulletChart;

package/dist/types/components/lib/charts/BumpChart.d.ts

@@ -0,0 +1,25 @@
+/**
+ * BumpChart — Rank-over-time chart. Each line tracks one entity's position
+ * (1 = top) across periods, with labels at both ends.
+ *
+ * @param {string[]} periods - X-axis labels.
+ * @param {Array<{name: string, ranks: number[]}>} series - Rank per period (1-based), max 8.
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface BumpChartProps {
+    title?: string;
+    subtitle?: string;
+    periods?: string[];
+    series?: Array<{
+        name: string;
+        ranks: number[];
+    }>;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function BumpChart({ title, subtitle, periods, series, colors, variant, size, className, }: BumpChartProps): import("react").JSX.Element;
+export default BumpChart;

package/dist/types/components/lib/charts/CandlestickChart.d.ts

@@ -0,0 +1,30 @@
+interface Candle {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+}
+/**
+ * CandlestickChart — OHLC price chart. Bodies span open→close, wicks span
+ * low→high. Up candles are hollow, down candles filled, so direction is
+ * readable without color.
+ *
+ * @param {Array<{label: string, open: number, high: number, low: number, close: number}>} candles - OHLC data.
+ * @param {string} prefix - Price prefix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface CandlestickChartProps {
+    title?: string;
+    subtitle?: string;
+    candles?: Candle[];
+    prefix?: string;
+    height?: number;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function CandlestickChart({ title, subtitle, candles, prefix, height, variant, size, className, }: CandlestickChartProps): import("react").JSX.Element;
+export default CandlestickChart;

package/dist/types/components/lib/charts/ChartFrame.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import './ChartFrame.css';
+/**
+ * ChartFrame — Shared accessible shell for every SVG chart in the kit.
+ * Renders the card surface, header, legend, hover tooltip and a
+ * "View data" table fallback so no chart relies on color or hover alone.
+ *
+ * @param {string} title - Chart heading (names the series when there is only one).
+ * @param {string} subtitle - Supporting description under the title.
+ * @param {string} value - Optional headline figure shown on the right of the header.
+ * @param {string} delta - Optional change label next to the headline figure.
+ * @param {boolean} deltaPositive - Good news (green ▲) or bad (red ▼); omit for a neutral caption.
+ * @param {Array<{label: string, color: string}>} legend - Legend items (shown when ≥ 2 series).
+ * @param {{headers: string[], rows: Array<Array<string|number>>}} table - Data for the table view.
+ * @param {string} variant - Surface style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ *
+ * Accessibility: the figure is labelled by its title, every mark is focusable via
+ * the chart itself, and a native <details> data table is always available.
+ */
+export interface ChartFrameProps {
+    title?: string;
+    subtitle?: string;
+    value?: string;
+    delta?: string;
+    deltaPositive?: boolean;
+    legend?: Array<{
+        label: string;
+        color: string;
+    }>;
+    table?: {
+        headers: string[];
+        rows: Array<Array<string | number>>;
+    };
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+}
+export declare function ChartFrame({ title, subtitle, value, delta, deltaPositive, legend, table, variant, size, className, children, footer }: ChartFrameProps): import("react").JSX.Element;
+export default ChartFrame;

package/dist/types/components/lib/charts/DivergingBarChart.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DivergingBarChart — Horizontal bars extending left (negative) or right
+ * (positive) from a zero line. Great for sentiment, variance and P&L deltas.
+ *
+ * @param {Array<{label: string, value: number}>} items - Signed values.
+ * @param {string} positiveLabel - Legend label for positive values.
+ * @param {string} negativeLabel - Legend label for negative values.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface DivergingBarChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        value: number;
+    }>;
+    positiveLabel?: string;
+    negativeLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    positiveColor?: string;
+    negativeColor?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function DivergingBarChart({ title, subtitle, items, positiveLabel, negativeLabel, prefix, suffix, positiveColor, negativeColor, variant, size, className, }: DivergingBarChartProps): import("react").JSX.Element;
+export default DivergingBarChart;

package/dist/types/components/lib/charts/DonutChart.d.ts

@@ -0,0 +1,16 @@
+import './DonutChart.css';
+/**
+ * DonutChart — A minimalist donut chart component.
+ */
+export interface DonutChartProps {
+    title?: string;
+    labels?: string[];
+    series?: number[];
+    height?: number | string;
+    colors?: string[];
+    centerLabel?: string;
+    pie?: boolean;
+    className?: string;
+}
+export declare function DonutChart({ title, labels, series, height, colors, centerLabel, pie, className, }: DonutChartProps): import("react").JSX.Element;
+export default DonutChart;