@a-drowned-fish/rox-v 1.0.0 → 1.0.1

package/README.md

@@ -1,32 +1,39 @@
-# @a-drowned-fish/rox-v
+# Rox V
 
-## Usage
+一个基于 Vue 3 的组件库，支持按需引入和自动导入。
 
-### Install
+## 安装
 
 ```bash
-npm add @a-drowned-fish/rox-v
+npm install @a-drowned-fish/rox-v
+# 或
+yarn add @a-drowned-fish/rox-v
+# 或
+pnpm add @a-drowned-fish/rox-v
 ```
 
-### Import all components
+## 使用方式
+
+### 1. 完整引入
 
 ```ts
 import { createApp } from "vue";
 import RoxV from "@a-drowned-fish/rox-v";
-import "@a-drowned-fish/rox-v/dist/style.css";
+import "@a-drowned-fish/rox-v/dist/es/style.css"; // 如果需要样式
 
 const app = createApp(App);
 app.use(RoxV);
 ```
 
-### Tree-shakable import
+### 2. 按需引入（配合 unplugin-vue-components）
 
-```ts
-import { InputOtp } from "@a-drowned-fish/rox-v";
-import "@a-drowned-fish/rox-v/es/input-otp/index.css";
+安装依赖：
+
+```bash
+npm install unplugin-vue-components -D
 ```
 
-### Auto Import
+在 Vite 配置中使用：
 
 ```ts
 // vite.config.ts
