{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "image-compare", "type": "registry:ui", "title": "Image Compare", "description": "A before-and-after divider that follows a drag and springs to a click.", "categories": [ "media" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/image-compare.tsx", "content": "\"use client\";\nimport { Slider } from \"@base-ui/react/slider\";\nimport { animate, motion, useMotionValue, useReducedMotion, useTransform, type AnimationPlaybackControls } from \"motion/react\";\nimport { useLayoutEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { spring } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\ntype Reason = \"input-change\" | \"track-press\" | \"drag\" | \"keyboard\" | \"none\";\n\nexport type ImageCompareProps = Omit, \"children\" | \"defaultValue\" | \"onChange\"> & {\n /** Usually an ; it's sized to cover the frame. Shown on the left (or top). */\n before: React.ReactNode;\n /** Shown on the right (or bottom). Must share the framing of `before`. */\n after: React.ReactNode;\n beforeLabel?: string;\n afterLabel?: string;\n /** Where the divider sits, 0–100, from the left (or top). */\n value?: number;\n defaultValue?: number;\n onValueChange?: (value: number) => void;\n orientation?: \"horizontal\" | \"vertical\";\n /** Shape of the frame. Pass null to size it with className instead. */\n aspectRatio?: number | string | null;\n disabled?: boolean;\n /** Accessible name of the divider. */\n label?: string;\n};\n\nexport function ImageCompare({\n before,\n after,\n beforeLabel = \"Before\",\n afterLabel = \"After\",\n value: valueProp,\n defaultValue = 50,\n onValueChange,\n orientation = \"horizontal\",\n aspectRatio = \"3 / 2\",\n disabled = false,\n label = \"Divider position\",\n className,\n style,\n ...rest\n}: ImageCompareProps) {\n const [value, setValue] = useControllableState({ value: valueProp, defaultValue, onChange: onValueChange });\n const reduce = !!useReducedMotion();\n const vertical = orientation === \"vertical\";\n // The divider's drawn position. It follows a drag 1:1 and springs to a click, so a press\n // anywhere on the image reads as the divider travelling there rather than teleporting.\n const pos = useMotionValue(value);\n const reason = useRef(null);\n const running = useRef(null);\n const knob = useRef(null);\n\n useLayoutEffect(() => {\n running.current?.stop();\n const why = reason.current;\n reason.current = null;\n if (reduce || why === \"drag\" || why === \"keyboard\" || why === \"input-change\") pos.set(value);\n else running.current = animate(pos, value, spring.snappy);\n }, [value, pos, reduce]);\n\n const beforeClip = useTransform(pos, (p) => (vertical ? `inset(0 0 ${100 - p}% 0)` : `inset(0 ${100 - p}% 0 0)`));\n const afterClip = useTransform(pos, (p) => (vertical ? `inset(${p}% 0 0 0)` : `inset(0 0 0 ${p}%)`));\n const at = useTransform(pos, (p) => `${p}%`);\n\n // Base UI measures vertical sliders from the bottom; the divider is measured from the top.\n const toSlider = (v: number) => (vertical ? 100 - v : v);\n\n return (\n {\n reason.current = details.reason;\n setValue(toSlider(v as number));\n }}\n orientation={orientation}\n disabled={disabled}\n min={0}\n max={100}\n step={1}\n largeStep={10}\n className={cn(\"group/compare relative isolate select-none overflow-hidden rounded-xl bg-hover\", className)}\n style={{ aspectRatio: aspectRatio ?? undefined, ...style }}\n onDragStart={(e) => e.preventDefault()}\n {...rest}\n >\n {\n // Double-clicking the handle puts it back in the middle. The slider captures the pointer,\n // so the event lands on the control: hit-test the handle by position instead.\n const r = knob.current?.getBoundingClientRect();\n if (r && e.clientX >= r.left - 6 && e.clientX <= r.right + 6 && e.clientY >= r.top - 6 && e.clientY <= r.bottom + 6) {\n reason.current = null;\n setValue(50);\n }\n }}\n className={cn(\n \"absolute inset-0\",\n vertical ? \"cursor-row-resize touch-pan-x\" : \"cursor-col-resize touch-pan-y\",\n \"data-disabled:cursor-default\",\n )}\n >\n {after}\n \n {before}\n {/* Each label belongs to its image, so the divider cuts through it rather than it floating on top. */}\n {beforeLabel}\n \n \n {afterLabel}\n \n\n \n {/* The line: near-white in both themes, with a hairline so it holds on bright photos too. */}\n \n \n \n \n \n\n \n {\n const shown = Math.round(vertical ? 100 - v : v);\n return `${shown}% ${beforeLabel.toLowerCase()}, ${100 - shown}% ${afterLabel.toLowerCase()}`;\n }}\n className=\"pointer-events-none size-px opacity-0\"\n />\n \n \n \n );\n}\n\nfunction Layer({ children }: { children: React.ReactNode }) {\n return (\n
\n {children}\n
\n );\n}\n\nfunction Tag({ className, children }: { className?: string; children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n// Two chevrons that part while you drag, like the handle is being pulled open.\nfunction Arrows({ vertical }: { vertical: boolean }) {\n const part = \"transition-transform duration-200 ease-out-expo motion-reduce:transition-none\";\n return (\n \n \n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/image-compare" }