rk:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"onPointerDown"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"{start}"}]]}] 5b:["$","span","36",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"onPointerUp"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"{cancel}"}]]}] 5c:["$","span","37",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"onPointerLeave"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"{cancel}"}]]}] 5d:["$","span","38",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"hold-button relative h-10 w-48 overflow-hidden rounded-lg bg-destructive/10 text-sm font-medium text-destructive transition-transform duration-150 ease-out select-none active:scale-[0.97]\""}]]}] 5e:["$","span","39",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" >"}]]}] 5f:["$","span","40",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"span"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"flex items-center justify-center gap-2\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">"}]]}] 60:["$","span","41",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Trash2Icon"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"size-4\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" />"}]]}] 61:["$","span","42",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" Hold to delete"}]]}] 62:["$","span","43",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 63:["$","span","44",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"span"}]]}] 64:["$","span","45",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"aria-hidden"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"true\""}]]}] 65:["$","span","46",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","3",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"{"}]]}] 66:["$","span","47",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" done"}]]}] 67:["$","span","48",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"?"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"absolute inset-0 flex items-center justify-center gap-2 bg-destructive text-white\""}]]}] 68:["$","span","49",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":":"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"hold-overlay absolute inset-0 flex items-center justify-center gap-2 bg-destructive text-white\""}]]}] 69:["$","span","50",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" }"}]]}] 6a:["$","span","51",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" >"}]]}] 6b:["$","span","52",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" {done "}],["$","span","1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"?"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","3",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"CheckIcon"}],["$","span","4",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","5",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","6",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","7",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"size-4\""}],["$","span","8",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" /> "}],["$","span","9",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":":"}],["$","span","10",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","11",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Trash2Icon"}],["$","span","12",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","13",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","14",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","15",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"size-4\""}],["$","span","16",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" />}"}]]}] 6c:["$","span","53",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" {done "}],["$","span","1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"?"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"Deleted\""}],["$","span","4",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","5",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":":"}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","7",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"Hold to delete\""}],["$","span","8",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"}"}]]}] 6d:["$","span","54",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 6e:["$","span","55",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 6f:["$","span","56",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"p"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"text-xs text-muted-foreground\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">Press and hold for 1.5 seconds."}]]}]

Fill	clip-path inset(0 100% 0 0) → inset(0)
Hold	1.5s linear
Release	200ms --ease-out
Press	scale 0.97
Built with	CSS only

Specs#

Guidelines#

Use for

Avoid