{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Pixelact Button",
  "description": "A simple button component.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/ui/pixelact-ui/button/index.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\nimport \"@/components/ui/pixelact-ui/styles/styles.css\";\nimport \"./button.css\";\n\nconst pixelButtonVariants = cva(\n  \"pixel__button pixel-font cursor-pointer rounded-none w-fit items-center justify-center whitespace-nowrap text-sm transition-colors transition-all duration-100\",\n  {\n    variants: {\n      variant: {\n        default: \"pixel-default__button box-shadow-margin bg-white text-black\",\n        secondary: \"pixel-secondary__button box-shadow-margin\",\n        warning: \"pixel-warning__button box-shadow-margin\",\n        success: \"pixel-success__button box-shadow-margin\",\n        destructive: \"pixel-destructive__button box-shadow-margin\",\n        link: \"pixel-link__button bg-transparent text-link underline-offset-4 underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 px-3 text-xs\",\n        lg: \"h-11 px-8 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface PixelButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof pixelButtonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<\n  React.ComponentRef<typeof ShadcnButton>,\n  PixelButtonProps\n>(({ className, variant, size, ...props }, ref) => {\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(pixelButtonVariants({ variant, size }), className)}\n      ref={ref}\n    />\n  );\n});\n\nexport { Button };\n",
      "type": "registry:component",
      "target": "components/ui/pixelact-ui/button.tsx"
    },
    {
      "path": "components/ui/pixelact-ui/button/button.css",
      "content": ".pixel__button {\n  position: relative;\n  box-shadow: var(--pixel-box-shadow);\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &:active {\n    transform: translateY(3px);\n  }\n}\n\n.pixel-default__button {\n  &::after {\n    border-right: 4px solid\n      color-mix(in hsl, var(--default-inner-border-color) 70%, rgba(0, 0, 0));\n    border-bottom: 4px solid\n      color-mix(in hsl, var(--default-inner-border-color) 70%, rgba(0, 0, 0));\n  }\n  &:hover {\n    background-color: var(--default-inner-border-color);\n  }\n\n  &:active {\n    background-color: color-mix(\n      in hsl,\n      var(--default-inner-border-color) 70%,\n      rgb(0, 0, 0)\n    );\n  }\n}\n\n.pixel-secondary__button {\n  background-color: var(--color-secondary);\n  color: var(--color-secondary-foreground);\n\n  &::after {\n    border-right: 4px solid\n      color-mix(in hsl, var(--color-secondary) 70%, rgb(0, 0, 0));\n    border-bottom: 4px solid\n      color-mix(in hsl, var(--color-secondary) 70%, rgb(0, 0, 0));\n  }\n\n  &:hover {\n    background-color: color-mix(\n      in hsl,\n      var(--color-secondary) 90%,\n      rgb(0, 0, 0)\n    );\n  }\n\n  &:active {\n    background-color: color-mix(\n      in hsl,\n      var(--color-secondary) 70%,\n      rgb(0, 0, 0)\n    );\n  }\n}\n\n.pixel-success__button {\n  background-color: var(--success);\n  color: var(--success-foreground);\n\n  &::after {\n    border-right: 4px solid color-mix(in hsl, var(--success) 70%, rgb(0, 0, 0));\n    border-bottom: 4px solid color-mix(in hsl, var(--success) 70%, rgb(0, 0, 0));\n  }\n\n  &:hover {\n    background-color: color-mix(in hsl, var(--success) 90%, rgb(0, 0, 0));\n  }\n\n  &:active {\n    background-color: color-mix(in hsl, var(--success) 70%, rgb(0, 0, 0));\n  }\n}\n\n.pixel-destructive__button {\n  background-color: var(--destructive);\n  color: var(--destructive-foreground);\n\n  &::after {\n    border-right: 4px solid\n      color-mix(in hsl, var(--destructive) 70%, rgb(77, 77, 77));\n    border-bottom: 4px solid\n      color-mix(in hsl, var(--destructive) 70%, rgb(77, 77, 77));\n  }\n\n  &:hover {\n    background-color: color-mix(\n      in hsl,\n      var(--destructive) 90%,\n      rgb(77, 77, 77)\n    );\n  }\n\n  &:active {\n    background-color: color-mix(\n      in hsl,\n      var(--destructive) 70%,\n      rgb(77, 77, 77)\n    );\n  }\n}\n\n.pixel-warning__button {\n  background-color: var(--warning);\n  color: var(--warning-foreground);\n\n  &::after {\n    border-right: 4px solid\n      color-mix(in hsl, var(--warning) 70%, rgb(32, 32, 32));\n    border-bottom: 4px solid\n      color-mix(in hsl, var(--warning) 70%, rgb(32, 32, 32));\n  }\n\n  &:hover {\n    background-color: color-mix(in hsl, var(--warning) 90%, rgb(32, 32, 32));\n  }\n\n  &:active {\n    background-color: color-mix(in hsl, var(--warning) 70%, rgb(32, 32, 32));\n  }\n}\n\n.pixel-link__button {\n  box-shadow: none;\n  color: var(--link);\n  margin: 0;\n  padding: 0;\n\n  &:hover {\n    background-color: transparent;\n    color: color-mix(in hsl, var(--link) 70%, rgb(0, 0, 0));\n  }\n\n  &:active {\n    color: color-mix(in hsl, var(--link) 90%, rgb(0, 0, 0));\n  }\n\n  &:visited {\n    color: color-mix(in hsl, var(--link) 70%, rgb(0, 0, 0));\n  }\n}\n",
      "type": "registry:style",
      "target": "components/ui/pixelact-ui/button.css"
    },
    {
      "path": "components/ui/pixelact-ui/styles/styles.css",
      "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n:root {\n  --box-shadow-width: 4px;\n  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 black,\n    var(--box-shadow-width) 0 0 0 black, 0 var(--box-shadow-width) 0 0 black,\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 black;\n  --pixel-box-shadow-destructive: calc(-1 * (var(--box-shadow-width))) 0 0 0\n      var(--destructive),\n    var(--box-shadow-width) 0 0 0 var(--destructive),\n    0 var(--box-shadow-width) 0 0 var(--destructive),\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--destructive);\n  --default-inner-border-color: rgb(200, 200, 200);\n}\n\n.dark {\n  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 var(--ring),\n    var(--box-shadow-width) 0 0 0 var(--ring),\n    0 var(--box-shadow-width) 0 0 var(--ring),\n    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--ring);\n}\n\n.pixel-font {\n  font-family: \"Press Start 2P\", system-ui, -apple-system, sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n\n.box-shadow-margin {\n  margin: var(--box-shadow-width);\n}\n",
      "type": "registry:style",
      "target": "components/ui/pixelact-ui/styles/styles.css"
    }
  ],
  "type": "registry:component"
}