@wikicasa-dev/components 2.2.6 → 2.2.8-alpha.0

package/dist/index.js

@@ -1,88 +1,89 @@
-import { default as p } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
-import { default as d } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
-import { default as x } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
-import { default as B } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
-import { default as c } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
-import { default as b } from "./UIKit/Checkbox/CheckboxBtn.js";
-import { default as C } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
-import { default as A } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
-import { default as I } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as L } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
-import { default as D } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
-import { default as F } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
-import { default as M } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
-import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';/* empty css                                             */
-import { default as R } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
+import { default as m } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as u } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
+import { default as i } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as n } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
+import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as S } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as g } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
+import { default as h } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as T } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as w } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as k } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as v } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as G } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+import { default as O } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
+/* empty css                                             */
+import { default as P } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
 /* empty css                                                    */
-import { default as U } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
+import { default as V } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
 /* empty css                                             */
-import { default as j } from "./packages/components/lib/UIKit/BaseButton.vue.js";
-import { default as y } from "./UIKit/BaseCard.js";
-import { default as E } from "./UIKit/BaseComplexToggle.js";
-import { default as J } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
+import { default as q } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as z } from "./UIKit/BaseCard.js";
+import { default as H } from "./UIKit/BaseComplexToggle.js";
+import { default as K } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
 /* empty css                                                */
-import { default as N } from "./UIKit/BaseFloatingLabel.js";
-import { default as W } from "./UIKit/BaseInput.js";
-import { default as Y } from "./packages/components/lib/UIKit/BasePagination.vue.js";
-import { default as _ } from "./UIKit/BaseSlider.js";
-import { default as ee } from "./UIKit/BaseTextarea.js";
-import { default as oe } from "./UIKit/BaseToggle.js";
-import { default as re } from "./UIKit/BaseTooltip.js";
-import { default as se } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
-import { default as pe } from "./packages/components/lib/UIKit/BaseModal.vue.js";
+import { default as Q } from "./UIKit/BaseFloatingLabel.js";
+import { default as X } from "./UIKit/BaseInput.js";
+import { default as Z } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as $ } from "./UIKit/BaseSlider.js";
+import { default as ae } from "./UIKit/BaseTextarea.js";
+import { default as te } from "./UIKit/BaseToggle.js";
+import { default as fe } from "./UIKit/BaseTooltip.js";
+import { default as le } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as me } from "./packages/components/lib/UIKit/BaseModal.vue.js";
 /* empty css                                             */
-import { default as de } from "./UIKit/StaticSpinner.js";
-import { default as xe } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
-import { default as Be } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
-import { default as ce } from "./packages/components/lib/chart/DoughnutChart.vue.js";
-import { default as be } from "./packages/components/lib/chart/LineChart.vue.js";
-import { default as Ce } from "./UIKit/Slider/SimpleSlider.js";
-import { default as Ae } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
+import { default as ue } from "./UIKit/StaticSpinner.js";
+import { default as ie } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as ne } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as Se } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as ge } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as he } from "./UIKit/Slider/SimpleSlider.js";
+import { default as Te } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
 /* empty css                                                */
