@brumaombra/ui-vintage 0.7.13 → 0.8.0

package/src/components/ui/kbd/Kbd.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    pressed?: boolean;
+}>();
+</script>
+
+<template>
+    <kbd data-slot="kbd" :data-pressed="props.pressed ? '' : undefined" :class="cn(
+        'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
+        'data-pressed:translate-y-px data-pressed:border-b data-pressed:shadow-none',
+        props.class
+    )
+        ">
+        <slot />
+    </kbd>
+</template>

package/src/components/ui/kbd/KbdGroup.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { onMounted, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import Kbd from './Kbd.vue';
+
+// Props
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    keys?: string[];
+    pressed?: boolean;
+}>();
+
+// Default to non-Mac glyphs so SSR output is stable, then refine on the client
+const isMac = ref(false);
+
+onMounted(() => {
+    isMac.value = /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+});
+
+// Map special key names to their display glyph
+const formatKey = (key: string) => {
+    switch (key.toLowerCase()) {
+        case 'mod':
+            return isMac.value ? '⌘' : 'Ctrl';
+        case 'cmd':
+        case 'meta':
+            return isMac.value ? '⌘' : 'Win';
+        case 'ctrl':
+        case 'control':
+            return isMac.value ? '⌃' : 'Ctrl';
+        case 'shift':
+            return '⇧';
+        case 'alt':
+        case 'option':
+            return isMac.value ? '⌥' : 'Alt';
+        case 'enter':
+        case 'return':
+            return '↵';
+        case 'esc':
+        case 'escape':
+            return 'Esc';
+        case 'tab':
+            return 'Tab';
+        case 'backspace':
+            return '⌫';
+        case 'up':
+            return '↑';
+        case 'down':
+            return '↓';
+        case 'left':
+            return '←';
+        case 'right':
+            return '→';
+        case 'space':
+            return 'Space';
+        default:
+            return key.length === 1 ? key.toUpperCase() : key;
+    }
+};
+</script>
+
+<template>
+    <span data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+        <slot>
+            <!-- Keys rendered from the keys prop -->
+            <Kbd v-for="(key, index) in props.keys ?? []" :key="`${key}-${index}`" :pressed="props.pressed">
+                {{ formatKey(key) }}
+            </Kbd>
+        </slot>
+    </span>
+</template>

package/src/components/ui/kbd/index.ts

@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.vue';
+export { default as KbdGroup } from './KbdGroup.vue';

