@agentxjs/ui 0.0.1

package/dist/components/element/Badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "primary" | "secondary" | "success" | "warning" | "info" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/element/Button.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "outline" | "secondary" | "destructive" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/element/EmptyState.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon element to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Title text
+     */
+    title: string;
+    /**
+     * Description text
+     */
+    description?: string;
+    /**
+     * Action button or element
+     */
+    action?: React.ReactNode;
+    /**
+     * Vertical spacing size
+     */
+    spacing?: "sm" | "md" | "lg";
+}
+/**
+ * EmptyState - Display empty state with icon, title, description, and optional action
+ *
+ * A flexible component for showing empty states in lists, tables, search results, etc.
+ * Supports custom icons, descriptions, and action buttons.
+ *
+ * @example
+ * ```tsx
+ * // Basic empty state
+ * <EmptyState
+ *   icon={<MessageSquare className="w-6 h-6" />}
+ *   title="No sessions found"
+ *   description="Create a new session to get started"
+ * />
+ *
+ * // With action button
+ * <EmptyState
+ *   icon={<Inbox className="w-6 h-6" />}
+ *   title="No messages"
+ *   description="Your inbox is empty"
+ *   action={<Button>Compose Message</Button>}
+ * />
+ *
+ * // Search results empty state
+ * <EmptyState
+ *   icon={<Search className="w-6 h-6" />}
+ *   title="No matching results"
+ *   description="Try adjusting your search term"
+ *   spacing="sm"
+ * />
+ * ```
+ */
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/element/ImageAttachment.d.ts

