@leavepulse/ui 0.78.1 → 0.78.3

package/dist/chunks/LpDatePicker-C2AOtxgF.js

@@ -0,0 +1,171 @@
+import { defineComponent, ref, computed, useAttrs, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps, createElementVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { useOwnField } from "../composables/useField.js";
+import { useLocale } from "../composables/useLocale.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { defaultDatePresets, dayAllowed } from "../components/dateRange.js";
+import { _ as _sfc_main$3 } from "./LpCalendar-D4-LVjfF.js";
+import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$2 } from "./PickerField-BM1dyafh.js";
+import { _ as _sfc_main$5 } from "./LpTimeField-B5n0m8m0.js";
+const _hoisted_1 = { class: "flex flex-col" };
+const _hoisted_2 = {
+  key: 0,
+  class: "flex items-center gap-2 border-t border-line px-3 py-2"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpDatePicker",
+  props: {
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    error: {},
+    size: { default: "md" },
+    locale: {},
+    modelValue: {},
+    placeholder: {},
+    min: {},
+    max: {},
+    isDisabled: {},
+    isDateUnavailable: {},
+    presets: { type: [Array, Boolean] },
+    format: { default: () => ({ year: "numeric", month: "short", day: "numeric" }) },
+    time: { type: Boolean },
+    defaultTime: { default: "00:00" },
+    doneLabel: {},
+    labels: {}
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const day = computed(() => (props.modelValue || "").slice(0, 10));
+    const minute = computed(() => {
+      const at = (props.modelValue || "").slice(11, 16);
+      return /^\d{2}:\d{2}$/.test(at) ? at : "";
+    });
+    const locale = useLocale(() => props.locale);
+    const display = computed(() => {
+      if (!props.modelValue) return "";
+      const [y, m, d] = day.value.split("-").map(Number);
+      if (!y || !m || !d) return props.modelValue;
+      const shown = new Intl.DateTimeFormat(locale.value, props.format).format(new Date(y, m - 1, d));
+      return props.time && minute.value ? `${shown}, ${minute.value}` : shown;
+    });
+    function onPick(picked) {
+      const v = picked ?? (day.value || void 0);
+      if (!props.time) {
+        emit("update:modelValue", v);
+        open.value = false;
+        return;
+      }
+      emit("update:modelValue", v ? `${v}T${minute.value || props.defaultTime}` : void 0);
+    }
+    function onTime(at) {
+      if (!day.value) return;
+      emit("update:modelValue", `${day.value}T${at || props.defaultTime}`);
+    }
+    function clear() {
+      emit("update:modelValue", void 0);
+    }
+    useAttrs();
+    const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }));
+    const text = useLabels(
+      "datePicker",
+      {
+        placeholder: "Pick a date",
+        clear: "Clear",
+        done: "Done",
+        presets: "Presets",
+        today: "Today",
+        tomorrow: "Tomorrow",
+        inWeek: "In a week"
+      },
+      () => props.labels
+    );
+    const presetList = computed(() => {
+      if (Array.isArray(props.presets)) return props.presets;
+      return props.presets ? defaultDatePresets(text.value) : [];
+    });
+    function presetFits(preset) {
+      return dayAllowed(preset.date(), props);
+    }
+    function pickPreset(preset) {
+      if (presetFits(preset)) onPick(preset.date());
+    }
+    const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled);
+    const presetOptions = computed(() => presetList.value.map((preset) => ({
+      label: preset.label,
+      disabled: !presetFits(preset),
+      selected: !!day.value && day.value === preset.date(),
+      select: () => pickPreset(preset)
+    })));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, mergeProps(unref(controlAttrs), {
+            open: open.value,
+            "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+            field: unref(field),
+            display: display.value,
+            placeholder: __props.placeholder ?? unref(text).placeholder,
+            icon: "lucide:calendar",
+            size: __props.size,
+            clearable: showClear.value,
+            "clear-label": unref(text).clear,
+            "presets-label": unref(text).presets,
+            presets: presetOptions.value,
+            "presets-class": "sm:w-36",
+            onClear: clear,
+            onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
+          }), {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                createVNode(_sfc_main$3, {
+                  "model-value": day.value,
+                  min: __props.min,
+                  max: __props.max,
+                  "is-disabled": __props.isDisabled,
+                  "is-date-unavailable": __props.isDateUnavailable,
+                  locale: unref(locale),
+                  labels: __props.labels,
+                  class: "border-0 bg-transparent",
+                  "onUpdate:modelValue": onPick
+                }, null, 8, ["model-value", "min", "max", "is-disabled", "is-date-unavailable", "locale", "labels"]),
+                __props.time ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                  createVNode(_sfc_main$4, {
+                    name: "lucide:clock",
+                    size: 15,
+                    class: "shrink-0 text-muted"
+                  }),
+                  createVNode(_sfc_main$5, {
+                    "model-value": minute.value || void 0,
+                    disabled: !day.value,
+                    icon: false,
+                    locale: unref(locale),
+                    size: "sm",
+                    class: "flex-1",
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = (at) => onTime(at || ""))
+                  }, null, 8, ["model-value", "disabled", "locale"]),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink",
+                    onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
+                  }, toDisplayString(__props.doneLabel ?? unref(text).done), 1)
+                ])) : createCommentVNode("", true)
+              ])
+            ]),
+            _: 1
+          }, 16, ["open", "field", "display", "placeholder", "size", "clearable", "clear-label", "presets-label", "presets"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpDateRangePicker-CNQXdTVv.js → LpDateRangePicker-CiXdIAyh.js}

