@leavepulse/ui 0.53.1 → 0.55.0

package/dist/theme/useTheme.d.ts

@@ -15,6 +15,7 @@ export interface RevealOrigin {
     x: number;
     y: number;
 }
+export declare function revealTransition(update: () => void | Promise<void>, origin?: RevealOrigin, durationMs?: number): void;
 export declare function applyThemeWithTransition(theme: TokenSet, origin?: RevealOrigin, root?: HTMLElement, durationMs?: number): void;
 export declare function serializeTheme(theme: TokenSet): string;
 export declare function themeToCssVars(theme: TokenSet): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.53.1",
+  "version": "0.55.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpOtpInput.vue

@@ -14,12 +14,16 @@ export default { inheritAttrs: false }
  * The kit-facing model is a single STRING (the joined code), not reka's per-cell
  * array: `v-model` is "123456", and @complete fires that string once every cell
  * is filled. Digits-only by default (TOTP); flip `alphanumeric` for backup codes.
+ *
+ * The cells share the row rather than keeping a fixed size: each grows to its
+ * size's width and no further, and shrinks with the row when the container is
+ * narrower, so eight cells fit a phone instead of running off its edge.
  */
 import { PinInputInput, PinInputRoot } from "reka-ui"
 import { computed, ref, watch } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { joinCells, splitCode, type OtpCells } from "./otp"
