@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/FieldSlug/FieldSlug.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
+import { useField } from "#vuno/composables/useField";
+import { useForm } from "#vuno/composables/useForm";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { formatSlug } from "#vuno/utils/format";
+import Button from "#vuno/components/Button/Button.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import Input from "#vuno/components/internal/Input/Input.vue";
+defineOptions({ name: "VunoFieldSlug" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  placeholder: { type: String, required: false },
+  source: { type: String, required: true },
+  sourceValue: { type: String, required: false }
+});
+const form = useForm({ optional: true });
+const { value } = useField(() => props.name, model);
+const sourceValue = computed(() => form ? form.getValue(props.source) : props.sourceValue);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("fieldSlug", () => props.ui);
+const input = useTemplateRef("input");
+const isManual = ref(false);
+let initialised = false;
+const onUpdate = (next) => {
+  const text = next === void 0 ? "" : String(next);
+  const formatted = formatSlug(text);
+  isManual.value = true;
+  value.value = formatted !== "" && text.trimEnd().endsWith("-") ? `${formatted}-` : formatted;
+};
+const takeControl = async () => {
+  isManual.value = true;
+  await nextTick();
+  input.value?.inputRef?.focus();
+};
+const normalise = () => {
+  value.value = formatSlug(value.value);
+};
+const resetToSource = () => {
+  isManual.value = false;
+  value.value = formatSlug(sourceValue.value);
+};
+watch(
+  sourceValue,
+  (source) => {
+    if (!initialised) {
+      initialised = true;
+      if (value.value) {
+        isManual.value = true;
+        return;
+      }
+    }
+    if (isManual.value) return;
+    value.value = formatSlug(source);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+    <!--
+        `readonly` y no `disabled` mientras el slug sigue al origen: un campo
+        deshabilitado no se puede copiar ni leer con un lector de pantalla, y
+        aquí lo que no se quiere es que se escriba, no que se ignore.
+
+        Y el bloqueo dura exactamente lo que dura el seguimiento. Lo que protege
+        es que el origen te pise lo tecleado; en manual no hay nada de lo que
+        proteger, así que el campo se queda escribible en vez de pedir permiso
+        otra vez cada vez que vuelves a él.
+    -->
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Input
+                v-bind="control"
+                ref="input"
+                :disabled="props.disabled"
+                :modelValue="value"
+                :placeholder="props.placeholder"
+                :readonly="!isManual"
+                :ui="ui"
+                @blur="normalise"
+                @update:model-value="onUpdate"
+            >
+                <template #trailing>
+                    <Button
+                        :aria-label="isManual ? messages.slugReset : messages.slugEdit"
+                        color="neutral"
+                        :disabled="props.disabled"
+                        :icon="isManual ? icons.slugReset : icons.slugEdit"
+                        size="sm"
+                        tabindex="-1"
+                        variant="link"
+                        @click="isManual ? resetToSource() : takeControl()"
+                        @mousedown.prevent
+                    />
+                </template>
+            </Input>
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldSlug/FieldSlug.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldSlug } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSlug, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.d.vue.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldSwitch } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSwitch, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldSwitchTheme: Record<"fieldSwitch", {
+    readonly slots: {
+        readonly root: "";
+    };
+}>;

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldSwitchTheme = defineTheme("fieldSwitch", { slots: { root: "" } });

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import Switch from "#vuno/components/FieldSwitch/internal/Switch/Switch.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldSwitch" });
+const model = defineModel({ type: Boolean });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldSwitch", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Switch
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldSwitch } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSwitch, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    color?: VunoColor;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    ui?: VunoUi<'fieldSwitch' | 'switch'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    color: VunoColor;
+    radius: VunoRadius;
+    size: VunoSize;
+    ui: VunoUi<"fieldSwitch" | "switch">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.theme.d.ts

