{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cornered-button",
  "title": "Cornered Button",
  "description": "A button with darker cornered edges.",
  "files": [
    {
      "path": "registry/default/ui/cornered-button/cornered-button.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst corneredButtonVariants = cva(\n  \"relative inline-flex items-center justify-center overflow-visible border border-border bg-background text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent/50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-3\",\n        md: \"h-9 px-4\",\n        lg: \"h-10 px-6\",\n      },\n      variant: {\n        default: \"\",\n        outline: \"bg-transparent\",\n        ghost: \"bg-transparent border-transparent hover:bg-accent\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent\",\n      },\n      corners: {\n        on: \"\",\n        off: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n      corners: \"on\",\n    },\n  }\n)\n\nexport interface CorneredButtonProps\n  extends React.ComponentPropsWithRef<\"button\">, VariantProps<typeof corneredButtonVariants> {\n  borderWidth?: number\n  cornerSize?: number\n  cornerColor?: string\n}\n\nexport function CorneredButton({\n  className,\n  children,\n  size,\n  variant,\n  corners = \"on\",\n  type = \"button\",\n  borderWidth = 1,\n  cornerSize = 8,\n  cornerColor,\n  style,\n  ref,\n  ...props\n}: CorneredButtonProps) {\n  const cornerBorder = `${borderWidth}px solid ${cornerColor ?? \"hsl(var(--border))\"}`\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-corners={corners}\n      className={cn(corneredButtonVariants({ size, variant }), className)}\n      style={{ borderWidth, ...style }}\n      {...props}\n    >\n      {children}\n\n      {corners === \"on\" && (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute\"\n          style={{ inset: `-${borderWidth}px` }}\n        >\n          {([\"tl\", \"tr\", \"bl\", \"br\"] as const).map((pos) => (\n            <span\n              key={pos}\n              className={cn(\n                \"absolute\",\n                pos === \"tl\" && \"top-0 left-0\",\n                pos === \"tr\" && \"top-0 right-0\",\n                pos === \"bl\" && \"bottom-0 left-0\",\n                pos === \"br\" && \"right-0 bottom-0\"\n              )}\n              style={{\n                width: cornerSize,\n                height: cornerSize,\n                borderTop: pos === \"tl\" || pos === \"tr\" ? cornerBorder : undefined,\n                borderBottom: pos === \"bl\" || pos === \"br\" ? cornerBorder : undefined,\n                borderLeft: pos === \"tl\" || pos === \"bl\" ? cornerBorder : undefined,\n                borderRight: pos === \"tr\" || pos === \"br\" ? cornerBorder : undefined,\n              }}\n            />\n          ))}\n        </span>\n      )}\n    </button>\n  )\n}\n\nexport { corneredButtonVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}