@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/dist/runtime/components/Chip.vue.d.ts

@@ -1,5 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/chip';
+import type { IconComponent } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Chip = ComponentConfig<typeof theme, AppConfig, 'chip'>;
 export interface ChipProps {
@@ -10,10 +11,21 @@ export interface ChipProps {
     as?: any;
     /** Display some text inside the chip. */
     text?: string | number;
+    /**
+     * The icon displayed on the right side of the chip.
+     * @IconComponent
+     */
+    trailingIcon?: IconComponent;
     /**
      * @defaultValue 'danger'
      */
     color?: Chip['variants']['color'];
+    /**
+     * If set to `true` the color is inverted.
+     * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
+     * @defaultValue false
+     */
+    inverted?: boolean;
     /**
      * @defaultValue 'sm'
      */
@@ -33,19 +45,25 @@ export interface ChipProps {
      * @defaultValue false
      */
     standalone?: boolean;
+    /**
+     * When `true`, hide chip if value='0'
+     * @defaultValue false
+     */
+    hideZero?: boolean;
     class?: any;
     b24ui?: Chip['slots'];
 }
 export interface ChipEmits {
-    (e: 'update:show', payload: boolean): void;
+    'update:show': [payload: boolean];
 }
 export interface ChipSlots {
     default(props?: {}): any;
     content(props?: {}): any;
+    trailing(props?: {}): any;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps & {
     show?: boolean;
@@ -53,7 +71,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps
     "onUpdate:show"?: ((value: boolean) => any) | undefined;
 }>, {
     inset: boolean;
+    inverted: boolean;
     standalone: boolean;
+    hideZero: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Collapsible.vue.d.ts

@@ -20,7 +20,7 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/Container.vue.d.ts

@@ -9,7 +9,7 @@ export interface ContainerProps {
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Countdown.vue.d.ts

@@ -64,8 +64,10 @@ export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' |
     b24ui?: Countdown['slots'];
 }
 export interface CountdownEmits {
-    (e: 'start' | 'end' | 'abort'): void;
-    (e: 'progress', payload: CountdownData): void;
+    start: [];
+    end: [];
+    abort: [];
+    progress: [payload: CountdownData];
 }
 export interface CountdownSlots {
     leading(props?: {}): any;
@@ -78,7 +80,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CountdownP
     abort: () => void;
     stop: () => void;
     restart: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     end: () => any;
     abort: () => any;
     progress: (payload: CountdownData) => any;

package/dist/runtime/components/DescriptionList.vue.d.ts

@@ -81,5 +81,5 @@ declare const _default: <T extends DescriptionListItem>(__VLS_props: NonNullable
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/DropdownMenu.vue

@@ -5,14 +5,18 @@ import theme from "#build/b24ui/dropdown-menu";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuArrow,
+  useForwardPropsEmits
+} from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
-  size: { type: null, required: false },
   items: { type: null, required: false },
   checkedIcon: { type: [Function, Object], required: false },
   externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
@@ -31,17 +35,23 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
-const arrowProps = toRef(() => props.arrow);
+const contentProps = toRef(() => defu(props.content, { side: "bottom", align: "center", sideOffset: 8, collisionPadding: 8 }));
+const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
 const proxySlots = omit(slots, ["default"]);
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdownMenu || {} })({
-  size: props.size
-}));
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdownMenu || {} })({}));
 </script>
 
 <template>
-  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
-    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+  <DropdownMenuRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+  >
+    <DropdownMenuTrigger
+      v-if="!!slots.default"
+      as-child
+      :class="props.class"
+      :disabled="disabled"
+    >
       <slot :open="open" />
     </DropdownMenuTrigger>
 
@@ -51,6 +61,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
       :b24ui-override="props.b24ui"
       v-bind="contentProps"
       :items="items"
+      :arrow="arrow"
       :portal="portal"
       :label-key="labelKey"
       :checked-icon="checkedIcon"

package/dist/runtime/components/DropdownMenu.vue.d.ts

