@atmos.build/ui 0.1.0

package/dist/components/button-group.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react").JSX.Element;
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/button-group.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Separator as SeparatorPrimitive, Slot } from "radix-ui";
+import { cn } from "../lib/cn.js";
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className), ...props }));
+}
+const buttonGroupVariants = cva("group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: "[&>*:not(:first-child)]:rounded-l-none! [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none! [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
+            vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none! [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none! [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "dashed" | "secondary" | "ghost" | "destructive" | "success" | "link-underlined" | null | undefined;
+    size?: "sm" | "default" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../lib/cn.js';
+const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            dashed: "border-border border-dashed bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:hover:bg-muted/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            success: "bg-success-9/10 text-success-11 hover:bg-success-9/20 focus-visible:border-success-9/40 focus-visible:ring-success-9/20 dark:bg-success-9/20 dark:text-success-9 dark:hover:bg-success-9/30 dark:focus-visible:ring-success-9/40",
+            link: "text-primary underline-offset-4 hover:underline",
+            // `link` only underlines on hover, so at rest it reads as prose — fine inline, wrong
+            // where the link is the sole affordance in its container and has to look like one
+            // before you touch it (a tile whose action is blocked, an empty state's next step).
+            "link-underlined": "text-primary underline underline-offset-4",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            icon: "size-8",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/calendar.d.ts

@@ -0,0 +1,26 @@
+import { type FormatDateTime } from '../lib/date-time-format.js';
+export interface CalendarLabels {
+    aria: string;
+    typedPlaceholder: string;
+    typedAria: string;
+    previousMonth: string;
+    nextMonth: string;
+    today: string;
+    tomorrow: string;
+    nextWeek: string;
+    clear: string;
+}
+export interface CalendarProps {
+    value: string | null;
+    onSelect: (date: string | null) => void;
+    selectionMode?: 'day' | 'week';
+    locale?: string;
+    format?: FormatDateTime;
+    className?: string;
+    typeable?: boolean;
+    autoFocusInput?: boolean;
+    minDate?: string;
+    quickActions?: boolean;
+    labels?: Partial<CalendarLabels>;
+}
+export declare function Calendar({ value, onSelect, selectionMode, locale, format, className, typeable, autoFocusInput, minDate, quickActions, labels, }: CalendarProps): import("react").JSX.Element;

package/dist/components/calendar.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { LayoutGroup, motion, useReducedMotion } from 'motion/react';
+import { Button } from './button.js';
+import { cn } from '../lib/cn.js';
+import { parseLooseDate } from "../lib/parse-loose.js";
+import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+const DEFAULT_LABELS = {
+    aria: 'Date picker',
+    typedPlaceholder: 'Type a date…',
+    typedAria: 'Type a date',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+    nextWeek: 'Next week',
+    clear: 'Clear',
+};
+function ymd(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+function fromYmd(value) {
+    if (!value)
+        return null;
+    const [y, m, d] = value.split('-').map(Number);
+    if (!y || !m || !d)
+        return null;
+    return new Date(y, m - 1, d);
+}
+function startOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function addMonths(d, n) {
+    return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+function sameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function startOfWeek(d) {
+    const dow = d.getDay();
+    const offset = (dow + 6) % 7;
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() - offset);
+}
+function sameWeek(a, b) {
+    return sameDay(startOfWeek(a), startOfWeek(b));
+}
+function buildMonthGrid(visibleMonth) {
+    const first = startOfMonth(visibleMonth);
+    const dow = first.getDay();
+    const offset = (dow + 6) % 7;
+    const start = new Date(first);
+    start.setDate(first.getDate() - offset);
+    const cells = [];
+    for (let i = 0; i < 42; i++) {
+        cells.push(new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
+    }
+    return cells;
+}
+export function Calendar({ value, onSelect, selectionMode = 'day', locale, format, className, typeable = true, autoFocusInput = false, minDate, quickActions = true, labels, }) {
+    const t = { ...DEFAULT_LABELS, ...labels };
+    const resolvedLocale = locale ?? 'en';
+    const today = useMemo(() => {
+        const d = new Date();
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    }, []);
+    const selected = fromYmd(value);
+    const [visibleMonth, setVisibleMonth] = useState(() => startOfMonth(selected ?? today));
+    const [syncedValue, setSyncedValue] = useState(value);
+    if (value !== syncedValue) {
+        setSyncedValue(value);
+        const next = fromYmd(value);
+        if (next)
+            setVisibleMonth(startOfMonth(next));
+    }
+    const reduceMotion = useReducedMotion();
+    const selectionLayoutId = useId();
+    const selectionTransition = reduceMotion
+        ? { duration: 0 }
+        : { type: 'spring', stiffness: 520, damping: 36 };
+    const [typed, setTyped] = useState('');
+    const previewDate = useMemo(() => (typed ? parseLooseDate(typed, today) : null), [typed, today]);
+    const handleTypedChange = (val) => {
+        setTyped(val);
+        const parsed = val ? parseLooseDate(val, today) : null;
+        if (parsed)
+            setVisibleMonth(startOfMonth(parsed));
+    };
+    const cells = useMemo(() => buildMonthGrid(visibleMonth), [visibleMonth]);
+    const fmt = useMemo(() => resolveDateTimeFormat(format, resolvedLocale), [format, resolvedLocale]);
+    const monthFormatter = useMemo(() => ({ format: (d) => fmt(d, { month: 'long', year: 'numeric' }) }), [fmt]);
+    const weekdayLabels = useMemo(() => {
+        const mondayAnchor = new Date(2024, 0, 1);
+        return Array.from({ length: 7 }, (_, i) => fmt(new Date(mondayAnchor.getFullYear(), 0, mondayAnchor.getDate() + i), {
+            weekday: 'short',
+        }).replace(/\.$/, ''));
+    }, [fmt]);
+    const isBeforeMin = (d) => (minDate ? ymd(d) < minDate : false);
+    const handlePick = (d) => {
+        if (isBeforeMin(d))
+            return;
+        setTyped('');
+        onSelect(ymd(d));
+    };
+    const handleTypedKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (!typed.trim()) {
+                return;
+            }
+            if (previewDate && !isBeforeMin(previewDate)) {
+                setTyped('');
+                onSelect(ymd(previewDate));
+            }
+        }
+    };
+    const monthIdx = visibleMonth.getMonth();
+    return (_jsxs("div", { className: cn('w-[260px] select-none', className), "data-testid": "calendar", role: "application", "aria-label": t.aria, children: [typeable ? (_jsx("div", { className: "mb-2 px-0.5", children: _jsx("input", { type: "text", value: typed, placeholder: t.typedPlaceholder, "aria-label": t.typedAria, 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus -- explicit opt-in restores focus when the picker opens
+                    autoFocus: autoFocusInput, onChange: (e) => handleTypedChange(e.target.value), onKeyDown: handleTypedKeyDown, "data-testid": "calendar-typed-input", "data-parse-state": typed ? (previewDate ? 'ok' : 'unparseable') : 'empty', className: cn('w-full rounded-md bg-transparent px-2 py-1.5 text-[12.5px] outline-none', 'border-border/50 focus:border-ring/60 border', 'placeholder:text-muted-foreground/60', typed && !previewDate && 'border-destructive/40') }) })) : null, _jsxs("div", { className: "flex items-center justify-between gap-1 px-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t.previousMonth, onClick: () => setVisibleMonth((m) => addMonths(m, -1)), children: _jsx(ChevronLeft, { className: "size-3.5", strokeWidth: 1.8 }) }), _jsx("div", { className: "text-foreground text-[12.5px] font-medium tracking-tight tabular-nums", children: monthFormatter.format(visibleMonth) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t.nextMonth, onClick: () => setVisibleMonth((m) => addMonths(m, 1)), children: _jsx(ChevronRight, { className: "size-3.5", strokeWidth: 1.8 }) })] }), _jsx("div", { className: "text-muted-foreground/70 mt-2 grid grid-cols-7 gap-0.5 px-0.5 text-center text-[10.5px] font-medium", children: weekdayLabels.map((w) => (_jsx("div", { className: "py-1", children: w }, w))) }), _jsx(LayoutGroup, { id: selectionLayoutId, children: _jsx("div", { className: cn('grid grid-cols-7 px-0.5', selectionMode === 'week' ? 'gap-y-0.5' : 'gap-0.5'), children: cells.map((d) => {
+                        const inMonth = d.getMonth() === monthIdx;
+                        const mondayFirstDayIndex = (d.getDay() + 6) % 7;
+                        const isWeekStart = selectionMode === 'week' && mondayFirstDayIndex === 0;
+                        const isWeekEnd = selectionMode === 'week' && mondayFirstDayIndex === 6;
+                        const isToday = sameDay(d, today);
+                        const isSelected = selected !== null &&
+                            (selectionMode === 'week' ? sameWeek(d, selected) : sameDay(d, selected));
+                        const isPreview = previewDate !== null &&
+                            !isSelected &&
+                            (selectionMode === 'week' ? sameWeek(d, previewDate) : sameDay(d, previewDate));
+                        const hostsSelection = isSelected && (selectionMode === 'week' ? isWeekStart : true);
+                        const isDisabled = isBeforeMin(d);
+                        return (_jsxs("button", { type: "button", onClick: () => handlePick(d), disabled: isDisabled, "aria-disabled": isDisabled || undefined, "aria-pressed": isSelected || undefined, "aria-label": d.toDateString(), className: cn('relative h-7 rounded-md text-[12px] tabular-nums transition-colors', 'hover:bg-accent hover:text-accent-foreground cursor-pointer', 'focus-visible:ring-ring/40 focus-visible:ring-2 focus-visible:outline-none', isToday && 'rounded-lg ring-1 ring-foreground/40', inMonth ? 'text-foreground/90' : 'text-muted-foreground/45', isPreview && 'bg-primary/10', isSelected &&
+                                (selectionMode === 'week'
+                                    ? 'text-foreground hover:bg-transparent hover:text-foreground'
+                                    : 'text-primary-foreground hover:text-primary-foreground'), selectionMode === 'week' && (isSelected || isPreview) && 'rounded-none', (isSelected || isPreview) && isWeekStart && 'rounded-l-md', (isSelected || isPreview) && isWeekEnd && 'rounded-r-md', isDisabled && 'pointer-events-none cursor-default opacity-30 hover:bg-transparent'), children: [hostsSelection ? (_jsx(motion.div, { layoutId: "calendar-selection", "aria-hidden": true, "data-testid": "calendar-selection", transition: selectionTransition, className: cn('pointer-events-none absolute rounded-md', selectionMode === 'week'
+                                        ? 'bg-primary/15 inset-y-0 left-0 w-[700%]'
+                                        : 'bg-primary inset-0') })) : null, _jsx("span", { className: "relative z-10", children: d.getDate() })] }, d.toISOString()));
+                    }) }) }), quickActions ? (_jsxs("div", { className: "mt-2 flex items-center gap-1 px-0.5", children: [_jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => onSelect(ymd(today)), children: t.today }), _jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => {
+                            const tomorrow = new Date(today);
+                            tomorrow.setDate(today.getDate() + 1);
+                            onSelect(ymd(tomorrow));
+                        }, children: t.tomorrow }), _jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => {
+                            const nextWeek = new Date(today);
+                            nextWeek.setDate(today.getDate() + 7);
+                            onSelect(ymd(nextWeek));
+                        }, children: t.nextWeek }), value ? (_jsx(Button, { type: "button", size: "xs", variant: "ghost", className: "text-muted-foreground ml-auto", onClick: () => onSelect(null), children: t.clear })) : null] })) : null] }));
+}

