@nomad-e/bluma-cli 0.15.0 → 0.17.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.
Files changed (63) hide show
  1. package/dist/main.js +362 -439
  2. package/dist/scaffold/.eslintrc.json +3 -0
  3. package/dist/scaffold/app/globals.css +46 -0
  4. package/dist/scaffold/app/layout.tsx +19 -0
  5. package/dist/scaffold/app/page.tsx +124 -0
  6. package/dist/scaffold/components/ui/README.md +12 -0
  7. package/dist/scaffold/components/ui/accordion.jsx +42 -0
  8. package/dist/scaffold/components/ui/alert-dialog.jsx +80 -0
  9. package/dist/scaffold/components/ui/alert.jsx +33 -0
  10. package/dist/scaffold/components/ui/aspect-ratio.jsx +5 -0
  11. package/dist/scaffold/components/ui/avatar.jsx +28 -0
  12. package/dist/scaffold/components/ui/badge.jsx +24 -0
  13. package/dist/scaffold/components/ui/breadcrumb.jsx +72 -0
  14. package/dist/scaffold/components/ui/button.jsx +40 -0
  15. package/dist/scaffold/components/ui/calendar.jsx +56 -0
  16. package/dist/scaffold/components/ui/card.jsx +38 -0
  17. package/dist/scaffold/components/ui/carousel.jsx +168 -0
  18. package/dist/scaffold/components/ui/chart.jsx +76 -0
  19. package/dist/scaffold/components/ui/checkbox.jsx +22 -0
  20. package/dist/scaffold/components/ui/collapsible.jsx +7 -0
  21. package/dist/scaffold/components/ui/command.jsx +100 -0
  22. package/dist/scaffold/components/ui/context-menu.jsx +137 -0
  23. package/dist/scaffold/components/ui/dialog.jsx +72 -0
  24. package/dist/scaffold/components/ui/drawer.jsx +68 -0
  25. package/dist/scaffold/components/ui/dropdown-menu.jsx +143 -0
  26. package/dist/scaffold/components/ui/form.jsx +88 -0
  27. package/dist/scaffold/components/ui/hover-card.jsx +22 -0
  28. package/dist/scaffold/components/ui/input-otp.jsx +49 -0
  29. package/dist/scaffold/components/ui/input.jsx +19 -0
  30. package/dist/scaffold/components/ui/label.jsx +15 -0
  31. package/dist/scaffold/components/ui/menubar.jsx +161 -0
  32. package/dist/scaffold/components/ui/navigation-menu.jsx +95 -0
  33. package/dist/scaffold/components/ui/pagination.jsx +77 -0
  34. package/dist/scaffold/components/ui/popover.jsx +25 -0
  35. package/dist/scaffold/components/ui/progress.jsx +19 -0
  36. package/dist/scaffold/components/ui/radio-group.jsx +29 -0
  37. package/dist/scaffold/components/ui/resizable.jsx +27 -0
  38. package/dist/scaffold/components/ui/scroll-area.jsx +31 -0
  39. package/dist/scaffold/components/ui/select.jsx +117 -0
  40. package/dist/scaffold/components/ui/separator.jsx +22 -0
  41. package/dist/scaffold/components/ui/sheet.jsx +81 -0
  42. package/dist/scaffold/components/ui/skeleton.jsx +7 -0
  43. package/dist/scaffold/components/ui/slider.jsx +19 -0
  44. package/dist/scaffold/components/ui/sonner.jsx +22 -0
  45. package/dist/scaffold/components/ui/switch.jsx +23 -0
  46. package/dist/scaffold/components/ui/table.jsx +61 -0
  47. package/dist/scaffold/components/ui/tabs.jsx +43 -0
  48. package/dist/scaffold/components/ui/textarea.jsx +18 -0
  49. package/dist/scaffold/components/ui/toast.jsx +85 -0
  50. package/dist/scaffold/components/ui/toaster.jsx +33 -0
  51. package/dist/scaffold/components/ui/toggle-group.jsx +41 -0
  52. package/dist/scaffold/components/ui/toggle.jsx +30 -0
  53. package/dist/scaffold/components/ui/tooltip.jsx +22 -0
  54. package/dist/scaffold/hooks/use-toast.ts +101 -0
  55. package/dist/scaffold/lib/utils.ts +6 -0
  56. package/dist/scaffold/next.config.js +5 -0
  57. package/dist/scaffold/next.config.mjs +15 -0
  58. package/dist/scaffold/next.config.ts +19 -0
  59. package/dist/scaffold/package.json +70 -0
  60. package/dist/scaffold/postcss.config.js +6 -0
  61. package/dist/scaffold/tailwind.config.ts +57 -0
  62. package/dist/scaffold/tsconfig.json +20 -0
  63. package/package.json +1 -1
@@ -0,0 +1,3 @@
1
+ {
2
+ "extends": "next/core-web-vitals"
3
+ }
@@ -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,5 @@
1
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
2
+
3
+ const AspectRatio = AspectRatioPrimitive.Root;
4
+
5
+ export { AspectRatio };
@@ -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 };