+import { groupBreaks, joinCells, splitCode, upperCells, type OtpCells } from "./otp"
 
 const props = withDefaults(
   defineProps<{
@@ -32,11 +36,19 @@ const props = withDefaults(
     mask?: boolean
     /** Allow letters too (backup codes). Default: digits only (TOTP). */
     alphanumeric?: boolean
+    /**
+     * Turn typed letters into capitals, and open a phone's keyboard in capitals.
+     * Default: on with `alphanumeric`, where codes are printed in capitals and
+     * compared without regard to case; pass `false` for a case-sensitive code.
+     */
+    uppercase?: boolean
+    /** Draw a separator after every `group` cells (e.g. 3 for "123-456"). */
+    group?: number
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean
     size?: "sm" | "md" | "lg"
   }>(),
-  { length: 6, size: "md", alphanumeric: false },
+  { length: 6, size: "md", alphanumeric: false, uppercase: undefined },
 )
 
 const emit = defineEmits<{
@@ -45,6 +57,8 @@ const emit = defineEmits<{
   (e: "complete", value: string): void
 }>()
 
+const upper = computed(() => props.alphanumeric && (props.uppercase ?? true))
+
 // reka models the value as an array of per-cell strings; we bridge to a single
 // string at the boundary so callers never touch the array shape.
 //
@@ -52,7 +66,7 @@ const emit = defineEmits<{
 // string on every render: clearing a middle cell leaves a gap the string cannot
 // express, and re-splitting it shifted every later digit one cell left. The
 // cells are only rebuilt when the model changes from outside.
-const local = ref<string[]>(splitCode(props.modelValue, props.length))
+const local = ref<OtpCells>(splitCode(props.modelValue, props.length))
 let emitted = props.modelValue ?? ""
 watch(
   () => props.modelValue ?? "",
@@ -68,11 +82,13 @@ watch(
     local.value = local.value.slice(0, length)
   },
 )
+// Typed as reka's text-mode array; numeric mode holds numbers and holes, which
+// the helpers in ./otp are written for.
 const cells = computed<string[]>({
-  get: () => local.value,
+  get: () => local.value as string[],
   set: (arr) => {
-    local.value = arr
-    emitted = joinCells(arr)
+    local.value = upper.value ? upperCells(arr) : arr
+    emitted = joinCells(local.value)
     emit("update:modelValue", emitted)
   },
 })
@@ -84,23 +100,53 @@ const field = useFieldControl(() => ({
 }))
 
 function onComplete(arr: OtpCells) {
-  emit("complete", joinCells(arr))
+  emit("complete", joinCells(upper.value ? upperCells(arr) : arr))
+}
+
+const breaks = computed(() => groupBreaks(props.length, props.group))
+
+/*
+ * Backspace, as a phone's keyboard sends it.
+ *
+ * reka handles Backspace on keydown, but an on-screen keyboard reports most
+ * keys as "Unidentified", so its handler never ran there: the browser deleted
+ * the character itself, and reka read the now-empty cell as typed input and
+ * moved the caret FORWARD — and an empty cell could not be backed out of at
+ * all. `beforeinput` names the deletion on every keyboard, so it is done here
+ * the way a hardware Backspace does it: clear this cell, or step back into
+ * the previous one and clear that. A hardware key never reaches this, since
+ * reka's keydown handler cancels it first.
+ */
+const root = ref<{ $el: HTMLElement } | null>(null)
+function onBeforeInput(event: InputEvent, index: number) {
+  if (event.inputType !== "deleteContentBackward") return
+  event.preventDefault()
+  const target = event.target as HTMLInputElement
+  const next = [...local.value]
+  let clear = index
+  if (!target.value && index > 0) {
+    clear = index - 1
+    root.value?.$el.querySelectorAll("input")[clear]?.focus()
+  }
+  // Emptied the way reka empties a cell itself: numeric mode leaves a hole.
+  next[clear] = props.alphanumeric ? "" : undefined
+  cells.value = next as string[]
 }
 
 const cellSize = {
-  sm: "size-9 text-base",
-  md: "size-11 text-lg",
-  lg: "size-13 text-xl",
+  sm: "max-w-9 text-base",
+  md: "max-w-11 text-lg",
+  lg: "max-w-13 text-xl",
 }
 
-// The boxes sit on a fixed gap that a narrow form has to tighten.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex items-center gap-2",
+  "flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2",
 )
 </script>
 
 <template>
   <PinInputRoot
+    ref="root"
     v-model="cells"
     :type="alphanumeric ? 'text' : 'number'"
     :mask="mask"
@@ -110,21 +156,31 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     v-bind="rest"
     @complete="onComplete"
   >
-    <PinInputInput
-      v-for="i in length"
-      :key="i"
-      :index="i - 1"
-      :id="i === 1 ? field.id : undefined"
-      :aria-invalid="field.invalid || undefined"
-      :aria-describedby="field.describedBy"
-      :class="[
-        cellSize[size],
-        'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
-        'outline-none transition-colors duration-[var(--duration-fast)]',
-        'focus:border-brand focus:ring-2 focus:ring-ring',
-        'disabled:cursor-not-allowed disabled:opacity-55',
-        field.invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
-      ]"
-    />
+    <template v-for="i in length" :key="i">
+      <PinInputInput
+        :index="i - 1"
+        :id="i === 1 ? field.id : undefined"
+        :aria-invalid="field.invalid || undefined"
+        :aria-describedby="field.describedBy"
+        :autocapitalize="upper ? 'characters' : 'none'"
+        autocorrect="off"
+        :spellcheck="false"
+        :class="[
+          cellSize[size],
+          'aspect-square h-auto min-w-0 flex-1 basis-0 p-0',
+          'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
+          'outline-none transition-colors duration-[var(--duration-fast)]',
+          'focus:border-brand focus:ring-2 focus:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-55',
+          field.invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
+        ]"
+        @beforeinput="onBeforeInput($event as InputEvent, i - 1)"
+      />
+      <span
+        v-if="breaks.has(i - 1)"
+        aria-hidden="true"
+        class="h-0.5 w-2 shrink-0 rounded-full bg-muted opacity-60"
+      />
+    </template>
   </PinInputRoot>
 </template>

package/src/components/LpTabs.vue

