vueless 0.0.327 → 0.0.329

package/ui.image-icon/{index.vue → UIcon.vue}

@@ -11,19 +11,15 @@
 
 <script setup>
 import { computed, defineAsyncComponent } from "vue";
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UIcon } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UIcon } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-import vTooltip from "../directive.tooltip";
+import vTooltip from "../directives/vTooltip.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({
-  name: "UIcon",
-  inheritAttrs: false,
-});
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.image-icon/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-icon/{index.stories.js → storybook/stories.js}

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UIcon` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-icon)
@@ -14,14 +14,14 @@ export default {
     name: "close",
   },
   argTypes: {
-    ...getArgTypes(UIcon.name),
+    ...getArgTypes(UIcon.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UIcon },
   setup() {
-    const slots = getSlotNames(UIcon.name);
+    const slots = getSlotNames(UIcon.__name);
 
     return { args, slots };
   },

package/{ui.loader-top/composables/attrs.composable.js → ui.image-icon/useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.loader/{index.vue → ULoader.vue}

@@ -15,14 +15,13 @@
 
 <script setup>
 import { computed } from "vue";
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { ULoader, ELLIPSES_AMOUNT } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { ULoader, ELLIPSES_AMOUNT } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULoader", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.loader/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import ULoader from "../ui.loader";
-import URow from "../ui.container-row";
-import UButton from "../ui.button";
-import { ref } from "vue";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import ULoader from "../../ui.loader/ULoader.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UButton from "../../ui.button/UButton.vue";
+import { ref } from "vue";
 
 /**
  * The `ULoader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader)
