@nomad-e/bluma-cli 0.15.0 → 0.16.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/dist/main.js +305 -400
- package/dist/scaffold/.eslintrc.json +3 -0
- package/dist/scaffold/app/globals.css +46 -0
- package/dist/scaffold/app/layout.tsx +19 -0
- package/dist/scaffold/app/page.tsx +124 -0
- package/dist/scaffold/components/ui/README.md +12 -0
- package/dist/scaffold/components/ui/accordion.jsx +42 -0
- package/dist/scaffold/components/ui/alert-dialog.jsx +80 -0
- package/dist/scaffold/components/ui/alert.jsx +33 -0
- package/dist/scaffold/components/ui/aspect-ratio.jsx +5 -0
- package/dist/scaffold/components/ui/avatar.jsx +28 -0
- package/dist/scaffold/components/ui/badge.jsx +24 -0
- package/dist/scaffold/components/ui/breadcrumb.jsx +72 -0
- package/dist/scaffold/components/ui/button.jsx +40 -0
- package/dist/scaffold/components/ui/calendar.jsx +56 -0
- package/dist/scaffold/components/ui/card.jsx +38 -0
- package/dist/scaffold/components/ui/carousel.jsx +168 -0
- package/dist/scaffold/components/ui/chart.jsx +76 -0
- package/dist/scaffold/components/ui/checkbox.jsx +22 -0
- package/dist/scaffold/components/ui/collapsible.jsx +7 -0
- package/dist/scaffold/components/ui/command.jsx +100 -0
- package/dist/scaffold/components/ui/context-menu.jsx +137 -0
- package/dist/scaffold/components/ui/dialog.jsx +72 -0
- package/dist/scaffold/components/ui/drawer.jsx +68 -0
- package/dist/scaffold/components/ui/dropdown-menu.jsx +143 -0
- package/dist/scaffold/components/ui/form.jsx +88 -0
- package/dist/scaffold/components/ui/hover-card.jsx +22 -0
- package/dist/scaffold/components/ui/input-otp.jsx +49 -0
- package/dist/scaffold/components/ui/input.jsx +19 -0
- package/dist/scaffold/components/ui/label.jsx +15 -0
- package/dist/scaffold/components/ui/menubar.jsx +161 -0
- package/dist/scaffold/components/ui/navigation-menu.jsx +95 -0
- package/dist/scaffold/components/ui/pagination.jsx +77 -0
- package/dist/scaffold/components/ui/popover.jsx +25 -0
- package/dist/scaffold/components/ui/progress.jsx +19 -0
- package/dist/scaffold/components/ui/radio-group.jsx +29 -0
- package/dist/scaffold/components/ui/resizable.jsx +27 -0
- package/dist/scaffold/components/ui/scroll-area.jsx +31 -0
- package/dist/scaffold/components/ui/select.jsx +117 -0
- package/dist/scaffold/components/ui/separator.jsx +22 -0
- package/dist/scaffold/components/ui/sheet.jsx +81 -0
- package/dist/scaffold/components/ui/skeleton.jsx +7 -0
- package/dist/scaffold/components/ui/slider.jsx +19 -0
- package/dist/scaffold/components/ui/sonner.jsx +22 -0
- package/dist/scaffold/components/ui/switch.jsx +23 -0
- package/dist/scaffold/components/ui/table.jsx +61 -0
- package/dist/scaffold/components/ui/tabs.jsx +43 -0
- package/dist/scaffold/components/ui/textarea.jsx +18 -0
- package/dist/scaffold/components/ui/toast.jsx +85 -0
- package/dist/scaffold/components/ui/toaster.jsx +33 -0
- package/dist/scaffold/components/ui/toggle-group.jsx +41 -0
- package/dist/scaffold/components/ui/toggle.jsx +30 -0
- package/dist/scaffold/components/ui/tooltip.jsx +22 -0
- package/dist/scaffold/hooks/use-toast.ts +101 -0
- package/dist/scaffold/lib/utils.ts +6 -0
- package/dist/scaffold/next.config.js +5 -0
- package/dist/scaffold/next.config.mjs +15 -0
- package/dist/scaffold/next.config.ts +19 -0
- package/dist/scaffold/package.json +70 -0
- package/dist/scaffold/postcss.config.js +6 -0
- package/dist/scaffold/tailwind.config.ts +57 -0
- package/dist/scaffold/tsconfig.json +20 -0
- package/package.json +1 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind components;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--background: 0 0% 0%;
|
|
7
|
+
--foreground: 0 0% 98%;
|
|
8
|
+
--card: 0 0% 4%;
|
|
9
|
+
--card-foreground: 0 0% 98%;
|
|
10
|
+
--popover: 0 0% 4%;
|
|
11
|
+
--popover-foreground: 0 0% 98%;
|
|
12
|
+
--primary: 0 0% 98%;
|
|
13
|
+
--primary-foreground: 0 0% 9%;
|
|
14
|
+
--secondary: 0 0% 12%;
|
|
15
|
+
--secondary-foreground: 0 0% 98%;
|
|
16
|
+
--muted: 0 0% 12%;
|
|
17
|
+
--muted-foreground: 0 0% 64%;
|
|
18
|
+
--accent: 0 0% 12%;
|
|
19
|
+
--accent-foreground: 0 0% 98%;
|
|
20
|
+
--destructive: 0 84% 60%;
|
|
21
|
+
--destructive-foreground: 0 0% 98%;
|
|
22
|
+
--border: 0 0% 18%;
|
|
23
|
+
--input: 0 0% 18%;
|
|
24
|
+
--ring: 0 0% 83%;
|
|
25
|
+
--radius: 0.5rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
* {
|
|
29
|
+
border-color: hsl(var(--border));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
body {
|
|
33
|
+
background-color: hsl(var(--background));
|
|
34
|
+
color: hsl(var(--foreground));
|
|
35
|
+
font-family:
|
|
36
|
+
ui-sans-serif,
|
|
37
|
+
system-ui,
|
|
38
|
+
-apple-system,
|
|
39
|
+
BlinkMacSystemFont,
|
|
40
|
+
'Segoe UI',
|
|
41
|
+
Roboto,
|
|
42
|
+
'Helvetica Neue',
|
|
43
|
+
Arial,
|
|
44
|
+
sans-serif;
|
|
45
|
+
font-feature-settings: 'rlig' 1, 'calt' 1;
|
|
46
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Metadata } from 'next';
|
|
2
|
+
import './globals.css';
|
|
3
|
+
|
|
4
|
+
export const metadata: Metadata = {
|
|
5
|
+
title: '{{NAME}}',
|
|
6
|
+
description: 'FactorAI hosted app',
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default function RootLayout({
|
|
10
|
+
children,
|
|
11
|
+
}: Readonly<{
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}>) {
|
|
14
|
+
return (
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<body className="min-h-screen font-sans antialiased">{children}</body>
|
|
17
|
+
</html>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
// @ts-nocheck — UI components are .jsx without prop types; Next route stays typed via layout.
|
|
2
|
+
import { Badge } from '@/components/ui/badge';
|
|
3
|
+
import { Button } from '@/components/ui/button';
|
|
4
|
+
import {
|
|
5
|
+
Card,
|
|
6
|
+
CardContent,
|
|
7
|
+
CardDescription,
|
|
8
|
+
CardHeader,
|
|
9
|
+
CardTitle,
|
|
10
|
+
} from '@/components/ui/card';
|
|
11
|
+
|
|
12
|
+
const features = [
|
|
13
|
+
{
|
|
14
|
+
title: 'Ship fast',
|
|
15
|
+
description:
|
|
16
|
+
'App Router, standalone output, and a full UI kit — ready for FactorAI deploy.',
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: 'Polished by default',
|
|
20
|
+
description:
|
|
21
|
+
'Dark canvas, clear type hierarchy, and shadcn components you can compose immediately.',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
title: 'Edit & redeploy',
|
|
25
|
+
description:
|
|
26
|
+
'Customize this page, then push changes with factorai.sh.apply_app_changes.',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export default function Home() {
|
|
31
|
+
return (
|
|
32
|
+
<div className="relative min-h-screen overflow-hidden bg-background text-foreground">
|
|
33
|
+
<div
|
|
34
|
+
className="pointer-events-none absolute inset-x-0 top-0 h-[520px] bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,hsl(0_0%_100%/0.08),transparent_70%)]"
|
|
35
|
+
aria-hidden
|
|
36
|
+
/>
|
|
37
|
+
<div
|
|
38
|
+
className="pointer-events-none absolute left-1/2 top-32 h-64 w-[min(90vw,42rem)] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,hsl(217_91%_60%/0.12),transparent_65%)] blur-3xl"
|
|
39
|
+
aria-hidden
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
<header className="relative z-10 border-b border-border/40 bg-background/60 backdrop-blur-md">
|
|
43
|
+
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 md:px-6">
|
|
44
|
+
<span className="text-sm font-medium tracking-tight">{{NAME}}</span>
|
|
45
|
+
<nav className="flex items-center gap-2">
|
|
46
|
+
<Button variant="ghost" size="sm" className="text-muted-foreground">
|
|
47
|
+
Docs
|
|
48
|
+
</Button>
|
|
49
|
+
<Button
|
|
50
|
+
variant="outline"
|
|
51
|
+
size="sm"
|
|
52
|
+
className="rounded-full border-border/80 bg-transparent"
|
|
53
|
+
>
|
|
54
|
+
GitHub
|
|
55
|
+
</Button>
|
|
56
|
+
</nav>
|
|
57
|
+
</div>
|
|
58
|
+
</header>
|
|
59
|
+
|
|
60
|
+
<main className="relative z-10">
|
|
61
|
+
<section className="mx-auto flex max-w-6xl flex-col items-center px-4 pb-20 pt-24 text-center md:px-6 md:pt-32">
|
|
62
|
+
<Badge
|
|
63
|
+
variant="outline"
|
|
64
|
+
className="mb-6 rounded-full border-border/60 px-3 py-1 font-mono text-[11px] uppercase tracking-widest text-muted-foreground"
|
|
65
|
+
>
|
|
66
|
+
Power by FactorAI
|
|
67
|
+
</Badge>
|
|
68
|
+
|
|
69
|
+
<h1 className="max-w-3xl text-4xl font-medium tracking-tight md:text-6xl md:leading-[1.08]">
|
|
70
|
+
{{NAME}}
|
|
71
|
+
</h1>
|
|
72
|
+
<p className="mt-5 max-w-xl text-lg leading-relaxed text-muted-foreground md:text-xl">
|
|
73
|
+
A minimal command-center landing — replace copy and sections as you build your product.
|
|
74
|
+
</p>
|
|
75
|
+
|
|
76
|
+
<div className="mt-10 flex flex-wrap items-center justify-center gap-3">
|
|
77
|
+
<Button size="lg" className="h-11 rounded-full px-8">
|
|
78
|
+
Get started
|
|
79
|
+
</Button>
|
|
80
|
+
<Button
|
|
81
|
+
variant="outline"
|
|
82
|
+
size="lg"
|
|
83
|
+
className="h-11 rounded-full border-border/80 bg-transparent px-8 hover:bg-secondary/50"
|
|
84
|
+
>
|
|
85
|
+
View components
|
|
86
|
+
</Button>
|
|
87
|
+
</div>
|
|
88
|
+
</section>
|
|
89
|
+
|
|
90
|
+
<section className="mx-auto max-w-6xl px-4 pb-24 md:px-6">
|
|
91
|
+
<div className="grid gap-4 md:grid-cols-3 md:gap-6">
|
|
92
|
+
{features.map((feature) => (
|
|
93
|
+
<Card
|
|
94
|
+
key={feature.title}
|
|
95
|
+
className="border-border/60 bg-card/80 shadow-none transition-colors hover:border-border"
|
|
96
|
+
>
|
|
97
|
+
<CardHeader className="space-y-2">
|
|
98
|
+
<CardTitle className="text-lg font-medium tracking-tight">
|
|
99
|
+
{feature.title}
|
|
100
|
+
</CardTitle>
|
|
101
|
+
<CardDescription className="text-base leading-relaxed">
|
|
102
|
+
{feature.description}
|
|
103
|
+
</CardDescription>
|
|
104
|
+
</CardHeader>
|
|
105
|
+
<CardContent className="pt-0">
|
|
106
|
+
<div className="h-px w-12 bg-border" />
|
|
107
|
+
</CardContent>
|
|
108
|
+
</Card>
|
|
109
|
+
))}
|
|
110
|
+
</div>
|
|
111
|
+
</section>
|
|
112
|
+
</main>
|
|
113
|
+
|
|
114
|
+
<footer className="relative z-10 border-t border-border/40 py-8">
|
|
115
|
+
<p className="text-center text-sm text-muted-foreground">
|
|
116
|
+
Power by FactorAI · edit{' '}
|
|
117
|
+
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground/80">
|
|
118
|
+
app/page.tsx
|
|
119
|
+
</code>
|
|
120
|
+
</p>
|
|
121
|
+
</footer>
|
|
122
|
+
</div>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# FactorAI UI kit
|
|
2
|
+
|
|
3
|
+
Scaffold includes the full shadcn/ui set used on factorai.sh (47 components).
|
|
4
|
+
|
|
5
|
+
Import examples:
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Button } from '@/components/ui/button';
|
|
9
|
+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Edit `app/page.tsx` to build your app; the default home is a polished dark landing (hero + feature cards).
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
3
|
+
import { ChevronDown } from 'lucide-react';
|
|
4
|
+
import { cn } from '@/lib/utils';
|
|
5
|
+
|
|
6
|
+
const Accordion = AccordionPrimitive.Root;
|
|
7
|
+
|
|
8
|
+
const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
|
|
9
|
+
<AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
|
|
10
|
+
));
|
|
11
|
+
AccordionItem.displayName = 'AccordionItem';
|
|
12
|
+
|
|
13
|
+
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
14
|
+
<AccordionPrimitive.Header className="flex">
|
|
15
|
+
<AccordionPrimitive.Trigger
|
|
16
|
+
ref={ref}
|
|
17
|
+
className={cn(
|
|
18
|
+
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
{children}
|
|
24
|
+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
|
|
25
|
+
</AccordionPrimitive.Trigger>
|
|
26
|
+
</AccordionPrimitive.Header>
|
|
27
|
+
));
|
|
28
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
29
|
+
|
|
30
|
+
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
31
|
+
<AccordionPrimitive.Content
|
|
32
|
+
ref={ref}
|
|
33
|
+
className="overflow-hidden text-sm data-[state=closed]:max-h-0 data-[state=open]:max-h-[min(80vh,1000px)] transition-all duration-200"
|
|
34
|
+
{...props}
|
|
35
|
+
>
|
|
36
|
+
<div className={cn('pb-4 pt-0', className)}>{children}</div>
|
|
37
|
+
</AccordionPrimitive.Content>
|
|
38
|
+
));
|
|
39
|
+
|
|
40
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
41
|
+
|
|
42
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
3
|
+
import { cn } from '@/lib/utils';
|
|
4
|
+
import { buttonVariants } from '@/components/ui/button';
|
|
5
|
+
|
|
6
|
+
const AlertDialog = AlertDialogPrimitive.Root;
|
|
7
|
+
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
8
|
+
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
9
|
+
|
|
10
|
+
const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
|
|
11
|
+
<AlertDialogPrimitive.Overlay
|
|
12
|
+
className={cn('fixed inset-0 z-50 bg-black/80', className)}
|
|
13
|
+
{...props}
|
|
14
|
+
ref={ref}
|
|
15
|
+
/>
|
|
16
|
+
));
|
|
17
|
+
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
18
|
+
|
|
19
|
+
const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
|
|
20
|
+
<AlertDialogPortal>
|
|
21
|
+
<AlertDialogOverlay />
|
|
22
|
+
<AlertDialogPrimitive.Content
|
|
23
|
+
ref={ref}
|
|
24
|
+
className={cn(
|
|
25
|
+
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
|
|
26
|
+
className
|
|
27
|
+
)}
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</AlertDialogPortal>
|
|
31
|
+
));
|
|
32
|
+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
|
33
|
+
|
|
34
|
+
const AlertDialogHeader = ({ className, ...props }) => (
|
|
35
|
+
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
|
|
36
|
+
);
|
|
37
|
+
AlertDialogHeader.displayName = 'AlertDialogHeader';
|
|
38
|
+
|
|
39
|
+
const AlertDialogFooter = ({ className, ...props }) => (
|
|
40
|
+
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
|
|
41
|
+
);
|
|
42
|
+
AlertDialogFooter.displayName = 'AlertDialogFooter';
|
|
43
|
+
|
|
44
|
+
const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
|
|
45
|
+
<AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
|
|
46
|
+
));
|
|
47
|
+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
48
|
+
|
|
49
|
+
const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
|
|
50
|
+
<AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
|
51
|
+
));
|
|
52
|
+
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
53
|
+
|
|
54
|
+
const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
|
|
55
|
+
<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
|
|
56
|
+
));
|
|
57
|
+
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
58
|
+
|
|
59
|
+
const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
|
|
60
|
+
<AlertDialogPrimitive.Cancel
|
|
61
|
+
ref={ref}
|
|
62
|
+
className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
));
|
|
66
|
+
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
67
|
+
|
|
68
|
+
export {
|
|
69
|
+
AlertDialog,
|
|
70
|
+
AlertDialogPortal,
|
|
71
|
+
AlertDialogOverlay,
|
|
72
|
+
AlertDialogTrigger,
|
|
73
|
+
AlertDialogContent,
|
|
74
|
+
AlertDialogHeader,
|
|
75
|
+
AlertDialogFooter,
|
|
76
|
+
AlertDialogTitle,
|
|
77
|
+
AlertDialogDescription,
|
|
78
|
+
AlertDialogAction,
|
|
79
|
+
AlertDialogCancel,
|
|
80
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '@/lib/utils';
|
|
4
|
+
|
|
5
|
+
const alertVariants = cva(
|
|
6
|
+
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
|
7
|
+
{
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: 'bg-background text-foreground',
|
|
11
|
+
destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: { variant: 'default' },
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
|
|
19
|
+
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
|
|
20
|
+
));
|
|
21
|
+
Alert.displayName = 'Alert';
|
|
22
|
+
|
|
23
|
+
const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
|
|
24
|
+
<h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
|
|
25
|
+
));
|
|
26
|
+
AlertTitle.displayName = 'AlertTitle';
|
|
27
|
+
|
|
28
|
+
const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
|
|
29
|
+
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
|
|
30
|
+
));
|
|
31
|
+
AlertDescription.displayName = 'AlertDescription';
|
|
32
|
+
|
|
33
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
+
import { cn } from '@/lib/utils';
|
|
4
|
+
|
|
5
|
+
const Avatar = React.forwardRef(({ className, ...props }, ref) => (
|
|
6
|
+
<AvatarPrimitive.Root
|
|
7
|
+
ref={ref}
|
|
8
|
+
className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
|
|
9
|
+
{...props}
|
|
10
|
+
/>
|
|
11
|
+
));
|
|
12
|
+
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
13
|
+
|
|
14
|
+
const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
|
|
15
|
+
<AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
|
|
16
|
+
));
|
|
17
|
+
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
18
|
+
|
|
19
|
+
const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
|
|
20
|
+
<AvatarPrimitive.Fallback
|
|
21
|
+
ref={ref}
|
|
22
|
+
className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
));
|
|
26
|
+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
|
27
|
+
|
|
28
|
+
export { Avatar, AvatarImage, AvatarFallback };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '@/lib/utils';
|
|
4
|
+
|
|
5
|
+
const badgeVariants = cva(
|
|
6
|
+
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
|
7
|
+
{
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
|
11
|
+
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
|
12
|
+
destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
|
13
|
+
outline: 'text-foreground',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: { variant: 'default' },
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
function Badge({ className, variant, ...props }) {
|
|
21
|
+
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
+
import { ChevronRight, MoreHorizontal } from 'lucide-react';
|
|
4
|
+
import { cn } from '@/lib/utils';
|
|
5
|
+
|
|
6
|
+
const Breadcrumb = React.forwardRef(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
|
|
7
|
+
Breadcrumb.displayName = 'Breadcrumb';
|
|
8
|
+
|
|
9
|
+
const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
|
|
10
|
+
<ol
|
|
11
|
+
ref={ref}
|
|
12
|
+
className={cn(
|
|
13
|
+
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
|
|
14
|
+
className
|
|
15
|
+
)}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
));
|
|
19
|
+
BreadcrumbList.displayName = 'BreadcrumbList';
|
|
20
|
+
|
|
21
|
+
const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
|
|
22
|
+
<li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
|
|
23
|
+
));
|
|
24
|
+
BreadcrumbItem.displayName = 'BreadcrumbItem';
|
|
25
|
+
|
|
26
|
+
const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
|
|
27
|
+
const Comp = asChild ? Slot : 'a';
|
|
28
|
+
return <Comp ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />;
|
|
29
|
+
});
|
|
30
|
+
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
|
31
|
+
|
|
32
|
+
const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
|
|
33
|
+
<span
|
|
34
|
+
ref={ref}
|
|
35
|
+
role="link"
|
|
36
|
+
aria-disabled="true"
|
|
37
|
+
aria-current="page"
|
|
38
|
+
className={cn('font-normal text-foreground', className)}
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
));
|
|
42
|
+
BreadcrumbPage.displayName = 'BreadcrumbPage';
|
|
43
|
+
|
|
44
|
+
const BreadcrumbSeparator = ({ children, className, ...props }) => (
|
|
45
|
+
<li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
|
|
46
|
+
{children ?? <ChevronRight />}
|
|
47
|
+
</li>
|
|
48
|
+
);
|
|
49
|
+
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
|
|
50
|
+
|
|
51
|
+
const BreadcrumbEllipsis = ({ className, ...props }) => (
|
|
52
|
+
<span
|
|
53
|
+
role="presentation"
|
|
54
|
+
aria-hidden="true"
|
|
55
|
+
className={cn('flex h-9 w-9 items-center justify-center', className)}
|
|
56
|
+
{...props}
|
|
57
|
+
>
|
|
58
|
+
<MoreHorizontal className="h-4 w-4" />
|
|
59
|
+
<span className="sr-only">More</span>
|
|
60
|
+
</span>
|
|
61
|
+
);
|
|
62
|
+
BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
|
|
63
|
+
|
|
64
|
+
export {
|
|
65
|
+
Breadcrumb,
|
|
66
|
+
BreadcrumbList,
|
|
67
|
+
BreadcrumbItem,
|
|
68
|
+
BreadcrumbLink,
|
|
69
|
+
BreadcrumbPage,
|
|
70
|
+
BreadcrumbSeparator,
|
|
71
|
+
BreadcrumbEllipsis,
|
|
72
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from '@/lib/utils';
|
|
5
|
+
|
|
6
|
+
const buttonVariants = cva(
|
|
7
|
+
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
|
12
|
+
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
|
13
|
+
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
|
14
|
+
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
|
15
|
+
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
16
|
+
link: 'text-primary underline-offset-4 hover:underline',
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
default: 'h-10 px-4 py-2',
|
|
20
|
+
sm: 'h-9 rounded-md px-3',
|
|
21
|
+
lg: 'h-11 rounded-md px-8',
|
|
22
|
+
icon: 'h-10 w-10',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
variant: 'default',
|
|
27
|
+
size: 'default',
|
|
28
|
+
},
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
33
|
+
const Comp = asChild ? Slot : 'button';
|
|
34
|
+
return (
|
|
35
|
+
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
|
|
36
|
+
);
|
|
37
|
+
});
|
|
38
|
+
Button.displayName = 'Button';
|
|
39
|
+
|
|
40
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DayPicker } from 'react-day-picker';
|
|
3
|
+
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
4
|
+
import { cn } from '@/lib/utils';
|
|
5
|
+
import { buttonVariants } from '@/components/ui/button';
|
|
6
|
+
|
|
7
|
+
function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
|
|
8
|
+
return (
|
|
9
|
+
<DayPicker
|
|
10
|
+
showOutsideDays={showOutsideDays}
|
|
11
|
+
className={cn('p-3', className)}
|
|
12
|
+
classNames={{
|
|
13
|
+
root: 'w-fit',
|
|
14
|
+
months: 'flex flex-col gap-4 sm:flex-row sm:gap-4',
|
|
15
|
+
month: 'flex flex-col gap-4',
|
|
16
|
+
month_caption: 'relative flex items-center justify-center pt-1',
|
|
17
|
+
caption_label: 'text-sm font-medium',
|
|
18
|
+
nav: 'flex items-center gap-1',
|
|
19
|
+
button_previous: cn(
|
|
20
|
+
buttonVariants({ variant: 'outline' }),
|
|
21
|
+
'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100'
|
|
22
|
+
),
|
|
23
|
+
button_next: cn(
|
|
24
|
+
buttonVariants({ variant: 'outline' }),
|
|
25
|
+
'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100'
|
|
26
|
+
),
|
|
27
|
+
month_grid: 'mt-4 w-full border-collapse',
|
|
28
|
+
weekdays: 'flex',
|
|
29
|
+
weekday: 'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground',
|
|
30
|
+
week: 'mt-2 flex w-full',
|
|
31
|
+
day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
|
|
32
|
+
day_button: cn(buttonVariants({ variant: 'ghost' }), 'h-9 w-9 p-0 font-normal aria-selected:opacity-100'),
|
|
33
|
+
selected:
|
|
34
|
+
'rounded-md bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
|
|
35
|
+
today: 'rounded-md bg-accent text-accent-foreground',
|
|
36
|
+
outside: 'text-muted-foreground opacity-50',
|
|
37
|
+
disabled: 'text-muted-foreground opacity-50',
|
|
38
|
+
range_middle: 'rounded-none aria-selected:bg-accent aria-selected:text-accent-foreground',
|
|
39
|
+
range_start: 'rounded-l-md',
|
|
40
|
+
range_end: 'rounded-r-md',
|
|
41
|
+
hidden: 'invisible',
|
|
42
|
+
...classNames,
|
|
43
|
+
}}
|
|
44
|
+
components={{
|
|
45
|
+
Chevron: ({ className: iconClass, orientation, ...iconProps }) => {
|
|
46
|
+
const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;
|
|
47
|
+
return <Icon className={cn('h-4 w-4', iconClass)} {...iconProps} />;
|
|
48
|
+
},
|
|
49
|
+
}}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
Calendar.displayName = 'Calendar';
|
|
55
|
+
|
|
56
|
+
export { Calendar };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cn } from '@/lib/utils';
|
|
3
|
+
|
|
4
|
+
const Card = React.forwardRef(({ className, ...props }, ref) => (
|
|
5
|
+
<div
|
|
6
|
+
ref={ref}
|
|
7
|
+
className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
|
|
8
|
+
{...props}
|
|
9
|
+
/>
|
|
10
|
+
));
|
|
11
|
+
Card.displayName = 'Card';
|
|
12
|
+
|
|
13
|
+
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
|
|
14
|
+
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
|
15
|
+
));
|
|
16
|
+
CardHeader.displayName = 'CardHeader';
|
|
17
|
+
|
|
18
|
+
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
|
|
19
|
+
<h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
|
|
20
|
+
));
|
|
21
|
+
CardTitle.displayName = 'CardTitle';
|
|
22
|
+
|
|
23
|
+
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
|
|
24
|
+
<p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
|
25
|
+
));
|
|
26
|
+
CardDescription.displayName = 'CardDescription';
|
|
27
|
+
|
|
28
|
+
const CardContent = React.forwardRef(({ className, ...props }, ref) => (
|
|
29
|
+
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
|
30
|
+
));
|
|
31
|
+
CardContent.displayName = 'CardContent';
|
|
32
|
+
|
|
33
|
+
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
|
|
34
|
+
<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
|
|
35
|
+
));
|
|
36
|
+
CardFooter.displayName = 'CardFooter';
|
|
37
|
+
|
|
38
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|