@@ -34,10 +34,6 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
-    /**
-     * @defaultValue 'md'
-     */
-    size?: DropdownMenu['variants']['size'];
     items?: T;
     /**
      * The icon displayed when an item is checked.
@@ -113,5 +109,5 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/DropdownMenuContent.vue

@@ -4,8 +4,12 @@
 
 <script setup>
 import { computed, toRef } from "vue";
+import { defu } from "defu";
 import { DropdownMenu } from "reka-ui/namespaced";
-import { useForwardPropsEmits } from "reka-ui";
+import {
+  DropdownMenuArrow,
+  useForwardPropsEmits
+} from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
@@ -19,6 +23,7 @@ import B24Kbd from "./Kbd.vue";
 import B24DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
   items: { type: null, required: false },
+  arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
@@ -30,8 +35,10 @@ const props = defineProps({
   loop: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
+  sideFlip: { type: Boolean, required: false },
   align: { type: null, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -50,6 +57,7 @@ const { dir } = useLocale();
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "checkedIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
 const proxySlots = omit(slots, ["default"]);
+const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
 const getLabel = (item) => {
   return get(item, props.labelKey);
 };
@@ -76,7 +84,7 @@ const groups = computed(
         />
         <B24Avatar
           v-else-if="item.avatar"
-          :size="item.b24ui?.itemLeadingAvatarSize || props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
+          :size="item.b24ui?.itemLeadingAvatarSize || b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
           v-bind="item.avatar"
           :class="b24ui.itemLeadingAvatar({ class: [b24uiOverride?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active })"
         />
@@ -101,7 +109,7 @@ const groups = computed(
             :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color, active })"
           />
           <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
-            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -116,17 +124,29 @@ const groups = computed(
   </DefineItemTemplate>
 
   <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+    <component
+      :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content"
+      :class="props.class"
+      v-bind="contentProps"
+    >
       <slot name="content-top" />
 
-      <div role="presentation" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
+      <div role="presentation" :class="b24ui.viewport({ class: b24uiOverride?.viewport })">
+        <DropdownMenu.Group
+          v-for="(group, groupIndex) in groups"
+          :key="`group-${groupIndex}`"
+          :class="b24ui.group({ class: b24uiOverride?.group })"
+        >
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.Label>
             <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
-            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <DropdownMenu.Sub
+              v-else-if="item?.children?.length"
+              :open="item.open"
+              :default-open="item.defaultOpen"
+            >
               <DropdownMenu.SubTrigger
                 as="button"
                 type="button"
@@ -144,6 +164,7 @@ const groups = computed(
                 :b24ui-override="b24uiOverride"
                 :portal="portal"
                 :items="item.children"
+                :arrow="arrow"
                 align="start"
                 :align-offset="-4"
                 :side-offset="3"
@@ -155,6 +176,7 @@ const groups = computed(
                 <template v-for="(_, name) in proxySlots" #[name]="slotData">
                   <slot :name="name" v-bind="slotData" />
                 </template>
+                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
               </B24DropdownMenuContent>
             </DropdownMenu.Sub>
             <DropdownMenu.CheckboxItem

package/dist/runtime/components/DropdownMenuContent.vue.d.ts

@@ -1,12 +1,17 @@
 import { DropdownMenu } from 'reka-ui/namespaced';
-import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
+import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/b24ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots, IconComponent } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots, DynamicSlots, MergeTypes, IconComponent } from '../types';
 import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
     items?: T;
+    /**
+     * Display an arrow alongside the menu.
+     * @defaultValue false
+     */
+    arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>;
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: keyof NestedItem<T>;
@@ -24,9 +29,12 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     };
     b24uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-};
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+    active?: boolean;
+    index: number;
+}>;
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
@@ -37,12 +45,12 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: DropdownMenuContentSlots<T>;
+    slots: DropdownMenuContentSlots<T, NestedItem<T>>;
     emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Form.vue

