@jacshuo/onyx 0.1.6 → 0.1.8

package/README.md

@@ -7,7 +7,7 @@
 
 # @jacshuo/onyx
 
-A cross-platform **React UI component library** built with Tailwind CSS v4 — designed for web browsers and Electron desktop apps. Ships ESM + CJS bundles with full TypeScript declarations.
+A cross-platform **React UI component library** built with Tailwind CSS v4 — designed for web browsers and Electron desktop apps. Ships tree-shakeable ESM + CJS bundles with per-component subpath exports, modular CSS, and full TypeScript declarations.
 
 Born out of a personal passion for **cross-platform desktop development**, Onyx focuses on delivering a polished, consistent look and feel across Electron and web — the kind of UI toolkit I always wished existed when building desktop apps with web technologies.
 
@@ -30,7 +30,9 @@ Born out of a personal passion for **cross-platform desktop development**, Onyx
 - 🌗 **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"]`
+- 📦 **Tree-shakeable** — Per-component ESM entries with code splitting; import only what you use
+- 🗂️ **On-demand imports** — Subpath exports (`@jacshuo/onyx/Button`) for maximum control
+- 🎨 **Modular CSS** — Full bundle, base-only, or per-component CSS — pick exactly what you need
 - 🖥️ **Cross-platform** — built for web & Electron desktop apps
 - ⌨️ **Keyboard-first** — comprehensive keyboard shortcuts for CinePlayer, FileExplorer, and more
 - 🔤 **Full TypeScript** — every prop, event, and variant is typed