@@ -16,14 +16,14 @@ export default {
     loading: true,
   },
   argTypes: {
-    ...getArgTypes(ULoader.name),
+    ...getArgTypes(ULoader.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { ULoader },
   setup() {
-    const slots = getSlotNames(ULoader.name);
+    const slots = getSlotNames(ULoader.__name);
 
     return { args, slots };
   },

package/ui.loader/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config.js";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.loader-rendering/{index.vue → ULoaderRendering.vue}

@@ -13,17 +13,16 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted } from "vue";
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import ULoader from "../ui.loader";
+import ULoader from "../ui.loader/ULoader.vue";
 
-import { ULoaderRendering } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { useLoaderRendering } from "./composables/useLoaderRendering";
+import { ULoaderRendering } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { useLoaderRendering } from "./useLoaderRendering.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.loader-rendering/{Docs.mdx → storybook/Docs.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.loader-rendering/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
-import ULoaderRendering from "../ui.loader-rendering";
-import UButton from "../ui.button";
-import UCol from "../ui.container-col";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import { useLoaderRendering } from "./composables/useLoaderRendering";
+import ULoaderRendering from "../../ui.loader-rendering/ULoaderRendering.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { useLoaderRendering } from "../useLoaderRendering.js";
 
 /**
  * The `ULoaderRendering` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-rendering)
@@ -14,7 +14,7 @@ export default {
   title: "Loaders and Skeletons / Loader Rendering",
   component: ULoaderRendering,
   argTypes: {
-    ...getArgTypes(ULoaderRendering.name),
+    ...getArgTypes(ULoaderRendering.__name),
   },
   parameters: {
     docs: {
@@ -28,7 +28,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderRendering },
   setup() {
-    const slots = getSlotNames(ULoaderRendering.name);
+    const slots = getSlotNames(ULoaderRendering.__name);
 
     return { args, slots };
   },

package/ui.loader-rendering/{composables/attrs.composable.js → useAttrs.js}

@@ -1,8 +1,8 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.loader-top/{index.vue → ULoaderTop.vue}

@@ -7,17 +7,16 @@
 <script setup>
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
-import { getDefault } from "../service.ui";
-import { isMobileApp } from "../service.platform";
-import { clamp, queue, getRequestWithoutQuery } from "./services/loaderTop.service";
-import { useLoaderTop } from "./composables/useLoaderTop";
+import { getDefault } from "../utils/utilUI.js";
+import { isMobileApp } from "../utils/utilPlatform.js";
+import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderTop.js";
+import { useLoaderTop } from "./useLoaderTop.js";
 
-import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { ULoaderTop, MAXIMUM, SPEED } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULoaderTop", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.loader-top/{Docs.mdx → storybook/Docs.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.loader-top/{index.stories.js → storybook/stories.js}

@@ -1,13 +1,13 @@
-import ULoaderTop from "../ui.loader-top";
-import UButton from "../ui.button";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
-import UBadge from "../ui.text-badge";
+import { getArgTypes, getSlotNames } from "../../utils/utilStorybook.js";
 
-import { useLoaderTop } from "./composables/useLoaderTop";
-import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
+import ULoaderTop from "../../ui.loader-top/ULoaderTop.vue";
+import UButton from "../../ui.button/UButton.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { useLoaderTop } from "../useLoaderTop.js";
+import { loaderTopOff, loaderTopOn } from "../utilLoaderTop.js";
 
 /**
  * The `ULoaderTop` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-top)
@@ -17,7 +17,7 @@ export default {
   title: "Loaders and Skeletons / Loader Top",
   component: ULoaderTop,
   argTypes: {
-    ...getArgTypes(ULoaderTop.name),
+    ...getArgTypes(ULoaderTop.__name),
   },
 };
 
@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
   setup() {
     const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
-    const slots = getSlotNames(ULoaderTop.name);
+    const slots = getSlotNames(ULoaderTop.__name);
 
     return { args, slots, loaderTopOn, loaderTopOff };
   },

package/{ui.image-avatar/composables/attrs.composable.js → ui.loader-top/useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.loader-top/{composables/useLoaderTop.js → useLoaderTop.js}

@@ -1,6 +1,6 @@
 import { inject, readonly, ref } from "vue";
 
-import { getRequestWithoutQuery } from "../services/loaderTop.service";
+import { getRequestWithoutQuery } from "./utilLoaderTop.js";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 

package/ui.navigation-pagination/{index.vue → UPagination.vue}

@@ -139,16 +139,15 @@
 import { computed } from "vue";
 import { range } from "lodash-es";
 
-import UButton from "../ui.button";
-import UIcon from "../ui.image-icon";
-import { getDefault } from "../service.ui";
+import UButton from "../ui.button/UButton.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
-import { UPagination } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { UPagination } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UPagination", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.navigation-pagination/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-pagination/{index.stories.js → storybook/stories.js}

@@ -1,6 +1,6 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UPagination from "../ui.navigation-pagination";
+import UPagination from "../../ui.navigation-pagination/UPagination.vue";
 
 /**
  * The `UPagination` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-pagination)
@@ -14,14 +14,14 @@ export default {
     total: 900,
   },
   argTypes: {
-    ...getArgTypes(UPagination.name),
+    ...getArgTypes(UPagination.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UPagination },
   setup() {
-    const slots = getSlotNames(UPagination.name);
+    const slots = getSlotNames(UPagination.__name);
 
     return { args, slots };
   },

package/ui.navigation-pagination/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
+import useUI from "../composables/useUI.js";
 
-import defaultConfig from "../configs/default.config";
-import { cva, cx } from "../../service.ui";
+import defaultConfig from "./config.js";
+import { cva, cx } from "../utils/utilUI.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.navigation-progress/{components/StepperProgress.vue → StepperProgress.vue}

@@ -38,9 +38,9 @@
 import colors from "tailwindcss/colors";
 import { computed } from "vue";
 
-import { GRAY_COLORS } from "../../constants";
+import { GRAY_COLORS } from "../constants.js";
 
-import useAttrs from "../composables/attrs.composable";
+import useAttrs from "./useAttrs.js";
 
 const props = defineProps({
   progressPercent: {

package/ui.navigation-progress/{index.vue → UProgress.vue}

@@ -52,17 +52,16 @@
 <script setup>
 import { computed } from "vue";
 
-import { getDefault } from "../service.ui";
-import useAttrs from "./composables/attrs.composable";
+import { getDefault } from "../utils/utilUI.js";
+import useAttrs from "./useAttrs.js";
 
-import defaultConfig from "./configs/default.config";
-import { UProgress, VARIANT } from "./constants";
+import defaultConfig from "./config.js";
+import { UProgress, VARIANT } from "./constants.js";
 
-import StepperProgress from "./components/StepperProgress.vue";
-import UHeader from "../ui.text-header";
+import StepperProgress from "./StepperProgress.vue";
+import UHeader from "../ui.text-header/UHeader.vue";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UProgress", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.navigation-progress/{configs/default.config.js → config.js}

@@ -103,6 +103,9 @@ export default /*tw*/ {
   safelist: (colors) => [
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-100` },
-    { pattern: `bg-(${colors})-50`, variants: ["[&::-webkit-progress-bar]", "[@supports(selector(&::-moz-progress-bar))]"] },
+    {
+      pattern: `bg-(${colors})-50`,
+      variants: ["[&::-webkit-progress-bar]", "[@supports(selector(&::-moz-progress-bar))]"],
+    },
   ],
 };

package/ui.navigation-progress/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-progress/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UProgress from "./index.vue";
-import UCol from "../ui.container-col";
-import UButton from "../ui.button";
-import UIcon from "../ui.image-icon";
+import UProgress from "../../ui.navigation-progress/UProgress.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 /**
  * The `UProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-progress)
@@ -13,14 +13,14 @@ export default {
   title: "Navigation / Progress",
   component: UProgress,
   argTypes: {
-    ...getArgTypes(UProgress.name),
+    ...getArgTypes(UProgress.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UCol, UProgress, UButton, UIcon },
   setup() {
-    const slots = getSlotNames(UProgress.name);
+    const slots = getSlotNames(UProgress.__name);
 
     args.value = args.max ? 1 : 10;
     args.iterator = args.max ? 1 : 10;

package/ui.navigation-progress/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.navigation-tab/{index.vue → UTab.vue}

@@ -10,14 +10,13 @@
 <script setup>
 import { computed, inject, toValue } from "vue";
 
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UTab } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UTab } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTab", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const setUTabsSelectedItem = inject("setUTabsSelectedItem", null);
 const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);

package/ui.navigation-tab/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-tab/{index.stories.js → storybook/stories.js}

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UTab from "../ui.navigation-tab";
-import UIcon from "../ui.image-icon";
+import UTab from "../../ui.navigation-tab/UTab.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 /**
  * The `UTab` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-tab)
@@ -14,14 +14,14 @@ export default {
     label: "Tab",
   },
   argTypes: {
-    ...getArgTypes(UTab.name),
+    ...getArgTypes(UTab.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UTab, UIcon },
   setup() {
-    const slots = getSlotNames(UTab.name);
+    const slots = getSlotNames(UTab.__name);
 
     return { args, slots };
   },

package/ui.navigation-tab/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { selected, size }) {