@@ -10,6 +10,8 @@ export interface TabItem {
   label: string
   /** Optional iconify name (e.g. "lucide:palette"), shown left of the label. */
   icon?: string
+  /** A small dot on the tab: something behind it wants a look (unread, a problem). */
+  dot?: boolean
 }
 
 const props = withDefaults(
@@ -24,15 +26,23 @@ const props = withDefaults(
      * sliding pill marking the active one (for nav bars over a custom surface).
      * "underline" is a flat row over a hairline baseline, marking the active
      * tab with a sliding bottom bar instead of a pill (page-section nav style).
+     * "bottom" is a phone's bottom navigation: full width, equal-share tabs
+     * with the icon over the label, a sliding bar along the top edge marking
+     * the active one, and padding for the gesture strip and side insets of an
+     * edge-to-edge screen. Place it as the last row of the layout.
      */
-    variant?: "contained" | "plain" | "underline"
+    variant?: "contained" | "plain" | "underline" | "bottom"
     /** Tint the active pill + label with the brand colour (nav-bar style). */
     accent?: boolean
     /** Stretch the bar to full width with equal-share triggers. */
     block?: boolean
+    /** Accessible name of the tab list, e.g. "Main" for an app's navigation. */
+    label?: string
   }>(),
   { variant: "contained", accent: false, block: false },
 )
+
+const bottom = computed(() => props.variant === "bottom")
 const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 // Held here rather than left to reka, so the active marker follows the active
@@ -88,7 +98,11 @@ const panelLayoutTransition = computed(() =>
     : { type: "spring" as const, stiffness: 520, damping: 42, mass: 0.9 },
 )
 
+// A bottom bar marks only the active tab: on a phone a tap is the hover, and
+// a bar that chased the mouse across a desktop window would point at a tab
+// nobody chose.
 function pillUnder(value: string, active?: string): boolean {
+  if (bottom.value) return active === value
   return hovered.value ? hovered.value === value : active === value
 }
 
@@ -119,30 +133,38 @@ function releaseFocusAfterPointer(event: PointerEvent) {
   >
     <TabsList
       ref="list"
-      class="max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-      :class="[
-        block ? 'flex w-full' : 'inline-flex',
-        variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
-        variant === 'underline' ? 'border-b border-line' : '',
-      ]"
+      :aria-label="label"
+      :class="bottom
+        ? 'grid w-full auto-cols-fr grid-flow-col border-t border-line bg-surface pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]'
+        : [
+            'max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            block ? 'flex w-full' : 'inline-flex',
+            variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
+            variant === 'underline' ? 'border-b border-line' : '',
+          ]"
       @pointerleave="hovered = null"
     >
       <TabsTrigger
         v-for="item in items"
         :key="item.value"
         :value="item.value"
-        class="relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        class="relative inline-flex items-center justify-center outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
         :class="[
-          block ? 'flex-1' : '',
-          variant === 'underline' ? 'rounded-t-md px-3 pt-1.5 pb-2' : 'rounded-md px-3 py-1.5',
+          bottom
+            ? 'min-h-14 min-w-0 flex-col gap-0.5 px-1 py-1.5 text-[11px] font-medium focus-visible:ring-inset'
+            : 'shrink-0 gap-1.5 whitespace-nowrap text-sm',
+          block && !bottom ? 'flex-1' : '',
+          variant === 'underline' ? 'rounded-t-md px-3 pt-1.5 pb-2' : '',
+          variant === 'contained' || variant === 'plain' ? 'rounded-md px-3 py-1.5' : '',
           accent ? 'data-[state=active]:text-brand' : 'data-[state=active]:text-ink',
-          hovered === item.value ? 'text-ink' : 'text-muted',
+          hovered === item.value && !bottom ? 'text-ink' : 'text-muted',
         ]"
         @pointerenter="hovered = item.value"
         @pointerup="releaseFocusAfterPointer"
       >
-        <!-- Active marker: a bottom bar in "underline", a filled pill otherwise.
-             Both slide between tabs via the shared motion layoutId. -->
+        <!-- Active marker: a bar under the tab in "underline", over it in
+             "bottom", a filled pill otherwise. All slide between tabs via the
+             shared motion layoutId. -->
         <Motion
           v-if="pillUnder(item.value, current)"
           :layout-id="pillId"
@@ -152,15 +174,32 @@ function releaseFocusAfterPointer(event: PointerEvent) {
                 'absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full',
                 accent ? 'bg-brand' : 'bg-ink',
               ]
