@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

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

@@ -1,189 +1,10 @@
+import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } 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 { ArrayOrNested, NestedItem } from '../types/utils';
-declare const _dropdownMenu: {
-    content: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    arrow: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    group: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    label: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    separator: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    item: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingAvatar: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingAvatarSize: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailing: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingKbds: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingKbdsSize: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLabel: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLabelExternalIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-} & {
-    content: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    arrow: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    group: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    label: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    separator: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    item: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingAvatar: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLeadingAvatarSize: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailing: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingKbds: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemTrailingKbdsSize: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLabel: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    itemLabelExternalIcon: (slotProps?: ({
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        color?: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | undefined;
-        active?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-} & {};
+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;
     portal?: boolean;
@@ -198,8 +19,10 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
      */
     externalIcon?: boolean | IconComponent;
     class?: any;
-    b24ui: typeof _dropdownMenu;
-    b24uiOverride?: any;
+    b24ui: {
+        [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string;
+    };
+    b24uiOverride?: DropdownMenu['slots'];
 }
 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<any & DropdownMenuContentProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);

package/dist/runtime/components/Form.vue

@@ -1,15 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/form";
-import { tv } from "../utils/tv";
-const appConfigForm = _appConfig;
-const form = tv({ extend: tv(theme), ...appConfigForm.b24ui?.form || {} });
 </script>
 
 <script setup>
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from "vue";
 import { useEventBus } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
+import { tv } from "../utils/tv";
 import { validateSchema } from "../utils/form";
 import { FormValidationException } from "../types/form";
 const props = defineProps({
@@ -23,11 +21,14 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: Boolean, required: false, default: true },
+  loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   onSubmit: { type: Function, required: false }
 });
 const emits = defineEmits(["submit", "error"]);
 defineSlots();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.form || {} }));
 const formId = props.id ?? useId();
 const bus = useEventBus(`form-${formId}`);
 const parentBus = inject(
@@ -136,7 +137,7 @@ async function _validate(opts = { silent: false, nested: true, transform: false
 const loading = ref(false);
 provide(formLoadingInjectionKey, readonly(loading));
 async function onSubmitWrapper(payload) {
-  loading.value = true;
+  loading.value = props.loadingAuto && true;
   const event = payload;
   try {
     event.data = await _validate({ nested: true, transform: props.transform });
@@ -188,6 +189,7 @@ defineExpose({
     }
   },
   disabled,
+  loading,
   dirty: computed(() => !!dirtyFields.size),
   dirtyFields: readonly(dirtyFields),
   blurredFields: readonly(blurredFields),
@@ -199,7 +201,7 @@ defineExpose({
   <component
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
-    :class="form({ class: props.class })"
+    :class="b24ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" />

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

@@ -28,6 +28,12 @@ export interface FormProps<T extends object> {
      * @defaultValue `true`
      */
     transform?: boolean;
+    /**
+     * When `true`, all form elements will be disabled on `@submit` event.
+     * This will cause any focused input elements to lose their focus state.
+     * @defaultValue `true`
+     */
+    loadingAuto?: boolean;
     class?: any;
     onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>);
 }

package/dist/runtime/components/FormField.vue

@@ -1,15 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/form-field";
-import { tv } from "../utils/tv";
-const appConfigFormField = _appConfig;
-const formField = tv({ extend: tv(theme), ...appConfigFormField.b24ui?.formField || {} });
 </script>
 
 <script setup>
 import { computed, ref, inject, provide, useId } from "vue";
 import { Primitive, Label } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { formFieldInjectionKey, inputIdInjectionKey } from "../composables/useFormField";
+import { tv } from "../utils/tv";
 import WarningIcon from "@bitrix24/b24icons-vue/main/WarningIcon";
 const props = defineProps({
   as: { type: null, required: false },
@@ -25,10 +23,11 @@ const props = defineProps({
   eagerValidation: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 const slots = defineSlots();
-const b24ui = computed(() => formField({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.formField || {} })({
   size: props.size,
   required: props.required,
   useDescription: Boolean(props.description) || !!slots.description

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

@@ -1,216 +1,7 @@
-import type { VariantProps } from 'tailwind-variants';
-declare const formField: import("tailwind-variants").TVReturnType<{
-    useDescription: {
-        true: {
-            wrapper: string;
-        };
-        false: {
-            wrapper: string;
-        };
-    };
-    size: {
-        xs: {
-            root: string;
-            errorIcon: string;
-        };
-        sm: {
-            root: string;
-            errorIcon: string;
-        };
-        md: {
-            root: string;
-            errorIcon: string;
-        };
-        lg: {
-            root: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    labelWrapper: string;
-    label: string;
-    hint: string;
-    container: string;
-    description: string;
-    error: string;
-    errorIcon: string;
-    help: string;
-}, undefined, {
-    useDescription: {
-        true: {
-            wrapper: string;
-        };
-        false: {
-            wrapper: string;
-        };
-    };
-    size: {
-        xs: {
-            root: string;
-            errorIcon: string;
-        };
-        sm: {
-            root: string;
-            errorIcon: string;
-        };
-        md: {
-            root: string;
-            errorIcon: string;
-        };
-        lg: {
-            root: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    labelWrapper: string;
-    label: string;
-    hint: string;
-    container: string;
-    description: string;
-    error: string;
-    errorIcon: string;
-    help: string;
-}, import("tailwind-variants").TVReturnType<{
-    useDescription: {
-        true: {
-            wrapper: string;
-        };
-        false: {
-            wrapper: string;
-        };
-    };
-    size: {
-        xs: {
-            root: string;
-            errorIcon: string;
-        };
-        sm: {
-            root: string;
-            errorIcon: string;
-        };
-        md: {
-            root: string;
-            errorIcon: string;
-        };
-        lg: {
-            root: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    labelWrapper: string;
-    label: string;
-    hint: string;
-    container: string;
-    description: string;
-    error: string;
-    errorIcon: string;
-    help: string;
-}, undefined, {
-    useDescription: {
-        true: {
-            wrapper: string;
-        };
-        false: {
-            wrapper: string;
-        };
-    };
-    size: {
-        xs: {
-            root: string;
-            errorIcon: string;
-        };
-        sm: {
-            root: string;
-            errorIcon: string;
-        };
-        md: {
-            root: string;
-            errorIcon: string;
-        };
-        lg: {
-            root: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    labelWrapper: string;
-    label: string;
-    hint: string;
-    container: string;
-    description: string;
-    error: string;
-    errorIcon: string;
-    help: string;
-}, import("tailwind-variants").TVReturnType<{
-    useDescription: {
-        true: {
-            wrapper: string;
-        };
-        false: {
-            wrapper: string;
-        };
-    };
-    size: {
-        xs: {
-            root: string;
-            errorIcon: string;
-        };
-        sm: {
-            root: string;
-            errorIcon: string;
-        };
-        md: {
-            root: string;
-            errorIcon: string;
-        };
-        lg: {
-            root: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    labelWrapper: string;
-    label: string;
-    hint: string;
-    container: string;
-    description: string;
-    error: string;
-    errorIcon: string;
-    help: string;
-}, undefined, unknown, unknown, undefined>>>;
-type FormFieldVariants = VariantProps<typeof formField>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/form-field';
+import type { ComponentConfig } from '../types/utils';
+type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>;
 export interface FormFieldProps {
     /**
      * The element or component this component should render as.
@@ -229,7 +20,7 @@ export interface FormFieldProps {
     /**
      * @defaultValue 'md'
      */
-    size?: FormFieldVariants['size'];
+    size?: FormField['variants']['size'];
     /**
      * @defaultValue false
      */
@@ -242,7 +33,7 @@ export interface FormFieldProps {
      */
     validateOnInputDelay?: number;
     class?: any;
-    b24ui?: Partial<typeof formField.slots>;
+    b24ui?: FormField['slots'];
 }
 export interface FormFieldSlots {
     label(props: {

package/dist/runtime/components/Input.vue

@@ -1,18 +1,16 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/input";
-import { tv } from "../utils/tv";
-const appConfigInput = _appConfig;
-const input = tv({ extend: tv(theme), ...appConfigInput.b24ui?.input || {} });
 </script>
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -46,6 +44,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
@@ -53,7 +52,7 @@ const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
 const isTag = computed(() => {
   return props.tag;
 });
-const b24ui = computed(() => input({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.input || {} })({
   type: props.type,
   color: color.value,
   size: inputSize?.value,