@@ -0,0 +1,50 @@
+export interface ImageAttachmentProps {
+    /**
+     * The image file to display
+     */
+    file: File;
+    /**
+     * Callback when remove button is clicked
+     */
+    onRemove: () => void;
+    /**
+     * Upload progress (0-100). Shows progress overlay when < 100
+     */
+    uploadProgress?: number;
+    /**
+     * Error message. Shows error overlay when provided
+     */
+    error?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * ImageAttachment - Display image preview with upload progress and remove button
+ *
+ * Single Responsibility: Display a single image attachment with its upload state
+ *
+ * Used in input area for previewing images before sending
+ *
+ * @example
+ * ```tsx
+ * <ImageAttachment
+ *   file={imageFile}
+ *   onRemove={() => handleRemove(index)}
+ * />
+ *
+ * <ImageAttachment
+ *   file={imageFile}
+ *   uploadProgress={75}
+ *   onRemove={() => handleRemove(index)}
+ * />
+ *
+ * <ImageAttachment
+ *   file={imageFile}
+ *   error="Upload failed"
+ *   onRemove={() => handleRemove(index)}
+ * />
+ * ```
+ */
+export declare function ImageAttachment({ file, onRemove, uploadProgress, error, className, }: ImageAttachmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/element/Input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/element/ListItem.d.ts

@@ -0,0 +1,106 @@
+import * as React from "react";
+export interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Whether the item is active (within last 10 minutes, etc.)
+     */
+    active?: boolean;
+    /**
+     * Whether to show active indicator dot
+     */
+    showActiveIndicator?: boolean;
+    /**
+     * Left side content (icon, avatar, logo, etc.)
+     */
+    leading?: React.ReactNode;
+    /**
+     * Main title content
+     */
+    title: React.ReactNode;
+    /**
+     * Subtitle content (timestamp, description, etc.)
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Trailing content (badge, actions, etc.)
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Action buttons (show on hover for desktop)
+     */
+    actions?: React.ReactNode;
+    /**
+     * Layout variant
+     */
+    variant?: "default" | "compact";
+    /**
+     * Whether in mobile mode
+     */
+    isMobile?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * ListItem - Generic list item component with flexible slots
+ *
+ * A highly flexible list item component for building various list UIs.
+ * Supports leading icons, titles, subtitles, trailing content, and hover actions.
+ * Can be used for sessions, messages, users, files, etc.
+ *
+ * @example
+ * ```tsx
+ * // Session item
+ * <ListItem
+ *   leading={<AgentLogo />}
+ *   title="Project Planning Session"
+ *   subtitle={
+ *     <div className="flex items-center gap-1">
+ *       <Clock className="w-3 h-3" />
+ *       <TimeAgo date={session.lastActivity} />
+ *     </div>
+ *   }
+ *   trailing={<Badge>5</Badge>}
+ *   actions={
+ *     <button><Trash2 className="w-3 h-3" /></button>
+ *   }
+ *   selected={isSelected}
+ *   onClick={handleSelect}
+ * />
+ *
+ * // User item
+ * <ListItem
+ *   leading={<Avatar src={user.avatar} />}
+ *   title={user.name}
+ *   subtitle={user.email}
+ *   trailing={<Badge variant="success">Online</Badge>}
+ * />
+ *
+ * // File item
+ * <ListItem
+ *   leading={<File className="w-5 h-5" />}
+ *   title="document.pdf"
+ *   subtitle="2.4 MB"
+ *   actions={
+ *     <>
+ *       <button><Download /></button>
+ *       <button><Trash2 /></button>
+ *     </>
+ *   }
+ * />
+ *
+ * // With active indicator
+ * <ListItem
+ *   active
+ *   showActiveIndicator
+ *   leading={<MessageSquare />}
+ *   title="Live Session"
+ *   subtitle="Active now"
+ * />
+ * ```
+ */
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/element/LoadingState.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export interface LoadingStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon or spinner element to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Title text
+     */
+    title?: string;
+    /**
+     * Description text
+     */
+    description?: string;
+    /**
+     * Vertical spacing size
+     */
+    spacing?: "sm" | "md" | "lg";
+    /**
+     * Show default spinner if no icon provided
+     */
+    showSpinner?: boolean;
+}
+/**
+ * LoadingState - Display loading state with spinner, title, and description
+ *
+ * A flexible component for showing loading states in lists, tables, pages, etc.
+ * Automatically shows a spinner unless a custom icon is provided.
+ *
+ * @example
+ * ```tsx
+ * // Basic loading state
+ * <LoadingState
+ *   title="Loading sessions..."
+ *   description="Fetching your Agent sessions"
+ * />
+ *
+ * // Minimal loading state
+ * <LoadingState title="Loading..." spacing="sm" />
+ *
+ * // Custom icon
+ * <LoadingState
+ *   icon={<RefreshCw className="w-6 h-6 animate-spin" />}
+ *   title="Refreshing data..."
+ * />
+ *
+ * // Spinner only (no text)
+ * <LoadingState showSpinner />
+ * ```
+ */
+export declare const LoadingState: React.ForwardRefExoticComponent<LoadingStateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/element/MessageAvatar.d.ts

@@ -0,0 +1,61 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const avatarVariants: (props?: ({
+    variant?: "error" | "primary" | "secondary" | "success" | "warning" | "info" | "neutral" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
+    /**
+     * Label text to display next to avatar
+     */
+    label: string;
+    /**
+     * Icon to display in avatar (lucide-react icon component)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Image URL for avatar (overrides icon)
+     */
+    src?: string;
+    /**
+     * Alt text for image
+     */
+    alt?: string;
+}
+/**
+ * MessageAvatar - Display avatar with icon/image and label
+ *
+ * A flexible avatar component for message headers. Supports icons, images,
+ * and multiple color variants for different message types or agents.
+ *
+ * Design System Colors:
+ * - Primary (Blue): AI Assistant, computational tasks
+ * - Secondary (Amber): User messages, generative tasks
+ * - Info (Light Blue): System messages, tools
+ * - Error (Red): Error messages
+ * - Success (Green): Success messages
+ * - Neutral (Gray): Default/unknown
+ *
+ * @example
+ * ```tsx
+ * // With icon
+ * <MessageAvatar
+ *   label="AI Assistant"
+ *   variant="primary"
+ *   icon={<Bot className="w-5 h-5 text-white" />}
+ * />
+ *
+ * // With image
+ * <MessageAvatar
+ *   label="Agent Smith"
+ *   variant="info"
+ *   src="/avatars/agent-smith.png"
+ *   alt="Agent Smith"
+ * />
+ *
+ * // Simple text avatar
+ * <MessageAvatar label="System" variant="neutral" />
+ * ```
+ */
+export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export { avatarVariants };

package/dist/components/element/PageHeader.d.ts

@@ -0,0 +1,90 @@
+import * as React from "react";
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main title text
+     */
+    title: string;
+    /**
+     * Optional subtitle/description
+     */
+    subtitle?: string;
+    /**
+     * Optional leading element (e.g., menu button, back button)
+     */
+    leading?: React.ReactNode;
+    /**
+     * Optional trailing element (e.g., actions, tabs)
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Whether to show border at bottom
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Whether in mobile mode (compact spacing)
+     * @default false
+     */
+    isMobile?: boolean;
+}
+/**
+ * PageHeader - Flexible page header with title and actions
+ *
+ * A generic header component for page layouts. Supports leading elements
+ * (menu buttons, back buttons), title/subtitle, and trailing elements
+ * (actions, tabs, buttons). Automatically handles mobile responsive layout.
+ *
+ * @example
+ * ```tsx
+ * // Basic header with title
+ * <PageHeader title="New Session" />
+ *
+ * // With subtitle
+ * <PageHeader
+ *   title="Dashboard"
+ *   subtitle="Welcome back!"
+ * />
+ *
+ * // With mobile menu button
+ * <PageHeader
+ *   title="Settings"
+ *   leading={
+ *     <Button variant="ghost" size="icon">
+ *       <Menu className="w-5 h-5" />
+ *     </Button>
+ *   }
+ *   isMobile
+ * />
+ *
+ * // With tab navigation
+ * <PageHeader
+ *   title="Project Explorer"
+ *   trailing={
+ *     <TabNavigation
+ *       tabs={tabs}
+ *       activeTab={activeTab}
+ *       onTabChange={setActiveTab}
+ *     />
+ *   }
+ * />
+ *
+ * // Complete example with all props
+ * <PageHeader
+ *   title="Agent Conversation"
+ *   subtitle="deepractice-ai/project"
+ *   leading={<MenuButton onClick={toggleSidebar} />}
+ *   trailing={
+ *     <TabNavigation
+ *       tabs={[
+ *         { id: 'chat', label: 'Chat', icon: <MessageSquare /> },
+ *         { id: 'shell', label: 'Shell', icon: <Terminal /> },
+ *       ]}
+ *       activeTab="chat"
+ *       onTabChange={setTab}
+ *     />
+ *   }
+ *   isMobile
+ * />
+ * ```
+ */
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/element/Popover.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface PopoverProps {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Popover({ children, open: controlledOpen, onOpenChange }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+interface PopoverTriggerProps {
+    children: React.ReactNode;
+    asChild?: boolean;
+}
+export declare function PopoverTrigger({ children, asChild }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface PopoverContentProps {
+    children: React.ReactNode;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+}
+export declare function PopoverContent({ children, align, side, className, }: PopoverContentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/element/ScrollArea.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea };

package/dist/components/element/SearchInput.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    /**
+     * Current search value (controlled)
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Callback when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Show search icon on the left
+     * @default true
+     */
+    showSearchIcon?: boolean;
+    /**
+     * Show clear button when input has value
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Custom search icon element
+     */
+    searchIcon?: React.ReactNode;
+    /**
+     * Custom clear icon element
+     */
+    clearIcon?: React.ReactNode;
+}
+/**
+ * SearchInput - Input field with search icon and clear button
+ *
+ * A specialized input component for search functionality with built-in
+ * search icon and clear button. Fully controlled with onChange callback.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [search, setSearch] = useState("");
+ * <SearchInput
+ *   value={search}
+ *   onChange={setSearch}
+ *   placeholder="Search sessions..."
+ * />
+ *
+ * // With custom clear handler
+ * <SearchInput
+ *   value={searchFilter}
+ *   onChange={setSearchFilter}
+ *   onClear={() => {
+ *     setSearchFilter("");
+ *     resetResults();
+ *   }}
+ * />
+ *
+ * // Without search icon
+ * <SearchInput
+ *   value={query}
+ *   onChange={setQuery}
+ *   showSearchIcon={false}
+ * />
+ *
+ * // Custom styling
+ * <SearchInput
+ *   value={search}
+ *   onChange={setSearch}
+ *   className="bg-muted/50 focus:bg-background"
+ * />
+ * ```
+ */
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/element/TabNavigation.d.ts

@@ -0,0 +1,91 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const tabNavigationVariants: (props?: ({
+    variant?: "underline" | "pills" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface Tab {
+    /**
+     * Unique identifier for the tab
+     */
+    id: string;
+    /**
+     * Tab label text
+     */
+    label: string;
+    /**
+     * Optional icon element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled?: boolean;
+}
+export interface TabNavigationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof tabNavigationVariants> {
+    /**
+     * Array of tab items
+     */
+    tabs: Tab[];
+    /**
+     * Currently active tab ID
+     */
+    activeTab: string;
+    /**
+     * Callback when tab is changed
+     */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Whether to show icons only on mobile
+     * @default false
+     */
+    iconOnlyMobile?: boolean;
+}
+/**
+ * TabNavigation - Flexible tab navigation component
+ *
+ * A versatile tab navigation that supports both pills and underline styles.
+ * Can display tabs with icons, labels, or both. Automatically handles active
+ * states and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * // Pills variant (default)
+ * <TabNavigation
+ *   tabs={[
+ *     { id: 'chat', label: 'Chat', icon: <MessageSquare /> },
+ *     { id: 'shell', label: 'Shell', icon: <Terminal /> },
+ *     { id: 'files', label: 'Files', icon: <Folder /> },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ *
+ * // Underline variant
+ * <TabNavigation
+ *   variant="underline"
+ *   tabs={tabs}
+ *   activeTab={current}
+ *   onTabChange={setCurrent}
+ * />
+ *
+ * // Icon only on mobile
+ * <TabNavigation
+ *   tabs={tabs}
+ *   activeTab={active}
+ *   onTabChange={onChange}
+ *   iconOnlyMobile
+ * />
+ *
+ * // With disabled tabs
+ * <TabNavigation
+ *   tabs={[
+ *     { id: 'tab1', label: 'Enabled' },
+ *     { id: 'tab2', label: 'Disabled', disabled: true },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+export declare const TabNavigation: React.ForwardRefExoticComponent<TabNavigationProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/element/TimeAgo.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface TimeAgoProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Date to display (ISO string or Date object)
+     */
+    date: string | Date;
+    /**
+     * Auto-update interval in milliseconds (0 to disable)
+     * @default 60000 (1 minute)
+     */
+    updateInterval?: number;
+    /**
+     * Show tooltip with full date on hover
+     * @default true
+     */
+    showTooltip?: boolean;
+}
+/**
+ * TimeAgo - Display relative time with auto-update
+ *
+ * A component that displays relative time ("Just now", "5 mins ago") and
+ * automatically updates at a specified interval. Useful for showing timestamps
+ * in lists, messages, and activity feeds.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with auto-update every minute
+ * <TimeAgo date="2025-01-14T10:30:00Z" />
+ *
+ * // With custom styling
+ * <TimeAgo
+ *   date={session.lastActivity}
+ *   className="text-xs text-muted-foreground"
+ * />
+ *
+ * // Disable auto-update
+ * <TimeAgo date={message.timestamp} updateInterval={0} />
+ *
+ * // Fast update interval (every 10 seconds)
+ * <TimeAgo date={recentEvent} updateInterval={10000} />
+ *
+ * // No tooltip
+ * <TimeAgo date={date} showTooltip={false} />
+ * ```
+ */
+export declare const TimeAgo: React.ForwardRefExoticComponent<TimeAgoProps & React.RefAttributes<HTMLSpanElement>>;