var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var T=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),I=(e,l)=>{for(var s in l)a(e,s,{get:l[s],enumerable:!0})},h=(e,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let F of f(l))!b.call(e,F)&&F!==s&&a(e,F,{get:()=>l[F],enumerable:!(o=g(l,F))||o.enumerable});return e};var D=(e,l,s)=>(s=e!=null?u(S(e)):{},h(l||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e)),A=e=>h(a({},"__esModule",{value:!0}),e);var m=T((M,y)=>{y.exports=_jsx_runtime});var x={};I(x,{default:()=>R,frontmatter:()=>v});var n=D(m()),v={title:"Slide Button",description:"Slide that button",component:!0,links:null};function N(e){let l=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h1:"h1",a:"a",p:"p"},e.components),{ComponentPreview:s,Tabs:o,TabsList:F,TabsTrigger:i,TabsContent:t,Steps:d,Step:r,ComponentSource:p}=l;return s||c("ComponentPreview",!0),p||c("ComponentSource",!0),r||c("Step",!0),d||c("Steps",!0),o||c("Tabs",!0),t||c("TabsContent",!0),F||c("TabsList",!0),i||c("TabsTrigger",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:"slide-button",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]",description:"All variations",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import React, { forwardRef, useCallback, useMemo, useRef, useState, type JSX, } from "react" import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, type PanInfo, } from "framer-motion" import { Check, Loader2, SendHorizontal, X } from "lucide-react" import { cn } from "@/lib/utils" import { Button, ButtonProps } from "@/components/ui/button" const DRAG_CONSTRAINTS = { left: 0, right: 155 } const DRAG_THRESHOLD = 0.9 const BUTTON_STATES = { initial: { width: "12rem" }, completed: { width: "8rem" }, } const ANIMATION_CONFIG = { spring: { type: "spring", stiffness: 400, damping: 40, mass: 0.8, }, } type StatusIconProps = { status: string } const StatusIcon: React.FC = ({ status }) => { const iconMap: Record = useMemo( () => ({ loading: , success: , error: , }), [] ) if (!iconMap[status]) return null return ( {iconMap[status]} ) } const useButtonStatus = (resolveTo: "success" | "error") => { const [status, setStatus] = useState< "idle" | "loading" | "success" | "error" >("idle") const handleSubmit = useCallback(() => { setStatus("loading") setTimeout(() => { setStatus(resolveTo) }, 2000) }, [resolveTo]) return { status, handleSubmit } } const SlideButton = forwardRef( ({ className, ...props }, ref) => { const [isDragging, setIsDragging] = useState(false) const [completed, setCompleted] = useState(false) const dragHandleRef = useRef(null) const { status, handleSubmit } = useButtonStatus("success") const dragX = useMotionValue(0) const springX = useSpring(dragX, ANIMATION_CONFIG.spring) const dragProgress = useTransform( springX, [0, DRAG_CONSTRAINTS.right], [0, 1] ) const handleDragStart = useCallback(() => { if (completed) return setIsDragging(true) }, [completed]) const handleDragEnd = () => { if (completed) return setIsDragging(false) const progress = dragProgress.get() if (progress >= DRAG_THRESHOLD) { setCompleted(true) handleSubmit() } else { dragX.set(0) } } const handleDrag = ( _event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => { if (completed) return const newX = Math.max(0, Math.min(info.offset.x, DRAG_CONSTRAINTS.right)) dragX.set(newX) } const adjustedWidth = useTransform(springX, (x) => x + 10) return ( {!completed && ( )} {!completed && ( )} {completed && ( )} ) } ) SlideButton.displayName = "SlideButton" export SlideButton `,__src__:"registry/default/ui/slide-button.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" motion"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" PanInfo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "framer-motion"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Check"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Loader2"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SendHorizontal"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" X "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ButtonProps "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" left"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 155"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_THRESHOLD "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.9"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "12rem"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "8rem"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ANIMATION_CONFIG "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" stiffness"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 400,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" damping"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 40,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" mass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.8,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" StatusIcon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FC"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"status"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"],"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" loading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Loader2 className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"animate-spin"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" success"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Check size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"X size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }),"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" []"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" scale"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.5"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" scale"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" exit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useButtonStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "error"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "idle"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "error"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"idle"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 2000)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SlideButton "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCompleted"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragHandleRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useButtonStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ANIMATION_CONFIG"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragProgress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" [0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" [0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1]"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleDragStart "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" progress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"get"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"progress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_THRESHOLD"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCompleted"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" _event"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MouseEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TouchEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PointerEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" info"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PanInfo"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" newX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"info"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"newX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" adjustedWidth "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"springX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" x "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 10)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" transition"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ANIMATION_CONFIG"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"shadow-button-inset dark:shadow-button-inset-dark relative flex h-9 items-center justify-center rounded-full bg-gray-100"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" adjustedWidth"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-y-0 left-0 z-0 rounded-full bg-accent"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"dragHandleRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" drag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"x"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragConstraints"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragElastic"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.05}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragMomentum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={false}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDragStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute -left-4 z-10 flex cursor-grab items-center justify-start active:cursor-grabbing"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"icon"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-button rounded-full drop-shadow-xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isDragging "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "scale-105 transition-transform"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SendHorizontal className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"size-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-0 flex items-center justify-center"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" exit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "size-full rounded-full transition-all duration-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" mode"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"wait"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"StatusIcon status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SlideButton"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "SlideButton"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SlideButton"})]})]})})})}),` `,(0,n.jsxs)(l.h1,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(o,{defaultValue:"cli",children:[(0,n.jsxs)(F,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(d,{children:(0,n.jsxs)(r,{children:[(0,n.jsx)(l.p,{children:"Paste the below command in your terminal"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://legacy.skiper-ui.com/registry/slide-button.json" `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "http://legacy.skiper-ui.com/registry/slide-button.json"'})]})})})})]})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsxs)(r,{children:[(0,n.jsx)(l.p,{children:"Install the required dependencies."}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" i"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,n.jsxs)(r,{children:[(0,n.jsx)(l.p,{children:"Add util file"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"bash","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" function cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,n.jsxs)(r,{children:["Copy the source code to ",(0,n.jsx)(l.code,{children:"components/ui/slide-button.tsx"})," "]}),(0,n.jsx)(p,{name:"slide-button",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import React, { forwardRef, useCallback, useMemo, useRef, useState, type JSX, } from "react" import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, type PanInfo, } from "framer-motion" import { Check, Loader2, SendHorizontal, X } from "lucide-react" import { cn } from "@/lib/utils" import { Button, ButtonProps } from "@/components/ui/button" const DRAG_CONSTRAINTS = { left: 0, right: 155 } const DRAG_THRESHOLD = 0.9 const BUTTON_STATES = { initial: { width: "12rem" }, completed: { width: "8rem" }, } const ANIMATION_CONFIG = { spring: { type: "spring", stiffness: 400, damping: 40, mass: 0.8, }, } type StatusIconProps = { status: string } const StatusIcon: React.FC = ({ status }) => { const iconMap: Record = useMemo( () => ({ loading: , success: , error: , }), [] ) if (!iconMap[status]) return null return ( {iconMap[status]} ) } const useButtonStatus = (resolveTo: "success" | "error") => { const [status, setStatus] = useState< "idle" | "loading" | "success" | "error" >("idle") const handleSubmit = useCallback(() => { setStatus("loading") setTimeout(() => { setStatus(resolveTo) }, 2000) }, [resolveTo]) return { status, handleSubmit } } const SlideButton = forwardRef( ({ className, ...props }, ref) => { const [isDragging, setIsDragging] = useState(false) const [completed, setCompleted] = useState(false) const dragHandleRef = useRef(null) const { status, handleSubmit } = useButtonStatus("success") const dragX = useMotionValue(0) const springX = useSpring(dragX, ANIMATION_CONFIG.spring) const dragProgress = useTransform( springX, [0, DRAG_CONSTRAINTS.right], [0, 1] ) const handleDragStart = useCallback(() => { if (completed) return setIsDragging(true) }, [completed]) const handleDragEnd = () => { if (completed) return setIsDragging(false) const progress = dragProgress.get() if (progress >= DRAG_THRESHOLD) { setCompleted(true) handleSubmit() } else { dragX.set(0) } } const handleDrag = ( _event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => { if (completed) return const newX = Math.max(0, Math.min(info.offset.x, DRAG_CONSTRAINTS.right)) dragX.set(newX) } const adjustedWidth = useTransform(springX, (x) => x + 10) return ( {!completed && ( )} {!completed && ( )} {completed && ( )} ) } ) SlideButton.displayName = "SlideButton" export SlideButton `,__src__:"registry/default/ui/slide-button.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" motion"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" PanInfo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "framer-motion"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Check"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Loader2"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SendHorizontal"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" X "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ButtonProps "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" left"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 155"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_THRESHOLD "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.9"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "12rem"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "8rem"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ANIMATION_CONFIG "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" stiffness"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 400,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" damping"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 40,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" mass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.8,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" StatusIcon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FC"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"StatusIconProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"status"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"],"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" loading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Loader2 className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"animate-spin"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" success"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Check size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"X size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={20}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }),"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" []"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" scale"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.5"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" scale"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" exit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"iconMap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useButtonStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "error"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "idle"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "error"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"idle"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 2000)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolveTo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SlideButton "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCompleted"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragHandleRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useButtonStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"success"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ANIMATION_CONFIG"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragProgress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" [0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" [0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1]"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleDragStart "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsDragging"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" progress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"get"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"progress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_THRESHOLD"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCompleted"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" _event"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MouseEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TouchEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PointerEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" info"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" PanInfo"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" newX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0,"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"info"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"newX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" adjustedWidth "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useTransform"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"springX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" x "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 10)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" BUTTON_STATES"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" transition"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ANIMATION_CONFIG"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"spring"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"shadow-button-inset dark:shadow-button-inset-dark relative flex h-9 items-center justify-center rounded-full bg-gray-100"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" adjustedWidth"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-y-0 left-0 z-0 rounded-full bg-accent"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"dragHandleRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" drag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"x"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragConstraints"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"DRAG_CONSTRAINTS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragElastic"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.05}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" dragMomentum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={false}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDragStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDragEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleDrag"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" springX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute -left-4 z-10 flex cursor-grab items-center justify-start active:cursor-grabbing"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"icon"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-button rounded-full drop-shadow-xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isDragging "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "scale-105 transition-transform"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SendHorizontal className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"size-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"completed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-0 flex items-center justify-center"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" initial"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" animate"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" exit"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "loading"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "size-full rounded-full transition-all duration-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"crypto"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"randomUUID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" mode"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"wait"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"StatusIcon status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"status"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SlideButton"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "SlideButton"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SlideButton"})]})]})})})}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]})]})}function _(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(N,e)})):N(e)}var R=_;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(x);})(); ;return Component;

Slide Button

Installation

Paste the below command in your terminal npx shadcn@latest add "http://legacy.skiper-ui.com/registry/slide-button.json"Copy

Paste the below command in your terminal
`npx shadcn@latest add "http://legacy.skiper-ui.com/registry/slide-button.json"`