@@ -88,6 +90,51 @@ function App() {
 
 ---
 
+## Import Strategies
+
+Onyx supports multiple import styles — pick the one that best fits your bundler and performance requirements.
+
+### Full import (simplest)
+
+Import everything from the barrel entry. Modern bundlers (Vite, Next.js, webpack 5) will tree-shake unused components automatically.
+
+```tsx
+import { Button, Dialog, Tabs } from '@jacshuo/onyx';
+import '@jacshuo/onyx/styles.css';
+```
+
+### Per-component import (maximum tree-shaking)
+
+Import each component from its own subpath. This guarantees only the code you use is included, even with bundlers that don't tree-shake well.
+
+```tsx
+import { Button } from '@jacshuo/onyx/Button';
+import { Dialog, DialogContent } from '@jacshuo/onyx/Dialog';
+import { Tabs, TabList, TabTrigger } from '@jacshuo/onyx/Tabs';
+```
+
+### CSS options
+
+| Import | Size | Description |
+|---|---|---|
+| `@jacshuo/onyx/styles.css` | ~102 KB | Full pre-compiled bundle — all utilities + all component CSS. Simplest setup. |
+| `@jacshuo/onyx/styles/base.css` | ~95 KB | Tailwind utilities + core design tokens. No component-specific keyframes. |
+| `@jacshuo/onyx/styles/tokens.css` | ~4 KB | Raw `@theme` tokens only — for projects that already run Tailwind CSS v4. |
+| `@jacshuo/onyx/styles/CinePlayer.css` | ~2.5 KB | CinePlayer keyframes & `--cp-*` design tokens |
+| `@jacshuo/onyx/styles/MiniPlayer.css` | ~2.2 KB | MiniPlayer keyframes & `--mp-*` design tokens |
+| `@jacshuo/onyx/styles/FileExplorer.css` | ~1.6 KB | FileExplorer `--fe-*` design tokens |
+| `@jacshuo/onyx/styles/FilmReel.css` | ~0.6 KB | FilmReel keyframes |
+
+**Example — minimal setup with CinePlayer only:**
+
+```tsx
+import '@jacshuo/onyx/styles/base.css';
+import '@jacshuo/onyx/styles/CinePlayer.css';
+import { CinePlayer } from '@jacshuo/onyx/CinePlayer';
+```
+
+---
+
 ## Components
 
 ### Primitives
@@ -446,32 +493,6 @@ 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
 
 ```
@@ -480,8 +501,15 @@ jac-ui/
 │   ├── 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
+│       ├── index.css    # Full CSS entry (Tailwind + all tokens + all component CSS)
+│       ├── base.css     # Tailwind + core tokens only
+│       ├── tokens.css   # @theme semantic tokens & core keyframes
+│       ├── theme.ts     # CVA variant definitions
+│       └── components/  # Per-component CSS (keyframes & design tokens)
+│           ├── CinePlayer.css
+│           ├── MiniPlayer.css
+│           ├── FileExplorer.css
+│           └── FilmReel.css
 ├── demo/                # Demo site (GitHub Pages)
 │   ├── App.tsx
 │   ├── main.tsx
@@ -489,7 +517,11 @@ jac-ui/
 ├── .github/workflows/
 │   ├── ci.yml           # PR/push: typecheck + build
 │   └── release.yml      # Manual: version bump → npm → GitHub Release → Pages
-├── dist/                # Library build output
+├── dist/                # Library build output (ESM + CJS + DTS + CSS)
+│   ├── *.js / *.cjs     # Per-component entry points
+│   ├── chunks/          # Shared code (auto-extracted by tsup)
+│   ├── styles.css       # Full pre-compiled CSS bundle
+│   └── styles/          # Modular CSS files
 └── dist-demo/           # Demo build output
 ```
 

package/dist/Accordion.cjs

@@ -0,0 +1 @@
+'use strict';var chunkAAFG7R4U_cjs=require('./chunks/chunk-AAFG7R4U.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Accordion",{enumerable:true,get:function(){return chunkAAFG7R4U_cjs.a}});Object.defineProperty(exports,"AccordionContent",{enumerable:true,get:function(){return chunkAAFG7R4U_cjs.d}});Object.defineProperty(exports,"AccordionItem",{enumerable:true,get:function(){return chunkAAFG7R4U_cjs.b}});Object.defineProperty(exports,"AccordionTrigger",{enumerable:true,get:function(){return chunkAAFG7R4U_cjs.c}});

package/dist/Accordion.d.cts

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

package/dist/Accordion.d.ts

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

package/dist/Accordion.js

@@ -0,0 +1 @@
+export{a as Accordion,d as AccordionContent,b as AccordionItem,c as AccordionTrigger}from'./chunks/chunk-5PFWPAB6.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Alert.cjs

@@ -0,0 +1 @@
+'use strict';var chunk63LKYF4D_cjs=require('./chunks/chunk-63LKYF4D.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Alert",{enumerable:true,get:function(){return chunk63LKYF4D_cjs.a}});Object.defineProperty(exports,"AlertDescription",{enumerable:true,get:function(){return chunk63LKYF4D_cjs.c}});Object.defineProperty(exports,"AlertTitle",{enumerable:true,get:function(){return chunk63LKYF4D_cjs.b}});Object.defineProperty(exports,"configureAlertTopOffset",{enumerable:true,get:function(){return chunk63LKYF4D_cjs.d}});Object.defineProperty(exports,"useAlert",{enumerable:true,get:function(){return chunk63LKYF4D_cjs.e}});

package/dist/Alert.d.cts

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

package/dist/Alert.d.ts

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

package/dist/Alert.js

@@ -0,0 +1 @@
+export{a as Alert,c as AlertDescription,b as AlertTitle,d as configureAlertTopOffset,e as useAlert}from'./chunks/chunk-BW6NCATH.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Badge.cjs

@@ -0,0 +1 @@
+'use strict';var chunkEK4BC3WT_cjs=require('./chunks/chunk-EK4BC3WT.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Badge",{enumerable:true,get:function(){return chunkEK4BC3WT_cjs.a}});

package/dist/Badge.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from './theme.cjs';
+import 'class-variance-authority/types';
+
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+declare function Badge({ intent, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge };

package/dist/Badge.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from './theme.js';
+import 'class-variance-authority/types';
+
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+declare function Badge({ intent, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge };

package/dist/Badge.js

@@ -0,0 +1 @@
+export{a as Badge}from'./chunks/chunk-PODSD5UT.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Button.cjs

@@ -0,0 +1 @@
+'use strict';var chunkBQLPFPCA_cjs=require('./chunks/chunk-BQLPFPCA.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Button",{enumerable:true,get:function(){return chunkBQLPFPCA_cjs.a}});

package/dist/Button.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './theme.cjs';
+import 'class-variance-authority/types';
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+declare function Button({ intent, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/Button.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './theme.js';
+import 'class-variance-authority/types';
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+declare function Button({ intent, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/Button.js

@@ -0,0 +1 @@
+export{a as Button}from'./chunks/chunk-N36YROV3.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Card.cjs

@@ -0,0 +1 @@
+'use strict';var chunkTDI2N27U_cjs=require('./chunks/chunk-TDI2N27U.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Card",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.a}});Object.defineProperty(exports,"CardContent",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.e}});Object.defineProperty(exports,"CardDescription",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.d}});Object.defineProperty(exports,"CardFooter",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.f}});Object.defineProperty(exports,"CardHeader",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.b}});Object.defineProperty(exports,"CardTitle",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.c}});Object.defineProperty(exports,"HorizontalCard",{enumerable:true,get:function(){return chunkTDI2N27U_cjs.g}});

package/dist/Card.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './theme.cjs';
+import 'class-variance-authority/types';
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+declare function Card({ intent, size, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): 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;
+};
+declare function HorizontalCard({ intent, media, mediaPosition, className, children, ...props }: HorizontalCardProps): react_jsx_runtime.JSX.Element;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HorizontalCard };

package/dist/Card.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './theme.js';
+import 'class-variance-authority/types';
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+declare function Card({ intent, size, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): 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;
+};
+declare function HorizontalCard({ intent, media, mediaPosition, className, children, ...props }: HorizontalCardProps): react_jsx_runtime.JSX.Element;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HorizontalCard };

package/dist/Card.js

@@ -0,0 +1 @@
+export{a as Card,e as CardContent,d as CardDescription,f as CardFooter,b as CardHeader,c as CardTitle,g as HorizontalCard}from'./chunks/chunk-DXXCR4ON.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Chat.cjs

@@ -0,0 +1 @@
+'use strict';var chunkOZVJMUXX_cjs=require('./chunks/chunk-OZVJMUXX.cjs');require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Chat",{enumerable:true,get:function(){return chunkOZVJMUXX_cjs.a}});

package/dist/Chat.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+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;
+}
+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;
+}
+declare function Chat({ messages, mode, autoScroll, className, ...props }: ChatProps): react_jsx_runtime.JSX.Element;
+
+export { Chat, type ChatMessage, type ChatProps };

package/dist/{components/Chat.d.ts → Chat.d.ts}

@@ -1,5 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-export interface ChatMessage {
+
+interface ChatMessage {
     /** Unique id for the message. */
     id: string | number;
     /** Sender display name. */
@@ -13,7 +15,7 @@ export interface ChatMessage {
     /** Mark as "self" (current user). Controls bubble alignment in split mode. */
     self?: boolean;
 }
-export interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Array of messages to render. */
     messages: ChatMessage[];
     /**
@@ -21,9 +23,10 @@ export interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `'split'` — self messages on the right, others on the left (default)
      * - `'left'`  — all messages aligned to the left
      */
-    mode?: 'split' | '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
+declare function Chat({ messages, mode, autoScroll, className, ...props }: ChatProps): react_jsx_runtime.JSX.Element;
+
+export { Chat, type ChatMessage, type ChatProps };

package/dist/Chat.js

@@ -0,0 +1 @@
+export{a as Chat}from'./chunks/chunk-PHAX43YF.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/CinePlayer.cjs

@@ -0,0 +1 @@
+'use strict';var chunkN4QZRR2Y_cjs=require('./chunks/chunk-N4QZRR2Y.cjs');require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"CinePlayer",{enumerable:true,get:function(){return chunkN4QZRR2Y_cjs.a}});

package/dist/CinePlayer.d.cts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CinePlayerMedia {
+    /** Display title. */
+    title: string;
+    /** Subtitle / description line. */
+    subtitle?: string;
+    /** Media type tag (e.g. 'movie', 'clip', 'episode'). Used for sorting. */
+    type?: string;
+    /** Source URL (http/blob/file). */
+    src: string;
+    /** Poster / thumbnail URL. */
+    poster?: string;
+    /** Duration in seconds (auto-detected if omitted). */
+    duration?: number;
+}
+type CinePlayerSortKey = "title" | "type" | "duration";
+interface CinePlayerProps {
+    /** Media playlist. */
+    playlist: CinePlayerMedia[];
+    /** Starting index. @default 0 */
+    initialTrack?: number;
+    /** Auto-play when ready. @default false */
+    autoPlay?: boolean;
+    /** Initial shuffle state. @default false */
+    shuffle?: boolean;
+    /** Initial loop state. @default false */
+    loop?: boolean;
+    /** Called on track change. */
+    onTrackChange?: (index: number, media: CinePlayerMedia) => void;
+    /** Called when play state changes. */
+    onPlayChange?: (playing: boolean) => void;
+    /** Accent color (any CSS color value). @default '#8b5cf6' */
+    accent?: string;
+    /** Extra class name on root. */
+    className?: string;
+}
+declare function CinePlayer({ playlist, initialTrack, autoPlay, shuffle: shuffleProp, loop: loopProp, onTrackChange, onPlayChange, accent, className, }: CinePlayerProps): react_jsx_runtime.JSX.Element;
+
+export { CinePlayer, type CinePlayerMedia, type CinePlayerProps, type CinePlayerSortKey };

package/dist/{components/CinePlayer.d.ts → CinePlayer.d.ts}

@@ -1,4 +1,6 @@
-export interface CinePlayerMedia {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CinePlayerMedia {
     /** Display title. */
     title: string;
     /** Subtitle / description line. */
@@ -12,8 +14,8 @@ export interface CinePlayerMedia {
     /** Duration in seconds (auto-detected if omitted). */
     duration?: number;
 }
-export type CinePlayerSortKey = 'title' | 'type' | 'duration';
-export interface CinePlayerProps {
+type CinePlayerSortKey = "title" | "type" | "duration";
+interface CinePlayerProps {
     /** Media playlist. */
     playlist: CinePlayerMedia[];
     /** Starting index. @default 0 */
@@ -33,5 +35,6 @@ export interface CinePlayerProps {
     /** Extra class name on root. */
     className?: string;
 }
-export declare function CinePlayer({ playlist, initialTrack, autoPlay, shuffle: shuffleProp, loop: loopProp, onTrackChange, onPlayChange, accent, className, }: CinePlayerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CinePlayer.d.ts.map
+declare function CinePlayer({ playlist, initialTrack, autoPlay, shuffle: shuffleProp, loop: loopProp, onTrackChange, onPlayChange, accent, className, }: CinePlayerProps): react_jsx_runtime.JSX.Element;
+
+export { CinePlayer, type CinePlayerMedia, type CinePlayerProps, type CinePlayerSortKey };

package/dist/CinePlayer.js

@@ -0,0 +1 @@
+export{a as CinePlayer}from'./chunks/chunk-QTADJ7I5.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Dialog.cjs

@@ -0,0 +1 @@
+'use strict';var chunkU2ZQHP4I_cjs=require('./chunks/chunk-U2ZQHP4I.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Dialog",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.a}});Object.defineProperty(exports,"DialogClose",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.g}});Object.defineProperty(exports,"DialogContent",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.b}});Object.defineProperty(exports,"DialogDescription",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.e}});Object.defineProperty(exports,"DialogFooter",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.f}});Object.defineProperty(exports,"DialogHeader",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.c}});Object.defineProperty(exports,"DialogTitle",{enumerable:true,get:function(){return chunkU2ZQHP4I_cjs.d}});

package/dist/Dialog.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { dialogContentVariants } from './theme.cjs';
+import 'class-variance-authority/types';
+
+type DialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    modal?: boolean;
+    /** When true, clicking outside the dialog closes it. @default false */
+    closeOnOutsideClick?: boolean;
+    children: React.ReactNode;
+};
+declare function Dialog({ open, onOpenChange, modal, closeOnOutsideClick, children, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dialogContentVariants>;
+declare function DialogContent({ size, className, children, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element | null;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle };

package/dist/Dialog.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { dialogContentVariants } from './theme.js';
+import 'class-variance-authority/types';
+
+type DialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    modal?: boolean;
+    /** When true, clicking outside the dialog closes it. @default false */
+    closeOnOutsideClick?: boolean;
+    children: React.ReactNode;
+};
+declare function Dialog({ open, onOpenChange, modal, closeOnOutsideClick, children, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dialogContentVariants>;
+declare function DialogContent({ size, className, children, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element | null;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle };

package/dist/Dialog.js

@@ -0,0 +1 @@
+export{a as Dialog,g as DialogClose,b as DialogContent,e as DialogDescription,f as DialogFooter,c as DialogHeader,d as DialogTitle}from'./chunks/chunk-NCJ5A6VE.js';import'./chunks/chunk-ACQOSYBI.js';import'./chunks/chunk-AXBJKPZZ.js';

package/dist/Dropdown.cjs

@@ -0,0 +1 @@
+'use strict';var chunk5XPTHIGM_cjs=require('./chunks/chunk-5XPTHIGM.cjs');require('./chunks/chunk-NBLJWONR.cjs'),require('./chunks/chunk-X5YP5TMY.cjs');Object.defineProperty(exports,"Dropdown",{enumerable:true,get:function(){return chunk5XPTHIGM_cjs.a}});