vue-motion-counter 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mikan Harada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# Motion Counter
+
+A Vue 3 counter component with smooth animations, inspired by motion design aesthetics.
+
+## Features
+
+- Combination lock-style digit rolling animation
+- Calculates shortest path (direct or wrap-around) for each digit
+- Smooth step-by-step transitions using GSAP
+- Configurable debounce for rapid updates
+- Customizable size, color, and animation speed
+- TypeScript support
+
+## Installation
+
+```bash
+npm install vue-motion-counter
+# or
+pnpm add vue-motion-counter
+# or
+yarn add vue-motion-counter
+```
+
+## Usage
+
+### Global Registration
+
+```ts
+import { createApp } from 'vue';
+import { MotionCounter } from 'vue-motion-counter';
+import 'motion-counter/style.css';
+
+const app = createApp(App);
+app.component('MotionCounter', MotionCounter);
+```
+
+### Local Registration
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { MotionCounter } from 'vue-motion-counter';
+import 'motion-counter/style.css';
+
+const count = ref(0);
+</script>
+
+<template>
+  <MotionCounter v-model="count" />
+</template>
+```
+
+## Props
+
+| Prop                  | Type             | Default     | Description                                           |
+| --------------------- | ---------------- | ----------- | ----------------------------------------------------- |
+| `modelValue`          | `number`         | Required    | The counter value to display                          |
+| `debounce`            | `number`         | `300`       | Debounce time in milliseconds for value updates       |
+| `size`                | `number`         | `48`        | Font size in pixels                                   |
+| `color`               | `string`         | `'inherit'` | Text color                                            |
+| `stepDuration`        | `number`         | `80`        | Duration of each digit step animation in milliseconds |
+| `increasingDirection` | `'up' \| 'down'` | `'up'`      | Scroll direction when digit increases                 |
+
+## Animation Behavior
+
+The component simulates a combination lock (rotary dial) effect:
+
+- **Shortest Path Calculation**: For each digit, calculates whether to go directly or wrap around through 0
+  - Example: 2 → 8 goes down (2→1→0→9→8, 4 steps) instead of up (6 steps)
+  - Example: 8 → 2 goes up (8→9→0→1→2, 4 steps) instead of down (6 steps)
+- **Step-by-Step Rolling**: Each digit animates through intermediate values
+- **Blur Effect**: Smooth blur transition for a polished look
+- **Configurable Direction**:
+  - `increasingDirection="up"` (default): digits scroll up when increasing
+  - `increasingDirection="down"`: digits scroll down when increasing
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Run tests
+pnpm test
+
+# Run tests once
+pnpm test:run
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Lint code
+pnpm lint
+
+# Format code
+pnpm format
+```
+
+## License
+
+MIT

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/MotionCounter.vue.d.ts

@@ -0,0 +1,60 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    stepDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    increasingDirection: {
+        type: () => "up" | "down";
+        default: string;
+        validator: (v: string) => boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    stepDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    increasingDirection: {
+        type: () => "up" | "down";
+        default: string;
+        validator: (v: string) => boolean;
+    };
+}>> & Readonly<{}>, {
+    debounce: number;
+    size: number;
+    color: string;
+    stepDuration: number;
+    increasingDirection: "up" | "down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import MotionCounter from './MotionCounter.vue';
+export { MotionCounter };

package/dist/main.d.ts

@@ -0,0 +1 @@
+import './style.css';