@wikicasa-dev/components 2.1.3 → 2.1.4-alpha.1

package/dist/packages/components/lib/UIKit/BaseTextarea.vue.js

@@ -1,13 +1,11 @@
-import { defineComponent as h, mergeModels as f, useModel as $, ref as x, watch as L, createElementBlock as k, openBlock as b, normalizeClass as s, createElementVNode as o, createCommentVNode as p, unref as a, createVNode as M, withModifiers as d, nextTick as C } from "vue";
-import F from "../../../../UIKit/BaseFloatingLabel.js";
-import { useFloatingLabel as z } from "../../../../composables/useFloatingLabel.js";
-const B = ["id", "data-cy", "rows", "disabled", "aria-labelledby", "readonly", "value"], E = {
-  key: 0,
-  class: "uikit-visible uikit-float-none uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-duration-[50s] uikit-ease-out"
-}, H = ["innerHTML"], q = ["innerHTML"], S = /* @__PURE__ */ h({
+import { defineComponent as T, mergeModels as n, useModel as g, ref as C, watch as h, createElementBlock as f, openBlock as b, normalizeClass as r, createElementVNode as v, createCommentVNode as L, unref as o, createVNode as x, withModifiers as u, nextTick as F } from "vue";
+import M from "./BaseFloatingLabel.vue.js";
+import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
+import { useFloatingLabel as E } from "../../../../composables/useFloatingLabel.js";
+const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelledby", "readonly", "value"], B = ["innerHTML"], q = "peer-data-[validation='invalid']/fieldset:uikit-text-w-red peer-data-[validation='valid']/fieldset:uikit-text-w-blue", S = /* @__PURE__ */ T({
   inheritAttrs: !1,
   __name: "BaseTextarea",
-  props: /* @__PURE__ */ f({
+  props: /* @__PURE__ */ n({
     labelText: { default: "" },
     feedback: {},
     isValid: { default: null },
@@ -17,108 +15,92 @@ const B = ["id", "data-cy", "rows", "disabled", "aria-labelledby", "readonly", "
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ f(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
-  setup(v, { expose: m, emit: w }) {
-    const r = $(v, "modelValue"), n = w, {
-      labelState: l,
+  emits: /* @__PURE__ */ n(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
+  setup(k, { expose: m, emit: p }) {
+    const t = g(k, "modelValue"), s = p, {
+      labelState: d,
       handleFocusIn: c,
-      handleFocusOut: g,
+      handleFocusOut: w,
       setFloatingLabel: y,
       setInlineLabel: V
-    } = z(n), i = x(null);
-    L(
-      r,
+    } = E(), a = C(null);
+    h(
+      t,
       (e) => {
-        `${e}`.length && l.value !== "floating-label" ? y() : !e?.length && l.value !== "inline-label" && document.activeElement !== i.value && V();
+        `${e}`.length && d.value !== "floating-label" ? y() : !e?.length && d.value !== "inline-label" && document.activeElement !== a.value && V();
       },
       { immediate: !0 }
     );
-    const T = ({ target: e }) => {
-      r.value = e.value;
+    const $ = ({ target: e }) => {
+      t.value = e.value;
     };
     return m({
       disableTextarea: () => {
-        i.value && (i.value.setAttribute("readonly", "readonly"), i.value.classList.add("disabled"));
+        a.value && (a.value.setAttribute("readonly", "readonly"), a.value.classList.add("disabled"));
       },
       clearTextareaElem: () => {
-        i.value && (i.value.value = "");
+        a.value && (a.value.value = "");
       },
       focusDisabledTextarea: () => {
-        i.value && (i.value.removeAttribute("readonly"), i.value.classList.remove("disabled"), C(() => {
-          i.value && i.value.focus();
+        a.value && (a.value.removeAttribute("readonly"), a.value.classList.remove("disabled"), F(() => {
+          a.value && a.value.focus();
         }));
       }
-    }), (e, t) => (b(), k("div", {
-      class: s(e.$attrs["wrapper-classes"])
+    }), (e, i) => (b(), f("div", {
+      class: r(e.$attrs["wrapper-classes"])
     }, [
-      o("div", {
-        class: s(["input-wrapper uikit-relative uikit-rounded-xs uikit-px-0", [
-          a(l) === "floating-label" ? "floating-state" : "inline-state"
+      v("div", {
+        class: r(["input-wrapper uikit-relative uikit-rounded-xs uikit-px-0", [
+          o(d) === "floating-label" ? "floating-state" : "inline-state"
         ]])
       }, [
-        o("textarea", {
+        v("textarea", {
           id: e.$attrs.id,
           ref_key: "textarea",
-          ref: i,
+          ref: a,
           "data-cy": e.$attrs["data-cy"],
-          class: s(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-z-20 uikit-mb-10px uikit-mt-15px uikit-w-[calc(100%-1px)] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-xs uikit-border-0 uikit-bg-transparent uikit-bg-no-repeat uikit-px-15px uikit-pb-[8px] uikit-outline-none", [
-            { "is-invalid invalid-bg !uikit-pr-10": e.isValid === !1 },
-            { "is-valid valid-bg !uikit-pr-10": e.isValid },
+          class: r(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-min-h-[130px] uikit-min-w-[343px] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-2xs uikit-border uikit-border-solid uikit-bg-white uikit-px-sm uikit-py-lg uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
+            { "is-invalid": e.isValid === !1 },
+            { "is-valid": e.isValid },
             { "uikit-resize-none": !e.resize },
             e.$attrs.class
           ]]),
+          "data-validation": e.isValid ? "valid" : e.isValid === !1 ? "invalid" : "",
           rows: e.$attrs.rows,
           disabled: e.$attrs.disabled,
           "aria-labelledby": e.$attrs.id,
           readonly: e.$attrs.readonly,
-          onFocusin: t[0] || (t[0] = d((u) => a(c)(), ["stop"])),
-          onFocusout: t[1] || (t[1] = d((u) => a(g)(`${r.value}`.trim()), ["stop"])),
-          onInput: d(T, ["stop"]),
-          onKeydown: t[2] || (t[2] = d((u) => n("keydown", u), ["stop"])),
-          onClick: t[3] || (t[3] = (u) => n("click", u)),
-          value: r.value
-        }, null, 42, B),
-        o("fieldset", {
-          class: s(["uikit-pointer-events-none uikit-absolute -uikit-top-0 uikit-bottom-[3px] uikit-left-0 uikit-right-0 uikit-m-0 uikit-min-w-0 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-solid uikit-bg-white uikit-p-0 uikit-px-2 uikit-text-start uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus/fieldset:uikit-border-2 peer-focus/fieldset:uikit-border-w-primary peer-disabled/fieldset:uikit-bg-w-cultured peer-[&.disabled]/fieldset:uikit-bg-w-cultured peer-focus/fieldset:[&.is-invalid]:uikit-border-w-danger", [
-            { "is-invalid": e.isValid === !1, "is-valid": e.isValid },
-            { "uikit-border-w-danger": e.isValid === !1 },
-            { "uikit-border-w-primary": e.isValid },
-            { "uikit-border-w-secondary": e.isValid === null }
-          ]])
-        }, [
-          e.labelText ? (b(), k("legend", E, [
-            o("span", {
-              class: s(["uikit-px-5px uikit-opacity-0", [
-                {
-                  "uikit-visible uikit-inline-block": a(l) === "floating-label"
-                },
-                {
-                  "uikit-invisible uikit-hidden": a(l) === "inline-label"
-                }
-              ]]),
-              innerHTML: e.labelText
-            }, null, 10, H)
-          ])) : p("", !0)
-        ], 2),
-        M(F, {
+          onFocusin: i[0] || (i[0] = u(
+            (l) => {
+              s("focusin", l), o(c)();
+            },
+            ["stop"]
+          )),
+          onFocusout: i[1] || (i[1] = u(
+            (l) => {
+              s("focusout", l), o(w)(`${t.value}`.trim());
+            },
+            ["stop"]
+          )),
+          onInput: u($, ["stop"]),
+          onKeydown: i[2] || (i[2] = u((l) => s("keydown", l), ["stop"])),
+          onClick: i[3] || (i[3] = (l) => s("click", l)),
+          value: t.value
+        }, null, 42, z),
+        x(M, {
           for: e.$attrs.id,
           "label-text": e.labelText,
-          "label-state": a(l),
+          "label-state": o(d),
           required: e.$attrs.required,
           "is-valid": e.isValid,
-          "label-classes": [
-            a(l) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
-            e.labelClasses
-          ]
+          "label-classes": [e.labelClasses, q]
         }, null, 8, ["for", "label-text", "label-state", "required", "is-valid", "label-classes"])
       ], 2),
-      (e.isValid || e.isValid === !1) && e.feedback ? (b(), k("div", {
+      (e.isValid || e.isValid === !1) && e.feedback ? (b(), f("div", {
         key: 0,
-        class: s(
-          e.isValid === !1 ? "uikit-mt-1 uikit-text-12 uikit-text-w-danger" : "uikit-mt-1 uikit-text-12 uikit-text-w-primary"
-        ),
+        class: r(["uikit-mt-1 uikit-text-12", e.isValid === !1 ? "uikit-text-w-red" : "uikit-text-w-blue"]),
         innerHTML: e.isValid === !1 ? e.feedback.invalid : e.feedback.valid
-      }, null, 10, q)) : p("", !0)
+      }, null, 10, B)) : L("", !0)
     ], 2));
   }
 });

package/dist/packages/components/lib/UIKit/BaseToggle.vue.js

@@ -1,42 +1,38 @@
-import { defineComponent as a, mergeModels as n, useModel as d, createElementBlock as k, openBlock as b, normalizeClass as c, renderSlot as l, createElementVNode as t, createCommentVNode as f, withModifiers as p } from "vue";
-const m = { class: "switch uikit-relative uikit-inline-block uikit-min-w-[40px] uikit-text-sm" }, h = ["data-cy", "checked"], g = ["innerHTML"], y = /* @__PURE__ */ a({
+import { defineComponent as r, mergeModels as d, useModel as n, createElementBlock as k, openBlock as m, renderSlot as l, createVNode as u, createCommentVNode as c, unref as a, withCtx as f, createElementVNode as p } from "vue";
+import { SwitchRoot as h, SwitchThumb as b } from "reka-ui";
+const g = { class: "uikit-flex uikit-items-center uikit-gap-xs" }, x = ["innerHTML"], L = /* @__PURE__ */ r({
   inheritAttrs: !1,
   __name: "BaseToggle",
-  props: /* @__PURE__ */ n({
-    withRightLabel: { type: Boolean, default: !0 },
-    label: { default: "" }
+  props: /* @__PURE__ */ d({
+    label: {}
   }, {
-    modelValue: { type: Boolean, default: !1 },
+    modelValue: { default: !1 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const o = d(r, "modelValue"), u = ({ target: e }) => {
-      o.value = e.checked;
-    };
-    return (e, i) => (b(), k("div", {
-      class: c(["switch-container uikit-inline-block uikit-items-center", e.$attrs.class])
-    }, [
-      l(e.$slots, "leftLabel", {}, void 0, !0),
-      t("label", m, [
-        t("input", {
-          "data-cy": e.$attrs["data-cy"] ?? "",
-          class: "uikit-peer/toggle uikit-h-0 uikit-w-0 uikit-opacity-0",
-          type: "checkbox",
-          checked: o.value,
-          onInput: i[0] || (i[0] = p((s) => u(s), ["stop"]))
-        }, null, 40, h),
-        i[1] || (i[1] = t("span", { class: "slider round uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-top-0 uikit-cursor-pointer uikit-bg-w-lavender uikit-duration-300 before:uikit-absolute before:uikit-bottom-0 before:uikit-left-0 before:uikit-top-0 before:uikit-box-border before:uikit-h-[22px] before:uikit-w-[22px] before:uikit-rounded-circle before:uikit-border before:uikit-border-solid before:uikit-border-w-secondary before:uikit-bg-white before:uikit-shadow-sm before:uikit-duration-300 before:uikit-content-[''] peer-checked/toggle:uikit-bg-w-primary" }, null, -1))
-      ]),
-      e.withRightLabel ? l(e.$slots, "rightLabel", { key: 0 }, () => [
-        t("span", {
-          class: "uikit-ml-10px",
+  setup(o) {
+    const t = n(o, "modelValue");
+    return (e, i) => (m(), k("div", g, [
+      l(e.$slots, "leftLabel"),
+      u(a(h), {
+        modelValue: t.value,
+        "onUpdate:modelValue": i[0] || (i[0] = (s) => t.value = s),
+        class: "uikit-flex uikit-h-[20px] uikit-w-2xl uikit-cursor-pointer uikit-rounded-full uikit-p-0 uikit-transition-[background] data-[state=checked]:uikit-bg-w-blue data-[state=unchecked]:uikit-bg-w-cultured"
+      }, {
+        default: f(() => [
+          u(a(b), { class: "uikit-text-xs uikit-shadow-surface uikit-my-auto uikit-flex uikit-size-[20px] uikit-translate-x-0 uikit-items-center uikit-justify-center uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-shadow-xl uikit-transition-transform uikit-will-change-transform data-[state=checked]:uikit-translate-x-full" })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      e.$slots.leftLabel ? c("", !0) : l(e.$slots, "rightLabel", { key: 0 }, () => [
+        p("span", {
+          class: "uikit-ml-[10px]",
           innerHTML: e.label
-        }, null, 8, g)
-      ], !0) : f("", !0)
-    ], 2));
+        }, null, 8, x)
+      ])
+    ]));
   }
 });
 export {
-  y as default
+  L as default
 };

package/dist/packages/components/lib/UIKit/BaseTooltip.vue.js

@@ -1,41 +1,56 @@
-import { defineComponent as a, createElementBlock as e, openBlock as t, renderSlot as s, createElementVNode as n, normalizeClass as l, createCommentVNode as i } from "vue";
-const r = { class: "base-tooltip" }, m = /* @__PURE__ */ a({
+import { defineComponent as s, createBlock as n, openBlock as u, unref as e, withCtx as i, createVNode as o, normalizeClass as a, renderSlot as r, createElementVNode as d } from "vue";
+import { TooltipProvider as p, TooltipRoot as f, TooltipTrigger as k, TooltipPortal as c, TooltipContent as g, TooltipArrow as m } from "reka-ui";
+const _ = /* @__PURE__ */ s({
   __name: "BaseTooltip",
   props: {
-    theme: { default: () => ({
-      color: "blue",
-      size: "sm"
-    }) },
     direction: { default: "top" },
-    customTooltipClass: { default: "" },
-    showTooltipContentManually: { type: Boolean, default: !0 },
-    tooltipContentClasses: { default: "" }
+    tooltipContentClasses: { default: "" },
+    triggerClasses: { default: "" },
+    delayDuration: { default: 0 }
   },
-  setup(p) {
-    return (o, u) => (t(), e("div", r, [
-      s(o.$slots, "trigger", {}, void 0, !0),
-      n("div", {
-        class: l(["bg-transparent", [
-          o.theme.size,
-          `${o.customTooltipClass ? o.customTooltipClass : "tooltip-content-wrapper"}`
-        ]])
-      }, [
-        o.showTooltipContentManually ? (t(), e("div", {
-          key: 0,
-          class: l(["tooltip-content uikit-shadow-lg uikit-shadow-w-primary/10", [
-            "base-tooltip-arrow",
-            o.direction,
-            o.theme.color,
-            o.theme.size,
-            o.tooltipContentClasses
-          ]])
-        }, [
-          s(o.$slots, "content", {}, void 0, !0)
-        ], 2)) : i("", !0)
-      ], 2)
-    ]));
+  setup(C) {
+    return (t, l) => (u(), n(e(p), { "delay-duration": t.delayDuration }, {
+      default: i(() => [
+        o(e(f), null, {
+          default: i(() => [
+            o(e(k), {
+              class: a(["uikit-inline-flex uikit-w-fit uikit-appearance-none uikit-bg-transparent uikit-p-0", t.triggerClasses])
+            }, {
+              default: i(() => [
+                r(t.$slots, "trigger", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["class"]),
+            o(e(c), null, {
+              default: i(() => [
+                o(e(g), {
+                  class: a(["will-change-[transform,opacity] uikit-shadow-surface uikit-max-w-[250px] uikit-rounded-2xs uikit-bg-white uikit-p-xs uikit-text uikit-text-w-black", t.tooltipContentClasses]),
+                  "side-offset": 8,
+                  side: t.direction
+                }, {
+                  default: i(() => [
+                    r(t.$slots, "content", {}, void 0, !0),
+                    o(e(m), { "as-child": "" }, {
+                      default: i(() => l[0] || (l[0] = [
+                        d("span", { class: "uikit-pin-arrow" }, null, -1)
+                      ])),
+                      _: 1,
+                      __: [0]
+                    })
+                  ]),
+                  _: 3
+                }, 8, ["class", "side"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["delay-duration"]));
   }
 });
 export {
-  m as default
+  _ as default
 };

package/dist/packages/components/lib/UIKit/BaseUploadFile.vue.js

@@ -1,6 +1,5 @@
-import { defineComponent as c, ref as b, watch as m, createElementBlock as o, openBlock as s, normalizeClass as t, createElementVNode as l, createBlock as h, createCommentVNode as n, renderSlot as v } from "vue";
-import w from "../../../../UIKit/BaseFloatingLabel.js";
-const C = ["innerHTML"], g = ["for"], y = ["id", "multiple", "accept"], B = /* @__PURE__ */ c({
+import { defineComponent as p, ref as f, watch as c, createElementBlock as m, openBlock as b, normalizeClass as s, createElementVNode as i, renderSlot as C } from "vue";
+const h = ["for"], k = ["id", "multiple", "accept"], B = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "BaseUploadFile",
   props: {
@@ -13,56 +12,36 @@ const C = ["innerHTML"], g = ["for"], y = ["id", "multiple", "accept"], B = /* @
     legendClasses: { default: "" }
   },
   emits: ["cleared", "uploaded"],
-  setup(r, { emit: d }) {
-    const k = r, u = d, a = b("");
-    m(
-      () => k.clear,
+  setup(n, { emit: r }) {
+    const o = n, a = r, t = f("");
+    c(
+      () => o.clear,
       (e) => {
-        e && (a.value = "", u("cleared"));
+        e && (t.value = "", a("cleared"));
       }
     );
-    const p = ({ target: e }) => {
+    const d = ({ target: e }) => {
       if (!e) return;
-      const i = e.files;
-      i?.length && (a.value = i[0].name, u("uploaded", i[0]));
+      const l = e.files;
+      l?.length && (t.value = l[0].name, a("uploaded", l[0]));
     };
-    return (e, i) => (s(), o("div", {
-      class: t(["base-upload-file-wrapper uikit-relative", [e.$attrs.class]])
+    return (e, l) => (b(), m("div", {
+      class: s(["base-upload-file-wrapper uikit-relative", [e.$attrs.class]])
     }, [
-      l("fieldset", {
-        class: t(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-dashed uikit-border-w-secondary uikit-bg-w-lavender uikit-px-2 uikit-py-0 uikit-text-start", e.fieldsetClasses])
-      }, [
-        e.labelText ? (s(), o("legend", {
-          key: 0,
-          class: t(["uikit-invisible uikit-float-none uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text", e.legendClasses])
-        }, [
-          l("span", {
-            class: "uikit-visible uikit-inline-block uikit-px-5px uikit-opacity-0",
-            innerHTML: e.labelText
-          }, null, 8, C)
-        ], 2)) : n("", !0)
-      ], 2),
-      e.labelText ? (s(), h(w, {
-        key: 0,
-        class: t(e.floatingLabelClasses),
-        "label-text": e.labelText,
-        "label-state": "floating-label",
-        "label-classes": "!-uikit-top-1"
-      }, null, 8, ["class", "label-text"])) : n("", !0),
-      l("label", {
-        class: t(["upload-file-input uikit-relative uikit-z-10 uikit-flex uikit-h-12 uikit-w-full uikit-cursor-pointer uikit-items-center uikit-justify-center uikit-rounded-xs uikit-text-sm", e.labelClasses]),
+      i("label", {
+        class: s(["uikit-btn uikit-btn-w-ternary", e.labelClasses]),
         for: e.id
       }, [
-        l("input", {
+        i("input", {
           id: e.id,
           multiple: e.$attrs.multiple,
           type: "file",
           class: "uikit-hidden",
           accept: e.$attrs.accept,
-          onInput: i[0] || (i[0] = (f) => p(f))
-        }, null, 40, y),
-        v(e.$slots, "label", { filename: a.value })
-      ], 10, g)
+          onInput: l[0] || (l[0] = (u) => d(u))
+        }, null, 40, k),
+        C(e.$slots, "label", { filename: t.value })
+      ], 10, h)
     ], 2));
   }
 });

package/dist/packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js

@@ -1,5 +1,8 @@
-import { defineComponent as b, useId as f, computed as h, createElementBlock as r, openBlock as s, withModifiers as d, normalizeClass as l, createElementVNode as u, renderSlot as m, createCommentVNode as C, toDisplayString as g } from "vue";
-const y = ["id"], V = ["id", "data-cy", "checked", "disabled"], v = ["for"], w = /* @__PURE__ */ b({
+import { defineComponent as m, useId as f, computed as h, watch as b, createElementBlock as p, openBlock as u, createVNode as n, renderSlot as C, unref as l, normalizeClass as y, withCtx as s, createBlock as V, createCommentVNode as g, createTextVNode as B, toDisplayString as w } from "vue";
+import { CheckIcon as I } from "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CheckIcon.js";
+import "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CheckboxRoot as v, CheckboxIndicator as x } from "reka-ui";
+const N = ["for"], q = /* @__PURE__ */ m({
   __name: "CheckboxBtn",
   props: {
     id: {},
@@ -9,67 +12,67 @@ const y = ["id"], V = ["id", "data-cy", "checked", "disabled"], v = ["for"], w =
     } },
     required: { type: Boolean },
     inputClass: {},
-    inline: { type: Boolean, default: !1 },
     label: { default: "" },
     labelClass: {},
-    isValid: { default: null },
     containerId: {},
-    handleLabelClick: { type: Boolean, default: !0 },
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["click", "change", "update:modelValue"],
-  setup(i, { emit: c }) {
-    const a = c, n = f(), o = h(() => `${i.id ?? n}`), k = () => {
-      const e = i.checked ?? i.modelValue;
-      a("change", {
-        id: i.id ?? n,
-        label: i.label,
-        checked: !e
-      }), a("update:modelValue", !e);
-    }, p = () => {
-      k(), i.handleLabelClick && a("click");
+  setup(t, { emit: r }) {
+    const i = f(), d = h(() => `${t.id || i}`), a = r;
+    b(
+      () => t.checked,
+      (e) => {
+        e !== void 0 && a("update:modelValue", e);
+      }
+    );
+    const c = (e) => {
+      e !== "indeterminate" && (a("change", {
+        id: t.id ?? i,
+        label: t.label,
+        checked: e
+      }), a("update:modelValue", e));
     };
-    return (e, t) => (s(), r("div", {
-      id: e.containerId,
-      class: l(["uikit-group uikit-relative uikit-items-center uikit-pl-30px hover:uikit-cursor-pointer", [
-        { "uikit-inline-flex": e.inline },
-        { "uikit-flex": !e.inline },
-        e.$attrs["wrapper-classes"]
-      ]]),
-      onClick: d(p, ["stop"])
+    return (e, o) => (u(), p("label", {
+      class: "uikit-flex uikit-items-center uikit-gap-sm uikit-text-16",
+      for: d.value,
+      onClick: o[0] || (o[0] = (k) => a("click", k))
     }, [
-      u("input", {
-        id: o.value,
-        ref: "checkbox",
+      n(l(v), {
+        id: d.value,
+        "model-value": e.modelValue,
         "data-cy": e.dataCy,
-        class: l(["uikit-pointer-events-none uikit-absolute uikit-left-0 uikit-size-4 uikit-appearance-none uikit-rounded-3xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white checked:uikit-bg-center checked:uikit-bg-no-repeat group-hover:uikit-cursor-pointer", [
-          { "!uikit-border-w-danger": e.isValid === !1 },
-          e.inputClass,
-          e.isValid === !1 ? "checked-bg-invalid" : "checked-bg"
-        ]]),
-        type: "checkbox",
-        checked: e.checked ?? e.modelValue,
         disabled: e.disabled,
-        onChange: t[0] || (t[0] = d(() => {
-        }, ["prevent", "stop"])),
-        onClick: t[1] || (t[1] = d(() => {
-        }, ["prevent", "stop"]))
-      }, null, 42, V),
-      m(e.$slots, "label", {}, () => [
-        u("label", {
-          class: l(["uikit-text-sm group-hover:uikit-cursor-pointer", [e.labelClass, { "uikit-text-w-danger": e.isValid === !1 }]]),
-          for: o.value
-        }, g(e.label), 11, v),
-        e.required ? (s(), r("span", {
-          key: 0,
-          class: l(["required after:uikit-content-['*']", [
-            e.isValid !== !1 ? "after:uikit-text-w-primary" : "after:uikit-text-w-danger"
-          ]])
-        }, null, 2)) : C("", !0)
-      ], !0)
-    ], 10, y));
+        class: y(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-3xs uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
+          {
+            "uikit-bg-white": !e.modelValue,
+            "uikit-bg-w-blue": e.modelValue
+          },
+          e.inputClass
+        ]]),
+        "onUpdate:modelValue": c
+      }, {
+        default: s(() => [
+          n(l(x), { class: "uikit-flex" }, {
+            default: s(() => [
+              e.modelValue === !0 ? (u(), V(l(I), {
+                key: 0,
+                "fill-color": "#fff",
+                width: 12,
+                height: 14
+              })) : g("", !0)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["id", "model-value", "data-cy", "disabled", "class"]),
+      C(e.$slots, "label", {}, () => [
+        B(w(e.label), 1)
+      ])
+    ], 8, N));
   }
 });
 export {
-  w as default
+  q as default
 };