@@ -35,17 +42,182 @@ 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()],
-    }),
-  ],
+    plugins: [
+        vue(),
+        Components({
+            resolvers: [RoxVResolver()], // 默认会自动引入样式
+        }),
+    ],
+});
+```
+
+然后在模板中直接使用组件，无需手动导入：
+
+```vue
+<template>
+    <Button>点击我</Button>
+    <InputOtp />
+</template>
+```
+
+**注意**：Resolver 默认会自动引入每个组件的样式文件。如果不需要自动引入样式，可以配置 `importStyle: false`：
+
+```ts
+Components({
+    resolvers: [RoxVResolver({ importStyle: false })],
+});
+```
+
+### 3. 手动按需引入
+
+```ts
+import { Button, InputOtp } from "@a-drowned-fish/rox-v";
+```
+
+## Resolver 选项
+
+`RoxVResolver` 接受一个可选的配置对象：
+
+```ts
+interface RoxVResolverOptions {
+    /**
+     * 使用 CommonJS 构建 (lib) 而不是 ES 模块 (es)
+     * @default false
+     */
+    cjs?: boolean;
+
+    /**
+     * 自动引入组件样式
+     * @default true
+     */
+    importStyle?: boolean;
+}
+```
+
+示例：
+
+```ts
+// 使用 CommonJS 构建
+Components({
+    resolvers: [RoxVResolver({ cjs: true })],
+});
+
+// 禁用自动引入样式
+Components({
+    resolvers: [RoxVResolver({ importStyle: false })],
+});
+
+// 同时配置多个选项
+Components({
+    resolvers: [RoxVResolver({ cjs: true, importStyle: true })],
 });
 ```
 
+## 可用组件
+
+### InputOtp - OTP 输入组件
+
+一个用于输入一次性密码（OTP）的组件，支持自定义长度、样式和间距。
+
+#### 基础用法
+
+```vue
+<template>
+    <InputOtp v-model="code" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const code = ref("");
+</script>
+```
+
+#### 自定义长度
+
+```vue
+<template>
+    <!-- 4位验证码 -->
+    <InputOtp v-model="code" :length="4" />
+
+    <!-- 8位验证码 -->
+    <InputOtp v-model="code" :length="8" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const code = ref("");
+</script>
+```
+
+#### 自定义样式
+
+```vue
+<template>
+    <InputOtp v-model="code" item-class="custom-item" active-item-class="custom-active" gap="15px" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const code = ref("");
+</script>
+
+<style scoped>
+.custom-item {
+    width: 50px;
+    height: 60px;
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    font-size: 24px;
+}
+
+.custom-active {
+    border-color: #67c23a;
+    box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
+}
+</style>
+```
+
+#### 监听完成事件
+
+```vue
+<template>
+    <InputOtp v-model="code" @complete="handleComplete" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const code = ref("");
+
+const handleComplete = (value: string) => {
+    console.log("验证码输入完成:", value);
+    // 在这里执行验证逻辑
+};
+</script>
+```
+
+#### Props
+
+| 属性               | 说明                                         | 类型     | 默认值     |
+| ------------------ | -------------------------------------------- | -------- | ---------- |
+| modelValue         | 绑定值                                       | `string` | `''`       |
+| length             | 输入框数量                                   | `number` | `6`        |
+| itemClass          | 每个输入项的自定义类名                       | `string` | `''`       |
+| activeItemClass    | 激活状态输入项的自定义类名                   | `string` | `''`       |
+| gap                | 输入项之间的间距                             | `string` | `'10px'`   |
+| hasFilledItemClass | 具有内容的输入项的类名[active前面选项的类名] | `string` | `'active'` |
+
+#### Events
+
+| 事件名            | 说明                           | 回调参数          |
+| ----------------- | ------------------------------ | ----------------- |
+| update:modelValue | 输入值变化时触发               | `(value: string)` |
+| complete          | 输入完成时触发（达到指定长度） | `(value: string)` |
+
 ## License
 
 MIT

package/dist/es/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as default };

package/dist/es/_virtual/_rolldown/runtime.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/dist/es/components.js

@@ -0,0 +1,6 @@
+import { __exportAll as e } from "./_virtual/_rolldown/runtime.js";
+import t from "./input-otp/index.js";
+//#region components/components.ts
+var n = /* @__PURE__ */ e({ InputOtp: () => t });
+//#endregion
+export { n as components_exports };

package/dist/es/index.js

@@ -0,0 +1,9 @@
+import e from "./input-otp/index.js";
+import { components_exports as t } from "./components.js";
+//#region components/index.ts
+var n = (e) => (Object.keys(t).forEach((n) => {
+	let r = t[n];
+	r.install && e.use(r);
+}), e), r = { install: n };
+//#endregion
+export { e as InputOtp, r as default, n as install };

package/dist/es/input-otp/index.js

@@ -0,0 +1,6 @@
+import e from "./input-otp.js";
+//#region components/input-otp/index.ts
+e.install = (t) => (e.name && t.component(e.name, e), t);
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/input-otp/input-otp.js

@@ -0,0 +1,7 @@
+import e from "./input-otp.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                          */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+//#region components/input-otp/input-otp.vue
+var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-9ff7490d"]]);
+//#endregion
+export { n as default };

package/dist/es/input-otp/input-otp.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,63 @@
+import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, ref as s, renderList as c, toDisplayString as l, vModelText as u, watch as d, withDirectives as f } from "vue";
+//#region components/input-otp/input-otp.vue?vue&type=script&setup=true&lang.ts
+var p = ["maxlength"], m = /* @__PURE__ */ r({
+	name: "InputOtp",
+	__name: "input-otp",
+	props: {
+		modelValue: { default: "" },
+		length: { default: 6 },
+		itemClass: { default: "" },
+		activeItemClass: { default: "" },
+		gap: { default: "10px" },
+		hasFilledItemClass: { default: "active" }
+	},
+	emits: ["update:modelValue", "complete"],
+	setup(r, { emit: m }) {
+		let h = r, g = m, _ = s(null), v = s(h.modelValue);
+		d(() => h.modelValue, (e) => {
+			e !== v.value && (v.value = e);
+		});
+		function y(e) {
+			let t = e.target.value;
+			t = t.replace(/\D/g, ""), t = t.slice(0, h.length), v.value = t, g("update:modelValue", t), t.length === h.length && g("complete", t);
+		}
+		function b() {
+			_.value?.focus();
+		}
+		function x(e) {
+			return e === v.value.length;
+		}
+		function S(e) {
+			return e < v.value.length;
+		}
+		return (s, d) => (o(), t("div", {
+			class: "otp-wrapper",
+			onClick: b
+		}, [f(n("input", {
+			inputmode: "numeric",
+			autocomplete: "one-time-code",
+			ref_key: "inputRef",
+			ref: _,
+			"onUpdate:modelValue": d[0] ||= (e) => v.value = e,
+			maxlength: r.length,
+			onInput: y,
+			style: {
+				position: "absolute",
+				opacity: "0",
+				"pointer-events": "none"
+			}
+		}, null, 40, p), [[u, v.value]]), n("div", {
+			class: "otp-box",
+			style: a({ gap: h.gap })
+		}, [(o(!0), t(e, null, c(r.length, (e, n) => (o(), t("div", {
+			key: n,
+			class: i(["otp-item", [
+				{ [h.activeItemClass]: x(n) },
+				{ [h.hasFilledItemClass]: S(n) },
+				h.itemClass
+			]])
+		}, l(v.value[n] || ""), 3))), 128))], 4)]));
+	}
+});
+//#endregion
+export { m as default };

package/dist/es/input-otp/style.css

@@ -0,0 +1 @@
+.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}

package/dist/index.js

@@ -1,75 +1 @@
-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
-};
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`rox-v`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.defineProperty,r=(e,t)=>{let r={};for(var i in e)n(r,i,{get:e[i],enumerable:!0});return t||n(r,Symbol.toStringTag,{value:`Module`}),r},i=[`maxlength`],a=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`}},emits:[`update:modelValue`,`complete`],setup(e,{emit:n}){let r=e,a=n,o=(0,t.ref)(null),s=(0,t.ref)(r.modelValue);(0,t.watch)(()=>r.modelValue,e=>{e!==s.value&&(s.value=e)});function c(e){let t=e.target.value;t=t.replace(/\D/g,``),t=t.slice(0,r.length),s.value=t,a(`update:modelValue`,t),t.length===r.length&&a(`complete`,t)}function l(){o.value?.focus()}function u(e){return e===s.value.length}function d(e){return e<s.value.length}return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:l},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:o,"onUpdate:modelValue":a[0]||=e=>s.value=e,maxlength:e.length,onInput:c,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`}},null,40,i),[[t.vModelText,s.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:r.gap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.length,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:(0,t.normalizeClass)([`otp-item`,[{[r.activeItemClass]:u(n)},{[r.hasFilledItemClass]:d(n)},r.itemClass]])},(0,t.toDisplayString)(s.value[n]||``),3))),128))],4)]))}}),[[`__scopeId`,`data-v-9ff7490d`]]);a.install=e=>(a.name&&e.component(a.name,a),e);var o=a,s=r({InputOtp:()=>o}),c=e=>(Object.keys(s).forEach(t=>{let n=s[t];n.install&&e.use(n)}),e),l={install:c};e.InputOtp=o,e.default=l,e.install=c});

package/dist/lib/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1 @@
+var e=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};exports.default=e;

package/dist/lib/_virtual/_rolldown/runtime.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};exports.__exportAll=t;

package/dist/lib/components.js

@@ -0,0 +1 @@
+const e=require(`./_virtual/_rolldown/runtime.js`),t=require(`./input-otp/index.js`);var n=e.__exportAll({InputOtp:()=>t.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return n}});

package/dist/lib/index.js

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./input-otp/index.js`),t=require(`./components.js`);var n=e=>(Object.keys(t.components_exports).forEach(n=>{let r=t.components_exports[n];r.install&&e.use(r)}),e),r={install:n};exports.InputOtp=e.default,exports.default=r,exports.install=n;

