- "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n <ShadcnButton\n {...props}\n className={cn(\n \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center\",\n font !== \"normal\" && \"retro\",\n className\n )}\n size={size}\n variant={variant}\n asChild={asChild}\n >\n <div>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n {/* Bottom shadow */}\n <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n </>\n )}\n </>\n )}\n\n {size === \"icon\" && (\n <>\n <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n </>\n )}\n </div>\n </ShadcnButton>\n );\n}\n\nexport { Button };\n",
0 commit comments