{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-to-unlock",
  "title": "Slide to Unlock",
  "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
  "description": "Interactive slider inspired by the classic iPhone 'slide to unlock' gesture.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://xhakil.vercel.app/r/shimmering-text.json"
  ],
  "files": [
    {
      "path": "src/registry/components/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 type { ComponentProps, ComponentPropsWithoutRef, JSX } from \"react\"\r\nimport { createContext, useCallback, useContext, useRef, useState } 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 = ComponentProps<\"div\"> & {\r\n  /**\r\n   * Width of the drag handle in pixels.\r\n   * @defaultValue 56\r\n   * */\r\n  handleWidth?: number\r\n  /** Called when the handle is dragged fully to the end. */\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-54 rounded-xl bg-muted p-1 shadow-inner ring-1 ring-foreground/10 ring-inset\",\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 = 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  /**\r\n   * Accepts a render function as `children` to react to the dragging state.\r\n   *\r\n   * @example\r\n   * ```tsx\r\n   * <SlideToUnlockText>\r\n   *   {({ isDragging }) => <span>{isDragging ? \"Release...\" : \"Slide to unlock\"}</span>}\r\n   * </SlideToUnlockText>\r\n   * ```\r\n   */\r\n  children: JSX.Element | ((props: { isDragging: boolean }) => JSX.Element)\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      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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden>\r\n          <path\r\n            d=\"M24 12 12.75 3v4.696H0v8.608h12.75V21z\"\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://xhakil.vercel.app/components/slide-to-unlock",
  "type": "registry:component"
}