vueless 0.0.554 → 0.0.556

package/ui.container-divider/useAttrs.ts

@@ -7,17 +7,11 @@ import type { UseAttrs } from "../types.ts";
 import type { UDividerProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UDividerProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     label: Boolean(props.label),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.container-group/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UGroupProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UGroupProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.container-groups/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UGroupsProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UGroupsProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.container-modal/UModal.vue

@@ -2,6 +2,7 @@
 import { computed, useSlots, watch, ref, useId } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -66,7 +67,6 @@ const {
   footerLeftAttrs,
   footerAttrs,
   footerRightAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 
 const isShownModal = computed({

package/ui.container-modal/useAttrs.ts

@@ -6,17 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UModalProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UModalProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-    "wrapper",
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config, "wrapper");
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { merge } from "lodash-es";
 
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import UButton from "../ui.button/UButton.vue";
 import UModal from "../ui.container-modal/UModal.vue";
@@ -49,13 +50,8 @@ const emit = defineEmits([
 
 const { tm } = useLocale();
 
-const {
-  hasSlotContent,
-  footerLeftFallbackAttrs,
-  confirmModalAttrs,
-  confirmButtonAttrs,
-  cancelButtonAttrs,
-} = useAttrs(props);
+const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelButtonAttrs } =
+  useAttrs(props);
 
 const isShownModal = computed({
   get: () => props.modelValue,

package/ui.container-modal-confirm/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UModalConfirmProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UModalConfirmProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.container-page/UPage.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, useSlots, onMounted } from "vue";
 
+import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 import useBreakpoint from "../composables/useBreakpoint.ts";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
 import defaultConfig from "./config.ts";
 import { UPage } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
@@ -47,8 +47,7 @@ const {
   footerLeftAttrs,
   footerRightAttrs,
   rightRoundingWrapperAttrs,
-  hasSlotContent,
-} = useAttrs(props, { isMobileBreakpoint });
+} = useAttrs(props);
 
 const isExistHeader = computed(() => {
   return (
@@ -71,7 +70,7 @@ const isShownArrowButton = computed(() => {
 onMounted(() => {
   const classes = props.gray
     ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
-    : "";
+    : [];
 
   document.querySelector("body").classList.add(...classes);
 });

package/ui.container-page/useAttrs.ts

@@ -1,41 +1,12 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
-import { isMobileApp } from "../utils/platform.ts";
 
 import defaultConfig from "./config.ts";
 
-import type { Ref } from "vue";
 import type { UseAttrs } from "../types.ts";
 import type { UPageProps, Config } from "./types.ts";
 
-type ComponentState = {
-  isMobileBreakpoint: Ref<boolean>;
-};
+export default function useAttrs(props: UPageProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config, "wrapper");
 
-export default function useAttrs(
-  props: UPageProps,
-  { isMobileBreakpoint }: ComponentState,
-): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-    "wrapper",
-  );
-
-  const extendingKeys = ["wrapperMobile"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    wrapper: {
-      extend: computed(() => [
-        isMobileBreakpoint.value && !isMobileApp && extendingKeysClasses.wrapperMobile.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.container-row/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { URowProps, Config } from "./types.ts";
 
 export default function useAttrs(props: URowProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.data-list/UDataList.vue

@@ -176,9 +176,11 @@ import { computed } from "vue";
 import draggable from "vuedraggable";
 import { merge } from "lodash-es";
 
+import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UEmpty from "../ui.text-empty/UEmpty.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UDataList as UDataListName } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -323,7 +325,6 @@ const {
   deleteIconAttrs,
   editIconAttrs,
   dragIconAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 const { tm } = useLocale();
 

package/ui.data-list/config.js

@@ -21,7 +21,7 @@ export default /*tw*/ {
       },
     },
   },
-  labelCrossed: "line-through",
+  labelCrossed: "{>label} line-through",
   customActions: `
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
     group-hover/item:md:block group-hover/item:opacity-100

package/ui.data-list/useAttrs.js

@@ -1,25 +1,9 @@
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, getExtendingKeysClasses, hasSlotContent } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeysClasses = getExtendingKeysClasses(["label"]);
-
-  const keysAttrs = getKeysAttrs({}, [], {
-    labelCrossed: {
-      base: computed(() => [extendingKeysClasses.label.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.data-table/UTable.vue

@@ -10,7 +10,7 @@ import {
   onBeforeUnmount,
   useTemplateRef,
 } from "vue";
-import { merge } from "lodash-es";
+import { merge, isEqual } from "lodash-es";
 
 import UEmpty from "../ui.text-empty/UEmpty.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
@@ -19,6 +19,9 @@ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 
 import { getDefault, cx } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+import { useLocale } from "../composables/useLocale.ts";
+import { PX_IN_REM } from "../constants.js";
 
 import defaultConfig from "./config.ts";
 import {
@@ -31,14 +34,11 @@ import {
   addRowId,
 } from "./utilTable.ts";
 
-import { PX_IN_REM } from "../constants.js";
 import { UTable } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
-import { useLocale } from "../composables/useLocale.ts";
 
 import type { Cell, Row, RowId, UTableProps, UTableRowAttrs } from "./types.ts";
 import type { Ref, RendererElement, ComputedRef } from "vue";
-import { isEqual } from "lodash-es";
 
 defineOptions({ inheritAttrs: false });
 
@@ -207,6 +207,7 @@ const {
   headerRowAttrs,
   bodyRowAfterAttrs,
   bodyRowBeforeAttrs,
+  bodyRowBeforeCheckedAttrs,
   bodyRowBeforeCellAttrs,
   footerAttrs,
   bodyRowDateDividerAttrs,
@@ -227,7 +228,6 @@ const {
   bodyAttrs,
   footerRowAttrs,
   stickyFooterRowAttrs,
-  hasSlotContent,
   headerAttrs,
   bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
@@ -639,7 +639,7 @@ defineExpose({
           <template v-for="(row, rowIndex) in sortedRows" :key="row.id">
             <tr
               v-if="rowIndex === firstRow && hasSlotContent($slots['before-first-row'])"
-              v-bind="bodyRowBeforeAttrs"
+              v-bind="tableRows[0]?.isChecked ? bodyRowBeforeCheckedAttrs : bodyRowBeforeAttrs"
             >
               <td :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs">
                 <!-- @slot Use it to add something before first row. -->

package/ui.data-table/UTableRow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, useSlots, useTemplateRef } from "vue";
 import { cx } from "../utils/ui.ts";
-import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import { PX_IN_REM } from "../constants.js";
 import { mapRowColumns } from "./utilTable.ts";
@@ -11,12 +11,8 @@ import { useMutationObserver } from "../composables/useMutationObserver.ts";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
-import defaultConfig from "./config.ts";
-
 import type { Cell, CellObject, Row, RowScopedProps, UTableRowProps } from "./types.ts";
 
-const { hasSlotContent } = useUI(defaultConfig);
-
 const NESTED_ROW_SHIFT_REM = 1.5;
 const LAST_NESTED_ROW_SHIFT_REM = 2;
 

package/ui.data-table/config.ts

@@ -1,12 +1,22 @@
 export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
-  stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
-  stickyHeaderRow: "border-gray-200 bg-white",
-  stickyHeaderCell: "flex-none whitespace-nowrap",
+  stickyHeader: {
+    base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
+    variants: {
+      actionsHeader: {
+        true: "rounded-t-dynamic border-blue-200 bg-blue-50",
+      },
+    },
+    compoundVariants: [
+      { stickedHeader: true, actionsHeader: true, class: "rounded-none" },
+      { stickedHeader: true, actionsHeader: false, class: "border-gray-200 bg-white" },
+    ],
+  },
+  stickyHeaderCell: "{>headerCellBase} flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "{UCheckbox}",
   stickyHeaderCounter: {
-    base: "absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
+    base: "{>headerCounterBase} absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
     variants: {
       compact: {
         true: "top-3",
@@ -14,10 +24,8 @@ export default /*tw*/ {
     },
   },
   stickyHeaderLoader: "{ULoaderProgress}",
-  stickyHeaderActions: "rounded-none",
-  headerActions: "rounded-t-dynamic border-blue-200 bg-blue-50",
   headerActionsCheckbox: "{UCheckbox}",
-  headerActionsCounter: "-ml-1.5",
+  headerActionsCounter: "{>headerCounterBase} -ml-1.5",
   tableWrapper: "border border-gray-200 rounded-dynamic bg-white",
   table: "min-w-full border-none text-sm w-full table-auto",
   header: "border-b border-gray-200",
@@ -30,10 +38,10 @@ export default /*tw*/ {
       },
     },
   },
-  headerCellCheckbox: "w-10",
+  headerCellCheckbox: "{>headerCellBase} w-10",
   headerCheckbox: "{UCheckbox}",
   headerCounter: {
-    base: "absolute top-4 mt-px left-11 ml-px",
+    base: "{>headerCounterBase} absolute top-4 mt-px left-11 ml-px",
     variants: {
       compact: {
         true: "top-3",
@@ -45,7 +53,8 @@ export default /*tw*/ {
   bodyRow: "hover:bg-gray-50",
   bodyRowChecked: "bg-gray-100 transition",
   bodyRowBefore: "!p-0",
-  bodyRowBeforeCell: "py-1",
+  bodyRowBeforeChecked: "{>bodyRowChecked} !p-0",
+  bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
   bodyRowDateDivider: "",
   bodyCellBase: {
@@ -57,7 +66,7 @@ export default /*tw*/ {
     },
   },
   bodyCellContent: "text-ellipsis overflow-hidden",
-  bodyCellCheckbox: "first:px-4", // try to remove first
+  bodyCellCheckbox: "{>bodyCellBase} first:px-4", // try to remove first
   bodyCellDateDivider: "",
   bodyCellNested: "mr-2 flex gap-0.5",
   bodyCellNestedExpandIconWrapper: "",
@@ -74,7 +83,14 @@ export default /*tw*/ {
   bodyCheckbox: "{UCheckbox}",
   bodyDateDivider: "{UDivider}",
   bodyEmptyState: "{UEmpty} my-8",
-  footer: "group/footer border-t border-solid border-gray-200",
+  footer: {
+    base: "group/footer border-t border-solid border-gray-200",
+    variants: {
+      stickedFooter: {
+        true: "relative group/footer-fixed",
+      },
+    },
+  },
   footerRow: {
     base: "[&_td]:p-[1.125rem] [&_td]:py-5 first:[&_td]:p-5",
     variants: {
@@ -83,7 +99,6 @@ export default /*tw*/ {
       },
     },
   },
-  stickyFooter: "relative group/footer-fixed",
   stickyFooterRow: `
     fixed bottom-0 -ml-px border border-b border-gray-200 bg-white
     collapse group-[]/footer-fixed:[visibility:inherit]

package/ui.data-table/useAttrs.ts

@@ -7,7 +7,7 @@ import type { Row, UTableProps, Config } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 import type { Ref } from "vue";
 
-export type UTableState = {
+export type ComponentState = {
   tableRows: Ref<Row[]>;
   isShownActionsHeader: Ref<boolean>;
   isHeaderSticky: Ref<boolean>;
@@ -16,81 +16,16 @@ export type UTableState = {
 
 export default function useAttrs(
   props: UTableProps,
-  { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky }: UTableState,
+  { isShownActionsHeader, isHeaderSticky, isFooterSticky }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = [
-    "headerCounterBase",
-    "headerActions",
-    "stickyHeaderActions",
-    "stickyHeaderRow",
-    "stickyFooter",
-  ];
-  const extendingKeysClasses = getExtendingKeysClasses([
-    ...extendingKeys,
-    "headerCellBase",
-    "bodyCellBase",
-    "bodyRowChecked",
-  ]);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    actionsHeader: isShownActionsHeader.value,
+    stickedHeader: isHeaderSticky.value,
+    stickedFooter: isFooterSticky.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    stickyHeader: {
-      extend: computed(() => {
-        const classes = [];
-
-        if (isShownActionsHeader.value) {
-          classes.push(extendingKeysClasses.headerActions.value);
-        }
-
-        if (isShownActionsHeader.value && isHeaderSticky.value) {
-          classes.push(extendingKeysClasses.stickyHeaderActions.value);
-        }
-
-        if (!isShownActionsHeader.value && isHeaderSticky.value) {
-          classes.push(extendingKeysClasses.stickyHeaderRow.value);
-        }
-
-        return classes;
-      }),
-    },
-    stickyHeaderCell: {
-      base: computed(() => [extendingKeysClasses.headerCellBase.value]),
-    },
-    headerCounter: {
-      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
-    },
-    stickyHeaderCounter: {
-      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
-    },
-    headerActionsCounter: {
-      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
-    },
-    headerCellCheckbox: {
-      base: computed(() => [extendingKeysClasses.headerCellBase.value]),
-    },
-    bodyCellCheckbox: {
-      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
-    },
-    bodyRowBeforeCell: {
-      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
-    },
-    footer: {
-      extend: computed(() => [isFooterSticky.value && extendingKeysClasses.stickyFooter.value]),
-    },
-    bodyRowBefore: {
-      extend: computed(() => [
-        tableRows.value[0]?.isChecked && extendingKeysClasses.bodyRowChecked.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.dropdown-badge/config.ts

@@ -1,7 +1,15 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  dropdownBadge: "{UBadge} transition",
-  dropdownBadgeActive: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+  dropdownBadge: {
+    component: "{UBadge}",
+    base: "transition",
+    variants: {
+      opened: {
+        true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+      },
+    },
+    compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
+  },
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     component: "{UDropdownList}",

package/ui.dropdown-badge/useAttrs.ts

@@ -7,33 +7,20 @@ import type { Ref } from "vue";
 import type { Config, UDropdownBadgeProps } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 
-interface DropdownBadgeState {
+interface ComponentState {
   isShownOptions: Ref<boolean>;
 }
 
 export default function useAttrs(
   props: UDropdownBadgeProps,
-  { isShownOptions }: DropdownBadgeState,
+  { isShownOptions }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["dropdownBadgeActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    opened: isShownOptions.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    dropdownBadge: {
-      extend: computed(() => [
-        isShownOptions.value && extendingKeysClasses.dropdownBadgeActive.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.dropdown-button/config.ts

@@ -1,14 +1,14 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  dropdownButton: "{UButton}",
-  dropdownButtonActive: {
-    base: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+  dropdownButton: {
+    component: "{UButton}",
     variants: {
-      color: {
-        grayscale: "ring-gray-700/15",
-        white: "ring-gray-700/15",
+      opened: {
+        true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+        false: "reactive-fix", // todo: remove it later
       },
     },
+    compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
   },
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {