vueless 0.0.327 → 0.0.329

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 />

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

package/ui.form-checkbox-multi-state/{composables/attrs.composable.js → useAttrs.js}

@@ -1,6 +1,6 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { selected }) {
@@ -31,12 +31,12 @@ export default function useAttrs(props, { selected }) {
       const checkboxAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => {
-        if (!checkboxAttrs.value.config) {
-          checkboxAttrs.value.config = {};
+        if (selected.value.icon) {
+          checkboxAttrs.value.config = checkboxAttrs.value.config || {};
+          checkboxAttrs.value.config.defaults = checkboxAttrs.value.config.defaults || {};
+          checkboxAttrs.value.config.defaults.checkedIcon = selected.value.icon;
         }
 
-        checkboxAttrs.value.config.selectedIconName = selected.value.icon;
-
         return checkboxAttrs.value;
       });
     }

package/ui.form-color-picker/{index.vue → UColorPicker.vue}

@@ -53,17 +53,16 @@
 <script setup>
 import { computed } from "vue";
 
-import UIcon from "../ui.image-icon";
-import URadio from "../ui.form-radio";
-import ULabel from "../ui.form-label";
-import { getRandomId, getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import URadio from "../ui.form-radio/URadio.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { UColorPicker } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UColorPicker } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UColorPicker", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

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

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

package/ui.form-color-picker/{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, setColor, getColor, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.form-date-picker/{index.vue → UDatePicker.vue}

@@ -68,23 +68,22 @@
 import { computed, nextTick, ref } from "vue";
 import { merge } from "lodash-es";
 
-import UInput from "../ui.form-input";
-import UCalendar from "../ui.form-calendar";
-import { VIEW, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants";
+import UInput from "../ui.form-input/UInput.vue";
+import UCalendar from "../ui.form-calendar/UCalendar.vue";
+import { VIEW, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { addDays, isSameDay } from "../ui.form-calendar/services/date.service";
+import { addDays, isSameDay } from "../ui.form-calendar/utilDate.js";
 
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
-import { useAutoPosition } from "../composable.autoPosition";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
+import { useAutoPosition } from "../composables/useAutoPosition.js";
 
-import defaultConfig from "./configs/default.config";
-import { UDatePicker } from "./constants";
+import defaultConfig from "./config.js";
+import { UDatePicker } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDatePicker", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-date-picker/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UDatePicker = "UDatePicker";

package/ui.form-date-picker/{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-date-picker/{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 UDatePicker from "../ui.form-date-picker";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
+import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UDatePicker` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-date-picker)
@@ -16,7 +16,7 @@ export default {
     modelValue: null,
   },
   argTypes: {
-    ...getArgTypes(UDatePicker.name),
+    ...getArgTypes(UDatePicker.__name),
   },
   parameters: {
     docs: {
@@ -30,7 +30,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDatePicker, UIcon },
   setup() {
-    const slots = getSlotNames(UDatePicker.name);
+    const slots = getSlotNames(UDatePicker.__name);
 
     return { args, slots };
   },

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

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

package/ui.form-date-picker-range/{index.vue → UDatePickerRange.vue}

@@ -224,14 +224,14 @@
 import { computed, watch, ref, nextTick } from "vue";
 import { merge } from "lodash-es";
 
-import UInput from "../ui.form-input";
-import UButton from "../ui.button";
-import UCalendar from "../ui.form-calendar";
-import { LOCALE_TYPE } from "../ui.form-calendar/constants";
+import UInput from "../ui.form-input/UInput.vue";
+import UButton from "../ui.button/UButton.vue";
+import UCalendar from "../ui.form-calendar/UCalendar.vue";
+import { LOCALE_TYPE } from "../ui.form-calendar/constants.js";
 
-import vClickOutside from "../directive.clickOutside";
+import vClickOutside from "../directives/vClickOutside.js";
 
-import { getRandomId, getDefault, cx } from "../service.ui";
+import { getRandomId, getDefault, cx } from "../utils/utilUI.js";
 
 import {
   addDays,
@@ -248,42 +248,33 @@ import {
   getStartOfYear,
   getDatesDifference,
   isSameMonth,
-} from "../ui.form-calendar/services/date.service";
+} from "../ui.form-calendar/utilDate.js";
 
-import {
-  dateIsOutOfRange,
-  formatDate,
-  parseDate,
-} from "../ui.form-calendar/services/calendar.service";
+import { dateIsOutOfRange, formatDate, parseDate } from "../ui.form-calendar/utilCalendar.js";
 
 import {
   getWeekDateList,
   getYearDateList,
   getQuartersDateList,
   getMonthsDateList,
-} from "./services/dateRange.service";
+} from "./utilDateRange.js";
 
-import {
-  isWrongDateFormat,
-  isWrongMonthNumber,
-  isWrongDayNumber,
-} from "./services/validation.service";
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
-import useBreakpoint from "../composable.breakpoint";
-import { useAutoPosition } from "../composable.autoPosition";
-
-import defaultConfig from "./configs/default.config";
+import { isWrongDateFormat, isWrongMonthNumber, isWrongDayNumber } from "./utilValidation.js";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
+import useBreakpoint from "../composables/useBreakpoint.js";
+import { useAutoPosition } from "../composables/useAutoPosition.js";
+
+import defaultConfig from "./config.js";
 import {
   UDatePickerRange,
   DATE_PICKER_BUTTON_TYPE,
   DATE_PICKER_INPUT_TYPE,
   PERIOD,
   INPUT_RANGE_TYPE,
-} from "./constants";
+} from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDatePickerRange", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-date-picker-range/{configs/default.config.js → config.js}

@@ -13,7 +13,10 @@ export default /*tw*/ {
     last:rounded-dynamic last:rounded-l-none
   `,
   menu: {
-    base: "absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    base: `
+      absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic
+      border border-brand-300 bg-white p-2 shadow focus:outline-none
+    `,
     variants: {
       openDirectionX: {
         left: "right-0",

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

@@ -1,11 +1,11 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UDatePickerRange from "../ui.form-date-picker-range";
-import URow from "../ui.container-row";
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
+import UDatePickerRange from "../UDatePickerRange.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UButton from "../../ui.button/UButton.vue";
 
-import { addDays } from "../ui.form-calendar/services/date.service";
+import { addDays } from "../../ui.form-calendar/utilDate.js";
 
 /**
  * The `UDatePickerRange` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-date-picker-range)
@@ -21,7 +21,7 @@ export default {
     },
   },
   argTypes: {
-    ...getArgTypes(UDatePickerRange.name),
+    ...getArgTypes(UDatePickerRange.__name),
   },
   parameters: {
     docs: {
@@ -35,7 +35,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDatePickerRange, UIcon, UButton },
   setup() {
-    const slots = getSlotNames(UDatePickerRange.name);
+    const slots = getSlotNames(UDatePickerRange.__name);
 
     return { args, slots };
   },
@@ -122,23 +122,23 @@ const OpenDirectionTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const variants = EnumVariantTemplate.bind({});
-variants.args = { enum: "variant" };
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant" };
 
-export const openDirection = OpenDirectionTemplate.bind({});
-openDirection.args = {};
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = {};
 
-export const disabled = EnumVariantTemplate.bind({});
-disabled.args = { enum: "variant", disabled: true };
+export const Disabled = EnumVariantTemplate.bind({});
+Disabled.args = { enum: "variant", disabled: true };
 
-export const label = DefaultTemplate.bind({});
-label.args = { variant: "input", label: "some label" };
+export const Label = DefaultTemplate.bind({});
+Label.args = { variant: "input", label: "some label" };
 
-export const description = DefaultTemplate.bind({});
-description.args = { variant: "input", description: "some description" };
+export const Description = DefaultTemplate.bind({});
+Description.args = { variant: "input", description: "some description" };
 
-export const error = DefaultTemplate.bind({});
-error.args = { variant: "input", error: "some error" };
+export const Error = DefaultTemplate.bind({});
+Error.args = { variant: "input", error: "some error" };
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
@@ -154,8 +154,8 @@ DateFormat.args = {
   value: { from: "28.06.2024", to: "30.06.2024" },
 };
 
-export const customRangeButton = DefaultTemplate.bind({});
-customRangeButton.args = {
+export const CustomRangeButton = DefaultTemplate.bind({});
+CustomRangeButton.args = {
   customRangeButton: {
     range: {
       from: new Date(),
@@ -167,20 +167,20 @@ customRangeButton.args = {
   value: { from: null, to: null },
 };
 
-export const leftIcon = DefaultTemplate.bind({});
-leftIcon.args = {
+export const LeftIcon = DefaultTemplate.bind({});
+LeftIcon.args = {
   leftIcon: "star",
   variant: "input",
 };
 
-export const rightIcon = DefaultTemplate.bind({});
-rightIcon.args = {
+export const RightIcon = DefaultTemplate.bind({});
+RightIcon.args = {
   rightIcon: "star",
   variant: "input",
 };
 
-export const leftIconSlot = DefaultTemplate.bind({});
-leftIconSlot.args = {
+export const LeftIconSlot = DefaultTemplate.bind({});
+LeftIconSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #left-icon>
@@ -192,8 +192,8 @@ leftIconSlot.args = {
   `,
 };
 
-export const rightIconSlot = DefaultTemplate.bind({});
-rightIconSlot.args = {
+export const RightIconSlot = DefaultTemplate.bind({});
+RightIconSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #right-icon>
@@ -205,8 +205,8 @@ rightIconSlot.args = {
   `,
 };
 
-export const leftSlot = DefaultTemplate.bind({});
-leftSlot.args = {
+export const LeftSlot = DefaultTemplate.bind({});
+LeftSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #left>
@@ -215,8 +215,8 @@ leftSlot.args = {
   `,
 };
 
-export const rightSlot = DefaultTemplate.bind({});
-rightSlot.args = {
+export const RightSlot = DefaultTemplate.bind({});
+RightSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #right>

package/ui.form-date-picker-range/{composables/attrs.composable.js → useAttrs.js}

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

package/ui.form-date-picker-range/{services/dateRange.service.js → utilDateRange.js}

@@ -10,7 +10,7 @@ import {
   addQuarters,
   getEndOfYear,
   getStartOfYear,
-} from "../../ui.form-calendar/services/date.service";
+} from "../ui.form-calendar/utilDate.js";
 
 export function getYearDateList(date) {
   const NUMBER_ADDING_YEAR = 12;

package/ui.form-date-picker-range/{services/validation.service.js → utilValidation.js}

@@ -1,4 +1,4 @@
-import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
+import { getDaysInMonth } from "../ui.form-calendar/utilDate.js";
 
 const datePattern = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
 

package/ui.form-input/{index.vue → UInput.vue}

@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
 const VALIDATION_RULES_REG_EX = {
   integer: /\d*/g,
@@ -115,15 +115,14 @@ const VALIDATION_RULES_REG_EX = {
 <script setup>
 import { ref, computed, onMounted, useSlots } from "vue";
 
-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 defaultConfig from "./configs/default.config";
-import { UInput } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { UInput } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UInput", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const emit = defineEmits([
   /**

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

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: `
       w-full bg-white !opacity-100 relative flex transition
       rounded-dynamic border border-solid border-gray-300
-      hover:border-gray-400 hover:focus-within:border-brand-500
-      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
+      hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
     `,
     variants: {
       error: {

package/ui.form-input/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 />