cisse-vue-ui 0.1.0 → 0.1.2

package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DQD2I1Wk.cjs

@@ -0,0 +1,621 @@
+"use strict";
+const vue = require("vue");
+const vue$1 = require("@iconify/vue");
+const _hoisted_1$7 = ["data-error", "for"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormLabel",
+  props: {
+    error: { type: [String, Boolean] },
+    htmlFor: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", {
+        "data-error": !!__props.error,
+        for: __props.htmlFor ?? "",
+        class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1$7);
+    };
+  }
+});
+const _hoisted_1$6 = ["data-error"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormHelp",
+  props: {
+    error: { type: Boolean },
+    text: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("p", {
+        "data-error": __props.error,
+        class: "mt-2 text-sm text-gray-400 peer-invalid:visible data-[error=true]:text-red-500 dark:text-gray-500"
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(__props.text ?? ""), 1)
+        ])
+      ], 8, _hoisted_1$6);
+    };
+  }
+});
+const _hoisted_1$5 = ["id", "disabled", "name", "placeholder", "type"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    type: { default: "text" },
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = vue.useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+        id: __props.id ?? __props.name ?? "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: __props.disabled,
+        name: __props.name ?? "",
+        placeholder: __props.placeholder,
+        type: __props.type,
+        class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
+      }, _ctx.$attrs), null, 16, _hoisted_1$5)), [
+        [vue.vModelDynamic, modelValue.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = { class: "relative" };
+const _hoisted_2$3 = ["id", "disabled"];
+const _hoisted_3$2 = { class: "flex-1 truncate" };
+const _hoisted_4$2 = {
+  key: 0,
+  class: "sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800"
+};
+const _hoisted_5 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
+const _hoisted_6 = {
+  key: 1,
+  class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+};
+const _hoisted_7 = { class: "py-1" };
+const _hoisted_8 = ["data-index", "onClick", "onMouseenter"];
+const _hoisted_9 = {
+  key: 1,
+  class: "size-4 shrink-0"
+};
+const _hoisted_10 = { class: "flex-1" };
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormSelect",
+  props: /* @__PURE__ */ vue.mergeModels({
+    options: {},
+    type: {},
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {},
+    teleport: { type: Boolean, default: true },
+    searchable: { type: Boolean, default: false },
+    noResultsText: { default: "No results found" },
+    triggerClass: {}
+  }, {
+    "modelValue": { type: [String, Number, Boolean, null] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const isOpen = vue.ref(false);
+    const searchQuery = vue.ref("");
+    const highlightedIndex = vue.ref(-1);
+    const triggerRef = vue.ref();
+    const dropdownRef = vue.ref();
+    const searchInputRef = vue.ref();
+    const dropdownPosition = vue.ref({ top: 0, left: 0, width: 0 });
+    const visibleOptions = vue.computed(() => {
+      return (props.options ?? []).filter((opt) => !opt.hidden);
+    });
+    const filteredOptions = vue.computed(() => {
+      if (!props.searchable || !searchQuery.value) {
+        return visibleOptions.value;
+      }
+      const query = searchQuery.value.toLowerCase();
+      return visibleOptions.value.filter(
+        (opt) => opt.label.toLowerCase().includes(query) || String(opt.value).toLowerCase().includes(query)
+      );
+    });
+    const selectedOption = vue.computed(() => {
+      return visibleOptions.value.find((opt) => opt.value === modelValue.value);
+    });
+    const displayValue = vue.computed(() => {
+      if (selectedOption.value) {
+        return selectedOption.value.label;
+      }
+      return props.placeholder || "Select...";
+    });
+    const updatePosition = () => {
+      if (!triggerRef.value || !props.teleport) return;
+      const rect = triggerRef.value.getBoundingClientRect();
+      dropdownPosition.value = {
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      };
+    };
+    const open = () => {
+      if (props.disabled) return;
+      isOpen.value = true;
+      searchQuery.value = "";
+      highlightedIndex.value = filteredOptions.value.findIndex(
+        (opt) => opt.value === modelValue.value
+      );
+      vue.nextTick(() => {
+        var _a;
+        updatePosition();
+        if (props.searchable) {
+          (_a = searchInputRef.value) == null ? void 0 : _a.focus();
+        }
+      });
+    };
+    const close = () => {
+      isOpen.value = false;
+      searchQuery.value = "";
+      highlightedIndex.value = -1;
+    };
+    const toggle = () => {
+      if (isOpen.value) {
+        close();
+      } else {
+        open();
+      }
+    };
+    const selectOption = (option) => {
+      modelValue.value = option.value;
+      close();
+    };
+    const handleKeydown = (event) => {
+      if (!isOpen.value) {
+        if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+          event.preventDefault();
+          open();
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          highlightedIndex.value = Math.min(
+            highlightedIndex.value + 1,
+            filteredOptions.value.length - 1
+          );
+          scrollToHighlighted();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+          scrollToHighlighted();
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (highlightedIndex.value >= 0 && filteredOptions.value[highlightedIndex.value]) {
+            selectOption(filteredOptions.value[highlightedIndex.value]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          close();
+          break;
+        case "Tab":
+          close();
+          break;
+      }
+    };
+    const scrollToHighlighted = () => {
+      vue.nextTick(() => {
+        if (dropdownRef.value) {
+          const highlighted = dropdownRef.value.querySelector(
+            `[data-index="${highlightedIndex.value}"]`
+          );
+          if (highlighted) {
+            highlighted.scrollIntoView({ block: "nearest" });
+          }
+        }
+      });
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isInsideTrigger = (_a = triggerRef.value) == null ? void 0 : _a.contains(target);
+      const isInsideDropdown = (_b = dropdownRef.value) == null ? void 0 : _b.contains(target);
+      if (!isInsideTrigger && !isInsideDropdown) {
+        close();
+      }
+    };
+    vue.watch(isOpen, (newValue) => {
+      if (newValue) {
+        document.addEventListener("click", handleClickOutside);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      }
+    });
+    vue.watch(searchQuery, () => {
+      highlightedIndex.value = 0;
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    });
+    const dropdownStyle = vue.computed(() => {
+      if (!props.teleport) return {};
+      return {
+        position: "absolute",
+        top: `${dropdownPosition.value.top}px`,
+        left: `${dropdownPosition.value.left}px`,
+        width: `${dropdownPosition.value.width}px`
+      };
+    });
+    const triggerClasses = vue.computed(() => {
+      const base = "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition";
+      const state = props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500" : isOpen.value ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600";
+      const text = selectedOption.value ? "text-gray-800 dark:text-gray-200" : "text-gray-400 dark:text-gray-500";
+      return [base, state, text, props.triggerClass];
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+        vue.createElementVNode("button", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          type: "button",
+          id: __props.id ?? __props.name ?? void 0,
+          disabled: __props.disabled,
+          class: vue.normalizeClass(triggerClasses.value),
+          onClick: toggle,
+          onKeydown: handleKeydown
+        }, [
+          vue.renderSlot(_ctx.$slots, "selected", {
+            option: selectedOption.value,
+            placeholder: __props.placeholder
+          }, () => [
+            vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(displayValue.value), 1)
+          ]),
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            icon: "lucide:chevron-down",
+            class: vue.normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", isOpen.value && "rotate-180"])
+          }, null, 8, ["class"])
+        ], 42, _hoisted_2$3),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition duration-100 ease-out",
+            "enter-from-class": "opacity-0 scale-95",
+            "enter-to-class": "opacity-100 scale-100",
+            "leave-active-class": "transition duration-75 ease-in",
+            "leave-from-class": "opacity-100 scale-100",
+            "leave-to-class": "opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref_key: "dropdownRef",
+                ref: dropdownRef,
+                style: vue.normalizeStyle(dropdownStyle.value),
+                class: vue.normalizeClass([
+                  "z-[9999] max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  !__props.teleport && "absolute mt-1 w-full"
+                ])
+              }, [
+                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+                  vue.createElementVNode("div", _hoisted_5, [
+                    vue.createVNode(vue.unref(vue$1.Icon), {
+                      icon: "lucide:search",
+                      class: "size-4 text-gray-400"
+                    }),
+                    vue.withDirectives(vue.createElementVNode("input", {
+                      ref_key: "searchInputRef",
+                      ref: searchInputRef,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+                      type: "text",
+                      class: "flex-1 bg-transparent text-sm outline-none dark:text-white",
+                      placeholder: "Search...",
+                      onKeydown: handleKeydown
+                    }, null, 544), [
+                      [vue.vModelText, searchQuery.value]
+                    ])
+                  ])
+                ])) : vue.createCommentVNode("", true),
+                filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("div", _hoisted_7, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: String(option.value),
+                      type: "button",
+                      "data-index": index,
+                      class: vue.normalizeClass([
+                        "flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors",
+                        highlightedIndex.value === index && "bg-gray-100 dark:bg-gray-700",
+                        modelValue.value === option.value && "bg-primary/10 text-primary",
+                        modelValue.value !== option.value && "text-gray-700 dark:text-gray-200"
+                      ]),
+                      onClick: ($event) => selectOption(option),
+                      onMouseenter: ($event) => highlightedIndex.value = index
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "option", {
+                        option,
+                        selected: modelValue.value === option.value,
+                        index
+                      }, () => [
+                        modelValue.value === option.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                          key: 0,
+                          icon: "lucide:check",
+                          class: "size-4 shrink-0 text-primary"
+                        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_9)),
+                        vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(option.label), 1)
+                      ])
+                    ], 42, _hoisted_8);
+                  }), 128))
+                ])
+              ], 6)) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = ["hidden"];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormGroup",
+  props: /* @__PURE__ */ vue.mergeModels({
+    label: {},
+    cols: { default: 6 },
+    hidden: { type: Boolean },
+    error: { type: [String, Boolean] },
+    type: {},
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {},
+    options: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const computedCols = vue.computed(() => `span ${props.cols} / span ${props.cols}`);
+    const isSelect = vue.computed(() => props.type === "select");
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        style: vue.normalizeStyle({ gridColumn: computedCols.value }),
+        hidden: __props.hidden
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          vue.renderSlot(_ctx.$slots, "label", {}, () => [
+            __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+              key: 0,
+              "html-for": __props.id ?? __props.name,
+              error: __props.error
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+              ]),
+              _: 1
+            }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true)
+          ]),
+          vue.renderSlot(_ctx.$slots, "input", {}, () => [
+            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$4, vue.mergeProps({
+              key: 0,
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"])) : (vue.openBlock(), vue.createBlock(_sfc_main$5, vue.mergeProps({
+              key: 1,
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
+            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"]))
+          ]),
+          __props.error && typeof __props.error === "string" ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+            key: 0,
+            error: true
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(__props.error), 1)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ])
+      ], 12, _hoisted_1$3);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "relative" };
+const _hoisted_2$2 = ["disabled", "placeholder", "value"];
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchInput",
+  props: {
+    modelValue: {},
+    placeholder: { default: "Search..." },
+    icon: { default: "lucide:search" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleInput = (event) => {
+      const target = event.target;
+      emit("update:modelValue", target.value);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        vue.createVNode(vue.unref(vue$1.Icon), {
+          icon: __props.icon,
+          class: "absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400"
+        }, null, 8, ["icon"]),
+        vue.createElementVNode("input", {
+          disabled: __props.disabled,
+          placeholder: __props.placeholder,
+          value: __props.modelValue,
+          class: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500",
+          type: "text",
+          onInput: handleInput
+        }, null, 40, _hoisted_2$2)
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = ["aria-checked", "disabled"];
+const _hoisted_2$1 = {
+  key: 0,
+  class: "flex flex-col"
+};
+const _hoisted_3$1 = {
+  key: 0,
+  class: "text-sm font-medium text-gray-900 dark:text-white"
+};
+const _hoisted_4$1 = {
+  key: 1,
+  class: "text-sm text-gray-500 dark:text-gray-400"
+};
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Switch",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    size: { default: "md" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const toggle = () => {
+      if (props.disabled) return;
+      emit("update:modelValue", !props.modelValue);
+    };
+    const switchSizes = {
+      sm: "h-5 w-9",
+      md: "h-6 w-11",
+      lg: "h-7 w-14"
+    };
+    const dotSizes = {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5"
+    };
+    const translateSizes = {
+      sm: "translate-x-5",
+      md: "translate-x-6",
+      lg: "translate-x-8"
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", {
+        class: vue.normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
+      }, [
+        vue.createElementVNode("button", {
+          type: "button",
+          role: "switch",
+          "aria-checked": __props.modelValue,
+          disabled: __props.disabled,
+          class: vue.normalizeClass([
+            "relative inline-flex shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            switchSizes[__props.size],
+            __props.modelValue ? "bg-primary" : "bg-gray-300 dark:bg-gray-600"
+          ]),
+          onClick: toggle
+        }, [
+          vue.createElementVNode("span", {
+            class: vue.normalizeClass([
+              "inline-block transform rounded-full bg-white shadow-sm transition-transform",
+              dotSizes[__props.size],
+              __props.modelValue ? translateSizes[__props.size] : "translate-x-1"
+            ])
+          }, null, 2)
+        ], 10, _hoisted_1$1),
+        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+          __props.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+          __props.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1 = ["checked", "disabled", "indeterminate"];
+const _hoisted_2 = {
+  key: 0,
+  class: "flex flex-col"
+};
+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 _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    indeterminate: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const toggle = (event) => {
+      const target = event.target;
+      emit("update:modelValue", target.checked);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", {
+        class: vue.normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
+      }, [
+        vue.createElementVNode("input", {
+          type: "checkbox",
+          checked: __props.modelValue,
+          disabled: __props.disabled,
+          indeterminate: __props.indeterminate,
+          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)
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$7;
+exports._sfc_main$1 = _sfc_main$6;
+exports._sfc_main$2 = _sfc_main$5;
+exports._sfc_main$3 = _sfc_main$4;
+exports._sfc_main$4 = _sfc_main$3;
+exports._sfc_main$5 = _sfc_main$2;
+exports._sfc_main$6 = _sfc_main$1;
+exports._sfc_main$7 = _sfc_main;
+//# sourceMappingURL=Checkbox.vue_vue_type_script_setup_true_lang-DQD2I1Wk.cjs.map