ui/test/components/__snapshots__/Checkbox.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Checkbox > renders basic case correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with custom color correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with custom id correctly 1`] = `
"<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">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with custom name correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with custom value correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with disabled correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with help correctly 1`] = `
"<div class="relative flex items-start" help="Help">
  <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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10" clip-rule="evenodd"></path></svg></span></button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with label correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with required correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with size 2xs correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size lg correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

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 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-[18px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size sm correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

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 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-[22px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

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 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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with slot correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with slot label correctly 1`] = `
"<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="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
    </button>
    <!---->
  </div>
  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label slot</label>
    <!--v-if-->
  </div>
</div>"
`;