diff --git a/components/ui/8bit/button.tsx b/components/ui/8bit/button.tsx
index deffbd7a..f76ac7d9 100644
--- a/components/ui/8bit/button.tsx
+++ b/components/ui/8bit/button.tsx
@@ -47,7 +47,7 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
     <ShadcnButton
       {...props}
       className={cn(
-        "rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center",
+        "rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5",
         font !== "normal" && "retro",
         className
       )}
@@ -55,47 +55,91 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
       variant={variant}
       asChild={asChild}
     >
-      <div>
-        {children}
+      {asChild ? (
+        <span className="relative inline-flex items-center justify-center gap-1.5">
+          {children}
 
-        {variant !== "ghost" && variant !== "link" && size !== "icon" && (
-          <>
-            {/* Pixelated border */}
-            <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
-            <div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
-            {variant !== "outline" && (
-              <>
-                {/* Top shadow */}
-                <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
-                <div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
+          {variant !== "ghost" && variant !== "link" && size !== "icon" && (
+            <>
+              {/* Pixelated border */}
+              <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              {variant !== "outline" && (
+                <>
+                  {/* Top shadow */}
+                  <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
+                  <div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
 
-                {/* Bottom shadow */}
-                <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
-                <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
-              </>
-            )}
-          </>
-        )}
+                  {/* Bottom shadow */}
+                  <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
+                  <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
+                </>
+              )}
+            </>
+          )}
 
-        {size === "icon" && (
-          <>
-            <div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
-            <div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
-            <div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-            <div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-            <div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-            <div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-          </>
-        )}
-      </div>
+          {size === "icon" && (
+            <>
+              <div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+            </>
+          )}
+        </span>
+      ) : (
+        <>
+          {children}
+
+          {variant !== "ghost" && variant !== "link" && size !== "icon" && (
+            <>
+              {/* Pixelated border */}
+              <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              {variant !== "outline" && (
+                <>
+                  {/* Top shadow */}
+                  <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
+                  <div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
+
+                  {/* Bottom shadow */}
+                  <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
+                  <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
+                </>
+              )}
+            </>
+          )}
+
+          {size === "icon" && (
+            <>
+              <div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+              <div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
+            </>
+          )}
+        </>
+      )}
     </ShadcnButton>
   );
 }