package/dist/lib/input-otp/index.js

@@ -0,0 +1 @@
+const e=require(`./input-otp.js`);e.default.install=t=>(e.default.name&&t.component(e.default.name,e.default),t);var t=e.default;exports.default=t;

package/dist/lib/input-otp/input-otp.js

@@ -0,0 +1 @@
+const e=require(`./input-otp.vue_vue_type_script_setup_true_lang.js`);;/* empty css                                                           */var t=require(`../_virtual/_plugin-vue_export-helper.js`).default(e.default,[[`__scopeId`,`data-v-9ff7490d`]]);exports.default=t;

package/dist/lib/input-otp/input-otp.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+let e=require(`vue`);var t=[`maxlength`],n=(0,e.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`}},emits:[`update:modelValue`,`complete`],setup(n,{emit:r}){let i=n,a=r,o=(0,e.ref)(null),s=(0,e.ref)(i.modelValue);(0,e.watch)(()=>i.modelValue,e=>{e!==s.value&&(s.value=e)});function c(e){let t=e.target.value;t=t.replace(/\D/g,``),t=t.slice(0,i.length),s.value=t,a(`update:modelValue`,t),t.length===i.length&&a(`complete`,t)}function l(){o.value?.focus()}function u(e){return e===s.value.length}function d(e){return e<s.value.length}return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:l},[(0,e.withDirectives)((0,e.createElementVNode)(`input`,{inputmode:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:o,"onUpdate:modelValue":a[0]||=e=>s.value=e,maxlength:n.length,onInput:c,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`}},null,40,t),[[e.vModelText,s.value]]),(0,e.createElementVNode)(`div`,{class:`otp-box`,style:(0,e.normalizeStyle)({gap:i.gap})},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(n.length,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:(0,e.normalizeClass)([`otp-item`,[{[i.activeItemClass]:u(n)},{[i.hasFilledItemClass]:d(n)},i.itemClass]])},(0,e.toDisplayString)(s.value[n]||``),3))),128))],4)]))}});exports.default=n;

