@vendure/dashboard 3.2.0

package/src/lib/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils.js';
+
+const alertVariants = cva(
+    'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+    {
+        variants: {
+            variant: {
+                default: 'bg-background text-foreground',
+                destructive:
+                    'border-destructive/50 text-destructive dark:text-destructive-foreground/80 dark:border-destructive [&>svg]:text-current dark:bg-destructive/50',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+);
+
+function Alert({
+    className,
+    variant,
+    ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+    return (
+        <div
+            data-slot="alert"
+            role="alert"
+            className={cn(alertVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-title"
+            className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-description"
+            className={cn(
+                'col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/lib/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils.js';
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+            {...props}
+        />
+    );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn('aspect-square size-full', className)}
+            {...props}
+        />
+    );
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+            {...props}
+        />
+    );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/lib/components/ui/badge.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils.js';
+
+const badgeVariants = cva(
+    'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+                secondary:
+                    'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+                destructive:
+                    'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+                outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+                success: 'border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+);
+
+function Badge({
+    className,
+    variant,
+    asChild = false,
+    ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : 'span';
+
+    return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/lib/components/ui/breadcrumb.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+    return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+    return (
+        <ol
+            data-slot="breadcrumb-list"
+            className={cn(
+                'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+    return (
+        <li
+            data-slot="breadcrumb-item"
+            className={cn('inline-flex items-center gap-1.5', className)}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbLink({
+    asChild,
+    className,
+    ...props
+}: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+}) {
+    const Comp = asChild ? Slot : 'a';
+
+    return (
+        <Comp
+            data-slot="breadcrumb-link"
+            className={cn('hover:text-foreground transition-colors', className)}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+    return (
+        <span
+            data-slot="breadcrumb-page"
+            role="link"
+            aria-disabled="true"
+            aria-current="page"
+            className={cn('text-foreground font-normal', className)}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+    return (
+        <li
+            data-slot="breadcrumb-separator"
+            role="presentation"
+            aria-hidden="true"
+            className={cn('[&>svg]:size-3.5', className)}
+            {...props}
+        >
+            {children ?? <ChevronRight />}
+        </li>
+    );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+    return (
+        <span
+            data-slot="breadcrumb-ellipsis"
+            role="presentation"
+            aria-hidden="true"
+            className={cn('flex size-9 items-center justify-center', className)}
+            {...props}
+        >
+            <MoreHorizontal className="size-4" />
+            <span className="sr-only">More</span>
+        </span>
+    );
+}
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+};

package/src/lib/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils.js';
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+                destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+                outline:
+                    'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                sm: 'h-8 rounded-md px-3 text-xs',
+                lg: 'h-10 rounded-md px-8',
+                icon: 'h-9 w-9',
+                xs: 'h-5 rounded-md px-2 text-xs',
+                'icon-sm': 'h-7 w-7 text-xs',
+                'icon-xs': 'h-5 w-5 text-xs',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/lib/components/ui/calendar.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/lib/utils.js';
+import { buttonVariants } from '@/components/ui/button.js';
+
+function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    ...props
+}: React.ComponentProps<typeof DayPicker>) {
+    return (
+        <DayPicker
+            showOutsideDays={showOutsideDays}
+            className={cn('p-3', className)}
+            classNames={{
+                months: 'flex flex-col sm:flex-row gap-2',
+                month: 'flex flex-col gap-4',
+                caption: 'flex justify-center pt-1 relative items-center w-full',
+                caption_label: 'text-sm font-medium',
+                nav: 'flex items-center gap-1',
+                nav_button: cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                ),
+                nav_button_previous: 'absolute left-1',
+                nav_button_next: 'absolute right-1',
+                table: 'w-full border-collapse space-x-1',
+                head_row: 'flex',
+                head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+                row: 'flex w-full mt-2',
+                cell: cn(
+                    'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
+                    props.mode === 'range'
+                        ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+                        : '[&:has([aria-selected])]:rounded-md',
+                ),
+                day: cn(
+                    buttonVariants({ variant: 'ghost' }),
+                    'size-8 p-0 font-normal aria-selected:opacity-100',
+                ),
+                day_range_start:
+                    'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
+                day_range_end: 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
+                day_selected:
+                    'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+                day_today: 'bg-accent text-accent-foreground',
+                day_outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+                day_disabled: 'text-muted-foreground opacity-50',
+                day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+                day_hidden: 'invisible',
+                ...classNames,
+            }}
+            components={{
+                IconLeft: ({ className, ...props }) => (
+                    <ChevronLeft className={cn('size-4', className)} {...props} />
+                ),
+                IconRight: ({ className, ...props }) => (
+                    <ChevronRight className={cn('size-4', className)} {...props} />
+                ),
+            }}
+            {...props}
+        />
+    );
+}
+
+export { Calendar };

package/src/lib/components/ui/card.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card"
+            className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)}
+            {...props}
+        />
+    );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="card-header" className={cn('flex flex-col gap-1.5 p-6', className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn('leading-none font-semibold tracking-tight', className)}
+            {...props}
+        />
+    );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="card-content" className={cn('p-6 pt-0', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="card-footer" className={cn('flex items-center p-6 pt-0', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/lib/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            className={cn(
+                'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="flex items-center justify-center text-current transition-none"
+            >
+                <CheckIcon className="size-3.5" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    );
+}
+
+export { Checkbox };

package/src/lib/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/lib/components/ui/command.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog.js';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+    return (
+        <CommandPrimitive
+            data-slot="command"
+            className={cn(
+                'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandDialog({
+    title = 'Command Palette',
+    description = 'Search for a command to run...',
+    children,
+    ...props
+}: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <Dialog {...props}>
+            <DialogHeader className="sr-only">
+                <DialogTitle>{title}</DialogTitle>
+                <DialogDescription>{description}</DialogDescription>
+            </DialogHeader>
+            <DialogContent className="overflow-hidden p-0">
+                <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+    return (
+        <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+            <SearchIcon className="size-4 shrink-0 opacity-50" />
+            <CommandPrimitive.Input
+                data-slot="command-input"
+                className={cn(
+                    'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+                    className,
+                )}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+    return (
+        <CommandPrimitive.List
+            data-slot="command-list"
+            className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+            {...props}
+        />
+    );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+    return (
+        <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
+    );
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+    return (
+        <CommandPrimitive.Group
+            data-slot="command-group"
+            className={cn(
+                'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+    return (
+        <CommandPrimitive.Separator
+            data-slot="command-separator"
+            className={cn('bg-border -mx-1 h-px', className)}
+            {...props}
+        />
+    );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+    return (
+        <CommandPrimitive.Item
+            data-slot="command-item"
+            className={cn(
+                "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+    return (
+        <span
+            data-slot="command-shortcut"
+            className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};