@destyler/checkbox 0.0.1-beta.10

package/dist/component.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@destyler/shared');
+require('@destyler/directives');
+require('@destyler/presence');
+
+
+
+exports.DestylerCheckboxIndicator = index.DestylerCheckboxIndicator;
+exports.DestylerCheckboxRoot = index.DestylerCheckboxRoot;

package/dist/component.d.cts

@@ -0,0 +1,4 @@
+export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.cjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.mts

@@ -0,0 +1,4 @@
+export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.ts

@@ -0,0 +1,4 @@
+export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.mjs

@@ -0,0 +1,7 @@
+export { DestylerCheckboxIndicator, DestylerCheckboxRoot } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@destyler/directives';
+import '@destyler/presence';

package/dist/index.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const shared = require('@destyler/shared');
+const directives = require('@destyler/directives');
+const presence = require('@destyler/presence');
+
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+const destylerCheckboxRootProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: [Boolean, String],
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  },
+  id: {
+    type: String,
+    required: false
+  }
+};
+const [injectCheckboxRootContext, provideCheckboxRootContext] = shared.createContext("DestylerCheckboxRoot");
+const DestylerCheckboxRoot = vue.defineComponent({
+  name: "DestylerCheckboxRoot",
+  props: destylerCheckboxRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const disabledRef = vue.toRef(props.disabled);
+    const checkedRef = composition.useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    const { customElement, currentElement } = composition.useCustomElement();
+    const isFormControl = composition.useFormControl(currentElement);
+    const ariaLabel = vue.computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideCheckboxRootContext({
+      disabled: disabledRef,
+      state: checkedRef
+    });
+    return {
+      disabled: disabledRef,
+      checked: checkedRef,
+      customElement,
+      isFormControl,
+      ariaLabel
+    };
+  },
+  render() {
+    const useVShow = this.isFormControl;
+    return [
+      vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+        "ref": "customElement",
+        "role": "checkbox",
+        "asChild": this.$props.asChild,
+        "as": this.$props.as,
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "aria-checked": isIndeterminate(this.checked) ? "mixed" : this.checked,
+        "aria-required": false,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "data-state": getState(this.checked),
+        "data-disabled": this.disabled ? "" : void 0,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.checked = !this.checked;
+        }
+      }), this.$slots.default?.()), [
+        [directives.BindOnceDirective, { id: this.$props.id }]
+      ]),
+      useVShow ? vue.h("input", {
+        "type": "checkbox",
+        "tabindex": "-1",
+        "aria-hidden": "",
+        "value": this.$props.value,
+        "checked": this.checked,
+        "name": this.$props.name,
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerCheckboxIndicatorProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerCheckboxIndicator = vue.defineComponent({
+  name: "DestylerCheckboxIndicator",
+  props: destylerCheckboxIndicatorProps,
+  setup() {
+    const rootContext = injectCheckboxRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(presence.DestylerPresence, {
+      present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
+    }, vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      "data-state": getState(this.rootContext.state.value),
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as,
+      "style": {
+        pointerEvents: "none"
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+exports.DestylerCheckboxIndicator = DestylerCheckboxIndicator;
+exports.DestylerCheckboxRoot = DestylerCheckboxRoot;

package/dist/index.d.cts

@@ -0,0 +1,214 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+type CheckedState = boolean | 'indeterminate';
+
+declare const destylerCheckboxRootProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+};
+type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly forceMount: boolean;
+}, {}>;
+
+export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };

package/dist/index.d.mts

@@ -0,0 +1,214 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+type CheckedState = boolean | 'indeterminate';
+
+declare const destylerCheckboxRootProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+};
+type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly forceMount: boolean;
+}, {}>;
+
+export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };

package/dist/index.d.ts

@@ -0,0 +1,214 @@
+import * as vue from 'vue';
+import { PropType, Component, Ref } from 'vue';
+import { AsTag } from '@destyler/primitive';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+
+type CheckedState = boolean | 'indeterminate';
+
+declare const destylerCheckboxRootProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+};
+type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
+interface CheckboxRootContext {
+    disabled: Ref<boolean>;
+    state: Ref<CheckedState>;
+}
+declare const DestylerCheckboxRoot: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}, {
+    disabled: Ref<false> | Ref<true>;
+    checked: Ref<CheckedState>;
+    customElement: Ref<vue.ComponentPublicInstance | undefined>;
+    isFormControl: vue.ComputedRef<boolean>;
+    ariaLabel: vue.ComputedRef<string | null | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly defaultChecked: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | "indeterminate">;
+        readonly required: false;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: "on";
+    };
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+}>> & {
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly checked: boolean | "indeterminate";
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly disabled: boolean;
+    readonly value: string;
+}, {}>;
+
+declare const destylerCheckboxIndicatorProps: {
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
+declare const DestylerCheckboxIndicator: vue.DefineComponent<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: CheckboxRootContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "button";
+    };
+    readonly forceMount: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly forceMount: boolean;
+}, {}>;
+
+export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };

package/dist/index.mjs

