Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(components): Add button variants to alert-dialog #3513

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(components): Add button variants to alert-dialog #3513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62e9656
feat(components): add button variant options to props of alert-dialog
saminitz Apr 17, 2024
7686d72
feat(components): add button variant options to props of alert-dialog…
saminitz Apr 17, 2024
3fd078e
build(registry): run `pnpm build:registry` command
saminitz Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/www/__registry__/default/block/dashboard-01.tsx
View file
Open in desktop
Expand Up @@ -229,7 +229,9 @@ export default function Dashboard() {
</Card>
</div>
<div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
<Card
className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
>
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Transactions</CardTitle>
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/default/block/dashboard-02.tsx
View file
Open in desktop
Expand Up @@ -227,8 +227,7 @@ export default function Dashboard() {
<h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
x-chunk="dashboard-02-chunk-1"
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
>
<div className="flex flex-col items-center gap-1 text-center">
<h3 className="text-2xl font-bold tracking-tight">
Expand Down
6 changes: 2 additions & 4 deletions apps/www/__registry__/default/block/dashboard-03.tsx
View file
Open in desktop
Expand Up @@ -302,8 +302,7 @@ export default function Dashboard() {
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
className="relative hidden flex-col items-start gap-8 md:flex"
x-chunk="dashboard-03-chunk-0"
className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
>
<form className="grid w-full items-start gap-6">
<fieldset className="grid gap-6 rounded-lg border p-4">
Expand Down Expand Up @@ -420,8 +419,7 @@ export default function Dashboard() {
</Badge>
<div className="flex-1" />
<form
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
x-chunk="dashboard-03-chunk-1"
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
>
<Label htmlFor="message" className="sr-only">
Message
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/default/block/dashboard-04.tsx
View file
Open in desktop
Expand Up @@ -157,8 +157,7 @@ export default function Dashboard() {
</div>
<div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
<nav
className="grid gap-4 text-sm text-muted-foreground"
x-chunk="dashboard-04-chunk-0"
className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
>
<Link href="#" className="font-semibold text-primary">
General
Expand Down
8 changes: 6 additions & 2 deletions apps/www/__registry__/default/block/dashboard-05.tsx
View file
Open in desktop
Expand Up @@ -283,7 +283,9 @@ export default function Dashboard() {
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
<Card
className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
>
<CardHeader className="pb-3">
<CardTitle>Your Orders</CardTitle>
<CardDescription className="max-w-lg text-balance leading-relaxed">
Expand Down Expand Up @@ -561,7 +563,9 @@ export default function Dashboard() {
</Tabs>
</div>
<div>
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<Card
className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
>
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/default/block/dashboard-07.tsx
View file
Open in desktop
Expand Up @@ -535,8 +535,7 @@ export default function Dashboard() {
</CardContent>
</Card>
<Card
className="overflow-hidden"
x-chunk="dashboard-07-chunk-4"
className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
>
<CardHeader>
<CardTitle>Product Images</CardTitle>
Expand Down
10 changes: 1 addition & 9 deletions apps/www/__registry__/index.tsx
View file
Open in desktop
Expand Up @@ -4525,20 +4525,12 @@ export const Index: Record<string, any> = {
subcategory: "Dashboard",
chunks: [{
name: "dashboard-06-chunk-0",
description: "A breadcrumb with two links and a page indicator.",
description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.",
component: React.lazy(() => import("@/registry/new-york/block/dashboard-06-chunk-0")),
file: "registry/new-york/block/dashboard-06-chunk-0.tsx",
container: {
className: "undefined"
}
},{
name: "dashboard-06-chunk-1",
description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.",
component: React.lazy(() => import("@/registry/new-york/block/dashboard-06-chunk-1")),
file: "registry/new-york/block/dashboard-06-chunk-1.tsx",
container: {
className: "undefined"
}
}]
},
"dashboard-07": {
Expand Down
4 changes: 3 additions & 1 deletion apps/www/__registry__/new-york/block/dashboard-01.tsx
View file
Open in desktop
Expand Up @@ -229,7 +229,9 @@ export default function Dashboard() {
</Card>
</div>
<div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
<Card
className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
>
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Transactions</CardTitle>
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/new-york/block/dashboard-02.tsx
View file
Open in desktop
Expand Up @@ -227,8 +227,7 @@ export default function Dashboard() {
<h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
x-chunk="dashboard-02-chunk-1"
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
>
<div className="flex flex-col items-center gap-1 text-center">
<h3 className="text-2xl font-bold tracking-tight">
Expand Down
6 changes: 2 additions & 4 deletions apps/www/__registry__/new-york/block/dashboard-03.tsx
View file
Open in desktop
Expand Up @@ -302,8 +302,7 @@ export default function Dashboard() {
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
className="relative hidden flex-col items-start gap-8 md:flex"
x-chunk="dashboard-03-chunk-0"
className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
>
<form className="grid w-full items-start gap-6">
<fieldset className="grid gap-6 rounded-lg border p-4">
Expand Down Expand Up @@ -420,8 +419,7 @@ export default function Dashboard() {
</Badge>
<div className="flex-1" />
<form
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
x-chunk="dashboard-03-chunk-1"
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
>
<Label htmlFor="message" className="sr-only">
Message
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/new-york/block/dashboard-04.tsx
View file
Open in desktop
Expand Up @@ -157,8 +157,7 @@ export default function Dashboard() {
</div>
<div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
<nav
className="grid gap-4 text-sm text-muted-foreground"
x-chunk="dashboard-04-chunk-0"
className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
>
<Link href="#" className="font-semibold text-primary">
General
Expand Down
8 changes: 6 additions & 2 deletions apps/www/__registry__/new-york/block/dashboard-05.tsx
View file
Open in desktop
Expand Up @@ -284,7 +284,9 @@ export default function Dashboard() {
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
<Card
className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
>
<CardHeader className="pb-3">
<CardTitle>Your Orders</CardTitle>
<CardDescription className="max-w-lg text-balance leading-relaxed">
Expand Down Expand Up @@ -562,7 +564,9 @@ export default function Dashboard() {
</Tabs>
</div>
<div>
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<Card
className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
>
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">
Expand Down
4 changes: 2 additions & 2 deletions apps/www/__registry__/new-york/block/dashboard-06.tsx
View file
Open in desktop
Expand Up @@ -216,7 +216,7 @@ export default function Dashboard() {
</nav>
</SheetContent>
</Sheet>
<Breadcrumb className="hidden md:flex" x-chunk="dashboard-06-chunk-0">
<Breadcrumb className="hidden md:flex">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
Expand Down Expand Up @@ -317,7 +317,7 @@ export default function Dashboard() {
</div>
</div>
<TabsContent value="all">
<Card x-chunk="dashboard-06-chunk-1">
<Card x-chunk="dashboard-06-chunk-0">
<CardHeader>
<CardTitle>Products</CardTitle>
<CardDescription>
Expand Down
3 changes: 1 addition & 2 deletions apps/www/__registry__/new-york/block/dashboard-07.tsx
View file
Open in desktop
Expand Up @@ -535,8 +535,7 @@ export default function Dashboard() {
</CardContent>
</Card>
<Card
className="overflow-hidden"
x-chunk="dashboard-07-chunk-4"
className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
>
<CardHeader>
<CardTitle>Product Images</CardTitle>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/alert-dialog.json
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"name": "alert-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n className\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold\", className)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(buttonVariants(), className)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n buttonVariants({ variant: \"outline\" }),\n \"mt-2 sm:mt-0\",\n className\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n"
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n className\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold\", className)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &\n VariantProps<typeof buttonVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &\n VariantProps<typeof buttonVariants>\n>(({ className, variant = \"outline\", size, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(buttonVariants({ variant, size }), \"mt-2 sm:mt-0\", className)}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n"
}
],
"type": "components:ui"
Expand Down