@leavepulse/ui 0.53.1 → 0.55.0

package/README.md

@@ -61,7 +61,9 @@ useTheme().setSystem({ light, dark }) // follow the OS colour scheme
 ```
 
 `LpThemeProvider` applies a theme to one subtree only (a dark sidebar in a light
-app, a live preview).
+app, a live preview). With `transition`, changing its `theme` reveals the new one
+with the same circular transition as the page switch, from where the user last
+pressed. `revealTransition(update, origin)` runs any repaint behind that reveal.
 
 ### App-wide configuration
 

package/dist/chunks/LpOtpInput-PbeNJ5In.js

@@ -0,0 +1,131 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, createVNode, normalizeClass, createCommentVNode } from "vue";
+import { PinInputRoot, PinInputInput } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { splitCode, upperCells, joinCells, groupBreaks } from "../components/otp.js";
+const _hoisted_1 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "h-0.5 w-2 shrink-0 rounded-full bg-muted opacity-60"
+};
+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 },
+    uppercase: { type: Boolean, default: void 0 },
+    group: {},
+    invalid: { type: Boolean },
+    size: { default: "md" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const upper = computed(() => props.alphanumeric && (props.uppercase ?? true));
+    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 = upper.value ? upperCells(arr) : arr;
+        emitted = joinCells(local.value);
+        emit("update:modelValue", emitted);
+      }
+    });
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    function onComplete(arr) {
+      emit("complete", joinCells(upper.value ? upperCells(arr) : arr));
+    }
+    const breaks = computed(() => groupBreaks(props.length, props.group));
+    const root = ref(null);
+    function onBeforeInput(event, index) {
+      if (event.inputType !== "deleteContentBackward") return;
+      event.preventDefault();
+      const target = event.target;
+      const next = [...local.value];
+      let clear = index;
+      if (!target.value && index > 0) {
+        clear = index - 1;
+        root.value?.$el.querySelectorAll("input")[clear]?.focus();
+      }
+      next[clear] = props.alphanumeric ? "" : void 0;
+      cells.value = next;
+    }
+    const cellSize = {
+      sm: "max-w-9 text-base",
+      md: "max-w-11 text-lg",
+      lg: "max-w-13 text-xl"
+    };
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PinInputRoot), mergeProps({
+        ref_key: "root",
+        ref: root,
+        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(), createElementBlock(Fragment, { key: i }, [
+              createVNode(unref(PinInputInput), {
+                index: i - 1,
+                id: i === 1 ? unref(field).id : void 0,
+                "aria-invalid": unref(field).invalid || void 0,
+                "aria-describedby": unref(field).describedBy,
+                autocapitalize: upper.value ? "characters" : "none",
+                autocorrect: "off",
+                spellcheck: false,
+                class: normalizeClass([
+                  cellSize[__props.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",
+                  unref(field).invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"
+                ]),
+                onBeforeinput: ($event) => onBeforeInput($event, i - 1)
+              }, null, 8, ["index", "id", "aria-invalid", "aria-describedby", "autocapitalize", "class", "onBeforeinput"]),
+              breaks.value.has(i - 1) ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["modelValue", "type", "mask", "disabled", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTabs-UM0FQmPA.js → LpTabs-BMSBB78h.js}

@@ -1,9 +1,22 @@
-import { defineComponent, ref, watch, nextTick, useId, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, computed, ref, watch, nextTick, useId, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { useReducedMotion, Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
-const _hoisted_1 = { class: "relative z-10" };
+const _hoisted_1 = {
+  key: 1,
+  class: "relative z-10 inline-flex"
+};
+const _hoisted_2 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "absolute -right-1 -top-0.5 size-2 rounded-full bg-accent"
+};
+const _hoisted_3 = {
+  key: 2,
+  "aria-hidden": "true",
+  class: "relative z-10 size-1.5 self-start rounded-full bg-accent"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
@@ -12,11 +25,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     items: {},
     variant: { default: "contained" },
     accent: { type: Boolean, default: false },
-    block: { type: Boolean, default: false }
+    block: { type: Boolean, default: false },
+    label: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const bottom = computed(() => props.variant === "bottom");
     const emit = __emit;
     const current = ref(props.modelValue ?? props.defaultValue ?? props.items[0]?.value);
     watch(
@@ -50,6 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 42, mass: 0.9 }
     );
     function pillUnder(value, active) {
+      if (bottom.value) return active === value;
       return hovered.value ? hovered.value === value : active === value;
     }
     function releaseFocusAfterPointer(event) {
@@ -65,11 +81,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(TabsList), {
             ref_key: "list",
             ref: list,
-            class: normalizeClass(["max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", [
+            "aria-label": __props.label,
+            class: normalizeClass(bottom.value ? "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",
               __props.block ? "flex w-full" : "inline-flex",
               __props.variant === "contained" ? "rounded-control border border-line bg-surface-soft p-1" : "",
               __props.variant === "underline" ? "border-b border-line" : ""
-            ]]),
+            ]),
             onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
           }, {
             default: withCtx(() => [
@@ -77,11 +95,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 return openBlock(), createBlock(unref(TabsTrigger), {
                   key: item.value,
                   value: item.value,
-                  class: normalizeClass(["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", [
-                    __props.block ? "flex-1" : "",
-                    __props.variant === "underline" ? "rounded-t-md px-3 pt-1.5 pb-2" : "rounded-md px-3 py-1.5",
+                  class: normalizeClass(["relative inline-flex items-center justify-center outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
+                    bottom.value ? "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",
+                    __props.block && !bottom.value ? "flex-1" : "",
+                    __props.variant === "underline" ? "rounded-t-md px-3 pt-1.5 pb-2" : "",
+                    __props.variant === "contained" || __props.variant === "plain" ? "rounded-md px-3 py-1.5" : "",
                     __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",
-                    hovered.value === item.value ? "text-ink" : "text-muted"
+                    hovered.value === item.value && !bottom.value ? "text-ink" : "text-muted"
                   ]]),
                   onPointerenter: ($event) => hovered.value = item.value,
                   onPointerup: releaseFocusAfterPointer
@@ -94,25 +114,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(__props.variant === "underline" ? [
                         "absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full",
                         __props.accent ? "bg-brand" : "bg-ink"
+                      ] : bottom.value ? [
+                        "absolute inset-x-[22%] top-0 z-0 h-0.5 rounded-b-full",
+                        __props.accent ? "bg-brand" : "bg-ink"
                       ] : [
                         "absolute inset-0 z-0 rounded-md shadow-sm",
                         __props.accent ? "border border-brand/35 bg-brand/12" : "border border-line bg-surface-raised"
                       ])
                     }, null, 8, ["transition", "class"])) : createCommentVNode("", true),
-                    item.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                      key: 1,
-                      name: item.icon,
-                      size: 14,
-                      class: "relative z-10"
-                    }, null, 8, ["name"])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_1, toDisplayString(item.label), 1)
+                    item.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                      createVNode(_sfc_main$1, {
+                        name: item.icon,
+                        size: bottom.value ? 22 : 14
+                      }, null, 8, ["name", "size"]),
+                      item.dot ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true),
+                    createElementVNode("span", {
+                      class: normalizeClass(["relative z-10", bottom.value ? "max-w-full truncate" : ""])
+                    }, toDisplayString(item.label), 3),
+                    item.dot && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_3)) : createCommentVNode("", true)
                   ]),
                   _: 2
                 }, 1032, ["value", "class", "onPointerenter"]);
               }), 128))
             ]),
             _: 1
-          }, 8, ["class"]),
+          }, 8, ["aria-label", "class"]),
           _ctx.$slots.panel ? (openBlock(), createBlock(unref(Motion), {
             key: 0,
             layout: true,

package/dist/chunks/LpThemeProvider-CQ2jC9TA.js

@@ -0,0 +1,69 @@
+import { defineComponent, ref, shallowRef, computed, watch, nextTick, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { t as themeEntries, r as revealTransition } from "./useTheme-2qHG8NEU.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const PRESS_FRESH_MS = 1500;
+let lastPress = null;
+if (typeof window !== "undefined") {
+  window.addEventListener(
+    "pointerdown",
+    (event) => lastPress = { x: event.clientX, y: event.clientY, at: performance.now() },
+    { capture: true, passive: true }
+  );
+}
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpThemeProvider",
+  props: {
+    theme: {},
+    as: { default: "div" },
+    transition: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
+    const root = ref(null);
+    const shown = shallowRef(props.theme);
+    const style = computed(() => ({
+      ...Object.fromEntries(themeEntries(shown.value)),
+      colorScheme: shown.value.mode
+    }));
+    function originOf() {
+      if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress;
+      const value = root.value;
+      const el = value instanceof HTMLElement ? value : value?.$el;
+      const box = el?.getBoundingClientRect?.();
+      return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : void 0;
+    }
+    watch(
+      () => props.theme,
+      (next) => {
+        if (!props.transition) {
+          shown.value = next;
+          return;
+        }
+        revealTransition(async () => {
+          shown.value = next;
+          await nextTick();
+        }, originOf());
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "root",
+        ref: root,
+        style: style.value,
+        "data-theme-mode": shown.value.mode,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["style", "data-theme-mode", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpThemeSwitcher-CPmhYOjX.js → LpThemeSwitcher-Fz85BCRS.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, onMounted, ref, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, toDisplayString, createCommentVNode } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { u as useTheme, p as presets } from "./useTheme-DJm1JSsY.js";
+import { u as useTheme, p as presets } from "./useTheme-2qHG8NEU.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-EF_90u3g.js";
 import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = ["aria-label", "title"];

package/dist/chunks/{useTheme-DJm1JSsY.js → useTheme-2qHG8NEU.js}

@@ -439,10 +439,10 @@ function applyTheme(theme, root = document.documentElement) {
   root.style.colorScheme = theme.mode;
   detectBackdropFilter(root);
 }
-function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+function revealTransition(update, origin, durationMs = 480) {
   const doc = document;
   if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
-    applyTheme(theme, root);
+    void update();
     return;
   }
   const x = origin?.x ?? window.innerWidth / 2;
@@ -451,9 +451,9 @@ function applyThemeWithTransition(theme, origin, root = document.documentElement
     Math.max(x, window.innerWidth - x),
     Math.max(y, window.innerHeight - y)
   );
-  const transition = doc.startViewTransition(() => applyTheme(theme, root));
+  const transition = doc.startViewTransition(update);
   transition.ready.then(() => {
-    root.animate(
+    document.documentElement.animate(
       {
         clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`]
       },
