arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ColorPicker): make thumb touch draggable (#4101)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Mateusz Kalinowski
2025-05-10 20:03:56 +02:00
committed by GitHub
parent 983c6382d1
commit cc20a26f07
3 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/theme/color-picker.ts
View File

@@ -2,10 +2,10 @@ export default {
slots: {
root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4',
selector: 'rounded-md',
selector: 'rounded-md touch-none',
selectorBackground: 'w-full h-full relative rounded-md',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-md',
track: 'w-[8px] relative rounded-md touch-none',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {

56
test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
View File

@@ -3,12 +3,12 @@
exports[`ColorPicker > renders with as correctly 1`] = `
"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
exports[`ColorPicker > renders with class correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
exports[`ColorPicker > renders with disabled correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
</div>
</div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
exports[`ColorPicker > renders with format cmyk correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
</div>
</div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
exports[`ColorPicker > renders with format hex correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
exports[`ColorPicker > renders with format hsl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
</div>
</div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
exports[`ColorPicker > renders with format lab correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
</div>
</div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
exports[`ColorPicker > renders with format rgb correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
exports[`ColorPicker > renders with size lg correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
exports[`ColorPicker > renders with size md correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
exports[`ColorPicker > renders with size sm correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
exports[`ColorPicker > renders with size xl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
exports[`ColorPicker > renders with size xs correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
exports[`ColorPicker > renders with ui correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-8">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>

56
test/components/__snapshots__/ColorPicker.spec.ts.snap
View File

@@ -3,12 +3,12 @@
exports[`ColorPicker > renders with as correctly 1`] = `
"<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
exports[`ColorPicker > renders with class correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75 w-96">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
exports[`ColorPicker > renders with disabled correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75" data-disabled="true">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
</div>
</div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
exports[`ColorPicker > renders with format cmyk correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
</div>
</div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
exports[`ColorPicker > renders with format hex correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
exports[`ColorPicker > renders with format hsl correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
</div>
</div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
exports[`ColorPicker > renders with format lab correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
</div>
</div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
exports[`ColorPicker > renders with format rgb correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
exports[`ColorPicker > renders with size lg correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
exports[`ColorPicker > renders with size md correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
exports[`ColorPicker > renders with size sm correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
exports[`ColorPicker > renders with size xl correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
exports[`ColorPicker > renders with size xs correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4">
<div data-v-d6f23756="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
exports[`ColorPicker > renders with ui correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-8">
<div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>