-            : [
-                'absolute inset-0 z-0 rounded-md shadow-sm',
-                accent
-                  ? 'border border-brand/35 bg-brand/12'
-                  : 'border border-line bg-surface-raised',
-              ]"
+            : bottom
+              ? [
+                  'absolute inset-x-[22%] top-0 z-0 h-0.5 rounded-b-full',
+                  accent ? 'bg-brand' : 'bg-ink',
+                ]
+              : [
+                  'absolute inset-0 z-0 rounded-md shadow-sm',
+                  accent
+                    ? 'border border-brand/35 bg-brand/12'
+                    : 'border border-line bg-surface-raised',
+                ]"
+        />
+        <span v-if="item.icon" class="relative z-10 inline-flex">
+          <LpIcon :name="item.icon" :size="bottom ? 22 : 14" />
+          <span
+            v-if="item.dot"
+            aria-hidden="true"
+            class="absolute -right-1 -top-0.5 size-2 rounded-full bg-accent"
+          />
+        </span>
+        <span class="relative z-10" :class="bottom ? 'max-w-full truncate' : ''">{{ item.label }}</span>
+        <span
+          v-if="item.dot && !item.icon"
+          aria-hidden="true"
+          class="relative z-10 size-1.5 self-start rounded-full bg-accent"
         />
-        <LpIcon v-if="item.icon" :name="item.icon" :size="14" class="relative z-10" />
-        <span class="relative z-10">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>
 

package/src/components/LpThemeProvider.vue

@@ -1,4 +1,16 @@
 <script lang="ts">
+// The last press anywhere on the page: a theme change triggered by a toggle
+// reveals from the toggle the user just pressed.
+const PRESS_FRESH_MS = 1500
+let lastPress: { x: number; y: number; at: number } | null = null
+if (typeof window !== "undefined") {
+  window.addEventListener(
+    "pointerdown",
+    (event) => (lastPress = { x: event.clientX, y: event.clientY, at: performance.now() }),
+    { capture: true, passive: true },
+  )
+}
+
 export default { inheritAttrs: false }
 </script>
 
@@ -9,10 +21,14 @@ export default { inheritAttrs: false }
  * keeps its own look. Every token is declared on this element, derived ones
  * included, so kit components inside re-skin while the page around them keeps
  * the global theme. Nothing is persisted; this is presentation only.
+ *
+ * With `transition`, a change of `theme` repaints the subtree behind the same
+ * circular reveal the global theme switch uses, growing from where the user
+ * last pressed, or from the subtree's centre.
  */
-import { computed, type Component } from "vue"
+import { computed, nextTick, ref, shallowRef, watch, type Component, type ComponentPublicInstance } from "vue"
 import type { TokenSet } from "../theme/tokens"
-import { themeEntries } from "../theme/useTheme"
+import { revealTransition, themeEntries, type RevealOrigin } from "../theme/useTheme"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -20,22 +36,49 @@ const props = withDefaults(
     theme: TokenSet
     /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
     as?: string | Component
+    /** Reveal a change of `theme` with the circular transition. */
+    transition?: boolean
   }>(),
-  { as: "div" },
+  { as: "div", transition: false },
 )
 
 // Paints its own surface and text so the scoped theme reads as one; a class
 // like `bg-transparent` overrides that.
 const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink")
 
+const root = ref<HTMLElement | ComponentPublicInstance | null>(null)
+const shown = shallowRef(props.theme)
+
 const style = computed(() => ({
-  ...Object.fromEntries(themeEntries(props.theme)),
-  colorScheme: props.theme.mode,
+  ...Object.fromEntries(themeEntries(shown.value)),
+  colorScheme: shown.value.mode,
 }))
+
+function originOf(): RevealOrigin | undefined {
+  if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress
+  const value = root.value
+  const el = value instanceof HTMLElement ? value : (value?.$el as Element | undefined)
+  const box = el?.getBoundingClientRect?.()
+  return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : undefined
+}
+
+watch(
+  () => props.theme,
+  (next) => {
+    if (!props.transition) {
+      shown.value = next
+      return
+    }
+    revealTransition(async () => {
+      shown.value = next
+      await nextTick()
+    }, originOf())
+  },
+)
 </script>
 
 <template>
