@antify/ui-module 1.7.2 → 1.7.3

package/dist/runtime/components/inputs/AntTagInput.vue

@@ -25,6 +25,7 @@ const props = withDefaults(
     size?: AntTagInputSize;
     state?: InputState;
     disabled?: boolean;
+    readonly?: boolean;
     skeleton?: boolean;
     name?: string;
     expanded?: boolean;
@@ -46,6 +47,9 @@ const props = withDefaults(
     allowCreate: false,
     allowDuplicates: false,
     openOnFocus: true,
+    readonly: false,
+    disabled: false,
+    skeleton: false,
     autoCloseAfterSelection: false,
     placeholder: 'Add new tag'
   }
@@ -54,13 +58,14 @@ const props = withDefaults(
 const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
 const _skeleton = useVModel(props, 'skeleton', emit);
 const dropDownOpen = ref(false);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const focusedDropDownItem: Ref<string | number | null> = ref(null);
 const tagInput = ref('');
 const filteredOptions = ref(props.options);
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus-within:outline-primary-500 focus-within:ring-primary-200 bg-white',
+    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-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',
@@ -73,16 +78,18 @@ const inputContainerClasses = computed(() => {
     'outline-offset-[-1px] outline-1 focus-within:outline-offset-[-1px] focus-within:outline-1': true,
     'opacity-50 cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
-    // Size
-    'focus-within:ring-2 p-1.5 text-sm': props.size === AntTagInputSize.sm,
-    'focus-within:ring-4 p-2 text-sm': props.size === AntTagInputSize.md,
-    'focus-within:ring-4 p-2.5 text-sm': props.size === AntTagInputSize.lg,
+    // AntTagInputSize
+    'p-1.5 text-sm': props.size === AntTagInputSize.sm,
+    'p-2 text-sm': props.size === AntTagInputSize.md,
+    'p-2.5 text-sm': props.size === AntTagInputSize.lg,
+    'focus-within:ring-2': !hasInputState.value && props.size === AntTagInputSize.sm,
+    'focus-within:ring-4': !hasInputState.value && (props.size === AntTagInputSize.lg || props.size === AntTagInputSize.md),
     // Grouping
     'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
     'rounded-none': props.grouped === Grouped.center,
     'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
     'rounded-md': props.grouped === Grouped.none,
-    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0),
+    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0) && !props.readonly,
     'invisible': props.skeleton,
   };
 });