package/src/components/ui/number-field/NumberField.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MinusSignIcon, PlusSignIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<NumberFieldRootProps & {
+    placeholder?: string;
+    decrementLabel?: string;
+    incrementLabel?: string;
+    class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<NumberFieldRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inputClass', 'placeholder', 'decrementLabel', 'incrementLabel');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { t } = useI18n();
+const resolvedDecrementLabel = computed(() => props.decrementLabel || t('uiVintage.numberField.decrement'));
+const resolvedIncrementLabel = computed(() => props.incrementLabel || t('uiVintage.numberField.increment'));
+
+const viewportRef = ref<HTMLElement | null>(null);
+const ghostRef = ref<HTMLElement | null>(null);
+const ghostText = ref('');
+const lastValue = ref<number | null | undefined>(props.modelValue ?? props.defaultValue);
+let ghostAnimation: Animation | null = null;
+
+// Keep the reference value in sync with external model updates
+watch(() => props.modelValue, (value) => {
+    lastValue.value = value;
+});
+
+// Slide the new digits in (and the old ones out) in the direction of the change
+const animateChange = async (value: number) => {
+    const previous = lastValue.value;
+    lastValue.value = value;
+
+    const input = viewportRef.value?.querySelector('input');
+    if (!input || typeof window === 'undefined' || previous === null || previous === undefined || Number.isNaN(previous) || Number.isNaN(value)) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    // The DOM still shows the previous text at this point
+    const previousText = input.value;
+    const direction = value > previous ? 1 : -1;
+    ghostAnimation?.cancel();
+    ghostText.value = previousText;
+    await nextTick();
+
+    // Skip when the text did not visibly change (e.g. a typed value committed on blur)
+    if (input.value === previousText) {
+        ghostText.value = '';
+        return;
+    }
+
+    const options: KeyframeAnimationOptions = { duration: 320, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' };
+    input.animate([
+        { transform: `translateY(${direction * 60}%)`, opacity: 0, filter: 'blur(2px)' },
+        { transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' }
+    ], options);
+
+    if (ghostRef.value) {
+        ghostAnimation = ghostRef.value.animate([
+            { transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' },
+            { transform: `translateY(${direction * -60}%)`, opacity: 0, filter: 'blur(2px)' }
+        ], { ...options, duration: 220, fill: 'forwards' });
+        ghostAnimation.onfinish = () => {
+            ghostText.value = '';
+        };
+    }
+};
+</script>
+
+<template>
+    <NumberFieldRoot v-slot="slotProps" data-slot="number-field" v-bind="forwarded" :class="cn(
+        'uv-field flex h-13 w-full items-center gap-1 rounded border border-input bg-secondary px-1.5 text-foreground shadow-elevated-sm',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-60 aria-invalid:animate-uv-shake',
+        props.class
+    )" @update:model-value="animateChange">
+        <!-- Decrement button -->
+        <NumberFieldDecrement data-slot="number-field-decrement" :aria-label="resolvedDecrementLabel" :class="cn(
+            'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+            '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
+            'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+            'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
+        )">
+            <slot name="decrement-icon">
+                <HugeiconsIcon :icon="MinusSignIcon" class="size-4" />
+            </slot>
+        </NumberFieldDecrement>
+
+        <!-- Value viewport (clips the sliding digits) -->
+        <div ref="viewportRef" class="relative flex h-full min-w-0 flex-1 items-center overflow-hidden">
+            <NumberFieldInput data-slot="number-field-input" :placeholder="props.placeholder" :class="cn(
+                'h-full w-full min-w-0 bg-transparent text-center text-xs font-semibold tabular-nums text-foreground outline-none sm:text-sm',
+                'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 disabled:cursor-not-allowed',
+                props.inputClass
+            )" />
+
+            <!-- Outgoing value ghost (decorative) -->
+            <span v-if="ghostText" ref="ghostRef" aria-hidden="true" :class="cn(
+                'pointer-events-none absolute inset-0 flex items-center justify-center text-xs font-semibold tabular-nums text-foreground sm:text-sm',
+                props.inputClass
+            )">{{ ghostText }}</span>
+        </div>
+
+        <!-- Increment button -->
+        <NumberFieldIncrement data-slot="number-field-increment" :aria-label="resolvedIncrementLabel" :class="cn(
+            'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+            '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
+            'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+            'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
+        )">
+            <slot name="increment-icon">
+                <HugeiconsIcon :icon="PlusSignIcon" class="size-4" />
+            </slot>
+        </NumberFieldIncrement>
+
+        <!-- Extra content (e.g. hidden inputs) -->
+        <slot v-bind="slotProps" />
+    </NumberFieldRoot>
+</template>

package/src/components/ui/number-field/index.ts

@@ -0,0 +1 @@
+export { default as NumberField } from './NumberField.vue';

package/src/components/ui/pagination/Pagination.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationRoot, useForwardPropsEmits } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<PaginationRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<PaginationRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationRoot v-slot="slotProps" data-slot="pagination" :aria-label="t('uiVintage.pagination.label')" v-bind="forwarded" :class="cn('mx-auto flex w-full justify-center', props.class)">
+        <slot v-bind="slotProps" />
+    </PaginationRoot>
+</template>

package/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PaginationListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationList } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<PaginationListProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <PaginationList v-slot="slotProps" data-slot="pagination-content" v-bind="delegatedProps" :class="cn('flex flex-row flex-wrap items-center justify-center gap-1.5', props.class)">
+        <slot v-bind="slotProps" />
+    </PaginationList>
+</template>

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationEllipsis } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<PaginationEllipsisProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationEllipsis data-slot="pagination-ellipsis" v-bind="delegatedProps" :class="cn('flex size-10 items-center justify-center text-muted-foreground', props.class)">
+        <!-- Default slot content -->
+        <slot>
+            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
+        </slot>
+
+        <!-- Screen reader text for accessibility -->
+        <span class="sr-only">{{ t('uiVintage.pagination.more') }}</span>
+    </PaginationEllipsis>
+</template>

