{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "baseui-button", "description": "A Base UI button component", "dependencies": ["@base-ui/react"], "registryDependencies": ["@craftdotui/utils"], "files": [ { "path": "packages/baseui/components/button/index.tsx", "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n/* -------------------------------------------------------------------------- */\n/* Variants */\n/* -------------------------------------------------------------------------- */\n\nconst buttonVariants = cva(\n\t[\n\t\t\"relative inline-flex items-center justify-center shrink-0 gap-2\",\n\t\t\"border rounded-md text-sm whitespace-nowrap outline-none transition cursor-pointer\",\n\t\t\"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n\t\t\"disabled:pointer-events-none disabled:opacity-60\",\n\t\t\"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\"[&_svg:not([class*='size-'])]:size-4\",\n\t].join(\" \"),\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-primary text-primary-foreground border-primary hover:bg-primary/90\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"bg-secondary text-secondary-foreground border-transparent hover:bg-secondary/90\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"bg-background text-foreground border-border hover:bg-accent\",\n\t\t\t\tghost: \"border-transparent bg-transparent hover:bg-muted\",\n\t\t\t\tlink: \"border-transparent bg-transparent underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\txs: \"h-7 px-2 text-xs\",\n\t\t\t\tsm: \"h-8 px-3 text-sm\",\n\t\t\t\tmd: \"h-8.5 px-3\",\n\t\t\t\tlg: \"h-9 px-4\",\n\t\t\t\txl: \"h-9.5 px-6\",\n\t\t\t\t\"icon-xs\": \"size-7 p-0\",\n\t\t\t\t\"icon-sm\": \"size-7.5 p-0\",\n\t\t\t\ticon: \"size-8 p-0\",\n\t\t\t\t\"icon-lg\": \"size-8.5 p-0\",\n\t\t\t\t\"icon-xl\": \"size-9 p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\n/* -------------------------------------------------------------------------- */\n/* Props */\n/* -------------------------------------------------------------------------- */\n\nexport interface ButtonProps\n\textends useRender.ComponentProps<\"button\">,\n\t\tVariantProps {\n\tloading?: boolean;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------------- */\n\nfunction Button({\n\tclassName,\n\tvariant,\n\tsize,\n\trender,\n\tloading,\n\tchildren,\n\t...props\n}: ButtonProps) {\n\t// Determine the type attribute based on whether we're rendering a native button\n\tconst type: React.ButtonHTMLAttributes[\"type\"] = render\n\t\t? undefined\n\t\t: \"button\";\n\n\t// Create children with loading spinner\n\tconst renderedChildren = (\n\t\t<>\n\t\t\t{loading && (\n\t\t\t\t\n\t\t\t)}\n\t\t\t{children}\n\t\t\n\t);\n\n\t// Prepare default props for the button\n\tconst defaultProps = {\n\t\tclassName: cn(\n\t\t\tbuttonVariants({ variant, size }),\n\t\t\tloading && \"cursor-wait opacity-80\",\n\t\t\tclassName,\n\t\t),\n\t\ttype,\n\t\t\"aria-busy\": loading || undefined,\n\t\t\"data-slot\": \"button\",\n\t\tdisabled: props.disabled || loading,\n\t\tchildren: renderedChildren, // Make sure children are included\n\t};\n\n\t// Merge default props with user props\n\tconst mergedProps = mergeProps<\"button\">(defaultProps, props);\n\n\t// Use useRender hook which handles the rendering logic\n\t// According to Base UI docs, this returns a React element\n\treturn useRender({\n\t\tdefaultTagName: \"button\",\n\t\tprops: mergedProps,\n\t\trender,\n\t});\n}\n\n/* -------------------------------------------------------------------------- */\n/* Exports */\n/* -------------------------------------------------------------------------- */\n\nexport { Button, buttonVariants };\n", "type": "registry:component", "target": "components/baseui/components/button.tsx" } ], "type": "registry:component" }