@jacshuo/onyx 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shuo Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,497 @@
+<p align="center">
+  <img src="https://img.shields.io/npm/v/@jacshuo/onyx?color=8b5cf6&style=flat-square" alt="npm version" />
+  <img src="https://img.shields.io/npm/l/@jacshuo/onyx?style=flat-square" alt="license" />
+  <img src="https://img.shields.io/github/actions/workflow/status/jacshuo/jac-ui/ci.yml?branch=main&style=flat-square&label=CI" alt="CI" />
+  <img src="https://img.shields.io/npm/dm/@jacshuo/onyx?color=10b981&style=flat-square" alt="downloads" />
+</p>
+
+# @jacshuo/onyx
+
+A cross-platform **React UI component library** built with Tailwind CSS v4 — works in web browsers and Electron. Ships ESM + CJS bundles with full TypeScript declarations.
+
+> **Live Demo →** [jacshuo.github.io/jac-ui](https://jacshuo.github.io/jac-ui)
+
+---
+
+## Features
+
+- 🎨 **30+ components** — from Button → DataTable → CinePlayer
+- 🌗 **Dark / Light mode** — class-based, works out of the box
+- 🎯 **CSS variable design tokens** — override any color via `--cp-*`, `--mp-*`, `--fe-*` custom properties
+- ⚡ **Tailwind CSS v4** — zero config, `@theme` tokens, `color-mix()` accent support
+- 📦 **Tree-shakeable** — ESM + CJS dual output, `sideEffects: ["*.css"]`
+- 🖥️ **Cross-platform** — built with web & Electron in mind
+- 🔤 **Full TypeScript** — every prop, event, and variant is typed
+
+---
+
+## Installation
+
+```bash
+npm install @jacshuo/onyx
+# or
+pnpm add @jacshuo/onyx
+# or
+yarn add @jacshuo/onyx
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+> Requires **React ≥ 18.0.0**.
+
+---
+
+## Quick Start
+
+**1. Import the stylesheet** (once, at your app entry point):
+
+```tsx
+// main.tsx or App.tsx
+import '@jacshuo/onyx/styles.css';
+```
+
+**2. Use components:**
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from '@jacshuo/onyx';
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Hello World</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button intent="primary">Get Started</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+---
+
+## Components
+
+### Primitives
+
+| Component | Description |
+|---|---|
+| **Button** | Primary, secondary, danger, warning, ghost, outline intents with sm/md/lg sizes |
+| **Input** | Styled text input with variant support |
+| **Label** | Form label with size variants |
+| **Badge** | Inline status badges |
+| **Dropdown** | Single & multi-select dropdowns |
+| **DropdownButton** | Button with a dropdown menu |
+
+### Layout
+
+| Component | Description |
+|---|---|
+| **Card** | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
+| **HorizontalCard** | Side-by-side image + content card |
+| **ImageCard** | Image-first card with overlay actions |
+| **Panel** | Collapsible panel with header |
+
+### Data Display
+
+| Component | Description |
+|---|---|
+| **Table** | Basic table primitives (Table, TableHeader, TableBody, TableRow, etc.) |
+| **SortableTable** | Click-to-sort column headers |
+| **DataTable** | Full-featured data table with sorting, selection, pagination |
+| **List / ListItem** | Styled list component |
+| **Tree / TreeItem** | Expandable tree view |
+| **Chat** | Chat message list with sent/received styling |
+
+### Navigation
+
+| Component | Description |
+|---|---|
+| **SideNav** | Collapsible sidebar with icons, sections, and multiple collapse modes |
+| **Header** | App header with nav items and action buttons |
+| **Tabs** | Tab bar with sliding indicator animation |
+
+### Disclosure
+
+| Component | Description |
+|---|---|
+| **Accordion** | Expandable accordion sections |
+| **Tabs** | TabList, TabTrigger, TabPanels, TabContent |
+
+### Overlay
+
+| Component | Description |
+|---|---|
+| **Dialog** | Modal dialog with stacking support, backdrop click, ESC handling |
+| **Tooltip** | Hover tooltip with configurable placement |
+| **Alert** | Toast-style alert system with `useAlert()` hook |
+
+### Extras
+
+| Component | Description |
+|---|---|
+| **FilmReel** | Cinematic photo gallery with lightbox |
+| **MiniPlayer** | Floating mini music player with dock, playlist, shuffle, loop |
+| **CinePlayer** | Full video player with cinema mode, playlist, keyboard shortcuts |
+| **FileExplorer** | Sci-fi themed file explorer with drag, resize, dock, multi-select, Delete key |
+
+---
+
+## Theming
+
+### Dark Mode
+
+The library uses Tailwind's **class-based** dark mode. Add `class="dark"` to your `<html>` or any ancestor element:
+
+```html
+<html class="dark">
+  <!-- all jac-ui components render in dark mode -->
+</html>
+```
+
+### Accent Colors
+
+Many components accept an `accent` prop (any CSS color string):
+
+```tsx
+<MiniPlayer accent="#3b82f6" playlist={tracks} />
+<CinePlayer accent="#f43f5e" playlist={videos} />
+<FileExplorer accent="#10b981" files={files} />
+```
+
+### CSS Custom Properties
+
+All component colors are defined as CSS custom properties in `:root` and `.dark`, making them fully overridable:
+
+```css
+/* Override CinePlayer colors */
+:root {
+  --cp-bg: #111;
+  --cp-text: rgba(255, 255, 255, 0.8);
+  --cp-surface-hover: rgba(255, 255, 255, 0.15);
+}
+
+/* Override MiniPlayer colors */
+:root {
+  --mp-bg: rgba(255, 255, 255, 0.95);
+  --mp-text: #1e293b;
+}
+.dark {
+  --mp-bg: rgba(20, 18, 30, 0.95);
+  --mp-text: #ffffff;
+}
+
+/* Override FileExplorer colors */
+:root {
+  --fe-bg: linear-gradient(145deg, #fff, #f8f8fc);
+  --fe-text: #475569;
+}
+```
+
+<details>
+<summary><strong>Full token reference</strong></summary>
+
+#### CinePlayer (`--cp-*`)
+| Token | Default | Description |
+|---|---|---|
+| `--cp-bg` | `#000000` | Player background |
+| `--cp-panel-bg` | `rgba(0,0,0,0.85)` | Playlist/overlay panel |
+| `--cp-text` | `rgba(255,255,255,0.75)` | Primary text |
+| `--cp-text-muted` | `rgba(255,255,255,0.50)` | Secondary text |
+| `--cp-text-strong` | `#ffffff` | Emphasized text |
+| `--cp-border` | `rgba(255,255,255,0.10)` | Border color |
+| `--cp-surface` | `rgba(255,255,255,0.05)` | Surface background |
+| `--cp-surface-hover` | `rgba(255,255,255,0.10)` | Hover state |
+| `--cp-overlay` | `rgba(0,0,0,0.30)` | Overlay backdrop |
+| `--cp-seek-track` | `rgba(255,255,255,0.20)` | Seek bar track |
+| `--cp-seek-buffer` | `rgba(255,255,255,0.15)` | Buffered region |
+
+#### MiniPlayer (`--mp-*`)
+| Token | Light | Dark |
+|---|---|---|
+| `--mp-bg` | `rgba(255,255,255,0.90)` | `rgba(26,22,37,0.95)` |
+| `--mp-text` | `primary-900` | `#ffffff` |
+| `--mp-text-muted` | `primary-500` | `rgba(255,255,255,0.50)` |
+| `--mp-border` | `rgba(148,163,184,0.60)` | `rgba(255,255,255,0.10)` |
+| `--mp-surface` | `rgba(148,163,184,0.50)` | `rgba(255,255,255,0.10)` |
+| `--mp-surface-hover` | `rgba(241,245,249,0.60)` | `rgba(255,255,255,0.05)` |
+| `--mp-dock-strip` | `rgba(148,163,184,0.40)` | `rgba(255,255,255,0.20)` |
+
+#### FileExplorer (`--fe-*`)
+| Token | Light | Dark |
+|---|---|---|
+| `--fe-bg` | Gradient white | Gradient dark |
+| `--fe-shadow` | Soft shadow | Glow shadow |
+| `--fe-text` | `primary-600` | `rgba(255,255,255,0.70)` |
+| `--fe-text-strong` | `primary-900` | `#ffffff` |
+| `--fe-text-muted` | `primary-400` | `rgba(255,255,255,0.30)` |
+| `--fe-border` | `rgba(0,0,0,0.06)` | `rgba(255,255,255,0.06)` |
+| `--fe-btn-color` | `rgba(0,0,0,0.45)` | `rgba(255,255,255,0.50)` |
+
+</details>
+
+---
+
+## Usage Examples
+
+### Button
+
+```tsx
+import { Button } from '@jacshuo/onyx';
+
+<Button intent="primary" size="lg">Save</Button>
+<Button intent="danger">Delete</Button>
+<Button intent="ghost">Cancel</Button>
+<Button intent="outline">Settings</Button>
+```
+
+### Dialog
+
+```tsx
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Button } from '@jacshuo/onyx';
+
+function ConfirmDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent size="sm">
+          <DialogHeader>
+            <DialogTitle>Confirm Action</DialogTitle>
+          </DialogHeader>
+          <p>Are you sure you want to proceed?</p>
+          <DialogFooter>
+            <Button intent="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button intent="primary" onClick={() => setOpen(false)}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+```
+
+### DataTable
+
+```tsx
+import { DataTable, type ColumnDef } from '@jacshuo/onyx';
+
+type User = { id: number; name: string; email: string };
+
+const columns: ColumnDef<User>[] = [
+  { key: 'id', header: 'ID', width: 60 },
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'email', header: 'Email', sortable: true },
+];
+
+<DataTable columns={columns} data={users} selectionMode="multi" pageSize={10} />
+```
+
+### Tabs
+
+```tsx
+import { Tabs, TabList, TabTrigger, TabPanels, TabContent } from '@jacshuo/onyx';
+
+<Tabs defaultValue="overview">
+  <TabList>
+    <TabTrigger value="overview">Overview</TabTrigger>
+    <TabTrigger value="settings">Settings</TabTrigger>
+  </TabList>
+  <TabPanels>
+    <TabContent value="overview">Overview content…</TabContent>
+    <TabContent value="settings">Settings content…</TabContent>
+  </TabPanels>
+</Tabs>
+```
+
+### Alert (Toast)
+
+```tsx
+import { useAlert, Button } from '@jacshuo/onyx';
+
+function NotifyButton() {
+  const alert = useAlert();
+
+  return (
+    <Button onClick={() => alert({ title: 'Saved!', description: 'Your changes have been saved.', variant: 'success' })}>
+      Save
+    </Button>
+  );
+}
+```
+
+### MiniPlayer
+
+```tsx
+import { MiniPlayer } from '@jacshuo/onyx';
+
+const tracks = [
+  { title: 'Midnight City', artist: 'M83', src: '/audio/midnight.mp3', cover: '/covers/m83.jpg' },
+  { title: 'Intro', artist: 'The xx', src: '/audio/intro.mp3' },
+];
+
+<MiniPlayer
+  playlist={tracks}
+  position="bottom-right"
+  accent="#8b5cf6"
+  shuffle
+  autoPlay
+/>
+```
+
+### CinePlayer
+
+```tsx
+import { CinePlayer } from '@jacshuo/onyx';
+
+const videos = [
+  { title: 'Big Buck Bunny', src: 'https://example.com/bunny.mp4', subtitle: 'Open source' },
+];
+
+<CinePlayer
+  playlist={videos}
+  accent="#f43f5e"
+  onPlayChange={(playing, index) => console.log(playing, index)}
+/>
+```
+
+### FileExplorer
+
+```tsx
+import { FileExplorer, type FileExplorerItem } from '@jacshuo/onyx';
+
+const files: FileExplorerItem[] = [
+  { name: 'src', path: '/src', type: 'directory' },
+  { name: 'index.ts', path: '/src/index.ts', type: 'file', size: 2048, extension: '.ts' },
+];
+
+<FileExplorer
+  files={files}
+  accent="#10b981"
+  dockable
+  onFileOpen={(f) => console.log('Open', f.name)}
+  onDelete={(items) => console.log('Delete', items)}
+/>
+```
+
+---
+
+## Keyboard Shortcuts
+
+### FileExplorer
+| Key | Action |
+|---|---|
+| `Click` | Select file |
+| `Ctrl+Click` | Multi-select |
+| `Ctrl+A` | Select all |
+| `Delete` | Delete selected (with confirmation dialog) |
+| `Escape` | Clear selection |
+| `Double-click` | Open file / Navigate directory |
+
+### CinePlayer
+| Key | Action |
+|---|---|
+| `Space` | Play / Pause |
+| `←` / `→` | Seek ±5s |
+| `↑` / `↓` | Volume ±5% |
+| `F` | Toggle fullscreen |
+| `C` | Toggle cinema mode |
+| `L` | Toggle playlist |
+| `M` | Mute / Unmute |
+| `N` | Next track |
+| `P` | Previous track |
+| `S` | Toggle shuffle |
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start demo dev server (http://localhost:8080)
+npm run dev
+
+# Production library build (dist/)
+npm run dist
+
+# Build demo site (dist-demo/)
+npm run build:demo
+
+# Typecheck
+npm run typecheck
+```
+
+---
+
+## Release Process
+
+Releases are fully automated via GitHub Actions:
+
+1. Go to **Actions → Release → Run workflow**
+2. Choose version bump: `patch` / `minor` / `major`
+3. The pipeline will:
+   - Bump `package.json` version
+   - Commit & tag (e.g. `v0.2.0`)
+   - Build & publish to **npm**
+   - Create a **GitHub Release** with `.tar.gz` and `.zip` download artifacts
+   - Build & deploy the **demo site** to GitHub Pages
+
+### Required Secrets
+
+| Secret | Where | Description |
+|---|---|---|
+| `NPM_TOKEN` | GitHub repo → Settings → Secrets | npm access token with publish permission |
+
+### GitHub Pages Setup
+
+1. Go to **Settings → Pages**
+2. Source: **GitHub Actions**
+
+---
+
+## Project Structure
+
+```
+jac-ui/
+├── src/
+│   ├── components/      # All React components
+│   ├── lib/utils.ts     # cn() utility (clsx + tailwind-merge)
+│   └── styles/
+│       ├── theme.css    # Tailwind theme, keyframes, CSS custom properties
+│       └── theme.ts     # CVA variant definitions
+├── demo/                # Demo site (GitHub Pages)
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── pages/           # Per-component demo pages
+├── .github/workflows/
+│   ├── ci.yml           # PR/push: typecheck + build
+│   └── release.yml      # Manual: version bump → npm → GitHub Release → Pages
+├── dist/                # Library build output
+└── dist-demo/           # Demo build output
+```
+
+---
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/my-feature`)
+3. Commit your changes (`git commit -m 'feat: add new component'`)
+4. Push to the branch (`git push origin feature/my-feature`)
+5. Open a Pull Request
+
+---
+
+## License
+
+[MIT](./LICENSE) © Shuo Wang

package/dist/components/Accordion.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { accordionVariants } from '../styles/theme';
+type AccordionProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof accordionVariants> & {
+    type?: 'single' | 'multiple';
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export declare function Accordion({ type, defaultValue, value, onValueChange, intent, className, children, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+};
+export declare function AccordionItem({ value, className, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+type AccordionTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+type AccordionContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAepD,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACxD,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,wBAAgB,SAAS,CAAC,EACxB,IAAe,EACf,YAAiB,EACjB,KAAK,EACL,aAAa,EACb,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA6BhB;AAID,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWzF;AAID,KAAK,qBAAqB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE3E,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAuBxF;AAID,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAoBxF"}

package/dist/components/Alert.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { alertVariants } from '../styles/theme';
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
+export declare function Alert({ intent, className, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export type AlertPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+type AlertIntent = NonNullable<VariantProps<typeof alertVariants>['intent']>;
+export type AlertOptions = {
+    intent?: AlertIntent;
+    title?: string;
+    message: string;
+    position?: AlertPosition;
+    duration?: number;
+};
+declare function removeAlert(id: string): void;
+declare function addAlert(options: AlertOptions): string;
+export declare function configureAlertTopOffset(offset: number): void;
+export declare function useAlert(): {
+    addAlert: typeof addAlert;
+    removeAlert: typeof removeAlert;
+};
+export {};
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5F,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAM1E;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,2CAE3F;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,2CAE5C;AAMD,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;AAEpB,KAAK,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAsBF,iBAAS,WAAW,CAAC,EAAE,EAAE,MAAM,QAY9B;AAED,iBAAS,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAe/C;AAQD,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,QAErD;AA4HD,wBAAgB,QAAQ;;;EAMvB"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { badgeVariants } from '../styles/theme';
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+export declare function Badge({ intent, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7F,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEhE"}

package/dist/components/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '../styles/theme';
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+export declare function Button({ intent, size, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAC9D,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAExE"}

package/dist/components/Card.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { cardVariants } from '../styles/theme';
+type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+export declare function Card({ intent, size, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+type HorizontalCardMediaProps = {
+    /** Image source URL. */
+    src?: string;
+    /** Image alt text. */
+    alt?: string;
+    /** Render an icon or avatar instead of an image. */
+    icon?: React.ReactNode;
+    /** Width of the media area. @default '10rem' */
+    width?: string;
+};
+type HorizontalCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & VariantProps<typeof cardVariants> & {
+    /** Media placement. @default 'left' */
+    mediaPosition?: 'left' | 'right';
+    /** Media configuration. */
+    media: HorizontalCardMediaProps;
+    children: React.ReactNode;
+};
+export declare function HorizontalCard({ intent, media, mediaPosition, className, children, ...props }: HorizontalCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,KAAK,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE1F,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAEpE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEvF;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,2CAO1F;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,2CAI5C;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAIxF;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAUvF;AAID,KAAK,wBAAwB,GAAG;IAC9B,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAC/E,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,2BAA2B;IAC3B,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEJ,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,aAAsB,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAsCrB"}

package/dist/components/Chat.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface ChatMessage {
+    /** Unique id for the message. */
+    id: string | number;
+    /** Sender display name. */
+    sender: string;
+    /** Avatar — URL string or ReactNode (icon / component). */
+    avatar?: string | React.ReactNode;
+    /** Message body. Can be text or rich ReactNode content. */
+    content: React.ReactNode;
+    /** Timestamp label, e.g. "10:30 AM". */
+    time?: string;
+    /** Mark as "self" (current user). Controls bubble alignment in split mode. */
+    self?: boolean;
+}
+export interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of messages to render. */
+    messages: ChatMessage[];
+    /**
+     * Layout mode.
+     * - `'split'` — self messages on the right, others on the left (default)
+     * - `'left'`  — all messages aligned to the left
+     */
+    mode?: 'split' | 'left';
+    /** Auto-scroll to bottom when messages change. @default true */
+    autoScroll?: boolean;
+}
+export declare function Chat({ messages, mode, autoScroll, className, ...props }: ChatProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chat.d.ts.map

package/dist/components/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/components/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,2DAA2D;IAC3D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,mCAAmC;IACnC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+ED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAc,EACd,UAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAyBX"}