@cypress-design/vue-checkbox 0.3.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+$ yarn build:module && yarn build:types
+$ yarn vite build
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
+vite v4.2.2 building for production...
+transforming...
+✓ 5 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  3.71 kB │ gzip: 1.72 kB │ map: 262.14 kB
+dist/index.umd.js  3.39 kB │ gzip: 1.67 kB │ map: 261.92 kB
+✓ built in 9.75s
+$ yarn vue-tsc --project ./tsconfig.build.json
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # @cypress-design/vue-checkbox
 
+## 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
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/vue-icon@0.18.0
+
+## 0.4.6
+
+### Patch Changes
+
+- [#112](https://github.com/cypress-io/cypress-design/pull/112) [`d229b48`](https://github.com/cypress-io/cypress-design/commit/d229b48a3806a882abe83c9ebf9c32ed18d2c47f) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: when label is too big avoid checkbox shrinking
+
+## 0.4.5
+
+### Patch Changes
+
+- [#105](https://github.com/cypress-io/cypress-design/pull/105) [`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30) Thanks [@elevatebart](https://github.com/elevatebart)! - checkbox should not contain a div to be added inside an inline only tag (<p>)
+
+- Updated dependencies [[`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30), [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66)]:
+  - @cypress-design/vue-icon@0.12.0
+
+## 0.4.4
+
+### Patch Changes
+
+- [#101](https://github.com/cypress-io/cypress-design/pull/101) [`1630e4c`](https://github.com/cypress-io/cypress-design/commit/1630e4c4200944cf6414cee9e92dcce6b4d8a576) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Fix styles for Checkbox
+
+## 0.4.3
+
+### Patch Changes
+
+- [#71](https://github.com/cypress-io/cypress-design/pull/71) [`379079e`](https://github.com/cypress-io/cypress-design/commit/379079e08802b6c3fae243925e3b9e8881e8ef54) Thanks [@elevatebart](https://github.com/elevatebart)! - allow users to click the checkbox instead of the label
+
+## 0.4.2
+
+### Patch Changes
+
+- [#68](https://github.com/cypress-io/cypress-design/pull/68) [`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: publish `.mjs` files for esm intead of `.js`
+
+- Updated dependencies [[`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13)]:
+  - @cypress-design/vue-icon@0.5.2
+
+## 0.4.1
+
+### Patch Changes
+
+- [`2afa4d5`](https://github.com/cypress-io/cypress-design/commit/2afa4d54a2373692f82bee35ae40446bc9bb3f91) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid duplicate ids in checkboxes
+
+## 0.4.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#57](https://github.com/cypress-io/cypress-design/pull/57) [`6fa7d52`](https://github.com/cypress-io/cypress-design/commit/6fa7d52e409762bd1b32a8b04edaf78765830754) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: move the input for checkboxes outside of label for accessibility
+
+  Source: https://www.a11ymatters.com/pattern/checkbox/
+
+- Updated dependencies [[`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/vue-icon@0.5.0
+
 ## 0.3.0
 
 ### Minor Changes

package/Checkbox.rootstory.tsx

@@ -0,0 +1,9 @@
+import Checkbox from './Checkbox.vue'
+
+export default (options: {
+  color?: 'jade' | 'indigo' | 'red'
+  checked?: boolean
+}) => {
+  const { checked = true, color } = options
+  return <Checkbox checked={checked} label="Checked" color={color} />
+}

package/Checkbox.vue

@@ -1,6 +1,16 @@
+<script lang="ts">
+function uid() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ''
+  )
+}
+</script>
+
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
+import { CheckboxColors, Classes } from '@cypress-design/constants-checkbox'
 
 const props = withDefaults(
   defineProps<{
@@ -9,6 +19,10 @@ const props = withDefaults(
      * It will be used to give match label with input for a11y.
      */
     id?: string
+    /**
+     * Name attribute of the <input type="checkbox"/>.
+     */
+    name?: string
     /**
      * Is the checkbox checked when it is first rendered.
      */
@@ -24,14 +38,13 @@ const props = withDefaults(
     disabled?: boolean
     modelValue?: boolean
     /**
-     * Label for the checkbox. 
+     * Label for the checkbox.
      * It is very important to set this to make the checkbox accessible.
      */
     label?: string
   }>(),
   {
-    // @ts-ignore
-    id: crypto.randomUUID(),
+    id: () => uid(),
     color: 'indigo',
   }
 )
@@ -39,6 +52,10 @@ const props = withDefaults(
 const localChecked = ref(props.modelValue || props.checked)
 
 const emit = defineEmits<{
+  /**
+   * Fired when the checkbox changes value
+   * @arg value - The next value of the checkbox
+   */
   (event: 'update:modelValue', value: boolean): void
 }>()
 
@@ -47,32 +64,44 @@ function updated() {
   emit('update:modelValue', localChecked.value)
 }
 
-const checkboxClasses = computed(() => [
-  'block border-1 rounded h-16px w-16px',
+const checkboxClasses = computed(() =>
   props.disabled
-    ? 'border-gray-200 bg-gray-100'
+    ? CheckboxColors.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']
+    ? CheckboxColors[props.color]
+    : CheckboxColors.empty
 )
-
 </script>
 
 <template>
-  <label class="relative flex items-center">
-    <input :id="id" class="absolute inset-0 w-0 h-0 opacity-0" :name="id" type="checkbox" @change="updated"
-      :disabled="props.disabled" :checked="localChecked" />
-    <IconCheckmarkSmall v-if="localChecked" strokeColor="white" class="absolute" />
-    <span :class="checkboxClasses" />
-    <slot name="label">
-      <span v-if="label"
-        :class="['block ml-2 text-16px leading-normal font-light select-none', disabled ? 'text-gray-500' : 'text-gray-800']">
-        {{ label }}
-      </span>
-    </slot>
-  </label>
+  <span class="relative flex items-center">
+    <input
+      :id="id"
+      :class="Classes.hiddenInput"
+      :name="name || id"
+      type="checkbox"
+      @change="updated"
+      :disabled="props.disabled"
+      :checked="localChecked"
+    />
+    <label :class="Classes.labelTag" :for="id">
+      <IconCheckmarkSmall
+        v-if="localChecked"
+        strokeColor="white"
+        class="absolute"
+      />
+      <span :class="[checkboxClasses, Classes.visibleCheckbox]" />
+      <slot name="label">
+        <span
+          v-if="label"
+          :class="[
+            Classes.trueLabel,
+            disabled ? 'text-gray-500' : 'text-gray-800 dark:text-gray-200',
+          ]"
+        >
+          {{ label }}
+        </span>
+      </slot>
+    </label>
+  </span>
 </template>

package/CheckboxVue.cy.tsx

@@ -5,21 +5,60 @@ import { mount } from 'cypress/vue'
 import Checkbox from './Checkbox.vue'
 
 describe('<Checkbox />', () => {
-  it('renders', () => {
+  it('changes when the label is clicked', () => {
     mount(() => {
       return (
         <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"
         />
       )
     })
 
     cy.get('input[type="checkbox"]').should('be.checked')
+    cy.percySnapshot()
     cy.contains('Welcome guide settings').click()
     cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.percySnapshot()
+  })
+
+  it('changes when checkbox is clicked', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="Welcome guide settings"
+          id="welcome-opt-out"
+          checked
+          class="px-2 py-1 m-2 border border-gray-300 rounded"
+        />
+      )
+    })
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('svg').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+  })
+
+  it('keeps its width when label is long', () => {
+    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.',
+          ].join(' ')}
+          id="lorem-checkbox"
+        />
+      )
+    })
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
   })
 
   it('renders vModel', () => {
@@ -30,10 +69,10 @@ describe('<Checkbox />', () => {
           <Checkbox
             label="Welcome guide settings"
             vModel={isChecked.value}
-            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"
           />
           <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()}

package/ReadMe.md

@@ -0,0 +1,13 @@
+# Checkbox
+
+## Install
+
+```bash
+npm install @cypress-design/vue-checkbox
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-checkbox
+```

package/dist/Checkbox.vue.d.ts

@@ -1,9 +1,13 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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.
      */
@@ -24,7 +28,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      */
     label?: string | undefined;
 }>, {
-    id: any;
+    id: () => string;
     color: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
@@ -34,6 +38,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      * 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.
      */
@@ -54,17 +62,19 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      */
     label?: string | undefined;
 }>, {
-    id: any;
+    id: () => string;
     color: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }, {
     id: string;
     color: 'red' | 'indigo' | 'jade';
+}>, {
+    label: (_: {}) => any;
 }>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -72,9 +82,14 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
     } : P[K];
 };
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/Checkbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";IAsEI;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;IAtBH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;QAlBE,MAAM;WASH,KAAK,GAAG,QAAQ,GAAG,MAAM;;AA/ErC,wBAwIK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE5B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";IA+EI;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;sBA8GP,GAAG;;AAlMjC,wBAqNc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}

package/dist/index.es.mjs

@@ -0,0 +1,116 @@
+import { h as f, defineComponent as x, ref as C, computed as y, openBlock as u, createElementBlock as g, createElementVNode as b, normalizeClass as i, unref as a, createBlock as v, createCommentVNode as k, renderSlot as w, toDisplayString as B } from "vue";
+import * as S from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as j } from "@cypress-design/icon-registry";
+const z = ({
+  body: e,
+  compiledClasses: o,
+  size: l,
+  class: t,
+  interactiveColorsOnGroup: h,
+  ...n
+}) => {
+  const d = Object.keys(n).reduce(
+    (p, s) => (!j.includes(s) && s !== "name" && (p[s] = n[s]), p),
+    {}
+  ), c = {
+    width: l,
+    height: l,
+    viewBox: `0 0 ${l} ${l}`,
+    fill: "none",
+    innerHTML: e,
+    ...d
+    // add all standard attributes back to the svg tag
+  };
+  return o.length && (c.class = o.join(" ")), c;
+}, O = (e) => {
+  const { sizeWithDefault: o, compiledClasses: l } = S.getComponentAttributes({ ...e, availableSizes: ["16"] }), t = {
+    16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8.5 7.5 11 11 5" class="icon-dark"/>'
+  }[o];
+  if (!t)
+    throw Error(`Icon "checkmark-small" is not available in size ${o}`);
+  return f("svg", z({
+    ...e,
+    size: o,
+    body: t,
+    compiledClasses: l
+  }));
+}, r = {
+  wrapper: "relative flex items-center",
+  hiddenInput: "absolute inset-0 w-0 h-0 opacity-0",
+  labelTag: "flex items-center",
+  visibleCheckbox: "border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
+  trueLabel: "block ml-[8px] text-[16px] leading-[24px] font-light select-none"
+}, m = {
+  indigo: "border-indigo-500 bg-indigo-400",
+  jade: "border-jade-500 bg-jade-400",
+  red: "border-red-500 bg-red-400",
+  disabled: "border-gray-200 bg-gray-100",
+  empty: "border-gray-200 bg-white"
+}, V = { class: "relative flex items-center" }, E = ["id", "name", "disabled", "checked"], I = ["for"];
+function L() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ""
+  );
+}
+const $ = /* @__PURE__ */ x({
+  __name: "Checkbox",
+  props: {
+    id: { default: () => L() },
+    name: null,
+    checked: { type: Boolean },
+    color: { default: "indigo" },
+    disabled: { type: Boolean },
+    modelValue: { type: Boolean },
+    label: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const l = e, t = C(l.modelValue || l.checked);
+    function h() {
+      t.value = !t.value, o("update:modelValue", t.value);
+    }
+    const n = y(
+      () => l.disabled ? m.disabled : t.value ? m[l.color] : m.empty
+    );
+    return (d, c) => (u(), g("span", V, [
+      b("input", {
+        id: e.id,
+        class: i(a(r).hiddenInput),
+        name: e.name || e.id,
+        type: "checkbox",
+        onChange: h,
+        disabled: l.disabled,
+        checked: t.value
+      }, null, 42, E),
+      b("label", {
+        class: i(a(r).labelTag),
+        for: e.id
+      }, [
+        t.value ? (u(), v(a(O), {
+          key: 0,
+          strokeColor: "white",
+          class: "absolute"
+        })) : k("", !0),
+        b("span", {
+          class: i([a(n), a(r).visibleCheckbox])
+        }, null, 2),
+        w(d.$slots, "label", {}, () => [
+          e.label ? (u(), g("span", {
+            key: 0,
+            class: i([
+              a(r).trueLabel,
+              e.disabled ? "text-gray-500" : "text-gray-800 dark:text-gray-200"
+            ])
+          }, B(e.label), 3)) : k("", !0)
+        ])
+      ], 10, I)
+    ]));
+  }
+});
+export {
+  $ as default
+};
+//# sourceMappingURL=index.es.mjs.map
+
+/* <windicss-keep class="relative flex items-center absolute text-gray-500 text-gray-800 dark:text-gray-200 icon-dark-white"> */