-  <component :is="as" :style="style" :data-theme-mode="theme.mode" :class="rootClass" v-bind="rest">
+  <component :is="as" ref="root" :style="style" :data-theme-mode="shown.mode" :class="rootClass" v-bind="rest">
     <slot />
   </component>
 </template>

package/src/components/otp.ts

@@ -14,3 +14,32 @@ export function joinCells(cells: OtpCells): string {
 export function splitCode(code: string | undefined, length: number): string[] {
   return (code ?? "").split("").slice(0, length)
 }
+
+/*
+ * Upper-case every filled cell, keeping the holes where they are.
+ *
+ * A phone opens its keyboard in lower case while backup and pairing codes are
+ * printed in capitals, so a code typed letter by letter came out "ab12cd"
+ * against an "AB12CD" on screen: a difference the reader cannot fix by looking,
+ * and one a server comparing exactly rejects.
+ */
+export function upperCells<T extends OtpCells>(cells: T): T {
+  const out = [] as unknown as T
+  cells.forEach((c, i) => {
+    out[i] = typeof c === "string" ? c.toUpperCase() : c
+  })
+  out.length = cells.length
+  return out
+}
+
+/*
+ * The cell indexes a group separator follows: after every `group` cells, never
+ * after the last. Eight characters are read and copied as two blocks of four,
+ * which is how such codes are printed, far more easily than as one row.
+ */
+export function groupBreaks(length: number, group: number | undefined): Set<number> {
+  const breaks = new Set<number>()
+  if (!group || group < 1 || group >= length) return breaks
+  for (let i = group; i < length; i += group) breaks.add(i - 1)
+  return breaks
+}

package/src/index.ts

@@ -245,6 +245,7 @@ export type { UseLayout, UseLayoutOptions } from "./layout/useLayout"
 export {
   applyTheme,
   applyThemeWithTransition,
+  revealTransition,
   bootstrapTheme,
   parseTheme,
   serializeTheme,

package/src/theme/useTheme.ts

@@ -167,30 +167,28 @@ export interface RevealOrigin {
 }
 
 type ViewTransitionDocument = Document & {
-  startViewTransition?: (cb: () => void) => { ready: Promise<void>; finished: Promise<void> }
+  startViewTransition?: (cb: () => void | Promise<void>) => { ready: Promise<void>; finished: Promise<void> }
 }
 
 /*
- * Apply a theme with the "circular reveal" transition — a clip-path circle
- * grows from `origin` (usually the toggle button's centre), repainting the page
- * underneath. Uses the View Transitions API; falls back to a plain applyTheme
- * when it's unsupported or the user prefers reduced motion (so behaviour is
- * identical, just without the animation). The actual token write still happens
- * through applyTheme, so this stays a thin wrapper — no duplicated var logic.
+ * Run `update` behind a "circular reveal": a clip-path circle grows from
+ * `origin` (viewport px, the centre when omitted) and shows the repainted page
+ * underneath. Only what `update` changed looks different, so repainting one
+ * subtree reveals just that subtree. Uses the View Transitions API and falls
+ * back to a plain update when it's unsupported or the user prefers reduced
+ * motion. `update` may be async (a framework flush); the snapshot waits for it.
  */
-export function applyThemeWithTransition(
-  theme: TokenSet,
+export function revealTransition(
+  update: () => void | Promise<void>,
   origin?: RevealOrigin,
-  root: HTMLElement = document.documentElement,
   durationMs = 480,
 ): void {
   const doc = document as ViewTransitionDocument
   if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
-    applyTheme(theme, root)
+    void update()
     return
   }
 
-  // Centre of the viewport is the default origin if no click point is given.
   const x = origin?.x ?? window.innerWidth / 2
   const y = origin?.y ?? window.innerHeight / 2
   // Radius that reaches the farthest viewport corner from the origin.
@@ -199,13 +197,15 @@ export function applyThemeWithTransition(
     Math.max(y, window.innerHeight - y),
   )
 
-  const transition = doc.startViewTransition(() => applyTheme(theme, root))
+  const transition = doc.startViewTransition(update)
   transition.ready.then(() => {
     // Animate the OLD snapshot shrinking to a point, revealing the (already
     // repainted) live page underneath through the growing hole. Clipping the
     // old layer — not growing the new one — avoids a one-frame flash of the new
     // theme before the circle starts, which read as the theme "changing twice".
-    root.animate(
+    // The pseudo-elements belong to the document element whatever was updated,
+    // so the animation always targets it.
+    document.documentElement.animate(
       {
         clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`],
       },
@@ -224,6 +224,20 @@ export function applyThemeWithTransition(
   })
 }
 
+/*
+ * Apply a theme with the circular reveal, usually from the toggle button's
+ * centre. `root` scopes the theme to a subtree; the reveal still runs on the
+ * document, since that is where the transition snapshots live.
+ */
+export function applyThemeWithTransition(
+  theme: TokenSet,
+  origin?: RevealOrigin,
+  root: HTMLElement = document.documentElement,
+  durationMs = 480,
+): void {
+  revealTransition(() => applyTheme(theme, root), origin, durationMs)
+}
+
 export function serializeTheme(theme: TokenSet): string {
   return JSON.stringify(theme)
 }

package/dist/chunks/LpOtpInput-CziPF3Oq.js

@@ -1,99 +0,0 @@
-import { defineComponent, ref, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, normalizeClass } from "vue";
-import { PinInputRoot, PinInputInput } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { splitCode, joinCells } from "../components/otp.js";
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpOtpInput",
-  props: {
-    modelValue: {},
-    length: { default: 6 },
-    disabled: { type: Boolean },
-    mask: { type: Boolean },
-    alphanumeric: { type: Boolean, default: false },
-    invalid: { type: Boolean },
-    size: { default: "md" }
-  },
-  emits: ["update:modelValue", "complete"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const local = ref(splitCode(props.modelValue, props.length));
-    let emitted = props.modelValue ?? "";
-    watch(
-      () => props.modelValue ?? "",
-      (value) => {
-        if (value === emitted) return;
-        emitted = value;
-        local.value = splitCode(value, props.length);
-      }
-    );
-    watch(
-      () => props.length,
-      (length) => {
-        local.value = local.value.slice(0, length);
-      }
-    );
-    const cells = computed({
-      get: () => local.value,
-      set: (arr) => {
-        local.value = arr;
-        emitted = joinCells(arr);
-        emit("update:modelValue", emitted);
-      }
-    });
-    const field = useFieldControl(() => ({
-      wrapped: false,
-      invalid: props.invalid,
-      disabled: props.disabled
-    }));
-    function onComplete(arr) {
-      emit("complete", joinCells(arr));
-    }
-    const cellSize = {
-      sm: "size-9 text-base",
-      md: "size-11 text-lg",
-      lg: "size-13 text-xl"
-    };
-    const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "flex items-center gap-2"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(PinInputRoot), mergeProps({
-        modelValue: cells.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => cells.value = $event),
-        type: __props.alphanumeric ? "text" : "number",
-        mask: __props.mask,
-        disabled: unref(field).disabled,
-        otp: "",
-        class: unref(rootClass)
-      }, unref(rest), { onComplete }), {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (i) => {
-            return openBlock(), createBlock(unref(PinInputInput), {
-              key: i,
-              index: i - 1,
-              id: i === 1 ? unref(field).id : void 0,
-              "aria-invalid": unref(field).invalid || void 0,
-              "aria-describedby": unref(field).describedBy,
-              class: normalizeClass([
-                cellSize[__props.size],
-                "rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand",
-                "outline-none transition-colors duration-[var(--duration-fast)]",
-                "focus:border-brand focus:ring-2 focus:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-55",
-                unref(field).invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"
-              ])
-            }, null, 8, ["index", "id", "aria-invalid", "aria-describedby", "class"]);
-          }), 128))
-        ]),
-        _: 1
-      }, 16, ["modelValue", "type", "mask", "disabled", "class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};