package/dist/lib/input-otp/style.css

@@ -0,0 +1 @@
+.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}

package/dist/resolver/index.cjs.js

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){return e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase()}function t(t={}){let{cjs:n=!1,importStyle:r=!0}=t,i=n?`lib`:`es`;return{type:`component`,resolve:t=>{let n=e(t);return{name:`default`,from:`@a-drowned-fish/rox-v/dist/${i}/${n}/index`,sideEffects:r?`@a-drowned-fish/rox-v/dist/${i}/${n}/style.css`:void 0}}}}exports.RoxVResolver=t,exports.default=t;

package/dist/resolver/index.js

@@ -0,0 +1,20 @@
+//#region components/resolver.ts
+function e(e) {
+	return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function t(t = {}) {
+	let { cjs: n = !1, importStyle: r = !0 } = t, i = n ? "lib" : "es";
+	return {
+		type: "component",
+		resolve: (t) => {
+			let n = e(t);
+			return {
+				name: "default",
+				from: `@a-drowned-fish/rox-v/dist/${i}/${n}/index`,
+				sideEffects: r ? `@a-drowned-fish/rox-v/dist/${i}/${n}/style.css` : void 0
+			};
+		}
+	};
+}
+//#endregion
+export { t as RoxVResolver, t as default };

package/{resolver → dist/resolver}/resolver.d.ts

@@ -5,9 +5,11 @@ export interface RoxVResolverOptions {
      * @default false
      */
     cjs?: boolean;
+    /**
+     * Automatically import component styles
+     * @default true
+     */
+    importStyle?: boolean;
 }
-/**
- * Create a resolver for rox-v components
- */
 export declare function RoxVResolver(options?: RoxVResolverOptions): ComponentResolver;
 export default RoxVResolver;

package/dist/style.css

@@ -1 +1,2 @@
-.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}
+.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}
+/*$vite$:1*/

package/dist/types/components/components.d.ts

@@ -0,0 +1,2 @@
+export { default as InputOtp } from './input-otp';
+export type { RoxInputOtpProps } from './input-otp';

package/dist/types/components/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+export * from './components';
+export declare const install: (app: App) => App<any>;
+declare const _default: {
+    install: (app: App) => App<any>;
+};
+export default _default;

package/dist/types/components/input-otp/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as InputOtp } from './input-otp.vue';
+export * from './types';
+declare const _default: typeof InputOtp & Plugin;
+export default _default;

