@antify/ui 1.3.0 → 2.1.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

@@ -9,10 +9,12 @@ const props = withDefaults(defineProps<{
   state?: InputState,
   delay?: number,
   tooltipClasses?: string | Record<string, boolean>
+  disabled?: boolean;
 }>(), {
   state: InputState.base,
   delay: 600,
   tooltipClasses: '',
+  disabled: false,
 });
 
 const floatOpen = ref<boolean>(false)
@@ -70,7 +72,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',
@@ -81,7 +83,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',
@@ -157,7 +159,7 @@ function onClick() {
 
     <teleport to="body">
       <div
-        v-if="floatOpen && hasSlotContent($slots.content)"
+        v-if="floatOpen && hasSlotContent($slots.content) && !disabled"
         :class="_tooltipClasses"
         ref="floating"
         :style="{

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.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntTooltip>;
 export default meta;
 type Story = StoryObj<typeof AntTooltip>;
 export declare const Docs: Story;
+export declare const disabled: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+exports.disabled = exports.default = exports.Docs = void 0;
 var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
 var _enums = require("../../enums");
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
@@ -102,4 +102,11 @@ const Docs = exports.Docs = {
     });
   },
   args: {}
+};
+const disabled = exports.disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
 };

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

@@ -75,3 +75,10 @@ export const Docs = {
   },
   args: {}
 };
+export const disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};

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',

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/AntCrudTableFilter.vue

@@ -81,27 +81,25 @@ watch(() => props.fullWidth, (val) => {
         v-model:show-dropdown="showDropdown"
         :position="Position.left"
       >
-        <template #reference>
-          <div class="flex">
-            <AntButton
-              :state="hasFilter ? State.info : State.base"
-              :grouped="hasFilter ? Grouped.left : Grouped.none"
-              :skeleton="skeleton"
-              :icon-left="faFilter"
-              @click="() => showDropdown = !showDropdown"
-            />
+        <div class="flex">
+          <AntButton
+            :state="hasFilter ? State.info : State.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
 
-            <AntButton
-              v-if="hasFilter"
-              :state="State.info"
-              :grouped="Grouped.right"
-              :skeleton="skeleton"
-              :icon-left="faMultiply"
-              filled
-              @click="$emit('removeFilter')"
-            />
-          </div>
-        </template>
+          <AntButton
+            v-if="hasFilter"
+            :state="State.info"
+            :grouped="Grouped.right"
+            :skeleton="skeleton"
+            :icon-left="faMultiply"
+            filled
+            @click="$emit('removeFilter')"
+          />
+        </div>
 
         <template #content>
           <slot name="dropdownContent"/>

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

package/dist/components/inputs/AntSelect.vue

@@ -71,7 +71,7 @@ const hasInputState = computed(() => props.skeleton || props.readonly || props.d
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 bg-white focus:ring-primary-200',
+    [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
     [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
     [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
     [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
@@ -106,7 +106,7 @@ const inputClasses = computed(() => {
 });
 const placeholderClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-neutral-500',
+    [InputState.base]: 'text-base-500',
     [InputState.success]: 'text-success-700',
     [InputState.info]: 'text-info-700',
     [InputState.warning]: 'text-warning-700',