@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/AntToast.vue

@@ -10,57 +10,58 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntButton from './buttons/AntButton.vue';
-import {ColorType, InputColorType} from '../enums';
+import {State, InputState, Size} from '../enums';
+import {IconSize} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
   title?: string,
-  colorType?: InputColorType,
+  state?: InputState,
   showUndo?: boolean,
   icon?: boolean
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   showUndo: false,
   icon: true
 });
 
 const icons = {
-  [InputColorType.base]: faInfoCircle,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
-const _icon = computed(() => icons[props.colorType]);
+const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
-    [InputColorType.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputColorType.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputColorType.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputColorType.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-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',
+    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
   };
 
   return {
-    'inline-flex flex-col gap-2.5 rounded-md p-2.5 border transition-colors shadow-md': true,
-    [variants[props.colorType]]: true,
+    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    [variants[props.state]]: true,
   };
 });
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 
@@ -68,17 +69,21 @@ onMounted(() => {
   <div
     :class="classes"
     data-e2e="toast"
-    :data-e2e-color-type="props.colorType"
+    :data-e2e-state="props.state"
   >
-    <div class="inline-flex items-center justify-between w-content gap-2.5">
-      <div class="inline-flex items-center gap-2.5">
+    <div class="inline-flex items-center justify-between w-content gap-2">
+      <div class="inline-flex items-center gap-2">
         <AntIcon
           v-if="icon"
           :icon="_icon"
           :color="iconColor"
+          :size="IconSize.sm"
         />
 
-        <div class="whitespace-pre" :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          class="whitespace-pre text-sm"
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -94,12 +99,16 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
 
-    <div v-if="showUndo" class="flex justify-end">
+    <div
+      v-if="showUndo"
+      class="flex justify-end"
+    >
       <AntButton
-        :color-type="props.colorType as unknown as ColorType"
+        :state="props.state as unknown as State"
+        :size="Size.md"
         filled
         @click="() => $emit('undo')"
       >

package/dist/runtime/components/AntToaster.vue

@@ -13,34 +13,39 @@ const props = withDefaults(defineProps<{
 });
 
 const classes = computed(() => ({
-  'left-0 top-0': props.position === CornerPosition.topLeft,
-  'right-0 top-0': props.position === CornerPosition.topRight,
-  'left-0 bottom-0': props.position === CornerPosition.bottomLeft,
-  'right-0 bottom-0': props.position === CornerPosition.bottomRight,
+  'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
+  'right-0 top-0 items-end': props.position === CornerPosition.topRight,
+  'left-0 bottom-0 items-start': props.position === CornerPosition.bottomLeft,
+  'right-0 bottom-0 items-end': props.position === CornerPosition.bottomRight,
 }));
 </script>
 
 <template>
   <div
-    class="absolute flex flex-col items-baseline space-y-2.5 p-2.5"
+    class="absolute flex flex-col space-y-2.5 p-2.5"
     :class="classes"
     data-e2e="toaster"
   >
     <TransitionGroup name="list">
       <AntToast
         v-for="toast of $uiModule.toaster.getToasts()"
+        :key="`ant-toast-${toast.id}`"
         :title="toast.title"
-        :color-type="toast.type"
+        :state="toast.type"
         :icon="toast.hasIcon"
         @close="$uiModule.toaster.removeToast(toast)"
-        v-bind:key="`ant-toast-${toast.id}`"
       >
-        <template v-if="toast.content" #default>{{ toast.content }}</template>
+        <template
+          v-if="toast.content"
+          #default
+        >
+          {{ toast.content }}
+        </template>
       </AntToast>
     </TransitionGroup>
   </div>
 </template>
 
 <style>
-.list-move{transition:all .5s ease}.list-enter-active{animation:bounce-in-left .6s}.list-leave-active{animation:bounce-in-left .4s reverse}@keyframes bounce-in-left{0%{opacity:0;transform:translateX(-10rem)}50%{opacity:1;transform:translateX(.5rem)}to{opacity:1;transform:translateX(0)}}
+.list-move{transition:all .5s ease}.list-enter-active{animation:fade-in .6s}.list-leave-active{animation:fade-in .4s reverse}@keyframes fade-in{0%{opacity:0}to{opacity:1}}
 </style>

package/dist/runtime/components/AntTooltip.vue

@@ -1,109 +1,115 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref, getCurrentInstance} from 'vue';
 import {handleEnumValidation} from '../handler';
-import {InputColorType, Position} from '../enums';
+import {InputState, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
 import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-	position?: Position
-	tooltipClasses?: string | Record<string, boolean>
-	colorType?: InputColorType
-	expanded?: boolean
-	delay?: number
+  position?: Position
+  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState
+  expanded?: boolean
+  delay?: number
 }>(), {
-	position: Position.left,
-	tooltipClasses: '',
-	colorType: InputColorType.base,
-	expanded: false,
-	delay: 800
+  position: Position.left,
+  tooltipClasses: '',
+  state: InputState.base,
+  expanded: false,
+  delay: 800
 });
 const visible = ref(false);
 const _tooltipClasses = computed(() => ({
-	'absolute w-max inline-flex': true,
-	// Position
-	'bottom-full pb-3.5': props.position === Position.top,
-	'top-full pt-3.5': props.position === Position.bottom,
-	'right-full pr-3.5': props.position === Position.left,
-	'left-full pl-3.5': props.position === Position.right,
-	...classesToObjectSyntax(props.tooltipClasses)
+  'absolute w-max inline-flex': true,
+  // Position
+  'bottom-full pb-3.5': props.position === Position.top,
+  'top-full pt-3.5': props.position === Position.bottom,
+  'right-full pr-3.5': props.position === Position.left,
+  'left-full pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.tooltipClasses)
 }));
 const classes = computed(() => ({
-	'z-10 absolute flex': true,
-	'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-	'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-	'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-	'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
 }));
 const itemContainerClasses = computed(() => ({
-	'relative flex items-center': true,
-	'justify-center': props.position === Position.bottom,
-	'justify-center rotate-180': props.position === Position.top,
-	'justify-center -rotate-90': props.position === Position.right,
-	'justify-center rotate-90': props.position === Position.left,
+  'relative flex items-center': true,
+  'justify-center': props.position === Position.bottom,
+  'justify-center rotate-180': props.position === Position.top,
+  'justify-center -rotate-90': props.position === Position.right,
+  'justify-center rotate-90': props.position === Position.left,
 }));
 const contentClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-		[InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-		[InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
-		[InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
-		[InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-	};
-
-	return {[variants[props.colorType]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-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',
+    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const svgPathClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'fill-white stroke-white',
-		[InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
-		[InputColorType.info]: 'fill-info-500 stroke-info-500',
-		[InputColorType.success]: 'fill-success-500 stroke-success-500',
-		[InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
-	};
-
-	return {[variants[props.colorType]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'fill-white stroke-white',
+    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
+    [InputState.info]: 'fill-info-500 stroke-info-500',
+    [InputState.success]: 'fill-success-500 stroke-success-500',
+    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'stroke-neutral-300',
-		[InputColorType.danger]: 'stroke-danger-500',
-		[InputColorType.info]: 'stroke-info-500',
-		[InputColorType.success]: 'stroke-success-500',
-		[InputColorType.warning]: 'stroke-warning-500',
-	};
-
-	return {[variants[props.colorType]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'stroke-neutral-300',
+    [InputState.danger]: 'stroke-danger-500',
+    [InputState.info]: 'stroke-info-500',
+    [InputState.success]: 'stroke-success-500',
+    [InputState.warning]: 'stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const timeout = ref<number | undefined>();
 const clickLock = ref(false);
-const uuid = ref(getCurrentInstance()?.uid)
+const uuid = ref(getCurrentInstance()?.uid);
 
 onMounted(() => {
-	handleEnumValidation(props.position, Position, 'Position')
-	handleEnumValidation(props.colorType, InputColorType, 'colorType')
+  handleEnumValidation(props.position, Position, 'position');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 
 function onMouseOver() {
-	if (visible.value || clickLock.value) {
-		return;
-	}
+  if (visible.value || clickLock.value) {
+    return;
+  }
 
-	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number
+  /**
+   * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
+   * we clear the timeout before setting a new one.
+   */
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
 }
 
 function onMouseLeave() {
-	clearTimeout(timeout.value)
+  clearTimeout(timeout.value);
 
-	visible.value = false
-	clickLock.value = false
+  visible.value = false;
+  clickLock.value = false;
 }
 
 function onClick() {
-	clearTimeout(timeout.value)
+  clearTimeout(timeout.value);
 
-	visible.value = false
-	clickLock.value = true
+  visible.value = false;
+  clickLock.value = true;
 }
 </script>
 
@@ -172,7 +178,7 @@ function onClick() {
         </div>
 
         <div
-          class="p-2.5 rounded-md border"
+          class="p-2 rounded-md border"
           :class="contentClasses"
         >
           <slot name="content" />

package/dist/runtime/components/__stories/AntAccordion.stories.mjs

@@ -1,6 +1,6 @@
 import AntAccordion from "../AntAccordion.vue";
 import AntAccordionItem from "../AntAccordionItem.vue";
-import { CollapseStrategy } from "../__types/Accordion.types.mjs";
+import { CollapseStrategy } from "../__types/AntAccordion.types.mjs";
 const meta = {
   title: "Components/Accordion",
   component: AntAccordion,
@@ -36,7 +36,8 @@ export const Docs = {
       },
       {
         label: "Second entry",
-        content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+        content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+        iconLeft: true
       },
       {
         label: "Third entry",

package/dist/runtime/components/__stories/AntAlert.stories.mjs

@@ -1,13 +1,13 @@
 import AntAlert from "../AntAlert.vue";
-import { InputColorType } from "../../enums/index.mjs";
+import { InputState } from "../../enums/index.mjs";
 const meta = {
   title: "Components/Alert",
   component: AntAlert,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };

package/dist/runtime/components/__stories/AntCard.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntCard from '../AntCard.vue';
+declare const meta: Meta<typeof AntCard>;
+export default meta;
+type Story = StoryObj<typeof AntCard>;
+export declare const Docs: Story;
+export declare const Summary: Story;

package/dist/runtime/components/__stories/AntCard.stories.mjs

@@ -0,0 +1,87 @@
+import AntCard from "../AntCard.vue";
+import { Size } from "../../enums/index.mjs";
+import AntFormGroup from "../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Components/Card",
+  component: AntCard,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    padding: {
+      control: { type: "boolean" }
+    },
+    expanded: {
+      control: { type: "boolean" }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCard },
+    setup() {
+      return { args, Size };
+    },
+    template: `
+      <AntCard v-bind="args">
+        <div
+          class="slot h-40"
+          :class="args.expanded ? 'w-full' : 'w-48'"
+        >
+          SLOT
+        </div>
+      </AntCard>
+    `
+  }),
+  args: {}
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntCard, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      return { args, Size };
+    },
+    template: `
+      <AntFormGroup direction="column">
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" :size="Size.lg" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.md" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.sm" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs2" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+        <AntFormGroupLabel>Paddingles</AntFormGroupLabel>
+        <AntCard v-bind="args" :padding="false" class="w-48">
+          <div class="slot h-40">SLOT</div>
+        </AntCard>
+        <AntFormGroupLabel>Expanded</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" class="w-48">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
+  args: {}
+};

package/dist/runtime/components/__stories/AntIcon.stories.mjs

@@ -7,7 +7,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(IconSize)
     },
     icon: {
@@ -41,9 +41,12 @@ export const Size = {
     },
     template: `
       <div class="flex flex-col gap-2.5">
-        <AntIcon v-bind="args" size="sm"/>
-        <AntIcon v-bind="args" size="md"/>
-        <AntIcon v-bind="args" size="3xl"/>
+				<AntIcon v-bind="args" size="2xs"/>
+				<AntIcon v-bind="args" size="xs"/>
+				<AntIcon v-bind="args" size="sm"/>
+				<AntIcon v-bind="args" size="md"/>
+				<AntIcon v-bind="args" size="lg"/>
+				<AntIcon v-bind="args" size="3xl"/>
       </div>
     `
   }),

package/dist/runtime/components/__stories/AntKeycap.stories.mjs

@@ -1,4 +1,5 @@
 import AntKeycap from "../AntKeycap.vue";
+import { AntKeycapSize } from "../__types/AntKeycap.types.mjs";
 import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Keycap",
@@ -8,6 +9,10 @@ const meta = {
     icon: {
       control: { type: "none" },
       description: "Will be displayed instead of the default slot if given.<br>Use Font-awesome Icons."
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntKeycapSize)
     }
   }
 };
@@ -20,7 +25,9 @@ export const Docs = {
     },
     template: '<div class="p-4"><AntKeycap v-bind="args">F</AntKeycap></div>'
   }),
-  args: {}
+  args: {
+    size: AntKeycapSize.sm
+  }
 };
 export const Text = {
   render: Docs.render,

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

@@ -1,14 +1,14 @@
 import AntListGroupItem from "../AntListGroupItem.vue";
 import { faUser, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { ListGroupItemColorType } from "../../types/AntListGroupItem.type.mjs";
+import { ListGroupItemState } from "../__types/AntListGroupItem.types.mjs";
 const meta = {
   title: "Components/List Group Item",
   component: AntListGroupItem,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ListGroupItemColorType)
+      options: Object.values(ListGroupItemState)
     },
     iconLeft: {
       control: { type: "none" },

package/dist/runtime/components/__stories/AntModal.stories.mjs

@@ -40,7 +40,7 @@ export const Docs = {
           sed diam voluptua. At vero eos et accusam et <br/>
           justo duo dolores et ea rebum. Stet clita kasd
         </div>
-        <AntButton @click="() => open = true" color-type="primary">Open Modal</AntButton>
+        <AntButton @click="() => open = true" state="primary">Open Modal</AntButton>
 
         <AntModal v-bind="args" v-model:open="open">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
@@ -57,7 +57,7 @@ export const Docs = {
                 to close modal
               </div>
 
-              <AntButton color-type="primary">Save</AntButton>
+              <AntButton state="primary">Save</AntButton>
             </div>
           </template>
         </AntModal>

package/dist/runtime/components/__stories/AntSpinner.stories.mjs

@@ -1,19 +1,19 @@
 import AntSpinner from "../AntSpinner.vue";
-import { Size } from "../../enums/Size.enum.mjs";
-import { ColorType } from "../../enums/ColorType.enum.mjs";
+import { AntSpinnerSize } from "../__types/AntSpinner.types.mjs";
+import { State } from "../../enums/State.enum.mjs";
 const meta = {
   title: "Components/Spinner",
   component: AntSpinner,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
+      control: { type: "select" },
+      options: Object.values(AntSpinnerSize),
+      table: { defaultValue: { summary: AntSpinnerSize.md } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ColorType)
+      options: Object.values(State)
     },
     inverted: {
       control: "boolean",

package/dist/runtime/components/__stories/AntTag.stories.mjs

@@ -1,6 +1,5 @@
 import AntTag from "../AntTag.vue";
-import { Size } from "../../enums/Size.enum.mjs";
-import { TagColorType } from "../../types/AntTag.type.mjs";
+import { AntTagSize, TagState } from "../__types/AntTag.types.mjs";
 import { faTag } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Tag",
@@ -8,12 +7,12 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
-      options: Object.values(Size)
+      control: { type: "select" },
+      options: Object.values(AntTagSize)
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(TagColorType)
+      options: Object.values(TagState)
     },
     iconLeft: {
       control: { type: "none" },