adata-ui 4.0.10 → 4.0.12

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "4.0.10",
+  "version": "4.0.12",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -34,7 +34,8 @@ const module = defineNuxtModule({
     }
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
-      prefix: "Adt"
+      prefix: "Adt",
+      global: true
     });
     _nuxt.options.alias["#icons"] = resolver.resolve("./runtime/icons");
     addComponentsDir({

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="inline-flex w-full rounded-md"
+    :class="twMerge(colorOptions.description[color], textBgClasses)"
+  >
+    <div
+      class="flex items-center justify-center rounded-l-md"
+      :class="twMerge([colorOptions.icon[color], sizeOptions[size]], iconBgClasses)"
+    >
+      <slot name="icon">
+        <i-info-circle
+          v-if="iconType == 'circle'"
+          :class="`w-[${iconSize}] h-[${iconSize}]`"
+        />
+        <i-warning-triangle
+          v-if="iconType == 'triangle'"
+          :class="`w-[${iconSize}] h-[${iconSize}]`"
+        />
+      </slot>
+    </div>
+    <div
+      :class="sizeOptions[size]"
+      class="rounded-r-md flex items-center"
+    >
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { twMerge } from "tailwind-merge";
+defineOptions({ name: "AAlert" });
+defineProps({
+  size: { type: String, required: false, default: "sm" },
+  color: { type: String, required: false, default: "blue" },
+  iconBgClasses: { type: String, required: false, default: "" },
+  textBgClasses: { type: String, required: false, default: "" },
+  iconType: { type: String, required: false, default: "circle" },
+  iconSize: { type: String, required: false, default: "16px" }
+});
+const sizeOptions = {
+  lg: "text-base p-2",
+  sm: "text-sm px-2 py-[3.5px]",
+  xs: "text-xs px-2 py-[3.5px]"
+};
+const colorOptions = {
+  icon: {
+    blue: "bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900",
+    green: "bg-green-500 text-white dark:text-gray-900",
+    orange: "bg-orange-500 text-white dark:text-gray-900",
+    deepblue: "bg-deepblue-900 text-white dark:text-gray-900",
+    red: "bg-red-500 text-white dark:bg-red-400 dark:text-gray-900"
+  },
+  description: {
+    blue: "bg-blue-100 dark:bg-gray-200/10 text-blue-700 dark:text-blue-500",
+    green: "bg-green-100 text-green-500",
+    orange: "bg-orange-100 text-orange-500 dark:bg-[#FFF5E6]",
+    deepblue: "bg-deepblue-100 text-deepblue-900",
+    red: "bg-red-100 text-red-500 dark:bg-[#3A3133] dark:text-red-400"
+  }
+};
+</script>

package/dist/runtime/components/Alert.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    size?: 'lg' | 'sm' | 'xs';
+    color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange';
+    iconBgClasses?: string;
+    textBgClasses?: string;
+    iconType?: 'triangle' | 'circle';
+    iconSize?: string;
+}
+declare var __VLS_1: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "lg" | "sm" | "xs";
+    color: "blue" | "green" | "red" | "deepblue" | "orange";
+    iconBgClasses: string;
+    textBgClasses: string;
+    iconType: "triangle" | "circle";
+    iconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ColorMode.vue

@@ -0,0 +1,45 @@
+<script setup>
+import AToggle from "./Toggle.vue";
+import Sun from "#icons/color-mode/sun.vue";
+import Moon from "#icons/color-mode/moon.vue";
+import { useColorMode } from "#imports";
+const colorMode = useColorMode();
+const setColorMode = useCookie("colorMode");
+if (setColorMode.value) {
+  colorMode.preference = setColorMode.value;
+}
+const mode = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    const value = colorMode.value === "dark" ? "light" : "dark";
+    const hostname = location.hostname.split(".").reverse();
+    const maxAge = 60 * 60 * 24 * 365;
+    colorMode.preference = value;
+    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`;
+  }
+});
+onMounted(() => {
+  window.addEventListener("storage", (event) => {
+    if (event.key === "nuxt-color-mode") {
+      colorMode.preference = event.newValue;
+    }
+  });
+});
+</script>
+
+<template>
+  <client-only>
+    <a-toggle
+      v-model="mode"
+      size="2xl"
+      :on-icon="Moon"
+      :off-icon="Sun"
+      off-icon-class="w-4 h-4"
+      on-icon-class="w-4 h-4"
+      active-class="data-[state=checked]:bg-gray-800"
+      active-container-class="data-[state=checked]:bg-black"
+    />
+  </client-only>
+</template>

package/dist/runtime/components/ColorMode.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Footer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { PAGES } from "../shared/constants/pages";
 import ISocialsLinkedin from "#icons/socials/linkedin.vue";
 import ISocialsYoutube from "#icons/socials/youtube.vue";
 import ISocialsInstagram from "#icons/socials/instagram.vue";
@@ -6,9 +7,11 @@ import ISocialsTelegram from "#icons/socials/telegram.vue";
 import ISocialsFacebook from "#icons/socials/facebook.vue";
 import ISocialsTiktok from "#icons/socials/tik-tok.vue";
 import IAdata from "#icons/logo/adata.vue";
-import { useI18n, ref } from "#imports";
+import { useI18n } from "#imports";
 const year = (/* @__PURE__ */ new Date()).getFullYear();
 const { t } = useI18n();
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
 const socialMedia = [
   {
     icon: ISocialsLinkedin,
@@ -41,8 +44,170 @@ const socialMedia = [
     name: "Tiktok"
   }
 ];
-const links = ref([]);
-const info = ref([]);
+const mainLinks = {
+  counterparties: {
+    title: "footer.counterparties.title",
+    link: "https://pk.adata.kz",
+    items: [
+      {
+        title: "footer.counterparties.checkCounterparties",
+        link: `https://pk.${mode}.kz` + PAGES.pk.main
+      },
+      {
+        title: "footer.counterparties.compareCounterparties",
+        link: `https://pk.${mode}.kz` + PAGES.pk.compare
+      },
+      {
+        title: "footer.counterparties.indirectConnections",
+        link: `https://pk.${mode}.kz` + PAGES.pk.connections
+      },
+      {
+        title: "footer.counterparties.massCheck",
+        link: `https://pk.${mode}.kz` + PAGES.pk.employees
+      },
+      {
+        title: "footer.counterparties.foreignCounterparties",
+        link: `https://pk.${mode}.kz` + PAGES.pk.foreign
+      },
+      {
+        title: "footer.counterparties.sanctions",
+        link: `https://pk.${mode}.kz` + PAGES.pk.sanctions
+      },
+      {
+        title: "footer.counterparties.offshores",
+        link: `https://pk.${mode}.kz` + PAGES.pk.offshore
+      }
+    ]
+  },
+  work: {
+    title: "footer.work.title",
+    link: `https://work.${mode}.kz` + PAGES.work.vacancy,
+    items: [
+      {
+        title: "footer.work.createFindVacancies",
+        link: `https://work.${mode}.kz` + PAGES.work.vacancy
+      },
+      {
+        title: "footer.work.createFindResume",
+        link: `https://work.${mode}.kz` + PAGES.work.summary
+      }
+    ]
+  },
+  tenders: {
+    title: "footer.tenders.title",
+    link: `https://tender.${mode}.kz` + PAGES.tender.main,
+    items: [
+      {
+        title: "footer.tenders.searchTenders",
+        link: `https://tender.${mode}.kz` + PAGES.tender.main
+      },
+      {
+        title: "footer.tenders.purchasePlans",
+        link: `https://tender.${mode}.kz` + PAGES.tender.plans
+      }
+    ]
+  },
+  fines: {
+    title: "footer.fines.title",
+    link: `https://avto.${mode}.kz` + PAGES.fines.main,
+    items: [
+      {
+        title: "footer.fines.checkFines",
+        link: `https://avto.${mode}.kz` + PAGES.fines.main
+      },
+      {
+        title: "footer.fines.checkAuto",
+        link: `https://avto.${mode}.kz` + PAGES.fines.avto
+      },
+      {
+        title: "footer.fines.massCheckAuto",
+        link: `https://avto.${mode}.kz` + PAGES.fines.bulk
+      }
+    ]
+  },
+  analytics: {
+    title: "footer.analytics.title",
+    link: `https://analytics-new.${mode}.kz` + PAGES.analytics.main,
+    items: [
+      {
+        title: "footer.analytics.purchaseAnalysis",
+        link: `https://analytics.${mode}.kz` + PAGES.analytics.analysis
+      },
+      {
+        title: "footer.analytics.businessActivityIndex",
+        link: `https://analytics-new.${mode}.kz` + PAGES.analytics.index
+      },
+      {
+        title: "footer.analytics.taxpayerRanking",
+        link: `https://analytics-new.${mode}.kz` + PAGES.analytics.rating
+      },
+      {
+        title: "footer.analytics.businessEntities",
+        link: `https://analytics-new.${mode}.kz` + PAGES.analytics.business
+      }
+    ]
+  },
+  fea: {
+    title: "footer.fea.title",
+    link: `https://tnved.${mode}.kz` + PAGES.fea.main,
+    items: [
+      {
+        title: "footer.fea.i",
+        link: `https://tnved.${mode}.kz` + PAGES.fea.t
+      },
+      {
+        title: "footer.fea.o",
+        link: `https://tnved.${mode}.kz` + PAGES.fea.o
+      },
+      {
+        title: "footer.fea.cp",
+        link: `https://tnved.${mode}.kz` + PAGES.fea.cp
+      },
+      {
+        title: "footer.fea.calc",
+        link: `https://tnved.${mode}.kz` + PAGES.fea.ca
+      },
+      {
+        title: "footer.fea.mr",
+        link: `https://tnved.${mode}.kz` + PAGES.fea.tr
+      }
+    ]
+  }
+};
+const infoLinks = [
+  {
+    title: "footer.info.tariff",
+    link: `https://${mode}.kz` + PAGES.tariffs
+  },
+  {
+    title: "footer.info.helpful",
+    link: `https://${mode}.kz` + PAGES.usefulMain
+  },
+  {
+    title: "footer.info.api",
+    link: `https://${mode}.kz` + PAGES.apiDescription
+  },
+  {
+    title: "footer.info.userAgreement",
+    link: `https://${mode}.kz` + PAGES.userAgreement
+  },
+  {
+    title: "footer.info.privacyPolicy",
+    link: `https://${mode}.kz` + PAGES.privacy
+  },
+  {
+    title: "footer.info.vacancy",
+    link: `https://${mode}.kz` + PAGES.vacancy
+  },
+  {
+    title: "footer.info.counterparty",
+    link: `https://pk.${mode}.kz` + PAGES.pk.counterparty
+  },
+  {
+    title: "footer.info.contacts",
+    link: `https://${mode}.kz` + PAGES.contacts
+  }
+];
 </script>
 
 <template>
