@clidey/ux 0.39.0 → 0.40.0

package/README.md

@@ -1,278 +1,362 @@
-# @clidey/ux
-
-A modern React UI component library built with Tailwind CSS and Radix UI primitives.
-
-## Features
-
-- 🎨 **Modern Design**: Clean, accessible components with a modern aesthetic
-- 🌙 **Dark Mode**: Built-in dark mode support with theme switching
-- ♿ **Accessible**: Built on Radix UI primitives for excellent accessibility
-- 🎯 **TypeScript**: Full TypeScript support with proper type definitions
-- 🚀 **Lightweight**: Optimized bundle size with tree-shaking support
-- 🎨 **Customizable**: Easy to customize with Tailwind CSS classes
+<p align="center">
+  <img src="./docs/logo/logo.png" alt="Clidey UX" height="72" />
+</p>
+
+<p align="center">
+  <strong>A production-ready React component library built on Radix UI and Tailwind CSS v4.</strong><br/>
+  37+ accessible, composable, dark-mode-ready components — drop in and ship.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@clidey/ux">
+    <img src="https://img.shields.io/npm/v/@clidey/ux?color=6366f1&labelColor=18181b&style=flat-square" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@clidey/ux">
+    <img src="https://img.shields.io/npm/dm/@clidey/ux?color=6366f1&labelColor=18181b&style=flat-square" alt="downloads" />
+  </a>
+  <a href="https://github.com/clidey/ux/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-6366f1?labelColor=18181b&style=flat-square" alt="MIT license" />
+  </a>
+  <img src="https://img.shields.io/badge/React-18%20%7C%2019-6366f1?labelColor=18181b&style=flat-square" alt="React 18/19" />
+  <img src="https://img.shields.io/badge/TypeScript-ready-6366f1?labelColor=18181b&style=flat-square" alt="TypeScript" />
+</p>
+
+---
+
+## Why Clidey UX?
+
+Building a consistent, accessible UI from scratch takes weeks. Clidey UX gives you a complete set of polished components so you can focus on your product, not your design system.
+
+- **Accessible by default** — every component is built on [Radix UI](https://radix-ui.com) primitives. Keyboard navigation, focus management, and ARIA attributes are handled for you.
+- **Dark mode included** — wrap your app with `ThemeProvider` and all components adapt automatically. System preference detection and `localStorage` persistence built in.
+- **Fully typed** — complete TypeScript definitions with strict mode. Autocomplete for every prop, variant, and event handler.
+- **Composable API** — sub-component patterns give you full control over layout and markup without fighting against an opinionated structure.
+- **Tailwind CSS v4** — styled with utility classes you already know. Override anything with `className`.
+- **Zero configuration** — one import, one stylesheet, done.
+
+---
 
 ## Installation
 
 ```bash
 npm install @clidey/ux
 # or
-yarn add @clidey/ux
-# or
 pnpm add @clidey/ux
+# or
+yarn add @clidey/ux
 ```
 
-## Quick Start
+**Import the stylesheet once** at your app entry point:
 
 ```tsx
-import { Button, Card, ThemeProvider } from '@clidey/ux'
-
-function App() {
-  return (
-    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
-      <Card>
-        <CardHeader>
-          <CardTitle>Welcome to Clidey UX</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Button>Click me</Button>
-        </CardContent>
-      </Card>
-    </ThemeProvider>
-  )
-}
+// main.tsx / _app.tsx
+import '@clidey/ux/styles.css';
 ```
 
-**Note:** Styles are automatically included when you import components. No additional CSS imports are required.
-
-## Components
-
-### Layout Components
-
-- **Card** - Container component with header, content, and footer sections
-- **Skeleton** - Loading state component
-
-### Form Components
-
-- **Button** - Button component with multiple variants and sizes
-- **Input** - Input field component
-- **Label** - Form label component
-
-### Navigation Components
-
-- **Breadcrumb** - Hierarchical navigation component
-- **Pagination** - Page navigation component
-- **Tabs** - Tabbed interface component
-
-### Data Display Components
-
-- **Badge** - Status and label component
-- **Table** - Data table component
-- **Tooltip** - Tooltip component
-
-### Overlay Components
-
-- **ContextMenu** - Context menu component
-- **Drawer** - Slide-out drawer component
-- **DropdownMenu** - Dropdown menu component
-- **Popover** - Popover component
-
-### Feedback Components
-
-- **Toaster** - Toast notification component
-
-### Theme Components
-
-- **ThemeProvider** - Theme context provider
-- **ModeToggle** - Theme toggle button
-
-## Usage Examples
-
-### Basic Button
+**Wrap with ThemeProvider** to enable dark mode:
 
 ```tsx
-import { Button } from '@clidey/ux'
+import { ThemeProvider } from '@clidey/ux';
 
-function MyComponent() {
+export default function App() {
   return (
-    <div>
-      <Button>Default Button</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="destructive">Delete</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
-    </div>
-  )
+    <ThemeProvider defaultTheme="system">
+      {/* your app */}
+    </ThemeProvider>
+  );
 }
 ```
 
-### Card with Content
+That's it. No extra configuration, no Tailwind setup required in your project.
 
-```tsx
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@clidey/ux'
+---
+
+## Quick start
 
-function MyCard() {
+```tsx
+import {
+  Button,
+  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
+  Badge,
+  Input,
+  Label,
+} from '@clidey/ux';
+import '@clidey/ux/styles.css';
+
+export default function Example() {
   return (
-    <Card>
+    <Card className="max-w-sm">
       <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card description goes here</CardDescription>
+        <CardTitle>Create account</CardTitle>
+        <CardDescription>Get started in seconds. No credit card required.</CardDescription>
       </CardHeader>
-      <CardContent>
-        <p>This is the main content of the card.</p>
+      <CardContent className="space-y-3">
+        <div className="space-y-1">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="you@example.com" />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" showPasswordToggle />
+        </div>
       </CardContent>
-      <CardFooter>
-        <Button>Action</Button>
+      <CardFooter className="flex items-center justify-between">
+        <Badge variant="outline">Free plan</Badge>
+        <Button>Create account</Button>
       </CardFooter>
     </Card>
-  )
+  );
 }
 ```
 
-### Form with Input
-
-```tsx
-import { Input, Label, Button } from '@clidey/ux'
+---
 
