feat(button) add local font for react support

Author: TheOrcDev

components/ui/8bit/button.tsx

@@ -1,21 +1,16 @@
-import { Press_Start_2P } from "next/font/google";
-
 import { VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
 import { Button as ShadcnButton } from "@/components/ui/button";
 
-const pressStart = Press_Start_2P({
-  weight: ["400"],
-  subsets: ["latin"],
-});
+import "./retro.css";
 
 export const buttonVariants = cva("", {
   variants: {
     font: {
       normal: "",
-      retro: pressStart.className,
+      retro: "retro",
     },
     variant: {
       default: "bg-foreground",
@@ -53,7 +48,7 @@ function Button({ children, ...props }: BitButtonProps) {
       {...props}
       className={cn(
         "rounded-none active:translate-y-1 transition-transform relative",
-        font !== "normal" && pressStart.className,
+        font !== "normal" && "retro",
         className
       )}
       size={size}

components/ui/8bit/fonts/PressStart2P-Regular.ttf

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "Press Start 2P";
+  src: url("./fonts/PressStart2P-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+.retro {
+  font-family:
+    "Press Start 2P",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+}

components/ui/8bit/retro.css

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/8bit/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion as ShadcnAccordion,\n  AccordionContent as ShadcnAccordionContent,\n  AccordionItem as ShadcnAccordionItem,\n  AccordionTrigger as ShadcnAccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n})\n\nexport interface BitAccordionItemProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {\n  asChild?: boolean\n}\n\nfunction AccordionItem({\n  className,\n  children,\n  ...props\n}: BitAccordionItemProps) {\n  return (\n    <ShadcnAccordionItem\n      className={cn(\n        \"border-dashed border-b-4 border-foreground dark:border-ring relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionItem>\n  )\n}\n\nexport interface BitAccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  font?: \"normal\" | \"pressStart\"\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionTriggerProps) {\n  return (\n    <ShadcnAccordionTrigger\n      className={cn(font !== \"normal\" && pressStart.className, className)}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionTrigger>\n  )\n}\n\nexport interface BitAccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\n  font?: \"normal\" | \"pressStart\"\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionContentProps) {\n  return (\n    <div className=\"relative\">\n      <ShadcnAccordionContent\n        className={cn(\n          \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n          font !== \"normal\" && pressStart.className,\n          className\n        )}\n        {...props}\n      >\n        <div className=\"pb-4 pt-0 relative z-10 p-1\">{children}</div>\n      </ShadcnAccordionContent>\n\n      <AccordionPrimitive.Content asChild forceMount />\n    </div>\n  )\n}\n\nconst Accordion = ShadcnAccordion\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Press_Start_2P } from \"next/font/google\";\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Accordion as ShadcnAccordion,\n  AccordionContent as ShadcnAccordionContent,\n  AccordionItem as ShadcnAccordionItem,\n  AccordionTrigger as ShadcnAccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n});\n\nexport interface BitAccordionItemProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {\n  asChild?: boolean;\n}\n\nfunction AccordionItem({\n  className,\n  children,\n  ...props\n}: BitAccordionItemProps) {\n  return (\n    <ShadcnAccordionItem\n      className={cn(\n        \"border-dashed border-b-4 border-foreground dark:border-ring relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionItem>\n  );\n}\n\nexport interface BitAccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  font?: \"normal\" | \"pressStart\";\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionTriggerProps) {\n  return (\n    <ShadcnAccordionTrigger\n      className={cn(font !== \"normal\" && pressStart.className, className)}\n      {...props}\n    >\n      {children}\n    </ShadcnAccordionTrigger>\n  );\n}\n\nexport interface BitAccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {\n  font?: \"normal\" | \"pressStart\";\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  font,\n  ...props\n}: BitAccordionContentProps) {\n  return (\n    <div className=\"relative\">\n      <ShadcnAccordionContent\n        className={cn(\n          \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n          font !== \"normal\" && pressStart.className,\n          className\n        )}\n        {...props}\n      >\n        <div className=\"pb-4 pt-0 relative z-10 p-1\">{children}</div>\n      </ShadcnAccordionContent>\n\n      <AccordionPrimitive.Content asChild forceMount />\n    </div>\n  );\n}\n\nconst Accordion = ShadcnAccordion;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/accordion.tsx"
     }