diff --git a/public/r/8bit-button.json b/public/r/8bit-button.json
index 491edccb..f88051d1 100644
--- a/public/r/8bit-button.json
+++ b/public/r/8bit-button.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
diff --git a/public/r/8bit-calendar.json b/public/r/8bit-calendar.json
index 1202dee4..a8a6c236 100644
--- a/public/r/8bit-calendar.json
+++ b/public/r/8bit-calendar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/8bit/calendar.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { DayPicker } from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Calendar as ShadcnCalendar } from \"@/components/ui/calendar\";\n\nimport { buttonVariants } from \"./button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\";\nimport \"./styles/retro.css\";\n\nexport const calendarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> &\n  VariantProps<typeof calendarVariants>;\n\nfunction Calendar({ className, classNames, font, ...props }: CalendarProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-popover relative border-y-6 border-foreground dark:border-ring w-max\",\n        className\n      )}\n    >\n      <ShadcnCalendar\n        className={cn(\n          calendarVariants({\n            className,\n            font,\n          })\n        )}\n        classNames={{\n          nav_button: cn(\n            buttonVariants({ variant: \"outline\" }),\n            \"size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring\"\n          ),\n          day_button: cn(\n            buttonVariants({ variant: \"ghost\" }),\n            \"h-10 p-2 font-normal aria-selected:opacity-100\"\n          ),\n          caption_label: \"text-xs font-medium\",\n          ...classNames,\n        }}\n        components={{\n          MonthsDropdown: ({ className, ...props }) => {\n            const currentMonth = props.value as number;\n\n            const months = [\n              \"January\",\n              \"February\",\n              \"March\",\n              \"April\",\n              \"May\",\n              \"June\",\n              \"July\",\n              \"August\",\n              \"September\",\n              \"October\",\n              \"November\",\n              \"December\",\n            ];\n\n            const currentMonthName = months[currentMonth];\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentMonthName}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {months.map((month) => (\n                      <SelectItem key={month} value={month}>\n                        {month}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          YearsDropdown: ({ className }) => {\n            const currentYear = new Date().getFullYear();\n            const years = Array.from(\n              { length: currentYear - 1925 + 1 },\n              (_, i) => 1925 + i\n            );\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentYear?.toString()}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {years.map((year) => (\n                      <SelectItem key={year} value={year.toString()}>\n                        {year}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          Chevron: ({ className, ...props }) => {\n            if (props.orientation === \"left\") {\n              return (\n                <svg\n                  viewBox=\"0 0 256 256\"\n                  fill=\"currentColor\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"0.25\"\n                  color=\"\"\n                  className={cn(\"size-4 shrink-0\", className)}\n                  aria-label=\"chevron-left\"\n                  {...props}\n                >\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 136)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 152)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 72)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 168)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 112 120)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 104)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 88)\"\n                  ></rect>\n                </svg>\n              );\n            }\n\n            return (\n              <svg\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                stroke=\"currentColor\"\n                strokeWidth=\"0.25\"\n                color=\"\"\n                className={cn(\"size-4 shrink-0\", className)}\n                aria-label=\"chevron-right\"\n                {...props}\n              >\n                <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n              </svg>\n            );\n          },\n        }}\n        {...props}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Calendar };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { DayPicker } from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Calendar as ShadcnCalendar } from \"@/components/ui/calendar\";\n\nimport { buttonVariants } from \"./button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\";\nimport \"./styles/retro.css\";\n\nexport const calendarVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> &\n  VariantProps<typeof calendarVariants>;\n\nfunction Calendar({ className, classNames, font, ...props }: CalendarProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-popover relative border-y-6 border-foreground dark:border-ring w-max\",\n        className\n      )}\n    >\n      <ShadcnCalendar\n        className={cn(\n          calendarVariants({\n            className,\n            font,\n          })\n        )}\n        classNames={{\n          nav_button: cn(\n            buttonVariants({ variant: \"outline\" }),\n            \"size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring\"\n          ),\n          day_button: cn(\n            buttonVariants({ variant: \"ghost\" }),\n            \"h-10 font-normal aria-selected:opacity-100\"\n          ),\n          day: cn(\n            \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none\"\n          ),\n          caption_label: \"text-xs font-medium\",\n          ...classNames,\n        }}\n        components={{\n          MonthsDropdown: ({ className, ...props }) => {\n            const currentMonth = props.value as number;\n\n            const months = [\n              \"January\",\n              \"February\",\n              \"March\",\n              \"April\",\n              \"May\",\n              \"June\",\n              \"July\",\n              \"August\",\n              \"September\",\n              \"October\",\n              \"November\",\n              \"December\",\n            ];\n\n            const currentMonthName = months[currentMonth];\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentMonthName}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {months.map((month) => (\n                      <SelectItem key={month} value={month}>\n                        {month}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          YearsDropdown: ({ className }) => {\n            const currentYear = new Date().getFullYear();\n            const years = Array.from(\n              { length: currentYear - 1925 + 1 },\n              (_, i) => 1925 + i\n            );\n\n            return (\n              <div className={cn(\"flex flex-col gap-3 text-xs\", className)}>\n                <Select defaultValue={currentYear?.toString()}>\n                  <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n                    <SelectValue placeholder=\"Dropdown\" />\n                  </SelectTrigger>\n                  <SelectContent align=\"center\">\n                    {years.map((year) => (\n                      <SelectItem key={year} value={year.toString()}>\n                        {year}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            );\n          },\n          Chevron: ({ className, ...props }) => {\n            if (props.orientation === \"left\") {\n              return (\n                <svg\n                  viewBox=\"0 0 256 256\"\n                  fill=\"currentColor\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"0.25\"\n                  color=\"\"\n                  className={cn(\"size-4 shrink-0\", className)}\n                  aria-label=\"chevron-left\"\n                  {...props}\n                >\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 136)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 152)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 72)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 160 168)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 112 120)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 128 104)\"\n                  ></rect>\n                  <rect\n                    width=\"14\"\n                    height=\"14\"\n                    rx=\"1\"\n                    transform=\"matrix(-1 0 0 1 144 88)\"\n                  ></rect>\n                </svg>\n              );\n            }\n\n            return (\n              <svg\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                stroke=\"currentColor\"\n                strokeWidth=\"0.25\"\n                color=\"\"\n                className={cn(\"size-4 shrink-0\", className)}\n                aria-label=\"chevron-right\"\n                {...props}\n              >\n                <rect x=\"128\" y=\"136\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"152\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"72\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"96\" y=\"168\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"144\" y=\"120\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"128\" y=\"104\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n                <rect x=\"112\" y=\"88\" width=\"14\" height=\"14\" rx=\"1\"></rect>\n              </svg>\n            );\n          },\n        }}\n        {...props}\n      />\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nexport { Calendar };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/calendar.tsx"
     },
