@youcan/celeste 0.6.38 → 0.6.39

package/dist/celeste.css

@@ -2382,6 +2382,76 @@ to {
   clip: rect(0, 0, 0, 0);
   border: 0;
   white-space: nowrap;
+}.celeste-digit-input-group[data-v-1a28428d] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-10);
+}.celeste-digit-input-slot[data-v-5b5299e2] {
+  --celeste-digit-input-border-color: var(--color-stroke-soft-200);
+  --celeste-digit-input-drop-shadow: var(--shadow-regular-xs);
+  --celeste-digit-input-placeholder-color: var(--color-text-soft-400);
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--celeste-digit-input-border-color);
+  border-radius: var(--radius-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--celeste-digit-input-drop-shadow);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  text-align: center;
+}
+.celeste-digit-input-slot[data-v-5b5299e2]::-moz-placeholder {
+  -moz-transition: color var(--animation-fast) ease-out;
+  transition: color var(--animation-fast) ease-out;
+  color: var(--celeste-digit-input-placeholder-color);
+}
+.celeste-digit-input-slot[data-v-5b5299e2]::placeholder {
+  transition: color var(--animation-fast) ease-out;
+  color: var(--celeste-digit-input-placeholder-color);
+}
+.celeste-digit-input-slot[data-v-5b5299e2]:focus {
+  --celeste-digit-input-border-color: var(--color-stroke-strong-950);
+  --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
+  outline-color: var(--color-stroke-soft-200);
+}
+.celeste-digit-input-slot[data-v-5b5299e2]:disabled {
+  --celeste-digit-input-border-color: transparent;
+  --celeste-digit-input-drop-shadow: none;
+  --celeste-digit-input-placeholder-color: var(--color-text-disabled-300);
+  background-color: var(--color-bg-weak-50);
+  box-shadow: none;
+  color: var(--color-text-disabled-300);
+  pointer-events: none;
+}
+.celeste-digit-input-slot[data-v-5b5299e2]:disabled::-moz-placeholder {
+  color: currentcolor;
+}
+.celeste-digit-input-slot[data-v-5b5299e2]:disabled::placeholder {
+  color: currentcolor;
+}
+[data-error=true] .celeste-digit-input-slot[data-v-5b5299e2] {
+  --celeste-digit-input-border-color: var(--color-state-error-base);
+}
+[data-error=true] .celeste-digit-input-slot[data-v-5b5299e2]:focus {
+  --celeste-digit-input-border-color: var(--color-state-error-base);
+  outline-color: var(--color-state-error-lighter);
+}
+.celeste-digit-input-slot[data-v-5b5299e2]:hover:not(:focus, :disabled) {
+  --celeste-digit-input-border-color: transparent;
+  --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
+  background-color: var(--color-bg-weak-50);
+}.celeste-digit-input[data-v-be93d7bf] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-10);
 }.celeste-context-menu-item[data-v-3d94f388] {
   display: flex;
   box-sizing: border-box;

package/dist/cjs/chunks/index.js

@@ -6102,7 +6102,207 @@ const Oh = /* @__PURE__ */ Mo.defineComponent({
     }, 16));
   }
 });