-function MyForm() {
-  return (
-    <form className="space-y-4">
-      <div>
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" type="email" placeholder="Enter your email" />
-      </div>
-      <Button type="submit">Submit</Button>
-    </form>
-  )
-}
-```
+## Components
 
-### Table with Data
+### Actions
+| Component | Description |
+| --- | --- |
+| `Button` | 6 variants (`default`, `destructive`, `outline`, `secondary`, `ghost`, `link`) · 4 sizes |
+| `ButtonGroup` | Connected button strip for toolbars and segmented controls |
+
+### Inputs
+| Component | Description |
+| --- | --- |
+| `Input` | Text field with optional password toggle |
+| `TextArea` | Multi-line text input |
+| `SearchInput` | Text field with built-in search icon |
+| `Checkbox` | Accessible checkbox with indeterminate state |
+| `Switch` | Toggle for boolean settings |
+| `Select` | Composable dropdown selector |
+| `SearchSelect` | Dropdown with search filtering and icon support |
+| `Label` | Accessible form label |
+
+### Display
+| Component | Description |
+| --- | --- |
+| `Badge` | Status and category labels · 4 variants |
+| `Card` | Container with header, content, footer, and action slots |
+| `Alert` | Inline feedback messages · `default` and `destructive` |
+| `Spinner` | Animated loader · 5 color variants · 3 sizes |
+| `Skeleton` | Pulsing placeholder for loading states |
+| `Progress` | Linear progress bar |
+| `EmptyState` | Placeholder for empty lists and zero-state screens |
+| `Separator` | Horizontal or vertical divider |
+
+### Navigation
+| Component | Description |
+| --- | --- |
+| `Tabs` | Tab panels for switching between sections |
+| `Breadcrumb` | Hierarchical path with ellipsis support |
+| `Pagination` | Previous / next and numbered page controls |
+| `Sidebar` | Full sidebar with collapsible menus, submenus, mobile support |
+
+### Overlays
+| Component | Description |
+| --- | --- |
+| `Dialog` | Modal with focus trap and scroll lock |
+| `AlertDialog` | Blocking confirmation for destructive actions |
+| `Drawer` | Slide-in panel from any edge (powered by Vaul) |
+| `Sheet` | Side panel overlay (powered by Radix Dialog) |
+| `Tooltip` | Hover label with configurable delay and position |
+| `Popover` | Click-anchored floating panel |
+
+### Menus
+| Component | Description |
+| --- | --- |
+| `DropdownMenu` | Trigger menu with checkboxes, radio groups, and sub-menus |
+| `ContextMenu` | Right-click menu with the same rich item types |
+| `Command` | Fuzzy-search command palette (⌘K) powered by cmdk |
+
+### Layout
+| Component | Description |
+| --- | --- |
+| `Accordion` | Collapsible sections with animated expand/collapse |
+| `ResizablePanelGroup` | Drag-to-resize split views |
+| `ScrollArea` | Custom scrollbar with styled track and thumb |
+| `StackList` | Key-value metadata list with separators |
+
+### Data & Visualization
+| Component | Description |
+| --- | --- |
+| `Table` | Full table with virtualization for large datasets and JSON preview |
+| `Chart` | Recharts wrapper with theme-aware tooltips and legend |
+| `Tree` | Hierarchical tree / file explorer with expand and selection |
+
+### Utilities
+| Component | Description |
+| --- | --- |
+| `Icon` | SVG wrapper with consistent sizing |
+| `Toaster` | Toast notifications powered by Sonner |
+
+### Theme
+| Component / Hook | Description |
+| --- | --- |
+| `ThemeProvider` | Context provider for light / dark / system theme |
+| `useTheme` | Hook to read and set the active theme |
+| `ModeToggle` | Ready-made dropdown to switch themes |
+
+---
+
+## Usage examples
+
+### Confirmation dialog
 
 ```tsx
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge } from '@clidey/ux'
-
-function MyTable() {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-          <TableHead>Status</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>John Doe</TableCell>
-          <TableCell>john@example.com</TableCell>
-          <TableCell><Badge>Active</Badge></TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-}
+import {
+  AlertDialog, AlertDialogTrigger, AlertDialogContent,
+  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+  AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
+  Button,
+} from '@clidey/ux';
+
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="destructive">Delete account</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. Your data will be permanently deleted.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete account</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
 ```
 
-### Theme Setup
+### Toast notifications
 
 ```tsx
