@yccui/ui 1.0.0

package/README.md

@@ -0,0 +1,504 @@
+# @ycc/ui
+
+> Professional React component library for logistics and freight management platforms.
+> Extracted from the Your Cargo Contact APIP platform.
+
+![npm version](https://img.shields.io/badge/npm-v1.0.0-blue)
+![React](https://img.shields.io/badge/React-18%2B-61dafb)
+![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+## Table of Contents
+
+- [Why @ycc/ui](#why-yccui)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Package Structure](#package-structure)
+- [Components](#components)
+- [Design Tokens](#design-tokens)
+- [Theming](#theming)
+- [Icon Reference](#icon-reference)
+- [Browser Support](#browser-support)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Why @ycc/ui
+
+- Purpose-built for customs, freight, warehousing, and back-office dashboards.
+- Fully typed React components with bundled CSS and design-token theming.
+- Production-ready package output with ESM, CommonJS, declarations, and a live docs site.
+
+## Installation
+
+```bash
+npm install @ycc/ui
+yarn add @ycc/ui
+pnpm add @ycc/ui
+```
+
+Peer dependencies: `react >=18.0.0` and `react-dom >=18.0.0`.
+
+## Quick Start
+
+```tsx
+import '@ycc/ui/styles';
+import { ToastProvider, Page, Nav, NavGroup, NavItem, StatCard } from '@ycc/ui';
+
+export function App() {
+  return (
+    <ToastProvider>
+      <Page
+        user={{ name: 'Mark', role: 'Administrator' }}
+        notificationCount={3}
+        nav={(
+          <Nav activePage="air">
+            <NavGroup label="Freight">
+              <NavItem id="air" label="Air Freight" icon="Plane" />
+              <NavItem id="sea" label="Sea Freight" icon="Ship" />
+            </NavGroup>
+          </Nav>
+        )}
+      >
+        <StatCard title="Open Shipments" value="128" change={8.3} trend="up" icon="PackageCheck" />
+      </Page>
+    </ToastProvider>
+  );
+}
+```
+
+## Package Structure
+
+```text
+dist/
+  index.js       ESM bundle
+  index.cjs      CommonJS bundle
+  index.d.ts     TypeScript declarations
+  styles.css     Bundled component styles
+```
+
+## Components
+
+Each component is exported from `@ycc/ui` and styled by `@ycc/ui/styles`.
+
+### Page
+Full application shell with Sidebar, Header, content, and Footer.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| nav | `ReactNode` | required | Navigation rendered inside the sidebar. |
+| user | `HeaderProps['user']` | `undefined` | Header user summary. |
+| notificationCount | `number` | `undefined` | Notification badge count. |
+| children | `ReactNode` | required | Main page content. |
+| defaultCollapsed | `boolean` | `false` | Initial sidebar state. |
+
+```tsx
+<Page nav={<Nav><NavGroup label="Freight"><NavItem id="air" label="Air Freight" /></NavGroup></Nav>}>
+  <StatCard title="Open files" value="128" />
+</Page>
+```
+
+### Header
+Topbar with search, notifications, language select, and user menu.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| onMenuToggle | `() => void` | `undefined` | Handles menu toggling. |
+| title | `string` | `undefined` | Optional title. |
+| user | `{ name: string; role: string; avatar?: string }` | `undefined` | User display data. |
+| notificationCount | `number` | `undefined` | Notification count. |
+| onLogout | `() => void` | `undefined` | Logout callback. |
+
+```tsx
+<Header title="Operations" user={{ name: 'Mark', role: 'Administrator' }} notificationCount={3} />
+```
+
+### Footer
+Bottom bar with copyright and links.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| copyright | `string` | current year YCC | Copyright text. |
+| links | `Array<{ label: string; href: string }>` | `[]` | Footer links. |
+
+```tsx
+<Footer copyright="© 2026 Your Cargo Contact" links={[{ label: 'Support', href: '/support' }]} />
+```
+
+### Sidebar
+Collapsible sidebar container.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| collapsed | `boolean` | `false` | Compact sidebar state. |
+| onToggle | `() => void` | `undefined` | Toggle callback. |
+| logo | `ReactNode` | text logo | Logo content. |
+| children | `ReactNode` | required | Sidebar body. |
+
+```tsx
+<Sidebar logo="YCC"><Nav>{/* items */}</Nav></Sidebar>
+```
+
+### Container
+Centered max-width wrapper.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| children | `ReactNode` | required | Content. |
+| maxWidth | `'sm'|'md'|'lg'|'xl'|'full'` | `'lg'` | Max-width preset. |
+| className | `string` | `undefined` | Custom class. |
+
+```tsx
+<Container maxWidth="xl">Dashboard content</Container>
+```
+
+### Row / Col
+12-column flex grid primitives.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| Row.children | `ReactNode` | required | Row content. |
+| Row.gap | `number` | `3` | Gap multiplier. |
+| Col.span | `1..12` | `12` | Base span. |
+| Col.sm / Col.lg | `1..12` | span | Responsive spans. |
+
+```tsx
+<Row gap={2}><Col span={6}>Air</Col><Col span={6}>Sea</Col></Row>
+```
+
+### Grid
+CSS grid wrapper.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| children | `ReactNode` | required | Grid items. |
+| cols | `1|2|3|4|5|6|12` | `2` | Column count. |
+| gap | `number` | `3` | Gap multiplier. |
+
+```tsx
+<Grid cols={3}><Card>Air</Card><Card>Sea</Card><Card>Truck</Card></Grid>
+```
+
+### PageHeader
+Page title, subtitle, and actions slot.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| title | `string` | required | Page title. |
+| subtitle | `string` | `undefined` | Supporting text. |
+| actions | `ReactNode` | `undefined` | Action buttons. |
+
+```tsx
+<PageHeader title="Air Freight" subtitle="Live operations" actions={<Button>Create file</Button>} />
+```
+
+### Divider
+Horizontal rule with optional label.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| label | `string` | `undefined` | Center label. |
+| spacing | `'sm'|'md'|'lg'` | `'md'` | Vertical spacing. |
+
+```tsx
+<Divider label="Documents" spacing="lg" />
+```
+
+### Stack
+Vertical flex stack.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| children | `ReactNode` | required | Stack content. |
+| gap | `number` | `3` | Gap multiplier. |
+| align | `'start'|'center'|'end'|'stretch'` | `'stretch'` | Cross-axis alignment. |
+
+```tsx
+<Stack gap={2}><Badge label="Import" variant="import" /></Stack>
+```
+
+### Spacer
+Whitespace primitive.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| size | `number` | `4` | Space multiplier. |
+| axis | `'x'|'y'` | `'y'` | Direction. |
+
+```tsx
+<Spacer size={6} />
+```
+
+### Nav / NavGroup / NavItem
+Vertical navigation with active state, groups, icons, and badges.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| Nav.children | `ReactNode` | required | Groups/items. |
+| Nav.activePage | `string` | `''` | Active item id. |
+| Nav.collapsed | `boolean` | `false` | Compact mode. |
+| NavItem.badge | `string | number` | `undefined` | Item badge. |
+
+```tsx
+<Nav activePage="air"><NavGroup label="Freight"><NavItem id="air" label="Air Freight" icon="Plane" /></NavGroup></Nav>
+```
+
+### Breadcrumb
+Path trail.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| items | `Array<{ label: string; href?: string; onClick?: () => void }>` | required | Breadcrumb items. |
+| separator | `ReactNode` | `'/'` | Separator. |
+
+```tsx
+<Breadcrumb items={[{ label: 'Home' }, { label: 'Air Freight' }, { label: 'AF-2026-00142' }]} />
+```
+
+### Tabs
+Controlled tab bar.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| tabs | `Array<{ id: string; label: string; icon?: string }>` | required | Tabs. |
+| activeTab | `string` | required | Active id. |
+| onChange | `(id: string) => void` | required | Change handler. |
+| children | `ReactNode` | `undefined` | Panel. |
+
+```tsx
+<Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab}>Overview</Tabs>
+```
+
+### Stepper
+Step indicator.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| steps | `Array<{ label: string; description?: string }>` | required | Steps. |
+| currentStep | `number` | required | Active zero-based step. |
+
+```tsx
+<Stepper currentStep={1} steps={[{ label: 'Details' }, { label: 'Documents' }]} />
+```
+
+### Pagination
+Page number controls.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| page | `number` | required | Current page. |
+| totalPages | `number` | required | Total pages. |
+| onChange | `(page: number) => void` | required | Page callback. |
+| siblingCount | `number` | `1` | Adjacent page count. |
+
+```tsx
+<Pagination page={2} totalPages={8} onChange={setPage} />
+```
+
+### ContextMenu
+Dropdown action menu.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| items | `Array<{ label: string; icon?: string; onClick: () => void; danger?: boolean; disabled?: boolean }>` | required | Menu items. |
+| trigger | `ReactNode` | required | Trigger element. |
+
+```tsx
+<ContextMenu trigger={<Button>Actions</Button>} items={[{ label: 'Open', onClick }]} />
+```
+
+### Button
+Action button.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| variant | `'primary'|'secondary'|'ghost'|'danger'|'link'` | `'primary'` | Visual style. |
+| size | `'sm'|'md'|'lg'` | `'md'` | Size. |
+| loading | `boolean` | `false` | Loading state. |
+| leftIcon / rightIcon | `string` | `undefined` | Icon names. |
+
+```tsx
+<Button variant="primary" leftIcon="Plus">Create shipment</Button>
+```
+
+### Input, Select, Checkbox, Textarea, Toggle, FormGroup, FileUpload
+Core form controls for APIP workflows.
+
+```tsx
+<FormGroup label="Origin port" required>
+  <Select options={[{ value: 'ams', label: 'Amsterdam (AMS)' }]} />
+</FormGroup>
+```
+
+### Radio / RadioGroup
+Radio selection controls.
+
+```tsx
+<RadioGroup name="mode" options={[{ value: 'air', label: 'Air Freight' }]} />
+```
+
+### DateInput
+Styled native date input.
+
+```tsx
+<DateInput defaultValue="2026-06-27" />
+```
+
+### SearchInput
+Search input with clear button.
+
+```tsx
+<SearchInput value={query} onChange={handleSearch} onClear={() => setQuery('')} />
+```
+
+### ScanZone
+Barcode/QR scan input area.
+
+```tsx
+<ScanZone active onScan={handleAwbScan} placeholder="Scan AWB barcode" />
+```
+
+### Card, StatCard, Table, Badge, Avatar, Tag, Banner, Alert
+Primary data display components for dashboard surfaces.
+
+```tsx
+<Card shadow>
+  <CardHeader title="Shipment Summary" subtitle="AF-2026-00142" />
+  <CardBody>PVG to AMS, 482 kg electronics.</CardBody>
+</Card>
+```
+
+### Tooltip, Popover, KV, DataList, EmptyState
+Detail and contextual display helpers.
+
+```tsx
+<DataList columns={2} items={[{ label: 'Reference', value: 'AF-2026-00142' }]} />
+```
+
+### ProgressBar, Donut, TrendSpark, CompareBar, Timeline, Accordion
+Operational visualization components with no external chart dependency.
+
+```tsx
+<ProgressBar value={72} label="Warehouse capacity" showPercent />
+<TrendSpark data={[4, 8, 7, 10, 12]} />
+```
+
+### CopyButton
+Copy-to-clipboard button.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| value | `string` | required | Text to copy. |
+| label | `string` | `'Copy'` | Default label. |
+| copiedLabel | `string` | `'Copied'` | Success label. |
+
+```tsx
+<CopyButton value="AF-2026-00142" label="Copy reference" />
+```
+
+### Toast / useToast
+Toast notifications.
+
+```tsx
+function SaveButton() {
+  const toast = useToast();
+  return <Button onClick={() => toast.success('Shipment saved')}>Save</Button>;
+}
+```
+
+### Modal, Drawer, Spinner, Skeleton, ConfirmDialog
+Feedback and overlay components.
+
+```tsx
+<ConfirmDialog open={open} onClose={close} onConfirm={confirm} message="Delete shipment file?" danger />
+```
+
+### Icon
+Icon renderer.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| name | `string` | required | Icon name. |
+| size | `number` | `16` | SVG size. |
+| color | `string` | `undefined` | CSS color. |
+| className | `string` | `undefined` | Custom class. |
+
+```tsx
+<Icon name="Plane" size={20} />
+```
+
+## Design Tokens
+
+`@ycc/ui` uses CSS custom properties from `src/tokens`. Import styles once:
+
+```tsx
+import '@ycc/ui/styles';
+```
+
+Override tokens globally:
+
+```css
+:root {
+  --ycc-accent: #3B82F6;
+  --ycc-card: #FFFFFF;
+}
+```
+
+## Theming
+
+Global theme:
+
+```css
+:root { --ycc-accent: #3B82F6; }
+```
+
+Scoped theme:
+
+```css
+.customs-dashboard { --ycc-accent: var(--ycc-branch-customs); }
+```
+
+One-off component override:
+
+```tsx
+<Card className="shipment-priority-card">Priority cargo</Card>
+```
+
+## Icon Reference
+
+| Icon | Icon | Icon | Icon |
+|---|---|---|---|
+| Activity | AlertTriangle | ArrowLeft | ArrowLeftRight |
+| ArrowRight | BarChart3 | Barcode | Bell |
+| BellOff | BookOpen | Boxes | Briefcase |
+| Cable | Calendar | Camera | Check |
+| CheckCircle2 | ChevronDown | ChevronRight | ClipboardCheck |
+| Clock | Copy | Cpu | Database |
+| Download | Euro | FileCheck | FileSpreadsheet |
+| FileText | Filter | Gauge | Globe |
+| Hash | HelpCircle | Home | Image |
+| Landmark | Layers | LayoutDashboard | LayoutGrid |
+| LeafMark | Link2 | Lock | Mail |
+| MapPin | Menu | PackageCheck | PackageOpen |
+| PackageSearch | Pause | Pencil | Plane |
+| PlaneLanding | PlaneTakeoff | Play | Plug |
+| Plus | Power | Printer | Radio |
+| Receipt | RefreshCw | RotateCcw | Route |
+| Ruler | Scale | ScanLine | ScanSearch |
+| Search | Send | Server | Settings |
+| ShieldCheck | Ship | SlidersHorizontal | Split |
+| Square | Tag | Tags | Trash2 |
+| TrendingUp | Truck | Upload | Users |
+| Wallet | Warehouse | Workflow | XCircle |
+| Zap |  |  |  |
+
+## Browser Support
+
+Chrome 90+, Firefox 88+, Safari 14+, Edge 90+.
+
+## Contributing
+
+Keep components typed, reusable, documented, and styled only through `--ycc-*` CSS variables.
+
+## License
+
+MIT

package/dist/components/DataDisplay/Accordion.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import './Accordion.css';
+export interface AccordionProps {
+    items: Array<{
+        id: string;
+        title: string;
+        content: ReactNode;
+    }>;
+    defaultOpen?: string[];
+}
+export declare function Accordion({ items, defaultOpen }: AccordionProps): import("react").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/DataDisplay/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,WAAgB,EAAE,EAAE,cAAc,+BAuBpE"}

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

@@ -0,0 +1,9 @@
+import './Avatar.css';
+export interface AvatarProps {
+    src?: string;
+    name: string;
+    size?: 'sm' | 'md' | 'lg';
+    status?: 'online' | 'offline' | 'away';
+}
+export declare function Avatar({ src, name, size, status }: AvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/DataDisplay/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACxC;AAYD,wBAAgB,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,IAAW,EAAE,MAAM,EAAE,EAAE,WAAW,+BAOrE"}

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

@@ -0,0 +1,8 @@
+import './Badge.css';
+export interface BadgeProps {
+    label: string;
+    variant: string;
+    size?: 'sm' | 'md';
+}
+export declare function Badge({ label, variant, size }: BadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/DataDisplay/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAMD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAW,EAAE,EAAE,UAAU,+BAOhE"}

package/dist/components/DataDisplay/Banner.d.ts

@@ -0,0 +1,13 @@
+import './Banner.css';
+export interface BannerProps {
+    message: string;
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    onDismiss?: () => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare function Banner({ message, variant, title, onDismiss, action }: BannerProps): import("react").JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/DataDisplay/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACjD;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,OAAgB,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,WAAW,+BAa1F"}

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import './Card.css';
+export interface CardProps {
+    children: ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    shadow?: boolean;
+}
+export interface CardHeaderProps {
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    icon?: string;
+}
+export interface CardBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface CardFooterProps {
+    children: ReactNode;
+    align?: 'left' | 'right' | 'between';
+}
+export declare function Card({ children, className, padding, shadow }: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ title, subtitle, actions, icon }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardBody({ children, className }: CardBodyProps): import("react").JSX.Element;
+export declare function CardFooter({ children, align }: CardFooterProps): import("react").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/DataDisplay/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtC;AAMD,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAc,EAAE,MAAM,EAAE,EAAE,SAAS,+BAE9E;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,eAAe,+BAa7E;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAE9D;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAe,EAAE,EAAE,eAAe,+BAExE"}

package/dist/components/DataDisplay/CompareBar.d.ts

@@ -0,0 +1,10 @@
+import './CompareBar.css';
+export interface CompareBarProps {
+    labelA: string;
+    valueA: number;
+    labelB: string;
+    valueB: number;
+    color?: string;
+}
+export declare function CompareBar({ labelA, valueA, labelB, valueB, color }: CompareBarProps): import("react").JSX.Element;
+//# sourceMappingURL=CompareBar.d.ts.map

package/dist/components/DataDisplay/CompareBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompareBar.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/CompareBar.tsx"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAA2B,EAAE,EAAE,eAAe,+BAc1G"}

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

@@ -0,0 +1,8 @@
+import './CopyButton.css';
+export interface CopyButtonProps {
+    value: string;
+    label?: string;
+    copiedLabel?: string;
+}
+export declare function CopyButton({ value, label, copiedLabel }: CopyButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=CopyButton.d.ts.map

package/dist/components/DataDisplay/CopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/CopyButton.tsx"],"names":[],"mappings":"AAEA,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAc,EAAE,WAAsB,EAAE,EAAE,eAAe,+BAe5F"}

package/dist/components/DataDisplay/DataList.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './DataList.css';
+export interface DataListProps {
+    items: Array<{
+        label: string;
+        value: ReactNode;
+    }>;
+    columns?: 1 | 2 | 3;
+}
+export declare function DataList({ items, columns }: DataListProps): import("react").JSX.Element;
+//# sourceMappingURL=DataList.d.ts.map

package/dist/components/DataDisplay/DataList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/DataList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,EAAE,aAAa,+BAW7D"}

package/dist/components/DataDisplay/Donut.d.ts

@@ -0,0 +1,10 @@
+import './Donut.css';
+export interface DonutProps {
+    value: number;
+    max?: number;
+    size?: number;
+    color?: string;
+    label?: string;
+}
+export declare function Donut({ value, max, size, color, label }: DonutProps): import("react").JSX.Element;
+//# sourceMappingURL=Donut.d.ts.map

package/dist/components/DataDisplay/Donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/Donut.tsx"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAS,EAAE,IAAS,EAAE,KAA2B,EAAE,KAAK,EAAE,EAAE,UAAU,+BAepG"}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import './EmptyState.css';
+export interface EmptyStateProps {
+    icon?: string;
+    title: string;
+    message?: string;
+    action?: ReactNode;
+}
+export declare function EmptyState({ icon, title, message, action }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/DataDisplay/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/DataDisplay/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAc,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,eAAe,+BASrF"}

package/dist/components/DataDisplay/KV.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import './KV.css';
+export interface KVProps {
+    label: string;
+    value: ReactNode;
+    size?: 'sm' | 'md';
+}
+export declare function KV({ label, value, size }: KVProps): import("react").JSX.Element;
+//# sourceMappingURL=KV.d.ts.map