@@ -1,11 +1,12 @@
-import { defineComponent, ref, computed, openBlock, createBlock, mergeProps, unref, withCtx, createVNode } from "vue";
-import { useAttrsField } from "../composables/useField.js";
+import { defineComponent, ref, computed, useAttrs, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { useOwnField } from "../composables/useField.js";
 import { useLocale } from "../composables/useLocale.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { normalizeRange, formatRange, defaultRangePresets, sameRange, allowedRange } from "../components/dateRange.js";
-import { _ as _sfc_main$1 } from "./PickerField-BM1dyafh.js";
-import { _ as _sfc_main$2 } from "./LpRangeCalendar-BrqlGZzE.js";
+import { _ as _sfc_main$2 } from "./PickerField-BM1dyafh.js";
+import { _ as _sfc_main$3 } from "./LpRangeCalendar-BrqlGZzE.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -14,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     clearable: { type: Boolean },
     disabled: { type: Boolean },
     invalid: { type: Boolean },
+    error: {},
     size: { default: "md" },
     locale: {},
     modelValue: {},
@@ -71,7 +73,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return !!allowedRange(preset.range(), rules.value);
     }
     const wide = useMediaQuery("(min-width: 640px)");
-    const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }));
+    useAttrs();
+    const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }));
     const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled);
     const presetOptions = computed(() => presetList.value.map((preset) => ({
       label: preset.label,
@@ -80,39 +83,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       select: () => pickPreset(preset)
     })));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(attrs), {
-        open: open.value,
-        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-        field: unref(field),
-        display: display.value,
-        placeholder: __props.placeholder || unref(text).placeholder,
-        icon: "lucide:calendar-range",
-        size: __props.size,
-        clearable: showClear.value,
-        "clear-label": unref(text).clear,
-        "presets-label": unref(text).presets,
-        presets: presetOptions.value,
-        "presets-class": "sm:w-40",
-        onClear: _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", void 0)),
-        onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event))
-      }), {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
         default: withCtx(() => [
-          createVNode(_sfc_main$2, {
-            "model-value": value.value,
-            min: __props.min,
-            max: __props.max,
-            "is-disabled": __props.isDisabled,
-            "is-date-unavailable": __props.isDateUnavailable,
-            "maximum-days": __props.maximumDays,
-            months: unref(wide) ? 2 : 1,
-            locale: unref(locale),
-            labels: __props.labels,
-            class: "border-0 bg-transparent",
-            "onUpdate:modelValue": pick
-          }, null, 8, ["model-value", "min", "max", "is-disabled", "is-date-unavailable", "maximum-days", "months", "locale", "labels"])
+          createVNode(_sfc_main$2, mergeProps(unref(controlAttrs), {
+            open: open.value,
+            "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+            field: unref(field),
+            display: display.value,
+            placeholder: __props.placeholder || unref(text).placeholder,
+            icon: "lucide:calendar-range",
+            size: __props.size,
+            clearable: showClear.value,
+            "clear-label": unref(text).clear,
+            "presets-label": unref(text).presets,
+            presets: presetOptions.value,
+            "presets-class": "sm:w-40",
+            onClear: _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", void 0)),
+            onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event))
+          }), {
+            default: withCtx(() => [
+              createVNode(_sfc_main$3, {
+                "model-value": value.value,
+                min: __props.min,
+                max: __props.max,
+                "is-disabled": __props.isDisabled,
+                "is-date-unavailable": __props.isDateUnavailable,
+                "maximum-days": __props.maximumDays,
+                months: unref(wide) ? 2 : 1,
+                locale: unref(locale),
+                labels: __props.labels,
+                class: "border-0 bg-transparent",
+                "onUpdate:modelValue": pick
+              }, null, 8, ["model-value", "min", "max", "is-disabled", "is-date-unavailable", "maximum-days", "months", "locale", "labels"])
+            ]),
+            _: 1
+          }, 16, ["open", "field", "display", "placeholder", "size", "clearable", "clear-label", "presets-label", "presets"])
         ]),
         _: 1
