{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "hold-button",
	"title": "Hold Button",
	"type": "registry:ui",
	"description": "A button that triggers an action only after being held for a specified duration.",
	"registryDependencies": [
		"button"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { Button } from '$lib/components/ui/button';\n\timport type { Snippet } from 'svelte';\n\n\ttype Direction = 'top' | 'bottom' | 'left' | 'right';\n\n\tlet {\n\t\tduration = 1500,\n\t\tonComplete,\n\t\tclass: className,\n\t\tchildren,\n\t\tfillColor = 'bg-black/10',\n\t\tfrom = 'bottom',\n\t\tonmousedown,\n\t\tonmouseup,\n\t\tontouchstart,\n\t\tontouchend,\n\t\t...rest\n\t}: {\n\t\tduration?: number;\n\t\tonComplete?: () => void;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t\tfillColor?: string;\n\t\tfrom?: Direction;\n\t\tonmousedown?: (e: MouseEvent) => void;\n\t\tonmouseup?: (e: MouseEvent) => void;\n\t\tontouchstart?: (e: TouchEvent) => void;\n\t\tontouchend?: (e: TouchEvent) => void;\n\t\t[key: string]: any;\n\t} = $props();\n\n\tlet isHolding = $state(false);\n\tlet completed = $state(false);\n\tlet timer: ReturnType<typeof setTimeout> | null = null;\n\n\tfunction startHold(e: any) {\n\t\tif (completed) return;\n\t\tisHolding = true;\n\n\t\ttimer = setTimeout(() => {\n\t\t\tif (isHolding) {\n\t\t\t\tcompleted = true;\n\t\t\t\tonComplete?.();\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tisHolding = false;\n\t\t\t\t\tcompleted = false;\n\t\t\t\t}, 200);\n\t\t\t}\n\t\t}, duration);\n\t}\n\n\tfunction cancelHold(e: any) {\n\t\tif (completed) return;\n\t\tisHolding = false;\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = null;\n\t\t}\n\t}\n\n\tconst transformStyles = $derived.by(() => {\n\t\tswitch (from) {\n\t\t\tcase 'top':\n\t\t\t\treturn {\n\t\t\t\t\torigin: 'origin-top',\n\t\t\t\t\ttransform: `scaleY(${isHolding ? 1 : 0})`\n\t\t\t\t};\n\t\t\tcase 'left':\n\t\t\t\treturn {\n\t\t\t\t\torigin: 'origin-left',\n\t\t\t\t\ttransform: `scaleX(${isHolding ? 1 : 0})`\n\t\t\t\t};\n\t\t\tcase 'right':\n\t\t\t\treturn {\n\t\t\t\t\torigin: 'origin-right',\n\t\t\t\t\ttransform: `scaleX(${isHolding ? 1 : 0})`\n\t\t\t\t};\n\t\t\tcase 'bottom':\n\t\t\tdefault:\n\t\t\t\treturn {\n\t\t\t\t\torigin: 'origin-bottom',\n\t\t\t\t\ttransform: `scaleY(${isHolding ? 1 : 0})`\n\t\t\t\t};\n\t\t}\n\t});\n</script>\n\n<Button\n\tclass={cn('relative overflow-hidden select-none', className)}\n\tonmousedown={(e) => {\n\t\tstartHold(e);\n\t\tonmousedown?.(e);\n\t}}\n\tonmouseup={(e) => {\n\t\tcancelHold(e);\n\t\tonmouseup?.(e);\n\t}}\n\tonmouseleave={cancelHold}\n\tontouchstart={(e) => {\n\t\tif (e.cancelable) e.preventDefault();\n\t\tstartHold(e);\n\t\tontouchstart?.(e);\n\t}}\n\tontouchend={(e) => {\n\t\tcancelHold(e);\n\t\tontouchend?.(e);\n\t}}\n\t{...rest}\n>\n\t<div\n\t\tclass={cn('absolute inset-0 pointer-events-none z-0', transformStyles.origin, fillColor)}\n\t\tstyle:transform={transformStyles.transform}\n\t\tstyle:transition=\"transform {isHolding ? duration : 100}ms linear\"\n\t></div>\n\n\t<span class=\"relative z-10 flex items-center gap-2 pointer-events-none\">\n\t\t{@render children()}\n\t</span>\n</Button>\n",
			"type": "registry:ui",
			"target": "hold-button/hold-button.svelte"
		},
		{
			"content": "import HoldButton from './hold-button.svelte';\nexport { HoldButton };\n",
			"type": "registry:ui",
			"target": "hold-button/index.ts"
		}
	]
}