{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-to-unlock",
  "title": "Slide to Unlock",
  "author": "ramanak <ramanak.dev@gmail.com>",
  "description": "A sleek, interactive slider inspired by the classic iPhone OS 'slide to unlock' gesture.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ramanak/utils",
    "@ramanak/shimmering-text"
  ],
  "files": [
    {
      "path": "src/registry/slide-to-unlock/slide-to-unlock.tsx",
      "content": "\"use client\"\r\n\r\nimport {\r\n  animate,\r\n  motion,\r\n  type MotionValue,\r\n  useMotionValue,\r\n  useTransform,\r\n} from \"motion/react\"\r\nimport {\r\n  type ComponentPropsWithoutRef,\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useRef,\r\n  useState,\r\n} from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ntype SlideToUnlockContextValue = {\r\n  x: MotionValue<number>\r\n  trackRef: React.RefObject<HTMLDivElement | null>\r\n  isDragging: boolean\r\n  handleWidth: number\r\n  textOpacity: MotionValue<number>\r\n  onDragStart: () => void\r\n  onDragEnd: () => void\r\n}\r\n\r\nconst SlideToUnlockContext = createContext<SlideToUnlockContextValue | null>(\r\n  null\r\n)\r\n\r\nfunction useSlideToUnlock() {\r\n  const context = useContext(SlideToUnlockContext)\r\n  if (!context) {\r\n    throw new Error(\r\n      `SlideToUnlock components must be used within SlideToUnlock`\r\n    )\r\n  }\r\n  return context\r\n}\r\n\r\nexport type SlideToUnlockRootProps = React.ComponentProps<\"div\"> & {\r\n  handleWidth?: number\r\n  onUnlock?: () => void\r\n}\r\n\r\nexport function SlideToUnlock({\r\n  className,\r\n  handleWidth = 56,\r\n  children,\r\n  onUnlock,\r\n  ...props\r\n}: SlideToUnlockRootProps) {\r\n  const trackRef = useRef<HTMLDivElement>(null)\r\n  const [isDragging, setIsDragging] = useState(false)\r\n  const x = useMotionValue(0)\r\n\r\n  const fadeDistance = handleWidth\r\n  const textOpacity = useTransform(x, [0, fadeDistance], [1, 0])\r\n\r\n  const handleDragStart = useCallback(() => {\r\n    setIsDragging(true)\r\n  }, [])\r\n\r\n  const handleDragEnd = useCallback(() => {\r\n    setIsDragging(false)\r\n\r\n    const trackWidth = trackRef.current?.offsetWidth || 0\r\n    const maxX = trackWidth - handleWidth\r\n\r\n    if (x.get() >= maxX) {\r\n      onUnlock?.()\r\n    } else {\r\n      animate(x, 0, { type: \"spring\", bounce: 0, duration: 0.25 })\r\n    }\r\n  }, [x, onUnlock, handleWidth])\r\n\r\n  return (\r\n    <SlideToUnlockContext.Provider\r\n      value={{\r\n        x,\r\n        trackRef,\r\n        isDragging,\r\n        handleWidth,\r\n        textOpacity,\r\n        onDragStart: handleDragStart,\r\n        onDragEnd: handleDragEnd,\r\n      }}\r\n    >\r\n      <div\r\n        data-slot=\"slide-to-unlock\"\r\n        className={cn(\r\n          \"w-[216px] rounded-xl bg-zinc-100 p-1 shadow-inner ring ring-black/5 ring-inset dark:bg-zinc-900 dark:ring-white/10\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </div>\r\n    </SlideToUnlockContext.Provider>\r\n  )\r\n}\r\n\r\nexport type SlideToUnlockTrackProps = React.ComponentProps<\"div\">\r\n\r\nexport function SlideToUnlockTrack({\r\n  className,\r\n  children,\r\n  ...props\r\n}: SlideToUnlockTrackProps) {\r\n  const { trackRef } = useSlideToUnlock()\r\n\r\n  return (\r\n    <div\r\n      ref={trackRef}\r\n      data-slot=\"track\"\r\n      className={cn(\r\n        \"relative flex h-10 items-center justify-center\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport type SlideToUnlockTextProps = Omit<\r\n  ComponentPropsWithoutRef<typeof motion.div>,\r\n  \"children\"\r\n> & {\r\n  children:\r\n  | React.ReactNode\r\n  | ((props: { isDragging: boolean }) => React.ReactNode)\r\n}\r\n\r\nexport function SlideToUnlockText({\r\n  className,\r\n  children,\r\n  style,\r\n  ...props\r\n}: SlideToUnlockTextProps) {\r\n  const { handleWidth, textOpacity, isDragging } = useSlideToUnlock()\r\n\r\n  return (\r\n    <motion.div\r\n      data-slot=\"text\"\r\n      data-dragging={isDragging}\r\n      className={cn(\"pl-1 text-lg font-medium\", className)}\r\n      style={{ marginLeft: handleWidth, opacity: textOpacity, ...style }}\r\n      {...props}\r\n    >\r\n      {typeof children === \"function\" ? children({ isDragging }) : children}\r\n    </motion.div>\r\n  )\r\n}\r\n\r\nexport type SlideToUnlockHandleProps = ComponentPropsWithoutRef<\r\n  typeof motion.div\r\n>\r\n\r\nexport function SlideToUnlockHandle({\r\n  className,\r\n  children,\r\n  style,\r\n  ...props\r\n}: SlideToUnlockHandleProps) {\r\n  const {\r\n    x,\r\n    trackRef,\r\n    onDragStart,\r\n    onDragEnd,\r\n    handleWidth: width,\r\n  } = useSlideToUnlock()\r\n\r\n  return (\r\n    <motion.div\r\n      data-slot=\"handle\"\r\n      className={cn(\r\n        \"absolute top-0 left-0 flex h-10 cursor-grab items-center justify-center rounded-lg bg-white text-zinc-400 shadow-sm active:cursor-grabbing\",\r\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6\",\r\n        className\r\n      )}\r\n      style={{ width, x, ...style }}\r\n      drag=\"x\"\r\n      dragDirectionLock\r\n      dragConstraints={trackRef}\r\n      dragElastic={0}\r\n      dragMomentum={false}\r\n      onDragStart={onDragStart}\r\n      onDragEnd={onDragEnd}\r\n      {...props}\r\n    >\r\n      {children ?? (\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 256 256\"\r\n          aria-hidden\r\n        >\r\n          <path\r\n            d=\"M237.66,133.66l-96,96A8,8,0,0,1,128,224V184H48a16,16,0,0,1-16-16V88A16,16,0,0,1,48,72h80V32a8,8,0,0,1,13.66-5.66l96,96A8,8,0,0,1,237.66,133.66Z\"\r\n            fill=\"currentColor\"\r\n          />\r\n        </svg>\r\n      )}\r\n    </motion.div>\r\n  )\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "docs": "https://www.ramana.dev/components/slide-to-unlock",
  "type": "registry:component"
}