@antify/ui 1.2.0 → 2.0.0

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

package/dist/components/inputs/AntSwitch.vue

@@ -38,7 +38,7 @@ const buttonClasses = computed(() => {
     'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
     'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
-    'bg-neutral-300': !_value.value,
+    'bg-base-300': !_value.value,
     'invisible': props.skeleton,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
@@ -65,7 +65,7 @@ const buttonClasses = computed(() => {
   return classes;
 });
 const ballClasses = computed(() => ({
-  'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'pointer-events-none inline-block rounded-full bg-base-100 shadow transform ring-0 transition ease-in-out duration-200': true,
   'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
   'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),

package/dist/components/inputs/AntSwitcher.vue

@@ -72,7 +72,7 @@ const itemClasses = computed(() => {
 
   const colorVariant = {
     [InputState.danger]: 'outline-danger-500 bg-danger-100',
-    [InputState.base]: 'outline-neutral-300 bg-white',
+    [InputState.base]: 'outline-base-300 bg-white',
     [InputState.info]: 'outline-info-500 bg-info-100',
     [InputState.success]: 'outline-success-500 bg-success-100',
     [InputState.warning]: 'outline-warning-500 bg-warning-100',

package/dist/components/inputs/AntTagInput.vue

@@ -64,7 +64,7 @@ const tagInput = ref('');
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-300 focus-within:ring-primary-200 bg-white',
+    [InputState.base]: 'outline-base-300 focus-within:outline-base-300 focus-within:ring-primary-200 bg-white',
     [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
     [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
     [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
@@ -93,7 +93,7 @@ const inputContainerClasses = computed(() => {
 });
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'placeholder:text-neutral-500',
+    [InputState.base]: 'placeholder:text-base-500',
     [InputState.danger]: 'placeholder:text-danger-700',
     [InputState.info]: 'placeholder:text-info-700',
     [InputState.success]: 'placeholder:text-success-700',

package/dist/components/inputs/AntTextarea.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, watch} from 'vue';
+import {computed, onMounted, ref, watch} from 'vue';
 import {Size} from '../../enums/Size.enum';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntIcon from '../AntIcon.vue';
@@ -49,6 +49,7 @@ const props = withDefaults(defineProps<{
   resize: true,
   messages: () => []
 });
+
 const _modelValue = useVModel(props, 'modelValue', emit);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
@@ -61,7 +62,7 @@ const icons = {
 /*TODO #59:: If the scrollbar is showing than the pr is moving and the gap between icon and text is bigger and the icon is stuck in the scrollbar*/
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',
@@ -111,6 +112,7 @@ const iconColor = computed(() => {
 });
 const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
 const icon = computed(() => icons[props.state]);
+const textAreaRef = ref();
 const getIconSize = computed(() => {
   if (props.size === Size.xs || props.size === Size.xs2) {
     return IconSize.xs;
@@ -144,6 +146,11 @@ function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);
   emit('blur', e);
 }
+
+defineExpose({
+  getTextAreaRef: () => textAreaRef.value
+});
+
 </script>
 
 <template>
@@ -168,6 +175,7 @@ function onBlur(e: FocusEvent) {
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
         :readonly="readonly"
+        ref="textAreaRef"
         v-bind="$attrs"
         @blur="onBlur"
       />

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -60,7 +60,7 @@ const icons = {
 };
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -49,7 +49,6 @@ const {floatingStyles, middlewareData, placement} = useFloating(reference, float
 });
 
 onClickOutside(floating, () => {
-  console.log(props.open);
   if (!props.open) {
     return;
   }
@@ -62,7 +61,7 @@ const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
 const dropdownClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-300 border-neutral-300',
+    [InputState.base]: 'bg-base-300 border-base-300',
     [InputState.success]: 'bg-success-500 border-success-500',
     [InputState.info]: 'bg-info-500 border-info-500',
     [InputState.warning]: 'bg-warning-500 border-warning-500',
@@ -169,7 +168,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
 function getActiveDropDownItemClasses(option: SelectOption) {
   const variants: Record<InputState, string> = {
-    [InputState.base]: '!bg-neutral-100',
+    [InputState.base]: '!bg-base-100',
     [InputState.success]: 'bg-success-200',
     [InputState.info]: 'bg-info-200',
     [InputState.warning]: 'bg-warning-200',

package/dist/components/inputs/__stories/AntTextInput.stories.js

@@ -107,6 +107,7 @@ const Summary = exports.Summary = {
         <AntTextInput
           v-bind="args"
           v-model="args.modelValue"
+          readonly
         />
         <AntTextInput
           v-bind="args"

package/dist/components/inputs/__stories/AntTextInput.stories.mjs

@@ -63,6 +63,7 @@ export const Summary = {
         <AntTextInput
           v-bind="args"
           v-model="args.modelValue"
+          readonly
         />
         <AntTextInput
           v-bind="args"

package/dist/components/layouts/AntNavLeftLayout.vue

@@ -13,8 +13,8 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
-    <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
+  <div class="flex gap-px bg-base-300 h-screen min-w-full overflow-y-hidden">
+    <div class="flex flex-col gap-px bg-base-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
         v-if="hasLogoImageSlot"

package/dist/components/layouts/__stories/AntNavLeftLayout.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/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -4,7 +4,7 @@ const meta = {
   title: "Layouts/NavLeftLayout",
   component: AntNavLeftLayout,
   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/navbar/AntNavbarItem.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const itemClasses = computed(() => ({
   'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
-  'transition-colors hover:bg-neutral-100': true,
+  'transition-colors hover:bg-base-100': true,
   'text-primary-500': props.navbarItem.active
 }));
 

package/dist/components/table/AntTable.vue

@@ -35,7 +35,7 @@ const props = withDefaults(
     selectableRows: false,
     showLightVersion: false,
     size: AntTableSize.md,
-    headerColor: 'bg-neutral-200'
+    headerColor: 'bg-base-200'
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -132,9 +132,9 @@ function rowClick(elem: Record<string, unknown>): void {
           :class="{
               'bg-primary-200 text-primary-200-font transition-colors': elem === selected,
               'bg-white text-for-white-bg-font': elem !== selected && rowIndex % 2 === 0,
-              'bg-neutral-100 text-neutral-100-font': elem !== selected && rowIndex % 2 !== 0,
+              'bg-base-100 text-base-100-font': elem !== selected && rowIndex % 2 !== 0,
               'cursor-pointer': selectableRows,
-              'hover:bg-neutral-200': selectableRows && elem !== selected,
+              'hover:bg-base-200': selectableRows && elem !== selected,
             }"
         >
           <slot
@@ -199,7 +199,7 @@ function rowClick(elem: Record<string, unknown>): void {
 
     <div
       v-if="data.length > 0 && _loading"
-      class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-neutral-300 flex items-center justify-center"
+      class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-base-300 flex items-center justify-center"
     >
       <AntSpinner
         class="!w-24 !h-24"
@@ -209,7 +209,7 @@ function rowClick(elem: Record<string, unknown>): void {
 
     <div
       v-if="!data || data.length <= 0 && _loading"
-      class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-neutral-300 flex items-center justify-center"
+      class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-base-300 flex items-center justify-center"
     >
       <AntSkeleton
         v-model="_loading"

package/dist/components/table/AntTh.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
 
 const headerClasses = computed(() => ({
   [props.header.headerClassList || '']: true,
-  'text-sm text-neutral-200-font uppercase font-semi-bold': true,
+  'text-sm text-base-200-font uppercase font-semi-bold': true,
   'text-left': !props.header.align || props.header.align === AntTableAlign.left,
   'text-center': props.header.align === AntTableAlign.center,
   'text-right': props.header.align === AntTableAlign.right,

package/dist/components/table/__stories/AntTable.stories.js

@@ -166,7 +166,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <div class="h-96 border border-dashed border-neutral-300">
+      <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employeed'">

package/dist/components/table/__stories/AntTable.stories.mjs

@@ -110,7 +110,7 @@ export const Docs = {
       return { args, selected };
     },
     template: `
-      <div class="h-96 border border-dashed border-neutral-300">
+      <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employeed'">

package/dist/components/tabs/AntTabItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AntIcon from '../AntIcon.vue';
 import {
+  faCircleInfo,
   faExclamationCircle,
   faExclamationTriangle,
   type IconDefinition
@@ -30,6 +31,7 @@ const route = useRoute();
 
 const icons = {
   [TabItemState.base]: null,
+  [TabItemState.info]: faCircleInfo,
   [TabItemState.danger]: faExclamationCircle,
   [TabItemState.warning]: faExclamationTriangle,
 };
@@ -47,23 +49,26 @@ const _active = computed<boolean>(() => {
 });
 const containerClasses = computed(() => {
   const variants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'hover:bg-neutral-100',
+    [TabItemState.base]: 'hover:bg-base-100',
+    [TabItemState.info]: 'hover:bg-base-100',
     [TabItemState.warning]: 'hover:bg-warning-100',
     [TabItemState.danger]: 'hover:bg-danger-100',
   };
   const activeVariants: Record<TabItemState, string> = {
     [TabItemState.base]: 'text-primary-500 border-primary-500',
+    [TabItemState.info]: 'text-info-500 border-info-500',
     [TabItemState.warning]: 'text-warning-500 border-warning-500',
     [TabItemState.danger]: 'text-danger-500 border-danger-500',
   };
   const notActiveVariants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'text-for-white-bg-font border-white',
+    [TabItemState.base]: 'text-for-white-bg-font',
+    [TabItemState.info]: 'text-info-500',
     [TabItemState.warning]: 'text-warning-500',
     [TabItemState.danger]: 'text-danger-500',
   };
 
   return {
-    'p-2 text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
+    'p-2 text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm text-nowrap': true,
     'grow': props.expanded,
     [variants[props.state]]: !props.disabled,
     [activeVariants[props.state]]: _active.value,
@@ -75,6 +80,7 @@ const containerClasses = computed(() => {
 const borderBoxClasses = computed(() => {
   const variants: Record<TabItemState, string> = {
     [TabItemState.base]: 'bg-primary-500',
+    [TabItemState.info]: 'bg-info-500',
     [TabItemState.warning]: 'bg-warning-500',
     [TabItemState.danger]: 'bg-danger-500',
   };
@@ -86,7 +92,8 @@ const borderBoxClasses = computed(() => {
 });
 const iconColor = computed(() => {
   const variants = {
-    [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.base]: 'text-base-100-font',
+    [TabItemState.info]: 'text-info-500',
     [TabItemState.warning]: 'text-warning-500',
     [TabItemState.danger]: 'text-danger-500',
   };

package/dist/components/tabs/AntTabs.vue

@@ -17,8 +17,10 @@ const props = withDefaults(defineProps<{
 
 const currentActive = useVModel(props, 'modelValue', emits);
 const containerClasses = computed(() => ({
-  'flex items-stretch bg-neutral-300 gap-px transition-all h-full': true,
-  'w-fit': !props.expanded,
+  'flex transition-all h-full': true,
+}));
+
+const scrollContainerClasses = computed(() => ({
   'w-full': props.expanded,
 }));
 
@@ -37,6 +39,7 @@ function clickTab(tabItem: TabItem) {
 
 <template>
   <div :class="containerClasses">
+    <div class="flex gap-px bg-base-300 border-l border-r border-base-300 overflow-x-auto" :class="scrollContainerClasses">
     <slot>
       <AntTabItem
         v-for="(tabItem, index) in tabItems"
@@ -51,5 +54,6 @@ function clickTab(tabItem: TabItem) {
         <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
       </AntTabItem>
     </slot>
+    </div>
   </div>
 </template>

package/dist/components/tabs/__stories/AntTabs.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof AntTabs>;
 export declare const Docs: Story;
 export declare const FixedHeight: Story;
+export declare const HorizontalScrolling: Story;
 export declare const DifferentStates: Story;
 export declare const Summary: Story;

package/dist/components/tabs/__stories/AntTabs.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.FixedHeight = exports.Docs = exports.DifferentStates = void 0;
+module.exports = exports.Summary = exports.HorizontalScrolling = exports.FixedHeight = exports.Docs = exports.DifferentStates = void 0;
 var _AntTabs = _interopRequireDefault(require("../AntTabs.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
@@ -83,6 +83,68 @@ const FixedHeight = exports.FixedHeight = {
   }),
   args: Docs.args
 };
+const HorizontalScrolling = exports.HorizontalScrolling = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+
+        <AntFormGroupLabel>Default Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Default Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    tabItems: [{
+      id: "1",
+      label: "First tab"
+    }, {
+      id: "2",
+      label: "Second tab"
+    }, {
+      id: "3",
+      label: "Third tab",
+      state: _AntTabItem.TabItemState.warning
+    }, {
+      id: "4",
+      label: "Fourth tab",
+      state: _AntTabItem.TabItemState.danger
+    }, {
+      id: "5",
+      label: "Fifth tab"
+    }, {
+      id: "6",
+      label: "Sixth tab"
+    }]
+  }
+};
 const DifferentStates = exports.DifferentStates = {
   render: Docs.render,
   args: {
@@ -100,6 +162,10 @@ const DifferentStates = exports.DifferentStates = {
       id: "4",
       label: "Fourth tab",
       state: _AntTabItem.TabItemState.danger
+    }, {
+      id: "5",
+      label: "Fifth tab",
+      state: _AntTabItem.TabItemState.info
     }]
   }
 };
@@ -114,6 +180,7 @@ const Summary = exports.Summary = {
       const value_1 = (0, _vue.ref)();
       const value_2 = (0, _vue.ref)();
       const value_3 = (0, _vue.ref)("2");
+      const value_4 = (0, _vue.ref)();
       const tabItems_1 = [{
         id: "1",
         label: "My account"
@@ -146,14 +213,38 @@ const Summary = exports.Summary = {
         label: "Messages",
         to: "/#"
       }];
+      const tabItems_4 = [{
+        id: "1",
+        label: "First tab"
+      }, {
+        id: "2",
+        label: "Second tab"
+      }, {
+        id: "3",
+        label: "Third tab",
+        state: _AntTabItem.TabItemState.warning
+      }, {
+        id: "4",
+        label: "Fourth tab",
+        state: _AntTabItem.TabItemState.danger
+      }, {
+        id: "5",
+        label: "Fifth tab",
+        state: _AntTabItem.TabItemState.info
+      }, {
+        id: "6",
+        label: "Sixth tab"
+      }];
       return {
         args,
         value_1,
         value_2,
         value_3,
+        value_4,
         tabItems_1,
         tabItems_2,
-        tabItems_3
+        tabItems_3,
+        tabItems_4
       };
     },
     template: `
@@ -167,15 +258,30 @@ const Summary = exports.Summary = {
 
         <AntFormGroupLabel>Expanded</AntFormGroupLabel>
         <AntFormGroup>
-          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/></div>
         </AntFormGroup>
 
         <AntFormGroupLabel>Larger container</AntFormGroupLabel>
         <div class="h-16 dashed">
-          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/>
+        </div>
+
+        <AntFormGroupLabel>Different States</AntFormGroupLabel>
+        <div class="dashed">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
         </div>
+
+        <AntFormGroupLabel>Default Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" expanded />
+        </AntFormGroup>
       </AntFormGroup>
     `
   }),