feat: switch button to kobalte primitives

apps/docs/public/registry/index.json

@@ -62,7 +62,8 @@
   {
     "name": "button",
     "dependencies": [
-      "@kobalte/core"
+      "@kobalte/core",
+      "class-variance-authority"
     ],
     "files": [
       "ui/button.tsx"

apps/docs/public/registry/ui/button.json

@@ -1,12 +1,13 @@
 {
   "name": "button",
   "dependencies": [
-    "@kobalte/core"
+    "@kobalte/core",
+    "class-variance-authority"
   ],
   "files": [
     {
       "name": "button.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input hover:bg-accent hover:text-accent-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-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"size-10\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n\nexport interface ButtonProps\n  extends ComponentProps<\"button\">,\n    VariantProps<typeof buttonVariants> {}\n\nconst Button: Component<ButtonProps> = (props) => {\n  const [, rest] = splitProps(props, [\"variant\", \"size\", \"class\"])\n  return (\n    <button\n      class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
+      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { Button as ButtonPrimitive } from \"@kobalte/core\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input hover:bg-accent hover:text-accent-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-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"size-10\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n\nexport interface ButtonProps\n  extends ButtonPrimitive.ButtonRootProps,\n    VariantProps<typeof buttonVariants> {}\n\nconst Button: Component<ButtonProps> = (props) => {\n  const [, rest] = splitProps(props, [\"variant\", \"size\", \"class\"])\n  return (\n    <ButtonPrimitive.Root\n      class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
     }
   ],
   "type": "ui"

apps/docs/src/registry/registry.ts

@@ -40,7 +40,7 @@ const ui: Registry = [
   {
     name: "button",
     type: "ui",
-    dependencies: ["@kobalte/core"],
+    dependencies: ["@kobalte/core", "class-variance-authority"],
     files: ["ui/button.tsx"]
   },
   {

apps/docs/src/registry/ui/button.tsx

@@ -1,6 +1,7 @@
-import type { Component, ComponentProps } from "solid-js"
+import type { Component } from "solid-js"
 import { splitProps } from "solid-js"
 
+import { Button as ButtonPrimitive } from "@kobalte/core"
 import type { VariantProps } from "class-variance-authority"
 import { cva } from "class-variance-authority"
 
@@ -33,13 +34,13 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends ComponentProps<"button">,
+  extends ButtonPrimitive.ButtonRootProps,
     VariantProps<typeof buttonVariants> {}
 
 const Button: Component<ButtonProps> = (props) => {
   const [, rest] = splitProps(props, ["variant", "size", "class"])
   return (
-    <button
+    <ButtonPrimitive.Root
       class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}
       {...rest}
     />

apps/docs/src/routes/docs/components/button.mdx

@@ -56,11 +56,9 @@ import { Button } from "~/components/ui/button"
 You can use the `buttonVariants` helper to create a link that looks like a button.
 
 ```tsx
-import { A } from "solid-start"
-
 import { buttonVariants } from "~/components/ui/button"
 ```
 
 ```tsx
-<A class={buttonVariants({ variant: "outline" })}>Click here</A>
+<a class={buttonVariants({ variant: "outline" })}>Click here</a>
 ```