fix(button): support asChild prop broken by previous flex layout fix

Author: manumorante

components/ui/8bit/button.tsx

@@ -47,51 +47,97 @@ 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
       )}
       size={size}
       variant={variant}
       asChild={asChild}
     >
-      {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" && (
+          {variant !== "ghost" && variant !== "link" && size !== "icon" && (
             <>
-              {/* 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" />
+              {/* 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" && (
+          {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>
+      ) : (
         <>
-          <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" />
+          {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>

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      {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    </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"
     },