react-18-ui-library 0.1.0

package/README.md

@@ -0,0 +1,202 @@
+# react-18-ui-library
+
+A fully customizable, theme-aware React 18 enterprise UI component library. All components consume CSS custom properties from the parent app's `:root` — no hardcoded colors, no runtime CSS-in-JS overhead.
+
+## Quick Start
+
+```bash
+npm install react-18-ui-library
+```
+
+```tsx
+// 1. Import the default theme tokens (fallback values)
+import 'react-18-ui-library/styles'
+
+// 2. Use components directly — they read CSS vars from your app's :root
+import { Button, TextField, AppShell } from 'react-18-ui-library'
+```
+
+## Theme System
+
+Components read CSS custom properties from the parent app's `:root`. Override any token in your app's CSS:
+
+```css
+/* your-app/globals.css */
+:root {
+  --color-primary: #7c3aed;
+  --color-primary-hover: #6d28d9;
+  --color-primary-foreground: #ffffff;
+  --color-background: #fafafa;
+  --color-surface: #ffffff;
+  --color-text: #111827;
+  --radius-md: 0.5rem;
+  --font-family-base: 'Inter', sans-serif;
+  /* ...etc */
+}
+```
+
+Or use the optional `ThemeProvider` to set tokens programmatically:
+
+```tsx
+import { ThemeProvider } from 'react-18-ui-library'
+
+<ThemeProvider tokens={{ colorPrimary: '#7c3aed', radiusMd: '0.5rem' }}>
+  <App />
+</ThemeProvider>
+```
+
+## Component Categories
+
+| Category | Components |
+|---|---|
+| **Layout** | `AppShell`, `Navbar`, `Sidebar`, `Container`, `Stack`, `Grid`, `Divider`, `Spacer` |
+| **Navigation** | `Tabs`, `Breadcrumb`, `Pagination`, `StepIndicator` |
+| **Inputs** | `Button`, `IconButton`, `TextField`, `TextArea`, `Select`, `Checkbox`, `RadioGroup`, `Switch` |
+| **Forms** | `FormField`, `JSONForm`, `FileUpload` |
+| **Display** | `Card`, `Box`, `Image`, `Avatar`, `Badge`, `Tag`, `Icon`, `SVG`, `Table`, `List`, `Timeline`, `Stat`, `EmptyState` |
+| **Feedback** | `Alert`, `ToastProvider`, `Spinner`, `Skeleton`, `ProgressBar`, `ErrorBoundary` |
+| **Overlay** | `Modal`, `Drawer`, `Tooltip`, `Popover`, `ContextMenu` |
+| **Typography** | `Heading`, `Text`, `Label`, `Code`, `Link` |
+
+## Key Components
+
+### AppShell — Full Layout
+
+```tsx
+import { AppShell } from 'react-18-ui-library'
+import { LayoutDashboard, Users, Settings } from 'lucide-react'
+
+<AppShell
+  navbar={{
+    logo: <Logo />,
+    links: [{ label: 'Home', href: '/', active: true }],
+    actions: <Button size="sm">Sign Out</Button>,
+  }}
+  sidebar={{
+    items: [
+      { id: 'dash', label: 'Dashboard', icon: <LayoutDashboard size={16} />, active: true },
+      { id: 'users', label: 'Users', icon: <Users size={16} />, badge: 5 },
+      { id: 'settings', label: 'Settings', icon: <Settings size={16} /> },
+    ],
+  }}
+>
+  <main>Your page content</main>
+</AppShell>
+```
+
+### TextField — Prefix / Suffix
+
+```tsx
+<TextField
+  label="Amount"
+  prefixText="$"
+  suffixText="USD"
+  placeholder="0.00"
+/>
+
+<TextField
+  label="Search"
+  prefixIcon={<Search size={14} />}
+  clearable
+/>
+
+<TextField
+  label="Phone"
+  prefixImage="/flags/us.png"
+  prefixText="+1"
+  type="tel"
+/>
+```
+
+### JSONForm — Schema-Driven Forms
+
+```tsx
+import { JSONForm } from 'react-18-ui-library'
+import type { JSONFormField } from 'react-18-ui-library'
+
+const schema: JSONFormField[] = [
+  { name: 'name', type: 'text', label: 'Full Name', required: true, prefixIcon: <User size={14} /> },
+  { name: 'email', type: 'email', label: 'Email', required: true, prefixIcon: <Mail size={14} /> },
+  { name: 'role', type: 'select', label: 'Role', options: [{ value: 'admin', label: 'Admin' }] },
+  { name: 'bio', type: 'textarea', label: 'Bio', showCharCount: true, validation: { maxLength: 200 } },
+]
+
+<JSONForm
+  schema={schema}
+  columns={2}
+  onSubmit={(data) => console.log(data)}
+  submitLabel="Save"
+/>
+```
+
+### FileUpload — Drag & Drop
+
+```tsx
+import { FileUpload } from 'react-18-ui-library'
+
+<FileUpload
+  label="Upload Documents"
+  accept={{ 'image/*': ['.png', '.jpg'], 'application/pdf': ['.pdf'] }}
+  maxSize={5 * 1024 * 1024}
+  maxFiles={10}
+  files={files}
+  onFilesChange={setFiles}
+  onFileRemove={(id) => setFiles(prev => prev.filter(f => f.id !== id))}
+/>
+```
+
+### Toast Notifications
+
+```tsx
+import { ToastProvider, useToast } from 'react-18-ui-library'
+
+// Wrap your app
+<ToastProvider toasts={toasts} onDismiss={dismiss} position="bottom-right" />
+
+// In any component
+const { toast } = useToast()
+toast({ title: 'Saved!', description: 'Changes saved successfully.', variant: 'success' })
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start Storybook
+npm run dev
+
+# Build library
+npm run build
+
+# Run tests
+npm test
+```
+
+## CSS Token Reference
+
+| Token | Default | Purpose |
+|---|---|---|
+| `--color-primary` | `#6366f1` | Primary brand color |
+| `--color-background` | `#f8fafc` | Page background |
+| `--color-surface` | `#ffffff` | Card/panel background |
+| `--color-text` | `#0f172a` | Primary text |
+| `--color-text-muted` | `#64748b` | Secondary text |
+| `--color-border` | `#e2e8f0` | Border color |
+| `--color-error` | `#ef4444` | Error state |
+| `--color-success` | `#22c55e` | Success state |
+| `--radius-md` | `0.375rem` | Default border radius |
+| `--font-family-base` | system-ui | Base font |
+| `--navbar-height` | `64px` | Navbar height |
+| `--sidebar-width` | `260px` | Sidebar expanded width |
+| `--sidebar-collapsed-width` | `64px` | Sidebar collapsed width |
+
+## Peer Dependencies
+
+- `react >= 18.0.0`
+- `react-dom >= 18.0.0`
+
+## License
+
+MIT

