@postxl/generators 1.1.0 → 1.2.0

package/dist/frontend-core/template/src/components/ui/admin-sidebar/admin-sidebar.tsx

@@ -1,195 +0,0 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-
-import { useState } from 'react'
-
-export function AdminSidebar() {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({
-    Data: true,
-    PXL: true,
-    Advanced: true,
-  })
-
-  const toggleSchema = (schema: string) => {
-    setExpandedSchemas((prev) => ({
-      ...prev,
-      [schema]: !prev[schema],
-    }))
-  }
-
-  return (
-    <>
-      {/* Mobile toggle button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="fixed top-4 left-4 z-50 md:hidden p-2 bg-white dark:bg-gray-900 rounded shadow-lg border border-gray-200 dark:border-gray-700"
-        aria-label="Toggle admin menu"
-      >
-        {isOpen ? <ChevronDownIcon className="w-6 h-6" /> : <ChevronRightIcon className="w-6 h-6" />}
-      </button>
-
-      {/* Sidebar */}
-      <aside
-        className={`
-          fixed md:sticky top-0 left-0 h-screen bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
-          overflow-y-auto transition-all duration-300 z-40
-          ${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
-          ${isCollapsed ? 'w-16  min-w-16' : 'w-64 min-w-64'}
-        `}
-      >
-        <div className="p-4">
-          <div className="flex items-center justify-between mb-4">
-            {!isCollapsed && (
-              <a
-                href="/admin"
-                className="text-lg font-bold hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-              >
-                Admin
-              </a>
-            )}
-            <button
-              onClick={() => setIsCollapsed(!isCollapsed)}
-              className="hidden md:block p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors ml-auto"
-              aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {isCollapsed ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
-            </button>
-          </div>
-          {!isCollapsed && (
-            <nav>
-              <div key="Data" className="mb-4">
-                <button
-                  onClick={() => toggleSchema('Data')}
-                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                >
-                  <span>Data</span>
-                  {expandedSchemas['Data'] ? (
-                    <ChevronDownIcon className="w-4 h-4" />
-                  ) : (
-                    <ChevronRightIcon className="w-4 h-4" />
-                  )}
-                </button>
-                {expandedSchemas['Data'] && (
-                  <ul className="mt-2 ml-2 space-y-1">
-                    <li key="Country">
-                      <a
-                        href="/admin/countries"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        Country
-                      </a>
-                    </li>
-                    <li key="Post">
-                      <a
-                        href="/admin/posts"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        Post
-                      </a>
-                    </li>
-                    <li key="Publication">
-                      <a
-                        href="/admin/publications"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        Publication
-                      </a>
-                    </li>
-                    <li key="ViewStatistic">
-                      <Link
-                        href="/admin/viewStatistics"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        ViewStatistic
-                      </Link>
-                    </li>
-                  </ul>
-                )}
-              </div>
-              <div key="PXL" className="mb-4">
-                <button
-                  onClick={() => toggleSchema('PXL')}
-                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                >
-                  <span>PXL</span>
-                  {expandedSchemas['PXL'] ? (
-                    <ChevronDownIcon className="w-4 h-4" />
-                  ) : (
-                    <ChevronRightIcon className="w-4 h-4" />
-                  )}
-                </button>
-                {expandedSchemas['PXL'] && (
-                  <ul className="mt-2 ml-2 space-y-1">
-                    <li key="Action">
-                      <a
-                        href="/admin/actions"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        Action
-                      </a>
-                    </li>
-                    <li key="ActionOperation">
-                      <a
-                        href="/admin/actionOperations"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        ActionOperation
-                      </a>
-                    </li>
-                    <li key="File">
-                      <a
-                        href="/admin/files"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        File
-                      </a>
-                    </li>
-                    <li key="User">
-                      <a
-                        href="/admin/users"
-                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                      >
-                        User
-                      </a>
-                    </li>
-                  </ul>
-                )}
-              </div>
-              {process.env.NEXT_PUBLIC_ALLOW_ADMIN === 'true' && (
-                <div key="Advanced" className="mb-4">
-                  <button
-                    onClick={() => toggleSchema('Advanced')}
-                    className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                  >
-                    <span>Advanced</span>
-                    {expandedSchemas['Advanced'] ? (
-                      <ChevronDownIcon className="w-4 h-4" />
-                    ) : (
-                      <ChevronRightIcon className="w-4 h-4" />
-                    )}
-                  </button>
-                  {expandedSchemas['Advanced'] && (
-                    <ul className="mt-2 ml-2 space-y-1">
-                      <li key="DataManagement">
-                        <Link
-                          href="/admin/data-management"
-                          className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-                        >
-                          Data Management
-                        </Link>
-                      </li>
-                    </ul>
-                  )}
-                </div>
-              )}
-            </nav>
-          )}
-        </div>
-      </aside>
-
-      {/* Overlay for mobile */}
-      {isOpen && <div className="fixed inset-0 bg-black/20 z-30 md:hidden" onClick={() => setIsOpen(false)} />}
-    </>
-  )
-}

package/dist/frontend-core/template/src/components/ui/alert/alert.stories.tsx

@@ -1,61 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Alert, AlertDescription, AlertTitle } from './alert'
-import { RocketIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'
-
-const meta = {
-  title: 'Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      options: ['default', 'destructive'],
-    },
-  },
-} satisfies Meta<typeof Alert>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'The Alert component is used to display a message to the user.',
-      },
-    },
-  },
-  args: {
-    variant: 'default',
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center border rounded p-4">
-      <Alert {...args}>
-        <RocketIcon className="h-4 w-4" />
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-      </Alert>
-    </div>
-  ),
-}
-
-export const Destructive: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'The destructive variant is used for critical alerts that require immediate attention.',
-      },
-    },
-  },
-  args: {
-    variant: 'destructive',
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center border rounded p-4">
-      <Alert {...args}>
-        <ExclamationTriangleIcon className="h-4 w-4" />
-        <AlertTitle>Error!</AlertTitle>
-        <AlertDescription>Something went wrong. Please try again.</AlertDescription>
-      </Alert>
-    </div>
-  ),
-}