-      }, 16, ["open", "field", "display", "placeholder", "size", "clearable", "clear-label", "presets-label", "presets"]);
+      }, 16);
     };
   }
 });

package/dist/chunks/{LpFileTree-C-rJKzEQ.js → LpFileTree-CpNurwZp.js}

@@ -5,8 +5,8 @@ import { isElement } from "../composables/realm.js";
 import { withLoadedChildren, computeStats, formatSize, isFilterEmpty, filterTree, sortNodes, flattenVisible, rowWindow, renameProblem, nodeTrail, subtreeIds, rangeIds, topmostIds, canDrop, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$4 } from "./LpBreadcrumbs-CIIBsygI.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-DurPF001.js";
-import { _ as _sfc_main$6 } from "./LpFileTreeNode-BgYn4U1J.js";
-import { _ as _sfc_main$3 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$6 } from "./LpFileTreeNode-DdF8Cq-s.js";
+import { _ as _sfc_main$3 } from "./LpInput-CbI7z5fQ.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
 import { usePersisted } from "../composables/usePersisted.js";

package/dist/chunks/{LpFileTreeNode-BgYn4U1J.js → LpFileTreeNode-DdF8Cq-s.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, watch, nextTick, resolveComponent, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, withModifiers, normalizeStyle, normalizeClass, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, Fragment, renderList } from "vue";
 import { sortNodes, formatSize, formatModified, renameSelectionEnd, fileIcon } from "../components/fileTree.js";
 import { _ as _sfc_main$5 } from "./LpBadge-D5QQdDQ_.js";
-import { _ as _sfc_main$4 } from "./LpCheckbox-D6RuDW4X.js";
+import { _ as _sfc_main$4 } from "./LpCheckbox-CCWCwD0y.js";
 import { _ as _sfc_main$6 } from "./LpCollapse-DrAw5DBZ.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-Bx_IhQDS.js";
 import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";

package/dist/chunks/{LpInput-D0O6dpuA.js → LpInput-CbI7z5fQ.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBl
 import { CONTROL_SIZE } from "../components/controlSize.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { tv } from "tailwind-variants";
-import { useFieldControl, isAttrOn, fieldWrapperBinds, mergeDescribedBy } from "../composables/useField.js";
+import { useField, wrapsItself, useFieldControl, isAttrOn, fieldWrapperBinds, mergeDescribedBy } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useInputMask, DEFAULT_MASK_TOKENS } from "../composables/useInputMask.js";
@@ -94,9 +94,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const hasLeading = computed(() => !!slots.leading || !!props.icon);
     const hasTrailing = computed(() => !!slots.trailing || showClear.value);
