tembro 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file.
 
+## 4.1.0 - 2026-07-17
+
+### Added
+
+- Added reusable chat workspace primitives for conversation lists, messages, replies, attachments, reactions, typing states, delivery status, and message composition.
+- Added named theme support with `data-theme`, color-scheme mapping, system mode, theme cycling, and built-in light, dark, and dim presets.
+- Added Kanban WIP limits, controlled selection, rich task metadata, add-card/add-column actions, density, column sizing, and move policies.
+
+### Changed
+
+- Expanded Sidebar with inset/floating/offcanvas variants, search, persistence, keyboard collapse, item actions, accessible collapsed labels, and corrected mobile drawer geometry.
+- Expanded RichTextEditor with grouped responsive controls, headings, block tools, link actions, format clearing, sticky/compact toolbar modes, and word/character counts.
+- Improved Badge dot, pulse, avatar, icon, remove, focus, and interactive states; centered tag and clear icons and removed duplicate native search cancel controls.
+- Corrected ActivityFeed and Timeline connector alignment and strengthened viewport-only sidebar/main scrolling behavior.
+
+## 4.0.1 - 2026-07-17
+
+### Changed
+
+- Fixed viewport workspaces so the document never competes with `WorkspaceMain` for vertical scrolling.
+- Rebalanced light and dark surface, border, elevation, hover, active, and keyboard-focus tokens.
+- Added multi-series grouped and stacked bars, multi-series line and gradient area charts, legends, curves, dots, and accessible series tables.
+- Improved responsive chart and dashboard composition while preserving the existing single-series API.
+
 ## 4.0.0 - 2026-07-17
 
 ### Added

package/dist/components/charts/charts.d.ts

@@ -12,6 +12,7 @@ export type ChartSeries = {
     data: number[];
     color?: string;
 };
+export type ChartCurve = "linear" | "monotone" | "natural" | "step";
 export type ChartAxisLabel = string | number | React.ReactNode;
 export type ChartSize = "sm" | "md" | "lg";
 export type ChartState = "ready" | "loading" | "empty";
@@ -41,7 +42,8 @@ export type ChartFrameProps = React.ComponentProps<typeof Card> & {
 };
 declare function ChartFrame({ title, description, action, state, emptyLabel, className, children, ...props }: ChartFrameProps): React.JSX.Element;
 export type BarChartProps = React.ComponentProps<"div"> & {
-    data: ChartDatum[];
+    data?: ChartDatum[];
+    series?: ChartSeries[];
     size?: ChartSize;
     max?: number;
     showLabels?: boolean;
@@ -54,10 +56,14 @@ export type BarChartProps = React.ComponentProps<"div"> & {
     barClassName?: string;
     domain?: ChartDomain;
     ariaLabel?: string;
+    stacked?: boolean;
+    showLegend?: boolean;
+    barRadius?: number;
 };
-declare function BarChart({ data, size, max, showLabels, showValues, showGrid, showTooltip, valueFormatter, state, emptyLabel, barClassName, domain, ariaLabel, className, ...props }: BarChartProps): React.JSX.Element;
+declare function BarChart({ data, series, size, max, showLabels, showValues, showGrid, showTooltip, valueFormatter, state, emptyLabel, barClassName, domain, ariaLabel, stacked, showLegend, barRadius, className, ...props }: BarChartProps): React.JSX.Element;
 export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
-    values: number[];
+    values?: number[];
+    series?: ChartSeries[];
     size?: ChartSize;
     width?: number;
     height?: number;
@@ -72,10 +78,15 @@ export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
     emptyLabel?: React.ReactNode;
     domain?: ChartDomain;
     ariaLabel?: string;
+    curve?: ChartCurve;
+    showDots?: boolean;
+    showLegend?: boolean;
+    gradient?: boolean;
+    strokeWidth?: number;
 };
-declare function LineChart({ values, size, width, height: heightProp, showArea, showGrid, showAxis, showTooltip, labels, valueFormatter, stroke, state, emptyLabel, domain, ariaLabel, className, style, ...props }: LineChartProps): React.JSX.Element;
+declare function LineChart({ values, series, size, width, height: heightProp, showArea, showGrid, showAxis, showTooltip, labels, valueFormatter, stroke, state, emptyLabel, domain, ariaLabel, curve, showDots, showLegend, gradient, strokeWidth, className, style, ...props }: LineChartProps): React.JSX.Element;
 declare function AreaChart(props: Omit<LineChartProps, "showArea">): React.JSX.Element;
-export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis"> & {
+export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis" | "series" | "showLegend"> & {
     values: number[];
     positive?: boolean;
 };

package/dist/components/display/chat.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/display/chat.cjs")

