@lenne.tech/nuxt-extensions 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 lenne.Tech GmbH
+
+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,339 @@
+# @lenne.tech/nuxt-extensions
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Reusable Nuxt 4 composables, components, and Better-Auth integration for lenne.tech projects.
+
+## Quick Start
+
+> **Want to start a new fullstack project?**
+>
+> Use the [nuxt-base-starter](https://github.com/lenneTech/nuxt-base-starter) (Frontend)
+> together with the [nest-server-starter](https://github.com/lenneTech/nest-server-starter) (Backend)
+> to initialize a complete fullstack project with this package pre-configured.
+>
+> Both starters are designed to work seamlessly together and serve as
+> **reference implementations** showing how to use all features in a real application.
+>
+> **Quick initialization:**
+> ```bash
+> npx @lenne.tech/cli fullstack init my-project
+> ```
+
+## Installation
+
+```bash
+npm install @lenne.tech/nuxt-extensions better-auth
+# Optional: For passkey support
+npm install @better-auth/passkey
+# Optional: For TUS file uploads
+npm install tus-js-client
+```
+
+## Features
+
+- **Better-Auth Integration** - Login, 2FA, Passkey/WebAuthn support
+- **Cookie/JWT Dual-Mode** - Automatic fallback from cookies to JWT
+- **TUS File Upload** - Resumable uploads with pause/resume
+- **Transition Components** - Ready-to-use Vue transition wrappers
+- **i18n Support** - English and German translations (works without i18n too)
+- **Auto-imports** - All composables and components are auto-imported
+
+## Configuration
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@lenne.tech/nuxt-extensions'],
+
+  ltExtensions: {
+    // Auth configuration
+    auth: {
+      enabled: true,                // Enable auth features
+      baseURL: '',                  // API base URL (empty = use Nuxt proxy)
+      basePath: '/iam',             // Better-Auth endpoint prefix
+      loginPath: '/auth/login',     // Login redirect path
+      twoFactorRedirectPath: '/auth/2fa',  // 2FA redirect path
+
+      // Plugin options
+      enableAdmin: true,            // Admin plugin
+      enableTwoFactor: true,        // 2FA plugin
+      enablePasskey: true,          // Passkey/WebAuthn plugin
+
+      // Interceptor options
+      interceptor: {
+        enabled: true,              // 401 auto-handler
+        publicPaths: ['/auth/login', '/auth/register'],
+      },
+    },
+
+    // TUS upload configuration
+    tus: {
+      defaultEndpoint: '/files/upload',
+      defaultChunkSize: 5 * 1024 * 1024,  // 5MB
+    },
+
+    // i18n configuration (optional)
+    i18n: {
+      autoMerge: true,              // Auto-merge locales with @nuxtjs/i18n
+    },
+  },
+});
+```
+
+## Usage
+
+### Authentication
+
+```vue
+<script setup>
+// Auth composable (auto-imported)
+const {
+  user,
+  isAuthenticated,
+  isLoading,
+  signIn,
+  signOut,
+  authenticateWithPasskey,
+  registerPasskey,
+  twoFactor,
+} = useLtAuth();
+
+// Login with email/password
+async function handleLogin(email: string, password: string) {
+  const result = await signIn.email({ email, password });
+  if (result.requiresTwoFactor) {
+    navigateTo('/auth/2fa');
+  }
+}
+
+// Passkey login
+async function handlePasskeyLogin() {
+  const result = await authenticateWithPasskey();
+  if (result.success) {
+    navigateTo('/dashboard');
+  }
+}
+</script>
+
+<template>
+  <div v-if="isAuthenticated">
+    Welcome, {{ user?.name }}!
+    <button @click="signOut()">Logout</button>
+  </div>
+</template>
+```
+
+### TUS File Upload
+
+```vue
+<script setup>
+const {
+  addFiles,
+  uploads,
+  totalProgress,
+  isUploading,
+  pauseUpload,
+  resumeUpload,
+  cancelUpload,
+} = useLtTusUpload({
+  endpoint: '/api/files/upload',
+  onSuccess: (item) => console.log('Uploaded:', item.url),
+  onError: (item, error) => console.error('Failed:', error),
+});
+
+const { formatFileSize } = useLtFile();
+
+function handleFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (input.files) {
+    addFiles(Array.from(input.files));
+  }
+}
+</script>
+
+<template>
+  <div>
+    <input type="file" multiple @change="handleFileSelect" />
+
+    <div v-for="upload in uploads" :key="upload.id">
+      <span>{{ upload.file.name }}</span>
+      <span>{{ formatFileSize(upload.progress.bytesUploaded) }} / {{ formatFileSize(upload.progress.bytesTotal) }}</span>
+      <span>{{ upload.progress.percentage }}%</span>
+
+      <button v-if="upload.status === 'uploading'" @click="pauseUpload(upload.id)">
+        Pause
+      </button>
+      <button v-if="upload.status === 'paused'" @click="resumeUpload(upload.id)">
+        Resume
+      </button>
+    </div>
+
+    <div v-if="isUploading">
+      Total Progress: {{ totalProgress.percentage }}%
+    </div>
+  </div>
+</template>
+```
+
+### Transition Components
+
+```vue
+<template>
+  <!-- Fade transition -->
+  <LtTransitionFade>
+    <div v-if="show">Content with fade</div>
+  </LtTransitionFade>
+
+  <!-- Fade with scale -->
+  <LtTransitionFadeScale :start-duration="200" :leave-duration="150">
+    <div v-if="show">Content with fade and scale</div>
+  </LtTransitionFadeScale>
+
+  <!-- Slide from right -->
+  <LtTransitionSlide>
+    <div v-if="show">Content slides from right</div>
+  </LtTransitionSlide>
+
+  <!-- Slide from bottom -->
+  <LtTransitionSlideBottom>
+    <div v-if="show">Content slides from bottom</div>
+  </LtTransitionSlideBottom>
+
+  <!-- Slide from left -->
+  <LtTransitionSlideRevert>
+    <div v-if="show">Content slides from left</div>
+  </LtTransitionSlideRevert>
+</template>
+```
+
+### Web Share API
+
+```vue
+<script setup>
+const { share } = useLtShare();
+
+async function handleShare() {
+  await share('Check this out!', 'Amazing content');
+  // Uses native share on mobile, clipboard fallback on desktop
+}
+</script>
+```
+
+### Utilities
+
+```typescript
+// Tailwind TypeScript helper
+const buttonClasses = tw`bg-blue-500 hover:bg-blue-700 text-white`;
+
+// Crypto utilities (for WebAuthn)
+const hash = await ltSha256('password');
+const base64 = ltArrayBufferToBase64Url(buffer);
+const uint8 = ltBase64UrlToUint8Array(base64String);
+```
+
+## i18n Support
+
+The package works **with or without** `@nuxtjs/i18n`:
+
+| Setup | Language | Text Source |
+|-------|----------|-------------|
+| **Without i18n** | German | Hardcoded fallback texts |
+| With i18n, Locale: `de` | German | From `de.json` |
+| With i18n, Locale: `en` | English | From `en.json` |
+| With i18n, other Locale | English | Fallback to `en.json` |
+
+## API Reference
+
+### Composables
+
+| Composable | Description |
+|------------|-------------|
+| `useLtAuth()` | Better-Auth integration with session, passkey, 2FA |
+| `useLtTusUpload()` | TUS protocol file uploads with pause/resume |
+| `useLtFile()` | File utilities (size formatting, URLs) |
+| `useLtShare()` | Web Share API with clipboard fallback |
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `<LtTransitionFade>` | Opacity fade transition |
+| `<LtTransitionFadeScale>` | Fade with scale transition |
+| `<LtTransitionSlide>` | Slide from right transition |
+| `<LtTransitionSlideBottom>` | Slide from bottom transition |
+| `<LtTransitionSlideRevert>` | Slide from left transition |
+
+### Utilities
+
+| Utility | Description |
+|---------|-------------|
+| `tw` | Tailwind TypeScript helper |
+| `ltSha256()` | SHA256 hash function |
+| `ltArrayBufferToBase64Url()` | ArrayBuffer to base64url conversion |
+| `ltBase64UrlToUint8Array()` | Base64url to Uint8Array conversion |
+| `createLtAuthClient()` | Auth client factory for custom configuration |
+
+## Related Projects
+
+| Project | Description |
+|---------|-------------|
+| [nuxt-base-starter](https://github.com/lenneTech/nuxt-base-starter) | Frontend starter template (uses this package) |
+| [nest-server-starter](https://github.com/lenneTech/nest-server-starter) | Backend starter template (Better-Auth backend) |
+| [@lenne.tech/nest-server](https://github.com/lenneTech/nest-server) | Backend framework with Better-Auth support |
+| [@lenne.tech/cli](https://github.com/lenneTech/cli) | CLI tool for fullstack project initialization |
+
+## Fullstack Architecture
+
+```
++-------------------------------------------------------------+
+|                     Your Fullstack App                       |
++-----------------------------+-------------------------------+
+|         Frontend            |           Backend              |
+|    (nuxt-base-starter)      |    (nest-server-starter)       |
++-----------------------------+-------------------------------+
+|  @lenne.tech/nuxt-extensions|   @lenne.tech/nest-server     |
+|  - useLtAuth()              |   - CoreBetterAuthModule      |
+|  - useLtTusUpload()         |   - CoreFileModule            |
+|  - <LtTransition*>          |   - CoreUserModule            |
++-----------------------------+-------------------------------+
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with playground
+npm run dev
+
+# Build the module
+npm run build
+
+# Run tests
+npm run test
+```
+
+## License
+
+[MIT](./LICENSE)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@lenne.tech/nuxt-extensions/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@lenne.tech/nuxt-extensions
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@lenne.tech/nuxt-extensions.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@lenne.tech/nuxt-extensions
+
+[license-src]: https://img.shields.io/npm/l/@lenne.tech/nuxt-extensions.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@lenne.tech/nuxt-extensions
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,10 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { LtExtensionsModuleOptions } from '../dist/runtime/types/index.js';
+export { LtExtensionsModuleOptions } from '../dist/runtime/types/index.js';
+
+declare const name = "@lenne.tech/nuxt-extensions";
+declare const version = "1.0.0";
+declare const configKey = "ltExtensions";
+declare const _default: _nuxt_schema.NuxtModule<LtExtensionsModuleOptions, LtExtensionsModuleOptions, false>;
+
+export { configKey, _default as default, name, version };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "configKey": "ltExtensions",
+  "name": "@lenne.tech/nuxt-extensions",
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,126 @@
+import { defineNuxtModule, createResolver, addImports, addComponent, addPlugin } from '@nuxt/kit';
+
+const name = "@lenne.tech/nuxt-extensions";
+const version = "1.0.0";
+const configKey = "ltExtensions";
+const defaultOptions = {
+  auth: {
+    basePath: "/iam",
+    baseURL: "",
+    enabled: true,
+    enableAdmin: true,
+    enablePasskey: true,
+    enableTwoFactor: true,
+    interceptor: {
+      enabled: true,
+      publicPaths: []
+    },
+    loginPath: "/auth/login",
+    twoFactorRedirectPath: "/auth/2fa"
+  },
+  i18n: {
+    autoMerge: true
+  },
+  tus: {
+    defaultChunkSize: 5 * 1024 * 1024,
+    // 5MB
+    defaultEndpoint: "/files/upload"
+  }
+};
+const module$1 = defineNuxtModule({
+  meta: {
+    configKey,
+    name,
+    version
+  },
+  defaults: defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const resolvedOptions = {
+      auth: { ...defaultOptions.auth, ...options.auth },
+      i18n: { ...defaultOptions.i18n, ...options.i18n },
+      tus: { ...defaultOptions.tus, ...options.tus }
+    };
+    nuxt.options.runtimeConfig.public.ltExtensions = {
+      auth: {
+        basePath: resolvedOptions.auth?.basePath || "/iam",
+        baseURL: resolvedOptions.auth?.baseURL || "",
+        enabled: resolvedOptions.auth?.enabled ?? true,
+        enableAdmin: resolvedOptions.auth?.enableAdmin ?? true,
+        enablePasskey: resolvedOptions.auth?.enablePasskey ?? true,
+        enableTwoFactor: resolvedOptions.auth?.enableTwoFactor ?? true,
+        interceptor: {
+          enabled: resolvedOptions.auth?.interceptor?.enabled ?? true,
+          publicPaths: resolvedOptions.auth?.interceptor?.publicPaths || []
+        },
+        loginPath: resolvedOptions.auth?.loginPath || "/auth/login",
+        twoFactorRedirectPath: resolvedOptions.auth?.twoFactorRedirectPath || "/auth/2fa"
+      },
+      tus: {
+        defaultChunkSize: resolvedOptions.tus?.defaultChunkSize || 5 * 1024 * 1024,
+        defaultEndpoint: resolvedOptions.tus?.defaultEndpoint || "/files/upload"
+      }
+    };
+    addImports([
+      // Composables
+      { name: "useLtAuth", from: resolve("./runtime/composables/auth/use-lt-auth") },
+      { name: "useLtAuthClient", from: resolve("./runtime/composables/use-lt-auth-client") },
+      { name: "ltAuthClient", from: resolve("./runtime/composables/use-lt-auth-client") },
+      { name: "useLtFile", from: resolve("./runtime/composables/use-lt-file") },
+      { name: "useLtTusUpload", from: resolve("./runtime/composables/use-lt-tus-upload") },
+      { name: "useLtShare", from: resolve("./runtime/composables/use-lt-share") },
+      // Utils
+      { name: "ltSha256", from: resolve("./runtime/utils/crypto") },
+      { name: "ltArrayBufferToBase64Url", from: resolve("./runtime/utils/crypto") },
+      { name: "ltBase64UrlToUint8Array", from: resolve("./runtime/utils/crypto") },
+      { name: "tw", from: resolve("./runtime/utils/tw") },
+      // Lib - Auth State
+      { name: "createLtAuthClient", from: resolve("./runtime/lib/auth-client") },
+      { name: "getLtAuthMode", from: resolve("./runtime/lib/auth-state") },
+      { name: "setLtAuthMode", from: resolve("./runtime/lib/auth-state") },
+      { name: "getLtJwtToken", from: resolve("./runtime/lib/auth-state") },
+      { name: "setLtJwtToken", from: resolve("./runtime/lib/auth-state") },
+      { name: "getLtApiBase", from: resolve("./runtime/lib/auth-state") },
+      { name: "attemptLtJwtSwitch", from: resolve("./runtime/lib/auth-state") },
+      { name: "isLtAuthenticated", from: resolve("./runtime/lib/auth-state") },
+      { name: "createLtAuthFetch", from: resolve("./runtime/lib/auth-state") },
+      { name: "ltAuthFetch", from: resolve("./runtime/lib/auth-state") }
+    ]);
+    const transitionComponents = [
+      "LtTransitionFade",
+      "LtTransitionSlide",
+      "LtTransitionSlideBottom",
+      "LtTransitionSlideRevert",
+      "LtTransitionFadeScale"
+    ];
+    for (const componentName of transitionComponents) {
+      addComponent({
+        name: componentName,
+        filePath: resolve(`./runtime/components/transition/${componentName}.vue`)
+      });
+    }
+    if (resolvedOptions.auth?.enabled && resolvedOptions.auth?.interceptor?.enabled) {
+      addPlugin(resolve("./runtime/plugins/auth-interceptor.client"));
+    }
+    if (resolvedOptions.i18n?.autoMerge) {
+      nuxt.hook("i18n:registerModule", (register) => {
+        register({
+          langDir: resolve("./runtime/locales"),
+          locales: [
+            { code: "en", file: "en.json" },
+            { code: "de", file: "de.json" }
+          ]
+        });
+      });
+    }
+    nuxt.options.build.transpile.push(resolve("./runtime"));
+    nuxt.options.build.transpile.push("tus-js-client");
+    console.log(`[${name}] Module loaded with config:`, {
+      auth: resolvedOptions.auth?.enabled ? "enabled" : "disabled",
+      i18nAutoMerge: resolvedOptions.i18n?.autoMerge,
+      tusEndpoint: resolvedOptions.tus?.defaultEndpoint
+    });
+  }
+});
+
+export { configKey, module$1 as default, name, version };

package/dist/runtime/components/transition/LtTransitionFade.d.vue.ts

@@ -0,0 +1,39 @@
+/**
+ * Fade transition component
+ *
+ * Provides a simple opacity fade animation for entering/leaving elements.
+ * Configurable duration for both enter and leave animations.
+ *
+ * @example
+ * ```vue
+ * <LtTransitionFade>
+ *   <div v-if="show">Content fades in/out</div>
+ * </LtTransitionFade>
+ *
+ * <LtTransitionFade :start-duration="200" :leave-duration="150">
+ *   <div v-if="show">Custom timing</div>
+ * </LtTransitionFade>
+ * ```
+ */
+type __VLS_Props = {
+    /** Duration in ms for the leave animation (default: 100) */
+    leaveDuration?: `${number}` | number;
+    /** Duration in ms for the enter animation (default: 100) */
+    startDuration?: `${number}` | number;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    leaveDuration: `${number}` | number;
+    startDuration: `${number}` | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/transition/LtTransitionFade.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  leaveDuration: { type: null, required: false, default: 100 },
+  startDuration: { type: null, required: false, default: 100 }
+});
+</script>
+
+<template>
+  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
+    <Transition
+      enter-active-class="transition ease-out duration-[--start-duration]"
+      enter-from-class="transform opacity-0"
+      enter-to-class="transform opacity-100"
+      leave-active-class="transition ease-in duration-[--leave-duration]"
+      leave-from-class="transform opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <slot></slot>
+    </Transition>
+  </div>
+</template>

package/dist/runtime/components/transition/LtTransitionFade.vue.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Fade transition component
+ *
+ * Provides a simple opacity fade animation for entering/leaving elements.
+ * Configurable duration for both enter and leave animations.
+ *
+ * @example
+ * ```vue
+ * <LtTransitionFade>
+ *   <div v-if="show">Content fades in/out</div>
+ * </LtTransitionFade>
+ *
+ * <LtTransitionFade :start-duration="200" :leave-duration="150">
+ *   <div v-if="show">Custom timing</div>
+ * </LtTransitionFade>
+ * ```
+ */
+type __VLS_Props = {
+    /** Duration in ms for the leave animation (default: 100) */
+    leaveDuration?: `${number}` | number;
+    /** Duration in ms for the enter animation (default: 100) */
+    startDuration?: `${number}` | number;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    leaveDuration: `${number}` | number;
+    startDuration: `${number}` | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/transition/LtTransitionFadeScale.d.vue.ts

@@ -0,0 +1,42 @@
+/**
+ * Fade with scale transition component
+ *
+ * Provides a combined fade and scale animation.
+ * Elements fade in while scaling up from 95% to 100%,
+ * and fade out while scaling down to 95%.
+ *
+ * Great for modal dialogs, dropdown menus, and pop-ups.
+ *
+ * @example
+ * ```vue
+ * <LtTransitionFadeScale>
+ *   <div v-if="show">Content fades and scales</div>
+ * </LtTransitionFadeScale>
+ *
+ * <LtTransitionFadeScale :start-duration="200" :leave-duration="150">
+ *   <div v-if="show">Custom timing</div>
+ * </LtTransitionFadeScale>
+ * ```
+ */
+type __VLS_Props = {
+    /** Duration in ms for the leave animation (default: 100) */
+    leaveDuration?: `${number}` | number;
+    /** Duration in ms for the enter animation (default: 100) */
+    startDuration?: `${number}` | number;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    leaveDuration: `${number}` | number;
+    startDuration: `${number}` | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/transition/LtTransitionFadeScale.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  leaveDuration: { type: null, required: false, default: 100 },
+  startDuration: { type: null, required: false, default: 100 }
+});
+</script>
+
+<template>
+  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
+    <Transition
+      enter-active-class="transition ease-out duration-[--start-duration]"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-[--leave-duration]"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <slot></slot>
+    </Transition>
+  </div>
+</template>