package/src/components/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { ArrowLeftDoubleIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationFirst } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
+
+// Props
+const props = withDefaults(defineProps<PaginationFirstProps & {
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'icon-sm',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationFirst data-slot="pagination-first" :aria-label="t('uiVintage.pagination.first')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowLeftDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
+        </slot>
+    </PaginationFirst>
+</template>

package/src/components/ui/pagination/PaginationItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationListItem } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
+
+// Props
+const props = withDefaults(defineProps<PaginationListItemProps & {
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'icon-sm',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationListItem data-slot="pagination-item" :aria-label="t('uiVintage.pagination.page', { page: props.value })" v-bind="delegatedProps" :class="cn(
+        buttonVariants({ variant: 'secondary', size: props.size }),
+        'tabular-nums',
+        'data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-selected:shadow-glow data-selected:hover:border-primary data-selected:hover:bg-primary-hover',
+        'data-selected:animate-[uv-pagination-pop_380ms_var(--ease-bounce)]',
+        props.class
+    )">
+        <slot>{{ props.value }}</slot>
+    </PaginationListItem>
+</template>
+
+<style>
+@keyframes uv-pagination-pop {
+    0% { transform: scale(0.82); }
+    100% { transform: scale(1); }
+}
+</style>

package/src/components/ui/pagination/PaginationLast.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { ArrowRightDoubleIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationLast } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
+
+// Props
+const props = withDefaults(defineProps<PaginationLastProps & {
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'icon-sm',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationLast data-slot="pagination-last" :aria-label="t('uiVintage.pagination.last')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowRightDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
+        </slot>
+    </PaginationLast>
+</template>

package/src/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationNext } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
+
+// Props
+const props = withDefaults(defineProps<PaginationNextProps & {
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'icon-sm',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationNext data-slot="pagination-next" :aria-label="t('uiVintage.pagination.next')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
+        </slot>
+    </PaginationNext>
+</template>

package/src/components/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationPrev } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
+
+// Props
+const props = withDefaults(defineProps<PaginationPrevProps & {
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'icon-sm',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <PaginationPrev data-slot="pagination-previous" :aria-label="t('uiVintage.pagination.previous')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
+        </slot>
+    </PaginationPrev>
+</template>

package/src/components/ui/pagination/SimplePagination.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import Pagination from './Pagination.vue';
+import PaginationContent from './PaginationContent.vue';
+import PaginationEllipsis from './PaginationEllipsis.vue';
+import PaginationFirst from './PaginationFirst.vue';
+import PaginationItem from './PaginationItem.vue';
+import PaginationLast from './PaginationLast.vue';
+import PaginationNext from './PaginationNext.vue';
+import PaginationPrevious from './PaginationPrevious.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+    total: number;
+    itemsPerPage?: number;
+    siblingCount?: number;
+    showEdges?: boolean;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    itemsPerPage: 10,
+    siblingCount: 1,
+    showEdges: true,
+    disabled: false,
+});
+
+// Current page (1-based, v-model:page)
+const page = defineModel<number>('page', { default: 1 });
+</script>
+
+<template>
+    <Pagination v-model:page="page" :total="props.total" :items-per-page="props.itemsPerPage" :sibling-count="props.siblingCount" :show-edges="props.showEdges" :disabled="props.disabled" :class="props.class">
+        <PaginationContent v-slot="{ items }">
+            <!-- Jump to start / previous -->
+            <PaginationFirst class="hidden sm:inline-flex" />
+            <PaginationPrevious />
+
+            <!-- Page numbers and gaps -->
+            <template v-for="(item, index) in items" :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
+                <PaginationItem v-if="item.type === 'page'" :value="item.value" />
+                <PaginationEllipsis v-else />
+            </template>
+
+            <!-- Next / jump to end -->
+            <PaginationNext />
+            <PaginationLast class="hidden sm:inline-flex" />
+        </PaginationContent>
+    </Pagination>
+</template>

package/src/components/ui/pagination/index.ts

@@ -0,0 +1,9 @@
+export { default as Pagination } from './Pagination.vue';
+export { default as PaginationContent } from './PaginationContent.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationItem } from './PaginationItem.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrevious } from './PaginationPrevious.vue';
+export { default as SimplePagination } from './SimplePagination.vue';

package/src/components/ui/pin-input/PinInput.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed, provide } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { pinInputContextKey } from './context';
+import PinInputInput from './PinInputInput.vue';
+
+// Props
+const props = defineProps<PinInputRootProps<Type> & {
+    length?: number;
+    invalid?: boolean;
+    separatorAfter?: number;
+    class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<PinInputRootEmits<Type>>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inputClass', 'length', 'invalid', 'separatorAfter');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+// Share the invalid state with the cells (also when they are passed through the slot)
+provide(pinInputContextKey, {
+    invalid: computed(() => !!props.invalid)
+});
+</script>
+
+<template>
+    <PinInputRoot v-slot="slotProps" data-slot="pin-input" v-bind="forwarded" :aria-invalid="props.invalid || undefined" :class="cn(
+        'flex items-center gap-2 has-disabled:opacity-60',
+        props.invalid && 'animate-uv-shake',
+        props.class
+    )">
+        <slot v-bind="slotProps">
+            <!-- Auto-rendered cells -->
+            <template v-for="index in props.length ?? 0" :key="index">
+                <PinInputInput :index="index - 1" :class="props.inputClass" />
+
+                <!-- Separator -->
+                <span v-if="props.separatorAfter === index - 1 && index < (props.length ?? 0)" data-slot="pin-input-separator" aria-hidden="true" class="mx-0.5 h-0.5 w-3 shrink-0 rounded-full bg-border-strong" />
+            </template>
+        </slot>
+    </PinInputRoot>
+</template>

package/src/components/ui/pin-input/PinInputInput.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed, inject } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { injectPinInputRootContext, PinInputInput, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { pinInputContextKey } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+// Props
+const props = defineProps<PinInputInputProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+
+const rootContext = injectPinInputRootContext();
+const pinInputContext = inject(pinInputContextKey, null);
+
+// Current character of this cell
+const cellValue = computed(() => {
+    const value = rootContext.currentModelValue.value[props.index];
+    return value === undefined || value === null ? '' : String(value);
+});
+const isFilled = computed(() => cellValue.value !== '');
+const displayValue = computed(() => (rootContext.mask.value ? '•' : cellValue.value));
+const isInvalid = computed(() => pinInputContext?.invalid.value || undefined);
+</script>
+
+<template>
+    <span data-slot="pin-input-cell" class="relative inline-flex shrink-0">
+        <!-- Native input (text is transparent, the overlay below renders the character) -->
+        <PinInputInput data-slot="pin-input-input" v-bind="{ ...$attrs, ...forwardedProps }" :aria-invalid="isInvalid" :data-filled="isFilled ? '' : undefined" :class="cn(
+            'uv-field size-12 rounded border border-input bg-secondary text-center text-lg font-bold text-transparent caret-primary shadow-elevated-sm outline-none sm:size-13',
+            'placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary/25',
+            'data-filled:border-primary/60 data-filled:bg-primary/5',
+            'disabled:cursor-not-allowed disabled:opacity-60',
+            props.class
+        )" />
+
+        <!-- Animated character (re-keyed on every value so it pops) -->
+        <span v-if="isFilled" :key="cellValue" aria-hidden="true" class="pointer-events-none absolute inset-0 flex animate-uv-pop items-center justify-center text-lg font-bold text-foreground">
+            {{ displayValue }}
+        </span>
+    </span>
+</template>

package/src/components/ui/pin-input/context.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+// Shared state provided by PinInput to its cells
+export interface PinInputContext {
+    invalid: ComputedRef<boolean>;
+}
+
+export const pinInputContextKey: InjectionKey<PinInputContext> = Symbol('uvPinInput');