@@ -58,10 +223,10 @@ const info = ref([]);
       />
       <div class="grid gap-5 lg:grid-cols-5 lg:gap-10 xl:grid-cols-6">
         <div
-          v-for="(link, key) in links"
+          v-for="(link, key) in mainLinks"
           :key="key"
         >
-          <div
+          <adt-footer-accordion
             :content="link.items"
             :label="t(link.title)"
             :link="link.link.replace(/\/$/, '')"
@@ -92,7 +257,7 @@ const info = ref([]);
         >
           <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
             <nuxt-link
-              v-for="(item, idx) in info"
+              v-for="(item, idx) in infoLinks"
               :key="idx"
               target="_blank"
               class="text-[10px]"

package/dist/runtime/components/FooterAccordion.vue

@@ -1,13 +1,55 @@
-<script setup lang="ts">
-
+<script setup>
+import { useI18n } from "#imports";
+defineProps({
+  label: { type: String, required: true },
+  link: { type: String, required: true },
+  content: { type: Array, required: true }
+});
+const { t } = useI18n();
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col ">
+    <div
+      class="flex gap-2 justify-between "
+    >
+      <nuxt-link-locale
+        class="text-sm"
+        :to="link"
+      >
+        {{ label }}
+      </nuxt-link-locale>
 
