cisse-vue-ui 0.5.22 → 0.5.23

package/dist/{index-D7HVSFi2.cjs → index-CUNU12xk.cjs}

@@ -1,6 +1,7 @@
 "use strict";
 const vue = require("vue");
-const _hoisted_1 = ["checked", "disabled", "indeterminate"];
+const useId = require("./useId-nxrBaIC9.cjs");
+const _hoisted_1 = ["id", "checked", "disabled", "indeterminate", "aria-describedby"];
 const _hoisted_2 = {
   key: 0,
   class: "flex flex-col"
@@ -9,10 +10,7 @@ const _hoisted_3 = {
   key: 0,
   class: "text-sm font-medium text-gray-900 dark:text-white"
 };
-const _hoisted_4 = {
-  key: 1,
-  class: "text-sm text-gray-500 dark:text-gray-400"
-};
+const _hoisted_4 = ["id"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
@@ -20,11 +18,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     label: {},
     description: {},
     disabled: { type: Boolean },
-    indeterminate: { type: Boolean }
+    indeterminate: { type: Boolean },
+    id: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
+    const { id: generatedId, related } = useId.useId({ prefix: "checkbox", id: props.id });
+    const inputId = vue.computed(() => props.id ?? generatedId.value);
+    const descriptionId = vue.computed(() => related("description"));
     const toggle = (event) => {
       const target = event.target;
       emit("update:modelValue", target.checked);
@@ -34,16 +37,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
       }, [
         vue.createElementVNode("input", {
+          id: inputId.value,
           type: "checkbox",
           checked: __props.modelValue,
           disabled: __props.disabled,
           indeterminate: __props.indeterminate,
+          "aria-describedby": __props.description ? descriptionId.value : void 0,
           class: "mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900",
           onChange: toggle
         }, null, 40, _hoisted_1),
         __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           __props.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
-          __props.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true)
+          __props.description ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 1,
+            id: descriptionId.value,
+            class: "text-sm text-gray-500 dark:text-gray-400"
+          }, vue.toDisplayString(__props.description), 9, _hoisted_4)) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 2);
     };
@@ -334,4 +343,4 @@ function useBreakpoints(breakpoints, options = {}) {
 exports._sfc_main = _sfc_main;
 exports.onClickOutside = onClickOutside;
 exports.useBreakpoints = useBreakpoints;
-//# sourceMappingURL=index-D7HVSFi2.cjs.map
+//# sourceMappingURL=index-CUNU12xk.cjs.map