diff --git a/public/r/8bit-chart-area-step.json b/public/r/8bit-chart-area-step.json
index f549ccca..62f7895a 100644
--- a/public/r/8bit-chart-area-step.json
+++ b/public/r/8bit-chart-area-step.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/chart-area-step.tsx",
-      "content": "\"use client\";\n\nimport { Activity } from \"lucide-react\";\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/8bit/chart\";\n\nexport const description = \"A step area chart\";\n\nconst chartData = [\n  { month: \"January\", desktop: 99 },\n  { month: \"February\", desktop: 204 },\n  { month: \"March\", desktop: 180 },\n  { month: \"April\", desktop: 120 },\n  { month: \"May\", desktop: 180 },\n  { month: \"June\", desktop: 42 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig;\n\nexport default function ChartAreaStep() {\n  return (\n    <ChartContainer config={chartConfig}>\n      <AreaChart\n        accessibilityLayer\n        data={chartData}\n        margin={{\n          left: 12,\n          right: 12,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent hideLabel />}\n        />\n        <Area\n          dataKey=\"desktop\"\n          type=\"step\"\n          fill=\"var(--color-desktop)\"\n          stroke=\"var(--color-desktop)\"\n          activeDot={{\n            fill: \"var(--chart-active-dot)\",\n          }}\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Activity } from \"lucide-react\";\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/8bit/chart\";\n\nexport const description = \"A step area chart\";\n\nconst chartData = [\n  { month: \"January\", desktop: 99 },\n  { month: \"February\", desktop: 204 },\n  { month: \"March\", desktop: 180 },\n  { month: \"April\", desktop: 120 },\n  { month: \"May\", desktop: 180 },\n  { month: \"June\", desktop: 42 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig;\n\nexport default function ChartAreaStep() {\n  return (\n    <ChartContainer config={chartConfig}>\n      <AreaChart\n        accessibilityLayer\n        data={chartData}\n        margin={{\n          left: 20,\n          right: 20,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent hideLabel />}\n        />\n        <Area\n          dataKey=\"desktop\"\n          type=\"step\"\n          fill=\"var(--color-desktop)\"\n          stroke=\"var(--color-desktop)\"\n          activeDot={{\n            fill: \"var(--chart-active-dot)\",\n          }}\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/chart-area-step.tsx"
     },
diff --git a/public/r/8bit-combo-box.json b/public/r/8bit-combo-box.json
index 3e1853b1..d8e85b2a 100644
--- a/public/r/8bit-combo-box.json
+++ b/public/r/8bit-combo-box.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
diff --git a/public/r/8bit-login-form-2.json b/public/r/8bit-login-form-2.json
index d355ed6c..2d2233d4 100644
--- a/public/r/8bit-login-form-2.json
+++ b/public/r/8bit-login-form-2.json
@@ -19,7 +19,7 @@
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
diff --git a/public/r/8bit-login-form-with-image.json b/public/r/8bit-login-form-with-image.json
index d85009fc..123e914d 100644
--- a/public/r/8bit-login-form-with-image.json
+++ b/public/r/8bit-login-form-with-image.json
@@ -19,7 +19,7 @@
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
diff --git a/public/r/8bit-login-form.json b/public/r/8bit-login-form.json
index c0dfdcd4..1d870678 100644
--- a/public/r/8bit-login-form.json
+++ b/public/r/8bit-login-form.json
@@ -19,7 +19,7 @@
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },
diff --git a/public/r/8bit-login-page.json b/public/r/8bit-login-page.json
index 6f6ec952..c205cfe0 100644
--- a/public/r/8bit-login-page.json
+++ b/public/r/8bit-login-page.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "components/ui/8bit/button.tsx",
-      "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",
+      "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 gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\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        </span>\n      ) : (\n        <>\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        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },