create-next-imagicma 0.1.11 → 0.1.13

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 (96) hide show
  1. package/README.md +0 -2
  2. package/package.json +1 -1
  3. package/template-hono/AGENTS.md +53 -95
  4. package/template-hono/README.md +3 -31
  5. package/template-hono/client/public/imagicma-picker-bridge.js +6 -2
  6. package/template-hono/client/public/imagicma-preview-feedback.js +1 -0
  7. package/template-hono/client/src/lib/imagicma-preview-bridge.ts +1 -1
  8. package/template-hono/client/src/lib/imagicma-preview-picker.ts +130 -28
  9. package/template-hono/vite.config.ts +1 -1
  10. package/template/.env.example +0 -10
  11. package/template/AGENTS.md +0 -225
  12. package/template/README.md +0 -34
  13. package/template/app/_components/DevPreviewShield.tsx +0 -638
  14. package/template/app/api/greeting/route.ts +0 -27
  15. package/template/app/error.tsx +0 -93
  16. package/template/app/favicon.ico +0 -0
  17. package/template/app/globals.css +0 -767
  18. package/template/app/hello/_components/HelloClient.tsx +0 -94
  19. package/template/app/hello/page.tsx +0 -23
  20. package/template/app/layout.tsx +0 -32
  21. package/template/app/page.tsx +0 -27
  22. package/template/app/providers.tsx +0 -25
  23. package/template/components/ui/accordion.tsx +0 -58
  24. package/template/components/ui/alert-dialog.tsx +0 -141
  25. package/template/components/ui/alert.tsx +0 -61
  26. package/template/components/ui/aspect-ratio.tsx +0 -7
  27. package/template/components/ui/avatar.tsx +0 -51
  28. package/template/components/ui/badge.tsx +0 -40
  29. package/template/components/ui/breadcrumb.tsx +0 -117
  30. package/template/components/ui/button.tsx +0 -64
  31. package/template/components/ui/calendar.tsx +0 -72
  32. package/template/components/ui/card.tsx +0 -87
  33. package/template/components/ui/carousel.tsx +0 -262
  34. package/template/components/ui/chart.tsx +0 -365
  35. package/template/components/ui/checkbox.tsx +0 -30
  36. package/template/components/ui/collapsible.tsx +0 -11
  37. package/template/components/ui/command.tsx +0 -153
  38. package/template/components/ui/context-menu.tsx +0 -200
  39. package/template/components/ui/dialog.tsx +0 -122
  40. package/template/components/ui/drawer.tsx +0 -118
  41. package/template/components/ui/dropdown-menu.tsx +0 -200
  42. package/template/components/ui/form.tsx +0 -178
  43. package/template/components/ui/hover-card.tsx +0 -29
  44. package/template/components/ui/input-otp.tsx +0 -71
  45. package/template/components/ui/input.tsx +0 -25
  46. package/template/components/ui/label.tsx +0 -26
  47. package/template/components/ui/menubar.tsx +0 -256
  48. package/template/components/ui/navigation-menu.tsx +0 -130
  49. package/template/components/ui/pagination.tsx +0 -119
  50. package/template/components/ui/popover.tsx +0 -31
  51. package/template/components/ui/progress.tsx +0 -28
  52. package/template/components/ui/radio-group.tsx +0 -44
  53. package/template/components/ui/resizable.tsx +0 -45
  54. package/template/components/ui/scroll-area.tsx +0 -48
  55. package/template/components/ui/select.tsx +0 -160
  56. package/template/components/ui/separator.tsx +0 -31
  57. package/template/components/ui/sheet.tsx +0 -140
  58. package/template/components/ui/sidebar.tsx +0 -732
  59. package/template/components/ui/skeleton.tsx +0 -17
  60. package/template/components/ui/slider.tsx +0 -28
  61. package/template/components/ui/switch.tsx +0 -29
  62. package/template/components/ui/table.tsx +0 -119
  63. package/template/components/ui/tabs.tsx +0 -55
  64. package/template/components/ui/textarea.tsx +0 -24
  65. package/template/components/ui/toast.tsx +0 -129
  66. package/template/components/ui/toaster.tsx +0 -35
  67. package/template/components/ui/toggle-group.tsx +0 -61
  68. package/template/components/ui/toggle.tsx +0 -45
  69. package/template/components/ui/tooltip.tsx +0 -30
  70. package/template/drizzle.config.ts +0 -50
  71. package/template/eslint.config.mjs +0 -18
  72. package/template/gitignore +0 -46
  73. package/template/hooks/use-greeting.ts +0 -15
  74. package/template/hooks/use-mobile.ts +0 -21
  75. package/template/hooks/use-toast.ts +0 -194
  76. package/template/lib/queryClient.ts +0 -59
  77. package/template/lib/theme/default-theme.ts +0 -11
  78. package/template/lib/utils.ts +0 -6
  79. package/template/next.config.ts +0 -8
  80. package/template/package.json +0 -76
  81. package/template/pnpm-lock.yaml +0 -6937
  82. package/template/postcss.config.mjs +0 -7
  83. package/template/process-compose.yaml +0 -13
  84. package/template/public/file.svg +0 -1
  85. package/template/public/globe.svg +0 -1
  86. package/template/public/imagicma-picker-bridge.js +0 -374
  87. package/template/public/next.svg +0 -1
  88. package/template/public/vercel.svg +0 -1
  89. package/template/public/window.svg +0 -1
  90. package/template/server/db.ts +0 -24
  91. package/template/server/storage.ts +0 -41
  92. package/template/shared/routes.ts +0 -13
  93. package/template/shared/schema.ts +0 -17
  94. package/template/tailwind.config.mjs +0 -96
  95. package/template/tsconfig.json +0 -35
  96. package/template/types/pg.d.ts +0 -19