package/dist/components/channel-list.d.ts

@@ -0,0 +1,33 @@
+import { type AriaAttributes, type ComponentProps, type ReactNode } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { type VariantProps } from 'class-variance-authority';
+export type ChannelKind = 'web' | 'voice' | 'email' | 'fax';
+export declare function channelIcon(channel: ChannelKind | null | undefined): LucideIcon;
+export interface ChannelBadgeProps extends ComponentProps<'span'> {
+    channel: ChannelKind | null | undefined;
+    label: string;
+    variant?: 'icon' | 'full';
+}
+export declare function ChannelBadge({ channel, label, variant, className, ...props }: ChannelBadgeProps): import("react").JSX.Element;
+declare const channelListRowVariants: (props?: ({
+    density?: "compact" | "roomy" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChannelListRowProps extends VariantProps<typeof channelListRowVariants> {
+    title: string;
+    subtitle?: string;
+    subtitleMuted?: boolean;
+    timestamp?: string | null;
+    timestampTitle?: string;
+    avatar: ReactNode;
+    unread?: boolean;
+    unreadCount?: number;
+    unreadCountLabel?: string;
+    onClick?: () => void;
+    testId?: string;
+    className?: string;
+    monoClassName?: string;
+    'aria-current'?: AriaAttributes['aria-current'];
+}
+export declare function ChannelListRow({ title, subtitle, subtitleMuted, timestamp, timestampTitle, avatar, unread, unreadCount, unreadCountLabel, active, density, onClick, testId, className, monoClassName, ...rest }: ChannelListRowProps): import("react").JSX.Element;
+export { channelListRowVariants };

package/dist/components/channel-list.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
+import { Globe, Inbox, Mail, Phone, Printer } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/cn.js';
+const channelIcons = {
+    web: Globe,
+    voice: Phone,
+    email: Mail,
+    fax: Printer,
+};
+export function channelIcon(channel) {
+    return channel ? (channelIcons[channel] ?? Inbox) : Inbox;
+}
+export function ChannelBadge({ channel, label, variant = 'full', className, ...props }) {
+    const icon = createElement(channelIcon(channel), {
+        className: variant === 'icon' ? 'size-3' : 'size-3 shrink-0',
+        strokeWidth: 1.5,
+        'aria-hidden': true,
+    });
+    if (variant === 'icon') {
+        return _jsx("span", { "data-slot": "channel-badge", "data-channel": channel ?? 'unknown', "data-variant": "icon", role: "img", "aria-label": label, title: label, className: cn('inline-flex size-5 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/40 text-muted-foreground', className), ...props, children: icon });
+    }
+    return _jsxs("span", { "data-slot": "channel-badge", "data-channel": channel ?? 'unknown', "data-variant": "full", className: cn('inline-flex h-5 shrink-0 items-center gap-1 rounded-md border border-border/60 bg-muted/40 px-1.5 text-[11px] font-medium text-muted-foreground', className), ...props, children: [icon, _jsx("span", { children: label })] });
+}
+const channelListRowVariants = cva(['group relative flex w-full cursor-pointer items-center gap-2.5 rounded-md text-left', 'pr-2 pl-1.5 transition-colors outline-none', 'focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-0', 'hover:bg-muted/60'], {
+    variants: {
+        density: { roomy: 'h-12', compact: 'py-1.5' },
+        active: { true: 'bg-muted text-foreground', false: 'text-foreground/90' },
+    },
+    defaultVariants: { density: 'roomy', active: false },
+});
+export function ChannelListRow({ title, subtitle, subtitleMuted = false, timestamp, timestampTitle, avatar, unread = false, unreadCount = 0, unreadCountLabel, active = false, density, onClick, testId, className, monoClassName, ...rest }) {
+    const showCount = unread && unreadCount > 0;
+    const showDot = unread && unreadCount <= 0;
+    const showRightColumn = Boolean(timestamp) || showCount || showDot;
+    return (_jsxs("button", { type: "button", "data-slot": "channel-list-row", "data-testid": testId, "data-unread": unread || undefined, "data-active": active || undefined, "aria-current": rest['aria-current'], onClick: onClick, className: cn(channelListRowVariants({ density, active }), className), children: [avatar, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-tight", children: [_jsx("span", { className: cn('min-w-0 truncate text-[12.5px]', unread ? 'font-semibold text-foreground' : 'text-foreground/90'), children: title }), subtitle ? _jsx("span", { className: cn('truncate text-[11px]', unread ? 'text-foreground/80' : subtitleMuted ? 'italic text-muted-foreground/55' : 'text-muted-foreground/85'), children: subtitle }) : null] }), showRightColumn ? _jsxs("span", { className: "flex shrink-0 flex-col items-end justify-center gap-1 self-stretch py-0.5", children: [timestamp ? _jsx("span", { title: timestampTitle, className: cn('text-[10px] tabular-nums', unread ? 'font-medium text-foreground/75' : 'text-muted-foreground/70', monoClassName), children: timestamp }) : null, showCount ? _jsx("span", { "aria-label": unreadCountLabel, className: cn('flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium tabular-nums text-primary-foreground', monoClassName), children: unreadCount > 99 ? '99+' : unreadCount }) : showDot ? _jsx("span", { role: "img", "aria-label": unreadCountLabel, className: "size-2 rounded-full bg-primary" }) : null] }) : null] }));
+}
+export { channelListRowVariants };

package/dist/components/charts/area-chart.d.ts

@@ -0,0 +1,2 @@
+import type { CartesianChartProps } from './types.js';
+export declare function AreaChart(props: CartesianChartProps): import("react").JSX.Element;

package/dist/components/charts/area-chart.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LineAreaChart } from './line-area-chart.js';
+export function AreaChart(props) {
+    return _jsx(LineAreaChart, { ...props, variant: "area" });
+}

package/dist/components/charts/bar-chart.d.ts

@@ -0,0 +1,2 @@
+import type { BarChartProps } from './types.js';
+export declare function BarChart(props: BarChartProps): import("react").JSX.Element;

package/dist/components/charts/bar-chart.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { ChartTooltip, useCartesianHover } from './hover.js';
+import { CartesianGrid, cartesianMetrics } from './layout.js';
+export function BarChart(props) {
+    const { data, xKey = 'label', yKeys = ['value'], stacked = false, colors, className } = props;
+    const metrics = cartesianMetrics(props, stacked);
+    const groupW = metrics.innerW / Math.max(1, data.length);
+    const format = props.valueFormatter ?? ((value) => String(value));
+    const barW = stacked
+        ? Math.max(7, Math.min(36, groupW * 0.54))
+        : Math.max(5, Math.min(28, groupW / Math.max(1, yKeys.length) - 5));
+    const cornerRadius = Math.min(8, barW / 2);
+    const { state: hoverState, move, clear } = useCartesianHover(metrics, data.length, true);
+    const hoveredRow = hoverState ? data[hoverState.index] : undefined;
+    return (_jsxs("div", { className: "relative h-full w-full", children: [_jsxs("svg", { viewBox: `0 0 ${metrics.w} ${metrics.h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": props.ariaLabel, onPointerMove: move, onPointerLeave: clear, children: [_jsx(CartesianGrid, { ...metrics, data: data, xKey: xKey, banded: true }), hoverState ? (_jsx("rect", { x: metrics.pad.l + hoverState.index * groupW, y: metrics.pad.t, width: groupW, height: metrics.innerH, fill: "currentColor", opacity: 0.05, "aria-hidden": true })) : null, data.map((row, rowIndex) => {
+                        let stackBase = 0;
+                        const topStackIndex = stacked ? topPositiveStackIndex(row, yKeys) : -1;
+                        return yKeys.map((key, keyIndex) => {
+                            const value = Math.max(0, Number(row[key] ?? 0));
+                            const barX = stacked
+                                ? metrics.pad.l + rowIndex * groupW + (groupW - barW) / 2
+                                : metrics.pad.l + rowIndex * groupW + keyIndex * (barW + 4) + 6;
+                            const barY = stacked ? metrics.y(stackBase + value) : metrics.y(value);
+                            const barHeight = stacked
+                                ? metrics.y(stackBase) - metrics.y(stackBase + value)
+                                : metrics.pad.t + metrics.innerH - barY;
+                            const height = Math.max(0, barHeight);
+                            const color = chartColor(colors, keyIndex);
+                            const opacity = keyIndex === 0 ? 0.96 : 0.78;
+                            stackBase += value;
+                            if (stacked && keyIndex === topStackIndex && height > 0) {
+                                return (_jsx("path", { d: topRoundedRectPath(barX, barY, barW, height, cornerRadius), fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
+                            }
+                            return (_jsx("rect", { x: barX, y: barY, width: barW, height: height, rx: stacked ? 0 : cornerRadius, fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
+                        });
+                    })] }), hoverState && hoveredRow ? (_jsx(ChartTooltip, { state: hoverState, row: hoveredRow, xKey: xKey, yKeys: yKeys, colors: colors, format: format })) : null] }));
+}
+function topPositiveStackIndex(row, yKeys) {
+    for (let index = yKeys.length - 1; index >= 0; index -= 1) {
+        if (Math.max(0, Number(row[yKeys[index] ?? ''] ?? 0)) > 0)
+            return index;
+    }
+    return -1;
+}
+function topRoundedRectPath(x, y, width, height, radius) {
+    const r = Math.min(radius, width / 2, height);
+    return [
+        `M ${x} ${y + height}`,
+        `L ${x} ${y + r}`,
+        `Q ${x} ${y} ${x + r} ${y}`,
+        `L ${x + width - r} ${y}`,
+        `Q ${x + width} ${y} ${x + width} ${y + r}`,
+        `L ${x + width} ${y + height}`,
+        'Z',
+    ].join(' ');
+}

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

@@ -0,0 +1,2 @@
+export declare const CHART_COLORS: string[];
+export declare function chartColor(colors: string[] | undefined, index: number): string;

package/dist/components/charts/colors.js

@@ -0,0 +1,42 @@
+/* The categorical series ramp is a token, not a literal, so a chart follows the theme
+   the way every other surface does — including inside an MCP App frame, which is
+   handed the resolved `--category-*` values along with the rest of the palette. */
+export const CHART_COLORS = [
+    'var(--category-1)',
+    'var(--category-2)',
+    'var(--category-3)',
+    'var(--category-4)',
+    'var(--category-5)',
+    'var(--category-6)',
+];
+export function chartColor(colors, index) {
+    const custom = safeChartColor(colors?.[index]);
+    if (custom)
+        return custom;
+    return CHART_COLORS[index % CHART_COLORS.length] ?? 'var(--primary)';
+}
+const SAFE_CSS_COLOR_FUNCTION = /^(?:rgb|rgba|hsl|hsla|oklab|oklch)\([\d\s.,%/+-]+\)$/i;
+const SAFE_HEX_COLOR = /^#[\da-f]{3,8}$/i;
+const SAFE_COLOR_KEYWORD = /^(?:black|white|transparent|currentColor)$/i;
+const SAFE_INTERNAL_COLOR_TOKEN = /^var\(--(?:primary|foreground|muted-foreground|border|ring|destructive|background|category-[1-6]|(?:success|warning|danger|info)-(?:3|9|11))\)$/i;
+function safeChartColor(color) {
+    const value = color?.trim();
+    if (!value || value.length > 96 || hasControlCharacter(value))
+        return undefined;
+    if (/[;{}]/.test(value) || /\b(?:url|image-set|paint|expression|import)\s*\(/i.test(value)) {
+        return undefined;
+    }
+    if (SAFE_HEX_COLOR.test(value) ||
+        SAFE_COLOR_KEYWORD.test(value) ||
+        SAFE_INTERNAL_COLOR_TOKEN.test(value) ||
+        SAFE_CSS_COLOR_FUNCTION.test(value)) {
+        return value;
+    }
+    return undefined;
+}
+function hasControlCharacter(value) {
+    return Array.from(value).some((char) => {
+        const code = char.charCodeAt(0);
+        return code <= 31 || code === 127;
+    });
+}

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

@@ -0,0 +1,20 @@
+import type { CartesianMetrics } from './layout.js';
+import type { ChartDatum } from './types.js';
+export interface ChartHoverState {
+    index: number;
+    left: number;
+    top: number;
+}
+export declare function useCartesianHover(metrics: CartesianMetrics, count: number, banded: boolean): {
+    state: ChartHoverState | null;
+    move: (event: React.PointerEvent<SVGSVGElement>) => void;
+    clear: () => void;
+};
+export declare function ChartTooltip({ state, row, xKey, yKeys, colors, format, }: {
+    state: ChartHoverState;
+    row: ChartDatum;
+    xKey: string;
+    yKeys: string[];
+    colors?: string[];
+    format: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/components/charts/hover.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { chartColor } from './colors.js';
+const TOOLTIP_EDGE_PX = 64;
+export function useCartesianHover(metrics, count, banded) {
+    const [state, setState] = useState(null);
+    const clear = useCallback(() => setState(null), []);
+    const move = useCallback((event) => {
+        const svg = event.currentTarget;
+        const frame = svg.parentElement;
+        const ctm = svg.getScreenCTM?.();
+        if (!frame || !ctm || count === 0)
+            return;
+        const local = new DOMPoint(event.clientX, event.clientY).matrixTransform(ctm.inverse());
+        const step = metrics.innerW / Math.max(1, banded ? count : count - 1);
+        const rawIndex = banded
+            ? Math.floor((local.x - metrics.pad.l) / step)
+            : Math.round((local.x - metrics.pad.l) / step);
+        const index = Math.max(0, Math.min(count - 1, rawIndex));
+        const anchorX = banded ? metrics.pad.l + step * (index + 0.5) : metrics.x(index);
+        const anchor = new DOMPoint(anchorX, metrics.pad.t).matrixTransform(ctm);
+        const frameRect = frame.getBoundingClientRect();
+        const left = Math.max(TOOLTIP_EDGE_PX, Math.min(frameRect.width - TOOLTIP_EDGE_PX, anchor.x - frameRect.left));
+        setState({ index, left, top: anchor.y - frameRect.top });
+    }, [banded, count, metrics]);
+    return { state, move, clear };
+}
+export function ChartTooltip({ state, row, xKey, yKeys, colors, format, }) {
+    return (_jsxs("div", { className: "bg-popover text-popover-foreground pointer-events-none absolute z-10 min-w-28 -translate-x-1/2 rounded-lg border px-2.5 py-1.5 text-xs shadow-md", style: { left: state.left, top: state.top + 4 }, role: "status", children: [_jsx("p", { className: "text-muted-foreground font-medium", children: String(row[xKey] ?? '') }), yKeys.map((key, index) => row[key] == null ? null : (_jsxs("p", { className: "mt-1 flex items-center gap-1.5 tabular-nums", children: [_jsx("span", { className: "size-2 shrink-0 rounded-[2px]", style: { background: chartColor(colors, index) }, "aria-hidden": true }), _jsx("span", { className: "text-muted-foreground", children: key }), _jsx("span", { className: "ml-auto pl-3 font-medium", children: format(Number(row[key])) })] }, key)))] }));
+}

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

@@ -0,0 +1,10 @@
+export { AreaChart } from './area-chart.js';
+export { BarChart } from './bar-chart.js';
+export { ChartLegend } from './legend.js';
+export { LineChart } from './line-chart.js';
+export { PieChart } from './pie-chart.js';
+export { RadarChart } from './radar-chart.js';
+export { RadialChart } from './radial-chart.js';
+export { ScatterChart } from './scatter-chart.js';
+export { chartColor } from './colors.js';
+export type { BarChartProps, CartesianChartProps, CategoricalChartProps, ChartAxisOptions, ChartDatum, ChartLegendItem, ScatterChartProps, } from './types.js';

package/dist/components/charts/index.js

@@ -0,0 +1,9 @@
+export { AreaChart } from './area-chart.js';
+export { BarChart } from './bar-chart.js';
+export { ChartLegend } from './legend.js';
+export { LineChart } from './line-chart.js';
+export { PieChart } from './pie-chart.js';
+export { RadarChart } from './radar-chart.js';
+export { RadialChart } from './radial-chart.js';
+export { ScatterChart } from './scatter-chart.js';
+export { chartColor } from './colors.js';

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

@@ -0,0 +1,35 @@
+import type { CartesianChartProps, ChartDatum } from './types.js';
+export interface CartesianMetrics {
+    w: number;
+    h: number;
+    pad: {
+        l: number;
+        r: number;
+        t: number;
+        b: number;
+    };
+    innerW: number;
+    innerH: number;
+    max: number;
+    axis: CartesianChartProps['axis'];
+    showXAxis: boolean;
+    showYAxis: boolean;
+    y: (value: number) => number;
+    x: (index: number) => number;
+    valueFormatter?: (value: number) => string;
+}
+export declare function cartesianMetrics(props: CartesianChartProps, stacked: boolean): CartesianMetrics;
+export declare function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, max, axis, showXAxis, showYAxis, valueFormatter, banded, }: CartesianMetrics & {
+    data: ChartDatum[];
+    xKey: string;
+    banded?: boolean;
+}): import("react").JSX.Element;
+export declare function categoricalMetrics(height: number): {
+    w: number;
+    h: number;
+    cx: number;
+    cy: number;
+    r: number;
+};
+export declare function piePath(cx: number, cy: number, r: number, start: number, end: number): string;
+export declare function ringArcPath(cx: number, cy: number, r: number, start: number, end: number): string;