@@ -168,7 +168,7 @@ defineExpose({
   errors,
   setErrors(errs, name) {
     if (name) {
-      errors.value = errors.value.filter((error) => error.name !== name).concat(resolveErrorIds(errs));
+      errors.value = errors.value.filter((err) => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name).concat(resolveErrorIds(errs));
     } else {
       errors.value = resolveErrorIds(errs);
     }
@@ -178,13 +178,13 @@ defineExpose({
   },
   getErrors(name) {
     if (name) {
-      return errors.value.filter((err) => err.name === name);
+      return errors.value.filter((err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name);
     }
     return errors.value;
   },
   clear(name) {
     if (name) {
-      errors.value = errors.value.filter((err) => err.name !== name);
+      errors.value = errors.value.filter((err) => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name);
     } else {
       errors.value = [];
     }

package/dist/runtime/components/Form.vue.d.ts

@@ -13,6 +13,7 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
+     * @remarks The form always validates on submit.
      * @defaultValue `['blur', 'change', 'input']`
      */
     validateOn?: FormInputEvents[];
@@ -43,11 +44,11 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
-    (e: 'error', payload: FormErrorEvent): void;
+    submit: [payload: FormSubmitEvent<FormData<S, T>>];
+    error: [payload: FormErrorEvent];
 }
 export interface FormSlots {
-    default(props?: {
+    default(props: {
         errors: FormError[];
         loading: boolean;
     }): any;
@@ -60,11 +61,11 @@ declare const _default: <S extends FormSchema, T extends boolean = true>(__VLS_p
     expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S, T>;
+    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FormField.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [String, Boolean], required: false },
+  error: { type: [Boolean, String], required: false },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
@@ -85,7 +85,7 @@ provide(formFieldInjectionKey, computed(() => ({
           </div>
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="b24ui.help({ class: props.b24ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="b24ui.help({ class: props.b24ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

package/dist/runtime/components/FormField.vue.d.ts

@@ -15,7 +15,7 @@ export interface FormFieldProps {
     label?: string;
     description?: string;
     help?: string;
-    error?: string | boolean;
+    error?: boolean | string;
     hint?: string;
     /**
      * @defaultValue 'md'
@@ -49,13 +49,13 @@ export interface FormFieldSlots {
         help?: string;
     }): any;
     error(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
     default(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Input.vue

@@ -12,6 +12,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
+import B24Badge from "./Badge.vue";
 import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -61,7 +62,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.input |
   color: color.value,
   size: inputSize?.value,
   loading: props.loading,
-  tagColor: props.tagColor,
   highlight: highlight.value,
   rounded: Boolean(props.rounded),
   noPadding: Boolean(props.noPadding),
@@ -122,9 +122,13 @@ defineExpose({
 
 <template>
   <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
-      {{ props.tag }}
-    </div>
+    <B24Badge
+      v-if="isTag"
+      :class="b24ui.tag({ class: props.b24ui?.tag })"
+      :color="props.tagColor"
+      :label="props.tag"
+      size="xs"
+    />
 
     <input
       :id="id"

package/dist/runtime/components/Input.vue.d.ts

@@ -2,6 +2,7 @@ import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { BadgeProps } from '../types';
 import type { AcceptableValue, ComponentConfig } from '../types/utils';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
@@ -21,7 +22,7 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
      */
     placeholder?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Input['variants']['color'];
     /**
@@ -70,9 +71,9 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
     disabled?: boolean;
     tag?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
-    tagColor?: Input['variants']['tagColor'];
+    tagColor?: BadgeProps['color'];
     /**
      * Highlight the ring color like a focus state
      * @defaultValue false
@@ -91,9 +92,9 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
     b24ui?: Input['slots'];
 }
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', event: Event): void;
+    'update:modelValue': [payload: T];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
 }
 export interface InputSlots {
     leading(props?: {}): any;
@@ -111,11 +112,11 @@ declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awa
     }>): void;
     attrs: any;
     slots: InputSlots;
-    emit: InputEmits<T>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};