-import { default as Ie } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
-import { default as Le } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
-import { default as De } from "./components/carousel/SwiperCarousel.js";
-import { default as Fe } from "./components/carousel/SwiperSlide.js";
-import { default as Me } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
+import { default as we } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as ke } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as ve } from "./components/carousel/SwiperCarousel.js";
+import { default as Ge } from "./components/carousel/SwiperSlide.js";
+import { default as Oe } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
 export {
-  F as AccessibleSelect,
-  p as BaseAccordion,
-  d as BaseAccordionBtn,
-  x as BaseAccordionContent,
-  B as BaseAccordionItem,
-  M as BaseAlert,
-  R as BaseAutocomplete,
-  U as BaseBadge,
-  Me as BaseBreadcrumb,
-  j as BaseButton,
-  y as BaseCard,
-  E as BaseComplexToggle,
-  J as BaseDropDown,
-  N as BaseFloatingLabel,
-  W as BaseInput,
-  pe as BaseModal,
-  Y as BasePagination,
-  xe as BaseShimmerLoader,
-  _ as BaseSlider,
-  Ae as BaseSnackbar,
-  I as BaseTab,
-  A as BaseTabView,
-  ee as BaseTextarea,
-  oe as BaseToggle,
-  re as BaseTooltip,
-  se as BaseUploadFile,
-  b as CheckboxBtn,
-  C as CheckboxGroup,
-  ce as DoughnutChart,
-  Ie as IntersectionObservable,
-  Le as IntersectionObserver,
-  be as LineChart,
-  L as RadioButton,
-  D as RadioGroup,
-  c as SelectItem,
-  Be as ShimmerMultiLine,
-  Ce as SimpleSlider,
-  de as StaticSpinner,
-  De as SwiperCarousel,
-  Fe as SwiperSlide
+  G as AccessibleSelect,
+  m as BaseAccordion,
+  u as BaseAccordionBtn,
+  i as BaseAccordionContent,
+  n as BaseAccordionItem,
+  O as BaseAlert,
+  P as BaseAutocomplete,
+  V as BaseBadge,
+  Oe as BaseBreadcrumb,
+  q as BaseButton,
+  z as BaseCard,
+  H as BaseComplexToggle,
+  K as BaseDropDown,
+  Q as BaseFloatingLabel,
+  X as BaseInput,
+  me as BaseModal,
+  Z as BasePagination,
+  ie as BaseShimmerLoader,
+  $ as BaseSlider,
+  Te as BaseSnackbar,
+  w as BaseTab,
+  T as BaseTabView,
+  ae as BaseTextarea,
+  te as BaseToggle,
+  fe as BaseTooltip,
+  le as BaseUploadFile,
+  g as CheckboxBtn,
+  h as CheckboxGroup,
+  Se as DoughnutChart,
+  we as IntersectionObservable,
+  ke as IntersectionObserver,
+  ge as LineChart,
+  k as RadioButton,
+  v as RadioGroup,
+  S as SelectItem,
+  ne as ShimmerMultiLine,
+  he as SimpleSlider,
+  ue as StaticSpinner,
+  ve as SwiperCarousel,
+  Ge as SwiperSlide
 };

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js