package/template/app/hello/_components/HelloClient.tsx DELETED
@@ -1,94 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
-
5
- import { useGreeting } from "@/hooks/use-greeting";
6
- import { toast } from "@/hooks/use-toast";
7
- import { Badge } from "@/components/ui/badge";
8
- import { Button } from "@/components/ui/button";
9
- import {
10
- Card,
11
- CardContent,
12
- CardDescription,
13
- CardHeader,
14
- CardTitle,
15
- } from "@/components/ui/card";
16
-
17
- export default function HelloClient() {
18
- const { data, isLoading, error, refetch, isFetching } = useGreeting();
19
-
20
- const status = isLoading
21
- ? "loading"
22
- : error
23
- ? "error"
24
- : "ready";
25
-
26
- return (
27
- <Card>
28
- <CardHeader>
29
- <div className="flex items-center justify-between gap-4">
30
- <div className="space-y-1">
31
- <CardTitle>GET /api/greeting</CardTitle>
32
- <CardDescription>
33
- 响应会被 Zod 校验，并展示到 UI 中。
34
- </CardDescription>
35
- </div>
36
- <Badge
37
- variant={status === "error" ? "destructive" : "secondary"}
38
- >
39
- {status}
40
- </Badge>
41
- </div>
42
- </CardHeader>
43
- <CardContent className="space-y-4">
44
- <div className="rounded-lg border bg-card p-4">
45
- {isLoading ? (
46
- <p className="text-sm text-muted-foreground">加载中…</p>
47
- ) : error ? (
48
- <p className="text-sm text-destructive">
49
- {error instanceof Error ? error.message : "请求失败"}
50
- </p>
51
- ) : (
52
- <p className="text-lg leading-7">“{data?.message}”</p>
53
- )}
54
- </div>
55
-
56
- <div className="flex flex-wrap gap-2">
57
- <Button
58
- type="button"
59
- onClick={() => refetch()}
60
- disabled={isFetching}
61
- >
62
- {isFetching ? "刷新中…" : "刷新"}
63
- </Button>
64
- <Button
65
- type="button"
66
- variant="outline"
67
- onClick={() =>
68
- toast({
69
- title: "Toast 正常工作",
70
- description: "如果你能看到我，说明 shadcn/toast 已接入。",
71
- })
72
- }
73
- >
74
- 触发 Toast
75
- </Button>
76
- </div>
77
-
78
- <EnvHint />
79
- </CardContent>
80
- </Card>
81
- );
82
- }
83
-
84
- function EnvHint() {
85
- return (
86
- <div className="text-sm text-muted-foreground">
87
- <p>
88
- 若 API 报错请检查：是否已在 <code>.env.local</code> 设置{" "}
89
- <code>DATABASE_URL</code>，并执行 <code>npm run db:push</code>。
90
- </p>
91
- </div>
92
- );
93
- }
94
-
package/template/app/hello/page.tsx DELETED
@@ -1,23 +0,0 @@
1
- import HelloClient from "./_components/HelloClient";
2
-
3
- export default function HelloPage() {
4
- return (
5
- <div className="min-h-screen bg-background text-foreground">
6
- <div className="mx-auto max-w-3xl px-6 py-12">
7
- <div className="space-y-2">
8
- <h1 className="text-3xl font-semibold tracking-tight">
9
- Replit 模板精华迁移验证
10
- </h1>
11
- <p className="text-sm text-muted-foreground">
12
- 该页面用于验证：shadcn/ui、React Query、Next Route Handler、Drizzle/Postgres。
13
- </p>
14
- </div>
15
-
16
- <div className="mt-8">
17
- <HelloClient />
18
- </div>
19
- </div>
20
- </div>
21
- );
22
- }
23
-
package/template/app/layout.tsx DELETED
@@ -1,32 +0,0 @@
1
- import type { Metadata } from "next";
2
- import Script from "next/script";
3
- import "./globals.css";
4
- // import { DevPreviewShield } from "./_components/DevPreviewShield";
5
- import { Providers } from "./providers";
6
- import { DEFAULT_THEME_STYLE } from "@/lib/theme/default-theme";
7
-
8
- export const metadata: Metadata = {
9
- title: "Create Next App",
10
- description: "Generated by create next app",
11
- };
12
-
13
- export default function RootLayout({
14
- children,
15
- }: Readonly<{
16
- children: React.ReactNode;
17
- }>) {
18
- return (
19
- <html
20
- lang="zh-CN"
21
- suppressHydrationWarning
22
- data-theme-style={DEFAULT_THEME_STYLE}
23
- >
24
- <body className="antialiased">
25
- <Script src="/imagicma-picker-bridge.js" strategy="beforeInteractive" />
26
- <Providers>
27
- {children}
28
- </Providers>
29
- </body>
30
- </html>
31
- );
32
- }
package/template/app/page.tsx DELETED
@@ -1,27 +0,0 @@
1
- export default function Home() {
2
- return (
3
- <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-sky-600 text-white">
4
- <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
5
- <div className="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_40%,rgba(255,255,255,0.20),transparent_60%)]" />
6
- </div>
7
-
8
- <div aria-hidden className="aurora-frame">
9
- <span className="aurora-edge top" />
10
- <span className="aurora-edge right" />
11
- <span className="aurora-edge bottom" />
12
- <span className="aurora-edge left" />
13
- <span className="aurora-edge top is-glow" />
14
- <span className="aurora-edge right is-glow" />
15
- <span className="aurora-edge bottom is-glow" />
16
- <span className="aurora-edge left is-glow" />
17
- </div>
18
-
19
- <main className="relative z-[1] flex min-h-screen items-center justify-center">
20
- <div role="status" aria-live="polite">
21
- <span className="sr-only">加载中</span>
22
- <div className="h-10 w-10 rounded-full border-[3px] border-white/25 border-t-white/90 motion-reduce:animate-none animate-spin" />
23
- </div>
24
- </main>
25
- </div>
26
- );
27
- }
package/template/app/providers.tsx DELETED
@@ -1,25 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import { QueryClientProvider } from "@tanstack/react-query";
5
- import { ThemeProvider } from "next-themes";
6
-
7
- import { makeQueryClient } from "@/lib/queryClient";
8
- import { Toaster } from "@/components/ui/toaster";
9
- import { TooltipProvider } from "@/components/ui/tooltip";
10
-
11
- export function Providers({ children }: { children: React.ReactNode }) {
12
- const [queryClient] = React.useState(() => makeQueryClient());
13
-
14
- return (
15
- <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
16
- <QueryClientProvider client={queryClient}>
17
- <TooltipProvider>
18
- <Toaster />
19
- {children}
20
- </TooltipProvider>
21
- </QueryClientProvider>
22
- </ThemeProvider>
23
- );
24
- }
25
-
package/template/components/ui/accordion.tsx DELETED
@@ -1,58 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react"
4
- import * as AccordionPrimitive from "@radix-ui/react-accordion"
5
- import { ChevronDown } from "lucide-react"
6
-
7
- import { cn } from "@/lib/utils"
8
-
9
- const Accordion = AccordionPrimitive.Root
10
-
11
- const AccordionItem = React.forwardRef<
12
- React.ElementRef<typeof AccordionPrimitive.Item>,
13
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14
- >(({ className, ...props }, ref) => (
15
- <AccordionPrimitive.Item
16
- ref={ref}
17
- className={cn("border-b", className)}
18
- {...props}
19
- />
20
- ))
21
- AccordionItem.displayName = "AccordionItem"
22
-
23
- const AccordionTrigger = React.forwardRef<
24
- React.ElementRef<typeof AccordionPrimitive.Trigger>,
25
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26
- >(({ className, children, ...props }, ref) => (
27
- <AccordionPrimitive.Header className="flex">
28
- <AccordionPrimitive.Trigger
29
- ref={ref}
30
- className={cn(
31
- "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32
- className
33
- )}
34
- {...props}
35
- >
36
- {children}
37
- <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38
- </AccordionPrimitive.Trigger>
39
- </AccordionPrimitive.Header>
40
- ))
41
- AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42
-
43
- const AccordionContent = React.forwardRef<
44
- React.ElementRef<typeof AccordionPrimitive.Content>,
45
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46
- >(({ className, children, ...props }, ref) => (
47
- <AccordionPrimitive.Content
48
- ref={ref}
49
- className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50
- {...props}
51
- >
52
- <div className={cn("pb-4 pt-0", className)}>{children}</div>
53
- </AccordionPrimitive.Content>
54
- ))
55
-
56
- AccordionContent.displayName = AccordionPrimitive.Content.displayName
57
-
58
- export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
package/template/components/ui/alert-dialog.tsx DELETED
@@ -1,141 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react"
4
- import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5
-
6
- import { cn } from "@/lib/utils"
7
- import { buttonVariants } from "@/components/ui/button"
8
-
9
- const AlertDialog = AlertDialogPrimitive.Root
10
-
11
- const AlertDialogTrigger = AlertDialogPrimitive.Trigger
12
-
13
- const AlertDialogPortal = AlertDialogPrimitive.Portal
14
-
15
- const AlertDialogOverlay = React.forwardRef<
16
- React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
17
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
18
- >(({ className, ...props }, ref) => (
19
- <AlertDialogPrimitive.Overlay
20
- className={cn(
21
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22
- className
23
- )}
24
- {...props}
25
- ref={ref}
26
- />
27
- ))
28
- AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
29
-
30
- const AlertDialogContent = React.forwardRef<
31
- React.ElementRef<typeof AlertDialogPrimitive.Content>,
32
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
33
- >(({ className, ...props }, ref) => (
34
- <AlertDialogPortal>
35
- <AlertDialogOverlay />
36
- <AlertDialogPrimitive.Content
37
- ref={ref}
38
- className={cn(
39
- "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 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40
- className
41
- )}
42
- {...props}
43
- />
44
- </AlertDialogPortal>
45
- ))
46
- AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47
-
48
- const AlertDialogHeader = ({
49
- className,
50
- ...props
51
- }: React.HTMLAttributes<HTMLDivElement>) => (
52
- <div
53
- className={cn(
54
- "flex flex-col space-y-2 text-center sm:text-left",
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- AlertDialogHeader.displayName = "AlertDialogHeader"
61
-
62
- const AlertDialogFooter = ({
63
- className,
64
- ...props
65
- }: React.HTMLAttributes<HTMLDivElement>) => (
66
- <div
67
- className={cn(
68
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
69
- className
70
- )}
71
- {...props}
72
- />
73
- )
74
- AlertDialogFooter.displayName = "AlertDialogFooter"
75
-
76
- const AlertDialogTitle = React.forwardRef<
77
- React.ElementRef<typeof AlertDialogPrimitive.Title>,
78
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
79
- >(({ className, ...props }, ref) => (
80
- <AlertDialogPrimitive.Title
81
- ref={ref}
82
- className={cn("text-lg font-semibold", className)}
83
- {...props}
84
- />
85
- ))
86
- AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87
-
88
- const AlertDialogDescription = React.forwardRef<
89
- React.ElementRef<typeof AlertDialogPrimitive.Description>,
90
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
91
- >(({ className, ...props }, ref) => (
92
- <AlertDialogPrimitive.Description
93
- ref={ref}
94
- className={cn("text-sm text-muted-foreground", className)}
95
- {...props}
96
- />
97
- ))
98
- AlertDialogDescription.displayName =
99
- AlertDialogPrimitive.Description.displayName
100
-
101
- const AlertDialogAction = React.forwardRef<
102
- React.ElementRef<typeof AlertDialogPrimitive.Action>,
103
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104
- >(({ className, ...props }, ref) => (
105
- <AlertDialogPrimitive.Action
106
- ref={ref}
107
- className={cn(buttonVariants(), className)}
108
- {...props}
109
- />
110
- ))
111
- AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112
-
113
- const AlertDialogCancel = React.forwardRef<
114
- React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116
- >(({ className, ...props }, ref) => (
117
- <AlertDialogPrimitive.Cancel
118
- ref={ref}
119
- className={cn(
120
- buttonVariants({ variant: "outline" }),
121
- "mt-2 sm:mt-0",
122
- className
123
- )}
124
- {...props}
125
- />
126
- ))
127
- AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128
-
129
- export {
130
- AlertDialog,
131
- AlertDialogPortal,
132
- AlertDialogOverlay,
133
- AlertDialogTrigger,
134
- AlertDialogContent,
135
- AlertDialogHeader,
136
- AlertDialogFooter,
137
- AlertDialogTitle,
138
- AlertDialogDescription,
139
- AlertDialogAction,
140
- AlertDialogCancel,
141
- }
package/template/components/ui/alert.tsx DELETED
@@ -1,61 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react"
4
- import { cva, type VariantProps } from "class-variance-authority"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- const alertVariants = cva(
9
- "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",
10
- {
11
- variants: {
12
- variant: {
13
- default: "bg-background text-foreground",
14
- destructive:
15
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
16
- },
17
- },
18
- defaultVariants: {
19
- variant: "default",
20
- },
21
- }
22
- )
23
-
24
- const Alert = React.forwardRef<
25
- HTMLDivElement,
26
- React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
27
- >(({ className, variant, ...props }, ref) => (
28
- <div
29
- ref={ref}
30
- role="alert"
31
- className={cn(alertVariants({ variant }), className)}
32
- {...props}
33
- />
34
- ))
35
- Alert.displayName = "Alert"
36
-
37
- const AlertTitle = React.forwardRef<
38
- HTMLParagraphElement,
39
- React.HTMLAttributes<HTMLHeadingElement>
40
- >(({ className, ...props }, ref) => (
41
- <h5
42
- ref={ref}
43
- className={cn("mb-1 font-medium leading-none tracking-tight", className)}
44
- {...props}
45
- />
46
- ))
47
- AlertTitle.displayName = "AlertTitle"
48
-
49
- const AlertDescription = React.forwardRef<
50
- HTMLParagraphElement,
51
- React.HTMLAttributes<HTMLParagraphElement>
52
- >(({ className, ...props }, ref) => (
53
- <div
54
- ref={ref}
55
- className={cn("text-sm [&_p]:leading-relaxed", className)}
56
- {...props}
57
- />
58
- ))
59
- AlertDescription.displayName = "AlertDescription"
60
-
61
- export { Alert, AlertTitle, AlertDescription }
package/template/components/ui/aspect-ratio.tsx DELETED
@@ -1,7 +0,0 @@
1
- "use client";
2
-
3
- import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4
-
5
- const AspectRatio = AspectRatioPrimitive.Root
6
-
7
- export { AspectRatio }
package/template/components/ui/avatar.tsx DELETED
@@ -1,51 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as AvatarPrimitive from "@radix-ui/react-avatar"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- const Avatar = React.forwardRef<
9
- React.ElementRef<typeof AvatarPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11
- >(({ className, ...props }, ref) => (
12
- <AvatarPrimitive.Root
13
- ref={ref}
14
- className={cn(`
15
- after:content-[''] after:block after:absolute after:inset-0 after:rounded-full after:pointer-events-none after:border after:border-black/10 dark:after:border-white/10
16
- relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full`,
17
- className
18
- )}
19
- {...props}
20
- />
21
- ))
22
- Avatar.displayName = AvatarPrimitive.Root.displayName
23
-
24
- const AvatarImage = React.forwardRef<
25
- React.ElementRef<typeof AvatarPrimitive.Image>,
26
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
27
- >(({ className, ...props }, ref) => (
28
- <AvatarPrimitive.Image
29
- ref={ref}
30
- className={cn("aspect-square h-full w-full", className)}
31
- {...props}
32
- />
33
- ))
34
- AvatarImage.displayName = AvatarPrimitive.Image.displayName
35
-
36
- const AvatarFallback = React.forwardRef<
37
- React.ElementRef<typeof AvatarPrimitive.Fallback>,
38
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
39
- >(({ className, ...props }, ref) => (
40
- <AvatarPrimitive.Fallback
41
- ref={ref}
42
- className={cn(
43
- "flex h-full w-full items-center justify-center rounded-full bg-muted",
44
- className
45
- )}
46
- {...props}
47
- />
48
- ))
49
- AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
50
-
51
- export { Avatar, AvatarImage, AvatarFallback }
package/template/components/ui/badge.tsx DELETED
@@ -1,40 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react"
4
- import { cva, type VariantProps } from "class-variance-authority"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- const badgeVariants = cva(
9
- // Whitespace-nowrap: Badges should never wrap.
10
- "whitespace-nowrap inline-flex items-center rounded-md 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" +
11
- " hover-elevate " ,
12
- {
13
- variants: {
14
- variant: {
15
- default:
16
- "border-transparent bg-primary text-primary-foreground shadow-xs",
17
- secondary: "border-transparent bg-secondary text-secondary-foreground",
18
- destructive:
19
- "border-transparent bg-destructive text-destructive-foreground shadow-xs",
20
-
21
- outline: " border [border-color:var(--badge-outline)] shadow-xs",
22
- },
23
- },
24
- defaultVariants: {
25
- variant: "default",
26
- },
27
- },
28
- )
29
-
30
- export interface BadgeProps
31
- extends React.HTMLAttributes<HTMLDivElement>,
32
- VariantProps<typeof badgeVariants> {}
33
-
34
- function Badge({ className, variant, ...props }: BadgeProps) {
35
- return (
36
- <div className={cn(badgeVariants({ variant }), className)} {...props} />
37
- );
38
- }
39
-
40
- export { Badge, badgeVariants }
package/template/components/ui/breadcrumb.tsx DELETED
@@ -1,117 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react"
4
- import { Slot } from "@radix-ui/react-slot"
5
- import { ChevronRight, MoreHorizontal } from "lucide-react"
6
-
7
- import { cn } from "@/lib/utils"
8
-
9
- const Breadcrumb = React.forwardRef<
10
- HTMLElement,
11
- React.ComponentPropsWithoutRef<"nav"> & {
12
- separator?: React.ReactNode
13
- }
14
- >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
15
- Breadcrumb.displayName = "Breadcrumb"
16
-
17
- const BreadcrumbList = React.forwardRef<
18
- HTMLOListElement,
19
- React.ComponentPropsWithoutRef<"ol">
20
- >(({ className, ...props }, ref) => (
21
- <ol
22
- ref={ref}
23
- className={cn(
24
- "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
25
- className
26
- )}
27
- {...props}
28
- />
29
- ))
30
- BreadcrumbList.displayName = "BreadcrumbList"
31
-
32
- const BreadcrumbItem = React.forwardRef<
33
- HTMLLIElement,
34
- React.ComponentPropsWithoutRef<"li">
35
- >(({ className, ...props }, ref) => (
36
- <li
37
- ref={ref}
38
- className={cn("inline-flex items-center gap-1.5", className)}
39
- {...props}
40
- />
41
- ))
42
- BreadcrumbItem.displayName = "BreadcrumbItem"
43
-
44
- const BreadcrumbLink = React.forwardRef<
45
- HTMLAnchorElement,
46
- React.ComponentPropsWithoutRef<"a"> & {
47
- asChild?: boolean
48
- }
49
- >(({ asChild, className, ...props }, ref) => {
50
- const Comp = asChild ? Slot : "a"
51
-
52
- return (
53
- <Comp
54
- ref={ref}
55
- className={cn("transition-colors hover:text-foreground", className)}
56
- {...props}
57
- />
58
- )
59
- })
60
- BreadcrumbLink.displayName = "BreadcrumbLink"
61
-
62
- const BreadcrumbPage = React.forwardRef<
63
- HTMLSpanElement,
64
- React.ComponentPropsWithoutRef<"span">
65
- >(({ className, ...props }, ref) => (
66
- <span
67
- ref={ref}
68
- role="link"
69
- aria-disabled="true"
70
- aria-current="page"
71
- className={cn("font-normal text-foreground", className)}
72
- {...props}
73
- />
74
- ))
75
- BreadcrumbPage.displayName = "BreadcrumbPage"
76
-
77
- const BreadcrumbSeparator = ({
78
- children,
79
- className,
80
- ...props
81
- }: React.ComponentProps<"li">) => (
82
- <li
83
- role="presentation"
84
- aria-hidden="true"
85
- className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
86
- {...props}
87
- >
88
- {children ?? <ChevronRight />}
89
- </li>
90
- )
91
- BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
92
-
93
- const BreadcrumbEllipsis = ({
94
- className,
95
- ...props
96
- }: React.ComponentProps<"span">) => (
97
- <span
98
- role="presentation"
99
- aria-hidden="true"
100
- className={cn("flex h-9 w-9 items-center justify-center", className)}
101
- {...props}
102
- >
103
- <MoreHorizontal className="h-4 w-4" />
104
- <span className="sr-only">More</span>
105
- </span>
106
- )
107
- BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
108
-
109
- export {
110
- Breadcrumb,
111
- BreadcrumbList,
112
- BreadcrumbItem,
113
- BreadcrumbLink,
114
- BreadcrumbPage,
115
- BreadcrumbSeparator,
116
- BreadcrumbEllipsis,
117
- }