-import { ThemeProvider, ModeToggle } from '@clidey/ux'
-
-function App() {
-  return (
-    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
-      <div>
-        <ModeToggle />
-        {/* Your app content */}
-      </div>
-    </ThemeProvider>
-  )
-}
+import { Toaster, toast } from '@clidey/ux';
+
+// In your root layout
+<Toaster />
+
+// Anywhere in your app
+toast.success('Saved successfully!');
+toast.error('Something went wrong.');
+toast.promise(saveData(), {
+  loading: 'Saving...',
+  success: 'Done!',
+  error: 'Failed to save.',
+});
 ```
 
-## Styling
-
-The components are built with Tailwind CSS v4 and include all necessary styles automatically. When you import any component, the styles are automatically included in your bundle.
+### Command palette (⌘K)
 
-### Requirements
+```tsx
+import {
+  CommandDialog, CommandInput, CommandList,
+  CommandEmpty, CommandGroup, CommandItem,
+} from '@clidey/ux';
+
+<CommandDialog open={open} onOpenChange={setOpen}>
+  <CommandInput placeholder="Search commands..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Navigation">
+      <CommandItem onSelect={() => navigate('/dashboard')}>Dashboard</CommandItem>
+      <CommandItem onSelect={() => navigate('/settings')}>Settings</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</CommandDialog>
+```
 
-To use the components properly, you need to have Tailwind CSS v4 installed in your project:
+### Large dataset table with virtualization
 
-```bash
-npm install tailwindcss@next
+```tsx
+import {
+  TableProvider, Table, TableHeader, TableHeadRow,
+  TableHead, VirtualizedTableBody, TableRow, TableCell,
+} from '@clidey/ux';
+
+<TableProvider columnCount={3}>
+  <Table>
+    <TableHeader>
+      <TableHeadRow>
+        <TableHead>ID</TableHead>
+        <TableHead>Name</TableHead>
+        <TableHead>Status</TableHead>
+      </TableHeadRow>
+    </TableHeader>
+    <VirtualizedTableBody rowCount={10000} rowHeight={48} height={400}>
+      {({ index, style }) => (
+        <TableRow style={style}>
+          <TableCell>{rows[index].id}</TableCell>
+          <TableCell>{rows[index].name}</TableCell>
+          <TableCell>{rows[index].status}</TableCell>
+        </TableRow>
+      )}
+    </VirtualizedTableBody>
+  </Table>
+</TableProvider>
 ```
 