package/dist/components/display/chat.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+export type ChatMessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+export type ChatAttachmentData = {
+    key: string;
+    name: string;
+    size?: React.ReactNode;
+    type?: React.ReactNode;
+    href?: string;
+    preview?: string;
+};
+export type ChatParticipant = {
+    name: string;
+    avatar?: string;
+    fallback?: React.ReactNode;
+    status?: "online" | "offline" | "busy" | "away";
+};
+export type ChatShellProps = React.ComponentProps<"section"> & {
+    sidebar?: React.ReactNode;
+    details?: React.ReactNode;
+};
+declare function ChatShell({ sidebar, details, children, className, ...props }: ChatShellProps): React.JSX.Element;
+export type ChatHeaderProps = React.ComponentProps<"header"> & {
+    participant: ChatParticipant;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+declare function ChatHeader({ participant, description, actions, className, ...props }: ChatHeaderProps): React.JSX.Element;
+export type ConversationItem = {
+    key: string;
+    participant: ChatParticipant;
+    preview?: React.ReactNode;
+    time?: React.ReactNode;
+    unread?: number;
+    muted?: boolean;
+    pinned?: boolean;
+};
+export type ConversationListProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+    items: ConversationItem[];
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    onSelect?: (item: ConversationItem) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    empty?: React.ReactNode;
+};
+declare function ConversationList({ items, selectedKey, defaultSelectedKey, onSelect, searchable, searchPlaceholder, empty, className, ...props }: ConversationListProps): React.JSX.Element;
+export type ChatMessageListProps = React.ComponentProps<"div"> & {
+    autoScroll?: boolean;
+    empty?: React.ReactNode;
+};
+declare function ChatMessageList({ autoScroll, empty, children, className, ...props }: ChatMessageListProps): React.JSX.Element;
+export type ChatAttachmentProps = React.ComponentProps<"div"> & Omit<ChatAttachmentData, "key"> & {
+    attachmentKey?: string;
+    onRemove?: () => void;
+};
+declare function ChatAttachment({ name, size, type, href, preview, onRemove, attachmentKey: _attachmentKey, className, ...props }: ChatAttachmentProps): React.JSX.Element;
+export type ChatMessageProps = React.ComponentProps<"article"> & {
+    participant?: ChatParticipant;
+    outgoing?: boolean;
+    time?: React.ReactNode;
+    status?: ChatMessageStatus;
+    replyTo?: React.ReactNode;
+    attachments?: ChatAttachmentData[];
+    reactions?: Array<{
+        key: string;
+        label: React.ReactNode;
+        count?: number;
+        active?: boolean;
+    }>;
+    onReaction?: (key: string) => void;
+    actions?: React.ReactNode;
+};
+declare function ChatMessage({ participant, outgoing, time, status, replyTo, attachments, reactions, onReaction, actions, children, className, ...props }: ChatMessageProps): React.JSX.Element;
+declare function ChatTypingIndicator({ participant, className, ...props }: React.ComponentProps<"div"> & {
+    participant?: ChatParticipant;
+}): React.JSX.Element;
+export type ChatComposerProps = Omit<React.ComponentProps<"form">, "onSubmit"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onSend: (value: string) => void | Promise<void>;
+    placeholder?: string;
+    disabled?: boolean;
+    sending?: boolean;
+    attachments?: ChatAttachmentData[];
+    onRemoveAttachment?: (key: string) => void;
+    onAttachmentClick?: () => void;
+    onEmojiClick?: () => void;
+    maxLength?: number;
+    submitLabel?: string;
+};
+declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, disabled, sending, attachments, onRemoveAttachment, onAttachmentClick, onEmojiClick, maxLength, submitLabel, className, ...props }: ChatComposerProps): React.JSX.Element;
+declare function ChatHeaderActions(): React.JSX.Element;
+export { ChatAttachment, ChatComposer, ChatHeader, ChatHeaderActions, ChatMessage, ChatMessageList, ChatShell, ChatTypingIndicator, ConversationList, };

package/dist/components/display/chat.js

@@ -0,0 +1 @@
+export * from "../../src/components/display/chat.js"

package/dist/components/display/index.d.ts

@@ -15,5 +15,6 @@ export * from "./info-card";
 export * from "./virtual-list";
 export * from "./qr-code";
 export * from "./carousel";
+export * from "./chat";
 export * from "./tag";
 export * from "./typography";

package/dist/components/display/kanban.d.ts

