@a-drowned-fish/rox-v 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# @a-drowned-fish/rox-v
+
+## Usage
+
+### Install
+
+```bash
+npm add @a-drowned-fish/rox-v
+```
+
+### Import all components
+
+```ts
+import { createApp } from "vue";
+import RoxV from "@a-drowned-fish/rox-v";
+import "@a-drowned-fish/rox-v/dist/style.css";
+
+const app = createApp(App);
+app.use(RoxV);
+```
+
+### Tree-shakable import
+
+```ts
+import { InputOtp } from "@a-drowned-fish/rox-v";
+import "@a-drowned-fish/rox-v/es/input-otp/index.css";
+```
+
+### Auto Import
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import Components from "unplugin-vue-components/vite";
+import { RoxVResolver } from "@a-drowned-fish/rox-v/resolver";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [RoxVResolver()],
+    }),
+  ],
+});
+```
+
+## License
+
+MIT

package/dist/index.iife.js

@@ -0,0 +1 @@
+var RoxV=function(c,e){"use strict";const f=["maxlength"],p=((o,r)=>{const l=o.__vccOpts||o;for(const[s,i]of r)l[s]=i;return l})(e.defineComponent({__name:"input-otp",props:{modelValue:{default:""},length:{default:6},itemClass:{default:""},activeItemClass:{default:""},gap:{default:"10px"}},emits:["update:modelValue","complete"],setup(o,{emit:r}){const l=o,s=r,i=e.ref(null),a=e.ref(l.modelValue);e.watch(()=>l.modelValue,n=>{n!==a.value&&(a.value=n)});function _(n){let t=n.target.value;t=t.replace(/\D/g,""),t=t.slice(0,l.length),a.value=t,s("update:modelValue",t),t.length===l.length&&s("complete",t)}function h(){var n;(n=i.value)==null||n.focus()}function m(n){return n===a.value.length}return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:"otp-wrapper",onClick:h},[e.withDirectives(e.createElementVNode("input",{inputmode:"numeric",autocomplete:"one-time-code",ref_key:"inputRef",ref:i,"onUpdate:modelValue":t[0]||(t[0]=d=>a.value=d),maxlength:o.length,onInput:_,class:"otp-input"},null,40,f),[[e.vModelText,a.value]]),e.createElementVNode("div",{class:"otp-box",style:e.normalizeStyle({gap:l.gap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.length,(d,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(["otp-item",[{active:m(u),[l.activeItemClass]:m(u)},l.itemClass]])},e.toDisplayString(a.value[u]||""),3))),128))],4)]))}}),[["__scopeId","data-v-14ecb7bd"]]),g={version:"1.0.0",install:o=>{o.component("RInputOtp",p)}};return c.InputOtp=p,c.default=g,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c}({},Vue);

package/dist/index.js

@@ -0,0 +1,75 @@
+import { defineComponent as h, ref as d, watch as _, openBlock as i, createElementBlock as p, withDirectives as I, createElementVNode as f, vModelText as V, normalizeStyle as C, Fragment as k, renderList as x, normalizeClass as y, toDisplayString as b } from "vue";
+const w = ["maxlength"], D = /* @__PURE__ */ h({
+  __name: "input-otp",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    gap: { default: "10px" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(n, { emit: c }) {
+    const t = n, o = c, u = d(null), a = d(t.modelValue);
+    _(
+      () => t.modelValue,
+      (l) => {
+        l !== a.value && (a.value = l);
+      }
+    );
+    function v(l) {
+      let e = l.target.value;
+      e = e.replace(/\D/g, ""), e = e.slice(0, t.length), a.value = e, o("update:modelValue", e), e.length === t.length && o("complete", e);
+    }
+    function g() {
+      var l;
+      (l = u.value) == null || l.focus();
+    }
+    function r(l) {
+      return l === a.value.length;
+    }
+    return (l, e) => (i(), p("div", {
+      class: "otp-wrapper",
+      onClick: g
+    }, [
+      I(f("input", {
+        inputmode: "numeric",
+        autocomplete: "one-time-code",
+        ref_key: "inputRef",
+        ref: u,
+        "onUpdate:modelValue": e[0] || (e[0] = (m) => a.value = m),
+        maxlength: n.length,
+        onInput: v,
+        class: "otp-input"
+      }, null, 40, w), [
+        [V, a.value]
+      ]),
+      f("div", {
+        class: "otp-box",
+        style: C({ gap: t.gap })
+      }, [
+        (i(!0), p(k, null, x(n.length, (m, s) => (i(), p("div", {
+          key: s,
+          class: y(["otp-item", [
+            { active: r(s), [t.activeItemClass]: r(s) },
+            t.itemClass
+          ]])
+        }, b(a.value[s] || ""), 3))), 128))
+      ], 4)
+    ]));
+  }
+}), O = (n, c) => {
+  const t = n.__vccOpts || n;
+  for (const [o, u] of c)
+    t[o] = u;
+  return t;
+}, R = /* @__PURE__ */ O(D, [["__scopeId", "data-v-14ecb7bd"]]), z = "1.0.0", B = (n) => {
+  n.component("RInputOtp", R);
+}, S = {
+  version: z,
+  install: B
+};
+export {
+  R as InputOtp,
+  S as default
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.RoxV={},o.Vue))})(this,function(o,e){"use strict";const f=["maxlength"],r=((a,p)=>{const n=a.__vccOpts||a;for(const[s,c]of p)n[s]=c;return n})(e.defineComponent({__name:"input-otp",props:{modelValue:{default:""},length:{default:6},itemClass:{default:""},activeItemClass:{default:""},gap:{default:"10px"}},emits:["update:modelValue","complete"],setup(a,{emit:p}){const n=a,s=p,c=e.ref(null),i=e.ref(n.modelValue);e.watch(()=>n.modelValue,l=>{l!==i.value&&(i.value=l)});function _(l){let t=l.target.value;t=t.replace(/\D/g,""),t=t.slice(0,n.length),i.value=t,s("update:modelValue",t),t.length===n.length&&s("complete",t)}function h(){var l;(l=c.value)==null||l.focus()}function d(l){return l===i.value.length}return(l,t)=>(e.openBlock(),e.createElementBlock("div",{class:"otp-wrapper",onClick:h},[e.withDirectives(e.createElementVNode("input",{inputmode:"numeric",autocomplete:"one-time-code",ref_key:"inputRef",ref:c,"onUpdate:modelValue":t[0]||(t[0]=m=>i.value=m),maxlength:a.length,onInput:_,class:"otp-input"},null,40,f),[[e.vModelText,i.value]]),e.createElementVNode("div",{class:"otp-box",style:e.normalizeStyle({gap:n.gap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.length,(m,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(["otp-item",[{active:d(u),[n.activeItemClass]:d(u)},n.itemClass]])},e.toDisplayString(i.value[u]||""),3))),128))],4)]))}}),[["__scopeId","data-v-14ecb7bd"]]),g={version:"1.0.0",install:a=>{a.component("RInputOtp",r)}};o.InputOtp=r,o.default=g,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.otp-wrapper[data-v-14ecb7bd]{position:relative;width:max-content;cursor:pointer}.otp-input[data-v-14ecb7bd]{position:absolute;opacity:0;pointer-events:none}.otp-box[data-v-14ecb7bd]{display:flex}.otp-item[data-v-14ecb7bd]{width:40px;height:50px;border:1px solid #ccc;border-radius:8px;text-align:center;line-height:50px;font-size:20px;transition:all .2s}.otp-item.active[data-v-14ecb7bd]{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}

package/es/components.d.ts

@@ -0,0 +1 @@
+export { InputOtp } from './components/input-otp';

package/es/components.js

@@ -0,0 +1,69 @@
+import { defineComponent as h, ref as d, watch as _, openBlock as i, createElementBlock as p, withDirectives as V, createElementVNode as f, vModelText as C, normalizeStyle as I, Fragment as k, renderList as y, normalizeClass as x, toDisplayString as b } from "vue";
+const w = ["maxlength"], D = /* @__PURE__ */ h({
+  __name: "input-otp",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    gap: { default: "10px" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(a, { emit: c }) {
+    const t = a, o = c, u = d(null), n = d(t.modelValue);
+    _(
+      () => t.modelValue,
+      (l) => {
+        l !== n.value && (n.value = l);
+      }
+    );
+    function v(l) {
+      let e = l.target.value;
+      e = e.replace(/\D/g, ""), e = e.slice(0, t.length), n.value = e, o("update:modelValue", e), e.length === t.length && o("complete", e);
+    }
+    function g() {
+      var l;
+      (l = u.value) == null || l.focus();
+    }
+    function r(l) {
+      return l === n.value.length;
+    }
+    return (l, e) => (i(), p("div", {
+      class: "otp-wrapper",
+      onClick: g
+    }, [
+      V(f("input", {
+        inputmode: "numeric",
+        autocomplete: "one-time-code",
+        ref_key: "inputRef",
+        ref: u,
+        "onUpdate:modelValue": e[0] || (e[0] = (m) => n.value = m),
+        maxlength: a.length,
+        onInput: v,
+        class: "otp-input"
+      }, null, 40, w), [
+        [C, n.value]
+      ]),
+      f("div", {
+        class: "otp-box",
+        style: I({ gap: t.gap })
+      }, [
+        (i(!0), p(k, null, y(a.length, (m, s) => (i(), p("div", {
+          key: s,
+          class: x(["otp-item", [
+            { active: r(s), [t.activeItemClass]: r(s) },
+            t.itemClass
+          ]])
+        }, b(n.value[s] || ""), 3))), 128))
+      ], 4)
+    ]));
+  }
+}), z = (a, c) => {
+  const t = a.__vccOpts || a;
+  for (const [o, u] of c)
+    t[o] = u;
+  return t;
+}, E = /* @__PURE__ */ z(D, [["__scopeId", "data-v-14ecb7bd"]]);
+export {
+  E as InputOtp
+};

package/es/index.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { default as InputOtp } from './components/input-otp/input-otp.vue';
+export * from './components';
+export { InputOtp };
+declare const _default: {
+    version: string;
+    install: (app: App) => void;
+};
+export default _default;

package/es/index.js

@@ -0,0 +1,75 @@
+import { defineComponent as h, ref as d, watch as _, openBlock as i, createElementBlock as p, withDirectives as I, createElementVNode as f, vModelText as V, normalizeStyle as C, Fragment as k, renderList as x, normalizeClass as y, toDisplayString as b } from "vue";
+const w = ["maxlength"], D = /* @__PURE__ */ h({
+  __name: "input-otp",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    gap: { default: "10px" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(n, { emit: c }) {
+    const t = n, o = c, u = d(null), a = d(t.modelValue);
+    _(
+      () => t.modelValue,
+      (l) => {
+        l !== a.value && (a.value = l);
+      }
+    );
+    function v(l) {
+      let e = l.target.value;
+      e = e.replace(/\D/g, ""), e = e.slice(0, t.length), a.value = e, o("update:modelValue", e), e.length === t.length && o("complete", e);
+    }
+    function g() {
+      var l;
+      (l = u.value) == null || l.focus();
+    }
+    function r(l) {
+      return l === a.value.length;
+    }
+    return (l, e) => (i(), p("div", {
+      class: "otp-wrapper",
+      onClick: g
+    }, [
+      I(f("input", {
+        inputmode: "numeric",
+        autocomplete: "one-time-code",
+        ref_key: "inputRef",
+        ref: u,
+        "onUpdate:modelValue": e[0] || (e[0] = (m) => a.value = m),
+        maxlength: n.length,
+        onInput: v,
+        class: "otp-input"
+      }, null, 40, w), [
+        [V, a.value]
+      ]),
+      f("div", {
+        class: "otp-box",
+        style: C({ gap: t.gap })
+      }, [
+        (i(!0), p(k, null, x(n.length, (m, s) => (i(), p("div", {
+          key: s,
+          class: y(["otp-item", [
+            { active: r(s), [t.activeItemClass]: r(s) },
+            t.itemClass
+          ]])
+        }, b(a.value[s] || ""), 3))), 128))
+      ], 4)
+    ]));
+  }
+}), O = (n, c) => {
+  const t = n.__vccOpts || n;
+  for (const [o, u] of c)
+    t[o] = u;
+  return t;
+}, R = /* @__PURE__ */ O(D, [["__scopeId", "data-v-14ecb7bd"]]), z = "1.0.0", B = (n) => {
+  n.component("RInputOtp", R);
+}, S = {
+  version: z,
+  install: B
+};
+export {
+  R as InputOtp,
+  S as default
+};

package/es/input-otp/index.css

@@ -0,0 +1,28 @@
+
+.otp-wrapper[data-v-14ecb7bd] {
+  position: relative;
+  width: max-content;
+  cursor: pointer;
+}
+.otp-input[data-v-14ecb7bd] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.otp-box[data-v-14ecb7bd] {
+  display: flex;
+}
+.otp-item[data-v-14ecb7bd] {
+  width: 40px;
+  height: 50px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 50px;
+  font-size: 20px;
+  transition: all 0.2s;
+}
+.otp-item.active[data-v-14ecb7bd] {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}

package/es/input-otp/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InputOtp } from './input-otp.vue';
+export { InputOtp };
+export default InputOtp;

package/es/input-otp/index.js

@@ -0,0 +1,89 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, withDirectives, createElementVNode, vModelText, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
+const _hoisted_1 = ["maxlength"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "input-otp",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    gap: { default: "10px" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputRef = ref(null);
+    const innerValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (val !== innerValue.value) {
+          innerValue.value = val;
+        }
+      }
+    );
+    function handleInput(e) {
+      let value = e.target.value;
+      value = value.replace(/\D/g, "");
+      value = value.slice(0, props.length);
+      innerValue.value = value;
+      emit("update:modelValue", value);
+      if (value.length === props.length) {
+        emit("complete", value);
+      }
+    }
+    function focusInput() {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    }
+    function isActive(index) {
+      return index === innerValue.value.length;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "otp-wrapper",
+        onClick: focusInput
+      }, [
+        withDirectives(createElementVNode("input", {
+          inputmode: "numeric",
+          autocomplete: "one-time-code",
+          ref_key: "inputRef",
+          ref: inputRef,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+          maxlength: __props.length,
+          onInput: handleInput,
+          class: "otp-input"
+        }, null, 40, _hoisted_1), [
+          [vModelText, innerValue.value]
+        ]),
+        createElementVNode("div", {
+          class: "otp-box",
+          style: normalizeStyle({ gap: props.gap })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (_, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: normalizeClass(["otp-item", [
+                { active: isActive(index), [props.activeItemClass]: isActive(index) },
+                props.itemClass
+              ]])
+            }, toDisplayString(innerValue.value[index] || ""), 3);
+          }), 128))
+        ], 4)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const InputOtp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14ecb7bd"]]);
+export {
+  InputOtp,
+  InputOtp as default
+};

package/es/input-otp/input-otp.vue.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    modelValue?: string;
+    length?: number;
+    itemClass?: string;
+    activeItemClass?: string;
+    gap?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    length: number;
+    itemClass: string;
+    activeItemClass: string;
+    gap: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/lib/components.d.ts

@@ -0,0 +1 @@
+export { InputOtp } from './components/input-otp';

package/lib/components.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),f=["maxlength"],v=e.defineComponent({__name:"input-otp",props:{modelValue:{default:""},length:{default:6},itemClass:{default:""},activeItemClass:{default:""},gap:{default:"10px"}},emits:["update:modelValue","complete"],setup(a,{emit:i}){const l=a,u=i,c=e.ref(null),o=e.ref(l.modelValue);e.watch(()=>l.modelValue,n=>{n!==o.value&&(o.value=n)});function m(n){let t=n.target.value;t=t.replace(/\D/g,""),t=t.slice(0,l.length),o.value=t,u("update:modelValue",t),t.length===l.length&&u("complete",t)}function d(){var n;(n=c.value)==null||n.focus()}function r(n){return n===o.value.length}return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:"otp-wrapper",onClick:d},[e.withDirectives(e.createElementVNode("input",{inputmode:"numeric",autocomplete:"one-time-code",ref_key:"inputRef",ref:c,"onUpdate:modelValue":t[0]||(t[0]=p=>o.value=p),maxlength:a.length,onInput:m,class:"otp-input"},null,40,f),[[e.vModelText,o.value]]),e.createElementVNode("div",{class:"otp-box",style:e.normalizeStyle({gap:l.gap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.length,(p,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(["otp-item",[{active:r(s),[l.activeItemClass]:r(s)},l.itemClass]])},e.toDisplayString(o.value[s]||""),3))),128))],4)]))}}),g=(a,i)=>{const l=a.__vccOpts||a;for(const[u,c]of i)l[u]=c;return l},h=g(v,[["__scopeId","data-v-14ecb7bd"]]);exports.InputOtp=h;

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { default as InputOtp } from './components/input-otp/input-otp.vue';
+export * from './components';
+export { InputOtp };
+declare const _default: {
+    version: string;
+    install: (app: App) => void;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=["maxlength"],g=e.defineComponent({__name:"input-otp",props:{modelValue:{default:""},length:{default:6},itemClass:{default:""},activeItemClass:{default:""},gap:{default:"10px"}},emits:["update:modelValue","complete"],setup(o,{emit:i}){const l=o,u=i,c=e.ref(null),a=e.ref(l.modelValue);e.watch(()=>l.modelValue,n=>{n!==a.value&&(a.value=n)});function d(n){let t=n.target.value;t=t.replace(/\D/g,""),t=t.slice(0,l.length),a.value=t,u("update:modelValue",t),t.length===l.length&&u("complete",t)}function v(){var n;(n=c.value)==null||n.focus()}function p(n){return n===a.value.length}return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:"otp-wrapper",onClick:v},[e.withDirectives(e.createElementVNode("input",{inputmode:"numeric",autocomplete:"one-time-code",ref_key:"inputRef",ref:c,"onUpdate:modelValue":t[0]||(t[0]=r=>a.value=r),maxlength:o.length,onInput:d,class:"otp-input"},null,40,f),[[e.vModelText,a.value]]),e.createElementVNode("div",{class:"otp-box",style:e.normalizeStyle({gap:l.gap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.length,(r,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(["otp-item",[{active:p(s),[l.activeItemClass]:p(s)},l.itemClass]])},e.toDisplayString(a.value[s]||""),3))),128))],4)]))}}),h=(o,i)=>{const l=o.__vccOpts||o;for(const[u,c]of i)l[u]=c;return l},m=h(g,[["__scopeId","data-v-14ecb7bd"]]),_="1.0.0",k=o=>{o.component("RInputOtp",m)},I={version:_,install:k};exports.InputOtp=m;exports.default=I;

package/lib/input-otp/index.css

@@ -0,0 +1,28 @@
+
+.otp-wrapper[data-v-14ecb7bd] {
+  position: relative;
+  width: max-content;
+  cursor: pointer;
+}
+.otp-input[data-v-14ecb7bd] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.otp-box[data-v-14ecb7bd] {
+  display: flex;
+}
+.otp-item[data-v-14ecb7bd] {
+  width: 40px;
+  height: 50px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 50px;
+  font-size: 20px;
+  transition: all 0.2s;
+}
+.otp-item.active[data-v-14ecb7bd] {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}

package/lib/input-otp/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InputOtp } from './input-otp.vue';
+export { InputOtp };
+export default InputOtp;

package/lib/input-otp/index.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const _hoisted_1 = ["maxlength"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "input-otp",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    gap: { default: "10px" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputRef = vue.ref(null);
+    const innerValue = vue.ref(props.modelValue);
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        if (val !== innerValue.value) {
+          innerValue.value = val;
+        }
+      }
+    );
+    function handleInput(e) {
+      let value = e.target.value;
+      value = value.replace(/\D/g, "");
+      value = value.slice(0, props.length);
+      innerValue.value = value;
+      emit("update:modelValue", value);
+      if (value.length === props.length) {
+        emit("complete", value);
+      }
+    }
+    function focusInput() {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    }
+    function isActive(index) {
+      return index === innerValue.value.length;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "otp-wrapper",
+        onClick: focusInput
+      }, [
+        vue.withDirectives(vue.createElementVNode("input", {
+          inputmode: "numeric",
+          autocomplete: "one-time-code",
+          ref_key: "inputRef",
+          ref: inputRef,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+          maxlength: __props.length,
+          onInput: handleInput,
+          class: "otp-input"
+        }, null, 40, _hoisted_1), [
+          [vue.vModelText, innerValue.value]
+        ]),
+        vue.createElementVNode("div", {
+          class: "otp-box",
+          style: vue.normalizeStyle({ gap: props.gap })
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.length, (_, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: index,
+              class: vue.normalizeClass(["otp-item", [
+                { active: isActive(index), [props.activeItemClass]: isActive(index) },
+                props.itemClass
+              ]])
+            }, vue.toDisplayString(innerValue.value[index] || ""), 3);
+          }), 128))
+        ], 4)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const InputOtp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14ecb7bd"]]);
+exports.InputOtp = InputOtp;
+exports.default = InputOtp;

package/lib/input-otp/input-otp.vue.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    modelValue?: string;
+    length?: number;
+    itemClass?: string;
+    activeItemClass?: string;
+    gap?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    length: number;
+    itemClass: string;
+    activeItemClass: string;
+    gap: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@a-drowned-fish/rox-v",
+  "version": "1.0.0",
+  "description": "A Vue 3 UI Component Library",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "browser": "dist/index.iife.js",
+  "unpkg": "dist/index.iife.js",
+  "jsdelivr": "dist/index.iife.js",
+  "files": [
+    "dist",
+    "es",
+    "lib",
+    "resolver"
+  ],
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js",
+      "types": "./es/index.d.ts"
+    },
+    "./components": {
+      "import": "./es/components.js",
+      "require": "./lib/components.js",
+      "types": "./es/components.d.ts"
+    },
+    "./resolver": {
+      "import": "./resolver/resolver.js",
+      "require": "./resolver/resolver.cjs",
+      "types": "./resolver/resolver.d.ts"
+    },
+    "./dist/*": "./dist/*",
+    "./es/*": "./es/*",
+    "./lib/*": "./lib/*"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.vue.css"
+  ],
+  "scripts": {
+    "build": "tsx scripts/build.ts",
+    "dev": "vite",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "keywords": [
+    "vue",
+    "ui",
+    "component-library",
+    "auto-import",
+    "unplugin-vue-components"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "unplugin-vue-components": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "rimraf": "^6.1.3",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/resolver/resolver.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const componentMap = {
+  RInputOtp: "input-otp"
+};
+function RoxVResolver(options = {}) {
+  const { cjs = false } = options;
+  const moduleType = cjs ? "lib" : "es";
+  return {
+    type: "component",
+    resolve: (name) => {
+      const componentName = componentMap[name];
+      if (!componentName) {
+        return void 0;
+      }
+      return {
+        name,
+        path: `rox-v/${moduleType}/${componentName}`,
+        sideEffects: `rox-v/${moduleType}/${componentName}/index.css`
+      };
+    }
+  };
+}
+exports.RoxVResolver = RoxVResolver;
+exports.default = RoxVResolver;

package/resolver/resolver.d.ts

@@ -0,0 +1,13 @@
+import { ComponentResolver } from 'unplugin-vue-components/types';
+export interface RoxVResolverOptions {
+    /**
+     * Use CommonJS build (lib) instead of ES modules (es)
+     * @default false
+     */
+    cjs?: boolean;
+}
+/**
+ * Create a resolver for rox-v components
+ */
+export declare function RoxVResolver(options?: RoxVResolverOptions): ComponentResolver;
+export default RoxVResolver;

package/resolver/resolver.js

@@ -0,0 +1,25 @@
+const componentMap = {
+  RInputOtp: "input-otp"
+};
+function RoxVResolver(options = {}) {
+  const { cjs = false } = options;
+  const moduleType = cjs ? "lib" : "es";
+  return {
+    type: "component",
+    resolve: (name) => {
+      const componentName = componentMap[name];
+      if (!componentName) {
+        return void 0;
+      }
+      return {
+        name,
+        path: `rox-v/${moduleType}/${componentName}`,
+        sideEffects: `rox-v/${moduleType}/${componentName}/index.css`
+      };
+    }
+  };
+}
+export {
+  RoxVResolver,
+  RoxVResolver as default
+};