{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "Solid, outline, ghost and ink variants. Loading state, 2% press scale, visible focus ring.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* StoreKit Button. Reads only sk-* tokens: accent fill, accent-ink text,\n   btn radius. Press feedback is a 2% scale on :active, nothing bouncier.\n   Inline buttons never wrap. A full-width button (w-full) may grow to two\n   balanced lines instead of overflowing, so long labels in uppercase,\n   wide-tracked styles stay inside the button on narrow phones. */\n\ntype Variant = \"solid\" | \"outline\" | \"ghost\" | \"ink\"\ntype Size = \"sm\" | \"md\" | \"lg\" | \"icon\"\n\nconst variants: Record<Variant, string> = {\n  solid: \"bg-sk-accent text-sk-accent-ink hover:brightness-[1.06] active:brightness-95\",\n  outline: \"border border-sk-line bg-transparent text-sk-ink hover:bg-sk-ink/[0.04]\",\n  ghost: \"bg-transparent text-sk-ink hover:bg-sk-ink/[0.05]\",\n  ink: \"bg-sk-ink text-sk-paper hover:opacity-90\",\n}\nconst sizes: Record<Size, string> = {\n  sm: \"h-10 px-4 text-[13px] [&.w-full]:min-h-10 [&.w-full]:py-2\",\n  md: \"h-11 px-5 text-sm [&.w-full]:min-h-11 [&.w-full]:py-2\",\n  lg: \"h-12 px-7 text-[15px] [&.w-full]:min-h-12 [&.w-full]:py-2.5\",\n  icon: \"h-10 w-10\",\n}\n\nconst fullWidthWrap =\n  \"[&.w-full]:h-auto [&.w-full]:whitespace-normal [&.w-full]:text-center [&.w-full]:leading-tight [&.w-full>span]:flex-wrap [&.w-full>span]:justify-center [&.w-full>span]:gap-y-0.5\"\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: Variant\n  size?: Size\n  loading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant = \"solid\", size = \"md\", loading, disabled, children, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        \"sk-btn relative inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-sk-btn font-medium outline-none transition-[transform,background-color,color,opacity,filter] duration-200 ease-sk-out\",\n        \"focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\",\n        \"active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50\",\n        variants[variant],\n        sizes[size],\n        fullWidthWrap,\n        className\n      )}\n      {...props}\n    >\n      {loading ? (\n        <span className=\"absolute inset-0 grid place-items-center\">\n          <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </span>\n      ) : null}\n      <span className={cn(\"inline-flex items-center gap-2\", loading && \"opacity-0\")}>{children}</span>\n    </button>\n  )\n})\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/button.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 200
  }
}