@@ -6,6 +6,19 @@ export type KanbanCard = {
     meta?: React.ReactNode;
     extra?: React.ReactNode;
     actions?: React.ReactNode;
+    labels?: Array<React.ReactNode | {
+        key: string;
+        label: React.ReactNode;
+        tone?: "neutral" | "info" | "success" | "warning" | "danger" | "muted";
+    }>;
+    priority?: "low" | "medium" | "high" | "urgent";
+    assignee?: {
+        name: string;
+        src?: string;
+        fallback?: React.ReactNode;
+    };
+    dueDate?: React.ReactNode;
+    selected?: boolean;
     disabled?: boolean;
 };
 export type KanbanColumn = {
@@ -14,12 +27,18 @@ export type KanbanColumn = {
     description?: React.ReactNode;
     cards: KanbanCard[];
     count?: React.ReactNode;
+    limit?: number;
+    color?: string;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
     disabled?: boolean;
 };
 export type KanbanCardRenderContext = {
     index: number;
     isDragging: boolean;
     isDropTarget: boolean;
+    selected: boolean;
+    selectControl: React.ReactNode;
     handle: React.ReactNode;
 };
 export type KanbanCardMove = {
@@ -34,8 +53,21 @@ export type KanbanBoardProps = Omit<React.ComponentProps<"div">, "defaultValue">
     defaultColumns?: KanbanColumn[];
     onColumnsChange?: (columns: KanbanColumn[], change: KanbanCardMove) => void;
     onCardMove?: (change: KanbanCardMove) => void;
+    canMoveCard?: (change: KanbanCardMove) => boolean;
     renderCard?: (card: KanbanCard, column: KanbanColumn, context: KanbanCardRenderContext) => React.ReactNode;
     onCardClick?: (card: KanbanCard, column: KanbanColumn) => void;
+    onAddCard?: (column: KanbanColumn) => void;
+    onAddColumn?: () => void;
+    renderColumnHeader?: (column: KanbanColumn) => React.ReactNode;
+    renderColumnFooter?: (column: KanbanColumn) => React.ReactNode;
+    selectionMode?: "none" | "single" | "multiple";
+    selectedCardKeys?: string[];
+    defaultSelectedCardKeys?: string[];
+    onSelectionChange?: (keys: string[], cards: KanbanCard[]) => void;
+    allowCrossColumn?: boolean;
+    allowReorder?: boolean;
+    density?: "compact" | "comfortable";
+    columnWidth?: number | string;
     disabled?: boolean;
     emptyColumn?: React.ReactNode;
     dragHandleLabel?: (card: KanbanCard, column: KanbanColumn) => string;
@@ -43,5 +75,5 @@ export type KanbanBoardProps = Omit<React.ComponentProps<"div">, "defaultValue">
     cardClassName?: string;
     overlayClassName?: string;
 };
-declare function KanbanBoard({ columns: columnsProp, defaultColumns, onColumnsChange, onCardMove, renderCard, onCardClick, disabled, emptyColumn, dragHandleLabel, columnClassName, cardClassName, overlayClassName, className, "aria-label": ariaLabel, ...props }: KanbanBoardProps): React.JSX.Element;
+declare function KanbanBoard({ columns: columnsProp, defaultColumns, onColumnsChange, onCardMove, canMoveCard, renderCard, onCardClick, onAddCard, onAddColumn, renderColumnHeader, renderColumnFooter, selectionMode, selectedCardKeys, defaultSelectedCardKeys, onSelectionChange, allowCrossColumn, allowReorder, density, columnWidth, disabled, emptyColumn, dragHandleLabel, columnClassName, cardClassName, overlayClassName, className, "aria-label": ariaLabel, ...props }: KanbanBoardProps): React.JSX.Element;
 export { KanbanBoard };

package/dist/components/layout/sidebar.d.ts

@@ -16,6 +16,18 @@ export type SidebarItem = {
     current?: React.AriaAttributes["aria-current"];
     tooltip?: React.ReactNode;
     onSelect?: () => void;
+    keywords?: string[];
+    action?: React.ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+};
+export type SidebarSearch = {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    label?: string;
+    onValueChange?: (value: string) => void;
+    empty?: React.ReactNode;
 };
 export type SidebarFooterAccount = {
     label: React.ReactNode;
@@ -30,6 +42,11 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
     footer?: React.ReactNode;
     items?: SidebarItem[];
     collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    variant?: "sidebar" | "floating" | "inset";
+    side?: "left" | "right";
+    collapsible?: "icon" | "offcanvas" | "none";
     width?: React.CSSProperties["width"];
     collapsedWidth?: React.CSSProperties["width"];
     mobileWidth?: React.CSSProperties["width"];
@@ -43,6 +60,10 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
     itemSize?: "sm" | "md" | "lg";
     activeIndicator?: "none" | "bar" | "pill";
     navigationLabel?: string;
+    search?: SidebarSearch | React.ReactNode;
+    hideScrollbar?: boolean;
+    keyboardShortcut?: string | false;
+    persistKey?: string;
     responsive?: boolean;
     mobileBreakpoint?: number;
     mobileOpen?: boolean;
@@ -72,5 +93,6 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function Sidebar({ className, header, footer, items, collapsed: collapsedProp, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, showSectionLabels, itemSize, activeIndicator, navigationLabel, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileCloseLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: SidebarProps): React.JSX.Element;
-export { Sidebar };
+declare function Sidebar({ className, header, footer, items, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, variant, side, collapsible, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, showSectionLabels, itemSize, activeIndicator, navigationLabel, search, hideScrollbar, keyboardShortcut, persistKey, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileCloseLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: SidebarProps): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+export { Sidebar, SidebarInset };

package/dist/components/modern/rich-text-editor.d.ts

@@ -9,16 +9,28 @@ export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValu
     editable?: boolean;
     autoFocus?: boolean;
     minHeight?: number;
+    maxHeight?: number;
+    maxLength?: number;
+    toolbar?: boolean;
+    stickyToolbar?: boolean;
+    toolbarSize?: "compact" | "default";
+    features?: RichTextFeature[];
+    showCharacterCount?: boolean;
+    showWordCount?: boolean;
     onLinkRequest?: (currentHref?: string) => string | null | undefined;
     labels?: {
         editor?: string;
         toolbar?: string;
     };
 };
-declare function EditorToolbar({ editor, onLinkRequest, label }: {
+export type RichTextFeature = "history" | "bold" | "italic" | "strike" | "code" | "heading1" | "heading2" | "heading3" | "paragraph" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "horizontalRule" | "link" | "clearFormatting";
+declare function EditorToolbar({ editor, onLinkRequest, label, features, sticky, size }: {
     editor: Editor;
     onLinkRequest?: RichTextEditorProps["onLinkRequest"];
     label: string;
+    features?: RichTextFeature[];
+    sticky?: boolean;
+    size?: "compact" | "default";
 }): React.JSX.Element;
 declare function RichTextEditor(props: RichTextEditorProps): React.JSX.Element;
 export { EditorToolbar, RichTextEditor };

package/dist/components/theme-provider.d.ts

@@ -1,15 +1,28 @@
 import * as React from "react";
-type ThemeMode = "light" | "dark" | "system";
-type ResolvedThemeMode = "light" | "dark";
+export type ThemeName = string;
+export type ThemeMode = ThemeName | "system";
+export type ThemeColorScheme = "light" | "dark";
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    themes?: ThemeName[];
+    defaultTheme?: ThemeMode;
+    forcedTheme?: ThemeName;
+    storageKey?: string;
+    enableSystem?: boolean;
+    attribute?: "class" | "data-theme" | "both";
+    colorSchemes?: Record<ThemeName, ThemeColorScheme>;
+    disableTransitionOnChange?: boolean;
+    onThemeChange?: (theme: ThemeMode, resolvedTheme: ThemeName) => void;
+};
 type ThemeContextValue = {
     theme: ThemeMode;
-    resolvedTheme: ResolvedThemeMode;
+    resolvedTheme: ThemeName;
+    systemTheme: ThemeColorScheme;
+    themes: ThemeName[];
     mounted: boolean;
     setTheme: (theme: ThemeMode) => void;
     toggleTheme: () => void;
 };
-export declare function ThemeProvider({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
+export declare function ThemeProvider({ children, themes, defaultTheme, forcedTheme, storageKey, enableSystem, attribute, colorSchemes, disableTransitionOnChange, onThemeChange, }: ThemeProviderProps): React.JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 export {};

package/dist/components/ui/badge/index.d.ts

@@ -7,7 +7,7 @@ declare const badgeVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
     dot?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+type BadgeProps = useRender.ComponentProps<"span"> & Omit<VariantProps<typeof badgeVariants>, "dot"> & {
     label?: React.ReactNode;
     count?: React.ReactNode;
     status?: "neutral" | "info" | "success" | "warning" | "danger" | "muted";
@@ -17,6 +17,12 @@ type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVa
     removeLabel?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    avatar?: React.ReactNode;
+    dot?: boolean | React.ReactNode;
+    showDot?: boolean;
+    dotPosition?: "start" | "end";
+    pulse?: boolean;
+    interactive?: boolean;
 };
-declare function Badge({ className, variant, tone, size, dot, label, count, status, removable, selected, onRemove, removeLabel, leftIcon, rightIcon, children, render, onKeyDown, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function Badge({ className, variant, tone, size, dot, label, count, status, removable, selected, onRemove, removeLabel, leftIcon, rightIcon, avatar, showDot, dotPosition, pulse, interactive, children, render, onKeyDown, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export { Badge, badgeVariants, type BadgeProps };

package/dist/src/components/charts/charts.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../feedback/state-view.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s={sm:120,md:220,lg:320};function c(e,t){return t??`var(--color-chart-${e%5+1}, var(--primary))`}function l(e,t){return typeof e==`string`||typeof e==`number`?String(e):t}function u(e,t){return t?t(e):e.toLocaleString()}function d({state:e,emptyLabel:t,height:n}){return e===`loading`?(0,a.jsx)(r.StateView,{status:`loading`,loadingVariant:`skeleton`,variant:`plain`,size:`compact`,style:{minHeight:n}}):e===`empty`?(0,a.jsx)(r.StateView,{status:`empty`,title:t,description:null,variant:`plain`,size:`compact`,style:{minHeight:n}}):null}function f({data:e,valueFormatter:t,caption:n}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:n}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),(0,a.jsx)(`th`,{scope:`col`,children:`Value`}),(0,a.jsx)(`th`,{scope:`col`,children:`Description`})]})}),(0,a.jsx)(`tbody`,{children:e.map((e,n)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e.label}),(0,a.jsx)(`td`,{children:u(e.value,t)}),(0,a.jsx)(`td`,{children:e.description})]},n))})]})})}function p({active:e,label:t,payload:n,valueFormatter:r,labelFormatter:i}){return!e||!n?.length?null:(0,a.jsxs)(`div`,{"data-slot":`chart-tooltip`,className:`min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur`,children:[t===void 0?null:(0,a.jsx)(`div`,{className:`mb-2 text-xs font-semibold text-muted-foreground`,children:i?i(t):t}),(0,a.jsx)(`div`,{className:`grid gap-1.5`,children:n.map((e,t)=>{let n=typeof e.value==`number`?e.value:Number(e.value??0);return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 text-sm`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:e.color}}),(0,a.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.name??`Value`}),(0,a.jsx)(`span`,{className:`font-semibold tabular-nums`,children:u(n,r)})]},`${e.name??`value`}-${t}`)})})]})}function m({title:e,description:r,action:i,state:o=`ready`,emptyLabel:s=`No data available.`,className:c,children:l,...u}){return(0,a.jsxs)(n.Card,{"data-slot":`chart-frame`,"data-state":o,className:t.cn(`min-w-0`,c),...u,children:[e||r||i?(0,a.jsxs)(n.CardHeader,{className:`flex-row items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e?(0,a.jsx)(n.CardTitle,{children:e}):null,r?(0,a.jsx)(n.CardDescription,{children:r}):null]}),i?(0,a.jsx)(`div`,{className:`shrink-0`,children:i}):null]}):null,(0,a.jsx)(n.CardContent,{children:o===`ready`?l:(0,a.jsx)(d,{state:o,emptyLabel:s,height:180})})]})}function h({data:e,size:n=`md`,max:r,showLabels:i=!0,showValues:m=!1,showGrid:h=!0,showTooltip:g=!0,valueFormatter:_,state:v=`ready`,emptyLabel:y=`No chart data.`,barClassName:b,domain:x,ariaLabel:S=`Bar chart`,className:C,...w}){let T=s[n],E=v===`ready`&&e.length===0?`empty`:v;if(E!==`ready`)return(0,a.jsx)(d,{state:E,emptyLabel:y,height:T});let D=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:e.value,fill:c(t,e.color),originalLabel:e.label,description:e.description})),O=x??(r===void 0?[`auto`,`auto`]:[`auto`,r]);return(0,a.jsxs)(`div`,{"data-slot":`bar-chart`,role:`img`,"aria-label":S,className:t.cn(`min-w-0`,C),...w,children:[(0,a.jsx)(`div`,{style:{height:T},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.BarChart,{data:D,margin:{top:m?20:8,right:8,bottom:i?8:0,left:0},children:[h?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!i,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!0,domain:O}),g?(0,a.jsx)(o.Tooltip,{cursor:{fill:`var(--muted)`,opacity:.35},content:(0,a.jsx)(p,{valueFormatter:_})}):null,(0,a.jsx)(o.Bar,{dataKey:`value`,name:`Value`,radius:[6,6,2,2],className:b,isAnimationActive:!1,label:m?{position:`top`,fill:`var(--muted-foreground)`,fontSize:11,formatter:e=>String(u(Number(e),_))}:!1,children:D.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})})}),(0,a.jsx)(f,{data:e,valueFormatter:_,caption:S})]})}function g({values:e,size:n=`md`,width:r=560,height:i,showArea:c=!1,showGrid:u=!0,showAxis:m=!1,showTooltip:h=!0,labels:g,valueFormatter:_,stroke:v=`var(--primary)`,state:y=`ready`,emptyLabel:b=`No line data.`,domain:x=[`auto`,`auto`],ariaLabel:S=c?`Area chart`:`Line chart`,className:C,style:w,...T}){let E=i??s[n],D=y===`ready`&&e.length===0?`empty`:y;if(D!==`ready`)return(0,a.jsx)(d,{state:D,emptyLabel:b,height:E});let O=e.map((e,t)=>({name:l(g?.[t],String(t+1)),value:e,originalLabel:g?.[t]??String(t+1)})),k=c?o.AreaChart:o.LineChart;return(0,a.jsxs)(`div`,{"data-slot":c?`area-chart`:`line-chart`,role:`img`,"aria-label":S,"data-chart-width":r,className:t.cn(`min-w-0`,C),style:w,...T,children:[(0,a.jsx)(`div`,{style:{height:E},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(k,{data:O,margin:{top:10,right:10,bottom:m?8:0,left:m?-12:0},children:[u?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!m,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!m,domain:x,axisLine:!1,tickLine:!1,width:44,tick:{fill:`var(--muted-foreground)`,fontSize:11}}),h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(p,{valueFormatter:_})}):null,c?(0,a.jsx)(o.Area,{type:`monotone`,dataKey:`value`,name:`Value`,stroke:v,strokeWidth:2.5,fill:v,fillOpacity:.14,activeDot:{r:5},isAnimationActive:!1}):(0,a.jsx)(o.Line,{type:`monotone`,dataKey:`value`,name:`Value`,stroke:v,strokeWidth:2.5,dot:{r:3.5,fill:v},activeDot:{r:5},isAnimationActive:!1})]})})}),(0,a.jsx)(f,{data:e.map((e,t)=>({label:g?.[t]??t+1,value:e})),valueFormatter:_,caption:S})]})}function _(e){return(0,a.jsx)(g,{showArea:!0,...e})}function v({values:e,positive:n=!0,stroke:r,className:i,showTooltip:o=!1,...s}){return(0,a.jsx)(g,{values:e,size:`sm`,stroke:r??(n?`var(--aui-success,var(--primary))`:`var(--destructive)`),showGrid:!1,showAxis:!1,showTooltip:o,className:t.cn(`max-w-44`,i),ariaLabel:`Sparkline`,...s})}function y({data:e,size:n=180,strokeWidth:r=18,centerLabel:i,centerValue:s,state:u=`ready`,emptyLabel:m=`No distribution data.`,showTooltip:h=!0,valueFormatter:g,ariaLabel:_=`Donut chart`,className:v,style:y,...b}){let x=u===`ready`&&e.length===0?`empty`:u;if(x!==`ready`)return(0,a.jsx)(d,{state:x,emptyLabel:m,height:n});let S=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:Math.max(0,e.value),fill:c(t,e.color),description:e.description})),C=Math.max(8,n/2-8);return(0,a.jsxs)(`div`,{"data-slot":`donut-chart`,role:`img`,"aria-label":_,className:t.cn(`relative inline-grid place-items-center`,v),style:{width:n,height:n,...y},...b,children:[(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.PieChart,{children:[h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(p,{valueFormatter:g})}):null,(0,a.jsx)(o.Pie,{data:S,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,innerRadius:Math.max(0,C-r),outerRadius:C,paddingAngle:2,stroke:`var(--background)`,strokeWidth:2,isAnimationActive:!1,children:S.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})}),s||i?(0,a.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 grid place-content-center text-center`,children:[(0,a.jsx)(`div`,{className:`text-xl font-semibold tabular-nums`,children:s}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:i})]}):null,(0,a.jsx)(f,{data:e,valueFormatter:g,caption:_})]})}function b({data:e,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,a.jsxs)(`div`,{className:`inline-flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:c(t,e.color)}}),(0,a.jsx)(`span`,{className:`truncate`,children:e.label})]},t))})}function x({label:e,value:n,change:r,positive:i=!0,values:o,className:s,...c}){return(0,a.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4`,s),...c,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{className:`mt-1 text-2xl font-semibold tracking-tight tabular-nums`,children:n}),r?(0,a.jsx)(`div`,{className:t.cn(`mt-1 text-xs font-medium`,i?`text-[color:var(--aui-success,var(--primary))]`:`text-destructive`),children:r}):null]}),o?.length?(0,a.jsx)(v,{values:o,positive:i}):null]})}exports.AreaChart=_,exports.BarChart=h,exports.ChartFrame=m,exports.ChartLegend=b,exports.ChartTooltipContent=p,exports.DonutChart=y,exports.LineChart=g,exports.MetricTrend=x,exports.Sparkline=v;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../feedback/state-view.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s={sm:120,md:220,lg:320};function c(e,t){return t??`var(--color-chart-${e%5+1}, var(--primary))`}function l(e,t){return typeof e==`string`||typeof e==`number`?String(e):t}function u(e,t){return t?t(e):e.toLocaleString()}function d({state:e,emptyLabel:t,height:n}){return e===`loading`?(0,a.jsx)(r.StateView,{status:`loading`,loadingVariant:`skeleton`,variant:`plain`,size:`compact`,style:{minHeight:n}}):e===`empty`?(0,a.jsx)(r.StateView,{status:`empty`,title:t,description:null,variant:`plain`,size:`compact`,style:{minHeight:n}}):null}function f({data:e,valueFormatter:t,caption:n}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:n}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),(0,a.jsx)(`th`,{scope:`col`,children:`Value`}),(0,a.jsx)(`th`,{scope:`col`,children:`Description`})]})}),(0,a.jsx)(`tbody`,{children:e.map((e,n)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e.label}),(0,a.jsx)(`td`,{children:u(e.value,t)}),(0,a.jsx)(`td`,{children:e.description})]},n))})]})})}function p({labels:e,series:t,valueFormatter:n,caption:r}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:r}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),t.map(e=>(0,a.jsx)(`th`,{scope:`col`,children:e.label},e.key))]})}),(0,a.jsx)(`tbody`,{children:e.map((e,r)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e}),t.map(e=>(0,a.jsx)(`td`,{children:u(e.data[r]??0,n)},e.key))]},r))})]})})}function m({active:e,label:t,payload:n,valueFormatter:r,labelFormatter:i}){return!e||!n?.length?null:(0,a.jsxs)(`div`,{"data-slot":`chart-tooltip`,className:`min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur`,children:[t===void 0?null:(0,a.jsx)(`div`,{className:`mb-2 text-xs font-semibold text-muted-foreground`,children:i?i(t):t}),(0,a.jsx)(`div`,{className:`grid gap-1.5`,children:n.map((e,t)=>{let n=typeof e.value==`number`?e.value:Number(e.value??0);return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 text-sm`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:e.color}}),(0,a.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.name??`Value`}),(0,a.jsx)(`span`,{className:`font-semibold tabular-nums`,children:u(n,r)})]},`${e.name??`value`}-${t}`)})})]})}function h({title:e,description:r,action:i,state:o=`ready`,emptyLabel:s=`No data available.`,className:c,children:l,...u}){return(0,a.jsxs)(n.Card,{"data-slot":`chart-frame`,"data-state":o,className:t.cn(`min-w-0`,c),...u,children:[e||r||i?(0,a.jsxs)(n.CardHeader,{className:`flex-row items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e?(0,a.jsx)(n.CardTitle,{children:e}):null,r?(0,a.jsx)(n.CardDescription,{children:r}):null]}),i?(0,a.jsx)(`div`,{className:`shrink-0`,children:i}):null]}):null,(0,a.jsx)(n.CardContent,{children:o===`ready`?l:(0,a.jsx)(d,{state:o,emptyLabel:s,height:180})})]})}function g({data:e=[],series:n,size:r=`md`,max:i,showLabels:h=!0,showValues:g=!1,showGrid:_=!0,showTooltip:v=!0,valueFormatter:y,state:b=`ready`,emptyLabel:S=`No chart data.`,barClassName:C,domain:w,ariaLabel:T=`Bar chart`,stacked:E=!1,showLegend:D=!!n?.length,barRadius:O=6,className:k,...A}){let j=s[r],M=n?.length?n:[{key:`value`,label:`Value`,data:e.map(e=>e.value)}],N=Math.max(e.length,...M.map(e=>e.data.length)),P=b===`ready`&&N===0?`empty`:b;if(P!==`ready`)return(0,a.jsx)(d,{state:P,emptyLabel:S,height:j});let F=Array.from({length:N},(t,n)=>e[n]?.label??`Item ${n+1}`),I=F.map((e,t)=>Object.fromEntries([[`name`,l(e,`Item ${t+1}`)],[`originalLabel`,e],...M.map(e=>[e.key,e.data[t]??0])])),L=w??(i===void 0?[`auto`,`auto`]:[`auto`,i]);return(0,a.jsxs)(`div`,{"data-slot":`bar-chart`,role:`img`,"aria-label":T,className:t.cn(`min-w-0`,k),...A,children:[(0,a.jsx)(`div`,{style:{height:j},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.BarChart,{data:I,margin:{top:g?20:8,right:8,bottom:h?8:0,left:0},children:[_?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!h,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!0,domain:L}),v?(0,a.jsx)(o.Tooltip,{cursor:{fill:`var(--muted)`,opacity:.35},content:(0,a.jsx)(m,{valueFormatter:y})}):null,M.map((t,r)=>(0,a.jsx)(o.Bar,{dataKey:t.key,name:l(t.label,t.key),fill:c(r,t.color),stackId:E?`total`:void 0,radius:[O,O,2,2],className:C,isAnimationActive:!1,label:g&&(!E||r===M.length-1)?{position:`top`,fill:`var(--muted-foreground)`,fontSize:11,formatter:e=>String(u(Number(e),y))}:!1,children:n?.length?null:e.map((e,t)=>(0,a.jsx)(o.Cell,{fill:c(t,e.color)},t))},t.key))]})})}),D&&M.length>1?(0,a.jsx)(x,{className:`mt-3`,data:M.map((e,t)=>({label:e.label,value:0,color:c(t,e.color)}))}):null,n?.length?(0,a.jsx)(p,{labels:F,series:M,valueFormatter:y,caption:T}):(0,a.jsx)(f,{data:e,valueFormatter:y,caption:T})]})}function _({values:e=[],series:n,size:r=`md`,width:u=560,height:f,showArea:h=!1,showGrid:g=!0,showAxis:_=!1,showTooltip:v=!0,labels:y,valueFormatter:b,stroke:S=`var(--primary)`,state:C=`ready`,emptyLabel:w=`No line data.`,domain:T=[`auto`,`auto`],ariaLabel:E=h?`Area chart`:`Line chart`,curve:D=`monotone`,showDots:O=!h,showLegend:k=!!n?.length,gradient:A=h,strokeWidth:j=2.5,className:M,style:N,...P}){let F=f??s[r],I=i.useId().replace(/:/g,``),L=n?.length?n:[{key:`value`,label:`Value`,data:e,color:S}],R=Math.max(...L.map(e=>e.data.length),0),z=C===`ready`&&R===0?`empty`:C;if(z!==`ready`)return(0,a.jsx)(d,{state:z,emptyLabel:w,height:F});let B=Array.from({length:R},(e,t)=>y?.[t]??String(t+1)),V=B.map((e,t)=>Object.fromEntries([[`name`,l(e,String(t+1))],[`originalLabel`,e],...L.map(e=>[e.key,e.data[t]??0])])),H=h?o.AreaChart:o.LineChart;return(0,a.jsxs)(`div`,{"data-slot":h?`area-chart`:`line-chart`,role:`img`,"aria-label":E,"data-chart-width":u,className:t.cn(`min-w-0`,M),style:N,...P,children:[(0,a.jsx)(`div`,{style:{height:F},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(H,{data:V,margin:{top:10,right:10,bottom:_?8:0,left:_?-12:0},children:[h&&A?(0,a.jsx)(`defs`,{children:L.map((e,t)=>{let n=c(t,e.color);return(0,a.jsxs)(`linearGradient`,{id:`${I}-${e.key}`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,a.jsx)(`stop`,{offset:`0%`,stopColor:n,stopOpacity:.34}),(0,a.jsx)(`stop`,{offset:`92%`,stopColor:n,stopOpacity:.02})]},e.key)})}):null,g?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!_,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!_,domain:T,axisLine:!1,tickLine:!1,width:44,tick:{fill:`var(--muted-foreground)`,fontSize:11}}),v?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(m,{valueFormatter:b})}):null,L.map((e,t)=>{let n=c(t,e.color);return h?(0,a.jsx)(o.Area,{type:D,dataKey:e.key,name:l(e.label,e.key),stroke:n,strokeWidth:j,fill:A?`url(#${I}-${e.key})`:n,fillOpacity:A?1:.12,dot:O?{r:3,fill:n,strokeWidth:2,stroke:`var(--background)`}:!1,activeDot:{r:5,strokeWidth:2,stroke:`var(--background)`},isAnimationActive:!1},e.key):(0,a.jsx)(o.Line,{type:D,dataKey:e.key,name:l(e.label,e.key),stroke:n,strokeWidth:j,dot:O?{r:3,fill:n,strokeWidth:2,stroke:`var(--background)`}:!1,activeDot:{r:5,strokeWidth:2,stroke:`var(--background)`},isAnimationActive:!1},e.key)})]})})}),k&&L.length>1?(0,a.jsx)(x,{className:`mt-3`,data:L.map((e,t)=>({label:e.label,value:0,color:c(t,e.color)}))}):null,(0,a.jsx)(p,{labels:B,series:L,valueFormatter:b,caption:E})]})}function v(e){return(0,a.jsx)(_,{showArea:!0,...e})}function y({values:e,positive:n=!0,stroke:r,className:i,showTooltip:o=!1,...s}){return(0,a.jsx)(_,{values:e,size:`sm`,stroke:r??(n?`var(--aui-success,var(--primary))`:`var(--destructive)`),showGrid:!1,showAxis:!1,showTooltip:o,className:t.cn(`max-w-44`,i),ariaLabel:`Sparkline`,...s})}function b({data:e,size:n=180,strokeWidth:r=18,centerLabel:i,centerValue:s,state:u=`ready`,emptyLabel:p=`No distribution data.`,showTooltip:h=!0,valueFormatter:g,ariaLabel:_=`Donut chart`,className:v,style:y,...b}){let x=u===`ready`&&e.length===0?`empty`:u;if(x!==`ready`)return(0,a.jsx)(d,{state:x,emptyLabel:p,height:n});let S=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:Math.max(0,e.value),fill:c(t,e.color),description:e.description})),C=Math.max(8,n/2-8);return(0,a.jsxs)(`div`,{"data-slot":`donut-chart`,role:`img`,"aria-label":_,className:t.cn(`relative inline-grid place-items-center`,v),style:{width:n,height:n,...y},...b,children:[(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.PieChart,{children:[h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(m,{valueFormatter:g})}):null,(0,a.jsx)(o.Pie,{data:S,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,innerRadius:Math.max(0,C-r),outerRadius:C,paddingAngle:2,stroke:`var(--background)`,strokeWidth:2,isAnimationActive:!1,children:S.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})}),s||i?(0,a.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 grid place-content-center text-center`,children:[(0,a.jsx)(`div`,{className:`text-xl font-semibold tabular-nums`,children:s}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:i})]}):null,(0,a.jsx)(f,{data:e,valueFormatter:g,caption:_})]})}function x({data:e,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,a.jsxs)(`div`,{className:`inline-flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:c(t,e.color)}}),(0,a.jsx)(`span`,{className:`truncate`,children:e.label})]},t))})}function S({label:e,value:n,change:r,positive:i=!0,values:o,className:s,...c}){return(0,a.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4`,s),...c,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{className:`mt-1 text-2xl font-semibold tracking-tight tabular-nums`,children:n}),r?(0,a.jsx)(`div`,{className:t.cn(`mt-1 text-xs font-medium`,i?`text-[color:var(--aui-success,var(--primary))]`:`text-destructive`),children:r}):null]}),o?.length?(0,a.jsx)(y,{values:o,positive:i}):null]})}exports.AreaChart=v,exports.BarChart=g,exports.ChartFrame=h,exports.ChartLegend=x,exports.ChartTooltipContent=m,exports.DonutChart=b,exports.LineChart=_,exports.MetricTrend=S,exports.Sparkline=y;