@@ -1,31 +1,30 @@
-import { defineComponent as d, ref as u, provide as c, renderSlot as f } from "vue";
-import { isEmptyObject as p } from "@wikicasa-dev/utilities";
-const h = /* @__PURE__ */ d({
+import { defineComponent as i, mergeModels as d, useModel as r, provide as u, createBlock as n, openBlock as s, unref as p, withCtx as m, renderSlot as c } from "vue";
+import { AccordionRoot as f } from "reka-ui";
+const b = /* @__PURE__ */ i({
   __name: "BaseAccordion",
-  props: {
-    autoClose: { type: Boolean, default: !0 },
-    autoUpdate: { type: Boolean, default: !0 }
-  },
-  setup(l) {
-    const n = u(null), o = u(
-      {}
-    ), i = (e, t) => {
-      if (l.autoClose && t && !p(t))
-        for (const r in t)
-          r !== `${e}` && (t[r].active = !1);
-    }, s = (e, t) => {
-      t && (t[e].active = !(t[e].active ?? !1));
-    }, a = (e, t) => {
-      i(e.id, t ?? o.value), n.value = e, s(e.id, t ?? o.value);
-    };
-    return c("handleClick", (e) => {
-      l.autoUpdate && a(e);
-    }), c("accordionItems", o), (e, t) => f(e.$slots, "default", {
-      updatePrev: a,
-      prev: n.value
-    });
+  props: /* @__PURE__ */ d({
+    collapsible: { type: Boolean },
+    type: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const e = r(t, "modelValue");
+    return u("isActive", (l) => typeof e.value == "string" ? e.value === l : !!e.value?.find((o) => o === l)), (l, o) => (s(), n(p(f), {
+      collapsible: t.collapsible,
+      type: t.type,
+      modelValue: e.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => e.value = a)
+    }, {
+      default: m(() => [
+        c(l.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["collapsible", "type", "modelValue"]));
   }
 });
 export {
-  h as default
+  b as default
 };

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js

@@ -38,10 +38,13 @@ const C = ["id"], w = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ l(
           }, ["prevent", "stop"]))
         }, [
           m(f(g), {
-            class: n(["uikit-transition-transform motion-reduce:uikit-transition-none", [
-              t.accordionOpen ? "uikit-rotate-180" : "",
-              o.$attrs["arrow-classes"]
-            ]]),
+            class: n([
+              "uikit-transition-transform motion-reduce:uikit-transition-none",
+              [
+                t.accordionOpen ? "uikit-rotate-180" : "",
+                o.$attrs["arrow-classes"]
+              ]
+            ]),
             "stroke-color": t.arrowColor ?? "#222",
             width: t.arrowWidth,
             height: t.arrowWidth

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js

@@ -1,139 +1,73 @@
-import { defineComponent as $, ref as y, inject as v, watch as r, unref as d, createElementBlock as f, openBlock as u, normalizeClass as m, createBlock as g, createCommentVNode as O, renderSlot as a, createElementVNode as k, withModifiers as A, createVNode as w, withCtx as n } from "vue";
-import B from "./BaseAccordionBtn.vue.js";
-import E from "./BaseAccordionContent.vue.js";
-import { ArrowIcon as W } from "@wikicasa-dev/svg-icons";
-const x = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M = ["itemprop", "innerHTML"], L = /* @__PURE__ */ $({
-  inheritAttrs: !1,
+import { defineComponent as n, inject as c, createBlock as u, openBlock as d, unref as t, withCtx as s, createVNode as a, renderSlot as r, normalizeClass as l, createTextVNode as k, toDisplayString as f } from "vue";
+import { AccordionItem as h, AccordionHeader as m, AccordionTrigger as C, AccordionContent as w } from "reka-ui";
+import { ArrowIcon as g } from "@wikicasa-dev/svg-icons";
+const b = /* @__PURE__ */ n({
   __name: "BaseAccordionItem",
   props: {
     title: {},
-    id: {},
-    active: { type: Boolean, default: !1 },
     arrowColor: {},
     arrowWidth: { default: 12 },
-    onContainerClickExpand: { type: Boolean, default: !1 },
-    rootClasses: {},
     dataCy: {},
-    btnClasses: {},
-    itemProp: {},
-    arrowClasses: {},
-    btnWrapperClasses: {},
-    accordionContentClasses: {},
-    accordionOpenClasses: {},
-    accordionCloseClasses: {},
-    accordionClasses: {}
+    value: {},
+    triggerClasses: {},
+    headerClasses: {},
+    contentClasses: {},
+    arrowClasses: {}
   },
-  emits: ["click", "accordionOpened", "accordionClosed", "update:accordionState"],
-  setup(e, { emit: b }) {
-    const s = b, i = y(!1), l = v(
-      "accordionItems",
-      () => {
-      },
-      !0
-    ), h = v(
-      "handleClick",
-      () => {
-      },
-      !0
-    ), C = (t, o = !1) => {
-      s(o ? "accordionOpened" : "accordionClosed", t), s("update:accordionState", o);
-    };
-    l && (l.value[e.id] = { id: e.id, title: e.title, active: e.active }), r(
-      () => d(l),
-      (t) => {
-        const o = t?.[e.id];
-        !o || i.value === o.active || (i.value = o.active ?? !1, C(
-          { id: e.id, title: e.title, active: o.active },
-          o.active
-        ));
-      },
-      { deep: !0, immediate: !0 }
-    ), r(i, (t) => {
-      i.value = t, C({ id: e.id, title: e.title, active: i.value }, t);
-    }), r(
-      () => e.active,
-      (t) => {
-        i.value = t;
-      },
-      { immediate: !0 }
-    );
-    const c = () => {
-      i.value = !i.value;
-    };
-    return (t, o) => (u(), f("div", {
-      class: m(e.rootClasses)
-    }, [
-      !t.$slots.custom_content && !t.$slots.custom_btn && !t.$slots.custom_accordion ? (u(), f("div", x, [
-        k("button", {
-          id: `accordion-title-${e.id}`,
-          type: "button",
-          class: m(["uikit-flex uikit-w-full uikit-items-center uikit-justify-between uikit-border-0 uikit-bg-white uikit-px-5 uikit-py-4 uikit-text-left uikit-font-semibold uikit-transition-colors active:max-sm:uikit-bg-w-cultured hover:sm:uikit-bg-w-cultured", e.btnClasses]),
-          "data-cy": e.dataCy,
-          "aria-expanded": i.value,
-          "aria-controls": `accordion-text-${e.id}`,
-          onClick: o[0] || (o[0] = A((N) => {
-            c(), d(h)?.({ id: e.id, title: e.title, active: i.value }), s("click");
-          }, ["prevent", "stop"]))
-        }, [
-          k("span", {
-            itemprop: e.itemProp,
-            innerHTML: e.title
-          }, null, 8, M),
-          w(d(W), {
-            class: m(["uikit-flex-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", [i.value ? "uikit-rotate-180" : "", e.arrowClasses]]),
-            "arrow-classes": e.arrowClasses,
-            width: e.arrowWidth,
-            height: e.arrowWidth
-          }, null, 8, ["class", "arrow-classes", "width", "height"])
-        ], 10, I)
-      ])) : (t.$slots.custom_content || t.$slots.custom_btn) && !t.$slots.custom_accordion ? (u(), g(B, {
-        key: 1,
-        id: e.id,
-        "btn-wrapper-classes": e.btnWrapperClasses,
-        "btn-classes": e.btnClasses,
-        "arrow-color": e.arrowColor,
-        "arrow-classes": e.arrowClasses,
-        "toggle-accordion": c,
-        "on-container-click-expand": e.onContainerClickExpand,
-        "accordion-open": i.value
-      }, {
-        custom_content: n(() => [
-          a(t.$slots, "custom_content")
-        ]),
-        custom_btn: n(() => [
-          a(t.$slots, "custom_btn", {
-            btnId: `btn-${e.id}`,
-            isOpen: i.value,
-            toggleAccordion: c
-          })
-        ]),
-        _: 3
-      }, 8, ["id", "btn-wrapper-classes", "btn-classes", "arrow-color", "arrow-classes", "on-container-click-expand", "accordion-open"])) : O("", !0),
-      a(t.$slots, "custom_accordion", {
-        id: e.id,
-        isOpen: i.value,
-        toggleAccordion: c
-      }, () => [
-        w(E, {
-          id: e.id,
-          "accordion-open": i.value,
-          "accordion-open-classes": e.accordionOpenClasses,
-          "accordion-close-classes": e.accordionCloseClasses,
-          "accordion-content-classes": e.accordionContentClasses,
-          "accordion-classes": e.accordionClasses
+  setup(e) {
+    const o = c("isActive");
+    return (i, v) => (d(), u(t(h), {
+      value: e.value,
+      "data-cy": e.dataCy
+    }, {
+      default: s(() => [
+        a(t(m), {
+          class: "uikit-flex uikit-items-center uikit-justify-between",
+          "header-classes": e.headerClasses
         }, {
-          custom_accordion_content: n(() => [
-            a(t.$slots, "custom_accordion_content", { isOpen: i.value })
+          default: s(() => [
+            r(i.$slots, "headerContent"),
+            a(t(C), {
+              class: l([
+                e.triggerClasses,
+                {
+                  "uikit-00inline-flex uikit-cursor-pointer uikit-items-center uikit-justify-between uikit-border-0 uikit-bg-transparent uikit-px-[16px] uikit-py-[16px] uikit-text-left uikit-font-semibold": !i.$slots.trigger,
+                  "uikit-w-full": !i.$slots.headerContent
+                }
+              ])
+            }, {
+              default: s(() => [
+                r(i.$slots, "trigger", {
+                  active: t(o)(e.value)
+                }, () => [
+                  k(f(e.title) + " ", 1),
+                  a(t(g), {
+                    class: l(["uikit-flex-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", [t(o)(e.value) ? "uikit-rotate-180" : "", e.arrowClasses]]),
+                    "arrow-classes": e.arrowClasses,
+                    width: e.arrowWidth,
+                    height: e.arrowWidth
+                  }, null, 8, ["class", "arrow-classes", "width", "height"])
+                ])
+              ]),
+              _: 3
+            }, 8, ["class"])
           ]),
-          default: n(() => [
-            a(t.$slots, "default", { isOpen: i.value })
+          _: 3
+        }, 8, ["header-classes"]),
+        a(t(w), {
+          class: "uikit-base-accordion-item-content uikit-px-[16px]",
+          "content-classes": e.contentClasses
+        }, {
+          default: s(() => [
+            r(i.$slots, "default")
           ]),
           _: 3
-        }, 8, ["id", "accordion-open", "accordion-open-classes", "accordion-close-classes", "accordion-content-classes", "accordion-classes"])
-      ])
-    ], 2));
+        }, 8, ["content-classes"])
+      ]),
+      _: 3
+    }, 8, ["value", "data-cy"]));
   }
 });
 export {
-  L as default
+  b as default
 };

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

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