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

feat(Checkbox/Progress/RadioGroup/Slider/Switch): add black color

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-16 13:10:49 +02:00
parent 633a39452a
commit 08c91fe8f1
16 changed files with 203 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
playground/pages/checkbox.vue
View File

@@ -14,7 +14,8 @@ const checked = ref(false)
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
<UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Black" color="black" :default-value="true" />
<UCheckbox label="Icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
</div>
<div class="flex items-center gap-4 mr-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />

3
playground/pages/progress.vue
View File

@@ -33,7 +33,8 @@ onMounted(() => {
<div class="flex flex-col gap-8 items-center">
<div class="flex flex-col gap-4 w-48">
<UProgress />
<UProgress color="green" />
<UProgress color="black" />
<UProgress color="red" />
<UProgress animation="carousel-inverse" />
<UProgress animation="swing" />
<UProgress animation="elastic" />

3
playground/pages/radio-group.vue
View File

@@ -27,7 +27,8 @@ const itemsWithDescription = [
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" color="red" default-value="1" />
<URadioGroup :items="items" color="black" default-value="1" />
<URadioGroup :items="items" color="red" default-value="2" />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
</div>

13
playground/pages/slider.vue
View File

@@ -7,28 +7,29 @@ const value = ref(50)
</script>
<template>
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 w-48">
<div class="flex flex-col gap-6 items-center">
<div class="flex flex-col gap-6 w-48">
<USlider v-model="value" />
<USlider :default-value="100" />
<USlider color="green" />
<USlider inverted />
<USlider disabled />
<USlider color="black" :model-value="50" />
<USlider color="red" :model-value="50" />
<USlider :min="4" :max="12" :step="2" :model-value="6" />
</div>
<div class="flex flex-col gap-4 w-48">
<div class="flex flex-col gap-6 w-48">
<USlider :default-value="[0, 20]" />
<USlider :model-value="[0, 20]" />
<USlider :model-value="[0, 20, 80]" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" />
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-6">
<USlider v-for="size in sizes" :key="size" v-model="value" :size="(size as any)" class="w-48" />
</div>
<div class="h-48 flex items-center gap-8">
<div class="h-48 flex items-center gap-6">
<USlider :model-value="[0, 20, 80]" orientation="vertical" />
<USlider v-model="value" orientation="vertical" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" orientation="vertical" />

2
playground/pages/switch.vue
View File

@@ -13,6 +13,8 @@ const checked = ref(false)
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
<USwitch color="black" label="Black" :default-value="true" />
<USwitch color="red" label="Red" :default-value="true" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />

3
src/runtime/components/Checkbox.vue
View File

@@ -72,8 +72,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
color: color.value,
required: props.required,
disabled: disabled.value,
checked: modelValue.value ?? props.defaultValue,
indeterminate: indeterminate.value
checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
}))
</script>

25
src/theme/checkbox.ts
View File

