@postxl/generators 1.1.1 → 1.2.1

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 }

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

@@ -1,67 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from './breadcrumb'
-
-const meta = {
-  title: 'Breadcrumb',
-  component: Breadcrumb,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Breadcrumb>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-}
-
-export const WithEllipsis: StoryObj<typeof meta> = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-}

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

@@ -1,85 +0,0 @@
-import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<'nav'> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = 'Breadcrumb'
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
-  ({ className, ...props }, ref) => (
-    <ol
-      ref={ref}
-      className={cn(
-        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-        className,
-      )}
-      {...props}
-    />
-  ),
-)
-BreadcrumbList.displayName = 'BreadcrumbList'
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-  ),
-)
-BreadcrumbItem.displayName = 'BreadcrumbItem'
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<'a'> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'a'
-
-  return <Comp ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />
-})
-BreadcrumbLink.displayName = 'BreadcrumbLink'
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
-  ({ className, ...props }, ref) => (
-    <span
-      ref={ref}
-      aria-disabled="true"
-      aria-current="page"
-      className={cn('font-normal text-foreground', className)}
-      {...props}
-    />
-  ),
-)
-BreadcrumbPage.displayName = 'BreadcrumbPage'
-
-const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
-  <li aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
-    {children ?? <ChevronRightIcon />}
-  </li>
-)
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
-
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
-  <span aria-hidden="true" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
-    <DotsHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

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

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Button } from './button'
-import { expect, userEvent, screen } from 'storybook/test'
-
-const meta = {
-  title: 'Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: [
-        'default',
-        'secondary',
-        'destructive',
-        'outline',
-        'ghost',
-        'link',
-        'outlineInvert',
-        'extraGhost',
-        'extraGhost2',
-        'neutral',
-      ],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'xs', 'sm', 'lg', 'xs2', 'icon', 'iconSm', 'smLow', 'max'],
-    },
-  },
-} satisfies Meta<typeof Button>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { variant: 'default', size: 'default' },
-  render: (args) => (
-    <Button {...args} onClick={() => window.alert('click event fired')} data-testid="default-button">
-      Button
-    </Button>
-  ),
-  play: async () => {
-    // Use a simple global spy for window.alert
-    const originalAlert = window.alert
-    let alertCalled = false
-    window.alert = (msg) => {
-      if (msg === 'click event fired') alertCalled = true
-    }
-    const button = screen.getByTestId('default-button')
-    await userEvent.click(button)
-    expect(alertCalled).toBe(true)
-    window.alert = originalAlert
-  },
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="default">Default</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
-      <Button variant="outlineInvert">Outline Invert</Button>
-      <Button variant="extraGhost">Extra Ghost</Button>
-      <Button variant="extraGhost2">Extra Ghost 2</Button>
-      <Button variant="neutral">Neutral</Button>
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2 items-center">
-      <Button size="xs">Extra Small</Button>
-      <Button size="sm">Small</Button>
-      <Button size="default">Default</Button>
-      <Button size="lg">Large</Button>
-      <Button size="xs2">Extra Small 2</Button>
-      <Button size="icon">Icon</Button>
-      <Button size="iconSm">Icon Small</Button>
-      <Button size="smLow">Small Low</Button>
-      <Button size="max">Max</Button>
-    </div>
-  ),
-}
-
-export const WithIcon: Story = {
-  render: () => (
-    <Button>
-      <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
-    </Button>
-  ),
-}
-
-export const AsChild: Story = {
-  render: () => (
-    <Button asChild>
-      <a href="https://example.com" target="_blank" rel="noreferrer">
-        Link Button
-      </a>
-    </Button>
-  ),
-}
-
-export const Disabled: Story = {
-  args: {
-    children: 'Disabled',
-    disabled: true,
-  },
-  render: (args) => (
-    <Button {...args} onClick={() => window.alert('click event fired')} data-testid="disabled-button" />
-  ),
-  play: async () => {
-    // Use a simple global spy for window.alert
-    const originalAlert = window.alert
-    let alertCalled = false
-    window.alert = (msg) => {
-      if (msg === 'click event fired') alertCalled = true
-    }
-    const disabledButton = screen.getByTestId('disabled-button')
-
-    await expect(disabledButton).toHaveAttribute('disabled')
-    await expect(disabledButton).toHaveStyle('pointer-events: none')
-
-    await userEvent.click(disabledButton, { pointerEventsCheck: 0 })
-    expect(alertCalled).toBe(false)
-    window.alert = originalAlert
-  },
-}

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

@@ -1,68 +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 buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md cursor-pointer text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-        outlineInvert:
-          'border border-muted-foreground bg-background shadow-xs text-muted-foreground hover:bg-muted-foreground hover:text-background dark:bg-input/30 dark:border-input dark:hover:bg-input/70 dark:hover:text-foreground/80',
-        extraGhost: 'bg-none hover:text-accent-foreground text-muted-foreground hover:text-foreground',
-        extraGhost2: 'bg-none text-foreground hover:text-muted-foreground',
-        neutral: 'bg-background',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 px-6 has-[>svg]:px-4',
-        xs: 'py-1 px-2',
-        xs2: 'px-2 py-0.5',
-        icon: 'size-9',
-        iconSm: 'size-7.5',
-        smLow: 'h-7.5 gap-1.5 px-3 has-[>svg]:px-2.5',
-        max: 'h-full w-full',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonProps = React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-    /**
-     * E2E test_id to identify the button.
-     */
-    __e2e_test_id__?: string
-  }
-
-function Button({ className, variant, size, asChild = false, __e2e_test_id__, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      {...props}
-      data-test-id={__e2e_test_id__}
-      className={cn(buttonVariants({ variant, size, className }))}
-    />
-  )
-}
-
-export { Button, buttonVariants }