{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-comparison",
  "title": "Comparison",
  "description": "Before/after slider — adaptado Kibo.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ds/ds-comparison.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface ComparisonProps extends React.HTMLAttributes<HTMLDivElement> {\n  before: string\n  after: string\n  beforeLabel?: string\n  afterLabel?: string\n  altBefore?: string\n  altAfter?: string\n}\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function Comparison({\n  className,\n  before,\n  after,\n  beforeLabel = \"Before\",\n  afterLabel = \"After\",\n  altBefore = \"Before\",\n  altAfter = \"After\",\n  ...props\n}: ComparisonProps) {\n  const [pos, setPos] = React.useState(50)\n  const dragging = React.useRef(false)\n\n  const handleMove = (e: React.PointerEvent) => {\n    if (!dragging.current) return\n    const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect()\n    const x = ((e.clientX - rect.left) / rect.width) * 100\n    setPos(Math.min(100, Math.max(0, x)))\n  }\n\n  return (\n    <div\n      data-slot=\"comparison\"\n      className={cn(\n        \"relative h-64 w-full overflow-hidden rounded-2xl border bg-card select-none\",\n        className\n      )}\n      onPointerMove={handleMove}\n      onPointerUp={() => (dragging.current = false)}\n      onPointerDown={(e) => {\n        dragging.current = true\n        handleMove(e)\n      }}\n      {...props}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={after}\n        alt={altAfter}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className=\"absolute inset-0 size-full object-cover\"\n      />\n      <div className=\"absolute top-2 left-2 rounded-full bg-background/80 px-2 py-1 text-xs font-medium backdrop-blur\">\n        {afterLabel}\n      </div>\n\n      <div\n        className=\"absolute inset-0 overflow-hidden\"\n        style={{ width: `${pos}%` }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={before}\n          alt={altBefore}\n          loading=\"lazy\"\n          decoding=\"async\"\n          className=\"absolute inset-0 size-full object-cover\"\n          style={{ width: `${100 / (pos / 100)}%` }}\n        />\n        <div className=\"absolute top-2 left-2 rounded-full bg-background/80 px-2 py-1 text-xs font-medium backdrop-blur\">\n          {beforeLabel}\n        </div>\n      </div>\n\n      <div\n        className=\"absolute inset-y-0 w-0.5 bg-card shadow-[0_0_0_1px_rgba(0,0,0,0.2)]\"\n        style={{ left: `${pos}%` }}\n        aria-hidden=\"true\"\n      >\n        <div className=\"absolute top-1/2 left-1/2 size-6 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-card shadow-md\" />\n      </div>\n      <input\n        type=\"range\"\n        min={0}\n        max={100}\n        value={pos}\n        onChange={(e) => setPos(Number(e.target.value))}\n        className=\"absolute inset-x-0 bottom-2 mx-auto h-2 w-32 cursor-ew-resize\"\n        aria-label={`${beforeLabel} vs ${afterLabel}`}\n        aria-valuenow={pos}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}