package/dist/frontend-core/template/src/components/ui/alert/alert.tsx

@@ -1,45 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = 'Alert'
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props}>
-      {children}
-    </h5>
-  ),
-)
-AlertTitle.displayName = 'AlertTitle'
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-  ),
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertTitle, AlertDescription }

package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './alert-dialog'
-
-const meta = {
-  title: 'AlertDialog',
-  component: AlertDialog,
-  tags: ['autodocs'],
-} satisfies Meta<typeof AlertDialog>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The alert-dialog is a modal dialog that alerts the user of a situation that requires their attention and provides actions to address the situation.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your account and remove your data from our
-              servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  ),
-}

package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -1,105 +0,0 @@
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-
-import * as React from 'react'
-
-import { buttonVariants } from '@components/ui/button/button'
-import { cn } from '@lib/utils'
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      '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',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        '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=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',
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-))
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/dist/frontend-core/template/src/components/ui/avatar/avatar.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Avatar, AvatarFallback, AvatarImage } from './avatar'
-
-const meta = {
-  title: 'Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Avatar>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The Avatar component is used to represent a user or entity. It can contain an image or fallback to initials.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-}

package/dist/frontend-core/template/src/components/ui/avatar/avatar.tsx

@@ -1,39 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/dist/frontend-core/template/src/components/ui/badge/badge.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Badge } from './badge'
-
-const meta = {
-  title: 'Badge',
-  component: Badge,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'secondary', 'destructive', 'outline', 'filter', 'info'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'xs', 'sm', 'md', 'lg'],
-    },
-  },
-} satisfies Meta<typeof Badge>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { variant: 'default', size: 'default' },
-  render: (args) => <Badge {...args}>Badge</Badge>,
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
-      <Badge variant="outline">Outline</Badge>
-      <Badge variant="filter">Filter</Badge>
-      <Badge variant="info">Info</Badge>
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2 items-center">
-      <Badge size="xs">Extra Small</Badge>
-      <Badge size="sm">Small</Badge>
-      <Badge size="default">Default</Badge>
-      <Badge size="md">Medium</Badge>
-      <Badge size="lg">Large</Badge>
-    </div>
-  ),
-}
-
-export const WithIcon: Story = {
-  render: () => (
-    <Badge>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="12" cy="12" r="10" />
-        <path d="m15 9-6 6" />
-        <path d="m9 9 6 6" />
-      </svg>
-      With Icon
-    </Badge>
-  ),
-}

package/dist/frontend-core/template/src/components/ui/badge/badge.tsx

@@ -1,48 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-base 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-hidden',
-  {
-    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 dark:bg-destructive/60',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        filter: 'bg-primary text-background border-0',
-        info: 'bg-yellow-500 text-foreground border-0',
-      },
-      size: {
-        default: '',
-        xs: 'h-3.5 text-sm',
-        sm: 'h-4.5 text-xs',
-        md: 'h-6 text-md',
-        lg: 'h-8 text-lg',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-function Badge({
-  className,
-  variant,
-  size,
-  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, size }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }