@antify/ui-module 1.6.0 → 1.7.1

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

@@ -1,8 +1,8 @@
 import AntTooltip from "../AntTooltip.vue";
-import AntFormGroup from "../form/AntFormGroup.vue";
-import AntFormGroupLabel from "../form/AntFormGroupLabel.vue";
+import AntFormGroup from "../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
 import { Position } from "../../enums/Position.enum.mjs";
-import { InputColorType } from "../../enums/index.mjs";
+import { InputState } from "../../enums/index.mjs";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 const meta = {
   title: "Components/Tooltip",
@@ -15,9 +15,9 @@ const meta = {
       control: { type: "select" },
       options: Object.values(Position)
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };
@@ -108,7 +108,7 @@ export const Summary = {
       AntFormGroupLabel
     },
     setup() {
-      return { args, Position, InputColorType };
+      return { args, Position, InputState };
     },
     template: `
 			<AntFormGroup>
@@ -141,31 +141,31 @@ export const Summary = {
 
 				<AntFormGroupLabel>Color type</AntFormGroupLabel>
 				<AntFormGroup direction="row" class="pb-16 dashed">
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.base">
+					<AntTooltip :position="Position.bottom" :state="InputState.base">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.info">
+					<AntTooltip :position="Position.bottom" :state="InputState.info">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.success">
+					<AntTooltip :position="Position.bottom" :state="InputState.success">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.warning">
+					<AntTooltip :position="Position.bottom" :state="InputState.warning">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.danger">
+					<AntTooltip :position="Position.bottom" :state="InputState.danger">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>

package/dist/runtime/components/__types/AntIcon.types.d.ts

@@ -1,6 +1,8 @@
 export declare enum IconSize {
-    xs = "xs",
-    sm = "sm",
+    xl3 = "3xl",
+    lg = "lg",
     md = "md",
-    xl3 = "3xl"
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
 }

package/dist/runtime/components/__types/AntIcon.types.mjs

@@ -1,7 +1,9 @@
 export var IconSize = /* @__PURE__ */ ((IconSize2) => {
-  IconSize2["xs"] = "xs";
-  IconSize2["sm"] = "sm";
-  IconSize2["md"] = "md";
   IconSize2["xl3"] = "3xl";
+  IconSize2["lg"] = "lg";
+  IconSize2["md"] = "md";
+  IconSize2["sm"] = "sm";
+  IconSize2["xs"] = "xs";
+  IconSize2["xs2"] = "2xs";
   return IconSize2;
 })(IconSize || {});

package/dist/runtime/components/__types/AntKeycap.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum AntKeycapSize {
+    sm = "sm",
+    xs = "xs"
+}

package/dist/runtime/components/__types/AntKeycap.types.mjs

@@ -0,0 +1,5 @@
+export var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["sm"] = "sm";
+  AntKeycapSize2["xs"] = "xs";
+  return AntKeycapSize2;
+})(AntKeycapSize || {});

package/dist/runtime/components/__types/AntListGroupItem.types.d.ts

@@ -0,0 +1,9 @@
+export declare enum ListGroupItemState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}

package/dist/runtime/components/__types/AntListGroupItem.types.mjs

@@ -0,0 +1,10 @@
+export var ListGroupItemState = /* @__PURE__ */ ((ListGroupItemState2) => {
+  ListGroupItemState2["base"] = "base";
+  ListGroupItemState2["primary"] = "primary";
+  ListGroupItemState2["secondary"] = "secondary";
+  ListGroupItemState2["info"] = "info";
+  ListGroupItemState2["success"] = "success";
+  ListGroupItemState2["warning"] = "warning";
+  ListGroupItemState2["danger"] = "danger";
+  return ListGroupItemState2;
+})(ListGroupItemState || {});

package/dist/runtime/components/__types/AntSpinner.types.d.ts

@@ -0,0 +1,10 @@
+export declare enum AntSpinnerSize {
+    xl4 = "4xl",
+    xl3 = "3xl",
+    xl2 = "2xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
+}

package/dist/runtime/components/__types/AntSpinner.types.mjs

@@ -0,0 +1,11 @@
+export var AntSpinnerSize = /* @__PURE__ */ ((AntSpinnerSize2) => {
+  AntSpinnerSize2["xl4"] = "4xl";
+  AntSpinnerSize2["xl3"] = "3xl";
+  AntSpinnerSize2["xl2"] = "2xl";
+  AntSpinnerSize2["lg"] = "lg";
+  AntSpinnerSize2["md"] = "md";
+  AntSpinnerSize2["sm"] = "sm";
+  AntSpinnerSize2["xs"] = "xs";
+  AntSpinnerSize2["xs2"] = "2xs";
+  return AntSpinnerSize2;
+})(AntSpinnerSize || {});

package/dist/runtime/components/__types/AntTag.types.d.ts

@@ -0,0 +1,17 @@
+export declare enum TagState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}
+export declare enum AntTagSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs",
+    xs3 = "3xs"
+}

package/dist/runtime/components/__types/AntTag.types.mjs

@@ -0,0 +1,19 @@
+export var TagState = /* @__PURE__ */ ((TagState2) => {
+  TagState2["base"] = "base";
+  TagState2["primary"] = "primary";
+  TagState2["secondary"] = "secondary";
+  TagState2["info"] = "info";
+  TagState2["success"] = "success";
+  TagState2["warning"] = "warning";
+  TagState2["danger"] = "danger";
+  return TagState2;
+})(TagState || {});
+export var AntTagSize = /* @__PURE__ */ ((AntTagSize2) => {
+  AntTagSize2["lg"] = "lg";
+  AntTagSize2["md"] = "md";
+  AntTagSize2["sm"] = "sm";
+  AntTagSize2["xs"] = "xs";
+  AntTagSize2["xs2"] = "2xs";
+  AntTagSize2["xs3"] = "3xs";
+  return AntTagSize2;
+})(AntTagSize || {});

package/dist/runtime/components/__types/AntToaster.types.d.ts

@@ -1,8 +1,8 @@
-import { InputColorType } from '../../enums';
+import { InputState } from '../../enums';
 export type Toast = {
     id?: string;
     title: string;
     content?: string;
-    type: InputColorType;
+    type: InputState;
     hasIcon?: boolean;
 };

package/dist/runtime/components/__types/index.d.ts

@@ -1,2 +1,7 @@
-export * from './Accordion.types';
+export * from './AntAccordion.types';
 export * from './AntIcon.types';
+export * from './AntKeycap.types';
+export * from './AntListGroupItem.types';
+export * from './AntSpinner.types';
+export * from './AntTag.types';
+export * from './AntToaster.types';

package/dist/runtime/components/__types/index.mjs

@@ -1,2 +1,7 @@
-export * from "./Accordion.types.mjs";
+export * from "./AntAccordion.types.mjs";
 export * from "./AntIcon.types.mjs";
+export * from "./AntKeycap.types.mjs";
+export * from "./AntListGroupItem.types.mjs";
+export * from "./AntSpinner.types.mjs";
+export * from "./AntTag.types.mjs";
+export * from "./AntToaster.types.mjs";

package/dist/runtime/components/buttons/AntActionButton.vue

@@ -3,7 +3,7 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Position, ColorType, InputColorType, Size, Grouped} from '../../enums';
+import {Position, State, InputState, Size, Grouped} from '../../enums';
 import AntButton from './AntButton.vue';
 import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {computed, useSlots} from 'vue';
@@ -17,20 +17,20 @@ const props = withDefaults(
 		size?: Size;
 		disabled?: boolean;
 		grouped?: Grouped;
-		colorType?: ColorType;
+		state?: State;
 		skeleton?: boolean;
 		expanded?: boolean;
 		filled?: boolean;
 		hasPermission?: boolean;
 		tooltipPosition?: Position;
-		tooltipColorType?: InputColorType;
+		tooltipState?: InputState;
 		tooltipDelay?: number;
 	}>(), {
-		colorType: ColorType.primary,
+		state: State.primary,
 		hasPermission: true,
 		filled: true
 	}
-)
+);
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
 const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
@@ -45,10 +45,10 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="colorType"
+    :state="state"
     :filled="filled"
     :tooltip-position="tooltipPosition"
-    :tooltip-color-type="hasPermissionTooltip ? InputColorType.info : tooltipColorType"
+    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
     data-e2e="action-button"
     @click="$emit('click')"

package/dist/runtime/components/buttons/AntButton.vue

@@ -7,7 +7,7 @@ import AntSpinner from '../AntSpinner.vue';
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {handleEnumValidation} from '../../handler';
-import {ColorType, InputColorType, Position} from '../../enums';
+import {State, InputState, Position} from '../../enums';
 import {ButtonType} from './__types';
 import AntIcon from '../AntIcon.vue';
 import AntTooltip from '../AntTooltip.vue';
@@ -18,7 +18,7 @@ defineEmits(['click', 'blur']);
 const props = withDefaults(defineProps<{
 	filled?: boolean;
 	size?: Size;
-	colorType?: ColorType;
+	state?: State;
 	iconLeft?: IconDefinition;
 	iconRight?: IconDefinition;
 	to?: RouteLocationRaw;
@@ -32,10 +32,10 @@ const props = withDefaults(defineProps<{
 	outlined?: boolean;
 	noFocus?: boolean;
 	tooltipPosition?: Position;
-	tooltipColorType?: InputColorType;
+	tooltipState?: InputState;
 	tooltipDelay?: number;
 }>(), {
-	colorType: ColorType.base,
+	state: State.base,
 	disabled: false,
 	filled: false,
 	skeleton: false,
@@ -48,11 +48,11 @@ const props = withDefaults(defineProps<{
 	outlined: true,
 	noFocus: false,
 	tooltipPosition: Position.bottom,
-	tooltipColorType: InputColorType.base,
+	tooltipState: InputState.base,
 	tooltipDelay: 800
 });
 
-const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const groupedClassList = computed(() => ({
 	'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
 	'rounded-none -mx-px': props.grouped === Grouped.center,
@@ -61,93 +61,96 @@ const groupedClassList = computed(() => ({
 }));
 const classes = computed(() => {
 	const variants = {
-		[ColorType.base]: 'ring-primary-200 outline-neutral-300',
-		[ColorType.danger]: 'ring-danger-200 outline-danger-500',
-		[ColorType.info]: 'ring-info-200 outline-info-500',
-		[ColorType.primary]: 'ring-primary-200 outline-primary-500',
-		[ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
-		[ColorType.success]: 'ring-success-200 outline-success-500',
-		[ColorType.warning]: 'ring-warning-200 outline-warning-500',
+		[State.base]: 'ring-primary-200 outline-neutral-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',
+		[State.secondary]: 'ring-secondary-200 outline-secondary-500',
+		[State.success]: 'ring-success-200 outline-success-500',
+		[State.warning]: 'ring-warning-200 outline-warning-500',
 	};
 	const notFilledVariants = {
-		[ColorType.base]: 'bg-white text-for-white-bg-font',
-		[ColorType.danger]: 'bg-white text-danger-500',
-		[ColorType.info]: 'bg-white text-info-500',
-		[ColorType.primary]: 'bg-white text-primary-500',
-		[ColorType.secondary]: 'bg-white text-secondary-500',
-		[ColorType.success]: 'bg-white text-success-500',
-		[ColorType.warning]: 'bg-white text-warning-500',
+		[State.base]: 'bg-white text-for-white-bg-font',
+		[State.danger]: 'bg-white text-danger-500',
+		[State.info]: 'bg-white text-info-500',
+		[State.primary]: 'bg-white text-primary-500',
+		[State.secondary]: 'bg-white text-secondary-500',
+		[State.success]: 'bg-white text-success-500',
+		[State.warning]: 'bg-white text-warning-500',
 	};
 	const notFilledHoverVariants = {
-		[ColorType.base]: 'hover:bg-neutral-100',
-		[ColorType.danger]: 'hover:bg-danger-100',
-		[ColorType.info]: 'hover:bg-info-100',
-		[ColorType.primary]: 'hover:bg-primary-100',
-		[ColorType.secondary]: 'hover:bg-secondary-100',
-		[ColorType.success]: 'hover:bg-success-100',
-		[ColorType.warning]: 'hover:bg-warning-100',
+		[State.base]: 'hover:bg-neutral-100',
+		[State.danger]: 'hover:bg-danger-100',
+		[State.info]: 'hover:bg-info-100',
+		[State.primary]: 'hover:bg-primary-100',
+		[State.secondary]: 'hover:bg-secondary-100',
+		[State.success]: 'hover:bg-success-100',
+		[State.warning]: 'hover:bg-warning-100',
 	};
 	const filledVariants = {
-		[ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
-		[ColorType.danger]: 'bg-danger-500 text-danger-500-font',
-		[ColorType.info]: 'bg-info-500 text-info-500-font',
-		[ColorType.primary]: 'bg-primary-500 text-primary-500-font',
-		[ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
-		[ColorType.success]: 'bg-success-500 text-success-500-font',
-		[ColorType.warning]: 'bg-warning-500 text-warning-500-font',
+		[State.base]: 'bg-neutral-50 text-neutral-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',
+		[State.secondary]: 'bg-secondary-500 text-secondary-500-font',
+		[State.success]: 'bg-success-500 text-success-500-font',
+		[State.warning]: 'bg-warning-500 text-warning-500-font',
 	};
 	const filledHoverVariants = {
-		[ColorType.base]: 'hover:bg-neutral-200',
-		[ColorType.danger]: 'hover:bg-danger-600',
-		[ColorType.info]: 'hover:bg-info-600',
-		[ColorType.primary]: 'hover:bg-primary-600',
-		[ColorType.secondary]: 'hover:bg-secondary-600',
-		[ColorType.success]: 'hover:bg-success-600',
-		[ColorType.warning]: 'hover:bg-warning-600',
+		[State.base]: 'hover:bg-neutral-200',
+		[State.danger]: 'hover:bg-danger-600',
+		[State.info]: 'hover:bg-info-600',
+		[State.primary]: 'hover:bg-primary-600',
+		[State.secondary]: 'hover:bg-secondary-600',
+		[State.success]: 'hover:bg-success-600',
+		[State.warning]: 'hover:bg-warning-600',
 	};
 
 	return {
 		'transition-all inline-flex items-center justify-center relative font-medium': true,
 		'focus:z-10': true,
-		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
-		'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
-		'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
+		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
+		'p-1 text-xs gap-1': props.size === Size.xs2,
+		'p-1.5 text-xs gap-1.5': props.size === Size.xs,
+		'p-1.5 text-sm gap-1.5': props.size === Size.sm,
+		'p-2 text-sm gap-2': props.size === Size.md,
+		'p-2.5 text-sm gap-2.5': props.size === Size.lg,
 		'disabled:opacity-50 disabled:cursor-not-allowed': true,
 		'cursor-default': props.readonly,
-		'focus:ring-2': !props.readonly && props.size === Size.sm,
-		'focus:ring-4': !props.readonly && props.size === Size.md,
+		'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
+		'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
 		'w-full': props.expanded,
 		'invisible': props.skeleton,
 		'outline outline-1 outline-offset-[-1px]': props.outlined,
 		...groupedClassList.value,
-		[variants[props.colorType]]: true,
-		[notFilledVariants[props.colorType]]: !props.filled,
-		[notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
-		[filledVariants[props.colorType]]: props.filled,
-		[filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
+		[variants[props.state]]: true,
+		[notFilledVariants[props.state]]: !props.filled,
+		[notFilledHoverVariants[props.state]]: !props.filled && !hasInputState.value,
+		[filledVariants[props.state]]: props.filled,
+		[filledHoverVariants[props.state]]: props.filled && !hasInputState.value,
 	};
 });
 const iconColor = computed(() => {
 	const notFilledVariants = {
-		[ColorType.base]: 'text-for-white-bg-font',
-		[ColorType.danger]: 'text-danger-500',
-		[ColorType.info]: 'text-info-500',
-		[ColorType.primary]: 'text-primary-500',
-		[ColorType.secondary]: 'text-secondary-500',
-		[ColorType.success]: 'text-success-500',
-		[ColorType.warning]: 'text-warning-500',
+		[State.base]: 'text-for-white-bg-font',
+		[State.danger]: 'text-danger-500',
+		[State.info]: 'text-info-500',
+		[State.primary]: 'text-primary-500',
+		[State.secondary]: 'text-secondary-500',
+		[State.success]: 'text-success-500',
+		[State.warning]: 'text-warning-500',
 	};
 	const filledVariants = {
-		[ColorType.base]: 'text-for-white-bg-font',
-		[ColorType.danger]: 'text-danger-500-font',
-		[ColorType.info]: 'text-info-500-font',
-		[ColorType.primary]: 'text-primary-500-font',
-		[ColorType.secondary]: 'text-secondary-500-font',
-		[ColorType.success]: 'text-success-500-font',
-		[ColorType.warning]: 'text-warning-500-font',
+		[State.base]: 'text-for-white-bg-font',
+		[State.danger]: 'text-danger-500-font',
+		[State.info]: 'text-info-500-font',
+		[State.primary]: 'text-primary-500-font',
+		[State.secondary]: 'text-secondary-500-font',
+		[State.success]: 'text-success-500-font',
+		[State.warning]: 'text-warning-500-font',
 	};
 
-	return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+	return props.filled ? filledVariants[props.state] : notFilledVariants[props.state];
 });
 const type = computed(() => {
 	if (props.to !== undefined) {
@@ -161,12 +164,19 @@ const is = computed(() => {
 		return 'div';
 	}
 
-	return props.to !== undefined ? 'router-link' : 'button'
-})
+	return props.to !== undefined ? 'router-link' : 'button';
+});
+const getIconSize = computed(() => {
+	if (props.size === Size.xs || props.size === Size.xs2) {
+		return IconSize.xs;
+	} else {
+		return IconSize.sm;
+	}
+});
 
 onMounted(() => {
 	handleEnumValidation(props.size, Size, 'size');
-	handleEnumValidation(props.colorType, ColorType, 'colorType');
+	handleEnumValidation(props.state, State, 'state');
 	handleEnumValidation(props.grouped, Grouped, 'grouped');
 });
 </script>
@@ -176,7 +186,7 @@ onMounted(() => {
     class="relative inline-flex h-fit"
     :class="{'w-full': props.expanded}"
     data-e2e="button"
-    :data-e2e-color-type="props.colorType"
+    :data-e2e-state="props.state"
   >
     <AntSkeleton
       v-if="skeleton"
@@ -188,7 +198,7 @@ onMounted(() => {
     <AntTooltip
       :expanded="expanded"
       :position="tooltipPosition"
-      :color-type="tooltipColorType"
+      :state="tooltipState"
       :delay="tooltipDelay"
     >
       <template #default>
@@ -198,14 +208,14 @@ onMounted(() => {
           :type="type"
           :to="to"
           :disabled="disabled || undefined"
-          :tabindex="noFocus || hasAction ? '-1' : '0'"
+          :tabindex="noFocus || hasInputState ? '-1' : '0'"
           @click="() => !props.readonly ? $emit('click') : null"
           @blur="() => !props.readonly ? $emit('blur') : null"
         >
           <AntSpinner
             v-if="spinner"
             :size="size"
-            :color-type="colorType"
+            :state="state"
             :inverted="!filled"
           />
 
@@ -216,7 +226,7 @@ onMounted(() => {
             <AntIcon
               v-if="iconLeft"
               :icon="iconLeft"
-              :size="size as unknown as IconSize"
+              :size="getIconSize"
               :color="iconColor"
             />
           </slot>
@@ -232,7 +242,7 @@ onMounted(() => {
             <AntIcon
               v-if="iconRight"
               :icon="iconRight"
-              :size="size as unknown as IconSize"
+              :size="getIconSize"
               :color="iconColor"
             />
           </slot>

package/dist/runtime/components/buttons/AntCreateButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.primary"
+    :state="State.primary"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faPlus : undefined"

package/dist/runtime/components/buttons/AntDeleteButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faTrash} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.danger"
+    :state="State.danger"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faTrash : undefined"

package/dist/runtime/components/buttons/AntDuplicateButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faCopy} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.base"
+    :state="State.base"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faCopy : undefined"

package/dist/runtime/components/buttons/AntEditButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faPencil} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.base"
+    :state="State.base"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faPencil : undefined"

package/dist/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.primary"
+    :state="State.primary"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faFloppyDisk : undefined"