{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "color-picker",
	"title": "Color Picker",
	"type": "registry:ui",
	"description": "A mobile-first bottom navigation bar.",
	"dependencies": [
		"@lucide/svelte@^0.554.0"
	],
	"devDependencies": [
		"@lucide/svelte@^0.544.0"
	],
	"registryDependencies": [
		"button",
		"button-group",
		"command",
		"popover",
		"input"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\r\n\timport { cn } from '$UTILS$';\r\n\timport { Button } from '$lib/components/ui/button';\r\n\timport { ChevronDown } from '@lucide/svelte';\r\n\timport * as Popover from '$lib/components/ui/popover';\r\n\timport * as Command from '$lib/components/ui/command';\r\n\timport * as ButtonGroup from '$lib/components/ui/button-group';\r\n\timport { Input } from '$lib/components/ui/input';\r\n\r\n\ttype ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';\r\n\r\n\tlet {\r\n\t\tvalue = $bindable('#000000'),\r\n\t\tclass: className,\r\n\t\tallowOpacity = false,\r\n\t\tdefaultFormat = 'hex',\r\n\t\tformats = ['hex', 'rgb', 'hsl', 'oklch']\r\n\t}: {\r\n\t\tvalue?: string;\r\n\t\tclass?: string;\r\n\t\tallowOpacity?: boolean;\r\n\t\tdefaultFormat?: ColorFormat;\r\n\t\tformats?: ColorFormat[];\r\n\t} = $props();\r\n\r\n\tlet h = $state(0);\r\n\tlet s = $state(0);\r\n\tlet v = $state(0);\r\n\tlet a = $state(1);\r\n\tlet activeFormat = $state<ColorFormat>(defaultFormat);\r\n\tlet isDragging = $state(false);\r\n\r\n\tlet sbRef: HTMLDivElement | undefined = $state();\r\n\tlet hueRef: HTMLDivElement | undefined = $state();\r\n\tlet alphaRef: HTMLDivElement | undefined = $state();\r\n\tlet formatOpen = $state(false);\r\n\r\n\t$effect(() => {\r\n\t\tif (!isDragging) {\r\n\t\t\tconst parsed = parseColor(value);\r\n\t\t\tif (parsed) {\r\n\t\t\t\tconst currentStr = formatOutput(h, s, v, a, activeFormat);\r\n\t\t\t\tconst parsedStr = formatOutput(parsed.h, parsed.s, parsed.v, parsed.a, activeFormat);\r\n\r\n\t\t\t\tif (currentStr !== parsedStr) {\r\n\t\t\t\t\th = parsed.h;\r\n\t\t\t\t\ts = parsed.s;\r\n\t\t\t\t\tv = parsed.v;\r\n\t\t\t\t\ta = parsed.a;\r\n\t\t\t\t\tif (value.startsWith('rgb')) activeFormat = 'rgb';\r\n\t\t\t\t\telse if (value.startsWith('hsl')) activeFormat = 'hsl';\r\n\t\t\t\t\telse if (value.startsWith('oklch')) activeFormat = 'oklch';\r\n\t\t\t\t\telse activeFormat = 'hex';\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t});\r\n\r\n\tfunction updateExternal() {\r\n\t\tvalue = formatOutput(h, s, v, a, activeFormat);\r\n\t}\r\n\r\n\tfunction setFormat(fmt: ColorFormat) {\r\n\t\tactiveFormat = fmt;\r\n\t\tupdateExternal();\r\n\t\tformatOpen = false;\r\n\t}\r\n\r\n\tfunction parseColor(str: string) {\r\n\t\tstr = str.trim().toLowerCase();\r\n\t\tif (str.startsWith('#')) {\r\n\t\t\tlet hex = str.replace('#', '');\r\n\t\t\tlet r = 0,\r\n\t\t\t\tg = 0,\r\n\t\t\t\tb = 0,\r\n\t\t\t\talpha = 1;\r\n\t\t\tif (hex.length === 3) {\r\n\t\t\t\tr = parseInt(hex[0] + hex[0], 16);\r\n\t\t\t\tg = parseInt(hex[1] + hex[1], 16);\r\n\t\t\t\tb = parseInt(hex[2] + hex[2], 16);\r\n\t\t\t} else if (hex.length === 6) {\r\n\t\t\t\tr = parseInt(hex.substring(0, 2), 16);\r\n\t\t\t\tg = parseInt(hex.substring(2, 4), 16);\r\n\t\t\t\tb = parseInt(hex.substring(4, 6), 16);\r\n\t\t\t} else if (hex.length === 8) {\r\n\t\t\t\tr = parseInt(hex.substring(0, 2), 16);\r\n\t\t\t\tg = parseInt(hex.substring(2, 4), 16);\r\n\t\t\t\tb = parseInt(hex.substring(4, 6), 16);\r\n\t\t\t\talpha = parseInt(hex.substring(6, 8), 16) / 255;\r\n\t\t\t}\r\n\t\t\treturn { ...rgbToHsv(r, g, b), a: alpha };\r\n\t\t}\r\n\t\tif (str.startsWith('rgb')) {\r\n\t\t\tconst values = str.match(/[\\d.]+/g)?.map(Number);\r\n\t\t\tif (values && values.length >= 3)\r\n\t\t\t\treturn { ...rgbToHsv(values[0], values[1], values[2]), a: values[3] ?? 1 };\r\n\t\t}\r\n\t\tif (str.startsWith('hsl')) {\r\n\t\t\tconst values = str.match(/[\\d.]+/g)?.map(Number);\r\n\t\t\tif (values && values.length >= 3) {\r\n\t\t\t\tconst sNorm = values[1] / 100,\r\n\t\t\t\t\tlNorm = values[2] / 100;\r\n\t\t\t\tlet vNorm = lNorm + sNorm * Math.min(lNorm, 1 - lNorm);\r\n\t\t\t\tlet sHsv = vNorm === 0 ? 0 : 2 * (1 - lNorm / vNorm);\r\n\t\t\t\treturn { h: values[0], s: sHsv * 100, v: vNorm * 100, a: values[3] ?? 1 };\r\n\t\t\t}\r\n\t\t}\r\n\t\tif (str.startsWith('oklch')) {\r\n\t\t\tconst values = str\r\n\t\t\t\t.match(/[\\d.%]+/g)\r\n\t\t\t\t?.map((s) => (s.includes('%') ? parseFloat(s) / 100 : parseFloat(s)));\r\n\t\t\tif (values && values.length >= 3) {\r\n\t\t\t\tconst rgb = oklchToRgb(values[0], values[1], values[2]);\r\n\t\t\t\treturn { ...rgbToHsv(rgb.r, rgb.g, rgb.b), a: values[3] ?? 1 };\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn null;\r\n\t}\r\n\r\n\tfunction formatOutput(h: number, s: number, v: number, a: number, format: ColorFormat): string {\r\n\t\tif (format === 'hex') return hsvToHex(h, s, v, a);\r\n\t\tif (format === 'rgb') return hsvToRgbString(h, s, v, a);\r\n\t\tif (format === 'hsl') return hsvToHslString(h, s, v, a);\r\n\t\tif (format === 'oklch') return hsvToOklchString(h, s, v, a);\r\n\t\treturn '';\r\n\t}\r\n\r\n\tfunction rgbToHsv(r: number, g: number, b: number) {\r\n\t\tr /= 255;\r\n\t\tg /= 255;\r\n\t\tb /= 255;\r\n\t\tconst max = Math.max(r, g, b),\r\n\t\t\tmin = Math.min(r, g, b);\r\n\t\tlet h = 0,\r\n\t\t\ts = 0,\r\n\t\t\tv = max;\r\n\t\tconst d = max - min;\r\n\t\ts = max === 0 ? 0 : d / max;\r\n\t\tif (max !== min) {\r\n\t\t\tswitch (max) {\r\n\t\t\t\tcase r:\r\n\t\t\t\t\th = (g - b) / d + (g < b ? 6 : 0);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase g:\r\n\t\t\t\t\th = (b - r) / d + 2;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase b:\r\n\t\t\t\t\th = (r - g) / d + 4;\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t\th /= 6;\r\n\t\t}\r\n\t\treturn { h: h * 360, s: s * 100, v: v * 100 };\r\n\t}\r\n\r\n\tfunction hsvToRgb(h: number, s: number, v: number) {\r\n\t\tlet sNorm = s / 100,\r\n\t\t\tvNorm = v / 100;\r\n\t\tlet r = 0,\r\n\t\t\tg = 0,\r\n\t\t\tb = 0;\r\n\t\tconst i = Math.floor(h / 60),\r\n\t\t\tf = h / 60 - i,\r\n\t\t\tp = vNorm * (1 - sNorm),\r\n\t\t\tq = vNorm * (1 - f * sNorm),\r\n\t\t\tt = vNorm * (1 - (1 - f) * sNorm);\r\n\t\tswitch (i % 6) {\r\n\t\t\tcase 0:\r\n\t\t\t\tr = vNorm;\r\n\t\t\t\tg = t;\r\n\t\t\t\tb = p;\r\n\t\t\t\tbreak;\r\n\t\t\tcase 1:\r\n\t\t\t\tr = q;\r\n\t\t\t\tg = vNorm;\r\n\t\t\t\tb = p;\r\n\t\t\t\tbreak;\r\n\t\t\tcase 2:\r\n\t\t\t\tr = p;\r\n\t\t\t\tg = vNorm;\r\n\t\t\t\tb = t;\r\n\t\t\t\tbreak;\r\n\t\t\tcase 3:\r\n\t\t\t\tr = p;\r\n\t\t\t\tg = q;\r\n\t\t\t\tb = vNorm;\r\n\t\t\t\tbreak;\r\n\t\t\tcase 4:\r\n\t\t\t\tr = t;\r\n\t\t\t\tg = p;\r\n\t\t\t\tb = vNorm;\r\n\t\t\t\tbreak;\r\n\t\t\tcase 5:\r\n\t\t\t\tr = vNorm;\r\n\t\t\t\tg = p;\r\n\t\t\t\tb = q;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\treturn { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };\r\n\t}\r\n\r\n\tfunction hsvToOklchString(h: number, s: number, v: number, a: number) {\r\n\t\tconst rgb = hsvToRgb(h, s, v);\r\n\t\tconst oklch = rgbToOklch(rgb.r, rgb.g, rgb.b);\r\n\t\tconst L = (oklch.l * 100).toFixed(1) + '%';\r\n\t\tconst C = oklch.c.toFixed(3);\r\n\t\tconst H = (oklch.h || 0).toFixed(1);\r\n\r\n\t\tif (allowOpacity && a < 1) return `oklch(${L} ${C} ${H} / ${parseFloat(a.toFixed(2))})`;\r\n\t\treturn `oklch(${L} ${C} ${H})`;\r\n\t}\r\n\r\n\tfunction rgbToOklch(r: number, g: number, b: number) {\r\n\t\tr /= 255;\r\n\t\tg /= 255;\r\n\t\tb /= 255;\r\n\t\tr = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;\r\n\t\tg = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;\r\n\t\tb = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;\r\n\r\n\t\tconst l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;\r\n\t\tconst m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;\r\n\t\tconst s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;\r\n\r\n\t\tconst l_ = Math.cbrt(l),\r\n\t\t\tm_ = Math.cbrt(m),\r\n\t\t\ts_ = Math.cbrt(s);\r\n\r\n\t\tconst L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;\r\n\t\tconst A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;\r\n\t\tconst B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;\r\n\r\n\t\tconst C = Math.sqrt(A * A + B * B);\r\n\t\tlet H = (Math.atan2(B, A) * 180) / Math.PI;\r\n\t\tif (H < 0) H += 360;\r\n\r\n\t\treturn { l: L, c: C, h: H };\r\n\t}\r\n\r\n\tfunction oklchToRgb(l: number, c: number, h: number) {\r\n\t\tconst hRad = h * (Math.PI / 180);\r\n\t\tconst A = c * Math.cos(hRad);\r\n\t\tconst B = c * Math.sin(hRad);\r\n\t\tconst L = l;\r\n\r\n\t\tconst l_ = L + 0.3963377774 * A + 0.2158037573 * B;\r\n\t\tconst m_ = L - 0.1055613458 * A - 0.0638541728 * B;\r\n\t\tconst s_ = L - 0.0894841775 * A - 1.291485548 * B;\r\n\r\n\t\tconst lLin = l_ * l_ * l_;\r\n\t\tconst mLin = m_ * m_ * m_;\r\n\t\tconst sLin = s_ * s_ * s_;\r\n\r\n\t\tlet r = +4.0767416621 * lLin - 3.3077115913 * mLin + 0.2309699292 * sLin;\r\n\t\tlet g = -1.2684380046 * lLin + 2.6097574011 * mLin - 0.3413193965 * sLin;\r\n\t\tlet b = -0.0041960863 * lLin - 0.7034186147 * mLin + 1.707614701 * sLin;\r\n\r\n\t\tr = r >= 0.0031308 ? 1.055 * Math.pow(r, 1.0 / 2.4) - 0.055 : 12.92 * r;\r\n\t\tg = g >= 0.0031308 ? 1.055 * Math.pow(g, 1.0 / 2.4) - 0.055 : 12.92 * g;\r\n\t\tb = b >= 0.0031308 ? 1.055 * Math.pow(b, 1.0 / 2.4) - 0.055 : 12.92 * b;\r\n\r\n\t\tr = Math.min(Math.max(0, r), 1) * 255;\r\n\t\tg = Math.min(Math.max(0, g), 1) * 255;\r\n\t\tb = Math.min(Math.max(0, b), 1) * 255;\r\n\t\treturn { r, g, b };\r\n\t}\r\n\r\n\tfunction hsvToHex(h: number, s: number, v: number, a: number) {\r\n\t\tconst { r, g, b } = hsvToRgb(h, s, v);\r\n\t\tconst toHex = (x: number) => {\r\n\t\t\tconst hex = x.toString(16);\r\n\t\t\treturn hex.length === 1 ? '0' + hex : hex;\r\n\t\t};\r\n\t\tlet hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;\r\n\t\tif (allowOpacity && a < 1) hex += toHex(Math.round(a * 255));\r\n\t\treturn hex.toUpperCase();\r\n\t}\r\n\r\n\tfunction hsvToRgbString(h: number, s: number, v: number, a: number) {\r\n\t\tconst { r, g, b } = hsvToRgb(h, s, v);\r\n\t\tif (allowOpacity && a < 1) return `rgba(${r}, ${g}, ${b}, ${parseFloat(a.toFixed(2))})`;\r\n\t\treturn `rgb(${r}, ${g}, ${b})`;\r\n\t}\r\n\r\n\tfunction hsvToHslString(h: number, s: number, v: number, a: number) {\r\n\t\tconst sNorm = s / 100,\r\n\t\t\tvNorm = v / 100;\r\n\t\tlet l = ((2 - sNorm) * vNorm) / 2;\r\n\t\tlet sHsl = l && l < 1 ? (sNorm * vNorm) / (l < 0.5 ? l * 2 : 2 - l * 2) : sNorm;\r\n\t\tif (allowOpacity && a < 1)\r\n\t\t\treturn `hsla(${Math.round(h)}, ${Math.round(sHsl * 100)}%, ${Math.round(l * 100)}%, ${parseFloat(a.toFixed(2))})`;\r\n\t\treturn `hsl(${Math.round(h)}, ${Math.round(sHsl * 100)}%, ${Math.round(l * 100)}%)`;\r\n\t}\r\n\r\n\tfunction handleDragStart(e: MouseEvent | TouchEvent, fn: (e: MouseEvent | TouchEvent) => void) {\r\n\t\t// Without this the drag runs a text selection across the whole document,\r\n\t\t// which is very visible when the picker sits inside a popover.\r\n\t\tif (!('touches' in e)) {\r\n\t\t\te.preventDefault();\r\n\t\t\t(e.currentTarget as HTMLElement | null)?.focus();\r\n\t\t}\r\n\r\n\t\tisDragging = true;\r\n\t\tfn(e);\r\n\t\tconst move = (e: MouseEvent | TouchEvent) => fn(e);\r\n\t\tconst stop = () => {\r\n\t\t\tisDragging = false;\r\n\t\t\twindow.removeEventListener('mousemove', move);\r\n\t\t\twindow.removeEventListener('touchmove', move);\r\n\t\t\twindow.removeEventListener('mouseup', stop);\r\n\t\t\twindow.removeEventListener('touchend', stop);\r\n\t\t};\r\n\t\twindow.addEventListener('mousemove', move);\r\n\t\twindow.addEventListener('touchmove', move);\r\n\t\twindow.addEventListener('mouseup', stop);\r\n\t\twindow.addEventListener('touchend', stop);\r\n\t}\r\n\r\n\tfunction handleSbChange(e: MouseEvent | TouchEvent) {\r\n\t\tif (!sbRef) return;\r\n\t\tconst rect = sbRef.getBoundingClientRect();\r\n\t\tconst clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\r\n\t\tconst clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;\r\n\t\tconst x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\r\n\t\tconst y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));\r\n\t\ts = x * 100;\r\n\t\tv = (1 - y) * 100;\r\n\t\tupdateExternal();\r\n\t}\r\n\r\n\tfunction handleHueChange(e: MouseEvent | TouchEvent) {\r\n\t\tif (!hueRef) return;\r\n\t\tconst rect = hueRef.getBoundingClientRect();\r\n\t\tconst clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\r\n\t\tconst x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\r\n\t\th = x * 360;\r\n\t\tupdateExternal();\r\n\t}\r\n\r\n\tfunction handleAlphaChange(e: MouseEvent | TouchEvent) {\r\n\t\tif (!alphaRef) return;\r\n\t\tconst rect = alphaRef.getBoundingClientRect();\r\n\t\tconst clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\r\n\t\tconst x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\r\n\t\ta = Math.round(x * 100) / 100;\r\n\t\tupdateExternal();\r\n\t}\r\n\r\n\tfunction handleAlphaInput(e: Event & { currentTarget: HTMLInputElement }) {\r\n\t\tlet val = parseInt(e.currentTarget.value);\r\n\t\tif (isNaN(val)) return;\r\n\t\tval = Math.max(0, Math.min(100, val));\r\n\t\ta = val / 100;\r\n\t\tupdateExternal();\r\n\t}\r\n</script>\r\n\r\n<div\r\n\tclass={cn('flex w-[350px] flex-col gap-3 p-3 border rounded-lg shadow-sm bg-popover', className)}\r\n>\r\n\t<div\r\n\t\tbind:this={sbRef}\r\n\t\tclass=\"relative h-56 w-full cursor-crosshair rounded-md shadow-sm overflow-hidden touch-none select-none\"\r\n\t\tstyle:background-color={`hsl(${h}, 100%, 50%)`}\r\n\t\trole=\"slider\"\r\n\t\taria-label=\"Saturation and Brightness\"\r\n\t\taria-valuenow={s}\r\n\t\ttabindex=\"0\"\r\n\t\tonmousedown={(e) => handleDragStart(e, handleSbChange)}\r\n\t\tontouchstart={(e) => handleDragStart(e, handleSbChange)}\r\n\t>\r\n\t\t<div class=\"absolute inset-0 bg-gradient-to-r from-white to-transparent pointer-events-none\" />\r\n\t\t<div class=\"absolute inset-0 bg-gradient-to-t from-black to-transparent pointer-events-none\" />\r\n\t\t<div\r\n\t\t\tclass=\"absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm ring-1 ring-black/20 pointer-events-none\"\r\n\t\t\tstyle:left={`${s}%`}\r\n\t\t\tstyle:top={`${100 - v}%`}\r\n\t\t/>\r\n\t</div>\r\n\r\n\t<div class=\"flex gap-3 items-center\">\r\n\t\t<div\r\n\t\t\tclass=\"h-8 w-8 shrink-0 rounded-md border shadow-sm relative overflow-hidden mt-1 bg-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')]\"\r\n\t\t>\r\n\t\t\t<div class=\"absolute inset-0\" style:background-color={hsvToHex(h, s, v, a)} />\r\n\t\t</div>\r\n\r\n\t\t<div class=\"flex flex-1 flex-col gap-3 justify-center\">\r\n\t\t\t<div\r\n\t\t\t\tbind:this={hueRef}\r\n\t\t\t\tclass=\"relative h-3 w-full cursor-pointer rounded-full shadow-sm ring-1 ring-black/5 touch-none select-none\"\r\n\t\t\t\tstyle:background={'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'}\r\n\t\t\t\trole=\"slider\"\r\n\t\t\t\taria-valuenow={h}\r\n\t\t\t\ttabindex=\"0\"\r\n\t\t\t\tonmousedown={(e) => handleDragStart(e, handleHueChange)}\r\n\t\t\t\tontouchstart={(e) => handleDragStart(e, handleHueChange)}\r\n\t\t\t>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white pointer-events-none\"\r\n\t\t\t\t\tstyle:left={`${(h / 360) * 100}%`}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t{#if allowOpacity}\r\n\t\t\t\t<div\r\n\t\t\t\t\tbind:this={alphaRef}\r\n\t\t\t\t\tclass=\"relative h-3 w-full cursor-pointer rounded-full shadow-sm ring-1 ring-black/5 touch-none select-none bg-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')]\"\r\n\t\t\t\t\trole=\"slider\"\r\n\t\t\t\t\taria-valuenow={a}\r\n\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\tonmousedown={(e) => handleDragStart(e, handleAlphaChange)}\r\n\t\t\t\t\tontouchstart={(e) => handleDragStart(e, handleAlphaChange)}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"absolute inset-0 rounded-full\"\r\n\t\t\t\t\t\tstyle:background={`linear-gradient(to right, transparent, ${hsvToHex(h, s, v, 1)})`}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white pointer-events-none\"\r\n\t\t\t\t\t\tstyle:left={`${a * 100}%`}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t{/if}\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ButtonGroup.Root class=\"w-full\">\r\n\t\t{#if formats.length > 1}\r\n\t\t\t<Popover.Root bind:open={formatOpen}>\r\n\t\t\t\t<Popover.Trigger>\r\n\t\t\t\t\t{#snippet child({ props })}\r\n\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\t\t\tclass=\"max-w-[5rem] px-2 text-[10px] justify-between h-9\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{activeFormat.toUpperCase()}\r\n\t\t\t\t\t\t\t<ChevronDown class=\"h-3 w-3 opacity-50\" />\r\n\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t{/snippet}\r\n\t\t\t\t</Popover.Trigger>\r\n\t\t\t\t<Popover.Content class=\"w-[4.5rem] p-0\" align=\"start\">\r\n\t\t\t\t\t<Command.Root>\r\n\t\t\t\t\t\t<Command.List>\r\n\t\t\t\t\t\t\t<Command.Group>\r\n\t\t\t\t\t\t\t\t{#each ['hex', 'rgb', 'hsl', 'oklch'] as fmt}\r\n\t\t\t\t\t\t\t\t\t<Command.Item\r\n\t\t\t\t\t\t\t\t\t\tvalue={fmt}\r\n\t\t\t\t\t\t\t\t\t\tonSelect={() => setFormat(fmt as ColorFormat)}\r\n\t\t\t\t\t\t\t\t\t\tclass=\"text-[10px] h-7 flex justify-center\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{fmt.toUpperCase()}\r\n\t\t\t\t\t\t\t\t\t</Command.Item>\r\n\t\t\t\t\t\t\t\t{/each}\r\n\t\t\t\t\t\t\t</Command.Group>\r\n\t\t\t\t\t\t</Command.List>\r\n\t\t\t\t\t</Command.Root>\r\n\t\t\t\t</Popover.Content>\r\n\t\t\t</Popover.Root>\r\n\t\t{:else}\r\n\t\t\t<Button variant=\"outline\" class=\"max-w-[5rem] px-2 text-[10px] justify-between h-9\">\r\n\t\t\t\t{activeFormat.toUpperCase()}\r\n\t\t\t</Button>\r\n\t\t{/if}\r\n\t\t<Input\r\n\t\t\tclass=\"h-9 font-mono text-[10px] uppercase flex-1\"\r\n\t\t\t{value}\r\n\t\t\toninput={(e) => {\r\n\t\t\t\tconst parsed = parseColor(e.currentTarget.value);\r\n\t\t\t\tif (parsed) {\r\n\t\t\t\t\th = parsed.h;\r\n\t\t\t\t\ts = parsed.s;\r\n\t\t\t\t\tv = parsed.v;\r\n\t\t\t\t\ta = parsed.a;\r\n\t\t\t\t\tupdateExternal();\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t/>\r\n\r\n\t\t{#if allowOpacity}\r\n\t\t\t<Input\r\n\t\t\t\tclass=\"h-9 font-mono text-[10px] text-right max-w-[4.2rem]\"\r\n\t\t\t\tvalue={Math.round(a * 100) + '%'}\r\n\t\t\t\toninput={handleAlphaInput}\r\n\t\t\t\tmaxlength={3}\r\n\t\t\t/>\r\n\t\t{/if}\r\n\t</ButtonGroup.Root>\r\n</div>\r\n",
			"type": "registry:ui",
			"target": "color-picker/color-picker.svelte"
		},
		{
			"content": "import ColorPicker from \"./color-picker.svelte\";\r\n\r\nexport { ColorPicker as Root };",
			"type": "registry:ui",
			"target": "color-picker/index.ts"
		}
	]
}