@@ -471,6 +471,9 @@ function applyThemeWithTransition(theme, origin, root = document.documentElement
     );
   });
 }
+function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+  revealTransition(() => applyTheme(theme, root), origin, durationMs);
+}
 function serializeTheme(theme) {
   return JSON.stringify(theme);
 }
@@ -614,14 +617,15 @@ export {
   light as l,
   prefersDarkScheme as m,
   nord as n,
-  setGlassBackdrop as o,
+  rose as o,
   presets as p,
-  themeFromCookie as q,
-  rose as r,
+  setGlassBackdrop as q,
+  revealTransition as r,
   serializeTheme as s,
   themeEntries as t,
   useTheme as u,
-  themeToCssRule as v,
-  themeToCssVars as w,
-  violet as x
+  themeFromCookie as v,
+  themeToCssRule as w,
+  themeToCssVars as x,
+  violet as y
 };

package/dist/components/LpOtpInput.vue.d.ts

@@ -10,6 +10,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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";
@@ -26,6 +34,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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";
@@ -35,5 +51,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     size: "sm" | "md" | "lg";
     length: number;
+    uppercase: boolean;
     alphanumeric: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpOtpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpOtpInput-CziPF3Oq.js";
+import { _ as _sfc_main } from "../chunks/LpOtpInput-PbeNJ5In.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTabs.vue.d.ts