-### Configuration
-
-Configure your build tool to process CSS. For example, with Vite:
-
-```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  css: {
-    postcss: {
-      plugins: [
-        require('tailwindcss'),
-      ],
-    },
-  },
-})
-```
+---
 
-### CSS Variables
+## Theming
 
-The package provides CSS custom properties for theming that are automatically included:
+All visual tokens are exposed as CSS custom properties. Override them in your own stylesheet after importing `@clidey/ux/styles.css`:
 
 ```css
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  /* ... more variables */
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  /* ... dark mode variables */
+  --primary: 250 84% 54%;          /* your brand color */
+  --radius: 0.375rem;              /* border radius */
 }
 ```
 
-### Troubleshooting
+Dark mode is automatic — `ThemeProvider` applies a `dark` class to `<html>` and all components respond to it via Tailwind's `dark:` modifier.
 
-If the styles aren't loading properly:
+---
 
-1. **Check your build tool configuration** - Make sure CSS imports are being processed
-2. **Verify Tailwind CSS version** - Ensure you're using Tailwind CSS v4
-3. **Clear cache** - Try clearing your build cache and node_modules
+## Next.js
 
-## Dependencies
+```tsx
+// app/providers.tsx
+'use client';
+import { ThemeProvider } from '@clidey/ux';
 
-This package has the following peer dependencies:
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
+}
 
-- `react` (^18.0.0 || ^19.0.0)
-- `react-dom` (^18.0.0 || ^19.0.0)
+// app/layout.tsx
+import '@clidey/ux/styles.css';
+import { Providers } from './providers';
 
-And the following dependencies:
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+```
 
-- `@radix-ui/react-*` - UI primitives
-- `class-variance-authority` - Component variants
-- `clsx` - Conditional classes
-- `lucide-react` - Icons
-- `next-themes` - Theme management
-- `sonner` - Toast notifications
-- `tailwind-merge` - Tailwind class merging
-- `vaul` - Drawer component
+---
 
-## License
+## Peer dependencies
+
+| Package | Version |
+| --- | --- |
+| `react` | `>= 18.3.0` |
+| `react-dom` | `>= 18.3.0` |
 
-MIT
+All other dependencies (Radix UI, Lucide, Recharts, Sonner, Vaul, cmdk) are bundled — no extra installs needed.
+
+---
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions, bug reports, and feature requests are welcome. Please open an issue or pull request on [GitHub](https://github.com/clidey/ux).
+
+## License
+
+MIT — free to use in personal and commercial projects.

package/dist/app.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=app.d.ts.map

package/dist/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.tsx"],"names":[],"mappings":"AAwCA,iBAAS,GAAG,4CAwFX;AAED,eAAe,GAAG,CAAA"}

package/dist/components/theme/provider.d.ts

@@ -0,0 +1,14 @@
+type Theme = "dark" | "light" | "system";
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/components/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/provider.tsx"],"names":[],"mappings":"AAkBA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CAAA;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAA+B,EAC/B,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoCpB;AAED,eAAO,MAAM,QAAQ,0BAOpB,CAAA"}

package/dist/components/theme/toggle.d.ts

@@ -0,0 +1,2 @@
+export declare function ModeToggle(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/theme/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme/toggle.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,UAAU,4CA4BzB"}

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAEtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAQtD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAgBzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAUzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAKpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AAI/D,QAAA,MAAM,aAAa;;8EAalB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAUlE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAWrE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW3B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}