@@ -178,7 +185,7 @@ function removeLastTag() {
 }
 
 function removeTag(tag: string | number) {
-  if (_modelValue.value && !props.disabled && !props.skeleton) {
+  if (_modelValue.value && !props.disabled && !props.skeleton && !props.readonly) {
     _modelValue.value.splice(_modelValue.value.findIndex((_value) => _value === tag), 1);
 
     filterDropDown();
@@ -246,7 +253,7 @@ onMounted(() => {
 <template>
   <AntField
     :label="label"
-    :size="Size.sm"
+    :size="size as unknown as Size"
     :skeleton="_skeleton"
     :description="description"
     :state="state"
@@ -276,7 +283,7 @@ onMounted(() => {
             :key="`tag-input-tag-${index}`"
             :size="AntTagSize.xs3"
             :state="state as unknown as TagState"
-            :dismiss="true"
+            :dismiss="!readonly"
             @close="removeTag(tag)"
           >
             {{ options.find((option: SelectOption) => option.value === tag)?.label }}
@@ -297,6 +304,7 @@ onMounted(() => {
             :placeholder="placeholder"
             :class="inputClasses"
             :disabled="disabled"
+            :readonly="readonly"
             @focus="changeFocus"
             @input="filterDropDown"
             @keydown.delete="removeLastTag"
@@ -307,7 +315,7 @@ onMounted(() => {
       </div>
 
       <AntDropDown
-        v-if="filteredOptions && !disabled"
+        v-if="filteredOptions && !disabled && !readonly"
         ref="dropDownRef"
         v-model:focused="focusedDropDownItem"
         v-model:open="dropDownOpen"

package/dist/runtime/components/inputs/AntTextInput.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   type?: TextInputType;
   limiter?: boolean;
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   type: TextInputType.text,
@@ -63,6 +65,7 @@ onMounted(() => {
       :size="size"
       :skeleton="skeleton"
       :disabled="disabled"
+      :readonly="readonly"
       :placeholder="placeholder !== undefined ? placeholder : label"
       :show-icon="true"
       v-bind="$attrs"

package/dist/runtime/components/inputs/AntTextarea.vue

@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   grouped?: Grouped;
   wrapperClass?: string | Record<string, boolean>;
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   size: Size.md,
   skeleton: false,
   grouped: Grouped.none,
@@ -46,6 +48,7 @@ const props = withDefaults(defineProps<{
   messages: () => []
 });
 const _modelValue = useVModel(props, 'modelValue', emit);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
   [InputState.info]: faCircleInfo,
   [InputState.warning]: faExclamationTriangle,
@@ -69,11 +72,13 @@ const inputClasses = computed(() => {
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
     // Size
-    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
-    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 text-sm': props.size === Size.md,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     // Icon right
     'pr-6': props.size === Size.xs2 && props.showIcon && icon.value,
     'pr-7': props.size === Size.xs && props.showIcon && icon.value,
@@ -158,6 +163,7 @@ function onBlur(e: FocusEvent) {
         :class="inputClasses"
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
+        :readonly="readonly"
         v-bind="$attrs"
         @blur="onBlur"
       />

package/dist/runtime/components/inputs/AntUnitInput.vue

@@ -25,12 +25,14 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   wrapperClass?: string | Record<string, boolean>;
   messages?: string[];
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   limiter: false,
@@ -70,6 +72,7 @@ onMounted(() => {
         :max="max"
         :skeleton="skeleton"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder || label"
         :show-icon="false"
         v-bind="$attrs"

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

@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   placeholder?: string;
   skeleton?: boolean;
   type?: BaseInputType;
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   size: Size.md,
   skeleton: false,
   type: BaseInputType.text,
@@ -48,6 +50,7 @@ const props = withDefaults(defineProps<{
   inputRef: null
 });
 const slot = useSlots();
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
   [InputState.info]: faCircleInfo,
   [InputState.warning]: faExclamationTriangle,
@@ -71,11 +74,14 @@ const inputClasses = computed(() => {
     'text-right': props.type === BaseInputType.number,
     [variants[props.state]]: true,
     // Size
-    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
-    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 text-sm': props.size === Size.md,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+
     // Icon left
     'pl-6': props.size === Size.xs2 && props.iconLeft,
     'pl-7': props.size === Size.sm && props.iconLeft || props.size === Size.xs && props.iconLeft,
@@ -197,7 +203,14 @@ function onClickClearIcon() {
     <div
       v-if="iconLeft"
       class="absolute h-full flex items-center justify-center z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+      :class="{
+        'w-6': size === Size.xs2,
+        'w-7': size === Size.sm,
+        'w-8': size === Size.xs,
+        'w-9': size === Size.md,
+        'w-10': size === Size.lg,
+        'opacity-50': disabled,
+      }"
     >
       <AntIcon
         :icon="iconLeft"
@@ -213,6 +226,8 @@ function onClickClearIcon() {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled || skeleton"
+      :readonly="readonly"
+      :tabindex="hasInputState ? -1 : 0"
       v-bind="$attrs"
       @blur="onBlur"
     >
@@ -220,7 +235,7 @@ function onClickClearIcon() {
     <div
       v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
       class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs2, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
     >
       <slot name="icon-right">
         <AntIcon

package/dist/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -17,11 +17,8 @@ const props = withDefaults(defineProps<{
 
 const fontClasses = computed(() => ({
   'relative font-medium w-fit text-for-white-bg-font': true,
-  'text-2xs': props.size === Size.xs2,
-  'text-xs': props.size === Size.xs,
-  'text-sm': props.size === Size.sm,
-  'text-md': props.size === Size.md,
-  'text-lg': props.size === Size.lg
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
 }));
 const gapSize = computed(() => ({
   'gap-2.5': props.size === Size.lg,

package/dist/runtime/components/inputs/__stories/AntCheckbox.stories.mjs

@@ -1,8 +1,7 @@
 import AntCheckbox from "../AntCheckbox.vue";
 import { computed, ref } from "vue";
-import { InputState } from "../../../enums/index.mjs";
+import { InputState, Size } from "../../../enums/index.mjs";
 import { useFieldValidator } from "@antify/validate";
-import { AntCheckboxSize } from "../__types/AntCheckbox.types.mjs";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
@@ -16,7 +15,7 @@ const meta = {
     },
     size: {
       control: { type: "select" },
-      options: Object.values(AntCheckboxSize)
+      options: Object.values(Size)
     }
   }
 };
@@ -91,7 +90,7 @@ export const Summary = {
         offValue,
         onValue,
         InputState,
-        AntCheckboxSize
+        Size
       };
     },
     template: `
@@ -189,28 +188,70 @@ export const Summary = {
           <AntCheckbox
             v-model="offValue"
             class="w-28"
-            :size="AntCheckboxSize.md"
+            :size="Size.lg"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           />
           <AntCheckbox
             v-model="onValue"
             class="w-28"
-            :size="AntCheckboxSize.md"
+            :size="Size.lg"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           />
           <AntCheckbox
             v-model="offValue"
             class="w-28"
-            :size="AntCheckboxSize.sm"
+            :size="Size.md"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           />
           <AntCheckbox
             v-model="onValue"
             class="w-28"
-            :size="AntCheckboxSize.sm"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.xs2"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.xs"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           />

package/dist/runtime/components/inputs/__stories/AntCheckboxGroup.stories.mjs

@@ -1,9 +1,8 @@
 import AntCheckboxGroup from "../AntCheckboxGroup.vue";
 import { reactive } from "vue";
-import { InputState } from "../../../enums/index.mjs";
+import { InputState, Size } from "../../../enums/index.mjs";
 import { Direction } from "../../../enums/Direction.enum.mjs";
 import { useFieldValidator } from "@antify/validate";
-import { AntCheckboxSize } from "../__types/AntCheckbox.types.mjs";
 const meta = {
   title: "Inputs/Checkbox Group",
   component: AntCheckboxGroup,
@@ -21,7 +20,7 @@ const meta = {
     },
     size: {
       control: { type: "select" },
-      options: Object.values(AntCheckboxSize)
+      options: Object.values(Size)
     },
     direction: {
       control: { type: "select" },

package/dist/runtime/components/inputs/__stories/AntNumberInput.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Docs: Story;
 export declare const withValidator: Story;
 export declare const Limited: Story;
 export declare const WithIndicators: Story;
+export declare const Summary: Story;

package/dist/runtime/components/inputs/__stories/AntNumberInput.stories.mjs

@@ -2,8 +2,11 @@ import { Size } from "../../../enums/Size.enum.mjs";
 import AntNumberInput from "../AntNumberInput.vue";
 import { InputState } from "../../../enums/State.enum.mjs";
 import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
+  components: { AntFormGroupLabel, AntFormGroup },
   title: "Inputs/Number Input",
   component: AntNumberInput,
   parameters: { controls: { sort: "requiredFirst" } },
@@ -104,3 +107,140 @@ export const WithIndicators = {
     indicators: true
   }
 };
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntNumberInput, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const value = ref(100.5);
+      return { args, value, InputState, Size };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" placeholder="Placeholder"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" placeholder="Placeholder"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    modelValue: null
+  }
+};

package/dist/runtime/components/inputs/__stories/AntRadioGroup.stories.mjs

@@ -1,7 +1,6 @@
 import { ref } from "vue";
 import AntRadioGroup from "../AntRadioGroup.vue";
-import { InputState } from "../../../enums/index.mjs";
-import { AntRadioSize } from "../__types/AntRadio.types.mjs";
+import { InputState, Size } from "../../../enums/index.mjs";
 import { useFieldValidator } from "@antify/validate";
 import { Direction } from "../../../enums/Direction.enum.mjs";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
@@ -51,7 +50,7 @@ const meta = {
     },
     size: {
       control: { type: "select" },
-      options: Object.values(AntRadioSize)
+      options: Object.values(Size)
     }
   }
 };
@@ -140,11 +139,14 @@ export const WithValidator = {
   }
 };
 export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntRadioGroup, AntFormGroupLabel, AntFormGroup },
     setup() {
       const value = ref("radio-3");
-      return { args, value, InputState, AntRadioSize };
+      return { args, value, InputState, Size };
     },
     template: `
       <AntFormGroup>
@@ -193,9 +195,15 @@ export const summary = {
 
         <AntFormGroupLabel>Size</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntRadioGroup v-bind="args" v-model="value" :size="AntRadioSize.md" label="Label"
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label"
                          description="Lorem ipsum dolor sit amet"/>
-          <AntRadioGroup v-bind="args" v-model="value" :size="AntRadioSize.sm" label="Label"
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label"
                          description="Lorem ipsum dolor sit amet"/>
         </AntFormGroup>
 

package/dist/runtime/components/inputs/__types/AntCheckbox.types.d.ts

@@ -4,7 +4,3 @@ export type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-export declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}

package/dist/runtime/components/inputs/__types/AntCheckbox.types.mjs

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

package/dist/runtime/components/inputs/__types/AntRadio.types.d.ts

@@ -1,8 +1,4 @@
 import { InputState } from '../../../enums';
-export declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 export type AntRadioTypes = {
     value: string;
     label?: string;

package/dist/runtime/components/inputs/__types/AntRadio.types.mjs

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