fix(registry) add 8bit button and card

public/r/8bit-main-menu.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/ui/8bit/blocks/main-menu.tsx",
-      "content": "import { Play, Power, Settings, Trophy, Users } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\n\nconst menuItems = [\n  {\n    label: \"START GAME\",\n    icon: Play,\n    action: () => console.log(\"Starting game...\"),\n  },\n  {\n    label: \"OPTIONS\",\n    icon: Settings,\n    action: () => console.log(\"Showing options...\"),\n  },\n  {\n    label: \"HIGH SCORES\",\n    icon: Trophy,\n    action: () => console.log(\"Showing high scores...\"),\n  },\n  {\n    label: \"MULTIPLAYER\",\n    icon: Users,\n    action: () => console.log(\"Multiplayer mode...\"),\n  },\n  { label: \"QUIT\", icon: Power, action: () => console.log(\"Quitting game...\") },\n];\n\nexport default function MainMenu() {\n  return (\n    <Card className=\"w-full md:w-[400px] mx-auto\">\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\n        <CardTitle>Main Menu</CardTitle>\n        <CardDescription>Retro 8-bit Quest</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-8\">\n          {menuItems.map((item) => (\n            <Button key={item.label} className=\"flex items-center gap-2\">\n              <item.icon className=\"size-4\" />\n              <span>{item.label}</span>\n            </Button>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Play, Power, Settings, Trophy, Users } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/8bit/card\";\n\nconst menuItems = [\n  {\n    label: \"START GAME\",\n    icon: Play,\n    action: () => console.log(\"Starting game...\"),\n  },\n  {\n    label: \"OPTIONS\",\n    icon: Settings,\n    action: () => console.log(\"Showing options...\"),\n  },\n  {\n    label: \"HIGH SCORES\",\n    icon: Trophy,\n    action: () => console.log(\"Showing high scores...\"),\n  },\n  {\n    label: \"MULTIPLAYER\",\n    icon: Users,\n    action: () => console.log(\"Multiplayer mode...\"),\n  },\n  { label: \"QUIT\", icon: Power, action: () => console.log(\"Quitting game...\") },\n];\n\nexport default function MainMenu() {\n  return (\n    <Card className=\"w-full md:w-[400px] mx-auto\">\n      <CardHeader className=\"flex flex-col items-center justify-center gap-2\">\n        <CardTitle>Main Menu</CardTitle>\n        <CardDescription>Retro 8-bit Quest</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-8\">\n          {menuItems.map((item) => (\n            <Button key={item.label} className=\"flex items-center gap-2\">\n              <item.icon className=\"size-4\" />\n              <span>{item.label}</span>\n            </Button>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/ui/8bit/blocks/main-menu.tsx"
     },
@@ -20,6 +20,18 @@
       "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n",
       "type": "registry:component",
       "target": "components/ui/8bit/styles/retro.css"
+    },
+    {
+      "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 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"
+    },
+    {
+      "path": "components/ui/8bit/card.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <div\n      className={cn(\n        \"relative border-y-6 border-foreground dark:border-ring !p-0\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 !w-full\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\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\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
+      "type": "registry:component",
+      "target": "components/ui/8bit/card.tsx"
     }
   ]
 }

registry.json

@@ -998,6 +998,16 @@
           "path": "components/ui/8bit/styles/retro.css",
           "type": "registry:component",
           "target": "components/ui/8bit/styles/retro.css"
+        },
+        {
+          "path": "components/ui/8bit/button.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/button.tsx"
+        },
+        {
+          "path": "components/ui/8bit/card.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/card.tsx"
         }
       ]
     },