@cypress-design/vue-checkbox 0.5.0 → 1.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,9 @@
+The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+vite v5.4.19 building for production...
+transforming...
+✓ 4 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  3.35 kB │ gzip: 1.43 kB │ map: 6.32 kB
+dist/index.umd.js  2.85 kB │ gzip: 1.32 kB │ map: 6.18 kB
+✓ built in 2.13s

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @cypress-design/vue-checkbox
 
+## 1.1.0
+
+### Minor Changes
+
+- [#733](https://github.com/cypress-io/cypress-design/pull/733) [`5e916fb`](https://github.com/cypress-io/cypress-design/commit/5e916fbe2b83d1503ed80820a85a8705bdcaeef1) Thanks [@jennifer-shehane](https://github.com/jennifer-shehane)! - Depend on `@cypress-design/vue-icon` and `@cypress-design/react-icon` 3.x. These packages were last published against icon 1.x, so installs stayed on 1.x and missed the 3.x fixes, including tree-shakable named icon imports. None of the icons these components use were renamed or removed in 2.0 or 3.0, so there are no API changes. `@cypress-design/vue-modal` now also lists `@cypress-design/vue-icon` as a dependency instead of a devDependency, since its build imports it at runtime.
+
+## 1.0.0
+
+### Major Changes
+
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+
+### Patch Changes
+
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/constants-checkbox@1.0.0
+  - @cypress-design/vue-icon@1.0.0
+
+## 0.5.0
+
+### Minor Changes
+
+- [#272](https://github.com/cypress-io/cypress-design/pull/272) [`9a3e358`](https://github.com/cypress-io/cypress-design/commit/9a3e3582b8ca2dfdadd9198054042c9f0083be01) Thanks [@elevatebart](https://github.com/elevatebart)! - remove dark mode implementation to avoid wrong side effects
+
+## 0.4.0
+
+### Minor Changes
+
+- [#258](https://github.com/cypress-io/cypress-design/pull/258) [`aac2e95`](https://github.com/cypress-io/cypress-design/commit/aac2e95c78a7dc41673101def2f7d185bc6e6d0e) Thanks [@elevatebart](https://github.com/elevatebart)! - handle array v-model with more than one checkboxes
+  - add the 'change' event to reflect the input checkbox's change event
+
+## 0.3.3
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/vue-icon@0.23.1
+
+## 0.3.2
+
+### Patch Changes
+
+- [`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3) Thanks [@elevatebart](https://github.com/elevatebart)! - fix wind-keep plugin
+
+- Updated dependencies [[`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3)]:
+  - @cypress-design/vue-icon@0.22.1
+
+## 0.3.1
+
+### Patch Changes
+
+- [`63ea78a`](https://github.com/cypress-io/cypress-design/commit/63ea78af2062fd5e3fb8c61fa4bcf85fd95e803b) Thanks [@elevatebart](https://github.com/elevatebart)! - add constants package to dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
+
+### Patch Changes
+
+- Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
+  - @cypress-design/react-icon@0.20.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/react-icon@0.19.0
+
+## 0.1.1
+
+### Patch Changes
+
+- [#164](https://github.com/cypress-io/cypress-design/pull/164) [`4fd951a`](https://github.com/cypress-io/cypress-design/commit/4fd951a39335900da2508beef9b3565a6f8f9518) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: update active buttons borders
+
+## 0.1.0
+
+### Minor Changes
+
+- [#162](https://github.com/cypress-io/cypress-design/pull/162) [`76d4e60`](https://github.com/cypress-io/cypress-design/commit/76d4e601687d28578cdee0ddc67cd04b286ae2c3) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: functionalize classes used
+
 ## 0.5.0
 
 ### Minor Changes

package/Checkbox.vue

@@ -2,7 +2,7 @@
 function uid() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(
     /\./g,
-    ''
+    '',
   )
 }
 </script>
@@ -10,6 +10,10 @@ function uid() {
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
+import {
+  CssCheckboxColors,
+  CssClasses,
+} from '@cypress-design/constants-checkbox'
 
 const props = withDefaults(
   defineProps<{
@@ -35,69 +39,107 @@ const props = withDefaults(
      * If the checkbox is disabled, it will not be clickable.
      */
     disabled?: boolean
-    modelValue?: boolean
+    modelValue?: boolean | Array<string>
     /**
      * Label for the checkbox.
      * It is very important to set this to make the checkbox accessible.
      */
     label?: string
+    /**
+     * Forwarded to the underlying `<input type="checkbox">`. Use `-1`
+     * when the checkbox is a decorative affordance inside a wider
+     * interactive row (e.g. Select's checkbox-row) — the wrapping row
+     * carries the interactive role and keyboard nav, and the input
+     * must not be independently focusable to satisfy axe's
+     * `nested-interactive` rule.
+     */
+    inputTabIndex?: number
+    /**
+     * When true, the real `<input>` is removed from the accessibility
+     * tree and the layout with `display: none`. Use inside a wider
+     * interactive row (e.g. Select's checkbox-row) where the row itself
+     * is the option — axe's `nested-interactive` rule flags a focusable
+     * input inside a clickable row even when the input carries
+     * `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
+     * axe accepts.
+     */
+    hideInput?: boolean
   }>(),
   {
     id: () => uid(),
     color: 'indigo',
-  }
+    hideInput: false,
+  },
 )
 
-const localChecked = ref(props.modelValue || props.checked)
+const localChecked = ref(
+  (Array.isArray(props.modelValue)
+    ? props.name
+      ? props.modelValue.includes(props.name)
+      : false
+    : props.modelValue) || props.checked,
+)
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
+  'update:modelValue': [value: boolean | Array<string>]
+  change: [value: boolean]
 }>()
 
 function updated() {
   localChecked.value = !localChecked.value
-  emit('update:modelValue', localChecked.value)
+  if (Array.isArray(props.modelValue)) {
+    const arrayModelValue = [...props.modelValue]
+    if (!props.name) {
+      return
+    }
+    const index = arrayModelValue.indexOf(props.name)
+    if (index === -1) {
+      arrayModelValue.push(props.name)
+    } else {
+      arrayModelValue.splice(index, 1)
+    }
+    emit('update:modelValue', arrayModelValue)
+  } else {
+    emit('update:modelValue', localChecked.value)
+  }
+  emit('change', localChecked.value)
 }
 
-const checkboxClasses = computed(() => [
+const checkboxClasses = computed(() =>
   props.disabled
-    ? 'border-gray-200 bg-gray-100'
+    ? CssCheckboxColors.disabled
     : localChecked.value
-    ? {
-        'border-indigo-500 bg-indigo-400': props.color === 'indigo',
-        'border-jade-500 bg-jade-400': props.color === 'jade',
-        'border-red-500 bg-red-400': props.color === 'red',
-      }
-    : 'border-gray-200 bg-white',
-])
+      ? CssCheckboxColors[props.color]
+      : CssCheckboxColors.empty,
+)
 </script>
 
 <template>
-  <span class="block relative flex items-center">
+  <span class="relative flex items-center">
     <input
       :id="id"
-      class="absolute inset-0 w-0 h-0 opacity-0"
+      :class="CssClasses.hiddenInput"
       :name="name || id"
       type="checkbox"
-      @change="updated"
       :disabled="props.disabled"
       :checked="localChecked"
+      :tabindex="inputTabIndex"
+      :aria-hidden="hideInput || undefined"
+      :style="hideInput ? { display: 'none' } : undefined"
+      @change="updated"
     />
-    <label className="flex items-center" :for="id">
+    <label :class="CssClasses.labelTag" :for="id">
       <IconCheckmarkSmall
         v-if="localChecked"
         strokeColor="white"
         class="absolute"
       />
-      <span
-        :class="checkboxClasses"
-        class="block border border-solid rounded h-[16px] w-[16px] flex-shrink-0"
-      />
+      <span :class="[checkboxClasses, CssClasses.visibleCheckbox]" />
       <slot name="label">
         <span
           v-if="label"
           :class="[
-            'ml-[8px] text-[16px] leading-[24px] font-light select-none',
+            CssClasses.trueLabel,
             disabled ? 'text-gray-500' : 'text-gray-800',
           ]"
         >

package/CheckboxVue.cy.tsx

@@ -12,7 +12,7 @@ describe('<Checkbox />', () => {
           label="Welcome guide settings"
           id="welcome-opt-out"
           checked
-          class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+          class="px-2 py-1 m-2 border border-gray-300 rounded"
         />
       )
     })
@@ -31,7 +31,7 @@ describe('<Checkbox />', () => {
           label="Welcome guide settings"
           id="welcome-opt-out"
           checked
-          class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+          class="px-2 py-1 m-2 border border-gray-300 rounded"
         />
       )
     })
@@ -45,7 +45,14 @@ describe('<Checkbox />', () => {
     mount(() => {
       return (
         <Checkbox
-          label="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          label={[
+            'lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+            'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip',
+            'ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse',
+            'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,',
+            'sunt in culpa qui officia deserunt mollit anim id est laborum.',
+          ].join(' ')}
           id="lorem-checkbox"
         />
       )
@@ -61,11 +68,11 @@ describe('<Checkbox />', () => {
         <div>
           <Checkbox
             label="Welcome guide settings"
-            vModel={isChecked.value}
-            class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+            v-model={isChecked.value}
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
           />
           <div
-            class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
             data-cy="result"
           >
             isChecked = {isChecked.value.toString()}
@@ -79,4 +86,50 @@ describe('<Checkbox />', () => {
     cy.get('input[type="checkbox"]').should('be.checked')
     cy.get('[data-cy="result"]').should('contain', 'isChecked = true')
   })
+
+  it("renders vModel when it's an array", () => {
+    const checkedValues = ref([])
+    mount(() => {
+      return (
+        <div>
+          <Checkbox
+            name="first-checkbox"
+            label="First checkbox"
+            v-model={checkedValues.value}
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
+          />
+          <Checkbox
+            name="second-checkbox"
+            label="Second checkbox"
+            v-model={checkedValues.value}
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
+          />
+          <Checkbox
+            name="third-checkbox"
+            label="Third checkbox"
+            v-model={checkedValues.value}
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
+          />
+          <div
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
+            data-cy="result"
+          >
+            {JSON.stringify(checkedValues.value)}
+          </div>
+        </div>
+      )
+    })
+
+    cy.get('[data-cy="result"]').should('contain', '[]')
+    cy.contains('First checkbox').click()
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('[data-cy="result"]').should('contain', '["first-checkbox"]')
+    cy.contains('Second checkbox').click()
+    cy.get('[data-cy="result"]').should(
+      'contain',
+      '["first-checkbox","second-checkbox"]',
+    )
+    cy.contains('Second checkbox').click()
+    cy.get('[data-cy="result"]').should('contain', '["first-checkbox"]')
+  })
 })

package/ReadMe.md

@@ -0,0 +1,19 @@
+# Checkbox
+
+## Install
+
+```bash
+npm install @cypress-design/vue-checkbox
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-checkbox
+```
+
+## Usage
+
+```ts
+import Checkbox from '@cypress-design/vue-checkbox'
+```

package/dist/Checkbox.vue.d.ts

@@ -1,156 +1,4 @@
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            id: string;
-            color: 'red' | 'indigo' | 'jade';
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /**
-             * A unique identifier for the checkbox on the whole page.
-             * It will be used to give match label with input for a11y.
-             */
-            id?: string | undefined;
-            /**
-             * Name attribute of the <input type="checkbox"/>.
-             */
-            name?: string | undefined;
-            /**
-             * Is the checkbox checked when it is first rendered.
-             */
-            checked?: boolean | undefined;
-            /**
-             * The color of the background in the checkbox.
-             * The checkmark will always be white.
-             */
-            color?: "indigo" | "red" | "jade" | undefined;
-            /**
-             * If the checkbox is disabled, it will not be clickable.
-             */
-            disabled?: boolean | undefined;
-            modelValue?: boolean | undefined;
-            /**
-             * Label for the checkbox.
-             * It is very important to set this to make the checkbox accessible.
-             */
-            label?: string | undefined;
-        }>, {
-            id: () => string;
-            color: string;
-        }>>> & {
-            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "color">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "update:modelValue", value: boolean) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /**
-             * A unique identifier for the checkbox on the whole page.
-             * It will be used to give match label with input for a11y.
-             */
-            id?: string | undefined;
-            /**
-             * Name attribute of the <input type="checkbox"/>.
-             */
-            name?: string | undefined;
-            /**
-             * Is the checkbox checked when it is first rendered.
-             */
-            checked?: boolean | undefined;
-            /**
-             * The color of the background in the checkbox.
-             * The checkmark will always be white.
-             */
-            color?: "indigo" | "red" | "jade" | undefined;
-            /**
-             * If the checkbox is disabled, it will not be clickable.
-             */
-            disabled?: boolean | undefined;
-            modelValue?: boolean | undefined;
-            /**
-             * Label for the checkbox.
-             * It is very important to set this to make the checkbox accessible.
-             */
-            label?: string | undefined;
-        }>, {
-            id: () => string;
-            color: string;
-        }>>> & {
-            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            "update:modelValue": (value: boolean) => void;
-        }, string, {
-            id: string;
-            color: 'red' | 'indigo' | 'jade';
-        }> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        /**
-         * A unique identifier for the checkbox on the whole page.
-         * It will be used to give match label with input for a11y.
-         */
-        id?: string | undefined;
-        /**
-         * Name attribute of the <input type="checkbox"/>.
-         */
-        name?: string | undefined;
-        /**
-         * Is the checkbox checked when it is first rendered.
-         */
-        checked?: boolean | undefined;
-        /**
-         * The color of the background in the checkbox.
-         * The checkmark will always be white.
-         */
-        color?: "indigo" | "red" | "jade" | undefined;
-        /**
-         * If the checkbox is disabled, it will not be clickable.
-         */
-        disabled?: boolean | undefined;
-        modelValue?: boolean | undefined;
-        /**
-         * Label for the checkbox.
-         * It is very important to set this to make the checkbox accessible.
-         */
-        label?: string | undefined;
-    }>, {
-        id: () => string;
-        color: string;
-    }>>> & {
-        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     /**
      * A unique identifier for the checkbox on the whole page.
      * It will be used to give match label with input for a11y.
@@ -173,30 +21,117 @@ declare const _default: {
      * If the checkbox is disabled, it will not be clickable.
      */
     disabled?: boolean | undefined;
-    modelValue?: boolean | undefined;
+    modelValue?: boolean | string[] | undefined;
     /**
      * Label for the checkbox.
      * It is very important to set this to make the checkbox accessible.
      */
     label?: string | undefined;
+    /**
+     * Forwarded to the underlying `<input type="checkbox">`. Use `-1`
+     * when the checkbox is a decorative affordance inside a wider
+     * interactive row (e.g. Select's checkbox-row) — the wrapping row
+     * carries the interactive role and keyboard nav, and the input
+     * must not be independently focusable to satisfy axe's
+     * `nested-interactive` rule.
+     */
+    inputTabIndex?: number | undefined;
+    /**
+     * When true, the real `<input>` is removed from the accessibility
+     * tree and the layout with `display: none`. Use inside a wider
+     * interactive row (e.g. Select's checkbox-row) where the row itself
+     * is the option — axe's `nested-interactive` rule flags a focusable
+     * input inside a clickable row even when the input carries
+     * `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
+     * axe accepts.
+     */
+    hideInput?: boolean | undefined;
 }>, {
     id: () => string;
     color: string;
+    hideInput: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | string[]) => void;
+    change: (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    /**
+     * A unique identifier for the checkbox on the whole page.
+     * It will be used to give match label with input for a11y.
+     */
+    id?: string | undefined;
+    /**
+     * Name attribute of the <input type="checkbox"/>.
+     */
+    name?: string | undefined;
+    /**
+     * Is the checkbox checked when it is first rendered.
+     */
+    checked?: boolean | undefined;
+    /**
+     * The color of the background in the checkbox.
+     * The checkmark will always be white.
+     */
+    color?: "indigo" | "red" | "jade" | undefined;
+    /**
+     * If the checkbox is disabled, it will not be clickable.
+     */
+    disabled?: boolean | undefined;
+    modelValue?: boolean | string[] | undefined;
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
+    label?: string | undefined;
+    /**
+     * Forwarded to the underlying `<input type="checkbox">`. Use `-1`
+     * when the checkbox is a decorative affordance inside a wider
+     * interactive row (e.g. Select's checkbox-row) — the wrapping row
+     * carries the interactive role and keyboard nav, and the input
+     * must not be independently focusable to satisfy axe's
+     * `nested-interactive` rule.
+     */
+    inputTabIndex?: number | undefined;
+    /**
+     * When true, the real `<input>` is removed from the accessibility
+     * tree and the layout with `display: none`. Use inside a wider
+     * interactive row (e.g. Select's checkbox-row) where the row itself
+     * is the option — axe's `nested-interactive` rule flags a focusable
+     * input inside a clickable row even when the input carries
+     * `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
+     * axe accepts.
+     */
+    hideInput?: boolean | undefined;
+}>, {
+    id: () => string;
+    color: string;
+    hideInput: boolean;
 }>>> & {
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => void;
-}, string, {
+    "onUpdate:modelValue"?: ((value: boolean | string[]) => any) | undefined;
+    onChange?: ((value: boolean) => any) | undefined;
+}, {
     id: string;
     color: 'red' | 'indigo' | 'jade';
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        label: (_: {}) => any;
-    };
-});
+    hideInput: boolean;
+}, {}>, {
+    label?(_: {}): any;
+}>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -204,9 +139,4 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};
 //# sourceMappingURL=Checkbox.vue.d.ts.map