@movk/nuxt 1.1.2 → 1.3.0

package/dist/runtime/components/input/WithCharacterLimit.vue

@@ -1,28 +1,40 @@
 <script setup>
+import { computed, useAttrs } from "vue";
 import { UInput } from "#components";
-import { computed } from "vue";
-const { maxLength = 50, counterClass = "" } = defineProps({
-  maxLength: { type: Number, required: false },
-  counterClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-character-limit";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useForwardedProps } from "../../utils/form-control";
+const props = defineProps({
+  maxLength: { type: Number, required: false, default: 50 },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
-const currentLength = computed(() => {
-  return String(modelValue.value ?? "").length;
-});
+const inputProps = useForwardedProps(props, ["ui", "maxLength", "maxlength", "defaultValue", "modelModifiers"]);
+const { baseUi, extraUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withCharacterLimit,
+  () => ({ ui: props.ui })
+);
+const currentLength = computed(() => String(modelValue.value ?? "").length);
 </script>
 
 <template>
   <UInput
     v-model="modelValue"
-    :maxlength="maxLength"
+    :maxlength="props.maxLength"
     aria-describedby="character-count"
-    :ui="{ trailing: 'pointer-events-none' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -31,11 +43,11 @@ const currentLength = computed(() => {
     <template #trailing>
       <div
         id="character-count"
-        :class="[counterClass, 'text-xs text-muted tabular-nums']"
+        :class="extraUi.counter"
         aria-live="polite"
         role="status"
       >
-        {{ currentLength }}/{{ maxLength }}
+        {{ currentLength }}/{{ props.maxLength }}
       </div>
     </template>
   </UInput>

package/dist/runtime/components/input/WithCharacterLimit.vue.d.ts

@@ -1,19 +1,25 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithCharacterLimitProps } from '../../types/components.js';
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-character-limit';
+import inputTheme from '#build/ui/input';
+import type { WithCharacterLimitProps } from '../../types/components/input/with-character-limit';
+import type { AppConfig } from 'nuxt/schema';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCharacterLimitProps<import("@nuxt/ui/.").AcceptableValue> & {
-        modelValue?: InputProps["modelValue"];
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCharacterLimitProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
+        modelValue?: T;
     }) & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("@nuxt/ui/.").AcceptableValue | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithClear.d.vue.ts

@@ -1,7 +1,13 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithClearProps } from '../../types/components.js';
+import type { InputProps, InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-clear';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithClearProps } from '../../types/components/input/with-clear';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithClearProps<import("@nuxt/ui/.").AcceptableValue> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithClearProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: InputProps<T>["modelValue"];
     }) & {
         onClear?: (() => any) | undefined;
@@ -13,8 +19,8 @@ declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awai
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: T | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithClear.vue

@@ -1,26 +1,45 @@
 <script setup>
+import { useAttrs } from "vue";
 import { UInput, UButton } from "#components";
 import { isEmpty } from "@movk/core";
-const { buttonProps } = defineProps({
-  buttonProps: { type: Object, required: false }
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-clear";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
+const props = defineProps({
+  buttonProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change", "clear"]);
+const emits = defineEmits(["update:modelValue", "blur", "change", "clear"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
+const inputProps = useForwardedProps(props, ["ui", "buttonProps", "defaultValue", "modelModifiers"]);
+const { size: buttonSize, emitFormChange, emitFormInput } = useFormFieldBridge(props);
+const { baseUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withClear,
+  () => ({ ui: props.ui })
+);
 function handleClear() {
   modelValue.value = void 0;
-  emit("clear");
+  emitFormInput();
+  emitFormChange();
+  emits("clear");
 }
 </script>
 
 <template>
   <UInput
     v-model="modelValue"
-    :ui="{ trailing: 'pe-1' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -30,10 +49,10 @@ function handleClear() {
       <UButton
         color="neutral"
         variant="link"
-        size="sm"
+        :size="buttonSize"
         icon="i-lucide-circle-x"
         aria-label="Clear input"
-        v-bind="buttonProps"
+        v-bind="props.buttonProps"
         @click="handleClear"
       />
     </template>

package/dist/runtime/components/input/WithClear.vue.d.ts

@@ -1,7 +1,13 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithClearProps } from '../../types/components.js';
+import type { InputProps, InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-clear';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithClearProps } from '../../types/components/input/with-clear';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithClearProps<import("@nuxt/ui/.").AcceptableValue> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithClearProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: InputProps<T>["modelValue"];
     }) & {
         onClear?: (() => any) | undefined;
@@ -13,8 +19,8 @@ declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awai
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: T | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithCopy.d.vue.ts

@@ -1,20 +1,26 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithCopyProps } from '../../types/components.js';
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-copy';
+import inputTheme from '#build/ui/input';
+import type { WithCopyProps } from '../../types/components/input/with-copy';
+import type { AppConfig } from 'nuxt/schema';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCopyProps<import("@nuxt/ui/.").AcceptableValue> & {
-        modelValue?: InputProps["modelValue"];
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCopyProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCopy">["slots"];
+    } & {
+        modelValue?: T;
     }) & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onCopy?: ((value: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("@nuxt/ui/.").AcceptableValue | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithCopy.vue

@@ -1,21 +1,38 @@
 <script setup>
+import { useAttrs } from "vue";
 import { UInput, UButton, UTooltip } from "#components";
 import { useClipboard } from "@vueuse/core";
 import { isEmpty } from "@movk/core";
-const { buttonProps, tooltipProps } = defineProps({
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-copy";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
+const props = defineProps({
   buttonProps: { type: Object, required: false },
-  tooltipProps: { type: Object, required: false }
+  tooltipProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change", "copy"]);
+const emits = defineEmits(["update:modelValue", "blur", "change", "copy"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
+const inputProps = useForwardedProps(props, ["ui", "buttonProps", "tooltipProps", "defaultValue", "modelModifiers"]);
+const { size: buttonSize } = useFormFieldBridge(props);
+const { baseUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withCopy,
+  () => ({ ui: props.ui })
+);
 const { copy, copied } = useClipboard();
 function handleCopy() {
   if (modelValue.value) {
     const stringValue = String(modelValue.value);
     copy(stringValue);
-    emit("copy", stringValue);
+    emits("copy", stringValue);
   }
 }
 </script>
@@ -23,24 +40,24 @@ function handleCopy() {
 <template>
   <UInput
     v-model="modelValue"
-    :ui="{ trailing: 'pe-1' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
     </template>
 
     <template v-if="!isEmpty(modelValue)" #trailing>
-      <UTooltip text="Copy to clipboard" v-bind="tooltipProps">
+      <UTooltip text="Copy to clipboard" v-bind="props.tooltipProps">
         <UButton
           :color="copied ? 'success' : 'neutral'"
           variant="link"
-          size="sm"
+          :size="buttonSize"
           :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
           aria-label="Copy to clipboard"
-          v-bind="buttonProps"
+          v-bind="props.buttonProps"
           @click="handleCopy"
         />
       </UTooltip>

package/dist/runtime/components/input/WithCopy.vue.d.ts

@@ -1,20 +1,26 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithCopyProps } from '../../types/components.js';
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-copy';
+import inputTheme from '#build/ui/input';
+import type { WithCopyProps } from '../../types/components/input/with-copy';
+import type { AppConfig } from 'nuxt/schema';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCopyProps<import("@nuxt/ui/.").AcceptableValue> & {
-        modelValue?: InputProps["modelValue"];
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCopyProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCopy">["slots"];
+    } & {
+        modelValue?: T;
     }) & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onCopy?: ((value: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("@nuxt/ui/.").AcceptableValue | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithFloatingLabel.d.vue.ts

@@ -0,0 +1,33 @@
+import type { InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-floating-label';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithFloatingLabelProps } from '../../types/components/input/with-floating-label';
+declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithFloatingLabelProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withFloatingLabel">["slots"];
+    } & {
+        modelValue?: T;
+    }) & {
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: OmitByKey<InputSlots, "default" | "trailing">;
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/input/WithFloatingLabel.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { useAttrs } from "vue";
+import { UInput, UButton } from "#components";
+import { isEmpty } from "@movk/core";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-floating-label";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
+const props = defineProps({
+  label: { type: String, required: false },
+  size: { type: null, required: false },
+  clearButtonProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const emits = defineEmits(["update:modelValue", "blur", "change", "clear"]);
+const slots = defineSlots();
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const modelValue = defineModel({ type: null });
+const inputProps = useForwardedProps(props, ["ui", "label", "clearButtonProps", "placeholder", "defaultValue", "modelModifiers"]);
+const { size: effectiveSize, emitFormChange, emitFormInput } = useFormFieldBridge(props);
+const { baseUi, extraUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withFloatingLabel,
+  () => ({
+    ui: props.ui,
+    variants: {
+      size: effectiveSize.value,
+      hasLeading: !!(attrs["leading-icon"] || attrs.avatar || attrs.leadingIcon || attrs.icon || slots.leading)
+    }
+  })
+);
+function handleClear() {
+  modelValue.value = void 0;
+  emitFormInput();
+  emitFormChange();
+  emits("clear");
+}
+</script>
+
+<template>
+  <UInput
+    v-model="modelValue"
+    :placeholder="props.placeholder ?? ''"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
+  >
+    <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+
+    <template v-if="props.label" #default>
+      <label :class="extraUi.label">
+        <span :class="extraUi.labelText">{{ props.label }}</span>
+      </label>
+    </template>
+
+    <template v-if="!isEmpty(modelValue)" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        :size="effectiveSize"
+        icon="i-lucide-circle-x"
+        aria-label="Clear input"
+        v-bind="props.clearButtonProps"
+        @click="handleClear"
+      />
+    </template>
+  </UInput>
+</template>

package/dist/runtime/components/input/WithFloatingLabel.vue.d.ts

@@ -0,0 +1,33 @@
+import type { InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-floating-label';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithFloatingLabelProps } from '../../types/components/input/with-floating-label';
+declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithFloatingLabelProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withFloatingLabel">["slots"];
+    } & {
+        modelValue?: T;
+    }) & {
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: OmitByKey<InputSlots, "default" | "trailing">;
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/input/WithPasswordToggle.d.vue.ts

@@ -1,19 +1,25 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithPasswordToggleProps } from '../../types/components.js';
+import type { InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-password-toggle';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithPasswordToggleProps } from '../../types/components/input/with-password-toggle';
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithPasswordToggleProps<import("@nuxt/ui/.").AcceptableValue> & {
-        modelValue?: InputProps["modelValue"];
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithPasswordToggleProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withPasswordToggle">["slots"];
+    } & {
+        modelValue?: T;
     }) & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("@nuxt/ui/.").AcceptableValue | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithPasswordToggle.vue

@@ -1,24 +1,41 @@
 <script setup>
+import { useAttrs } from "vue";
 import { UInput, UButton } from "#components";
 import { useToggle } from "@vueuse/core";
-const { buttonProps } = defineProps({
-  buttonProps: { type: Object, required: false }
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-password-toggle";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
+const props = defineProps({
+  buttonProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
-const [value, toggle] = useToggle();
+const inputProps = useForwardedProps(props, ["ui", "buttonProps", "defaultValue", "modelModifiers"]);
+const { size: buttonSize } = useFormFieldBridge(props);
+const { baseUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withPasswordToggle,
+  () => ({ ui: props.ui })
+);
+const [value, toggle] = useToggle(false);
 </script>
 
 <template>
   <UInput
     v-model="modelValue"
     :type="value ? 'text' : 'password'"
-    :ui="{ trailing: 'pe-1' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -28,11 +45,11 @@ const [value, toggle] = useToggle();
       <UButton
         color="neutral"
         variant="link"
-        size="sm"
+        :size="buttonSize"
         :icon="value ? 'i-lucide-eye-off' : 'i-lucide-eye'"
         :aria-label="value ? 'Hide password' : 'Show password'"
         :aria-pressed="value"
-        v-bind="buttonProps"
+        v-bind="props.buttonProps"
         @click="toggle()"
       />
     </template>