vueless 0.0.328 → 0.0.330

package/ui.dropdown-link/{index.vue → UDropdownLink.vue}

@@ -70,20 +70,19 @@
 <script setup>
 import { computed, provide, ref, watch } from "vue";
 
-import UIcon from "../ui.image-icon";
-import ULink from "../ui.button-link";
-import UDropdownList from "../ui.dropdown-list";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULink from "../ui.button-link/ULink.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import vClickOutside from "../directive.clickOutside";
+import vClickOutside from "../directives/vClickOutside.js";
 
-import { UDropdownLink } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UDropdownLink } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownLink", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.dropdown-link/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.dropdown-link/{index.stories.js → storybook/stories.js}

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

package/ui.dropdown-link/{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, { isShownOptions }) {

package/ui.dropdown-list/{index.vue → UDropdownList.vue}

@@ -106,21 +106,20 @@
 import { computed, ref } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
-import { isMac } from "../service.platform";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { isMac } from "../utils/utilPlatform.js";
 
-import usePointer from "./composables/usePointer";
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
+import usePointer from "./usePointer.js";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
 
-import defaultConfig from "./configs/default.config.js";
-import { UDropdownList } from "./constants";
+import defaultConfig from "./config.js";
+import { UDropdownList } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownList", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 // TODO: Use props and regular modal value
 const modelValue = defineModel({ type: [String, Number, Object], default: "" });

package/ui.dropdown-list/{configs/default.config.js → config.js}

@@ -29,7 +29,8 @@ export default /*tw*/ {
   optionSelected: "font-bold",
   optionHighlighted: "bg-brand-50",
   group: {
-    base: "pointer-events-none bg-transparent font-medium leading-none uppercase text-gray-400 pt-4 pb-1 group-first/item:pt-2",
+    base: `pointer-events-none bg-transparent font-medium leading-none uppercasetext-gray-400 pt-4 pb-1
+      group-first/item:pt-2`,
     variants: {
       size: {
         sm: "text-2xs",

package/ui.dropdown-list/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.dropdown-list/{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 UDropdownList from "../ui.dropdown-list";
-import URow from "../ui.container-row";
+import UDropdownList from "../../ui.dropdown-list/UDropdownList.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UDropdownList` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-list)
@@ -18,7 +18,7 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(UDropdownList.name),
+    ...getArgTypes(UDropdownList.__name),
   },
   parameters: {
     docs: {
@@ -32,7 +32,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDropdownList },
   setup() {
-    const slots = getSlotNames(UDropdownList.name);
+    const slots = getSlotNames(UDropdownList.__name);
 
     return { args, slots };
   },

package/ui.dropdown-list/{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.form-calendar/{index.vue → UCalendar.vue}

@@ -147,8 +147,8 @@
 import { computed, ref, watch } from "vue";
 import { merge } from "lodash-es";
 
-import UButton from "../ui.button";
-import { getDefault } from "../service.ui";
+import UButton from "../ui.button/UButton.vue";
+import { getDefault } from "../utils/utilUI.js";
 
 import {
   parseDate,
@@ -156,18 +156,12 @@ import {
   getYearsRange,
   dateIsOutOfRange,
   isNumeric,
-} from "./services/calendar.service";
+} from "./utilCalendar.js";
 
-import {
-  getDateWithoutTime,
-  addMonths,
-  addDays,
-  addYears,
-  getSortedLocale,
-} from "./services/date.service";
+import { getDateWithoutTime, addMonths, addDays, addYears, getSortedLocale } from "./utilDate.js";
 
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
 
 import {
   UCalendar,
@@ -183,15 +177,15 @@ import {
   LOCALE_TYPE,
   MAX_SECONDS,
   MIN_SECONDS,
-} from "./constants";
+} from "./constants.js";
 
-import defaultConfig from "./configs/default.config";
+import defaultConfig from "./config.js";
 
-import DayView from "./components/DayView.vue";
-import MonthView from "./components/MonthView.vue";
-import YearView from "./components/YearView.vue";
+import DayView from "./UCalendarDayView.vue";
+import MonthView from "./UCalendarMonthView.vue";
+import YearView from "./UCalendarYearView.vue";
 
-defineOptions({ name: "UCalendar" });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-calendar/{components/DayView.vue → UCalendarDayView.vue}

@@ -21,19 +21,19 @@
 <script setup>
 import { computed } from "vue";
 
-import { cx } from "../../service.ui";
-import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import { cx } from "../utils/utilUI.js";
+import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
 import {
   isToday,
   getDateWithoutTime,
   getLastDayOfMonth,
   isSameDay,
   isAnotherMothDay,
-} from "../services/date.service";
+} from "./utilDate.js";
 
-import useAttrs from "../composables/attrs.composable";
+import useAttrs from "./useAttrs.js";
 
-import { DAYS_IN_WEEK, START_WEEK } from "../constants";
+import { DAYS_IN_WEEK, START_WEEK } from "./constants.js";
 
 const props = defineProps({
   selectedDate: {

package/ui.form-calendar/{components/MonthView.vue → UCalendarMonthView.vue}

@@ -18,15 +18,15 @@
 <script setup>
 import { computed } from "vue";
 
-import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "../services/date.service";
-import { cx } from "../../service.ui";
+import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
+import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "./utilDate.js";
+import { cx } from "../utils/utilUI.js";
 
-import useAttrs from "../composables/attrs.composable";
+import useAttrs from "./useAttrs.js";
 
-import { MONTHS_PER_VIEW } from "../constants";
+import { MONTHS_PER_VIEW } from "./constants.js";
 
-import UButton from "../../ui.button";
+import UButton from "../ui.button/UButton.vue";
 
 const props = defineProps({
   selectedDate: {

package/ui.form-calendar/{components/YearView.vue → UCalendarYearView.vue}

@@ -18,15 +18,15 @@
 <script setup>
 import { computed } from "vue";
 
-import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime, isCurrentYear } from "../services/date.service";
-import { cx } from "../../service.ui";
+import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.js";
+import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.js";
+import { cx } from "../utils/utilUI.js";
 
-import useAttrs from "../composables/attrs.composable";
+import useAttrs from "./useAttrs.js";
 
-import { YEARS_PER_VIEW } from "../constants";
+import { YEARS_PER_VIEW } from "./constants.js";
 
-import UButton from "../../ui.button";
+import UButton from "../ui.button/UButton.vue";
 
 const props = defineProps({
   selectedDate: {

package/ui.form-calendar/{configs/default.config.js → config.js}

@@ -15,7 +15,10 @@ export default /*tw*/ {
   weekDays: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   days: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 hover:text-brand-600 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: `
+    mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 hover:text-brand-600
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
   activeDay: "bg-brand-100 hover:bg-brand-100",
   inRangeDate: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
   inRangeEdgeDate: "rounded-dynamic bg-brand-200 text-brand-900 hover:bg-brand-200",

package/ui.form-calendar/{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.form-calendar/{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 UCalendar from "../ui.form-calendar";
+import UCalendar from "../../ui.form-calendar/UCalendar.vue";
 
 /**
  * The `UCalendar` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-calendar)
@@ -11,7 +11,7 @@ export default {
   component: UCalendar,
   args: {},
   argTypes: {
-    ...getArgTypes(UCalendar.name),
+    ...getArgTypes(UCalendar.__name),
   },
   parameters: {
     docs: {
@@ -25,7 +25,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UCalendar },
   setup() {
-    const slots = getSlotNames(UCalendar.name);
+    const slots = getSlotNames(UCalendar.__name);
 
     return { args, slots };
   },

package/ui.form-calendar/{composables/attrs.composable.js → useAttrs.js}

@@ -1,9 +1,9 @@
-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 { computed } from "vue";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.form-calendar/{services/calendar.service.js → utilCalendar.js}

@@ -1,7 +1,7 @@
-import { revFormat, formats } from "./formatting.service";
-import { isSameDay, getDateFromUnixTimestamp } from "./date.service";
+import { revFormat, formats } from "./utilFormatting.js";
+import { isSameDay, getDateFromUnixTimestamp } from "./utilDate.js";
 
-import { TOKEN_REG_EXP, YEARS_PER_VIEW } from "../constants";
+import { TOKEN_REG_EXP, YEARS_PER_VIEW } from "./constants.js";
 
 export function getInitialActiveDate(localValue) {
   if (Array.isArray(localValue) && localValue.length) {

package/ui.form-calendar/{services/date.service.js → utilDate.js}

@@ -1,4 +1,4 @@
-import { LOCALE_TYPE, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "../constants";
+import { LOCALE_TYPE, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "./constants.js";
 
 const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 const monthsMap = [

package/ui.form-checkbox/{index.vue → UCheckbox.vue}

@@ -44,17 +44,16 @@
 import { inject, ref, onMounted, computed, watchEffect, toValue } from "vue";
 import { isEqual } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
-import ULabel from "../ui.form-label";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
-import { UCheckbox } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { UCheckbox } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UCheckbox", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const getCheckboxGroupName = inject("getCheckboxGroupName", null);
 const getCheckboxGroupCheckedItems = inject("getCheckboxGroupCheckedItems", null);

package/ui.form-checkbox/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.form-checkbox/{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 UCheckbox from "../ui.form-checkbox";
-import UCheckboxGroup from "../ui.form-checkbox-group";
-import UBadge from "../ui.text-badge";
-import UCol from "../ui.container-col";
+import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
+import UCheckboxGroup from "../../ui.form-checkbox-group/UCheckboxGroup.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UCheckbox` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-checkbox)
@@ -16,7 +16,7 @@ export default {
     label: "Label",
   },
   argTypes: {
-    ...getArgTypes(UCheckbox.name),
+    ...getArgTypes(UCheckbox.__name),
     modelValue: { control: { type: "boolean" } },
   },
 };
@@ -24,7 +24,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UCheckbox, UBadge },
   setup() {
-    const slots = getSlotNames(UCheckbox.name);
+    const slots = getSlotNames(UCheckbox.__name);
 
     return { args, slots };
   },

package/ui.form-checkbox/{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, { checkboxColor, checkboxSize }) {
   const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.form-checkbox-group/{index.vue → UCheckboxGroup.vue}

@@ -33,17 +33,16 @@
 import { provide, ref, watch } from "vue";
 import { isEqual } from "lodash-es";
 
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import ULabel from "../ui.form-label";
-import UCheckbox from "../ui.form-checkbox";
+import ULabel from "../ui.form-label/ULabel.vue";
+import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
-import { UCheckboxGroup } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UCheckboxGroup } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UCheckboxGroup", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-checkbox-group/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.form-checkbox-group/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UCheckboxGroup from "../ui.form-checkbox-group";
-import UCheckbox from "../ui.form-checkbox";
-import UAlert from "../ui.text-alert";
-import UCol from "../ui.container-col";
-import URow from "../ui.container-row";
+import UCheckboxGroup from "../../ui.form-checkbox-group/UCheckboxGroup.vue";
+import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
+import UAlert from "../../ui.text-alert/UAlert.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UCheckboxGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-checkbox-group)
@@ -23,14 +23,14 @@ export default {
     value: ["One"],
   },
   argTypes: {
-    ...getArgTypes(UCheckboxGroup.name),
+    ...getArgTypes(UCheckboxGroup.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol },
   setup() {
-    const slots = getSlotNames(UCheckboxGroup.name);
+    const slots = getSlotNames(UCheckboxGroup.__name);
 
     return { args, slots };
   },

package/{ui.container-row/composables/attrs.composable.js → ui.form-checkbox-group/useAttrs.js}

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

package/ui.form-checkbox-multi-state/{index.vue → UCheckboxMultiState.vue}

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

package/ui.form-checkbox-multi-state/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 />