@@ -3,6 +3,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;
 }
 type __VLS_Props = {
     modelValue?: string;
@@ -15,12 +17,18 @@ type __VLS_Props = {
      * 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;
 };
 declare var __VLS_51: {
     value: string;
@@ -36,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     block: boolean;
-    variant: "contained" | "plain" | "underline";
+    variant: "contained" | "plain" | "underline" | "bottom";
     accent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpTabs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTabs-UM0FQmPA.js";
+import { _ as _sfc_main } from "../chunks/LpTabs-BMSBB78h.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeProvider.vue.d.ts

@@ -6,12 +6,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     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;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     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;
 }> & Readonly<{}>, {
     as: string | Component;
+    transition: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/components/LpThemeProvider.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _sfc_main } from "../chunks/LpThemeProvider-CQ2jC9TA.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-CPmhYOjX.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-Fz85BCRS.js";
 export {
   _sfc_main as default
 };

package/dist/components/otp.d.ts

@@ -3,3 +3,5 @@ export type OtpCells = (string | number | undefined)[];
 export declare function joinCells(cells: OtpCells): string;
 /** Cells for a code given from outside, one character each. */
 export declare function splitCode(code: string | undefined, length: number): string[];
+export declare function upperCells<T extends OtpCells>(cells: T): T;
+export declare function groupBreaks(length: number, group: number | undefined): Set<number>;

package/dist/components/otp.js

@@ -4,7 +4,23 @@ function joinCells(cells) {
 function splitCode(code, length) {
   return (code ?? "").split("").slice(0, length);
 }
+function upperCells(cells) {
+  const out = [];
+  cells.forEach((c, i) => {
+    out[i] = typeof c === "string" ? c.toUpperCase() : c;
+  });
+  out.length = cells.length;
+  return out;
+}
+function groupBreaks(length, group) {
+  const breaks = /* @__PURE__ */ new Set();
+  if (!group || group < 1 || group >= length) return breaks;
+  for (let i = group; i < length; i += group) breaks.add(i - 1);
+  return breaks;
+}
 export {
+  groupBreaks,
   joinCells,
-  splitCode
+  splitCode,
+  upperCells
 };

package/dist/index.d.ts

@@ -168,7 +168,7 @@ export { blockTitle, defineBlocks } from "./layout/registry";
 export type { BlockDef, BlockRegistry } from "./layout/registry";
 export { useLayout } from "./layout/useLayout";
 export type { UseLayout, UseLayoutOptions } from "./layout/useLayout";
-export { applyTheme, applyThemeWithTransition, bootstrapTheme, parseTheme, serializeTheme, THEME_COOKIE, themeFromCookie, themeToCssRule, themeToCssVars, useTheme, } from "./theme/useTheme";
+export { applyTheme, applyThemeWithTransition, revealTransition, bootstrapTheme, parseTheme, serializeTheme, THEME_COOKIE, themeFromCookie, themeToCssRule, themeToCssVars, useTheme, } from "./theme/useTheme";
 export type { RevealOrigin } from "./theme/useTheme";
 export { detectBackdropFilter, GLASS_BACKDROP_ATTR, isBrokenBackdropEngine, NO_BACKDROP_ATTR, setGlassBackdrop } from "./theme/backdrop";
 export { DEFAULT_SURFACE } from "./theme/tokens";

package/dist/index.js

@@ -65,7 +65,7 @@ import { _ as _41 } from "./chunks/LpNotificationBell-wZ3meeim.js";
 import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
 import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
-import { _ as _45 } from "./chunks/LpOtpInput-CziPF3Oq.js";
+import { _ as _45 } from "./chunks/LpOtpInput-PbeNJ5In.js";
 import { _ as _46 } from "./chunks/LpPagination-BcDlo3r_.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
 import { _ as _48 } from "./chunks/LpPie-B7ti5qCH.js";
@@ -96,11 +96,11 @@ import { _ as _69 } from "./chunks/LpSwitch-DG2AhXIL.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { _ as _70 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
-import { _ as _71 } from "./chunks/LpTabs-UM0FQmPA.js";
+import { _ as _71 } from "./chunks/LpTabs-BMSBB78h.js";
 import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-CPmhYOjX.js";
+import { _ as _74 } from "./chunks/LpThemeSwitcher-Fz85BCRS.js";
 import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
 import { _ as _77 } from "./chunks/LpTooltip-CXVKcOXT.js";
@@ -111,8 +111,8 @@ import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
-import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/useTheme-DJm1JSsY.js";
-import { D, G, N, T, b as b2, c as c2, d, e, f, g, h, i as i2, l, j, n, k, m, r, o, t, q, v, w, u, x } from "./chunks/useTheme-DJm1JSsY.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/useTheme-2qHG8NEU.js";
+import { D, G, N, T, b as b2, c as c2, d, e, f, g, h, i as i2, l, j, n, k, m, r, o, q, t, v, w, x, u, y } from "./chunks/useTheme-2qHG8NEU.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
@@ -137,7 +137,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _81 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _81 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -399,10 +399,11 @@ export {
   resolveCssColor,
   resolveLink,
   resolveSlices,
+  r as revealTransition,
   rgbToHex,
   rgbToHsv,
   ringWindow,
-  r as rose,
+  o as rose,
   sameRange,
   seamProgress,
   seamReached,
@@ -411,7 +412,7 @@ export {
   serializeLayout,
   serializeTheme,
   setActiveTab,
-  o as setGlassBackdrop,
+  q as setGlassBackdrop,
   sortNodes,
   splitTags,
   stepMatch,
@@ -420,9 +421,9 @@ export {
   subtreeSize,
   svgToPng,
   t as themeEntries,
-  q as themeFromCookie,
-  v as themeToCssRule,
-  w as themeToCssVars,
+  v as themeFromCookie,
+  w as themeToCssRule,
+  x as themeToCssVars,
   tileUrl,
   toCsv,
   toRecentItem,
@@ -459,5 +460,5 @@ export {
   useTilt,
   useToast,
   useZoomPan,
-  x as violet
+  y as violet
 };