package/{es → dist/types/components}/input-otp/input-otp.vue.d.ts

@@ -1,22 +1,17 @@
-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, {} & {
+import { RoxInputOtpProps } from './types';
+declare const _default: import('vue').DefineComponent<RoxInputOtpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
     complete: (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<RoxInputOtpProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;
 }>, {
-    modelValue: string;
     length: number;
+    modelValue: string;
     itemClass: string;
     activeItemClass: string;
     gap: string;
+    hasFilledItemClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;

package/dist/types/components/input-otp/types.d.ts

@@ -0,0 +1,8 @@
+export interface RoxInputOtpProps {
+    modelValue?: string;
+    length?: number;
+    itemClass?: string;
+    activeItemClass?: string;
+    gap?: string;
+    hasFilledItemClass?: string;
+}

package/package.json

@@ -1,77 +1,73 @@
 {
   "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",
+  "version": "1.0.1",
+  "description": "vue ui library",
+  "main": "dist/lib/index.js",
+  "module": "dist/es/index.js",
+  "types": "dist/types/components/index.d.ts",
   "files": [
-    "dist",
-    "es",
-    "lib",
-    "resolver"
+    "dist"
   ],
   "exports": {
     ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "types": "./es/index.d.ts"
+      "import": "./dist/es/index.js",
+      "require": "./dist/lib/index.js",
+      "types": "./dist/types/components/index.d.ts"
     },
-    "./components": {
-      "import": "./es/components.js",
-      "require": "./lib/components.js",
-      "types": "./es/components.d.ts"
+    "./es": {
+      "import": "./dist/es/index.js",
+      "types": "./dist/types/components/index.d.ts"
+    },
+    "./lib": {
+      "require": "./dist/lib/index.js",
+      "types": "./dist/types/components/index.d.ts"
     },
     "./resolver": {
-      "import": "./resolver/resolver.js",
-      "require": "./resolver/resolver.cjs",
-      "types": "./resolver/resolver.d.ts"
+      "import": "./dist/resolver/index.js",
+      "require": "./dist/resolver/index.cjs.js",
+      "types": "./dist/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"
+    "./es/*": {
+      "import": "./dist/es/*.js",
+      "types": [
+        "./dist/types/*.d.ts",
+        "./dist/types/components/index.d.ts"
+      ]
+    },
+    "./lib/*": {
+      "require": "./dist/lib/*.js",
+      "types": "./dist/types/components/index.d.ts"
+    },
+    "./lib/*.js": {
+      "require": "./dist/lib/*.js",
+      "types": "./dist/types/components/index.d.ts"
+    },
+    "./*": "./*"
   },
   "keywords": [
-    "vue",
-    "ui",
-    "component-library",
-    "auto-import",
-    "unplugin-vue-components"
+    "vue-ui",
+    "otp"
   ],
-  "author": "",
+  "author": "yangsuzhou",
   "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
   "peerDependenciesMeta": {
     "unplugin-vue-components": {
       "optional": true
     }
   },
-  "dependencies": {
-    "vue": "^3.0.0"
+  "peerDependencies": {
+    "vue": "^3.5.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"
+  "sideEffects": [
+    "dist/*",
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:es": "vite build --config vite.build.config.ts",
+    "build:lib": "vite build --config vite.umd.config.ts",
+    "build:resolver": "vite build --config vite.resolver.config.ts"
   }
-}
+}

package/dist/index.iife.js

@@ -1 +0,0 @@
-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.umd.cjs

@@ -1 +0,0 @@
-(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/es/components.d.ts

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

package/es/components.js

@@ -1,69 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,28 +0,0 @@
-
-.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

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

package/es/input-otp/index.js

@@ -1,89 +0,0 @@
-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/lib/components.d.ts

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

package/lib/components.js

@@ -1 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-
-.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

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

package/lib/input-otp/index.js

@@ -1,89 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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/resolver/resolver.cjs

@@ -1,25 +0,0 @@
-"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.js

@@ -1,25 +0,0 @@
-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
-};