@@ -1,7 +1,7 @@
export default (config: { colors: string[] }) => ({
slots: {
root: 'relative flex items-start',
base: 'shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
base: 'shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
container: 'flex items-center',
wrapper: 'ms-2',
icon: 'shrink-0 size-full',
@@ -9,7 +9,10 @@ export default (config: { colors: string[] }) => ({
description: 'text-gray-500 dark:text-gray-400'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
black: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
},
size: {
xs: {
base: 'size-3',
@@ -51,21 +54,17 @@ export default (config: { colors: string[] }) => ({
},
checked: {
true: ''
},
indeterminate: {
true: ''
}
},
compoundVariants: config.colors.flatMap(color => ([{
compoundVariants: [...config.colors.map((color: string) => ({
color,
checked: true,
class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
}, {
color,
indeterminate: true,
class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
}
])),
class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
})), {
color: 'black',
checked: true,
class: 'ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white'
}],
defaultVariants: {
size: 'md',
color: 'primary'

14
src/theme/progress.ts
View File

@@ -14,10 +14,16 @@ export default (config: { colors: string[] }) => ({
'swing': '',
'elastic': ''
},
color: Object.fromEntries(config.colors.map((color: string) => [color, {
indicator: `bg-${color}-500 dark:bg-${color}-400`,
steps: `text-${color}-500 dark:text-${color}-400`
}])),
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, {
indicator: `bg-${color}-500 dark:bg-${color}-400`,
steps: `text-${color}-500 dark:text-${color}-400`
}])),
black: {
indicator: 'bg-gray-900 dark:bg-white',
steps: 'text-white dark:text-gray-900'
}
},
size: {
'2xs': {
status: 'text-xs',

14
src/theme/radio-group.ts
View File

@@ -12,10 +12,16 @@ export default (config: { colors: string[] }) => ({
description: 'text-gray-500 dark:text-gray-400'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, {
base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
indicator: `bg-${color}-500 dark:bg-${color}-400`
}])),
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, {
base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
indicator: `bg-${color}-500 dark:bg-${color}-400`
}])),
black: {
base: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white',
indicator: 'bg-gray-900 dark:bg-white'
}
},
orientation: {
horizontal: {
fieldset: 'flex-row',

14
src/theme/slider.ts
View File

@@ -6,10 +6,16 @@ export default (config: { colors: string[] }) => ({
thumb: 'rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, {
range: `bg-${color}-500 dark:bg-${color}-400`,
thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
}])),
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, {
range: `bg-${color}-500 dark:bg-${color}-400`,
thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
}])),
black: {
range: 'bg-gray-900 dark:bg-white',
thumb: 'ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50'
}
},
size: {
xs: {
thumb: 'size-3'

14
src/theme/switch.ts
View File

@@ -10,10 +10,16 @@ export default (config: { colors: string[] }) => ({
description: 'text-gray-500 dark:text-gray-400'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, {
base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
}])),
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, {
base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
}])),
black: {
base: 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white',
icon: 'group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white'
}
},
size: {
xs: {
base: 'w-7',

61
test/components/__snapshots__/Checkbox.spec.ts.snap
View File

@@ -2,7 +2,18 @@
exports[`Checkbox > renders with class correctly 1`] = `
"<div class="relative items-start inline-flex">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="18" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="19" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with color black correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" id="18" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -13,7 +24,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
exports[`Checkbox > renders with color green correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" id="16" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" id="16" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -24,7 +35,7 @@ exports[`Checkbox > renders with color green correctly 1`] = `
exports[`Checkbox > renders with color primary correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="15" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="15" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -35,7 +46,7 @@ exports[`Checkbox > renders with color primary correctly 1`] = `
exports[`Checkbox > renders with color red correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" id="17" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" id="17" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -46,7 +57,7 @@ exports[`Checkbox > renders with color red correctly 1`] = `
exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<!---->
</div>
<!--v-if-->
@@ -55,7 +66,7 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
exports[`Checkbox > renders with description correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -68,12 +79,12 @@ exports[`Checkbox > renders with description correctly 1`] = `
exports[`Checkbox > renders with description slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="21" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="22" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="21" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2 text-sm"><label for="22" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>"
@@ -81,7 +92,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
exports[`Checkbox > renders with disabled correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" id="3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" id="3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<!---->
</button>
<!---->
@@ -92,7 +103,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
exports[`Checkbox > renders with icon correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="4" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="4" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -103,7 +114,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
exports[`Checkbox > renders with id correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -114,7 +125,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="5" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="5" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<!---->
</div>
<!--v-if-->
@@ -123,7 +134,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="6" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="6" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<!---->
</div>
<!--v-if-->
@@ -132,7 +143,7 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
exports[`Checkbox > renders with label correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -145,12 +156,12 @@ exports[`Checkbox > renders with label correctly 1`] = `
exports[`Checkbox > renders with label slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="20" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="21" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="20" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2 text-sm"><label for="21" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>"
@@ -158,7 +169,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
exports[`Checkbox > renders with name correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -169,7 +180,7 @@ exports[`Checkbox > renders with name correctly 1`] = `
exports[`Checkbox > renders with required correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="8" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="8" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -182,7 +193,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
exports[`Checkbox > renders with size lg correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" id="13" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" id="13" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -193,7 +204,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
exports[`Checkbox > renders with size md correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="12" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="12" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -204,7 +215,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
exports[`Checkbox > renders with size sm correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" id="11" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" id="11" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -215,7 +226,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
exports[`Checkbox > renders with size xl correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" id="14" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" id="14" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -226,7 +237,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
exports[`Checkbox > renders with size xs correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" id="10" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" id="10" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -237,7 +248,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
exports[`Checkbox > renders with ui correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="19" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="20" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -248,7 +259,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
exports[`Checkbox > renders with value correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->

10
test/components/__snapshots__/Progress.spec.ts.snap
View File

@@ -57,6 +57,16 @@ exports[`Progress > renders with class correctly 1`] = `
</div>"
`;
exports[`Progress > renders with color black correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 w-full h-2" style="transform: translateZ(0);">
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-gray-900 dark:bg-white data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
`;
exports[`Progress > renders with color green correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<!--v-if-->

101
test/components/__snapshots__/RadioGroup.spec.ts.snap
View File

@@ -1,11 +1,46 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`RadioGroup > renders with class correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="absolute" tabindex="0">
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="14" class="absolute" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="14:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="14:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="14:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with color black correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
@@ -14,7 +49,7 @@ exports[`RadioGroup > renders with class correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
@@ -23,7 +58,7 @@ exports[`RadioGroup > renders with class correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
@@ -210,33 +245,33 @@ exports[`RadioGroup > renders with description correctly 1`] = `
`;
exports[`RadioGroup > renders with description slot correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="18" class="relative" tabindex="0">
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="19" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="18:1" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2"><label for="19:1" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="18:2" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2"><label for="19:2" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="18:3" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2"><label for="19:3" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>
@@ -315,33 +350,33 @@ exports[`RadioGroup > renders with items correctly 1`] = `
`;
exports[`RadioGroup > renders with label slot correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="17" class="relative" tabindex="0">
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="18" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="17:1" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2"><label for="18:1" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="17:2" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2"><label for="18:2" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="17:3" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2"><label for="18:3" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>
@@ -350,33 +385,33 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
`;
exports[`RadioGroup > renders with legend slot correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="16" class="relative" tabindex="0">
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="17" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="16:1" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<div class="ms-2"><label for="17:1" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="16:2" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<div class="ms-2"><label for="17:2" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="16:3" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<div class="ms-2"><label for="17:3" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
<!--v-if-->
</div>
</div>
@@ -385,33 +420,33 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
`;
exports[`RadioGroup > renders with orientation correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="15" class="relative" tabindex="0">
"<div role="radiogroup" required="false" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="16" class="relative" tabindex="0">
<fieldset class="flex flex-row gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="15:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2 me-2"><label for="15:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<div class="ms-2 me-2"><label for="16:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="15:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2 me-2"><label for="15:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<div class="ms-2 me-2"><label for="16:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="15:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2 me-2"><label for="15:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<div class="ms-2 me-2"><label for="16:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
@@ -630,7 +665,7 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
`;
exports[`RadioGroup > renders with ui correctly 1`] = `
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="14" class="relative">
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="15" class="relative">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
</fieldset>

6
test/components/__snapshots__/Slider.spec.ts.snap
View File

@@ -6,6 +6,12 @@ exports[`Slider > renders with class correctly 1`] = `
<!---->"
`;
exports[`Slider > renders with color black correctly 1`] = `
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-gray-900 dark:bg-white h-full"></span></span>
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50 size-4" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
<!---->"
`;
exports[`Slider > renders with color green correctly 1`] = `
"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-green-500 dark:bg-green-400 h-full"></span></span>
<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-green-500 dark:ring-green-400 focus-visible:outline-green-500/50 dark:focus-visible:outline-green-400/50 size-4" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>

21
test/components/__snapshots__/Switch.spec.ts.snap
View File

@@ -23,7 +23,16 @@ exports[`Switch > renders with checkedIcon correctly 1`] = `
exports[`Switch > renders with class correctly 1`] = `
"<div class="relative items-start inline-flex">
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="20" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="21" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Switch > renders with color black correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white w-9" id="20" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<!---->
</div>
<!--v-if-->
@@ -79,10 +88,10 @@ exports[`Switch > renders with description correctly 1`] = `
exports[`Switch > renders with description slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="23" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="24" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="23" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2 text-sm"><label for="24" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>"
@@ -119,10 +128,10 @@ exports[`Switch > renders with label correctly 1`] = `
exports[`Switch > renders with label slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="22" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="23" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="22" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2 text-sm"><label for="23" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>"
@@ -213,7 +222,7 @@ exports[`Switch > renders with size xs correctly 1`] = `
exports[`Switch > renders with ui correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="21" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 w-9" id="22" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
<!---->
</div>
<!--v-if-->