-    const hasField = computed(
-      () => !!props.label || !!props.hint || !!props.error
-    );
+    const outerFieldOf = useField();
+    const hasField = computed(() => wrapsItself(props, outerFieldOf));
     const field = useFieldControl(() => ({
       wrapped: hasField.value,
       hasMessage: !!props.error || !!props.hint,

package/dist/chunks/{LpLogInspector-BdQlX6S-.js → LpLogInspector-CcSJSGan.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, openBlock, createElementBlock, unref, Fragment, createVNode, toDisplayString, renderList, normalizeStyle, createElementVNode, normalizeClass, createTextVNode } from "vue";
 import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
-import { _ as _sfc_main$1 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$1 } from "./LpInput-CbI7z5fQ.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { structuredPayload, jsonRows, stackLines } from "../components/logTools.js";
 const _hoisted_1 = ["aria-label"];

package/dist/chunks/{LpLogViewer-umCZBapN.js → LpLogViewer-CWu49Dko.js}

@@ -9,7 +9,7 @@ import { _ as _sfc_main$6 } from "./LpContextMenu-Bx_IhQDS.js";
 import { _ as _sfc_main$4 } from "./LpEmptyState-DurPF001.js";
 import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$5 } from "./LpLoader-Bf1yZwaU.js";
-import { _ as _sfc_main$1 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$1 } from "./LpInput-CbI7z5fQ.js";
 import { _ as _sfc_main$3 } from "./LpScrollArea-CqvwfZs2.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
@@ -18,7 +18,7 @@ import { inTextField } from "../composables/textEntry.js";
 import { nodeWindow, isElement } from "../composables/realm.js";
 import { ringWindow, matchPositions, countLevels, stepMatch } from "../components/logSearch.js";
 import { downloadFile } from "../components/exportData.js";
-import { _ as _sfc_main$8 } from "./LpLogInspector-BdQlX6S-.js";
+import { _ as _sfc_main$8 } from "./LpLogInspector-CcSJSGan.js";
 import { compilePattern, inTimeRange, patternPositions, groupRepeats, rowSpan, exportLines, nearestByTime, termRanges, messageParts, findIds } from "../components/logTools.js";
 import { TONES, toneLook } from "../components/tone.js";
 import '../assets/LpLogViewer-BDNW6P52.css';const _hoisted_1 = {

package/dist/chunks/{LpModalNav-gOi1Giz1.js → LpModalNav-DI3BW5ff.js}

@@ -4,7 +4,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$2 } from "./LpButton-DSHioIfD.js";
 import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$1 } from "./LpModal-DDvrSAnf.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-DDNJzb69.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-CvRvVBTt.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/LpNumberField-C8LfUz_R.js

@@ -0,0 +1,154 @@
+import { defineComponent, useId, useAttrs, computed, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createSlots, renderSlot, createCommentVNode, mergeProps, createElementBlock, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
+import { _ as _sfc_main$2 } from "./FieldLeading-mr81aEAP.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+import { useOwnField, mergeDescribedBy, focusLeft } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedClass } from "../composables/useMergedClass.js";
+const _hoisted_1 = ["id"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpNumberField",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: {},
+    min: {},
+    max: {},
+    step: {},
+    stepSnapping: { type: Boolean, default: true },
+    formatOptions: {},
+    locale: {},
+    readonly: { type: Boolean },
+    disableWheelChange: { type: Boolean },
+    invertWheelChange: { type: Boolean },
+    focusOnChange: { type: Boolean, default: true },
+    steppers: { type: Boolean, default: true },
+    disabled: { type: Boolean },
+    unit: {},
+    icon: {},
+    invalid: { type: Boolean },
+    error: {},
+    size: { default: "md" },
+    labels: {}
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const unitId = useId();
+    const text = useLabels(
+      "numberField",
+      { increase: "Increase", decrease: "Decrease" },
+      () => props.labels
+    );
+    const SIZE = CONTROL_SIZE;
+    const attrs = useAttrs();
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }));
+    const describedBy = computed(
+      () => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, props.unit ? unitId : void 0)
+    );
+    const inputAttrs = computed(() => {
+      const { class: _c, style: _s, id: _i, name: _n, ...rest } = attrs;
+      return rest;
+    });
+    function onFocusOut(event) {
+      if (focusLeft(event)) emit("blur", event);
+    }
+    const rootClass = useMergedClass(() => [
+      "@container flex w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+      SIZE[props.size],
+      field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
+    ].join(" "), () => ownAttrs());
+    usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(NumberFieldRoot), {
+            "model-value": __props.modelValue ?? void 0,
+            min: __props.min,
+            max: __props.max,
+            step: __props.step,
+            "step-snapping": __props.stepSnapping,
+            readonly: __props.readonly,
+            "disable-wheel-change": __props.disableWheelChange,
+            "invert-wheel-change": __props.invertWheelChange,
+            "focus-on-change": __props.focusOnChange,
+            "format-options": __props.formatOptions,
+            locale: __props.locale,
+            disabled: unref(field).disabled,
+            required: unref(field).required,
+            "data-lp-ring-owner": "",
+            class: normalizeClass(unref(rootClass)),
+            style: normalizeStyle(unref(ownAttrs)() ? unref(attrs).style : void 0),
+            name: typeof unref(attrs).name === "string" ? unref(attrs).name : void 0,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", Number.isNaN(v) ? null : v ?? null)),
+            onFocusout: onFocusOut
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                icon: __props.icon,
+                class: "pl-2.5"
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.leading ? {
+                  name: "default",
+                  fn: withCtx(() => [
+                    renderSlot(_ctx.$slots, "leading")
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["icon"]),
+              __props.steppers ? (openBlock(), createBlock(unref(NumberFieldDecrement), {
+                key: 0,
+                "aria-label": unref(text).decrease,
+                class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    name: "lucide:minus",
+                    size: 15,
+                    class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+                  })
+                ]),
+                _: 1
+              }, 8, ["aria-label"])) : createCommentVNode("", true),
+              createVNode(unref(NumberFieldInput), mergeProps(inputAttrs.value, {
+                id: unref(field).id,
+                "aria-describedby": describedBy.value,
+                "aria-invalid": unref(field).invalid || void 0,
+                class: ["min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none", __props.steppers ? "text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left" : __props.icon || _ctx.$slots.leading ? "pl-2 pr-3" : "px-3"]
+              }), null, 16, ["id", "aria-describedby", "aria-invalid", "class"]),
+              __props.unit ? (openBlock(), createElementBlock("span", {
+                key: 1,
+                id: unref(unitId),
+                class: normalizeClass(["shrink-0 pr-1 text-xs text-muted", !__props.steppers && "pr-3"])
+              }, toDisplayString(__props.unit), 11, _hoisted_1)) : createCommentVNode("", true),
+              __props.steppers ? (openBlock(), createBlock(unref(NumberFieldIncrement), {
+                key: 2,
+                "aria-label": unref(text).increase,
+                class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    name: "lucide:plus",
+                    size: 15,
+                    class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+                  })
+                ]),
+                _: 1
+              }, 8, ["aria-label"])) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["model-value", "min", "max", "step", "step-snapping", "readonly", "disable-wheel-change", "invert-wheel-change", "focus-on-change", "format-options", "locale", "disabled", "required", "class", "style", "name"])
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpOtpInput-B1X9l9no.js

@@ -0,0 +1,140 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { PinInputRoot, PinInputInput } from "reka-ui";
+import { useOwnField, mergeDescribedBy } 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 },
+    error: {},
+    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, wrapper, ownAttrs } = useOwnField(() => ({
+      error: props.error,
+      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",
+      () => ownAttrs()
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(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,
+            required: unref(field).required,
+            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(mergeDescribedBy)(unref(rest)["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", "required", "class"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};