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

fix(Checkbox): icon render

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-28 17:55:24 +02:00
parent aed4100a41
commit fc50996ccf
3 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,7 +88,7 @@ function onChecked() {
:class="ui.base()" :class="ui.base()"
@update:checked="onChecked" @update:checked="onChecked"
> >
<CheckboxIndicator :class="ui.indicator()"> <CheckboxIndicator as-child>
<UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" /> <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />
<UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon()" /> <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon()" />
</CheckboxIndicator> </CheckboxIndicator>

5
src/theme/checkbox.ts
View File

@@ -1,11 +1,10 @@
export default (config: { colors: string[] }) => ({ export default (config: { colors: string[] }) => ({
slots: { slots: {
root: 'relative flex items-start', root: 'relative flex items-start',
base: 'shrink-0 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 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',
container: 'flex items-center', container: 'flex items-center',
wrapper: 'ms-2', wrapper: 'ms-2',
indicator: 'flex items-center justify-center', icon: 'shrink-0 size-full',
icon: 'size-10/12',
label: 'block font-medium text-gray-700 dark:text-gray-200', label: 'block font-medium text-gray-700 dark:text-gray-200',
description: 'text-gray-500 dark:text-gray-400' description: 'text-gray-500 dark:text-gray-400'
}, },

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

@@ -2,7 +2,7 @@
exports[`Checkbox > renders with class correctly 1`] = ` exports[`Checkbox > renders with class correctly 1`] = `
"<div class="relative items-start inline-flex"> "<div class="relative items-start inline-flex">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -13,7 +13,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
exports[`Checkbox > renders with color green correctly 1`] = ` exports[`Checkbox > renders with color green correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -24,7 +24,7 @@ exports[`Checkbox > renders with color green correctly 1`] = `
exports[`Checkbox > renders with color primary correctly 1`] = ` exports[`Checkbox > renders with color primary correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -35,7 +35,7 @@ exports[`Checkbox > renders with color primary correctly 1`] = `
exports[`Checkbox > renders with color red correctly 1`] = ` exports[`Checkbox > renders with color red correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -46,7 +46,7 @@ exports[`Checkbox > renders with color red correctly 1`] = `
exports[`Checkbox > renders with defaultValue correctly 1`] = ` exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 data-state="checked" style="pointer-events: none;" class="flex items-center justify-center"><span class="iconify i-heroicons:check-20-solid size-10/12"></span></span></button> <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" data-state="checked" style="pointer-events: none;"></span></button>
<!----> <!---->
</div> </div>
<!--v-if--> <!--v-if-->
@@ -55,7 +55,7 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
exports[`Checkbox > renders with description correctly 1`] = ` exports[`Checkbox > renders with description correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -68,7 +68,7 @@ exports[`Checkbox > renders with description correctly 1`] = `
exports[`Checkbox > renders with description slot correctly 1`] = ` exports[`Checkbox > renders with description slot correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -81,7 +81,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
exports[`Checkbox > renders with disabled correctly 1`] = ` exports[`Checkbox > renders with disabled correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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="">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -92,7 +92,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
exports[`Checkbox > renders with icon correctly 1`] = ` exports[`Checkbox > renders with icon correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -103,7 +103,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
exports[`Checkbox > renders with id correctly 1`] = ` exports[`Checkbox > renders with id correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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="custom-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 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="custom-id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -114,7 +114,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
exports[`Checkbox > renders with indeterminate correctly 1`] = ` exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center"><span class="iconify i-heroicons:minus-20-solid size-10/12"></span></span></button> <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" data-state="indeterminate" style="pointer-events: none;"></span></button>
<!----> <!---->
</div> </div>
<!--v-if--> <!--v-if-->
@@ -123,7 +123,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = ` exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center"><span class="iconify i-heroicons:minus-20-solid size-10/12"></span></span></button> <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" data-state="indeterminate" style="pointer-events: none;"></span></button>
<!----> <!---->
</div> </div>
<!--v-if--> <!--v-if-->
@@ -132,7 +132,7 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
exports[`Checkbox > renders with label correctly 1`] = ` exports[`Checkbox > renders with label correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -145,7 +145,7 @@ exports[`Checkbox > renders with label correctly 1`] = `
exports[`Checkbox > renders with label slot correctly 1`] = ` exports[`Checkbox > renders with label slot correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -158,7 +158,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
exports[`Checkbox > renders with name correctly 1`] = ` exports[`Checkbox > renders with name correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -169,7 +169,7 @@ exports[`Checkbox > renders with name correctly 1`] = `
exports[`Checkbox > renders with required correctly 1`] = ` exports[`Checkbox > renders with required correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -182,7 +182,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
exports[`Checkbox > renders with size lg correctly 1`] = ` exports[`Checkbox > renders with size lg correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -193,7 +193,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
exports[`Checkbox > renders with size md correctly 1`] = ` exports[`Checkbox > renders with size md correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -204,7 +204,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
exports[`Checkbox > renders with size sm correctly 1`] = ` exports[`Checkbox > renders with size sm correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -215,7 +215,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
exports[`Checkbox > renders with size xl correctly 1`] = ` exports[`Checkbox > renders with size xl correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-6"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -226,7 +226,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
exports[`Checkbox > renders with size xs correctly 1`] = ` exports[`Checkbox > renders with size xs correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -237,7 +237,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
exports[`Checkbox > renders with ui correctly 1`] = ` exports[`Checkbox > renders with ui correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->
@@ -248,7 +248,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
exports[`Checkbox > renders with value correctly 1`] = ` exports[`Checkbox > renders with value correctly 1`] = `
"<div class="relative flex items-start"> "<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 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 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">
<!----> <!---->
</button> </button>
<!----> <!---->