{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:item",
  "title": "Button",
  "description": "A button component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/ui/button/button.tsx",
      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./button.module.css\";\n\nconst buttonVariants = cva(styles.base, {\n  variants: {\n    variant: {\n      primary: styles.primary,\n      secondary: styles.secondary,\n      destructive: styles.destructive,\n      ghost: styles.ghost,\n      outline: styles.outline,\n      link: styles.link,\n    },\n    size: {\n      sm: styles.sm,\n      md: styles.md,\n      lg: styles.lg,\n      icon: styles.icon,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    size: \"md\",\n  },\n});\n\nfunction Spinner() {\n  return (\n    <svg className={styles.spinner} fill=\"none\" height=\"16\" viewBox=\"0 0 24 24\" width=\"16\">\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeDasharray=\"31.416\"\n        strokeDashoffset=\"31.416\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"2\"\n      />\n    </svg>\n  );\n}\n\nfunction ArrowPointer({ pointLeft = false, pointExternal = false }: { pointLeft?: boolean; pointExternal?: boolean }) {\n  return (\n    <svg\n      className={cn(styles.arrow, pointLeft && styles.arrowLeft, pointExternal && styles.arrowExternal)}\n      data-slot=\"arrow\"\n      fill=\"none\"\n      viewBox=\"0 0 14 10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g>\n        <path\n          className={styles.arrowPoint}\n          d={pointLeft ? \"M14.8 1l-4 4 4 4\" : \"M-0.8 1l4 4-4 4\"}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"square\"\n          strokeLinejoin=\"miter\"\n          strokeWidth=\"2\"\n        />\n        <path\n          className={styles.arrowShaft}\n          d={pointLeft ? \"M14.8 5H9.8\" : \"M0 5h4.8\"}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"square\"\n          strokeLinejoin=\"miter\"\n          strokeWidth=\"2\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} data-slot=\"button\" {...props} />;\n}\n\nexport { Button, buttonVariants, Spinner, ArrowPointer };\n",
      "type": "registry:file",
      "target": "~/components/ui/button/button.tsx"
    },
    {
      "path": "registry/brook/ui/button/button.module.css",
      "content": ".base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius);\n  font-weight: 450;\n  line-height: 1.5;\n  transition:\n    transform 0.2s var(--ease-out-quad),\n    background-color 0.2s var(--ease-out-quad),\n    box-shadow 0.2s var(--ease-out-quad);\n  cursor: pointer;\n  outline: none;\n  position: relative;\n  overflow: hidden;\n  letter-spacing: -0.014em;\n  will-change: transform;\n}\n\n.base:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.base[data-disabled] {\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n/* Shared stacked border structure */\n.primary,\n.secondary,\n.destructive,\n.outline {\n  isolation: isolate;\n  border: 1px solid transparent;\n}\n\n.primary:not(.icon)::before,\n.secondary:not(.icon)::before,\n.destructive:not(.icon)::before,\n.outline:not(.icon)::before {\n  content: \"\";\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  border-radius: calc(var(--radius) - 1px);\n}\n\n.primary:active:not([data-disabled]),\n.destructive:active:not([data-disabled]),\n.primary[data-pressed],\n.destructive[data-pressed] {\n  box-shadow: inset 0 1px oklch(0 0 0 / 0.08);\n}\n\n.outline:active:not([data-disabled]),\n.outline[data-pressed] {\n  box-shadow: none;\n}\n\n/* Primary */\n.primary {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n  border-color: var(--primary);\n  box-shadow:\n    0 1px 2px oklch(from var(--primary) l c h / 0.24),\n    inset 0 1px oklch(1 0 0 / 0.16);\n}\n\n.primary:hover:not([data-disabled])::before {\n  background-color: oklch(from var(--primary-foreground) l c h / 0.1);\n}\n\n/* Secondary */\n.secondary {\n  background-color: var(--secondary);\n  color: var(--secondary-foreground);\n}\n\n.secondary:hover:not([data-disabled])::before,\n.secondary[data-pressed]::before {\n  background-color: oklch(from var(--secondary-foreground) l c h / 0.08);\n}\n\n/* Destructive */\n.destructive {\n  background-color: var(--destructive);\n  color: var(--destructive-foreground);\n  border-color: var(--destructive);\n  box-shadow:\n    0 1px 2px oklch(from var(--destructive) l c h / 0.24),\n    inset 0 1px oklch(1 0 0 / 0.16);\n}\n\n.destructive:hover:not([data-disabled])::before {\n  background-color: oklch(1 0 0 / 0.08);\n}\n\n/* Ghost */\n.ghost {\n  background-color: transparent;\n  color: var(--foreground);\n}\n\n.ghost:hover:not([data-disabled]),\n.ghost[data-popup-open] {\n  background-color: var(--accent);\n}\n\n/* Outline */\n.outline {\n  background-color: var(--card);\n  color: var(--muted-foreground);\n  border-color: var(--input);\n  box-shadow:\n    0 1px 2px oklch(0 0 0 / 0.05),\n    inset 0 -1px oklch(1 0 0 / 0.015);\n}\n\n:global(.dark).outline,\n:global([data-theme=\"dark\"]).outline {\n  box-shadow:\n    0 1px 2px oklch(0 0 0 / 0.2),\n    inset 0 -1px oklch(1 0 0 / 0.03);\n}\n\n:global([data-theme=\"light\"]).outline {\n  background-clip: padding-box;\n}\n\n.outline:hover:not([data-disabled])::before,\n.outline[data-popup-open]::before {\n  background-color: oklch(from var(--muted) l c h / 0.8);\n}\n\n.link {\n  background-color: transparent;\n  color: var(--muted-foreground);\n  padding: 0;\n  text-decoration: none;\n  transition: text-decoration 0.2s ease-out;\n}\n\n.link:hover:not([data-disabled]) {\n  text-decoration: underline;\n  color: var(--foreground);\n}\n\n.sm {\n  height: 2rem;\n  padding: 0 0.5rem;\n  font-size: 0.813rem;\n}\n\n.md {\n  height: 2.5rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.925rem;\n}\n\n.lg {\n  height: 3rem;\n  padding: 0.5rem 1.5rem;\n  font-size: 1rem;\n}\n\n.icon {\n  height: auto;\n  width: auto;\n  padding: 0.375rem;\n  font-size: 0.875rem;\n  aspect-ratio: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  min-height: 44px;\n  min-width: 44px;\n  z-index: -1;\n}\n\n.arrow {\n  margin-top: 0;\n  margin-left: 0.5rem;\n  margin-right: -0.5rem;\n  position: relative;\n  top: 0.5px;\n  overflow: visible;\n  width: 12px;\n  height: 10px;\n  transition: 200ms var(--ease-in-out-cubic);\n}\n\n.arrowLeft {\n  margin-left: -0.5rem;\n  margin-right: 0.5rem;\n}\n\n.arrowExternal {\n  /* Safari resolves % origins on <svg> against the viewBox (transform-box: view-box) */\n  transform-box: border-box;\n  transform-origin: 8%;\n  transition: transform 200ms var(--ease-in-out-cubic);\n}\n\n.base:hover .arrowExternal {\n  transform: rotate(-45deg);\n}\n\n.arrowPoint {\n  transition: transform 200ms var(--ease-in-out-cubic);\n}\n\n.arrowShaft {\n  transition:\n    transform 200ms var(--ease-in-out-cubic),\n    opacity 200ms var(--ease-in-out-cubic);\n  opacity: 0;\n  transform: translateX(-0.5px);\n}\n\n.base:hover .arrowPoint {\n  transform: translateX(2px);\n}\n\n.base:hover .arrowShaft {\n  opacity: 1;\n  transform: translateX(-2px);\n}\n\n.base:hover .arrowLeft .arrowPoint {\n  transform: translateX(-2px);\n}\n\n.base:hover .arrowLeft .arrowShaft {\n  opacity: 1;\n  transform: translateX(1px);\n}\n\n.spinner {\n  margin-right: 0.5rem;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n    stroke-dashoffset: 31.416;\n  }\n  to {\n    transform: rotate(360deg);\n    stroke-dashoffset: 0;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/button/button.module.css"
    }
  ]
}