@nmorph/nmorph-ui-kit 2.2.9 → 2.2.10

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue2.js

@@ -0,0 +1,45 @@
+import './NmorphFormItem.css';
+import { defineComponent as p, inject as s, computed as o, provide as f, toRef as c } from "vue";
+import { useModifiers as h } from "../../../../../utils/create-modifiers.js";
+import v from "./inner-components/nmorph-error-box/NmorphErrorBox.vue.js";
+import _ from "./inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js";
+import { nmorphFormItemInputDataKey as y } from "../../use-form-item-input.js";
+const B = /* @__PURE__ */ p({
+  __name: "NmorphFormItem",
+  props: {
+    id: { type: String, required: !0 },
+    name: { type: String, required: !1, default: "" },
+    autocomplete: { type: String, required: !1, default: "" },
+    height: { type: null, required: !1, default: "basic" },
+    label: { type: String, required: !1, default: "" },
+    showValidationIcon: { type: Boolean, required: !1, default: !0 },
+    staticErrorBoxSpace: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(n, { expose: d }) {
+    d();
+    const e = n, r = s("form-data"), t = o(() => r?.fields[e.id]), a = o(() => t.value), u = o(
+      () => !!a.value && !!t?.value?.touched && e.showValidationIcon
+    ), i = o(() => a.value && t.value?.touched);
+    f(y, {
+      id: c(e, "id"),
+      name: o(() => e.name || e.id),
+      autocomplete: o(() => e.autocomplete || void 0)
+    });
+    const m = o(
+      () => h({
+        "nmorph-form-item": [
+          `${e.label && "labeled"}`,
+          `${i.value && (t.value?.valid ? "valid" : "invalid")}`
+        ]
+      })
+    ), l = { props: e, formData: r, validationData: t, ableToShowValidation: a, showStatusIcon: u, ableToAddValidationModifiers: i, modifiers: m, get NmorphValidationIcon() {
+      return _;
+    }, get NmorphErrorBox() {
+      return v;
+    } };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+});
+export {
+  B as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.css

@@ -0,0 +1 @@
+.nmorph-error-box{display:flex;align-items:center;overflow:hidden}.nmorph-error-box .nmorph-error-box__error{margin:var(--indentation-00);margin-left:var(--default-indentation-input);color:var(--nmorph-error-text-color);text-align:left}.nmorph-error-box.nmorph-error-box--empty:not(.nmorph-error-box--static-height){display:none}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue.js

@@ -0,0 +1,46 @@
+import './NmorphErrorBox.css';
+import t from "./NmorphErrorBox.vue2.js";
+import { openBlock as r, createElementBlock as o, normalizeClass as m, createVNode as i, TransitionGroup as p, withCtx as s, Fragment as a, renderList as c, toDisplayString as l } from "vue";
+/* empty css                    */
+import f from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+function _(d, u, h, e, x, b) {
+  return r(), o(
+    "div",
+    {
+      class: m(e.modifiers)
+    },
+    [
+      i(p, {
+        name: "list",
+        tag: "div"
+      }, {
+        default: s(() => [
+          (r(!0), o(
+            a,
+            null,
+            c(e.currentError, (n) => (r(), o(
+              "p",
+              {
+                key: n,
+                class: "nmorph-error-box__error"
+              },
+              l(n),
+              1
+              /* TEXT */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ],
+    2
+    /* CLASS */
+  );
+}
+const v = /* @__PURE__ */ f(t, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue"]]);
+export {
+  v as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue2.js

@@ -0,0 +1,28 @@
+import './NmorphErrorBox.css';
+import { defineComponent as p, computed as s } from "vue";
+import { NmorphComponentHeight as u } from "../../../../../../../types/index.js";
+import { useModifiers as l } from "../../../../../../../utils/create-modifiers.js";
+const h = /* @__PURE__ */ p({
+  __name: "NmorphErrorBox",
+  props: {
+    height: { type: null, required: !1, default: "basic" },
+    errors: { type: [Array, Object], required: !1, default: () => [] },
+    staticHeight: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(i, { expose: n }) {
+    n();
+    const e = i, t = s(() => {
+      const r = Array.isArray(e.errors) ? e.errors : e.errors.value;
+      return r.length ? [r[r.length - 1]] : [];
+    }), a = s(
+      () => l({
+        nmorph: [u[e.height]],
+        "nmorph-error-box": [`${e.staticHeight && "static-height"}`, `${t.value.length === 0 && "empty"}`]
+      })
+    ), o = { props: e, currentError: t, modifiers: a };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  h as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css

@@ -0,0 +1 @@
+.nmorph-validation-icon{margin-left:var(--indentation-03);width:var(--nmorph-validation-icon-size)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--color: var(--nmorph-error-text-color)}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js

@@ -0,0 +1,34 @@
+import './NmorphValidationIcon.css';
+import r from "./NmorphValidationIcon.vue2.js";
+import { openBlock as n, createElementBlock as t, normalizeStyle as a, normalizeClass as c, createBlock as i, withCtx as m, resolveDynamicComponent as l, createCommentVNode as d } from "vue";
+/* empty css                          */
+import s from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+function p(f, h, e, o, _, v) {
+  return n(), t(
+    "div",
+    {
+      class: c(o.modifiers),
+      style: a({ "--nmorph-validation-icon-size": o.validateIconSize })
+    },
+    [
+      e.show ? (n(), i(o.NmorphIcon, {
+        key: 0,
+        class: "nmorph-validation-icon__content",
+        width: o.validateIconSize,
+        height: o.validateIconSize
+      }, {
+        default: m(() => [
+          (n(), i(l(o.validationIcon)))
+        ]),
+        _: 1
+        /* STABLE */
+      })) : d("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const x = /* @__PURE__ */ s(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue"]]);
+export {
+  x as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue2.js

@@ -0,0 +1,27 @@
+import './NmorphValidationIcon.css';
+import { defineComponent as a, computed as r } from "vue";
+import { useModifiers as c } from "../../../../../../../utils/create-modifiers.js";
+import m from "../../../../../../../assets/icons/success.svg.js";
+import s from "../../../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import d from "../../../../../../../assets/icons/error.svg.js";
+const l = "18px", I = /* @__PURE__ */ a({
+  __name: "NmorphValidationIcon",
+  props: {
+    valid: { type: [Boolean, Object], required: !0 },
+    show: { type: [Boolean, Object], required: !1, default: !0 }
+  },
+  setup(t, { expose: i }) {
+    i();
+    const o = t, n = r(
+      () => c({
+        "nmorph-validation-icon": [o.valid ? "valid" : "invalid"]
+      })
+    ), p = r(() => o.valid ? m : d), e = { props: o, modifiers: n, validationIcon: p, validateIconSize: l, get NmorphIcon() {
+      return s;
+    } };
+    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
+  }
+});
+export {
+  I as default
+};

package/dist/components/form/nmorph-form/use-form-item-input.js

@@ -0,0 +1,15 @@
+import { inject as i, computed as e } from "vue";
+import { generateUUID as r } from "../../../utils/common.js";
+const d = "nmorph-form-item-input-data", p = (t) => {
+  const o = i(d, void 0), a = r(), n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), c = e(() => t.autocomplete || o?.autocomplete.value || void 0), u = e(() => t.tabindex ?? 0);
+  return {
+    id: n,
+    name: m,
+    autocomplete: c,
+    tabindex: u
+  };
+};
+export {
+  d as nmorphFormItemInputDataKey,
+  p as useFormItemInput
+};

package/dist/components/form/nmorph-number-input/NmorphNumberInput.css

@@ -0,0 +1 @@
+.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid var(--nmorph-main-color);transition:ease-in-out var(--transition-01) background;background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:background 0s;-moz-appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height)}

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue.js

@@ -0,0 +1,140 @@
+import './NmorphNumberInput.css';
+import h from "./NmorphNumberInput.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as c, normalizeClass as d, createElementVNode as e, createVNode as i, withCtx as t, createCommentVNode as m } from "vue";
+/* empty css                       */
+import l from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-number-input__content" }, s = { class: "nmorph-number-input__input-content" }, b = {
+  key: 0,
+  class: "nmorph-number-input__decrease"
+}, p = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], f = {
+  key: 1,
+  class: "nmorph-number-input__increase"
+}, B = {
+  key: 2,
+  class: "nmorph-number-input__action-btns"
+}, g = { class: "nmorph-number-input__decrease" }, u = { class: "nmorph-number-input__increase" };
+function I(N, y, r, n, v, x) {
+  return o(), a(
+    "div",
+    {
+      class: d(n.modifiers),
+      style: c({ "--nmorph-number-input-right-action-height": n.rightActionBtnHeight })
+    },
+    [
+      e("div", _, [
+        e("div", s, [
+          r.actionBtnPositionRight ? m("v-if", !0) : (o(), a("div", b, [
+            i(n.NmorphButton, {
+              "style-type": "transparent",
+              disabled: n.minBtnDisabled,
+              height: n.props.height,
+              onClick: n.decreaseHandler
+            }, {
+              default: t(() => [
+                i(n.NmorphIcon, {
+                  width: n.actionBtnIconSize,
+                  height: n.actionBtnIconSize
+                }, {
+                  default: t(() => [
+                    i(n.NmorphIconMinusThin)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["width", "height"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled", "height"])
+          ])),
+          e("input", {
+            id: n.id,
+            ref: "inputDOMRef",
+            name: n.name,
+            autocomplete: n.autocomplete,
+            tabindex: n.tabindex,
+            class: "nmorph-native-input",
+            value: n.initialValue,
+            type: "number",
+            min: n.props.min,
+            max: n.props.max,
+            onInput: n.inputHandler
+          }, null, 40, p),
+          r.actionBtnPositionRight ? (o(), a("div", B, [
+            e("div", g, [
+              i(n.NmorphButton, {
+                "style-type": "transparent",
+                disabled: n.minBtnDisabled,
+                onClick: n.decreaseHandler
+              }, {
+                default: t(() => [
+                  i(n.NmorphIcon, {
+                    width: n.actionBtnIconSize,
+                    height: n.actionBtnIconSize
+                  }, {
+                    default: t(() => [
+                      i(n.NmorphIconMinusThin)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["width", "height"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"])
+            ]),
+            e("div", u, [
+              i(n.NmorphButton, {
+                "style-type": "transparent",
+                disabled: n.maxBtnDisabled,
+                onClick: n.increaseHandler
+              }, {
+                default: t(() => [
+                  i(n.NmorphIcon, {
+                    width: n.actionBtnIconSize,
+                    height: n.actionBtnIconSize
+                  }, {
+                    default: t(() => [
+                      i(n.NmorphIconPlusThin)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["width", "height"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"])
+            ])
+          ])) : (o(), a("div", f, [
+            i(n.NmorphButton, {
+              "style-type": "transparent",
+              disabled: n.maxBtnDisabled,
+              height: n.props.height,
+              onClick: n.increaseHandler
+            }, {
+              default: t(() => [
+                i(n.NmorphIcon, {
+                  width: n.actionBtnIconSize,
+                  height: n.actionBtnIconSize
+                }, {
+                  default: t(() => [
+                    i(n.NmorphIconPlusThin)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["width", "height"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled", "height"])
+          ]))
+        ])
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const C = /* @__PURE__ */ l(h, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-number-input/NmorphNumberInput.vue"]]);
+export {
+  C as default
+};

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue2.js

@@ -0,0 +1,79 @@
+import './NmorphNumberInput.css';
+import { defineComponent as S, computed as n, ref as l, watch as P } from "vue";
+import { NmorphComponentHeight as H } from "../../../types/index.js";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as R } from "../nmorph-form/use-form-item-input.js";
+import T from "../../../assets/icons/plus-thin.svg.js";
+import D from "../../../assets/icons/minus-thin.svg.js";
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import z from "../../basic/nmorph-button/NmorphButton.vue.js";
+const K = /* @__PURE__ */ S({
+  __name: "NmorphNumberInput",
+  props: {
+    modelValue: { type: Number, required: !1, default: 0 },
+    max: { type: Number, required: !1, default: 1 / 0 },
+    min: { type: Number, required: !1, default: -1 / 0 },
+    step: { type: Number, required: !1, default: 1 },
+    actionBtnPositionRight: { type: Boolean, required: !1, default: !1 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(m, { expose: p, emit: s }) {
+    const e = m, { id: d, name: c, autocomplete: f, tabindex: h } = R(e), g = n(
+      () => M({
+        nmorph: [H[e.height]],
+        "nmorph-number-input": [
+          `${e.disabled && "disabled"}`,
+          `${e.actionBtnPositionRight && "action-btn-position-right"}`
+        ]
+      })
+    ), t = l(e.modelValue), b = () => {
+      t.value += e.step;
+    }, x = () => {
+      t.value -= e.step;
+    }, N = n(() => t.value <= e.min), y = n(() => t.value >= e.max), v = n(() => e.height === "thick" ? "16px" : "12px"), o = {
+      thick: {
+        default: "12px",
+        right: "8px"
+      },
+      basic: {
+        default: "10px",
+        right: "7px"
+      },
+      thin: {
+        default: "8px",
+        right: "5px"
+      }
+    }, I = n(() => {
+      const i = e.actionBtnPositionRight ? "right" : "default";
+      return o[e.height][i];
+    }), a = s, q = (i) => {
+      const B = i.target;
+      let _ = Number(B.value);
+      t.value = _;
+    };
+    P(t, (i) => {
+      i > e.max && (t.value = e.max, r.value?.blur()), t.value < e.min && (t.value = e.min, r.value?.blur()), a("update:model-value", i);
+    });
+    const r = l(null);
+    p({ inputDOMRef: r });
+    const u = { props: e, id: d, name: c, autocomplete: f, tabindex: h, modifiers: g, initialValue: t, increaseHandler: b, decreaseHandler: x, minBtnDisabled: N, maxBtnDisabled: y, rightActionBtnHeight: v, iconSizeMap: o, actionBtnIconSize: I, emit: a, inputHandler: q, inputDOMRef: r, get NmorphButton() {
+      return z;
+    }, get NmorphIcon() {
+      return k;
+    }, get NmorphIconMinusThin() {
+      return D;
+    }, get NmorphIconPlusThin() {
+      return T;
+    } };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+});
+export {
+  K as default
+};

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.css

@@ -0,0 +1 @@
+.nmorph-otp-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-otp-input .nmorph-otp-input__content{display:flex;gap:var(--indentation-02)}.nmorph-otp-input .nmorph-otp-input__field{flex:0 0 auto;width:44px;min-width:44px}.nmorph-otp-input .nmorph-otp-input__field input{padding:0;text-align:center;text-indent:0;font-variant-numeric:tabular-nums}.nmorph-otp-input.nmorph--thin-component .nmorph-otp-input__field{width:32px;min-width:32px}.nmorph-otp-input.nmorph--thick-component .nmorph-otp-input__field{width:52px;min-width:52px}.nmorph-otp-input.nmorph-otp-input--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue.js

@@ -0,0 +1,71 @@
+import './NmorphOTPInput.css';
+import p from "./NmorphOTPInput.vue2.js";
+import { openBlock as a, createElementBlock as d, normalizeClass as m, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as t, withKeys as r } from "vue";
+/* empty css                    */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = ["name", "value", "disabled"], v = { class: "nmorph-otp-input__content" };
+function _(b, l, H, e, g, y) {
+  return a(), d(
+    "div",
+    {
+      class: m(e.modifiers)
+    },
+    [
+      i("input", {
+        name: e.name,
+        value: e.otpValue.join(""),
+        type: "hidden",
+        disabled: e.props.disabled
+      }, null, 8, u),
+      i("div", v, [
+        (a(!0), d(
+          c,
+          null,
+          s(e.otpValue, (k, o) => (a(), f(e.NmorphTextInput, {
+            id: e.fieldIds[o],
+            key: e.fieldIds[o],
+            ref_for: !0,
+            ref: (n) => e.setInputRef(n, o),
+            class: "nmorph-otp-input__field",
+            "model-value": e.otpValue[o],
+            height: e.props.height,
+            disabled: e.props.disabled,
+            autocomplete: e.resolvedAutocomplete,
+            tabindex: e.getFieldTabindex(o),
+            indentation: "0px",
+            "input-attrs": {
+              name: void 0,
+              maxlength: 1,
+              inputmode: e.inputMode,
+              pattern: e.inputPattern,
+              autocapitalize: e.props.autocapitalize,
+              spellcheck: !1,
+              autofocus: e.props.autofocus && o === 0,
+              "aria-label": `OTP ${o + 1}`
+            },
+            "onUpdate:modelValue": (n) => e.inputHandler(n, o),
+            onKeydown: [
+              l[0] || (l[0] = (n) => e.keydownHandler(n)),
+              r(t((n) => e.deleteKeyHandler(n, o), ["prevent"]), ["delete"]),
+              r(t((n) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
+              r(t((n) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
+              r(t(e.homeHandler, ["prevent"]), ["home"]),
+              r(t(e.endHandler, ["prevent"]), ["end"])
+            ],
+            onPaste: t((n) => e.pasteHandler(n, o), ["prevent"]),
+            onFocus: (n) => e.focusHandler(o),
+            onBlur: e.blurHandler
+          }, null, 8, ["id", "model-value", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onUpdate:modelValue", "onKeydown", "onPaste", "onFocus"]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const T = /* @__PURE__ */ h(p, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
+export {
+  T as default
+};

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js

@@ -0,0 +1,139 @@
+import './NmorphOTPInput.css';
+import { defineComponent as Y, ref as b, computed as i, watch as z, nextTick as D } from "vue";
+import { useModifiers as ee } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as te } from "../../../types/index.js";
+import { useFormItemInput as ae } from "../nmorph-form/use-form-item-input.js";
+import le from "../nmorph-text-input/NmorphTextInput.vue.js";
+const ce = /* @__PURE__ */ Y({
+  __name: "NmorphOTPInput",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    length: { type: Number, required: !1, default: 6 },
+    mode: { type: String, required: !1, default: "numeric" },
+    autofocus: { type: Boolean, required: !1, default: !1 },
+    autocapitalize: { type: String, required: !1, default: "none" },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value", "focus", "blur", "complete"],
+  setup(F, { expose: O, emit: I }) {
+    const a = F, d = I, { id: V, name: R, autocomplete: q, tabindex: p } = ae(a), s = b([]), n = b([]), c = b(!1), r = b([]), u = i(() => Math.max(1, a.length)), v = (e = "") => {
+      const t = `${e ?? ""}`;
+      return a.mode === "numeric" ? Array.from(t.replace(/\D/g, "")) : a.mode === "alphanumeric" ? Array.from(t.replace(/[^a-zA-Z0-9]/g, "")) : Array.from(t);
+    }, A = (e = a.modelValue) => {
+      const t = v(e).slice(0, u.value);
+      return Array.from({ length: u.value }, (l, m) => t[m] || "");
+    }, h = (e, t = !1) => {
+      if (r.value = Array.from({ length: u.value }, (m, y) => e[y] || ""), !t) return;
+      const l = r.value.join("");
+      d("update:model-value", l), r.value.includes("") || d("complete", l);
+    };
+    z(
+      [() => a.modelValue, () => a.mode, u],
+      () => {
+        const e = A(a.modelValue);
+        (e.join("") !== r.value.join("") || e.length !== r.value.length) && h(e);
+      },
+      { immediate: !0 }
+    );
+    const j = i(
+      () => ee({
+        nmorph: [te[a.height], `${c.value && "focused"}`],
+        "nmorph-otp-input": [`${a.disabled && "disabled"}`]
+      })
+    ), N = i(
+      () => Array.from({ length: u.value }, (e, t) => t === 0 ? V.value : `${V.value}-${t + 1}`)
+    ), T = i(() => a.mode === "numeric" ? "numeric" : "text"), $ = i(() => q.value || "one-time-code"), w = i(() => {
+      if (a.mode === "numeric") return "[0-9]*";
+      if (a.mode === "alphanumeric") return "[A-Za-z0-9]*";
+    }), g = (e) => {
+      n.value[e] = s.value[e]?.inputDOMRef ?? null;
+    }, x = (e, t) => {
+      s.value[t] = e, D(() => {
+        g(t);
+      });
+    }, _ = (e) => {
+      g(e), s.value[e]?.select?.(), n.value[e]?.select();
+    }, o = (e = 0) => {
+      D(() => {
+        const t = Math.min(Math.max(e, 0), u.value - 1);
+        g(t), s.value[t]?.focus?.(), n.value[t]?.focus(), _(t);
+      });
+    }, M = () => {
+      s.value.forEach((e, t) => {
+        e?.blur?.(), n.value[t]?.blur();
+      });
+    };
+    O({
+      inputDOMRefs: n,
+      focus: o,
+      blur: M
+    });
+    const f = (e, t = "") => {
+      const l = [...r.value];
+      l[e] = t, h(l, !0);
+    }, H = (e, t) => {
+      const l = v(e).slice(0, u.value - t);
+      if (!l.length) {
+        f(t, "");
+        return;
+      }
+      const m = [...r.value];
+      l.forEach((W, X) => {
+        m[t + X] = W;
+      }), h(m, !0);
+      const y = t + l.length;
+      y < u.value ? o(y) : o(u.value - 1);
+    }, E = (e, t) => {
+      H(e, t);
+    }, S = (e) => {
+      if (r.value[e]) {
+        f(e);
+        return;
+      }
+      e > 0 && (f(e - 1), o(e - 1));
+    }, B = (e, t) => {
+      if (e.key === "Backspace") {
+        S(t);
+        return;
+      }
+      f(t);
+    }, C = (e) => {
+      o(e - 1);
+    }, P = (e) => {
+      o(e + 1);
+    }, L = () => {
+      o(0);
+    }, Z = () => {
+      o(u.value - 1);
+    }, K = (e) => {
+      e.key.length === 1 && !v(e.key).length && e.preventDefault();
+    }, G = (e, t) => {
+      const l = e.clipboardData?.getData("text") || "";
+      H(l, t);
+    }, J = (e) => {
+      c.value || (c.value = !0, d("focus")), _(e);
+    }, Q = () => {
+      setTimeout(() => {
+        const e = document.activeElement;
+        !n.value.some((l) => l === e) && c.value && (c.value = !1, d("blur"));
+      });
+    }, U = (e) => p.value > 0 ? p.value + e : p.value;
+    z(
+      () => a.autofocus,
+      (e) => {
+        e && !a.disabled && o(0);
+      },
+      { immediate: !0 }
+    );
+    const k = { props: a, emit: d, id: V, name: R, autocomplete: q, tabindex: p, inputRefs: s, inputDOMRefs: n, focused: c, otpValue: r, normalizedLength: u, sanitizeValue: v, normalizeOtpValue: A, syncOtpValue: h, modifiers: j, fieldIds: N, inputMode: T, resolvedAutocomplete: $, inputPattern: w, syncInputDOMRef: g, setInputRef: x, selectField: _, focusField: o, blurFields: M, updateCharAt: f, insertValue: H, inputHandler: E, backspaceHandler: S, deleteKeyHandler: B, arrowLeftHandler: C, arrowRightHandler: P, homeHandler: L, endHandler: Z, keydownHandler: K, pasteHandler: G, focusHandler: J, blurHandler: Q, getFieldTabindex: U, NmorphTextInput: le };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+  }
+});
+export {
+  ce as default
+};

package/dist/components/form/nmorph-radio/NmorphRadio.css

@@ -0,0 +1 @@
+.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}