-const [Nt, Xc] = Q("PopoverRoot"), ys = /* @__PURE__ */ Mo.defineComponent({
+const Gc = ["id", "value", "name", "disabled", "required"], [qc, Yc] = Q("PinInputRoot"), Dy = /* @__PURE__ */ Mo.defineComponent({
+  inheritAttrs: false,
+  __name: "PinInputRoot",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    placeholder: { default: "" },
+    mask: { type: Boolean },
+    otp: { type: Boolean },
+    type: { default: "text" },
+    dir: {},
+    name: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    id: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(a2, { emit: t }) {
+    const e = a2, n = t, { mask: l, otp: s, placeholder: r, type: i, disabled: u, dir: d } = Mo.toRefs(e), { forwardRef: c } = R(), f = be(d), v = ne(e, "modelValue", n, {
+      defaultValue: e.defaultValue ?? [],
+      passive: e.modelValue === void 0
+    }), p = Mo.ref(/* @__PURE__ */ new Set());
+    function g(_) {
+      p.value.add(_);
+    }
+    const m = Mo.computed(() => v.value.filter((C) => !!C).length === p.value.size);
+    return Mo.watch(v, () => {
+      m.value && n("complete", v.value);
+    }, { deep: true }), Yc({
+      modelValue: v,
+      mask: l,
+      otp: s,
+      placeholder: r,
+      type: i,
+      dir: f,
+      disabled: u,
+      isCompleted: m,
+      inputElements: p,
+      onInputElementChange: g
+    }), (_, C) => (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, null, [
+      Mo.createVNode(Mo.unref(O), Mo.mergeProps(_.$attrs, {
+        ref: Mo.unref(c),
+        dir: Mo.unref(f),
+        "data-complete": m.value ? "" : void 0,
+        "data-disabled": Mo.unref(u) ? "" : void 0
+      }), {
+        default: Mo.withCtx(() => [
+          Mo.renderSlot(_.$slots, "default", { modelValue: Mo.unref(v) })
+        ]),
+        _: 3
+      }, 16, ["dir", "data-complete", "data-disabled"]),
+      Mo.createElementVNode("input", {
+        id: _.id,
+        type: "text",
+        tabindex: "-1",
+        "aria-hidden": "true",
+        value: Mo.unref(v).join(""),
+        name: _.name,
+        disabled: Mo.unref(u),
+        required: _.required,
+        style: {
+          transform: "translateX(-100%)",
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        },
+        onFocus: C[0] || (C[0] = ($) => {
+          var h, E;
+          return (E = (h = Array.from(p.value)) == null ? void 0 : h[0]) == null ? void 0 : E.focus();
+        })
+      }, null, 40, Gc)
+    ], 64));
+  }
+}), $y = /* @__PURE__ */ Mo.defineComponent({
+  __name: "PinInputInput",
+  props: {
+    index: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "input" }
+  },
+  setup(a2) {
+    const t = a2, e = qc(), n = Mo.computed(() => Array.from(e.inputElements.value)), l = Mo.computed(() => e.modelValue.value[t.index]), s = Mo.computed(() => t.disabled || e.disabled.value), r = Mo.computed(() => e.otp.value), i = Mo.computed(() => e.type.value === "number"), u = Mo.computed(() => e.mask.value), { primitiveElement: d, currentElement: c } = Ie();
+    function f(D) {
+      var V;
+      const I = D.target;
+      if ((((V = D.data) == null ? void 0 : V.length) ?? 0) > 1) {
+        h(I.value);
+        return;
+      }
+      if (i.value && !/^\d*$/.test(I.value)) {
+        I.value = I.value.replace(/\D/g, "");
+        return;
+      }
+      I.value = I.value.slice(-1), P(t.index, I.value);
+      const M = n.value[t.index + 1];
+      M && M.focus();
+    }
+    function v() {
+      const D = c.value;
+      Mo.nextTick(() => {
+        D.value || (D.placeholder = e.placeholder.value);
+      });
+    }
+    function p(D) {
+      Rt(D, document.activeElement, void 0, {
+        itemsArray: n.value,
+        focus: true,
+        loop: false,
+        arrowKeyOptions: "horizontal",
+        dir: e.dir.value
+      });
+    }
+    function g(D) {
+      if (D.preventDefault(), D.target.value)
+        P(t.index, "");
+      else {
+        const V = n.value[t.index - 1];
+        V && (V.focus(), P(t.index - 1, ""));
+      }
+    }
+    function m(D) {
+      D.key === "Delete" && (D.preventDefault(), P(t.index, ""));
+    }
+    function _(D) {
+      const I = D.target;
+      I.setSelectionRange(1, 1), I.value || (I.placeholder = "");
+    }
+    function C(D) {
+      v();
+    }
+    function $(D) {
+      D.preventDefault();
+      const I = D.clipboardData;
+      if (!I)
+        return;
+      const M = I.getData("text");
+      h(M);
+    }
+    function h(D) {
+      var A;
+      const I = [...e.modelValue.value], M = D.length >= n.value.length ? 0 : t.index, V = Math.min(M + D.length, n.value.length);
+      for (let F = M; F < V; F++) {
+        const j = n.value[F], W = D[F - M];
+        i.value && !/^\d*$/.test(W) || (I[F] = W, j.focus());
+      }
+      e.modelValue.value = I, (A = n.value[V]) == null || A.focus();
+    }
+    function E(D) {
+      let I = D.length - 1;
+      for (; I >= 0 && D[I] === ""; )
+        D.pop(), I--;
+      return D;
+    }
+    function P(D, I) {
+      const M = [...e.modelValue.value];
+      M[D] = I, e.modelValue.value = E(M);
+    }
+    return Mo.watch(l, () => {
+      l.value || v();
+    }), Mo.onMounted(() => {
+      e.onInputElementChange(c.value);
+    }), Mo.onUnmounted(() => {
+      var D;
+      (D = e.inputElements) == null || D.value.delete(c.value);
+    }), (D, I) => (Mo.openBlock(), Mo.createBlock(Mo.unref(O), {
+      ref_key: "primitiveElement",
+      ref: d,
+      autocapitalize: "none",
+      as: D.as,
+      "as-child": D.asChild,
+      autocomplete: r.value ? "one-time-code" : "false",
+      type: u.value ? "password" : "text",
+      inputmode: i.value ? "numeric" : "text",
+      pattern: i.value ? "[0-9]*" : void 0,
+      placeholder: Mo.unref(e).placeholder.value,
+      value: l.value,
+      disabled: s.value,
+      "data-disabled": s.value ? "" : void 0,
+      "data-complete": Mo.unref(e).isCompleted.value ? "" : void 0,
+      "aria-label": `pin input ${D.index + 1} of ${n.value.length}`,
+      onInput: I[0] || (I[0] = (M) => f(M)),
+      onKeydown: [
+        Mo.withKeys(p, ["left", "right", "up", "down", "home", "end"]),
+        Mo.withKeys(g, ["backspace"]),
+        Mo.withKeys(m, ["delete"])
+      ],
+      onFocus: _,
+      onBlur: C,
+      onPaste: $
+    }, {
+      default: Mo.withCtx(() => [
+        Mo.renderSlot(D.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "autocomplete", "type", "inputmode", "pattern", "placeholder", "value", "disabled", "data-disabled", "data-complete", "aria-label"]));
+  }
+}), [Nt, Xc] = Q("PopoverRoot"), ys = /* @__PURE__ */ Mo.defineComponent({
   __name: "PopoverRoot",
   props: {
     defaultOpen: { type: Boolean, default: false },
@@ -9302,12 +9502,14 @@ const av = /* @__PURE__ */ Mo.defineComponent({
     }, 16));
   }
 });
+exports.$y = $y;
 exports.At = At;
 exports.By = By;
 exports.Cg = Cg;
 exports.Ch = Ch;
 exports.Du = Du;
 exports.Dv = Dv;
+exports.Dy = Dy;
 exports.Eu = Eu;
 exports.Fy = Fy;
 exports.Gl = Gl;