{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"shadcnblocks/border-button","title":"Border Button - Corner accent border button","description":"A square-cornered button with L-shaped SVG accents at all four edges, using standard Button variants.","dependencies":["cn"],"registryDependencies":["button"],"files":[{"path":"components/shadcnblocks/border-button.tsx","content":"import { cn } from \"cn\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport type BorderCornerStyle = \"l\" | \"plus\" | \"square\" | \"double\" | \"dot\";\n\nconst cornerPlacements: Array<{ className: string }> = [\n  { className: \"absolute -bottom-px -left-px\" },\n  { className: \"absolute -bottom-px -right-px scale-x-[-1]\" },\n  { className: \"absolute -top-px -left-px scale-y-[-1]\" },\n  { className: \"absolute -top-px -right-px scale-[-1]\" },\n];\n\nexport const BorderButton = ({\n  children,\n  variant = \"outline\",\n  corners = \"l\",\n  className,\n}: {\n  children: React.ReactNode;\n  variant?:\n    | \"outline\"\n    | \"default\"\n    | \"destructive\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"link\";\n  corners?: BorderCornerStyle;\n  className?: string;\n}) => {\n  return (\n    <Button\n      variant={variant}\n      className={cn(\n        className,\n        \"relative overflow-visible rounded-none px-4! shadow-none\",\n      )}\n    >\n      {children}\n      {cornerPlacements.map((placement) => (\n        <CornerArt\n          key={placement.className}\n          style={corners}\n          className={placement.className}\n        />\n      ))}\n    </Button>\n  );\n};\n\nconst overflowVisibleStyles: Partial<Record<BorderCornerStyle, boolean>> = {\n  plus: true,\n  double: true,\n  dot: true,\n};\n\nconst CornerArt = ({\n  style,\n  className,\n}: {\n  style: BorderCornerStyle;\n  className?: string;\n}) => {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      overflow={overflowVisibleStyles[style] ? \"visible\" : undefined}\n      aria-hidden\n      className={cn(\"pointer-events-none size-3\", className)}\n    >\n      {cornerPaths[style]}\n    </svg>\n  );\n};\n\nconst stroke = {\n  stroke: \"currentColor\",\n  strokeWidth: 1,\n  strokeLinecap: \"square\" as const,\n};\n\nconst cornerPaths: Record<BorderCornerStyle, React.ReactNode> = {\n  l: (\n    <>\n      <path d=\"M0 0V12\" {...stroke} />\n      <path d=\"M0 12H12\" {...stroke} />\n    </>\n  ),\n  plus: (\n    <>\n      <path d=\"M-6 12 H6\" {...stroke} />\n      <path d=\"M0 6 V18\" {...stroke} />\n    </>\n  ),\n  square: <rect x=\"0\" y=\"8\" width=\"4\" height=\"4\" {...stroke} />,\n  double: (\n    <>\n      <path d=\"M0 0 V12\" {...stroke} />\n      <path d=\"M0 12 H12\" {...stroke} />\n      <path d=\"M-2 2 V14\" {...stroke} />\n      <path d=\"M-2 14 H10\" {...stroke} />\n    </>\n  ),\n  dot: (\n    <>\n      <circle cx=\"0\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n      <path d=\"M-4.5 12 H0\" {...stroke} />\n      <path d=\"M0 12 V16.5\" {...stroke} />\n    </>\n  ),\n};\n","type":"registry:component"}],"type":"registry:component","meta":{"license":"https://www.shadcnblocks.com/license"}}