@@ -0,0 +1,39 @@
+/**
+ * El interruptor. La pista es el propio `<input>` y el círculo un hermano
+ * que se desplaza con `peer-checked`, así que el recorrido de cada tamaño
+ * es el ancho menos el círculo menos sus dos márgenes: con otro número el
+ * círculo se sale o se queda corto, y no hay forma de deducirlo leyendo.
+ */
+export declare const switchTheme: Record<"switch", {
+    readonly slots: {
+        readonly base: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full border border-vuno-border-strong bg-vuno-surface-2 transition-[background-color,border-color] checked:border-(--vuno-accent) checked:bg-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) enabled:hover:border-(--vuno-accent) disabled:cursor-not-allowed motion-reduce:transition-none";
+        readonly root: "relative inline-flex shrink-0 items-center transition-opacity has-disabled:opacity-50 motion-reduce:transition-none";
+        readonly thumb: "pointer-events-none absolute top-1/2 left-0.5 -translate-y-1/2 rounded-full bg-vuno-surface transition-transform peer-active:scale-90 peer-disabled:scale-100 motion-reduce:transition-none";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"base" | "thumb", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly root: "h-3.5 w-6";
+                readonly thumb: "size-2.5 peer-checked:translate-x-2.5";
+            };
+            readonly sm: {
+                readonly root: "h-4 w-7";
+                readonly thumb: "size-3 peer-checked:translate-x-3";
+            };
+            readonly md: {
+                readonly root: "h-5 w-9";
+                readonly thumb: "size-4 peer-checked:translate-x-4";
+            };
+            readonly lg: {
+                readonly root: "h-6 w-11";
+                readonly thumb: "size-5 peer-checked:translate-x-5";
+            };
+            readonly xl: {
+                readonly root: "h-7 w-12";
+                readonly thumb: "size-6 peer-checked:translate-x-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.theme.js

@@ -0,0 +1,20 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const switchTheme = defineTheme("switch", {
+  slots: {
+    base: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full border border-vuno-border-strong bg-vuno-surface-2 transition-[background-color,border-color] checked:border-(--vuno-accent) checked:bg-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) enabled:hover:border-(--vuno-accent) disabled:cursor-not-allowed motion-reduce:transition-none",
+    root: "relative inline-flex shrink-0 items-center transition-opacity has-disabled:opacity-50 motion-reduce:transition-none",
+    thumb: "pointer-events-none absolute top-1/2 left-0.5 -translate-y-1/2 rounded-full bg-vuno-surface transition-transform peer-active:scale-90 peer-disabled:scale-100 motion-reduce:transition-none"
+  },
+  variants: {
+    color: accentByColor("base"),
+    radius: radiusByStep("base", "thumb"),
+    size: {
+      xs: { root: "h-3.5 w-6", thumb: "size-2.5 peer-checked:translate-x-2.5" },
+      sm: { root: "h-4 w-7", thumb: "size-3 peer-checked:translate-x-3" },
+      md: { root: "h-5 w-9", thumb: "size-4 peer-checked:translate-x-4" },
+      lg: { root: "h-6 w-11", thumb: "size-5 peer-checked:translate-x-5" },
+      xl: { root: "h-7 w-12", thumb: "size-6 peer-checked:translate-x-5" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoSwitch", inheritAttrs: false });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "switch",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    radius: props.radius,
+    size: props.size
+  })
+);
+function onChange(event) {
+  model.value = event.target.checked;
+}
+</script>
+
+<template>
+    <span :class="ui.root">
+        <!--
+            `aria-checked` además del `checked` nativo, y atado al mismo modelo
+            para que no puedan divergir. Un `input[type=checkbox]` con
+            `role="switch"` debería exponer su estado solo, pero eso se comprueba
+            leyendo el árbol de accesibilidad y no el DOM. Declararlo es correcto
+            bajo las dos lecturas y no cuesta nada.
+        -->
+        <input
+            v-bind="$attrs"
+            :aria-checked="model === true"
+            :checked="model === true"
+            :class="ui.base"
+            role="switch"
+            type="checkbox"
+            @change="onChange"
+        />
+
+        <span :class="ui.thumb" />
+    </span>
+</template>

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.vue.d.ts

@@ -0,0 +1,26 @@
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    color?: VunoColor;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    ui?: VunoUi<'fieldSwitch' | 'switch'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    color: VunoColor;
+    radius: VunoRadius;
+    size: VunoSize;
+    ui: VunoUi<"fieldSwitch" | "switch">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/FieldTags.d.vue.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldTags } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldTags, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/FieldTags.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldTagsTheme: Record<"fieldTags", {
+    readonly slots: {
+        readonly root: "w-full";
+    };
+}>;

package/dist/runtime/app/components/FieldTags/FieldTags.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldTagsTheme = defineTheme("fieldTags", { slots: { root: "w-full" } });

package/dist/runtime/app/components/FieldTags/FieldTags.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import TagsInput from "#vuno/components/FieldTags/internal/TagsInput/TagsInput.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldTags" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  max: { type: Number, required: false },
+  placeholder: { type: String, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldTags", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <TagsInput
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :max="props.max"
+                :placeholder="props.placeholder"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldTags/FieldTags.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldTags } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldTags, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    disabled?: boolean;
+    max?: number;
+    placeholder?: string;
+    size?: VunoSize;
+    ui?: VunoUi<'control' | 'tagsInput'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {
+    size: VunoSize;
+    ui: VunoUi<"control" | "tagsInput">;
+    placeholder: string;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.theme.d.ts

@@ -0,0 +1,34 @@
+export declare const tagsInputTheme: Record<"tagsInput", {
+    readonly slots: {
+        readonly content: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1";
+        readonly input: "min-w-24 flex-1 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed";
+        readonly remove: "inline-flex shrink-0 items-center justify-center rounded-sm text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed";
+        readonly removeIcon: "size-3.5";
+        readonly tag: "inline-flex max-w-full items-center gap-0.5 rounded-sm bg-vuno-surface-2 px-1.5 text-vuno-body";
+        readonly tagLabel: "truncate";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly input: "text-xs";
+                readonly tag: "text-xs";
+            };
+            readonly sm: {
+                readonly input: "text-sm";
+                readonly tag: "text-xs";
+            };
+            readonly md: {
+                readonly input: "text-sm";
+                readonly tag: "text-sm";
+            };
+            readonly lg: {
+                readonly input: "text-base";
+                readonly tag: "text-sm";
+            };
+            readonly xl: {
+                readonly input: "text-base";
+                readonly tag: "text-base";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.theme.js

@@ -0,0 +1,20 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tagsInputTheme = defineTheme("tagsInput", {
+  slots: {
+    content: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1",
+    input: "min-w-24 flex-1 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed",
+    remove: "inline-flex shrink-0 items-center justify-center rounded-sm text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed",
+    removeIcon: "size-3.5",
+    tag: "inline-flex max-w-full items-center gap-0.5 rounded-sm bg-vuno-surface-2 px-1.5 text-vuno-body",
+    tagLabel: "truncate"
+  },
+  variants: {
+    size: {
+      xs: { input: "text-xs", tag: "text-xs" },
+      sm: { input: "text-sm", tag: "text-xs" },
+      md: { input: "text-sm", tag: "text-sm" },
+      lg: { input: "text-base", tag: "text-sm" },
+      xl: { input: "text-base", tag: "text-base" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+defineOptions({ name: "VunoTagsInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  max: { type: Number, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "tagsInput",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const draft = ref("");
+const inputRef = useTemplateRef("input");
+const tags = computed(() => model.value ?? []);
+const canAdd = computed(() => props.max === void 0 || tags.value.length < props.max);
+function add() {
+  const tag = draft.value.trim();
+  draft.value = "";
+  if (!tag || !canAdd.value || tags.value.includes(tag)) return;
+  model.value = [...tags.value, tag];
+}
+function remove(index) {
+  if (props.disabled) return;
+  model.value = tags.value.filter((_, position) => position !== index);
+  inputRef.value?.focus();
+}
+function onInput(event) {
+  draft.value = event.target.value;
+}
+function onKeydown(event) {
+  if (event.isComposing) return;
+  if ((event.key === "Enter" || event.key === ",") && draft.value.trim()) {
+    event.preventDefault();
+    add();
+    return;
+  }
+  if (event.key === "Backspace" && !draft.value && tags.value.length > 0) {
+    event.preventDefault();
+    remove(tags.value.length - 1);
+  }
+}
+</script>
+
+<template>
+    <ControlShell
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <div
+            :class="ui.content"
+            @click="inputRef?.focus()"
+        >
+            <span
+                v-for="(tag, index) in tags"
+                :key="tag"
+                :class="ui.tag"
+            >
+                <span :class="ui.tagLabel">{{ tag }}</span>
+
+                <button
+                    :aria-label="`${messages.removeItem}: ${tag}`"
+                    :class="ui.remove"
+                    :disabled="props.disabled"
+                    type="button"
+                    @click.stop="remove(index)"
+                >
+                    <Icon
+                        :class="ui.removeIcon"
+                        :name="icons.removeItem"
+                    />
+                </button>
+            </span>
+
+            <input
+                ref="input"
+                v-bind="$attrs"
+                :class="ui.input"
+                :disabled="props.disabled"
+                :placeholder="tags.length === 0 ? props.placeholder : void 0"
+                type="text"
+                :value="draft"
+                @input="onInput"
+                @keydown="onKeydown"
+            />
+        </div>
+    </ControlShell>
+</template>