@arcadeai/design-system 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -0
- package/dist/check-CxcShTlQ.js +11 -0
- package/dist/chevron-down-D_a-ccxi.js +11 -0
- package/dist/chevron-right-DriXIqe5.js +11 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +195 -0
- package/dist/components/ui/atoms/accordion.d.ts +7 -0
- package/dist/components/ui/atoms/accordion.js +289 -0
- package/dist/components/ui/atoms/alert.d.ts +9 -0
- package/dist/components/ui/atoms/alert.js +66 -0
- package/dist/components/ui/atoms/avatar.d.ts +6 -0
- package/dist/components/ui/atoms/avatar.js +130 -0
- package/dist/components/ui/atoms/badge.d.ts +9 -0
- package/dist/components/ui/atoms/badge.js +41 -0
- package/dist/components/ui/atoms/breadcrumb.d.ts +11 -0
- package/dist/components/ui/atoms/breadcrumb.js +115 -0
- package/dist/components/ui/atoms/button.d.ts +10 -0
- package/dist/components/ui/atoms/button.js +51 -0
- package/dist/components/ui/atoms/card.d.ts +9 -0
- package/dist/components/ui/atoms/card.js +90 -0
- package/dist/components/ui/atoms/chart.d.ts +68 -0
- package/dist/components/ui/atoms/chart.js +10477 -0
- package/dist/components/ui/atoms/collapsible.d.ts +5 -0
- package/dist/components/ui/atoms/collapsible.js +34 -0
- package/dist/components/ui/atoms/command.d.ts +18 -0
- package/dist/components/ui/atoms/command.js +490 -0
- package/dist/components/ui/atoms/dialog.d.ts +15 -0
- package/dist/components/ui/atoms/dialog.js +135 -0
- package/dist/components/ui/atoms/dropdown-menu.d.ts +25 -0
- package/dist/components/ui/atoms/dropdown-menu.js +1035 -0
- package/dist/components/ui/atoms/form.d.ts +24 -0
- package/dist/components/ui/atoms/form.js +297 -0
- package/dist/components/ui/atoms/hover-card.d.ts +6 -0
- package/dist/components/ui/atoms/hover-card.js +211 -0
- package/dist/components/ui/atoms/index.d.ts +33 -0
- package/dist/components/ui/atoms/index.js +195 -0
- package/dist/components/ui/atoms/input.d.ts +3 -0
- package/dist/components/ui/atoms/input.js +21 -0
- package/dist/components/ui/atoms/label.d.ts +4 -0
- package/dist/components/ui/atoms/label.js +36 -0
- package/dist/components/ui/atoms/popover.d.ts +7 -0
- package/dist/components/ui/atoms/popover.js +266 -0
- package/dist/components/ui/atoms/progress.d.ts +4 -0
- package/dist/components/ui/atoms/progress.js +107 -0
- package/dist/components/ui/atoms/resizable.d.ts +8 -0
- package/dist/components/ui/atoms/resizable.js +1564 -0
- package/dist/components/ui/atoms/scroll-area.d.ts +5 -0
- package/dist/components/ui/atoms/scroll-area.js +580 -0
- package/dist/components/ui/atoms/select.d.ts +15 -0
- package/dist/components/ui/atoms/select.js +1000 -0
- package/dist/components/ui/atoms/separator.d.ts +4 -0
- package/dist/components/ui/atoms/separator.js +44 -0
- package/dist/components/ui/atoms/sheet.d.ts +14 -0
- package/dist/components/ui/atoms/sheet.js +127 -0
- package/dist/components/ui/atoms/sidebar.d.ts +69 -0
- package/dist/components/ui/atoms/sidebar.js +602 -0
- package/dist/components/ui/atoms/skeleton.d.ts +2 -0
- package/dist/components/ui/atoms/skeleton.js +15 -0
- package/dist/components/ui/atoms/slider.d.ts +4 -0
- package/dist/components/ui/atoms/slider.js +484 -0
- package/dist/components/ui/atoms/sonner.d.ts +3 -0
- package/dist/components/ui/atoms/sonner.js +788 -0
- package/dist/components/ui/atoms/switch.d.ts +4 -0
- package/dist/components/ui/atoms/switch.js +155 -0
- package/dist/components/ui/atoms/table.d.ts +10 -0
- package/dist/components/ui/atoms/table.js +114 -0
- package/dist/components/ui/atoms/tabs.d.ts +7 -0
- package/dist/components/ui/atoms/tabs.js +218 -0
- package/dist/components/ui/atoms/textarea.d.ts +3 -0
- package/dist/components/ui/atoms/textarea.js +18 -0
- package/dist/components/ui/atoms/toggle.d.ts +9 -0
- package/dist/components/ui/atoms/toggle.js +70 -0
- package/dist/components/ui/atoms/tooltip.d.ts +7 -0
- package/dist/components/ui/atoms/tooltip.js +376 -0
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/ui/index.js +195 -0
- package/dist/createLucideIcon-B6fy1GTR.js +94 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +14 -0
- package/dist/index-BAhNQL1u.js +675 -0
- package/dist/index-BZPx6jYI.js +8 -0
- package/dist/index-ByaXH_ih.js +10 -0
- package/dist/index-C9KW2H79.js +36 -0
- package/dist/index-CB1Wkg0G.js +83 -0
- package/dist/index-CHDs-SiB.js +27 -0
- package/dist/index-CJFGOBPb.js +122 -0
- package/dist/index-CL4N9wMT.js +259 -0
- package/dist/index-CuMpq4Un.js +47 -0
- package/dist/index-CxK6rt_N.js +119 -0
- package/dist/index-D2uXV4lz.js +181 -0
- package/dist/index-DLeNytVF.js +9 -0
- package/dist/index-DYfkNB0n.js +54 -0
- package/dist/index-DdnpnyX2.js +34 -0
- package/dist/index-DuekHEmj.js +6 -0
- package/dist/index-DwYXX2sM.js +13 -0
- package/dist/index-Dy7YuPrV.js +1532 -0
- package/dist/index-QMp1pYFl.js +145 -0
- package/dist/index-UFb2E87s.js +70 -0
- package/dist/index-nluJZSbA.js +31 -0
- package/dist/index-p7nYL7BU.js +71 -0
- package/dist/index-rKs9bXHr.js +6 -0
- package/dist/index-umR1UobZ.js +13 -0
- package/dist/index.css +2 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +4 -0
- package/dist/main.d.ts +1 -0
- package/dist/main.js +195 -0
- package/dist/utils-Dy2WjYNJ.js +2744 -0
- package/package.json +100 -0
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Arcade.dev Design System
|
|
2
|
+
|
|
3
|
+
A collection of reusable components and guidelines that help us make sure all our apps look and feel like they belong together, keeping UI consistent and development speedy.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The Arcade.dev Design System provides a comprehensive set of React components built with TypeScript, Tailwind CSS, and shadcn/ui primitives. It ensures consistency across all Arcade applications while maintaining flexibility and accessibility. This design system is built on top of shadcn/ui, providing a curated collection of accessible and customizable components that follow modern design patterns.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
Install the design system as a dependency in your project:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install arcade-ds
|
|
15
|
+
# or
|
|
16
|
+
pnpm add arcade-ds
|
|
17
|
+
# or
|
|
18
|
+
yarn add arcade-ds
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Peer Dependencies
|
|
22
|
+
|
|
23
|
+
Make sure you have the required peer dependencies installed:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install react react-dom tailwindcss
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Required versions:
|
|
30
|
+
|
|
31
|
+
- React: ^19.1.0
|
|
32
|
+
- React DOM: ^19.1.0
|
|
33
|
+
- Tailwind CSS: ^4.1.10
|
|
34
|
+
|
|
35
|
+
## Setup
|
|
36
|
+
|
|
37
|
+
### 1. Import Styles
|
|
38
|
+
|
|
39
|
+
Import the design system styles in your main CSS file or at the root of your application:
|
|
40
|
+
|
|
41
|
+
```css
|
|
42
|
+
@import 'arcade-ds/dist/index.css';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 2. Configure Tailwind CSS
|
|
46
|
+
|
|
47
|
+
Ensure your Tailwind CSS configuration is compatible with the design system. The design system uses Tailwind CSS v4 with specific configurations.
|
|
48
|
+
|
|
49
|
+
### 3. Use Components
|
|
50
|
+
|
|
51
|
+
Import and use components in your React application:
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { Button, Card, Input } from 'arcade-ds';
|
|
55
|
+
|
|
56
|
+
function MyApp() {
|
|
57
|
+
return (
|
|
58
|
+
<Card>
|
|
59
|
+
<Input placeholder="Enter your email" />
|
|
60
|
+
<Button>Submit</Button>
|
|
61
|
+
</Card>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Development
|
|
67
|
+
|
|
68
|
+
### Prerequisites
|
|
69
|
+
|
|
70
|
+
- Node.js (v18 or higher)
|
|
71
|
+
- pnpm (recommended) or npm
|
|
72
|
+
|
|
73
|
+
### Getting Started
|
|
74
|
+
|
|
75
|
+
1. Clone the repository:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
git clone https://github.com/ArcadeAI/Design-System
|
|
79
|
+
cd design-system
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
2. Install dependencies:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
pnpm install
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
3. Start the development server:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
pnpm dev
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
4. View components in Storybook:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
pnpm storybook
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Technology Stack
|
|
101
|
+
|
|
102
|
+
This design system is built on top of:
|
|
103
|
+
|
|
104
|
+
- **shadcn/ui** - A collection of re-usable components built using Radix UI and Tailwind CSS
|
|
105
|
+
- **Radix UI** - Unstyled, accessible components for building high‑quality design systems
|
|
106
|
+
- **Tailwind CSS** - Utility-first CSS framework for rapid UI development
|
|
107
|
+
- **TypeScript** - Type-safe JavaScript for better developer experience
|
|
108
|
+
|
|
109
|
+
### Available Scripts
|
|
110
|
+
|
|
111
|
+
- `pnpm dev` - Start Vite development server
|
|
112
|
+
- `pnpm build` - Build the library for production
|
|
113
|
+
- `pnpm build:css` - Build CSS with Tailwind
|
|
114
|
+
- `pnpm lint` - Run ESLint
|
|
115
|
+
- `pnpm storybook` - Start Storybook development server
|
|
116
|
+
- `pnpm build-storybook` - Build Storybook for production
|
|
117
|
+
|
|
118
|
+
### Design Tokens
|
|
119
|
+
|
|
120
|
+
The design system uses Tailwind CSS for consistent spacing, colors, typography, and other design tokens. When adding new components:
|
|
121
|
+
|
|
122
|
+
- Use existing Tailwind classes when possible
|
|
123
|
+
- Follow the established color palette
|
|
124
|
+
- Maintain consistent spacing and typography scales
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
Built with ❤️ by the Arcade.dev team
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { c } from "./createLucideIcon-B6fy1GTR.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license lucide-react v0.522.0 - ISC
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the ISC license.
|
|
6
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
const e = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], t = c("check", e);
|
|
9
|
+
export {
|
|
10
|
+
t as C
|
|
11
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { c as o } from "./createLucideIcon-B6fy1GTR.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license lucide-react v0.522.0 - ISC
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the ISC license.
|
|
6
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
const n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], e = o("chevron-down", n);
|
|
9
|
+
export {
|
|
10
|
+
e as C
|
|
11
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { c as o } from "./createLucideIcon-B6fy1GTR.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license lucide-react v0.522.0 - ISC
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the ISC license.
|
|
6
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
const t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], e = o("chevron-right", t);
|
|
9
|
+
export {
|
|
10
|
+
e as C
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ui';
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { Accordion as o, AccordionContent as t, AccordionItem as a, AccordionTrigger as n } from "./ui/atoms/accordion.js";
|
|
2
|
+
import { Alert as l, AlertDescription as d, AlertTitle as p } from "./ui/atoms/alert.js";
|
|
3
|
+
import { Avatar as S, AvatarFallback as b, AvatarImage as u } from "./ui/atoms/avatar.js";
|
|
4
|
+
import { Badge as g, badgeVariants as c } from "./ui/atoms/badge.js";
|
|
5
|
+
import { Breadcrumb as x, BreadcrumbEllipsis as f, BreadcrumbItem as s, BreadcrumbLink as D, BreadcrumbList as M, BreadcrumbPage as h, BreadcrumbSeparator as w } from "./ui/atoms/breadcrumb.js";
|
|
6
|
+
import { Button as F, buttonVariants as A } from "./ui/atoms/button.js";
|
|
7
|
+
import { Card as v, CardAction as P, CardContent as L, CardDescription as H, CardFooter as G, CardHeader as R, CardTitle as k } from "./ui/atoms/card.js";
|
|
8
|
+
import { ChartContainer as V, ChartLegend as z, ChartLegendContent as E, ChartStyle as O, ChartTooltip as U, ChartTooltipContent as j } from "./ui/atoms/chart.js";
|
|
9
|
+
import { Collapsible as J, CollapsibleContent as K, CollapsibleTrigger as N } from "./ui/atoms/collapsible.js";
|
|
10
|
+
import { Command as W, CommandDialog as X, CommandEmpty as Y, CommandGroup as Z, CommandInput as _, CommandItem as $, CommandList as ee, CommandSeparator as re, CommandShortcut as oe } from "./ui/atoms/command.js";
|
|
11
|
+
import { Dialog as ae, DialogClose as ne, DialogContent as ie, DialogDescription as le, DialogFooter as de, DialogHeader as pe, DialogOverlay as me, DialogPortal as Se, DialogTitle as be, DialogTrigger as ue } from "./ui/atoms/dialog.js";
|
|
12
|
+
import { DropdownMenu as ge, DropdownMenuCheckboxItem as ce, DropdownMenuContent as Te, DropdownMenuGroup as xe, DropdownMenuItem as fe, DropdownMenuLabel as se, DropdownMenuPortal as De, DropdownMenuRadioGroup as Me, DropdownMenuRadioItem as he, DropdownMenuSeparator as we, DropdownMenuShortcut as Be, DropdownMenuSub as Fe, DropdownMenuSubContent as Ae, DropdownMenuSubTrigger as Ie, DropdownMenuTrigger as ve } from "./ui/atoms/dropdown-menu.js";
|
|
13
|
+
import { Form as Le, FormControl as He, FormDescription as Ge, FormField as Re, FormItem as ke, FormLabel as ye, FormMessage as Ve, useFormField as ze } from "./ui/atoms/form.js";
|
|
14
|
+
import { HoverCard as Oe, HoverCardContent as Ue, HoverCardTrigger as je } from "./ui/atoms/hover-card.js";
|
|
15
|
+
import { Input as Je } from "./ui/atoms/input.js";
|
|
16
|
+
import { Label as Ne } from "./ui/atoms/label.js";
|
|
17
|
+
import { Popover as We, PopoverAnchor as Xe, PopoverContent as Ye, PopoverTrigger as Ze } from "./ui/atoms/popover.js";
|
|
18
|
+
import { Progress as $e } from "./ui/atoms/progress.js";
|
|
19
|
+
import { ResizableHandle as rr, ResizablePanel as or, ResizablePanelGroup as tr } from "./ui/atoms/resizable.js";
|
|
20
|
+
import { ScrollArea as nr, ScrollBar as ir } from "./ui/atoms/scroll-area.js";
|
|
21
|
+
import { Select as dr, SelectContent as pr, SelectGroup as mr, SelectItem as Sr, SelectLabel as br, SelectScrollDownButton as ur, SelectScrollUpButton as Cr, SelectSeparator as gr, SelectTrigger as cr, SelectValue as Tr } from "./ui/atoms/select.js";
|
|
22
|
+
import { Separator as fr } from "./ui/atoms/separator.js";
|
|
23
|
+
import { Sheet as Dr, SheetClose as Mr, SheetContent as hr, SheetDescription as wr, SheetFooter as Br, SheetHeader as Fr, SheetTitle as Ar, SheetTrigger as Ir } from "./ui/atoms/sheet.js";
|
|
24
|
+
import { Sidebar as Pr, SidebarContent as Lr, SidebarFooter as Hr, SidebarGroup as Gr, SidebarGroupAction as Rr, SidebarGroupContent as kr, SidebarGroupLabel as yr, SidebarHeader as Vr, SidebarInput as zr, SidebarInset as Er, SidebarMenu as Or, SidebarMenuAction as Ur, SidebarMenuBadge as jr, SidebarMenuButton as qr, SidebarMenuItem as Jr, SidebarMenuSkeleton as Kr, SidebarMenuSub as Nr, SidebarMenuSubButton as Qr, SidebarMenuSubItem as Wr, SidebarProvider as Xr, SidebarRail as Yr, SidebarSeparator as Zr, SidebarTrigger as _r, useSidebar as $r } from "./ui/atoms/sidebar.js";
|
|
25
|
+
import { Skeleton as ro } from "./ui/atoms/skeleton.js";
|
|
26
|
+
import { Slider as to } from "./ui/atoms/slider.js";
|
|
27
|
+
import { Toaster as no } from "./ui/atoms/sonner.js";
|
|
28
|
+
import { Switch as lo } from "./ui/atoms/switch.js";
|
|
29
|
+
import { Table as mo, TableBody as So, TableCaption as bo, TableCell as uo, TableFooter as Co, TableHead as go, TableHeader as co, TableRow as To } from "./ui/atoms/table.js";
|
|
30
|
+
import { Tabs as fo, TabsContent as so, TabsList as Do, TabsTrigger as Mo } from "./ui/atoms/tabs.js";
|
|
31
|
+
import { Textarea as wo } from "./ui/atoms/textarea.js";
|
|
32
|
+
import { Toggle as Fo, toggleVariants as Ao } from "./ui/atoms/toggle.js";
|
|
33
|
+
import { Tooltip as vo, TooltipContent as Po, TooltipProvider as Lo, TooltipTrigger as Ho } from "./ui/atoms/tooltip.js";
|
|
34
|
+
export {
|
|
35
|
+
o as Accordion,
|
|
36
|
+
t as AccordionContent,
|
|
37
|
+
a as AccordionItem,
|
|
38
|
+
n as AccordionTrigger,
|
|
39
|
+
l as Alert,
|
|
40
|
+
d as AlertDescription,
|
|
41
|
+
p as AlertTitle,
|
|
42
|
+
S as Avatar,
|
|
43
|
+
b as AvatarFallback,
|
|
44
|
+
u as AvatarImage,
|
|
45
|
+
g as Badge,
|
|
46
|
+
x as Breadcrumb,
|
|
47
|
+
f as BreadcrumbEllipsis,
|
|
48
|
+
s as BreadcrumbItem,
|
|
49
|
+
D as BreadcrumbLink,
|
|
50
|
+
M as BreadcrumbList,
|
|
51
|
+
h as BreadcrumbPage,
|
|
52
|
+
w as BreadcrumbSeparator,
|
|
53
|
+
F as Button,
|
|
54
|
+
v as Card,
|
|
55
|
+
P as CardAction,
|
|
56
|
+
L as CardContent,
|
|
57
|
+
H as CardDescription,
|
|
58
|
+
G as CardFooter,
|
|
59
|
+
R as CardHeader,
|
|
60
|
+
k as CardTitle,
|
|
61
|
+
V as ChartContainer,
|
|
62
|
+
z as ChartLegend,
|
|
63
|
+
E as ChartLegendContent,
|
|
64
|
+
O as ChartStyle,
|
|
65
|
+
U as ChartTooltip,
|
|
66
|
+
j as ChartTooltipContent,
|
|
67
|
+
J as Collapsible,
|
|
68
|
+
K as CollapsibleContent,
|
|
69
|
+
N as CollapsibleTrigger,
|
|
70
|
+
W as Command,
|
|
71
|
+
X as CommandDialog,
|
|
72
|
+
Y as CommandEmpty,
|
|
73
|
+
Z as CommandGroup,
|
|
74
|
+
_ as CommandInput,
|
|
75
|
+
$ as CommandItem,
|
|
76
|
+
ee as CommandList,
|
|
77
|
+
re as CommandSeparator,
|
|
78
|
+
oe as CommandShortcut,
|
|
79
|
+
ae as Dialog,
|
|
80
|
+
ne as DialogClose,
|
|
81
|
+
ie as DialogContent,
|
|
82
|
+
le as DialogDescription,
|
|
83
|
+
de as DialogFooter,
|
|
84
|
+
pe as DialogHeader,
|
|
85
|
+
me as DialogOverlay,
|
|
86
|
+
Se as DialogPortal,
|
|
87
|
+
be as DialogTitle,
|
|
88
|
+
ue as DialogTrigger,
|
|
89
|
+
ge as DropdownMenu,
|
|
90
|
+
ce as DropdownMenuCheckboxItem,
|
|
91
|
+
Te as DropdownMenuContent,
|
|
92
|
+
xe as DropdownMenuGroup,
|
|
93
|
+
fe as DropdownMenuItem,
|
|
94
|
+
se as DropdownMenuLabel,
|
|
95
|
+
De as DropdownMenuPortal,
|
|
96
|
+
Me as DropdownMenuRadioGroup,
|
|
97
|
+
he as DropdownMenuRadioItem,
|
|
98
|
+
we as DropdownMenuSeparator,
|
|
99
|
+
Be as DropdownMenuShortcut,
|
|
100
|
+
Fe as DropdownMenuSub,
|
|
101
|
+
Ae as DropdownMenuSubContent,
|
|
102
|
+
Ie as DropdownMenuSubTrigger,
|
|
103
|
+
ve as DropdownMenuTrigger,
|
|
104
|
+
Le as Form,
|
|
105
|
+
He as FormControl,
|
|
106
|
+
Ge as FormDescription,
|
|
107
|
+
Re as FormField,
|
|
108
|
+
ke as FormItem,
|
|
109
|
+
ye as FormLabel,
|
|
110
|
+
Ve as FormMessage,
|
|
111
|
+
Oe as HoverCard,
|
|
112
|
+
Ue as HoverCardContent,
|
|
113
|
+
je as HoverCardTrigger,
|
|
114
|
+
Je as Input,
|
|
115
|
+
Ne as Label,
|
|
116
|
+
We as Popover,
|
|
117
|
+
Xe as PopoverAnchor,
|
|
118
|
+
Ye as PopoverContent,
|
|
119
|
+
Ze as PopoverTrigger,
|
|
120
|
+
$e as Progress,
|
|
121
|
+
rr as ResizableHandle,
|
|
122
|
+
or as ResizablePanel,
|
|
123
|
+
tr as ResizablePanelGroup,
|
|
124
|
+
nr as ScrollArea,
|
|
125
|
+
ir as ScrollBar,
|
|
126
|
+
dr as Select,
|
|
127
|
+
pr as SelectContent,
|
|
128
|
+
mr as SelectGroup,
|
|
129
|
+
Sr as SelectItem,
|
|
130
|
+
br as SelectLabel,
|
|
131
|
+
ur as SelectScrollDownButton,
|
|
132
|
+
Cr as SelectScrollUpButton,
|
|
133
|
+
gr as SelectSeparator,
|
|
134
|
+
cr as SelectTrigger,
|
|
135
|
+
Tr as SelectValue,
|
|
136
|
+
fr as Separator,
|
|
137
|
+
Dr as Sheet,
|
|
138
|
+
Mr as SheetClose,
|
|
139
|
+
hr as SheetContent,
|
|
140
|
+
wr as SheetDescription,
|
|
141
|
+
Br as SheetFooter,
|
|
142
|
+
Fr as SheetHeader,
|
|
143
|
+
Ar as SheetTitle,
|
|
144
|
+
Ir as SheetTrigger,
|
|
145
|
+
Pr as Sidebar,
|
|
146
|
+
Lr as SidebarContent,
|
|
147
|
+
Hr as SidebarFooter,
|
|
148
|
+
Gr as SidebarGroup,
|
|
149
|
+
Rr as SidebarGroupAction,
|
|
150
|
+
kr as SidebarGroupContent,
|
|
151
|
+
yr as SidebarGroupLabel,
|
|
152
|
+
Vr as SidebarHeader,
|
|
153
|
+
zr as SidebarInput,
|
|
154
|
+
Er as SidebarInset,
|
|
155
|
+
Or as SidebarMenu,
|
|
156
|
+
Ur as SidebarMenuAction,
|
|
157
|
+
jr as SidebarMenuBadge,
|
|
158
|
+
qr as SidebarMenuButton,
|
|
159
|
+
Jr as SidebarMenuItem,
|
|
160
|
+
Kr as SidebarMenuSkeleton,
|
|
161
|
+
Nr as SidebarMenuSub,
|
|
162
|
+
Qr as SidebarMenuSubButton,
|
|
163
|
+
Wr as SidebarMenuSubItem,
|
|
164
|
+
Xr as SidebarProvider,
|
|
165
|
+
Yr as SidebarRail,
|
|
166
|
+
Zr as SidebarSeparator,
|
|
167
|
+
_r as SidebarTrigger,
|
|
168
|
+
ro as Skeleton,
|
|
169
|
+
to as Slider,
|
|
170
|
+
lo as Switch,
|
|
171
|
+
mo as Table,
|
|
172
|
+
So as TableBody,
|
|
173
|
+
bo as TableCaption,
|
|
174
|
+
uo as TableCell,
|
|
175
|
+
Co as TableFooter,
|
|
176
|
+
go as TableHead,
|
|
177
|
+
co as TableHeader,
|
|
178
|
+
To as TableRow,
|
|
179
|
+
fo as Tabs,
|
|
180
|
+
so as TabsContent,
|
|
181
|
+
Do as TabsList,
|
|
182
|
+
Mo as TabsTrigger,
|
|
183
|
+
wo as Textarea,
|
|
184
|
+
no as Toaster,
|
|
185
|
+
Fo as Toggle,
|
|
186
|
+
vo as Tooltip,
|
|
187
|
+
Po as TooltipContent,
|
|
188
|
+
Lo as TooltipProvider,
|
|
189
|
+
Ho as TooltipTrigger,
|
|
190
|
+
c as badgeVariants,
|
|
191
|
+
A as buttonVariants,
|
|
192
|
+
Ao as toggleVariants,
|
|
193
|
+
ze as useFormField,
|
|
194
|
+
$r as useSidebar
|
|
195
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
2
|
+
import type * as React from 'react';
|
|
3
|
+
declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
import { jsx as t, jsxs as X } from "react/jsx-runtime";
|
|
2
|
+
import l from "react";
|
|
3
|
+
import { c as Z } from "../../../index-UFb2E87s.js";
|
|
4
|
+
import { c as ee } from "../../../index-CuMpq4Un.js";
|
|
5
|
+
import { u as oe } from "../../../index-CB1Wkg0G.js";
|
|
6
|
+
import { c as re } from "../../../index-DLeNytVF.js";
|
|
7
|
+
import { u as V } from "../../../index-DYfkNB0n.js";
|
|
8
|
+
import { P as H } from "../../../index-C9KW2H79.js";
|
|
9
|
+
import { c as K, R as te, T as ne, b as ce } from "../../../index-CxK6rt_N.js";
|
|
10
|
+
import { u as ae } from "../../../index-umR1UobZ.js";
|
|
11
|
+
import { u as ie } from "../../../index-ByaXH_ih.js";
|
|
12
|
+
import { c as S } from "../../../utils-Dy2WjYNJ.js";
|
|
13
|
+
import { C as se } from "../../../chevron-down-D_a-ccxi.js";
|
|
14
|
+
var d = "Accordion", le = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [E, de, pe] = ee(d), [b, Ve] = Z(d, [
|
|
15
|
+
pe,
|
|
16
|
+
K
|
|
17
|
+
]), k = K(), $ = l.forwardRef(
|
|
18
|
+
(e, n) => {
|
|
19
|
+
const { type: o, ...c } = e, a = c, r = c;
|
|
20
|
+
return /* @__PURE__ */ t(E.Provider, { scope: e.__scopeAccordion, children: o === "multiple" ? /* @__PURE__ */ t(ve, { ...r, ref: n }) : /* @__PURE__ */ t(me, { ...a, ref: n }) });
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
$.displayName = d;
|
|
24
|
+
var [j, ue] = b(d), [z, fe] = b(
|
|
25
|
+
d,
|
|
26
|
+
{ collapsible: !1 }
|
|
27
|
+
), me = l.forwardRef(
|
|
28
|
+
(e, n) => {
|
|
29
|
+
const {
|
|
30
|
+
value: o,
|
|
31
|
+
defaultValue: c,
|
|
32
|
+
onValueChange: a = () => {
|
|
33
|
+
},
|
|
34
|
+
collapsible: r = !1,
|
|
35
|
+
...s
|
|
36
|
+
} = e, [i, p] = V({
|
|
37
|
+
prop: o,
|
|
38
|
+
defaultProp: c ?? "",
|
|
39
|
+
onChange: a,
|
|
40
|
+
caller: d
|
|
41
|
+
});
|
|
42
|
+
return /* @__PURE__ */ t(
|
|
43
|
+
j,
|
|
44
|
+
{
|
|
45
|
+
scope: e.__scopeAccordion,
|
|
46
|
+
value: l.useMemo(() => i ? [i] : [], [i]),
|
|
47
|
+
onItemOpen: p,
|
|
48
|
+
onItemClose: l.useCallback(() => r && p(""), [r, p]),
|
|
49
|
+
children: /* @__PURE__ */ t(z, { scope: e.__scopeAccordion, collapsible: r, children: /* @__PURE__ */ t(L, { ...s, ref: n }) })
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
), ve = l.forwardRef((e, n) => {
|
|
54
|
+
const {
|
|
55
|
+
value: o,
|
|
56
|
+
defaultValue: c,
|
|
57
|
+
onValueChange: a = () => {
|
|
58
|
+
},
|
|
59
|
+
...r
|
|
60
|
+
} = e, [s, i] = V({
|
|
61
|
+
prop: o,
|
|
62
|
+
defaultProp: c ?? [],
|
|
63
|
+
onChange: a,
|
|
64
|
+
caller: d
|
|
65
|
+
}), p = l.useCallback(
|
|
66
|
+
(v) => i((f = []) => [...f, v]),
|
|
67
|
+
[i]
|
|
68
|
+
), m = l.useCallback(
|
|
69
|
+
(v) => i((f = []) => f.filter((x) => x !== v)),
|
|
70
|
+
[i]
|
|
71
|
+
);
|
|
72
|
+
return /* @__PURE__ */ t(
|
|
73
|
+
j,
|
|
74
|
+
{
|
|
75
|
+
scope: e.__scopeAccordion,
|
|
76
|
+
value: s,
|
|
77
|
+
onItemOpen: p,
|
|
78
|
+
onItemClose: m,
|
|
79
|
+
children: /* @__PURE__ */ t(z, { scope: e.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ t(L, { ...r, ref: n }) })
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}), [Ae, h] = b(d), L = l.forwardRef(
|
|
83
|
+
(e, n) => {
|
|
84
|
+
const { __scopeAccordion: o, disabled: c, dir: a, orientation: r = "vertical", ...s } = e, i = l.useRef(null), p = oe(i, n), m = de(o), f = ie(a) === "ltr", x = re(e.onKeyDown, (A) => {
|
|
85
|
+
var O;
|
|
86
|
+
if (!le.includes(A.key)) return;
|
|
87
|
+
const Q = A.target, I = m().filter((N) => {
|
|
88
|
+
var M;
|
|
89
|
+
return !((M = N.ref.current) != null && M.disabled);
|
|
90
|
+
}), g = I.findIndex((N) => N.ref.current === Q), T = I.length;
|
|
91
|
+
if (g === -1) return;
|
|
92
|
+
A.preventDefault();
|
|
93
|
+
let u = g;
|
|
94
|
+
const _ = 0, w = T - 1, R = () => {
|
|
95
|
+
u = g + 1, u > w && (u = _);
|
|
96
|
+
}, P = () => {
|
|
97
|
+
u = g - 1, u < _ && (u = w);
|
|
98
|
+
};
|
|
99
|
+
switch (A.key) {
|
|
100
|
+
case "Home":
|
|
101
|
+
u = _;
|
|
102
|
+
break;
|
|
103
|
+
case "End":
|
|
104
|
+
u = w;
|
|
105
|
+
break;
|
|
106
|
+
case "ArrowRight":
|
|
107
|
+
r === "horizontal" && (f ? R() : P());
|
|
108
|
+
break;
|
|
109
|
+
case "ArrowDown":
|
|
110
|
+
r === "vertical" && R();
|
|
111
|
+
break;
|
|
112
|
+
case "ArrowLeft":
|
|
113
|
+
r === "horizontal" && (f ? P() : R());
|
|
114
|
+
break;
|
|
115
|
+
case "ArrowUp":
|
|
116
|
+
r === "vertical" && P();
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
const W = u % T;
|
|
120
|
+
(O = I[W].ref.current) == null || O.focus();
|
|
121
|
+
});
|
|
122
|
+
return /* @__PURE__ */ t(
|
|
123
|
+
Ae,
|
|
124
|
+
{
|
|
125
|
+
scope: o,
|
|
126
|
+
disabled: c,
|
|
127
|
+
direction: a,
|
|
128
|
+
orientation: r,
|
|
129
|
+
children: /* @__PURE__ */ t(E.Slot, { scope: o, children: /* @__PURE__ */ t(
|
|
130
|
+
H.div,
|
|
131
|
+
{
|
|
132
|
+
...s,
|
|
133
|
+
"data-orientation": r,
|
|
134
|
+
ref: p,
|
|
135
|
+
onKeyDown: c ? void 0 : x
|
|
136
|
+
}
|
|
137
|
+
) })
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
), C = "AccordionItem", [ge, D] = b(C), G = l.forwardRef(
|
|
142
|
+
(e, n) => {
|
|
143
|
+
const { __scopeAccordion: o, value: c, ...a } = e, r = h(C, o), s = ue(C, o), i = k(o), p = ae(), m = c && s.value.includes(c) || !1, v = r.disabled || e.disabled;
|
|
144
|
+
return /* @__PURE__ */ t(
|
|
145
|
+
ge,
|
|
146
|
+
{
|
|
147
|
+
scope: o,
|
|
148
|
+
open: m,
|
|
149
|
+
disabled: v,
|
|
150
|
+
triggerId: p,
|
|
151
|
+
children: /* @__PURE__ */ t(
|
|
152
|
+
te,
|
|
153
|
+
{
|
|
154
|
+
"data-orientation": r.orientation,
|
|
155
|
+
"data-state": J(m),
|
|
156
|
+
...i,
|
|
157
|
+
...a,
|
|
158
|
+
ref: n,
|
|
159
|
+
disabled: v,
|
|
160
|
+
open: m,
|
|
161
|
+
onOpenChange: (f) => {
|
|
162
|
+
f ? s.onItemOpen(c) : s.onItemClose(c);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
G.displayName = C;
|
|
171
|
+
var U = "AccordionHeader", Y = l.forwardRef(
|
|
172
|
+
(e, n) => {
|
|
173
|
+
const { __scopeAccordion: o, ...c } = e, a = h(d, o), r = D(U, o);
|
|
174
|
+
return /* @__PURE__ */ t(
|
|
175
|
+
H.h3,
|
|
176
|
+
{
|
|
177
|
+
"data-orientation": a.orientation,
|
|
178
|
+
"data-state": J(r.open),
|
|
179
|
+
"data-disabled": r.disabled ? "" : void 0,
|
|
180
|
+
...c,
|
|
181
|
+
ref: n
|
|
182
|
+
}
|
|
183
|
+
);
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
Y.displayName = U;
|
|
187
|
+
var y = "AccordionTrigger", q = l.forwardRef(
|
|
188
|
+
(e, n) => {
|
|
189
|
+
const { __scopeAccordion: o, ...c } = e, a = h(d, o), r = D(y, o), s = fe(y, o), i = k(o);
|
|
190
|
+
return /* @__PURE__ */ t(E.ItemSlot, { scope: o, children: /* @__PURE__ */ t(
|
|
191
|
+
ne,
|
|
192
|
+
{
|
|
193
|
+
"aria-disabled": r.open && !s.collapsible || void 0,
|
|
194
|
+
"data-orientation": a.orientation,
|
|
195
|
+
id: r.triggerId,
|
|
196
|
+
...i,
|
|
197
|
+
...c,
|
|
198
|
+
ref: n
|
|
199
|
+
}
|
|
200
|
+
) });
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
q.displayName = y;
|
|
204
|
+
var B = "AccordionContent", F = l.forwardRef(
|
|
205
|
+
(e, n) => {
|
|
206
|
+
const { __scopeAccordion: o, ...c } = e, a = h(d, o), r = D(B, o), s = k(o);
|
|
207
|
+
return /* @__PURE__ */ t(
|
|
208
|
+
ce,
|
|
209
|
+
{
|
|
210
|
+
role: "region",
|
|
211
|
+
"aria-labelledby": r.triggerId,
|
|
212
|
+
"data-orientation": a.orientation,
|
|
213
|
+
...s,
|
|
214
|
+
...c,
|
|
215
|
+
ref: n,
|
|
216
|
+
style: {
|
|
217
|
+
"--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
|
|
218
|
+
"--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
|
|
219
|
+
...e.style
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
);
|
|
223
|
+
}
|
|
224
|
+
);
|
|
225
|
+
F.displayName = B;
|
|
226
|
+
function J(e) {
|
|
227
|
+
return e ? "open" : "closed";
|
|
228
|
+
}
|
|
229
|
+
var Ce = $, be = G, he = Y, xe = q, Ie = F;
|
|
230
|
+
function He({
|
|
231
|
+
...e
|
|
232
|
+
}) {
|
|
233
|
+
return /* @__PURE__ */ t(Ce, { "data-slot": "accordion", ...e });
|
|
234
|
+
}
|
|
235
|
+
function Ke({
|
|
236
|
+
className: e,
|
|
237
|
+
...n
|
|
238
|
+
}) {
|
|
239
|
+
return /* @__PURE__ */ t(
|
|
240
|
+
be,
|
|
241
|
+
{
|
|
242
|
+
className: S("border-b last:border-b-0", e),
|
|
243
|
+
"data-slot": "accordion-item",
|
|
244
|
+
...n
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
function $e({
|
|
249
|
+
className: e,
|
|
250
|
+
children: n,
|
|
251
|
+
...o
|
|
252
|
+
}) {
|
|
253
|
+
return /* @__PURE__ */ t(he, { className: "flex", children: /* @__PURE__ */ X(
|
|
254
|
+
xe,
|
|
255
|
+
{
|
|
256
|
+
className: S(
|
|
257
|
+
"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
|
258
|
+
e
|
|
259
|
+
),
|
|
260
|
+
"data-slot": "accordion-trigger",
|
|
261
|
+
...o,
|
|
262
|
+
children: [
|
|
263
|
+
n,
|
|
264
|
+
/* @__PURE__ */ t(se, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
) });
|
|
268
|
+
}
|
|
269
|
+
function je({
|
|
270
|
+
className: e,
|
|
271
|
+
children: n,
|
|
272
|
+
...o
|
|
273
|
+
}) {
|
|
274
|
+
return /* @__PURE__ */ t(
|
|
275
|
+
Ie,
|
|
276
|
+
{
|
|
277
|
+
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
278
|
+
"data-slot": "accordion-content",
|
|
279
|
+
...o,
|
|
280
|
+
children: /* @__PURE__ */ t("div", { className: S("pt-0 pb-4", e), children: n })
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
export {
|
|
285
|
+
He as Accordion,
|
|
286
|
+
je as AccordionContent,
|
|
287
|
+
Ke as AccordionItem,
|
|
288
|
+
$e as AccordionTrigger
|
|
289
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import type * as React from 'react';
|
|
3
|
+
declare const alertVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
+
declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Alert, AlertTitle, AlertDescription };
|