@antify/ui 1.2.0 → 2.0.0

package/dist/components/AntAccordion.vue

@@ -49,7 +49,7 @@ function onClose(index: number) {
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col bg-neutral-300 gap-px">
+  <div class="w-full h-full flex flex-col bg-base-300 gap-px">
     <slot>
       <AntAccordionItem
         v-for="(item, index) in items"

package/dist/components/AntAlert.vue

@@ -48,7 +48,7 @@ const classes = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.danger]: 'bg-danger-100 text-danger-700',
     [InputState.info]: 'bg-info-100 text-info-700',
-    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
+    [InputState.base]: 'bg-base-100 text-base-100-font',
     [InputState.success]: 'bg-success-100 text-success-700',
     [InputState.warning]: 'bg-warning-100 text-warning-700',
   };
@@ -63,7 +63,7 @@ const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-700',
     [InputState.info]: 'text-info-700',
     [InputState.success]: 'text-success-700',

package/dist/components/AntCard.vue

@@ -27,7 +27,7 @@ const cardClass = computed(() => ({
 <template>
   <div
     :class="cardClass"
-    class="bg-white border border-neutral-300 rounded-md"
+    class="bg-white border border-base-300 rounded-md"
   >
     <slot/>
   </div>

package/dist/components/AntDropdown.vue

@@ -77,7 +77,7 @@ const onClickOutside = [
           :style="floatingStyles"
         >
           <div
-            class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col bg-white text-for-white-bg-font w-full overflow-hidden"
+            class="shadow-lg border border-base-300 rounded-md text-sm relative inline-flex flex-col bg-white text-for-white-bg-font w-full overflow-hidden"
             :class="{'p-2': contentPadding}"
           >
             <slot name="content"/>

package/dist/components/AntKeycap.vue

@@ -37,7 +37,7 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <div class="inline-flex relative justify-center items-center bg-neutral-300 rounded-md text-center text-neutral-300-font font-medium" :class="classes">
+  <div class="inline-flex relative justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium" :class="classes">
       <AntIcon
       v-if="icon"
       :icon="icon"

package/dist/components/AntListGroup.vue

@@ -17,7 +17,7 @@ withDefaults(
     <AntSkeleton v-if="skeleton" absolute rounded/>
 
     <div
-      class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
+      class="flex flex-col rounded-md bg-base-300 gap-px relative border border-base-300 overflow-hidden"
       :class="{'invisible': skeleton, 'shadow-md': shadow}"
     >
       <slot/>

package/dist/components/AntListGroupItem.vue

@@ -19,7 +19,7 @@ const classes = computed(() => {
   const variants: Record<ListGroupItemState, string> = {
     [ListGroupItemState.danger]: 'bg-danger-500 text-danger-500-font hover:bg-danger-700',
     [ListGroupItemState.info]: 'bg-info-500 text-info-500-font hover:bg-info-700',
-    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-neutral-200',
+    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-base-200',
     [ListGroupItemState.primary]: 'bg-primary-500 text-primary-500-font hover:bg-primary-700',
     [ListGroupItemState.secondary]: 'bg-secondary-500 text-secondary-500-font hover:bg-secondary-700',
     [ListGroupItemState.success]: 'bg-success-500 text-success-500-font hover:bg-success-700',

package/dist/components/AntModal.vue

@@ -54,8 +54,8 @@ function closeModal() {
       <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
         <div
           v-if="openModal"
-          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto"
-          :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
+          class="flex flex-col gap-px bg-base-300 overflow-hidden cursor-auto"
+          :class="{'w-full h-full': fullscreen, 'border border-base-300 rounded-md shadow-md': !fullscreen}"
         >
           <div
             class="bg-white p-2 flex items-center justify-between"

package/dist/components/AntPopover.vue

@@ -107,10 +107,10 @@ const onClickOutside = [
             ref="floating"
             :style="floatingStyles"
           >
-            <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col">
+            <div class="shadow-lg border-base-300 rounded-md text-sm relative inline-flex flex-col">
 
               <div
-                class="border-neutral-300 border-b p-2 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+                class="border-base-300 border-b p-2 bg-base-100 rounded-t-md border-t border-l border-r text-base-100-font font-semibold"
               >
                 <slot name="title">
                   {{ title }}
@@ -118,7 +118,7 @@ const onClickOutside = [
               </div>
 
               <div
-                class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+                class="p-2 rounded-b-md text-for-white-bg-font border-base-300 border-l border-b border-r bg-white"
               >
                 <slot name="content"/>
               </div>
@@ -154,12 +154,12 @@ const onClickOutside = [
                 >
                   <path
                     d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                    :class="{'fill-neutral-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === Position.left}"
+                    :class="{'fill-base-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
 
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                    :class="{'stroke-neutral-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
+                    :class="{'stroke-base-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
                 </svg>
 
@@ -173,7 +173,7 @@ const onClickOutside = [
                 >
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
-                    class="stroke-neutral-300"
+                    class="stroke-base-300"
                   />
                 </svg>
               </div>

package/dist/components/AntSpinner.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 });
 const circleClass = computed(() => {
   const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
+    [State.base]: 'fill-base-500',
     [State.primary]: 'fill-primary-700',
     [State.secondary]: 'fill-secondary-700',
     [State.danger]: 'fill-danger-700',
@@ -40,7 +40,7 @@ const circleClass = computed(() => {
     [State.warning]: 'fill-warning-700',
   };
   const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
+    [State.base]: 'fill-base-100',
     [State.primary]: 'fill-primary-100',
     [State.secondary]: 'fill-secondary-100',
     [State.danger]: 'fill-danger-100',
@@ -56,7 +56,7 @@ const circleClass = computed(() => {
 });
 const spinningElementClass = computed(() => {
   const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
+    [State.base]: 'fill-base-100',
     [State.primary]: 'fill-primary-100',
     [State.secondary]: 'fill-secondary-100',
     [State.danger]: 'fill-danger-100',
@@ -65,7 +65,7 @@ const spinningElementClass = computed(() => {
     [State.warning]: 'fill-warning-100',
   };
   const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
+    [State.base]: 'fill-base-500',
     [State.primary]: 'fill-primary-500',
     [State.secondary]: 'fill-secondary-500',
     [State.danger]: 'fill-danger-500',

package/dist/components/AntTag.vue

@@ -24,7 +24,7 @@ const classes = computed(() => {
     [TagState.info]: 'bg-info-500 text-info-500-font',
     [TagState.primary]: 'bg-primary-500 text-primary-500-font',
     [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
+    [TagState.base]: 'bg-base-300 text-base-300-font',
     [TagState.success]: 'bg-success-500 text-success-500-font',
     [TagState.warning]: 'bg-warning-500 text-warning-500-font',
   };
@@ -61,7 +61,7 @@ const iconState = computed(() => {
     case TagState.secondary:
       return 'text-secondary-500-font';
     default:
-      return 'text-neutral-300-font';
+      return 'text-base-300-font';
   }
 });
 const iconWrapperClass = computed(() => {

package/dist/components/AntToast.vue

@@ -35,7 +35,7 @@ const icons = {
 const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputState.base]: 'bg-base-100 border-base-500 text-base-500',
     [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
     [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
     [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
@@ -50,7 +50,7 @@ const classes = computed(() => {
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-500',
     [InputState.info]: 'text-info-500',
     [InputState.success]: 'text-success-500',

package/dist/components/AntTooltip.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<{
 const floatOpen = ref<boolean>(false)
 const clickLock = ref(false);
 const timeout = ref<number | undefined>();
+const hoverFloat = ref<boolean>(false)
+const hoverReference = ref<boolean>(false)
 
 const reference = ref<HTMLElement | null>(null)
 const floating = ref<HTMLElement | null>(null)
@@ -68,7 +70,7 @@ const svgPathClasses = computed(() => {
 });
 const arrowSvgPathClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'stroke-neutral-300',
+    [InputState.base]: 'stroke-base-300',
     [InputState.danger]: 'stroke-danger-500',
     [InputState.info]: 'stroke-info-500',
     [InputState.success]: 'stroke-success-500',
@@ -79,7 +81,7 @@ const arrowSvgPathClasses = computed(() => {
 });
 const contentClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.base]: 'text-for-white-bg-font bg-white border-base-300',
     [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
     [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
     [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
@@ -94,10 +96,6 @@ const _tooltipClasses = computed(() => ({
 }));
 
 function onMouseOver() {
-  if (floatOpen.value || clickLock.value) {
-    return;
-  }
-
   /**
    * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
    * we clear the timeout before setting a new one.
@@ -110,8 +108,29 @@ function onMouseOver() {
 function onMouseLeave() {
   clearTimeout(timeout.value);
 
-  floatOpen.value = false;
-  clickLock.value = false;
+  timeout.value = setTimeout(() => {
+    if (!hoverFloat.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
+}
+
+function onMouseEnterTooltip() {
+  clearTimeout(timeout.value);
+
+  floatOpen.value = true;
+}
+
+function onMouseLeaveTooltip() {
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => {
+    if (!hoverReference.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
 }
 
 function onClick() {
@@ -147,6 +166,8 @@ function onClick() {
           ? 'block'
           : 'none',
         }"
+        @mouseenter="() => onMouseEnterTooltip()"
+        @mouseleave="() => onMouseLeaveTooltip()"
         data-e2e="tooltip-content"
       >
         <div

package/dist/components/__stories/AntContent.stories.js

@@ -33,7 +33,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-			<div class="outline outline-neutral-300">
+			<div class="outline outline-base-300">
 				<AntContent v-bind="args" class="h-40">
 					<div class="slot h-60">SLOT</div>
 				</AntContent>

package/dist/components/__stories/AntContent.stories.mjs

@@ -16,7 +16,7 @@ export const Docs = {
       return { args };
     },
     template: `
-			<div class="outline outline-neutral-300">
+			<div class="outline outline-base-300">
 				<AntContent v-bind="args" class="h-40">
 					<div class="slot h-60">SLOT</div>
 				</AntContent>

package/dist/components/__stories/AntListGroup.stories.js

@@ -35,7 +35,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-          <div class="p-4 bg-neutral-100">
+          <div class="p-4 bg-base-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

package/dist/components/__stories/AntListGroup.stories.mjs

@@ -15,7 +15,7 @@ export const Docs = {
       return { args, faUser, faDownload, faMessage, faCog };
     },
     template: `
-          <div class="p-4 bg-neutral-100">
+          <div class="p-4 bg-base-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

package/dist/components/__stories/AntListGroupItem.stories.js

@@ -48,7 +48,7 @@ const Docs = exports.Docs = {
         args
       };
     },
-    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/__stories/AntListGroupItem.stories.mjs

@@ -27,7 +27,7 @@ export const Docs = {
     setup() {
       return { args };
     },
-    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/__stories/AntTooltip.stories.js

@@ -80,7 +80,9 @@ const Docs = exports.Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await _test.userEvent.unhover(target);
-      await (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+      await (0, _test.waitFor)(() => (0, _test.expect)(queryTooltip()).not.toBeInTheDocument(), {
+        timeout: 600
+      });
     });
     await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
       await _test.userEvent.hover(target);

package/dist/components/__stories/AntTooltip.stories.mjs

@@ -58,7 +58,7 @@ export const Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await userEvent.unhover(target);
-      await expect(queryTooltip()).not.toBeInTheDocument();
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 600 });
     });
     await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
       await userEvent.hover(target);

package/dist/components/buttons/AntButton.vue

@@ -61,7 +61,7 @@ const groupedClassList = computed(() => ({
 }));
 const classes = computed(() => {
   const variants = {
-    [State.base]: 'ring-primary-200 outline-neutral-300',
+    [State.base]: 'ring-primary-200 outline-base-300',
     [State.danger]: 'ring-danger-200 outline-danger-500',
     [State.info]: 'ring-info-200 outline-info-500',
     [State.primary]: 'ring-primary-200 outline-primary-500',
@@ -79,7 +79,7 @@ const classes = computed(() => {
     [State.warning]: 'bg-white text-warning-500',
   };
   const notFilledHoverVariants = {
-    [State.base]: 'hover:bg-neutral-100',
+    [State.base]: 'hover:bg-base-100',
     [State.danger]: 'hover:bg-danger-100',
     [State.info]: 'hover:bg-info-100',
     [State.primary]: 'hover:bg-primary-100',
@@ -88,7 +88,7 @@ const classes = computed(() => {
     [State.warning]: 'hover:bg-warning-100',
   };
   const filledVariants = {
-    [State.base]: 'bg-neutral-50 text-neutral-50-font',
+    [State.base]: 'bg-base-50 text-base-50-font',
     [State.danger]: 'bg-danger-500 text-danger-500-font',
     [State.info]: 'bg-info-500 text-info-500-font',
     [State.primary]: 'bg-primary-500 text-primary-500-font',
@@ -97,7 +97,7 @@ const classes = computed(() => {
     [State.warning]: 'bg-warning-500 text-warning-500-font',
   };
   const filledHoverVariants = {
-    [State.base]: 'hover:bg-neutral-200',
+    [State.base]: 'hover:bg-base-200',
     [State.danger]: 'hover:bg-danger-600',
     [State.info]: 'hover:bg-info-600',
     [State.primary]: 'hover:bg-primary-600',
@@ -207,8 +207,8 @@ onMounted(() => {
         :to="to"
         :disabled="disabled || undefined"
         :tabindex="noFocus || hasInputState ? '-1' : '0'"
-        @click="() => !props.readonly ? $emit('click') : null"
-        @blur="() => !props.readonly ? $emit('blur') : null"
+        @click="(e: MouseEvent) => !props.readonly ? $emit('click', e) : null"
+        @blur="(e: FocusEvent) => !props.readonly ? $emit('blur', e) : null"
       >
         <AntSpinner
           v-if="spinner"

package/dist/components/crud/AntCrud.vue

@@ -12,7 +12,7 @@ withDefaults(defineProps<{
     data-e2e="crud"
   >
     <div
-      class="left-content h-full flex flex-col bg-neutral-300 gap-px overflow-hidden"
+      class="left-content h-full flex flex-col bg-base-300 gap-px overflow-hidden"
       :class="{'w-[40rem]': showDetail, 'w-full': !showDetail}"
     >
       <div class="bg-white">
@@ -31,7 +31,7 @@ withDefaults(defineProps<{
     <Transition name="right-content">
       <div
         v-if="showDetail"
-        class="flex flex-col gap-px border-l border-neutral-300 overflow-hidden"
+        class="flex flex-col gap-px border-l border-base-300 overflow-hidden"
         :class="{'w-full': showDetail}"
       >
         <slot/>

package/dist/components/crud/AntCrudDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-neutral-300 gap-px h-full" data-e2e="crud-detail">
+  <div class="flex flex-col bg-base-300 gap-px h-full" data-e2e="crud-detail">
     <slot name="header"/>
 
     <div class="flex-grow bg-white h-full overflow-y-auto">

package/dist/components/crud/AntCrudDetailNav.vue

@@ -34,6 +34,7 @@ const dialogOpen = ref(false);
     <slot name="tabs">
       <AntTabs
         :tab-items="tabItems"
+        :skeleton="skeleton"
       />
     </slot>
 

package/dist/components/crud/__stories/AntCrudDetailActions.stories.js

@@ -16,7 +16,7 @@ const meta = {
     }
   },
   decorators: [() => ({
-    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+    template: '<div class="border border-dashed border-base-300"><story/></div>'
   })],
   argTypes: {}
 };

package/dist/components/crud/__stories/AntCrudDetailActions.stories.mjs

@@ -4,7 +4,7 @@ const meta = {
   title: "Crud/Crud Detail Actions",
   component: AntCrudDetailActions,
   parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
   argTypes: {}
 };
 export default meta;

package/dist/components/crud/__stories/AntCrudTableFilter.stories.js

@@ -30,7 +30,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <div class="border border-neutral-300 border-dashed">
+      <div class="border border-base-300 border-dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -15,7 +15,7 @@ export const Docs = {
       return { args };
     },
     template: `
-      <div class="border border-neutral-300 border-dashed">
+      <div class="border border-base-300 border-dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/dialogs/AntDialog.vue

@@ -41,7 +41,7 @@ const icons = {
 
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-500',
     [InputState.info]: 'text-info-500',
     [InputState.success]: 'text-success-500',
@@ -91,11 +91,11 @@ function confirmDialog() {
       <Transition :name="'bounce'">
         <div
           v-if="openDialog"
-          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
+          class="flex flex-col gap-px bg-base-300 overflow-hidden cursor-auto w-96 border border-base-300 rounded-md shadow-md"
         >
           <div
             v-if="title || $slots['title']"
-            class="bg-neutral-100 p-2 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+            class="bg-base-100 p-2 flex items-center justify-between text-base-100-font text-sm font-semibold"
           >
             <slot name="title">
               {{ title }}
@@ -117,7 +117,7 @@ function confirmDialog() {
           </div>
 
           <div
-            class="bg-neutral-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
+            class="bg-base-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton

package/dist/components/dialogs/__stories/AntDialog.stories.js

@@ -17,7 +17,7 @@ const meta = {
     }
   },
   decorators: [() => ({
-    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+    template: '<div class="border border-dashed border-base-300"><story/></div>'
   })],
   argTypes: {
     state: {

package/dist/components/dialogs/__stories/AntDialog.stories.mjs

@@ -5,7 +5,7 @@ const meta = {
   title: "Components/Dialogs/Dialog",
   component: AntDialog,
   parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
   argTypes: {
     state: {
       control: { type: "select" },

package/dist/components/inputs/AntCheckbox.vue

@@ -49,7 +49,7 @@ const inputClasses = computed(() => {
     [InputState.warning]: 'text-warning-500',
   };
   const inactiveColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300',
+    [InputState.base]: 'outline-base-300',
     [InputState.danger]: 'outline-danger-500',
     [InputState.info]: 'outline-info-500',
     [InputState.success]: 'outline-success-500',
@@ -57,7 +57,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
+    'relative inline-flex flex-shrink-0 bg-base-100 border-0': true,
     'outline outline-1 outline-offset-[-1px] rounded': true,
     'focus:ring-offset-0': true,
     'invisible': props.skeleton,

package/dist/components/inputs/AntDateInput.vue

@@ -95,7 +95,7 @@ function onClickCalendar() {
           :icon="_icon"
           :color="iconColor"
           :size="iconSize"
-          :class="{'cursor-pointer': !disabled, 'opacity-50': disabled}"
+          :class="{'cursor-pointer': !disabled && !readonly, 'opacity-50': disabled}"
           @click="onClickCalendar"
         />
       </template>

package/dist/components/inputs/AntPasswordInput.vue

@@ -51,7 +51,7 @@ const iconColor = computed(() => {
     case InputState.danger:
       return 'text-danger-700';
     default:
-      return 'text-neutral-500';
+      return 'text-base-500';
   }
 });
 

package/dist/components/inputs/AntRadio.vue

@@ -47,7 +47,7 @@ const inputClasses = computed(() => {
     'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50': true,
     'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
-    'outline-neutral-300': props.state === InputState.base,
+    'outline-base-300': props.state === InputState.base,
     'outline-primary-500': props.state === InputState.base && isActive.value,
     'outline-info-500': props.state === InputState.info,
     'outline-success-500': props.state === InputState.success,

package/dist/components/inputs/AntRangeSlider.vue

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
 const _modelValue = useVModel(props, 'modelValue', emit);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-neutral-base',
+    [InputState.base]: 'text-base-base',
     [InputState.danger]: 'text-danger-base',
     [InputState.info]: 'text-info-base',
     [InputState.success]: 'text-success-base',
@@ -38,7 +38,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
+    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-base-300 rounded-md outline-none': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'invisible': props.skeleton,
     [variants[props.state]]: true