package/dist/components/actions/CopyButton/CopyButton.d.ts

@@ -0,0 +1,14 @@
+export type CopyButtonSize = 'sm' | 'md' | 'lg';
+export type CopyButtonVariant = 'ghost' | 'outline' | 'solid';
+export interface CopyButtonProps {
+    value: string;
+    size?: CopyButtonSize;
+    variant?: CopyButtonVariant;
+    label?: string;
+    copiedLabel?: string;
+    timeout?: number;
+    onCopy?: (value: string) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function CopyButton({ value, size, variant, label, copiedLabel, timeout, onCopy, className, disabled, }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/actions/CopyButton/index.d.ts

@@ -0,0 +1,2 @@
+export { CopyButton } from './CopyButton';
+export type { CopyButtonProps, CopyButtonSize, CopyButtonVariant } from './CopyButton';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    icon?: React.ReactNode;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    rounded?: boolean;
+    className?: string;
+}
+export interface AvatarGroupProps {
+    avatars: AvatarProps[];
+    max?: number;
+    size?: AvatarSize;
+    className?: string;
+}
+export declare function Avatar({ src, alt, name, icon, size, status, rounded, className, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarGroup({ avatars, max, size, className }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from './Avatar';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarStatus } from './Avatar';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "error" | "info" | "success" | "warning" | "primary" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    dot?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends VariantProps<typeof badgeVariants> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function Badge({ variant, size, dot, children, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export interface BadgeAnchorProps {
+    children: React.ReactNode;
+    badge?: React.ReactNode;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    className?: string;
+}
+export declare function BadgeAnchor({ children, badge, position, className }: BadgeAnchorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Badge, BadgeAnchor } from './Badge';
+export type { BadgeProps, BadgeAnchorProps } from './Badge';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface BoxProps {
+    as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span' | 'p';
+    bg?: 'surface' | 'background' | 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+    bordered?: boolean;
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    id?: string;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    role?: string;
+    tabIndex?: number;
+    'aria-label'?: string;
+}
+export declare function Box({ as: Component, bg, rounded, shadow, bordered, padding, className, children, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Box } from './Box';
+export type { BoxProps } from './Box';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    hoverable?: boolean;
+    clickable?: boolean;
+    bordered?: boolean;
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export declare function Card({ header, footer, hoverable, clickable, bordered, shadow, padding, className, children, onClick, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface CollapsibleProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    variant?: 'default' | 'bordered' | 'filled';
+    className?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+}
+export declare function Collapsible({ title, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, icon, variant, className, triggerClassName, contentClassName, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Collapsible } from './Collapsible';
+export type { CollapsibleProps } from './Collapsible';

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

@@ -0,0 +1,46 @@
+import React from 'react';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    header: React.ReactNode;
+    accessor?: (row: T) => React.ReactNode;
+    sortValue?: (row: T) => string | number;
+    sortable?: boolean;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+    pin?: 'left' | 'right';
+}
+export interface DataTablePagination {
+    mode: 'client' | 'server';
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    totalRows?: number;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+}
+export interface DataTableProps<T = Record<string, unknown>> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    keyExtractor: (row: T, index: number) => string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    onSortChange?: (key: string, direction: SortDirection) => void;
+    loading?: boolean;
+    emptyMessage?: React.ReactNode;
+    stickyHeader?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    compact?: boolean;
+    className?: string;
+    pagination?: DataTablePagination;
+    toolbar?: React.ReactNode;
+    rowActions?: (row: T) => React.ReactNode;
+    caption?: string;
+}
+export declare function DataTable<T = Record<string, unknown>>({ columns, data, keyExtractor, selectable, selectedKeys, onSelectionChange, sortKey, sortDirection, onSortChange, loading, emptyMessage, stickyHeader, striped, hoverable, bordered, compact, className, pagination, toolbar, rowActions, caption, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    illustration?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ title, description, illustration, icon, action, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

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

@@ -0,0 +1,9 @@
+import { type LucideIcon, type LucideProps } from 'lucide-react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps extends Omit<LucideProps, 'size'> {
+    icon: LucideIcon;
+    size?: IconSize | number;
+    color?: string;
+    className?: string;
+}
+export declare function Icon({ icon: LucideIconComponent, size, color, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSize } from './Icon';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export type ImageRatio = '1/1' | '4/3' | '16/9' | '3/2' | '2/3' | 'auto';
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    src: string;
+    fallbackSrc?: string;
+    fallbackIcon?: React.ReactNode;
+    fit?: ImageFit;
+    ratio?: ImageRatio;
+    lazy?: boolean;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    blur?: boolean;
+    containerClassName?: string;
+}
+export declare function Image({ src, fallbackSrc, fallbackIcon, fit, ratio, lazy, rounded, blur, containerClassName, className, alt, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageProps, ImageFit, ImageRatio } from './Image';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ListItemProps {
+    id?: string;
+    primary: React.ReactNode;
+    secondary?: React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    className?: string;
+}
+export interface ListProps {
+    items?: ListItemProps[];
+    ordered?: boolean;
+    divided?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function ListItem({ primary, secondary, leading, trailing, onClick, active, disabled, divider, className, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function List({ items, ordered, divided, hoverable, compact, children, className, }: ListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps } from './List';

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

@@ -0,0 +1,7 @@
+export interface MarkdownReaderProps {
+    children: string;
+    className?: string;
+    codeTheme?: 'dark' | 'light';
+    showLineNumbers?: boolean;
+}
+export declare function MarkdownReader({ children, className, codeTheme, showLineNumbers, }: MarkdownReaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface SVGProps {
+    src?: string;
+    children?: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    title?: string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    viewBox?: string;
+    fill?: string;
+    stroke?: string;
+}
+export declare function SVG({ src, children, width, height, size, color, className, title, role, viewBox, fill, stroke, ...props }: SVGProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SVG } from './SVG';
+export type { SVGProps } from './SVG';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface StatProps {
+    label: string;
+    value: React.ReactNode;
+    delta?: number;
+    deltaLabel?: string;
+    icon?: React.ReactNode;
+    iconBg?: 'primary' | 'success' | 'error' | 'warning' | 'info';
+    description?: string;
+    loading?: boolean;
+    className?: string;
+}
+export declare function Stat({ label, value, delta, deltaLabel, icon, iconBg, description, loading, className, }: StatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Stat } from './Stat';
+export type { StatProps } from './Stat';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface TableColumn<T = Record<string, unknown>> {
+    key: string;
+    header: React.ReactNode;
+    accessor?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+}
+export interface TableProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    keyExtractor: (row: T, index: number) => string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    onSortChange?: (key: string, direction: SortDirection) => void;
+    loading?: boolean;
+    emptyMessage?: React.ReactNode;
+    stickyHeader?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    compact?: boolean;
+    className?: string;
+}
+export declare function Table<T = Record<string, unknown>>({ columns, data, keyExtractor, selectable, selectedKeys, onSelectionChange, sortKey, sortDirection, onSortChange, loading, emptyMessage, stickyHeader, striped, hoverable, bordered, compact, className, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps, TableColumn, SortDirection } from './Table';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const tagVariants: (props?: ({
+    variant?: "error" | "info" | "success" | "warning" | "default" | "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TagProps extends VariantProps<typeof tagVariants> {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    removable?: boolean;
+    onRemove?: () => void;
+    className?: string;
+}
+export declare function Tag({ variant, size, rounded, children, icon, removable, onRemove, className }: TagProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TimelineItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+export declare function Timeline({ items, orientation, className }: TimelineProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Timeline } from './Timeline';
+export type { TimelineProps, TimelineItem } from './Timeline';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface TreeViewItem {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: TreeViewItem[];
+    disabled?: boolean;
+    badge?: React.ReactNode;
+}
+export interface TreeViewProps {
+    items: TreeViewItem[];
+    selectedId?: string;
+    onSelect?: (id: string, item: TreeViewItem) => void;
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    multiSelect?: boolean;
+    selectedIds?: string[];
+    onMultiSelect?: (ids: string[]) => void;
+    indent?: number;
+    className?: string;
+}
+export declare function TreeView({ items, selectedId, onSelect, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedChange, multiSelect, selectedIds, onMultiSelect, indent, className, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { TreeView } from './TreeView';
+export type { TreeViewProps, TreeViewItem } from './TreeView';

package/dist/components/feedback/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "error" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends VariantProps<typeof alertVariants> {
+    title?: string;
+    children?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: React.ReactNode;
+    className?: string;
+}
+export declare function Alert({ variant, title, children, dismissible, onDismiss, icon, className, }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/feedback/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';