mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-19 05:41:33 +00:00
Compare commits
18 Commits
shadcn@3.8
...
shadcn@3.8
| Author | SHA1 | Date | |
|---|---|---|---|
|
9d26f582fa | ||
|
0a2ad2176c | ||
|
|
7c36439836 | ||
|
|
a1e3afed06 | ||
|
|
be5b1bbae3 | ||
|
|
52de23bf95 | ||
|
|
1d16fe46cd | ||
|
|
cbecda13f9 | ||
|
|
24649ec103 | ||
|
|
b9f62a8399 | ||
|
|
689d45e095 | ||
|
|
33f7b3f2bb | ||
|
|
2cce072393 | ||
|
|
d64bdec2f9 | ||
|
|
5adacdecad | ||
|
f2552d3f3b | ||
|
b435e01199 | ||
|
cd576df6e4 |
@@ -21,7 +21,7 @@ export function ButtonGroupPopover() {
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="rounded-xl p-0 text-sm">
|
||||
<PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
|
||||
<div className="px-4 py-3">
|
||||
<div className="text-sm font-medium">Agent Tasks</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ import { Textarea } from "@/examples/radix/ui/textarea"
|
||||
|
||||
export function FieldDemo() {
|
||||
return (
|
||||
<div className="w-full max-w-md rounded-lg border p-6">
|
||||
<div className="w-full max-w-md rounded-xl border p-6">
|
||||
<form>
|
||||
<FieldGroup>
|
||||
<FieldSet>
|
||||
|
||||
@@ -190,12 +190,12 @@ export function NotionPromptForm() {
|
||||
<FieldLabel htmlFor="notion-prompt" className="sr-only">
|
||||
Prompt
|
||||
</FieldLabel>
|
||||
<InputGroup>
|
||||
<InputGroup className="rounded-xl">
|
||||
<InputGroupTextarea
|
||||
id="notion-prompt"
|
||||
placeholder="Ask, search, or make anything..."
|
||||
/>
|
||||
<InputGroupAddon align="block-start">
|
||||
<InputGroupAddon align="block-start" className="pt-3">
|
||||
<Popover
|
||||
open={mentionPopoverOpen}
|
||||
onOpenChange={setMentionPopoverOpen}
|
||||
@@ -209,7 +209,7 @@ export function NotionPromptForm() {
|
||||
<InputGroupButton
|
||||
variant="outline"
|
||||
size={!hasMentions ? "sm" : "icon-sm"}
|
||||
className="rounded-full transition-transform"
|
||||
className="transition-transform"
|
||||
>
|
||||
<IconAt /> {!hasMentions && "Add context"}
|
||||
</InputGroupButton>
|
||||
@@ -235,6 +235,7 @@ export function NotionPromptForm() {
|
||||
setMentions((prev) => [...prev, currentValue])
|
||||
setMentionPopoverOpen(false)
|
||||
}}
|
||||
className="rounded-lg"
|
||||
>
|
||||
<MentionableIcon item={item} />
|
||||
{item.title}
|
||||
|
||||
@@ -79,7 +79,7 @@ export function ItemExplorer({
|
||||
)}
|
||||
<SidebarMenuButton
|
||||
onClick={() => setParams({ item: item.name })}
|
||||
className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:-z-0 after:rounded-md"
|
||||
className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
|
||||
data-active={item.name === currentItem?.name}
|
||||
isActive={item.name === currentItem?.name}
|
||||
>
|
||||
|
||||
@@ -78,6 +78,7 @@ export default async function CreatePage({
|
||||
title: item.title,
|
||||
type: item.type,
|
||||
}))
|
||||
.filter((item) => !/\d+$/.test(item.name))
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -86,8 +87,8 @@ export default async function CreatePage({
|
||||
>
|
||||
<header className="sticky top-0 z-50 w-full">
|
||||
<div className="container-wrapper 3xl:fixed:px-0 px-6">
|
||||
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
|
||||
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
|
||||
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
|
||||
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
|
||||
<MobileNav
|
||||
tree={pageTree}
|
||||
items={siteConfig.navItems}
|
||||
|
||||
@@ -36,7 +36,7 @@ const items = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Building Your Application",
|
||||
title: "Build Your Application",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
|
||||
@@ -30,7 +30,7 @@ const items = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Building Your Application",
|
||||
title: "Build Your Application",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
|
||||
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -565,7 +565,7 @@ function SidebarMenuAction({
|
||||
className: cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 end-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -565,7 +565,7 @@ function SidebarMenuAction({
|
||||
className: cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
|
||||
@@ -36,7 +36,7 @@ const items = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Building Your Application",
|
||||
title: "Build Your Application",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
|
||||
@@ -30,7 +30,7 @@ const items = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Building Your Application",
|
||||
title: "Build Your Application",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
|
||||
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -554,7 +554,7 @@ function SidebarMenuAction({
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -554,7 +554,7 @@ function SidebarMenuAction({
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -24,14 +24,4 @@ export const registryCategories = [
|
||||
slug: "signup",
|
||||
hidden: false,
|
||||
},
|
||||
{
|
||||
name: "OTP",
|
||||
slug: "otp",
|
||||
hidden: false,
|
||||
},
|
||||
{
|
||||
name: "Calendar",
|
||||
slug: "calendar",
|
||||
hidden: false,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"rehype-pretty-code": "^0.14.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"server-only": "^0.0.1",
|
||||
"shadcn": "3.8.3",
|
||||
"shadcn": "3.8.4",
|
||||
"shiki": "^1.10.1",
|
||||
"sonner": "^2.0.0",
|
||||
"swr": "^2.3.6",
|
||||
|
||||
@@ -311,6 +311,12 @@
|
||||
"url": "https://chanhdai.com/r/{name}.json",
|
||||
"description": "A collection of reusable components."
|
||||
},
|
||||
{
|
||||
"name": "@nteract",
|
||||
"homepage": "https://nteract-elements.vercel.app/",
|
||||
"url": "https://nteract-elements.vercel.app/r/{name}.json",
|
||||
"description": "Components for interactive computing notebooks."
|
||||
},
|
||||
{
|
||||
"name": "@nuqs",
|
||||
"homepage": "https://nuqs.dev/registry",
|
||||
@@ -712,5 +718,11 @@
|
||||
"homepage": "https://typedora-ui.netlify.app",
|
||||
"url": "https://typedora-ui.netlify.app/r/{name}.json",
|
||||
"description": "Typedora UI is a next-generation extension layer for shadcn/ui, designed to bring full type-safety to your UI components."
|
||||
},
|
||||
{
|
||||
"name": "@sona-ui",
|
||||
"homepage": "https://sona-ui.vercel.app",
|
||||
"url": "https://sona-ui.vercel.app/r/{name}.json",
|
||||
"description": "A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster."
|
||||
}
|
||||
]
|
||||
101
apps/v4/public/r/styles/base-lyra/dashboard-01.json
Normal file
101
apps/v4/public/r/styles/base-lyra/dashboard-01.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -7,7 +7,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/input-otp.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground duration-1000 h-4 w-px\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
31
apps/v4/public/r/styles/base-lyra/login-01.json
Normal file
31
apps/v4/public/r/styles/base-lyra/login-01.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-01",
|
||||
"title": "Login 01",
|
||||
"description": "A simple login form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-01/page.tsx",
|
||||
"content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-01/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n <Button variant=\"outline\" type=\"button\">\n Login with Google\n </Button>\n <FieldDescription className=\"text-center\">\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-lyra/login-02.json
Normal file
30
apps/v4/public/r/styles/base-lyra/login-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-02",
|
||||
"title": "Login 02",
|
||||
"description": "A two column login page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-02/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n return (\n <div className=\"grid min-h-svh lg:grid-cols-2\">\n <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n <div className=\"flex justify-center gap-2 md:justify-start\">\n <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n </div>\n <div className=\"flex flex-1 items-center justify-center\">\n <div className=\"w-full max-w-xs\">\n <LoginForm />\n </div>\n </div>\n </div>\n <div className=\"bg-muted relative hidden lg:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-02/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n Enter your email below to login to your account\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Login with GitHub\n </Button>\n <FieldDescription className=\"text-center\">\n Don't have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign up\n </a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/login-03.json
Normal file
31
apps/v4/public/r/styles/base-lyra/login-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-03",
|
||||
"title": "Login 03",
|
||||
"description": "A login page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-sm flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-03/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n <CardDescription>\n Login with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Google\n </Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n <FieldDescription className=\"text-center\">\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/login-04.json
Normal file
31
apps/v4/public/r/styles/base-lyra/login-04.json
Normal file
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-lyra/login-05.json
Normal file
30
apps/v4/public/r/styles/base-lyra/login-05.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-05",
|
||||
"title": "Login 05",
|
||||
"description": "A simple email-only login page.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-05/page.tsx",
|
||||
"content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-05/components/login-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n <FieldDescription>\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n </Field>\n <FieldSeparator>Or</FieldSeparator>\n <Field className=\"grid gap-4 sm:grid-cols-2\">\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Google\n </Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/otp-01.json
Normal file
31
apps/v4/public/r/styles/base-lyra/otp-01.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-01",
|
||||
"title": "OTP 01",
|
||||
"description": "A simple OTP verification form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-01/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-xs\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-01/components/otp-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader>\n <CardTitle>Enter verification code</CardTitle>\n <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription>\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <FieldGroup>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-lyra/otp-02.json
Normal file
30
apps/v4/public/r/styles/base-lyra/otp-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-02",
|
||||
"title": "OTP 02",
|
||||
"description": "A two column OTP page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-02/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full\">\n <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n <div className=\"w-full max-w-xs\">\n <OTPForm />\n </div>\n </div>\n <div className=\"relative hidden w-1/2 lg:block\">\n <img\n alt=\"Authentication\"\n className=\"absolute inset-0 h-full w-full object-cover\"\n height={1080}\n src=\"/placeholder.svg\"\n width={1920}\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-02/components/otp-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n We sent a 6-digit code to your email.\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </form>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/otp-03.json
Normal file
31
apps/v4/public/r/styles/base-lyra/otp-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-03",
|
||||
"title": "OTP 03",
|
||||
"description": "An OTP page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-lyra/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-xs flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-03/components/otp-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/otp-04.json
Normal file
31
apps/v4/public/r/styles/base-lyra/otp-04.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-04",
|
||||
"title": "OTP 04",
|
||||
"description": "An OTP page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-04/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm md:max-w-3xl\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-04/components/otp-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n {...props}\n >\n <Card className=\"flex-1 overflow-hidden p-0\">\n <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n <FieldGroup>\n <Field className=\"items-center text-center\">\n <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n We sent a 6-digit code to your email\n </p>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP\n maxLength={6}\n id=\"otp\"\n required\n containerClassName=\"gap-4\"\n >\n <InputOTPGroup>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n <div className=\"bg-muted relative hidden md:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </CardContent>\n </Card>\n <FieldDescription className=\"text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-lyra/otp-05.json
Normal file
30
apps/v4/public/r/styles/base-lyra/otp-05.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-05",
|
||||
"title": "OTP 05",
|
||||
"description": "A simple OTP form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-05/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/otp-05/components/otp-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n <FieldDescription>\n We sent a 6-digit code to your email address\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP\n maxLength={6}\n id=\"otp\"\n required\n containerClassName=\"gap-4\"\n >\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Verify</Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
@@ -1860,6 +1860,981 @@
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-01",
|
||||
"title": "Login 01",
|
||||
"description": "A simple login form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-01/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-02",
|
||||
"title": "Login 02",
|
||||
"description": "A two column login page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-02/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-03",
|
||||
"title": "Login 03",
|
||||
"description": "A login page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-03/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-04",
|
||||
"title": "Login 04",
|
||||
"description": "A login page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-04/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-05",
|
||||
"title": "Login 05",
|
||||
"description": "A simple email-only login page.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/login-05/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-01",
|
||||
"title": "Signup 01",
|
||||
"description": "A simple signup form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-01/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-02",
|
||||
"title": "Signup 02",
|
||||
"description": "A two column signup page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-02/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-03",
|
||||
"title": "Signup 03",
|
||||
"description": "A signup page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-03/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-04",
|
||||
"title": "Signup 04",
|
||||
"description": "A signup page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-04/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-05",
|
||||
"title": "Signup 05",
|
||||
"description": "A simple signup form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-05/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "dashboard-01",
|
||||
"title": "Dashboard 01",
|
||||
"description": "A dashboard with sidebar, charts and data table.",
|
||||
"dependencies": [
|
||||
"@dnd-kit/core",
|
||||
"@dnd-kit/modifiers",
|
||||
"@dnd-kit/sortable",
|
||||
"@dnd-kit/utilities",
|
||||
"@tanstack/react-table",
|
||||
"zod"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"chart",
|
||||
"card",
|
||||
"select",
|
||||
"tabs",
|
||||
"table",
|
||||
"toggle-group",
|
||||
"badge",
|
||||
"button",
|
||||
"checkbox",
|
||||
"dropdown-menu",
|
||||
"drawer",
|
||||
"input",
|
||||
"avatar",
|
||||
"sheet",
|
||||
"sonner"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/data.json",
|
||||
"type": "registry:file",
|
||||
"target": "app/dashboard/data.json"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/chart-area-interactive.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/data-table.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/nav-documents.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/section-cards.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/dashboard-01/components/site-header.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"iframeHeight": "1000px"
|
||||
},
|
||||
"categories": [
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-01",
|
||||
"title": "Sidebar 01",
|
||||
"description": "A simple sidebar with navigation grouped by section.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/version-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-02",
|
||||
"title": "Sidebar 02",
|
||||
"description": "A sidebar with collapsible sections.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-02/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-02/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-02/components/version-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-03",
|
||||
"title": "Sidebar 03",
|
||||
"description": "A sidebar with submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-03/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-04",
|
||||
"title": "Sidebar 04",
|
||||
"description": "A floating sidebar with submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-04/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-05",
|
||||
"title": "Sidebar 05",
|
||||
"description": "A sidebar with collapsible submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-05/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-05/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-06",
|
||||
"title": "Sidebar 06",
|
||||
"description": "A sidebar with submenus as dropdowns.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"card",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-07",
|
||||
"title": "Sidebar 07",
|
||||
"description": "A sidebar that collapses to icons.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-07/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-08",
|
||||
"title": "Sidebar 08",
|
||||
"description": "An inset sidebar with secondary navigation.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-08/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-09",
|
||||
"title": "Sidebar 09",
|
||||
"description": "Collapsible nested sidebars.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar",
|
||||
"switch",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-09/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-09/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-09/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-10",
|
||||
"title": "Sidebar 10",
|
||||
"description": "A sidebar in a popover.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"popover",
|
||||
"collapsible",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/nav-actions.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/nav-favorites.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/nav-workspaces.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-10/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-11",
|
||||
"title": "Sidebar 11",
|
||||
"description": "A sidebar with a collapsible file tree.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-11/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-11/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-12",
|
||||
"title": "Sidebar 12",
|
||||
"description": "A sidebar with a calendar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"calendar",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/calendars.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/date-picker.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-13",
|
||||
"title": "Sidebar 13",
|
||||
"description": "A sidebar in a dialog.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"button",
|
||||
"dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-13/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-13/components/settings-dialog.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-14",
|
||||
"title": "Sidebar 14",
|
||||
"description": "A sidebar on the right.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-14/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-14/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-15",
|
||||
"title": "Sidebar 15",
|
||||
"description": "A left and right sidebar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"popover",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"calendar",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/calendars.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/date-picker.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/nav-favorites.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/nav-workspaces.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/sidebar-left.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/sidebar-right.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-15/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-16",
|
||||
"title": "Sidebar 16",
|
||||
"description": "A sidebar with a sticky site header.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar",
|
||||
"button",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-16/components/site-header.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "use-mobile",
|
||||
"files": [
|
||||
|
||||
41
apps/v4/public/r/styles/base-lyra/sidebar-01.json
Normal file
41
apps/v4/public/r/styles/base-lyra/sidebar-01.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-01",
|
||||
"title": "Sidebar 01",
|
||||
"description": "A simple sidebar with navigation grouped by section.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-01/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/app-sidebar.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-lyra/blocks/sidebar-01/components/version-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader>\n <VersionSwitcher\n versions={data.versions}\n defaultVersion={data.versions[0]}\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n {data.navMain.map((item) => (\n <SidebarGroup key={item.title}>\n <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {item.items.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton\n isActive={item.isActive}\n render={<a href={item.url} />}\n >\n {item.title}\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n ))}\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/search-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarInput,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n return (\n <form {...props}>\n <SidebarGroup className=\"py-0\">\n <SidebarGroupContent className=\"relative\">\n <Label htmlFor=\"search\" className=\"sr-only\">\n Search\n </Label>\n <SidebarInput\n id=\"search\"\n placeholder=\"Search the docs...\"\n className=\"pl-8\"\n />\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n />\n </SidebarGroupContent>\n </SidebarGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-01/components/version-switcher.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n versions,\n defaultVersion,\n}: {\n versions: string[]\n defaultVersion: string\n}) {\n const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n return (\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton\n size=\"lg\"\n className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n />\n }\n >\n <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"flex flex-col gap-0.5 leading-none\">\n <span className=\"font-medium\">Documentation</span>\n <span className=\"\">v{selectedVersion}</span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n remixicon=\"RiArrowUpDownLine\"\n className=\"ml-auto\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n {versions.map((version) => (\n <DropdownMenuItem\n key={version}\n onSelect={() => setSelectedVersion(version)}\n >\n v{version}{\" \"}\n {version === selectedVersion && (\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n remixicon=\"RiCheckLine\"\n className=\"ml-auto\"\n />\n )}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
41
apps/v4/public/r/styles/base-lyra/sidebar-02.json
Normal file
41
apps/v4/public/r/styles/base-lyra/sidebar-02.json
Normal file
File diff suppressed because one or more lines are too long
28
apps/v4/public/r/styles/base-lyra/sidebar-03.json
Normal file
28
apps/v4/public/r/styles/base-lyra/sidebar-03.json
Normal file
File diff suppressed because one or more lines are too long
29
apps/v4/public/r/styles/base-lyra/sidebar-04.json
Normal file
29
apps/v4/public/r/styles/base-lyra/sidebar-04.json
Normal file
File diff suppressed because one or more lines are too long
36
apps/v4/public/r/styles/base-lyra/sidebar-05.json
Normal file
36
apps/v4/public/r/styles/base-lyra/sidebar-05.json
Normal file
File diff suppressed because one or more lines are too long
41
apps/v4/public/r/styles/base-lyra/sidebar-06.json
Normal file
41
apps/v4/public/r/styles/base-lyra/sidebar-06.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-06",
|
||||
"title": "Sidebar 06",
|
||||
"description": "A sidebar with submenus as dropdowns.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"card",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-06/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"flex flex-col gap-0.5 leading-none\">\n <span className=\"font-medium\">Documentation</span>\n <span className=\"\">v1.0.0</span>\n </div>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarHeader>\n <SidebarContent>\n <NavMain items={data.navMain} />\n </SidebarContent>\n <SidebarFooter>\n <div className=\"p-1\">\n <SidebarOptInForm />\n </div>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/nav-main.tsx",
|
||||
"content": "\"use client\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: React.ReactNode\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarGroup>\n <SidebarMenu>\n {items.map((item) => (\n <DropdownMenu key={item.title}>\n <SidebarMenuItem>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton className=\"aria-expanded:bg-muted\" />\n }\n >\n {item.title}{\" \"}\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n className=\"ml-auto\"\n />\n </DropdownMenuTrigger>\n {item.items?.length ? (\n <DropdownMenuContent\n side={isMobile ? \"bottom\" : \"right\"}\n align={isMobile ? \"end\" : \"start\"}\n className=\"min-w-56 rounded-lg\"\n >\n {item.items.map((item) => (\n <DropdownMenuItem\n key={item.title}\n render={<a href={item.url} />}\n >\n {item.title}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n ) : null}\n </SidebarMenuItem>\n </DropdownMenu>\n ))}\n </SidebarMenu>\n </SidebarGroup>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { SidebarInput } from \"@/registry/base-lyra/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n return (\n <Card className=\"gap-2 py-4 shadow-none\">\n <CardHeader className=\"px-4\">\n <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n <CardDescription>\n Opt-in to receive updates and news about the sidebar.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"px-4\">\n <form>\n <div className=\"grid gap-2.5\">\n <SidebarInput type=\"email\" placeholder=\"Email\" />\n <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n Subscribe\n </Button>\n </div>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
52
apps/v4/public/r/styles/base-lyra/sidebar-07.json
Normal file
52
apps/v4/public/r/styles/base-lyra/sidebar-07.json
Normal file
File diff suppressed because one or more lines are too long
52
apps/v4/public/r/styles/base-lyra/sidebar-08.json
Normal file
52
apps/v4/public/r/styles/base-lyra/sidebar-08.json
Normal file
File diff suppressed because one or more lines are too long
39
apps/v4/public/r/styles/base-lyra/sidebar-09.json
Normal file
39
apps/v4/public/r/styles/base-lyra/sidebar-09.json
Normal file
File diff suppressed because one or more lines are too long
62
apps/v4/public/r/styles/base-lyra/sidebar-10.json
Normal file
62
apps/v4/public/r/styles/base-lyra/sidebar-10.json
Normal file
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-lyra/sidebar-11.json
Normal file
30
apps/v4/public/r/styles/base-lyra/sidebar-11.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-11",
|
||||
"title": "Sidebar 11",
|
||||
"description": "A sidebar with a collapsible file tree.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-11/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-11/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>button.tsx</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-11/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n changes: [\n {\n file: \"README.md\",\n state: \"M\",\n },\n {\n file: \"api/hello/route.ts\",\n state: \"U\",\n },\n {\n file: \"app/layout.tsx\",\n state: \"M\",\n },\n ],\n tree: [\n [\n \"app\",\n [\n \"api\",\n [\"hello\", [\"route.ts\"]],\n \"page.tsx\",\n \"layout.tsx\",\n [\"blog\", [\"page.tsx\"]],\n ],\n ],\n [\n \"components\",\n [\"ui\", \"button.tsx\", \"card.tsx\"],\n \"header.tsx\",\n \"footer.tsx\",\n ],\n [\"lib\", [\"util.ts\"]],\n [\"public\", \"favicon.ico\", \"vercel.svg\"],\n \".eslintrc.json\",\n \".gitignore\",\n \"next.config.js\",\n \"tailwind.config.js\",\n \"package.json\",\n \"README.md\",\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Changes</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.changes.map((item, index) => (\n <SidebarMenuItem key={index}>\n <SidebarMenuButton>\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n {item.file}\n </SidebarMenuButton>\n <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n <SidebarGroup>\n <SidebarGroupLabel>Files</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.tree.map((item, index) => (\n <Tree key={index} item={item} />\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\ntype TreeItem = string | TreeItem[]\nfunction Tree({ item }: { item: TreeItem }) {\n const [name, ...items] = Array.isArray(item) ? item : [item]\n if (!items.length) {\n return (\n <SidebarMenuButton\n isActive={name === \"button.tsx\"}\n className=\"data-[active=true]:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n {name}\n </SidebarMenuButton>\n )\n }\n return (\n <SidebarMenuItem>\n <Collapsible\n className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n defaultOpen={name === \"components\" || name === \"ui\"}\n >\n <SidebarMenuButton render={<CollapsibleTrigger />}>\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n remixicon=\"RiArrowRightSLine\"\n className=\"transition-transform\"\n />\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n {name}\n </SidebarMenuButton>\n <CollapsibleContent>\n <SidebarMenuSub>\n {items.map((subItem, index) => (\n <Tree key={index} item={subItem} />\n ))}\n </SidebarMenuSub>\n </CollapsibleContent>\n </Collapsible>\n </SidebarMenuItem>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
48
apps/v4/public/r/styles/base-lyra/sidebar-12.json
Normal file
48
apps/v4/public/r/styles/base-lyra/sidebar-12.json
Normal file
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-12",
|
||||
"title": "Sidebar 12",
|
||||
"description": "A sidebar with a calendar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"calendar",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-12/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbPage>October 2024</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n {Array.from({ length: 20 }).map((_, i) => (\n <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n ))}\n </div>\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-lyra/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-lyra/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-12/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n calendars: [\n {\n name: \"My Calendars\",\n items: [\"Personal\", \"Work\", \"Family\"],\n },\n {\n name: \"Favorites\",\n items: [\"Holidays\", \"Birthdays\"],\n },\n {\n name: \"Other\",\n items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n <NavUser user={data.user} />\n </SidebarHeader>\n <SidebarContent>\n <DatePicker />\n <SidebarSeparator className=\"mx-0\" />\n <Calendars calendars={data.calendars} />\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton>\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n <span>New Calendar</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/calendars.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n calendars,\n}: {\n calendars: {\n name: string\n items: string[]\n }[]\n}) {\n return (\n <>\n {calendars.map((calendar, index) => (\n <React.Fragment key={calendar.name}>\n <SidebarGroup key={calendar.name}>\n <Collapsible\n defaultOpen={index === 0}\n className=\"group/collapsible\"\n >\n <SidebarGroupLabel\n className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n render={<CollapsibleTrigger />}\n >\n {calendar.name}{\" \"}\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n remixicon=\"RiArrowRightSLine\"\n className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n />\n </SidebarGroupLabel>\n <CollapsibleContent>\n <SidebarGroupContent>\n <SidebarMenu>\n {calendar.items.map((item, index) => (\n <SidebarMenuItem key={item}>\n <SidebarMenuButton>\n <div\n data-active={index < 2}\n className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n >\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n remixicon=\"RiCheckLine\"\n className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n />\n </div>\n {item}\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </CollapsibleContent>\n </Collapsible>\n </SidebarGroup>\n <SidebarSeparator className=\"mx-0\" />\n </React.Fragment>\n ))}\n </>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/date-picker.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-lyra/ui/calendar\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport function DatePicker() {\n const [date, setDate] = React.useState<Date | undefined>(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n return (\n <SidebarGroup className=\"px-0\">\n <SidebarGroupContent>\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={setDate}\n captionLayout=\"dropdown\"\n className=\"bg-transparent [--cell-size:2.1rem]\"\n />\n </SidebarGroupContent>\n </SidebarGroup>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-12/components/nav-user.tsx",
|
||||
"content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n }\n >\n <Avatar>\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"truncate text-xs\">{user.email}</span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n remixicon=\"RiArrowUpDownLine\"\n className=\"ml-auto size-4\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"min-w-56 rounded-lg\"\n side={isMobile ? \"bottom\" : \"right\"}\n align=\"start\"\n sideOffset={4}\n >\n <DropdownMenuGroup>\n <DropdownMenuLabel className=\"p-0 font-normal\">\n <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar>\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"truncate text-xs\">{user.email}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SparklesIcon\"\n tabler=\"IconSparkles\"\n hugeicons=\"SparklesIcon\"\n phosphor=\"SparkleIcon\"\n remixicon=\"RiSparklingLine\"\n />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BadgeCheckIcon\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadgeIcon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-lyra/sidebar-13.json
Normal file
30
apps/v4/public/r/styles/base-lyra/sidebar-13.json
Normal file
File diff suppressed because one or more lines are too long
28
apps/v4/public/r/styles/base-lyra/sidebar-14.json
Normal file
28
apps/v4/public/r/styles/base-lyra/sidebar-14.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-14",
|
||||
"title": "Sidebar 14",
|
||||
"description": "A sidebar on the right.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-14/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-14/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n <AppSidebar side=\"right\" />\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/sidebar-14/components/app-sidebar.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Community\",\n url: \"#\",\n items: [\n {\n title: \"Contribution Guide\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.navMain.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton\n render={<a href={item.url} className=\"font-medium\" />}\n >\n {item.title}\n </SidebarMenuButton>\n {item.items?.length ? (\n <SidebarMenuSub>\n {item.items.map((item) => (\n <SidebarMenuSubItem key={item.title}>\n <SidebarMenuSubButton\n isActive={item.isActive}\n render={<a href={item.url} />}\n >\n {item.title}\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n ))}\n </SidebarMenuSub>\n ) : null}\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
79
apps/v4/public/r/styles/base-lyra/sidebar-15.json
Normal file
79
apps/v4/public/r/styles/base-lyra/sidebar-15.json
Normal file
File diff suppressed because one or more lines are too long
64
apps/v4/public/r/styles/base-lyra/sidebar-16.json
Normal file
64
apps/v4/public/r/styles/base-lyra/sidebar-16.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-lyra/signup-01.json
Normal file
30
apps/v4/public/r/styles/base-lyra/signup-01.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-01",
|
||||
"title": "Signup 01",
|
||||
"description": "A simple signup form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-01/page.tsx",
|
||||
"content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-01/components/signup-form\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-01/components/signup-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader>\n <CardTitle>Create an account</CardTitle>\n <CardDescription>\n Enter your information below to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n <FieldDescription>\n We'll use this to contact you. We will not share your email\n with anyone else.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input id=\"password\" type=\"password\" required />\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">\n Confirm Password\n </FieldLabel>\n <Input id=\"confirm-password\" type=\"password\" required />\n <FieldDescription>Please confirm your password.</FieldDescription>\n </Field>\n <FieldGroup>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n <Button variant=\"outline\" type=\"button\">\n Sign up with Google\n </Button>\n <FieldDescription className=\"px-6 text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-lyra/signup-02.json
Normal file
30
apps/v4/public/r/styles/base-lyra/signup-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-02",
|
||||
"title": "Signup 02",
|
||||
"description": "A two column signup page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-02/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n return (\n <div className=\"grid min-h-svh lg:grid-cols-2\">\n <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n <div className=\"flex justify-center gap-2 md:justify-start\">\n <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n </div>\n <div className=\"flex flex-1 items-center justify-center\">\n <div className=\"w-full max-w-xs\">\n <SignupForm />\n </div>\n </div>\n </div>\n <div className=\"bg-muted relative hidden lg:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-02/components/signup-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Create your account</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n Fill in the form below to create your account\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"John Doe\"\n required\n className=\"bg-background\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>\n We'll use this to contact you. We will not share your email\n with anyone else.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input\n id=\"password\"\n type=\"password\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n <Input\n id=\"confirm-password\"\n type=\"password\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>Please confirm your password.</FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with GitHub\n </Button>\n <FieldDescription className=\"px-6 text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/signup-03.json
Normal file
31
apps/v4/public/r/styles/base-lyra/signup-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-03",
|
||||
"title": "Signup 03",
|
||||
"description": "A signup page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-sm flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-03/components/signup-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Create your account</CardTitle>\n <CardDescription>\n Enter your email below to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Field className=\"grid grid-cols-2 gap-4\">\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">\n Confirm Password\n </FieldLabel>\n <Input id=\"confirm-password\" type=\"password\" required />\n </Field>\n </Field>\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n <FieldDescription className=\"text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-lyra/signup-04.json
Normal file
31
apps/v4/public/r/styles/base-lyra/signup-04.json
Normal file
File diff suppressed because one or more lines are too long
29
apps/v4/public/r/styles/base-lyra/signup-05.json
Normal file
29
apps/v4/public/r/styles/base-lyra/signup-05.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-05",
|
||||
"title": "Signup 05",
|
||||
"description": "A simple signup form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-05/page.tsx",
|
||||
"content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-lyra/blocks/signup-05/components/signup-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n <FieldDescription>\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n </Field>\n <FieldSeparator>Or</FieldSeparator>\n <Field className=\"grid gap-4 sm:grid-cols-2\">\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Google\n </Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
101
apps/v4/public/r/styles/base-maia/dashboard-01.json
Normal file
101
apps/v4/public/r/styles/base-maia/dashboard-01.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -7,7 +7,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/ui/input-otp.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground duration-1000 h-4 w-px\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
31
apps/v4/public/r/styles/base-maia/login-01.json
Normal file
31
apps/v4/public/r/styles/base-maia/login-01.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-01",
|
||||
"title": "Login 01",
|
||||
"description": "A simple login form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-01/page.tsx",
|
||||
"content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-01/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n <Button variant=\"outline\" type=\"button\">\n Login with Google\n </Button>\n <FieldDescription className=\"text-center\">\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-maia/login-02.json
Normal file
30
apps/v4/public/r/styles/base-maia/login-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-02",
|
||||
"title": "Login 02",
|
||||
"description": "A two column login page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-02/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n return (\n <div className=\"grid min-h-svh lg:grid-cols-2\">\n <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n <div className=\"flex justify-center gap-2 md:justify-start\">\n <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n </div>\n <div className=\"flex flex-1 items-center justify-center\">\n <div className=\"w-full max-w-xs\">\n <LoginForm />\n </div>\n </div>\n </div>\n <div className=\"bg-muted relative hidden lg:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-02/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n Enter your email below to login to your account\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Login with GitHub\n </Button>\n <FieldDescription className=\"text-center\">\n Don't have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign up\n </a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/login-03.json
Normal file
31
apps/v4/public/r/styles/base-maia/login-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-03",
|
||||
"title": "Login 03",
|
||||
"description": "A login page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-sm flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-03/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n <CardDescription>\n Login with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Google\n </Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n <FieldDescription className=\"text-center\">\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/login-04.json
Normal file
31
apps/v4/public/r/styles/base-maia/login-04.json
Normal file
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-maia/login-05.json
Normal file
30
apps/v4/public/r/styles/base-maia/login-05.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-05",
|
||||
"title": "Login 05",
|
||||
"description": "A simple email-only login page.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-05/page.tsx",
|
||||
"content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-05/components/login-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n <FieldDescription>\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n </Field>\n <FieldSeparator>Or</FieldSeparator>\n <Field className=\"grid gap-4 sm:grid-cols-2\">\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Google\n </Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/otp-01.json
Normal file
31
apps/v4/public/r/styles/base-maia/otp-01.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-01",
|
||||
"title": "OTP 01",
|
||||
"description": "A simple OTP verification form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-01/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-xs\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-01/components/otp-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader>\n <CardTitle>Enter verification code</CardTitle>\n <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription>\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <FieldGroup>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-maia/otp-02.json
Normal file
30
apps/v4/public/r/styles/base-maia/otp-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-02",
|
||||
"title": "OTP 02",
|
||||
"description": "A two column OTP page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-02/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full\">\n <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n <div className=\"w-full max-w-xs\">\n <OTPForm />\n </div>\n </div>\n <div className=\"relative hidden w-1/2 lg:block\">\n <img\n alt=\"Authentication\"\n className=\"absolute inset-0 h-full w-full object-cover\"\n height={1080}\n src=\"/placeholder.svg\"\n width={1920}\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-02/components/otp-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n We sent a 6-digit code to your email.\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </form>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/otp-03.json
Normal file
31
apps/v4/public/r/styles/base-maia/otp-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-03",
|
||||
"title": "OTP 03",
|
||||
"description": "An OTP page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-maia/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-xs flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-03/components/otp-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP maxLength={6} id=\"otp\" required>\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/otp-04.json
Normal file
31
apps/v4/public/r/styles/base-maia/otp-04.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-04",
|
||||
"title": "OTP 04",
|
||||
"description": "An OTP page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-04/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm md:max-w-3xl\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-04/components/otp-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n {...props}\n >\n <Card className=\"flex-1 overflow-hidden p-0\">\n <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n <FieldGroup>\n <Field className=\"items-center text-center\">\n <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n We sent a 6-digit code to your email\n </p>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP\n maxLength={6}\n id=\"otp\"\n required\n containerClassName=\"gap-4\"\n >\n <InputOTPGroup>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Enter the 6-digit code sent to your email.\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Verify</Button>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n <div className=\"bg-muted relative hidden md:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </CardContent>\n </Card>\n <FieldDescription className=\"text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-maia/otp-05.json
Normal file
30
apps/v4/public/r/styles/base-maia/otp-05.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "otp-05",
|
||||
"title": "OTP 05",
|
||||
"description": "A simple OTP form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input-otp",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-05/page.tsx",
|
||||
"content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <OTPForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/otp/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/otp-05/components/otp-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n <FieldDescription>\n We sent a 6-digit code to your email address\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n Verification code\n </FieldLabel>\n <InputOTP\n maxLength={6}\n id=\"otp\"\n required\n containerClassName=\"gap-4\"\n >\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <FieldDescription className=\"text-center\">\n Didn't receive the code? <a href=\"#\">Resend</a>\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Verify</Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"otp"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
@@ -1860,6 +1860,981 @@
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-01",
|
||||
"title": "Login 01",
|
||||
"description": "A simple login form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-01/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-02",
|
||||
"title": "Login 02",
|
||||
"description": "A two column login page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-02/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-03",
|
||||
"title": "Login 03",
|
||||
"description": "A login page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-03/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-04",
|
||||
"title": "Login 04",
|
||||
"description": "A login page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-04/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "login-05",
|
||||
"title": "Login 05",
|
||||
"description": "A simple email-only login page.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/login-05/components/login-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-01",
|
||||
"title": "Signup 01",
|
||||
"description": "A simple signup form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-01/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-02",
|
||||
"title": "Signup 02",
|
||||
"description": "A two column signup page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-02/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-03",
|
||||
"title": "Signup 03",
|
||||
"description": "A signup page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-03/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-04",
|
||||
"title": "Signup 04",
|
||||
"description": "A signup page with form and image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-04/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "signup-05",
|
||||
"title": "Signup 05",
|
||||
"description": "A simple signup form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-05/components/signup-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "dashboard-01",
|
||||
"title": "Dashboard 01",
|
||||
"description": "A dashboard with sidebar, charts and data table.",
|
||||
"dependencies": [
|
||||
"@dnd-kit/core",
|
||||
"@dnd-kit/modifiers",
|
||||
"@dnd-kit/sortable",
|
||||
"@dnd-kit/utilities",
|
||||
"@tanstack/react-table",
|
||||
"zod"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"chart",
|
||||
"card",
|
||||
"select",
|
||||
"tabs",
|
||||
"table",
|
||||
"toggle-group",
|
||||
"badge",
|
||||
"button",
|
||||
"checkbox",
|
||||
"dropdown-menu",
|
||||
"drawer",
|
||||
"input",
|
||||
"avatar",
|
||||
"sheet",
|
||||
"sonner"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/data.json",
|
||||
"type": "registry:file",
|
||||
"target": "app/dashboard/data.json"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/chart-area-interactive.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/data-table.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/nav-documents.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/section-cards.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/dashboard-01/components/site-header.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"iframeHeight": "1000px"
|
||||
},
|
||||
"categories": [
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-01",
|
||||
"title": "Sidebar 01",
|
||||
"description": "A simple sidebar with navigation grouped by section.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/version-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-02",
|
||||
"title": "Sidebar 02",
|
||||
"description": "A sidebar with collapsible sections.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-02/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-02/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-02/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-02/components/version-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-03",
|
||||
"title": "Sidebar 03",
|
||||
"description": "A sidebar with submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-03/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-03/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-04",
|
||||
"title": "Sidebar 04",
|
||||
"description": "A floating sidebar with submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-04/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-04/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-05",
|
||||
"title": "Sidebar 05",
|
||||
"description": "A sidebar with collapsible submenus.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-05/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-05/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-05/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-06",
|
||||
"title": "Sidebar 06",
|
||||
"description": "A sidebar with submenus as dropdowns.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"card",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-07",
|
||||
"title": "Sidebar 07",
|
||||
"description": "A sidebar that collapses to icons.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-07/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-08",
|
||||
"title": "Sidebar 08",
|
||||
"description": "An inset sidebar with secondary navigation.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-08/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-09",
|
||||
"title": "Sidebar 09",
|
||||
"description": "Collapsible nested sidebars.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar",
|
||||
"switch",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-09/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-09/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-09/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-10",
|
||||
"title": "Sidebar 10",
|
||||
"description": "A sidebar in a popover.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"popover",
|
||||
"collapsible",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/nav-actions.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/nav-favorites.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/nav-workspaces.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-10/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-11",
|
||||
"title": "Sidebar 11",
|
||||
"description": "A sidebar with a collapsible file tree.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-11/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-11/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-12",
|
||||
"title": "Sidebar 12",
|
||||
"description": "A sidebar with a calendar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"calendar",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/calendars.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/date-picker.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-13",
|
||||
"title": "Sidebar 13",
|
||||
"description": "A sidebar in a dialog.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"button",
|
||||
"dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-13/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-13/components/settings-dialog.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-14",
|
||||
"title": "Sidebar 14",
|
||||
"description": "A sidebar on the right.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-14/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-14/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-15",
|
||||
"title": "Sidebar 15",
|
||||
"description": "A left and right sidebar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"popover",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"calendar",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/calendars.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/date-picker.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/nav-favorites.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/nav-workspaces.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/sidebar-left.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/sidebar-right.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-15/components/team-switcher.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "sidebar-16",
|
||||
"title": "Sidebar 16",
|
||||
"description": "A sidebar with a sticky site header.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"dropdown-menu",
|
||||
"avatar",
|
||||
"button",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/page.tsx",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/app-sidebar.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/nav-main.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/nav-projects.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/nav-secondary.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/nav-user.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/search-form.tsx",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-16/components/site-header.tsx",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
},
|
||||
{
|
||||
"name": "use-mobile",
|
||||
"files": [
|
||||
|
||||
41
apps/v4/public/r/styles/base-maia/sidebar-01.json
Normal file
41
apps/v4/public/r/styles/base-maia/sidebar-01.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-01",
|
||||
"title": "Sidebar 01",
|
||||
"description": "A simple sidebar with navigation grouped by section.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"label",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-01/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/app-sidebar.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-maia/blocks/sidebar-01/components/version-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader>\n <VersionSwitcher\n versions={data.versions}\n defaultVersion={data.versions[0]}\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n {data.navMain.map((item) => (\n <SidebarGroup key={item.title}>\n <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {item.items.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton\n isActive={item.isActive}\n render={<a href={item.url} />}\n >\n {item.title}\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n ))}\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/search-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarInput,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n return (\n <form {...props}>\n <SidebarGroup className=\"py-0\">\n <SidebarGroupContent className=\"relative\">\n <Label htmlFor=\"search\" className=\"sr-only\">\n Search\n </Label>\n <SidebarInput\n id=\"search\"\n placeholder=\"Search the docs...\"\n className=\"pl-8\"\n />\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n />\n </SidebarGroupContent>\n </SidebarGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-01/components/version-switcher.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n versions,\n defaultVersion,\n}: {\n versions: string[]\n defaultVersion: string\n}) {\n const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n return (\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton\n size=\"lg\"\n className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n />\n }\n >\n <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"flex flex-col gap-0.5 leading-none\">\n <span className=\"font-medium\">Documentation</span>\n <span className=\"\">v{selectedVersion}</span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n remixicon=\"RiArrowUpDownLine\"\n className=\"ml-auto\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n {versions.map((version) => (\n <DropdownMenuItem\n key={version}\n onSelect={() => setSelectedVersion(version)}\n >\n v{version}{\" \"}\n {version === selectedVersion && (\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n remixicon=\"RiCheckLine\"\n className=\"ml-auto\"\n />\n )}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
41
apps/v4/public/r/styles/base-maia/sidebar-02.json
Normal file
41
apps/v4/public/r/styles/base-maia/sidebar-02.json
Normal file
File diff suppressed because one or more lines are too long
28
apps/v4/public/r/styles/base-maia/sidebar-03.json
Normal file
28
apps/v4/public/r/styles/base-maia/sidebar-03.json
Normal file
File diff suppressed because one or more lines are too long
29
apps/v4/public/r/styles/base-maia/sidebar-04.json
Normal file
29
apps/v4/public/r/styles/base-maia/sidebar-04.json
Normal file
File diff suppressed because one or more lines are too long
36
apps/v4/public/r/styles/base-maia/sidebar-05.json
Normal file
36
apps/v4/public/r/styles/base-maia/sidebar-05.json
Normal file
File diff suppressed because one or more lines are too long
41
apps/v4/public/r/styles/base-maia/sidebar-06.json
Normal file
41
apps/v4/public/r/styles/base-maia/sidebar-06.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-06",
|
||||
"title": "Sidebar 06",
|
||||
"description": "A sidebar with submenus as dropdowns.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"card",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-06/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"flex flex-col gap-0.5 leading-none\">\n <span className=\"font-medium\">Documentation</span>\n <span className=\"\">v1.0.0</span>\n </div>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarHeader>\n <SidebarContent>\n <NavMain items={data.navMain} />\n </SidebarContent>\n <SidebarFooter>\n <div className=\"p-1\">\n <SidebarOptInForm />\n </div>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/nav-main.tsx",
|
||||
"content": "\"use client\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: React.ReactNode\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarGroup>\n <SidebarMenu>\n {items.map((item) => (\n <DropdownMenu key={item.title}>\n <SidebarMenuItem>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton className=\"aria-expanded:bg-muted\" />\n }\n >\n {item.title}{\" \"}\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n className=\"ml-auto\"\n />\n </DropdownMenuTrigger>\n {item.items?.length ? (\n <DropdownMenuContent\n side={isMobile ? \"bottom\" : \"right\"}\n align={isMobile ? \"end\" : \"start\"}\n className=\"min-w-56 rounded-lg\"\n >\n {item.items.map((item) => (\n <DropdownMenuItem\n key={item.title}\n render={<a href={item.url} />}\n >\n {item.title}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n ) : null}\n </SidebarMenuItem>\n </DropdownMenu>\n ))}\n </SidebarMenu>\n </SidebarGroup>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { SidebarInput } from \"@/registry/base-maia/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n return (\n <Card className=\"gap-2 py-4 shadow-none\">\n <CardHeader className=\"px-4\">\n <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n <CardDescription>\n Opt-in to receive updates and news about the sidebar.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"px-4\">\n <form>\n <div className=\"grid gap-2.5\">\n <SidebarInput type=\"email\" placeholder=\"Email\" />\n <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n Subscribe\n </Button>\n </div>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
52
apps/v4/public/r/styles/base-maia/sidebar-07.json
Normal file
52
apps/v4/public/r/styles/base-maia/sidebar-07.json
Normal file
File diff suppressed because one or more lines are too long
52
apps/v4/public/r/styles/base-maia/sidebar-08.json
Normal file
52
apps/v4/public/r/styles/base-maia/sidebar-08.json
Normal file
File diff suppressed because one or more lines are too long
39
apps/v4/public/r/styles/base-maia/sidebar-09.json
Normal file
39
apps/v4/public/r/styles/base-maia/sidebar-09.json
Normal file
File diff suppressed because one or more lines are too long
62
apps/v4/public/r/styles/base-maia/sidebar-10.json
Normal file
62
apps/v4/public/r/styles/base-maia/sidebar-10.json
Normal file
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-maia/sidebar-11.json
Normal file
30
apps/v4/public/r/styles/base-maia/sidebar-11.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-11",
|
||||
"title": "Sidebar 11",
|
||||
"description": "A sidebar with a collapsible file tree.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-11/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-11/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>button.tsx</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-11/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n changes: [\n {\n file: \"README.md\",\n state: \"M\",\n },\n {\n file: \"api/hello/route.ts\",\n state: \"U\",\n },\n {\n file: \"app/layout.tsx\",\n state: \"M\",\n },\n ],\n tree: [\n [\n \"app\",\n [\n \"api\",\n [\"hello\", [\"route.ts\"]],\n \"page.tsx\",\n \"layout.tsx\",\n [\"blog\", [\"page.tsx\"]],\n ],\n ],\n [\n \"components\",\n [\"ui\", \"button.tsx\", \"card.tsx\"],\n \"header.tsx\",\n \"footer.tsx\",\n ],\n [\"lib\", [\"util.ts\"]],\n [\"public\", \"favicon.ico\", \"vercel.svg\"],\n \".eslintrc.json\",\n \".gitignore\",\n \"next.config.js\",\n \"tailwind.config.js\",\n \"package.json\",\n \"README.md\",\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Changes</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.changes.map((item, index) => (\n <SidebarMenuItem key={index}>\n <SidebarMenuButton>\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n {item.file}\n </SidebarMenuButton>\n <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n <SidebarGroup>\n <SidebarGroupLabel>Files</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.tree.map((item, index) => (\n <Tree key={index} item={item} />\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\ntype TreeItem = string | TreeItem[]\nfunction Tree({ item }: { item: TreeItem }) {\n const [name, ...items] = Array.isArray(item) ? item : [item]\n if (!items.length) {\n return (\n <SidebarMenuButton\n isActive={name === \"button.tsx\"}\n className=\"data-[active=true]:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n {name}\n </SidebarMenuButton>\n )\n }\n return (\n <SidebarMenuItem>\n <Collapsible\n className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n defaultOpen={name === \"components\" || name === \"ui\"}\n >\n <SidebarMenuButton render={<CollapsibleTrigger />}>\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n remixicon=\"RiArrowRightSLine\"\n className=\"transition-transform\"\n />\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n {name}\n </SidebarMenuButton>\n <CollapsibleContent>\n <SidebarMenuSub>\n {items.map((subItem, index) => (\n <Tree key={index} item={subItem} />\n ))}\n </SidebarMenuSub>\n </CollapsibleContent>\n </Collapsible>\n </SidebarMenuItem>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
48
apps/v4/public/r/styles/base-maia/sidebar-12.json
Normal file
48
apps/v4/public/r/styles/base-maia/sidebar-12.json
Normal file
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-12",
|
||||
"title": "Sidebar 12",
|
||||
"description": "A sidebar with a calendar.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb",
|
||||
"separator",
|
||||
"collapsible",
|
||||
"calendar",
|
||||
"dropdown-menu",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-12/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbPage>October 2024</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n {Array.from({ length: 20 }).map((_, i) => (\n <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n ))}\n </div>\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/app-sidebar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-maia/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-maia/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-12/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n calendars: [\n {\n name: \"My Calendars\",\n items: [\"Personal\", \"Work\", \"Family\"],\n },\n {\n name: \"Favorites\",\n items: [\"Holidays\", \"Birthdays\"],\n },\n {\n name: \"Other\",\n items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n <NavUser user={data.user} />\n </SidebarHeader>\n <SidebarContent>\n <DatePicker />\n <SidebarSeparator className=\"mx-0\" />\n <Calendars calendars={data.calendars} />\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton>\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n <span>New Calendar</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/calendars.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n calendars,\n}: {\n calendars: {\n name: string\n items: string[]\n }[]\n}) {\n return (\n <>\n {calendars.map((calendar, index) => (\n <React.Fragment key={calendar.name}>\n <SidebarGroup key={calendar.name}>\n <Collapsible\n defaultOpen={index === 0}\n className=\"group/collapsible\"\n >\n <SidebarGroupLabel\n className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n render={<CollapsibleTrigger />}\n >\n {calendar.name}{\" \"}\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n remixicon=\"RiArrowRightSLine\"\n className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n />\n </SidebarGroupLabel>\n <CollapsibleContent>\n <SidebarGroupContent>\n <SidebarMenu>\n {calendar.items.map((item, index) => (\n <SidebarMenuItem key={item}>\n <SidebarMenuButton>\n <div\n data-active={index < 2}\n className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n >\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n remixicon=\"RiCheckLine\"\n className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n />\n </div>\n {item}\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </CollapsibleContent>\n </Collapsible>\n </SidebarGroup>\n <SidebarSeparator className=\"mx-0\" />\n </React.Fragment>\n ))}\n </>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/date-picker.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-maia/ui/calendar\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport function DatePicker() {\n const [date, setDate] = React.useState<Date | undefined>(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n return (\n <SidebarGroup className=\"px-0\">\n <SidebarGroupContent>\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={setDate}\n captionLayout=\"dropdown\"\n className=\"bg-transparent [--cell-size:2.1rem]\"\n />\n </SidebarGroupContent>\n </SidebarGroup>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-12/components/nav-user.tsx",
|
||||
"content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n }\n >\n <Avatar>\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"truncate text-xs\">{user.email}</span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n remixicon=\"RiArrowUpDownLine\"\n className=\"ml-auto size-4\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"min-w-56 rounded-lg\"\n side={isMobile ? \"bottom\" : \"right\"}\n align=\"start\"\n sideOffset={4}\n >\n <DropdownMenuGroup>\n <DropdownMenuLabel className=\"p-0 font-normal\">\n <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar>\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"truncate text-xs\">{user.email}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SparklesIcon\"\n tabler=\"IconSparkles\"\n hugeicons=\"SparklesIcon\"\n phosphor=\"SparkleIcon\"\n remixicon=\"RiSparklingLine\"\n />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BadgeCheckIcon\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadgeIcon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-maia/sidebar-13.json
Normal file
30
apps/v4/public/r/styles/base-maia/sidebar-13.json
Normal file
File diff suppressed because one or more lines are too long
28
apps/v4/public/r/styles/base-maia/sidebar-14.json
Normal file
28
apps/v4/public/r/styles/base-maia/sidebar-14.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "sidebar-14",
|
||||
"title": "Sidebar 14",
|
||||
"description": "A sidebar on the right.",
|
||||
"registryDependencies": [
|
||||
"sidebar",
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-14/page.tsx",
|
||||
"content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-14/components/app-sidebar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarProvider>\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator className=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n <AppSidebar side=\"right\" />\n </SidebarProvider>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/dashboard/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/sidebar-14/components/app-sidebar.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Build Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Community\",\n url: \"#\",\n items: [\n {\n title: \"Contribution Guide\",\n url: \"#\",\n },\n ],\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar {...props}>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {data.navMain.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton\n render={<a href={item.url} className=\"font-medium\" />}\n >\n {item.title}\n </SidebarMenuButton>\n {item.items?.length ? (\n <SidebarMenuSub>\n {item.items.map((item) => (\n <SidebarMenuSubItem key={item.title}>\n <SidebarMenuSubButton\n isActive={item.isActive}\n render={<a href={item.url} />}\n >\n {item.title}\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n ))}\n </SidebarMenuSub>\n ) : null}\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"sidebar",
|
||||
"dashboard"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
79
apps/v4/public/r/styles/base-maia/sidebar-15.json
Normal file
79
apps/v4/public/r/styles/base-maia/sidebar-15.json
Normal file
File diff suppressed because one or more lines are too long
64
apps/v4/public/r/styles/base-maia/sidebar-16.json
Normal file
64
apps/v4/public/r/styles/base-maia/sidebar-16.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
30
apps/v4/public/r/styles/base-maia/signup-01.json
Normal file
30
apps/v4/public/r/styles/base-maia/signup-01.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-01",
|
||||
"title": "Signup 01",
|
||||
"description": "A simple signup form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-01/page.tsx",
|
||||
"content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-01/components/signup-form\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-01/components/signup-form.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {\n return (\n <Card {...props}>\n <CardHeader>\n <CardTitle>Create an account</CardTitle>\n <CardDescription>\n Enter your information below to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n <FieldDescription>\n We'll use this to contact you. We will not share your email\n with anyone else.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input id=\"password\" type=\"password\" required />\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">\n Confirm Password\n </FieldLabel>\n <Input id=\"confirm-password\" type=\"password\" required />\n <FieldDescription>Please confirm your password.</FieldDescription>\n </Field>\n <FieldGroup>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n <Button variant=\"outline\" type=\"button\">\n Sign up with Google\n </Button>\n <FieldDescription className=\"px-6 text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
30
apps/v4/public/r/styles/base-maia/signup-02.json
Normal file
30
apps/v4/public/r/styles/base-maia/signup-02.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-02",
|
||||
"title": "Signup 02",
|
||||
"description": "A two column signup page with a cover image.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-02/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n return (\n <div className=\"grid min-h-svh lg:grid-cols-2\">\n <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n <div className=\"flex justify-center gap-2 md:justify-start\">\n <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n </div>\n <div className=\"flex flex-1 items-center justify-center\">\n <div className=\"w-full max-w-xs\">\n <SignupForm />\n </div>\n </div>\n </div>\n <div className=\"bg-muted relative hidden lg:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-02/components/signup-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <h1 className=\"text-2xl font-bold\">Create your account</h1>\n <p className=\"text-muted-foreground text-sm text-balance\">\n Fill in the form below to create your account\n </p>\n </div>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"John Doe\"\n required\n className=\"bg-background\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>\n We'll use this to contact you. We will not share your email\n with anyone else.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input\n id=\"password\"\n type=\"password\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n <Input\n id=\"confirm-password\"\n type=\"password\"\n required\n className=\"bg-background\"\n />\n <FieldDescription>Please confirm your password.</FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n </Field>\n <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with GitHub\n </Button>\n <FieldDescription className=\"px-6 text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/signup-03.json
Normal file
31
apps/v4/public/r/styles/base-maia/signup-03.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-03",
|
||||
"title": "Signup 03",
|
||||
"description": "A signup page with a muted background color.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-03/page.tsx",
|
||||
"content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n return (\n <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"flex w-full max-w-sm flex-col gap-6\">\n <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-4\"\n />\n </div>\n Acme Inc.\n </a>\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-03/components/signup-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Create your account</CardTitle>\n <CardDescription>\n Enter your email below to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Field className=\"grid grid-cols-2 gap-4\">\n <Field>\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"confirm-password\">\n Confirm Password\n </FieldLabel>\n <Input id=\"confirm-password\" type=\"password\" required />\n </Field>\n </Field>\n <FieldDescription>\n Must be at least 8 characters long.\n </FieldDescription>\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n <FieldDescription className=\"text-center\">\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
31
apps/v4/public/r/styles/base-maia/signup-04.json
Normal file
31
apps/v4/public/r/styles/base-maia/signup-04.json
Normal file
File diff suppressed because one or more lines are too long
29
apps/v4/public/r/styles/base-maia/signup-05.json
Normal file
29
apps/v4/public/r/styles/base-maia/signup-05.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "signup-05",
|
||||
"title": "Signup 05",
|
||||
"description": "A simple signup form with social providers.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-05/page.tsx",
|
||||
"content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n return (\n <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <SignupForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/signup/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-maia/blocks/signup-05/components/signup-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <form>\n <FieldGroup>\n <div className=\"flex flex-col items-center gap-2 text-center\">\n <a\n href=\"#\"\n className=\"flex flex-col items-center gap-2 font-medium\"\n >\n <div className=\"flex size-8 items-center justify-center rounded-md\">\n <IconPlaceholder\n lucide=\"GalleryVerticalEndIcon\"\n tabler=\"IconLayoutRows\"\n hugeicons=\"LayoutBottomIcon\"\n phosphor=\"RowsIcon\"\n remixicon=\"RiGalleryLine\"\n className=\"size-6\"\n />\n </div>\n <span className=\"sr-only\">Acme Inc.</span>\n </a>\n <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n <FieldDescription>\n Already have an account? <a href=\"#\">Sign in</a>\n </FieldDescription>\n </div>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <Button type=\"submit\">Create Account</Button>\n </Field>\n <FieldSeparator>Or</FieldSeparator>\n <Field className=\"grid gap-4 sm:grid-cols-2\">\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Continue with Google\n </Button>\n </Field>\n </FieldGroup>\n </form>\n <FieldDescription className=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"signup"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
101
apps/v4/public/r/styles/base-mira/dashboard-01.json
Normal file
101
apps/v4/public/r/styles/base-mira/dashboard-01.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -7,7 +7,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-mira/ui/input-otp.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-2 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-2 relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground duration-1000 h-4 w-px\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName\n )}\n spellCheck={false}\n className={cn(\n \"disabled:cursor-not-allowed\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-2 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-2 relative flex items-center justify-center data-[active=true]:z-10\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n </div>\n )}\n </div>\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </div>\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
31
apps/v4/public/r/styles/base-mira/login-01.json
Normal file
31
apps/v4/public/r/styles/base-mira/login-01.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "login-01",
|
||||
"title": "Login 01",
|
||||
"description": "A simple login form.",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label",
|
||||
"field"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-mira/blocks/login-01/page.tsx",
|
||||
"content": "import { LoginForm } from \"@/registry/base-mira/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n <div className=\"w-full max-w-sm\">\n <LoginForm />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/login/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "registry/base-mira/blocks/login-01/components/login-form.tsx",
|
||||
"content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function LoginForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div className=\"flex items-center\">\n <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n <a\n href=\"#\"\n className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">Login</Button>\n <Button variant=\"outline\" type=\"button\">\n Login with Google\n </Button>\n <FieldDescription className=\"text-center\">\n Don't have an account? <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n </div>\n )\n}\n",
|
||||
"type": "registry:component"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"authentication",
|
||||
"login"
|
||||
],
|
||||
"type": "registry:block"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user