vueless 1.2.15-beta.2 → 1.2.15-beta.3

package/bin/commands/copy.js

@@ -44,7 +44,6 @@ export async function copyVuelessComponent(options) {
   }
 
   const absoluteSourcePath = path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
-
   const absoluteDestPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR, newComponentName);
 
   if (existsSync(absoluteDestPath)) {
@@ -119,6 +118,7 @@ async function modifyCreatedComponent(destPath, componentName, newComponentName)
       // saving indexes
       const storyIdIndex = getStoryMetaKeyIndex(fileContent, "id");
       const storyTitleIndex = getStoryMetaKeyIndex(fileContent, "title");
+
       const componentImportIndex = lines.findIndex(
         (line) => line.includes(componentName) && line.includes("import"),
       );

package/composables/tests/useUI.test.ts

@@ -53,7 +53,7 @@ vi.mock("vue", async () => {
   };
 });
 
-import useUI from "../useUI";
+import { useUI } from "../useUI";
 import * as uiUtils from "../../utils/ui";
 import { getCurrentInstance, useAttrs } from "vue";
 import type { UnknownObject } from "../../types";

package/composables/useBreakpoint.ts

@@ -21,7 +21,7 @@ enum BreakpointWidth {
   "2xl" = 1536,
 }
 
-export default function useBreakpoint() {
+export function useBreakpoint() {
   let animationId: number | undefined;
 
   const windowWidth = ref(0);

package/composables/useUI.ts

@@ -32,11 +32,7 @@ import type {
  * 3. Component config (:config="{...}" props)
  * 4. Component classes (class="...")
  */
-export default function useUI<T>(
-  defaultConfig: T,
-  mutatedProps?: MutatedProps,
-  topLevelClassKey?: string,
-) {
+export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevelClassKey?: string) {
   const { type, props, parent } = getCurrentInstance() as VuelessComponentInstance;
 
   const componentName = type?.internal

package/constants.d.ts

@@ -166,7 +166,7 @@ export namespace COMPONENTS {
     let UCalendar: string;
     let UDatePicker: string;
     let UDatePickerRange: string;
-    let UColorPicker: string;
+    let UColorToggle: string;
     let ULabel: string;
     let UHeader: string;
     let UText: string;

package/constants.js

@@ -272,7 +272,7 @@ export const COMPONENTS = {
   UCalendar: "ui.form-calendar",
   UDatePicker: "ui.form-date-picker",
   UDatePickerRange: "ui.form-date-picker-range",
-  UColorPicker: "ui.form-color-picker",
+  UColorToggle: "ui.form-color-toggle",
   ULabel: "ui.form-label",
 
   /* Text & Content */

package/index.d.ts

@@ -26,10 +26,10 @@ export { createVuelessAdapter } from "./adapter.locale/vueless";
 export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 /* composables */
 export { useLocale } from "./composables/useLocale";
-export { default as useUI } from "./composables/useUI";
+export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { default as useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
@@ -81,7 +81,7 @@ export { default as URadioGroup } from "./ui.form-radio-group/URadioGroup.vue";
 export { default as UCalendar } from "./ui.form-calendar/UCalendar.vue";
 export { default as UDatePicker } from "./ui.form-date-picker/UDatePicker.vue";
 export { default as UDatePickerRange } from "./ui.form-date-picker-range/UDatePickerRange.vue";
-export { default as UColorPicker } from "./ui.form-color-picker/UColorPicker.vue";
+export { default as UColorToggle } from "./ui.form-color-toggle/UColorToggle.vue";
 export { default as ULabel } from "./ui.form-label/ULabel.vue";
 /* Text & Content */
 export { default as UHeader } from "./ui.text-header/UHeader.vue";

package/index.ts

@@ -32,10 +32,10 @@ export { createVuelessAdapter } from "./adapter.locale/vueless";
 export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 /* composables */
 export { useLocale } from "./composables/useLocale";
-export { default as useUI } from "./composables/useUI";
+export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { default as useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
@@ -87,7 +87,7 @@ export { default as URadioGroup } from "./ui.form-radio-group/URadioGroup.vue";
 export { default as UCalendar } from "./ui.form-calendar/UCalendar.vue";
 export { default as UDatePicker } from "./ui.form-date-picker/UDatePicker.vue";
 export { default as UDatePickerRange } from "./ui.form-date-picker-range/UDatePickerRange.vue";
-export { default as UColorPicker } from "./ui.form-color-picker/UColorPicker.vue";
+export { default as UColorToggle } from "./ui.form-color-toggle/UColorToggle.vue";
 export { default as ULabel } from "./ui.form-label/ULabel.vue";
 /* Text & Content */
 export { default as UHeader } from "./ui.text-header/UHeader.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.2",
+  "version": "1.2.15-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/types.ts

@@ -48,7 +48,7 @@ import URadioGroupConfig from "./ui.form-radio-group/config";
 import USwitchConfig from "./ui.form-switch/config";
 import UTextareaConfig from "./ui.form-textarea/config";
 import ULabelConfig from "./ui.form-label/config";
-import UColorPickerConfig from "./ui.other-theme-color-toggle/config";
+import UColorToggleConfig from "./ui.form-color-toggle/config";
 import UInputConfig from "./ui.form-input/config";
 import UInputCounterConfig from "./ui.form-input-counter/config";
 import UInputPasswordConfig from "./ui.form-input-password/config";
@@ -315,7 +315,7 @@ export interface Components {
   USwitch: Partial<typeof USwitchConfig>;
   UTextarea: Partial<typeof UTextareaConfig>;
   ULabel: Partial<typeof ULabelConfig>;
-  UColorPicker: Partial<typeof UColorPickerConfig>;
+  UColorToggle: Partial<typeof UColorToggleConfig>;
   UInput: Partial<typeof UInputConfig>;
   UInputCounter: Partial<typeof UInputCounterConfig>;
   UInputPassword: Partial<typeof UInputPasswordConfig>;

package/ui.boilerplate/UBoilerplate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.button/UButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect, useId, watch, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.button-link/ULink.vue

@@ -2,7 +2,7 @@
 import { computed, useSlots, useTemplateRef } from "vue";
 import { RouterLink } from "vue-router";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.button-toggle/UToggle.vue

@@ -3,7 +3,7 @@ import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.container-accordion/UAccordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, useTemplateRef, ref, watch, onMounted } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UAccordionItem from "../ui.container-accordion-item/UAccordionItem.vue";

package/ui.container-accordion-item/UAccordionItem.vue

@@ -3,7 +3,7 @@ import { computed, ref, inject, useId, useSlots, useTemplateRef, toValue, watchE
 
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-card/UCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.container-col/UCol.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-divider/UDivider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-drawer/UDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-group/UGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UHeader from "../ui.text-header/UHeader.vue";

package/ui.container-groups/UGroups.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-modal/UModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watch, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-page/UPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, onMounted, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-page/config.ts

@@ -64,9 +64,9 @@ export default /*tw*/ {
   description: "mt-1.5 text-large font-normal text-lifted",
   actions: "",
   body: "",
-  footer: "mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-muted",
-  footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  footerRight: "md:flex space-y-4 md:space-x-4 md:space-y-0",
+  footer: "mb-0 mt-14 justify-between pt-8 md:flex gap-4 md:gap-0 md:items-baseline border-t border-muted",
+  footerLeft: "md:flex gap-4",
+  footerRight: "md:flex gap-4",
   defaults: {
     variant: "solid",
     size: "wide",

package/ui.container-row/URow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.data-list/UDataList.vue

@@ -2,7 +2,7 @@
 import { useTemplateRef } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.data-list/config.ts

@@ -42,7 +42,7 @@ export default /*tw*/ {
     },
   },
   labelCrossed: "{>label} line-through",
-  customActions: "space-x-5 opacity-50 flex items-center md:opacity-0 group-hover/item:opacity-100",
+  customActions: "flex items-center gap-5 opacity-50 md:opacity-0 group-hover/item:opacity-100",
   divider: "{UDivider}",
   empty: "{UEmpty}",
   nested: "{UDataList} group/nested ml-6",

package/ui.data-table/UTable.vue

@@ -18,7 +18,7 @@ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults, cx, getMergedConfig } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";

package/ui.data-table/UTableRow.vue

@@ -7,7 +7,7 @@ import { PX_IN_REM } from "../constants";
 import { mapRowColumns } from "./utilTable";
 
 import { useMutationObserver } from "../composables/useMutationObserver";
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -2,7 +2,7 @@
 import { ref, computed, nextTick, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.dropdown-button/UDropdownButton.vue

@@ -2,7 +2,7 @@
 import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.dropdown-link/UDropdownLink.vue

@@ -2,7 +2,7 @@
 import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.form-calendar/UCalendar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
 import { computed, ref, watch, useTemplateRef, nextTick, onMounted } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { isRangeDate } from "./types";
 

package/ui.form-calendar/UCalendarDayView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import {

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import { isSameMonth, isCurrentMonth } from "./utilDate";

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import { isSameMonth, isCurrentYear } from "./utilDate";

package/ui.form-checkbox/UCheckbox.vue

@@ -2,7 +2,7 @@
 import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -2,7 +2,7 @@
 import { provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watchEffect } from "vue";
 import { cloneDeep } from "../utils/helper";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, useId, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import vTooltip from "../v.tooltip/vTooltip";

package/{ui.form-color-picker → ui.form-color-toggle}/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "UColorPicker";
+export const COMPONENT_NAME = "UColorToggle";

package/{ui.form-color-picker → ui.form-color-toggle}/storybook/stories.ts

@@ -6,22 +6,22 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UColorPicker from "../UColorPicker.vue";
+import UColorToggle from "../UColorToggle.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
-interface UColorPickerArgs extends Props {
+interface UColorToggleArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }
 
 export default {
   id: "3190",
-  title: "Form Inputs & Controls / Color Picker",
-  component: UColorPicker,
+  title: "Form Inputs & Controls / Color Toggle",
+  component: UColorToggle,
   args: {
     modelValue: "",
     colors: /*tw*/ {
@@ -47,31 +47,31 @@ export default {
     },
   },
   argTypes: {
-    ...getArgTypes(UColorPicker.__name),
+    ...getArgTypes(UColorToggle.__name),
   },
   parameters: {
     docs: {
-      ...getDocsDescription(UColorPicker.__name),
+      ...getDocsDescription(UColorToggle.__name),
     },
   },
 } as Meta;
 
-const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
-  components: { UColorPicker, UButton, UCol },
-  setup: () => ({ args, slots: getSlotNames(UColorPicker.__name) }),
+const DefaultTemplate: StoryFn<UColorToggleArgs> = (args: UColorToggleArgs) => ({
+  components: { UColorToggle, UButton, UCol },
+  setup: () => ({ args, slots: getSlotNames(UColorToggle.__name) }),
   template: `
-    <UColorPicker v-bind="args" v-model="args.modelValue">
+    <UColorToggle v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
-    </UColorPicker>
+    </UColorToggle>
   `,
 });
 
-const EnumTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
-  components: { UCol, UColorPicker },
+const EnumTemplate: StoryFn<UColorToggleArgs> = (args: UColorToggleArgs, { argTypes }) => ({
+  components: { UCol, UColorToggle },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <UCol>
-      <UColorPicker
+      <UColorToggle
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"

package/{ui.form-color-picker/tests/UColorPicker.test.ts → ui.form-color-toggle/tests/UColorToggle.test.ts}

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
-import UColorPicker from "../UColorPicker.vue";
+import UColorToggle from "../UColorToggle.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Props } from "../types";
 
-describe("UColorPicker.vue", () => {
+describe("UColorToggle.vue", () => {
   describe("Props", () => {
     it("Model Value – selects the correct color based on modelValue", async () => {
       const modelValue = "primary";
@@ -18,7 +18,7 @@ describe("UColorPicker.vue", () => {
         secondary: "bg-secondary-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue,
           "onUpdate:modelValue": (value) => component.setProps({ modelValue: value }),
@@ -47,7 +47,7 @@ describe("UColorPicker.vue", () => {
       };
 
       Object.entries(sizes).forEach(([size, classes]) => {
-        const component = mount(UColorPicker, {
+        const component = mount(UColorToggle, {
           props: {
             modelValue: "",
             size: size as Props["size"],
@@ -70,7 +70,7 @@ describe("UColorPicker.vue", () => {
         error: "bg-error-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           colors,
@@ -89,7 +89,7 @@ describe("UColorPicker.vue", () => {
     it("Id – applies the correct id attribute", () => {
       const id = "test-color-picker-id";
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           id,
@@ -107,7 +107,7 @@ describe("UColorPicker.vue", () => {
         secondary: "bg-secondary-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           dataTest,
@@ -127,7 +127,7 @@ describe("UColorPicker.vue", () => {
 
   describe("Exposed properties", () => {
     it("ListRef – exposes listRef", () => {
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           colors: {

package/ui.form-date-picker/UDatePicker.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, ref, useId, useTemplateRef, watchEffect } from "vue";
 import { merge } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";