@@ -0,0 +1,167 @@
+import { defineComponent, toRef, computed, withDirectives, h, mergeProps } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { useVModel, useCustomElement, useFormControl } from '@destyler/composition';
+import { createContext } from '@destyler/shared';
+import { BindOnceDirective } from '@destyler/directives';
+import { DestylerPresence } from '@destyler/presence';
+
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+const destylerCheckboxRootProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  defaultChecked: {
+    type: Boolean,
+    required: false
+  },
+  checked: {
+    type: [Boolean, String],
+    required: false,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  value: {
+    type: String,
+    required: false,
+    default: "on"
+  },
+  id: {
+    type: String,
+    required: false
+  }
+};
+const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext("DestylerCheckboxRoot");
+const DestylerCheckboxRoot = defineComponent({
+  name: "DestylerCheckboxRoot",
+  props: destylerCheckboxRootProps,
+  emits: ["update:checked"],
+  setup(props, { emit }) {
+    const disabledRef = toRef(props.disabled);
+    const checkedRef = useVModel(props, "checked", emit, {
+      defaultValue: props.defaultChecked,
+      passive: props.checked === void 0
+    });
+    const { customElement, currentElement } = useCustomElement();
+    const isFormControl = useFormControl(currentElement);
+    const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
+    provideCheckboxRootContext({
+      disabled: disabledRef,
+      state: checkedRef
+    });
+    return {
+      disabled: disabledRef,
+      checked: checkedRef,
+      customElement,
+      isFormControl,
+      ariaLabel
+    };
+  },
+  render() {
+    const useVShow = this.isFormControl;
+    return [
+      withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
+        "ref": "customElement",
+        "role": "checkbox",
+        "asChild": this.$props.asChild,
+        "as": this.$props.as,
+        "type": this.$props.as === "button" ? "button" : void 0,
+        "aria-checked": isIndeterminate(this.checked) ? "mixed" : this.checked,
+        "aria-required": false,
+        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
+        "data-state": getState(this.checked),
+        "data-disabled": this.disabled ? "" : void 0,
+        "disabled": this.disabled,
+        "onClick": () => {
+          this.checked = !this.checked;
+        }
+      }), this.$slots.default?.()), [
+        [BindOnceDirective, { id: this.$props.id }]
+      ]),
+      useVShow ? h("input", {
+        "type": "checkbox",
+        "tabindex": "-1",
+        "aria-hidden": "",
+        "value": this.$props.value,
+        "checked": this.checked,
+        "name": this.$props.name,
+        "disabled": this.disabled,
+        "required": this.$props.required,
+        "style": {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }) : null
+    ];
+  }
+});
+
+const destylerCheckboxIndicatorProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerCheckboxIndicator = defineComponent({
+  name: "DestylerCheckboxIndicator",
+  props: destylerCheckboxIndicatorProps,
+  setup() {
+    const rootContext = injectCheckboxRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPresence, {
+      present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
+    }, h(DestylerPrimitive, mergeProps(this.$attrs, {
+      "data-state": getState(this.rootContext.state.value),
+      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
+      "asChild": this.$props.asChild,
+      "as": this.$props.as,
+      "style": {
+        pointerEvents: "none"
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+export { DestylerCheckboxIndicator, DestylerCheckboxRoot };

package/dist/resolver.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+const name = "@destyler/checkbox";
+
+const packageName = name;
+const checkboxComponentName = [
+  "DestylerCheckboxRoot",
+  "DestylerCheckboxIndicator"
+];
+function DestylerCheckboxResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (checkboxComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerCheckboxResolver = DestylerCheckboxResolver;
+exports.checkboxComponentName = checkboxComponentName;

package/dist/resolver.d.cts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const checkboxComponentName: string[];
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { DestylerCheckboxResolver, checkboxComponentName };

package/dist/resolver.d.mts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const checkboxComponentName: string[];
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { DestylerCheckboxResolver, checkboxComponentName };

package/dist/resolver.d.ts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const checkboxComponentName: string[];
+declare function DestylerCheckboxResolver(): ComponentResolver;
+
+export { DestylerCheckboxResolver, checkboxComponentName };

package/dist/resolver.mjs

@@ -0,0 +1,18 @@
+const name = "@destyler/checkbox";
+
+const packageName = name;
+const checkboxComponentName = [
+  "DestylerCheckboxRoot",
+  "DestylerCheckboxIndicator"
+];
+function DestylerCheckboxResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (checkboxComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerCheckboxResolver, checkboxComponentName };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@destyler/checkbox",
+  "version": "0.0.1-beta.10",
+  "description": "unstyled checkbox component for vue",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3.4"
+  },
+  "dependencies": {
+    "@destyler/composition": "0.0.1-beta.10",
+    "@destyler/shared": "0.0.1-beta.10",
+    "@destyler/presence": "0.0.1-beta.10",
+    "@destyler/primitive": "0.0.1-beta.10",
+    "@destyler/directives": "0.0.1-beta.10"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "build": "pnpm run clear && unbuild"
+  }
+}