+      <div
+        class="transition-all lg:hidden cursor-pointer"
+      >
+        <i-check-circle
+          v-if="content.length"
+          filled
+          :font-controlled="false"
+          class="w-6 h-6  "
+        />
+      </div>
+    </div>
+    <transition
+      name="accordion"
+    >
+      <div
+        class="mt-2 flex flex-col gap-2"
+      >
+        <nuxt-link-locale
+          v-for="(item, idx) in content"
+          :key="idx"
+          class="text-xs"
+          :to="item.link.replace(/\/$/, '')"
+        >
+          {{ t(item.title) }}
+        </nuxt-link-locale>
+      </div>
+    </transition>
   </div>
 </template>
 
 <style scoped>
-
+.accordion-enter-active,.accordion-leave-active{overflow:hidden;transition:height .3s ease,opacity .3s ease,margin .3s ease}.accordion-enter-from,.accordion-leave-to{height:0!important;margin:0!important;opacity:0!important}
 </style>

package/dist/runtime/components/FooterAccordion.vue.d.ts

@@ -1,2 +1,11 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface Item {
+    title: string;
+    link: string;
+}
+interface Props {
+    label: string;
+    link: string;
+    content: Item[];
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Header.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
 import TopHeader from "./header/TopHeader.vue";
 import HeaderLink from "./header/HeaderLink.vue";
 import ProfileMenu from "./header/ProfileMenu.vue";
@@ -7,6 +8,8 @@ import ILogo from "#icons/logo/logo.vue";
 import ILogout from "#icons/navigation/logout.vue";
 import IAdata from "#icons/logo/adata.vue";
 import ISearch from "#icons/search.vue";
+import IChevronDown from "#icons/arrow/chevron-down.vue";
+import ColorMode from "./ColorMode.vue";
 const props = defineProps({
   replenish: { type: String, required: false },
   hasNotification: { type: Boolean, required: false },
@@ -38,6 +41,7 @@ const goAuth = () => {
 const goToAnotherModule = () => {
   location.href = "https://adata.kz";
 };
+const profileMenuOpen = ref(false);
 const fetchContacts = async () => {
   try {
     const response = await fetch(
@@ -133,28 +137,38 @@ onBeforeMount(() => {
             <div />
             <div v-if="langIsOn || module === 'fea'" />
           </div>
+          <color-mode />
+          <dropdown-menu-root
+            v-model:open="profileMenuOpen"
+          >
+            <dropdown-menu-trigger>
+              <div
+                v-show="isAuthenticated"
+                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
+                @click.stop="profileMenuOpen = true"
+              >
+                <span>{{ email }}</span>
+                <i-chevron-down :class="{ 'rotate-180': profileMenuOpen }" />
+              </div>
+            </dropdown-menu-trigger>
+            <dropdown-menu-portal>
+              <dropdown-menu-content
+                side="bottom"
+                align="end"
+                :side-offset="20"
+              >
+                <profile-menu
+                  :balance="balance"
+                  :days-remaining="daysRemaining"
+                  :limit-remaining="limitRemaining"
+                  :rate="rate"
+                  :replenish="replenish"
+                  @logout="$emit('logout')"
+                />
+              </dropdown-menu-content>
+            </dropdown-menu-portal>
+          </dropdown-menu-root>
 
-          <!--          <div v-show="isAuthenticated"> -->
-          <!--            <template #default="{ onExpand, expanded }"> -->
-          <!--              <div -->
-          <!--                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex" -->
-          <!--                @click.stop="onExpand" -->
-          <!--              > -->
-          <!--                <span>{{ email }}</span> -->
-          <!--                <arrow :class="{ 'rotate-180': expanded }" /> -->
-          <!--              </div> -->
-          <!--            </template> -->
-          <!--            <template #content> -->
-          <!--              <profile-menu -->
-          <!--                :balance="balance" -->
-          <!--                :days-remaining="daysRemaining" -->
-          <!--                :limit-remaining="limitRemaining" -->
-          <!--                :rate="rate" -->
-          <!--                :replenish="replenish" -->
-          <!--                @logout="$emit('logout')" -->
-          <!--              /> -->
-          <!--            </template> -->
-          <!--          </div> -->
           <div
             v-show="!isAuthenticated && showLogIn"
             class="hidden cursor-pointer items-center gap-2 font-semibold lg:flex"

package/dist/runtime/components/Tag.vue.d.ts

@@ -11,9 +11,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "xs" | "sm" | "lg";
     type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
     view: "default" | "inverted" | "transparent";
-    size: "xs" | "sm" | "lg";
     customClasses: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/Toggle.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { twMerge, twJoin } from "tailwind-merge";
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "blue" },
+  switchClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false, default: "" },
+  onIcon: { type: null, required: false, default: null },
+  onIconClass: { type: [String, null], required: false, default: null },
+  offIcon: { type: null, required: false, default: null },
+  offIconClass: { type: [String, null], required: false, default: null },
+  activeContainerClass: { type: String, required: false, default: "" },
+  inactiveContainerClass: { type: String, required: false, default: "" }
+});
+const active = defineModel({ type: Boolean, ...{ required: true } });
+const switchClass = computed(() => {
+  return twMerge(twJoin(
+    ui.base,
+    ui.size[props.size],
+    ui.rounded,
+    ui.ring,
+    props.disabled ? "opacity-20" : "",
+    props.color && (active.value ? ui.active[props.color] : ui.inactive),
+    active.value ? props.activeClass : props.inactiveClass
+  ), props.switchClass);
+});
+const containerClass = computed(() => {
+  return twMerge(twJoin(
+    ui.container.base,
+    ui.container.size[props.size],
+    active.value ? ui.container.active[props.size] : ui.container.inactive,
+    active.value ? props.activeContainerClass : props.inactiveContainerClass
+  ));
+});
+const onIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.onIconClass
+  ));
+});
+const offIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.offIconClass
+  ));
+});
+const ui = {
+  base: "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none transition ease-in-out",
+  rounded: "rounded-full",
+  ring: "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  active: {
+    blue: "data-[state=unchecked]:bg-blue-700 data-[state=checked]:bg-blue-500",
+    green: "bg-green"
+  },
+  inactive: "data-[state=unchecked]:bg-gray-200 data-[state=checked]:dark:bg-gray-200/20",
+  size: {
+    "2xs": "h-3 w-5",
+    "xs": "h-3.5 w-6",
+    "sm": "h-4 w-7",
+    "md": "h-5 w-9",
+    "lg": "h-6 w-11",
+    "xl": "h-7 w-[3.25rem]",
+    "2xl": "h-8 w-[3.75rem]"
+  },
+  container: {
+    base: "pointer-events-none relative inline-block rounded-full data-[state=unchecked]:bg-white data-[state=checked]:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
+    active: {
+      "2xs": "translate-x-2 rtl:-translate-x-2",
+      "xs": "translate-x-2.5 rtl:-translate-x-2.5",
+      "sm": "translate-x-3 rtl:-translate-x-3",
+      "md": "translate-x-4 rtl:-translate-x-4",
+      "lg": "translate-x-5 rtl:-translate-x-5",
+      "xl": "translate-x-6 rtl:-translate-x-6",
+      "2xl": "translate-x-7 rtl:-translate-x-7"
+    },
+    inactive: "translate-x-0 rtl:-translate-x-0",
+    size: {
+      "2xs": "h-2 w-2",
+      "xs": "h-2.5 w-2.5",
+      "sm": "h-3 w-3",
+      "md": "h-4 w-4",
+      "lg": "h-5 w-5",
+      "xl": "h-6 w-6",
+      "2xl": "h-7 w-7"
+    }
+  },
+  icon: {
+    base: "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity",
+    active: "opacity-100 ease-in duration-200",
+    inactive: "opacity-0 ease-out duration-100",
+    size: {
+      "2xs": "h-2 w-2",
+      "xs": "h-2 w-2",
+      "sm": "h-2 w-2",
+      "md": "h-3 w-3",
+      "lg": "h-4 w-4",
+      "xl": "h-5 w-5",
+      "2xl": "h-6 w-6"
+    }
+  }
+};
+</script>
+
+<template>
+  <SwitchRoot
+    id="airplane-mode"
+    v-model="active"
+    :disabled="disabled"
+    :class="switchClass"
+    aria-label="Switch"
+  >
+    <SwitchThumb
+      :class="containerClass"
+    >
+      <span
+        v-if="onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+      >
+        <component
+          :is="onIcon"
+          :class="onIconClassFormatted"
+        />
+      </span>
+      <span
+        v-if="offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+      >
+        <component
+          :is="offIcon"
+          :class="offIconClassFormatted"
+        />
+      </span>
+    </SwitchThumb>
+  </SwitchRoot>
+</template>