@antify/ui-module 1.5.1 → 1.7.1

package/dist/runtime/components/AntTag.vue

@@ -1,47 +1,79 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../enums/Size.enum'
-import {TagColorType} from '../types/AntTag.type';
 import {handleEnumValidation} from '../handler';
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
+import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {AntTagSize, TagState} from './__types/AntTag.types';
+import AntIcon from './AntIcon.vue';
+import {IconSize} from './__types/AntIcon.types';
 
 defineEmits(['close']);
 const props = withDefaults(defineProps<{
-  colorType?: TagColorType,
-  size?: Size;
+  state?: TagState,
+  size?: AntTagSize;
   iconLeft?: IconDefinition;
   dismiss?: boolean
 }>(), {
-  size: Size.md,
-  colorType: TagColorType.base,
+  size: AntTagSize.md,
+  state: TagState.base,
   dismiss: false
 });
 
 const classes = computed(() => {
-  const variants: Record<TagColorType, string> = {
-    [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [TagColorType.info]: 'bg-info-500 text-info-500-font',
-    [TagColorType.base]: 'bg-neutral-300 text-neutral-300-font',
-    [TagColorType.success]: 'bg-success-500 text-success-500-font',
-    [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  const variants: Record<TagState, string> = {
+    [TagState.danger]: 'bg-danger-500 text-danger-500-font',
+    [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.success]: 'bg-success-500 text-success-500-font',
+    [TagState.warning]: 'bg-warning-500 text-warning-500-font',
   };
-
   return {
     'rounded-md inline-flex items-center': true,
-    'px-1.5 py-1 text-sm gap-1.5': props.size === Size.md,
-    'px-1 py-0.5 text-xs  gap-1': props.size === Size.sm,
-    [variants[props.colorType]]: true,
+    'px-1 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
+    'px-1.5 py-1 text-xs gap-1': props.size === AntTagSize.xs2,
+    'px-2 py-1.5 text-xs gap-1.5': props.size === AntTagSize.xs,
+    'px-2 py-1.5 text-sm gap-1.5': props.size === AntTagSize.sm,
+    'px-2.5 py-2 text-sm gap-2': props.size === AntTagSize.md,
+    'px-3 py-2.5 text-sm gap-2.5': props.size === AntTagSize.lg,
+    [variants[props.state]]: true,
+  };
+});
+const getIconSize = computed(() => {
+  if (props.size === AntTagSize.xs || props.size === AntTagSize.xs2 || props.size === AntTagSize.xs3) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+const iconState = computed(() => {
+  switch (props.state) {
+    case TagState.info:
+      return 'text-info-500-font';
+    case TagState.success:
+      return 'text-success-500-font';
+    case TagState.warning:
+      return 'text-warning-500-font';
+    case TagState.danger:
+      return 'text-danger-500-font';
+    case TagState.primary:
+      return 'text-primary-500-font';
+    case TagState.secondary:
+      return 'text-secondary-500-font';
+    default:
+      return 'text-neutral-300-font';
+  }
+});
+const iconWrapperClass = computed(() => {
+  return {
+    'w-4 h-4': props.size === AntTagSize.xs2 || props.size === AntTagSize.xs,
+    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg
   };
 });
-const iconClasses = computed(() => ({
-  'h-3': props.size === Size.sm,
-  'h-4': props.size === Size.md,
-}));
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, TagColorType, 'colorType');
+  handleEnumValidation(props.size, AntTagSize, 'size');
+  handleEnumValidation(props.state, TagState, 'state');
 });
 </script>
 
@@ -51,28 +83,31 @@ onMounted(() => {
     data-e2e="tag"
   >
     <span
-        v-if="iconLeft"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="iconLeft"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="iconLeft"
-          :class="iconClasses"
-      />
+      <AntIcon
+        :icon="iconLeft"
+        :size="getIconSize"
+        :color="iconState"
+      >
+      </anticon>
     </span>
 
-    <slot/>
+    <slot />
 
     <span
-        v-if="dismiss"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="dismiss"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="faCircleXmark"
-          :class="iconClasses"
-          class="cursor-pointer"
-          @click="() => $emit('close')"
+      <AntIcon
+        :icon="faCircleXmark"
+        :size="getIconSize"
+        :color="iconState"
+        class="cursor-pointer"
+        @click="() => $emit('close')"
       />
     </span>
   </span>

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,20 +1,20 @@
 <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
+	state?: InputState
 	expanded?: boolean
 	delay?: number
 }>(), {
 	position: Position.left,
 	tooltipClasses: '',
-	colorType: InputColorType.base,
+	state: InputState.base,
 	expanded: false,
 	delay: 800
 });
@@ -43,45 +43,45 @@ const itemContainerClasses = computed(() => ({
 	'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',
+	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.colorType]]: true};
+	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',
+	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.colorType]]: true};
+	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',
+	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.colorType]]: true};
+	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() {
@@ -89,21 +89,21 @@ function onMouseOver() {
 		return;
 	}
 
-	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number
+	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 +172,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.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntAlert>;
 export default meta;
 type Story = StoryObj<typeof AntAlert>;
 export declare const Docs: Story;
+export declare const WithOutTitle: Story;
 export declare const WithContent: Story;
 export declare const WithoutContent: Story;
 export declare const WithQuestionIcon: Story;

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)
     }
   }
 };
@@ -22,21 +22,27 @@ export const Docs = {
       return { args, logClick };
     },
     template: `
-      <div class="p-4">
-        <AntAlert v-bind="args" @close="logClick">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
-          sed diam nonumy eirmod tempor invidunt <br/>
-          ut labore et dolore magna aliquyam erat, <br/>
-          sed diam voluptua. At vero eos et accusam et <br/>
-          justo duo dolores et ea rebum. Stet clita kasd
-        </AntAlert>
-      </div>
+			<AntAlert v-bind="args" @close="logClick">
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+				sed diam nonumy eirmod tempor invidunt <br/>
+				ut labore et dolore magna aliquyam erat, <br/>
+				sed diam voluptua. At vero eos et accusam et <br/>
+				justo duo dolores et ea rebum. Stet clita kasd
+			</AntAlert>
     `
   }),
   args: {
     title: "Lorem ipsum dolor"
   }
 };
+export const WithOutTitle = {
+  render: Docs.render,
+  args: {
+    title: "",
+    dismissBtn: false,
+    icon: false
+  }
+};
 export const WithContent = {
   render: Docs.render,
   args: {

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/AntContent.stories.d.ts

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