nuxt-hero 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present weskhaled
+
+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,212 @@
+# nuxt-hero
+
+A full-featured hero slider Nuxt module with parallax, video backgrounds, overlay patterns, and customizable animations.
+
+## Features
+
+- Swiper-based slider with autoplay progress tracking
+- GSAP-powered parallax (background + content)
+- Video backgrounds (MP4, WebM, HLS via hls.js)
+- Overlay patterns (lines, dots, gradient, custom)
+- Dark mode support via `@nuxtjs/color-mode`
+- Built-in + animate.css animations
+- Thumbnail navigation previews
+- Vertical and horizontal layouts
+- `@nuxt/icon` for all icons (Lucide set)
+- Tailwind CSS v4 + DaisyUI v5
+
+## Installation
+
+```bash
+pnpm add nuxt-hero
+```
+
+Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-hero'],
+})
+```
+
+### Peer dependencies
+
+Required:
+
+```bash
+pnpm add tailwindcss @tailwindcss/vite swiper @vueuse/nuxt
+```
+
+Optional:
+
+```bash
+pnpm add @nuxt/image daisyui hls.js animate.css
+```
+
+## Usage
+
+```vue
+<script setup>
+const slides = [
+  {
+    bgSrc: 'https://example.com/photo.jpg',
+    bgDarkSrc: 'https://example.com/photo-dark.jpg',
+    thumbSrc: 'https://example.com/thumb.jpg',
+    title: 'First Slide',
+    animation: {
+      enter: 'hero-animated hero-slideInUp',
+      leave: 'hero-animated hero-slideOutDown',
+    },
+  },
+  {
+    bgSrc: 'https://example.com/video.mp4',
+    title: 'Video Slide',
+  },
+]
+</script>
+
+<template>
+  <HeroSlider
+    :slides="slides"
+    :swiper-options="{ autoplay: { delay: 5000 }, speed: 600 }"
+    :parallax="{ bg: true, content: true, speed: 0.5 }"
+    :overlay-patterns="[{ type: 'lines', opacity: 0.1 }]"
+    class="h-screen"
+  >
+    <template #slide="{ slide, isActive }">
+      <div class="flex size-full items-center justify-center">
+        <h1 class="text-5xl font-bold text-white">{{ slide.title }}</h1>
+      </div>
+    </template>
+  </HeroSlider>
+</template>
+```
+
+## Props
+
+### `HeroSlider`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `slides` | `HeroSlide[]` | required | Array of slide objects |
+| `swiperOptions` | `SwiperOptions` | `{}` | Swiper config pass-through |
+| `enterAnimation` | `string` | `''` | Default enter animation class |
+| `leaveAnimation` | `string` | `''` | Default leave animation class |
+| `overlayPatterns` | `OverlayPattern[]` | `[{ type: 'lines', opacity: 0.1 }]` | Stacked overlay patterns |
+| `parallax` | `boolean \| ParallaxConfig` | `true` | Parallax configuration |
+| `imagePreset` | `string` | `''` | `@nuxt/image` preset name |
+| `as` | `string` | `'div'` | Wrapper element tag |
+
+### `HeroSlide` object
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `bgSrc` | `string` | yes | Background image or video URL |
+| `bgDarkSrc` | `string` | no | Dark mode background URL |
+| `thumbSrc` | `string` | no | Thumbnail for navigation preview |
+| `title` | `string` | no | Slide title |
+| `poster` | `string` | no | Poster frame for video backgrounds |
+| `animation` | `{ enter?, leave? }` | no | Per-slide animation override |
+
+### `ParallaxConfig`
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `bg` | `boolean` | `true` | Enable background parallax |
+| `content` | `boolean` | `true` | Enable content parallax |
+| `speed` | `number` | `0.125` | Parallax speed multiplier |
+| `minOpacity` | `number` | `0.7` | Minimum content opacity on scroll |
+
+### `OverlayPattern`
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `type` | `'lines' \| 'dots' \| 'gradient' \| 'custom'` | required | Pattern type |
+| `opacity` | `number` | `0.15` | Pattern opacity |
+| `color` | `string` | `'black'` | Pattern color |
+| `css` | `string` | — | Custom CSS `background-image` (for `type: 'custom'`) |
+
+## Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `slide` | `{ slide, index, isActive, animationClass }` | Slide content |
+| `pagination` | `{ activeIndex, total, progress, slideTo, vertical }` | Custom pagination |
+| `navigation` | `{ prev, next, activeIndex, slides, vertical }` | Custom navigation |
+| `video-controls` | `{ playing, currentTime, duration, volume, muted, waiting, hls }` | Custom video controls |
+
+## Built-in Animations
+
+Use with the `hero-animated` base class:
+
+- `hero-fadeIn` / `hero-fadeOut`
+- `hero-slideInUp` / `hero-slideOutDown`
+- `hero-slideInRight` / `hero-slideInLeft`
+- `hero-zoomIn` / `hero-zoomOut`
+
+Or use [animate.css](https://animate.style/) classes (install `animate.css` peer dependency).
+
+## Module Options
+
+```ts
+export default defineNuxtConfig({
+  hero: {
+    prefix: 'Hero',      // Component name prefix
+    colorMode: true,      // Enable @nuxtjs/color-mode
+    icon: true,           // Enable @nuxt/icon
+    defaultVolume: 0,     // Default volume for video backgrounds (0-1)
+  },
+})
+```
+
+## Project Structure
+
+The module's runtime components are organized by feature domain:
+
+```
+src/runtime/
+  components/
+    slider/          # Core slider
+      index.vue      # HeroSlider — main component
+      HeroSlide.vue  # Individual slide with bg image/video
+    video/           # Video playback controls
+      HeroVideoControls.vue
+      HeroVideoScrubber.vue
+    navigation/      # Slide navigation UI
+      HeroNavigation.vue
+      HeroPagination.vue
+  composables/
+    useHeroSlider.ts # Core slider state, autoplay, video registration
+    useGSAP.ts       # Scoped GSAP animations with cleanup
+    useHls.ts        # HLS video playback
+  utils.ts           # Shared utilities (video detection, patterns, formatting)
+  types.ts           # TypeScript interfaces
+```
+
+## Composables
+
+### `useHeroSlider(containerRef, slides, options?)`
+
+Core slider composable — manages Swiper, autoplay progress, hover-pause, and animations.
+
+### `useGSAP(callback?, options?)`
+
+Vue composable wrapping `gsap.context()` for safe, scoped GSAP animations with automatic cleanup.
+
+### `useHls(videoEl, src, options?)`
+
+HLS video playback composable — dynamically loads hls.js, with Safari native fallback.
+
+## Development
+
+```bash
+pnpm install
+pnpm dev        # Start playground
+pnpm test       # Run tests
+pnpm build      # Build module
+pnpm lint       # Lint with oxlint
+```
+
+## License
+
+MIT

package/dist/module.d.mts

@@ -0,0 +1,19 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { HeroFeatures } from '../dist/runtime/types.js';
+
+interface HeroModuleOptions {
+    /** Component name prefix. Default: 'Hero' */
+    prefix?: string;
+    /** Enable @nuxtjs/color-mode. Default: true */
+    colorMode?: boolean;
+    /** Enable @nuxt/icon. Default: true */
+    icon?: boolean;
+    /** Default volume for video backgrounds (0-1). Default: 0 */
+    defaultVolume?: number;
+    /** Opt-in feature flags. Default: {} (nothing enabled) */
+    features?: HeroFeatures;
+}
+declare const _default: _nuxt_schema.NuxtModule<HeroModuleOptions, HeroModuleOptions, false>;
+
+export { _default as default };
+export type { HeroModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-hero",
+  "configKey": "hero",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,322 @@
+import { existsSync } from 'node:fs';
+import { defineNuxtModule, createResolver, hasNuxtModule, addComponent, addImports, addTemplate } from '@nuxt/kit';
+
+const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+function normalizeWindowsPath(input = "") {
+  if (!input) {
+    return input;
+  }
+  return input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
+}
+
+const _UNC_REGEX = /^[/\\]{2}/;
+const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+const _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+const normalize = function(path) {
+  if (path.length === 0) {
+    return ".";
+  }
+  path = normalizeWindowsPath(path);
+  const isUNCPath = path.match(_UNC_REGEX);
+  const isPathAbsolute = isAbsolute(path);
+  const trailingSeparator = path[path.length - 1] === "/";
+  path = normalizeString(path, !isPathAbsolute);
+  if (path.length === 0) {
+    if (isPathAbsolute) {
+      return "/";
+    }
+    return trailingSeparator ? "./" : ".";
+  }
+  if (trailingSeparator) {
+    path += "/";
+  }
+  if (_DRIVE_LETTER_RE.test(path)) {
+    path += "/";
+  }
+  if (isUNCPath) {
+    if (!isPathAbsolute) {
+      return `//./${path}`;
+    }
+    return `//${path}`;
+  }
+  return isPathAbsolute && !isAbsolute(path) ? `/${path}` : path;
+};
+const join = function(...segments) {
+  let path = "";
+  for (const seg of segments) {
+    if (!seg) {
+      continue;
+    }
+    if (path.length > 0) {
+      const pathTrailing = path[path.length - 1] === "/";
+      const segLeading = seg[0] === "/";
+      const both = pathTrailing && segLeading;
+      if (both) {
+        path += seg.slice(1);
+      } else {
+        path += pathTrailing || segLeading ? seg : `/${seg}`;
+      }
+    } else {
+      path += seg;
+    }
+  }
+  return normalize(path);
+};
+function normalizeString(path, allowAboveRoot) {
+  let res = "";
+  let lastSegmentLength = 0;
+  let lastSlash = -1;
+  let dots = 0;
+  let char = null;
+  for (let index = 0; index <= path.length; ++index) {
+    if (index < path.length) {
+      char = path[index];
+    } else if (char === "/") {
+      break;
+    } else {
+      char = "/";
+    }
+    if (char === "/") {
+      if (lastSlash === index - 1 || dots === 1) ; else if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            const lastSlashIndex = res.lastIndexOf("/");
+            if (lastSlashIndex === -1) {
+              res = "";
+              lastSegmentLength = 0;
+            } else {
+              res = res.slice(0, lastSlashIndex);
+              lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+            }
+            lastSlash = index;
+            dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "";
+            lastSegmentLength = 0;
+            lastSlash = index;
+            dots = 0;
+            continue;
+          }
+        }
+        if (allowAboveRoot) {
+          res += res.length > 0 ? "/.." : "..";
+          lastSegmentLength = 2;
+        }
+      } else {
+        if (res.length > 0) {
+          res += `/${path.slice(lastSlash + 1, index)}`;
+        } else {
+          res = path.slice(lastSlash + 1, index);
+        }
+        lastSegmentLength = index - lastSlash - 1;
+      }
+      lastSlash = index;
+      dots = 0;
+    } else if (char === "." && dots !== -1) {
+      ++dots;
+    } else {
+      dots = -1;
+    }
+  }
+  return res;
+}
+const isAbsolute = function(p) {
+  return _IS_ABSOLUTE_RE.test(p);
+};
+
+const SWIPER_MODULE_MAP = {
+  navigation: { module: "Navigation", css: "swiper/css/navigation" },
+  pagination: { module: "Pagination", css: "swiper/css/pagination" },
+  mousewheel: { module: "Mousewheel" },
+  keyboard: { module: "Keyboard" },
+  a11y: { module: "A11y" },
+  freeMode: { module: "FreeMode", css: "swiper/css/free-mode" },
+  thumbs: { module: "Thumbs", css: "swiper/css/thumbs" },
+  grid: { module: "Grid", css: "swiper/css/grid" },
+  zoom: { module: "Zoom", css: "swiper/css/zoom" },
+  scrollbar: { module: "Scrollbar", css: "swiper/css/scrollbar" },
+  controller: { module: "Controller" },
+  virtual: { module: "Virtual", css: "swiper/css/virtual" },
+  hashNavigation: { module: "HashNavigation" },
+  history: { module: "History" },
+  swiperParallax: { module: "Parallax" }
+};
+const EFFECT_MAP = {
+  fade: { module: "EffectFade", css: "swiper/css/effect-fade" },
+  cube: { module: "EffectCube", css: "swiper/css/effect-cube" },
+  coverflow: { module: "EffectCoverflow", css: "swiper/css/effect-coverflow" },
+  creative: { module: "EffectCreative", css: "swiper/css/effect-creative" },
+  cards: { module: "EffectCards", css: "swiper/css/effect-cards" },
+  flip: { module: "EffectFlip", css: "swiper/css/effect-flip" }
+};
+const VALID_EFFECTS = ["fade", "cube", "coverflow", "creative", "cards", "flip"];
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-hero",
+    configKey: "hero",
+    compatibility: { nuxt: ">=3.0.0" }
+  },
+  defaults: {
+    prefix: "Hero",
+    colorMode: true,
+    icon: true,
+    defaultVolume: 0,
+    features: {}
+  },
+  moduleDependencies: (_nuxt) => ({
+    "@nuxtjs/color-mode": {
+      defaults: {
+        classSuffix: "",
+        dataValue: "theme"
+      }
+    },
+    "@nuxt/icon": {
+      defaults: {
+        cssLayer: "base"
+      }
+    }
+  }),
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    const prefix = options.prefix ?? "Hero";
+    const features = { ...options.features };
+    if (features.hls && !features.video) {
+      console.warn("[nuxt-hero] `hls: true` requires `video: true` \u2014 auto-enabling video.");
+      features.video = true;
+    }
+    if (features.effects) {
+      features.effects = features.effects.filter((e) => {
+        if (!VALID_EFFECTS.includes(e)) {
+          console.warn(`[nuxt-hero] Unknown effect "${e}" \u2014 ignoring. Valid: ${VALID_EFFECTS.join(", ")}`);
+          return false;
+        }
+        return true;
+      });
+    }
+    setupTailwind(nuxt, runtimeDir);
+    nuxt.options.css.push("swiper/css");
+    nuxt.options.css.push(resolve("./runtime/assets/hero.css"));
+    for (const [key, mapping] of Object.entries(SWIPER_MODULE_MAP)) {
+      if (features[key] && mapping.css) {
+        nuxt.options.css.push(mapping.css);
+      }
+    }
+    if (features.effects) {
+      for (const effect of features.effects) {
+        nuxt.options.css.push(EFFECT_MAP[effect].css);
+      }
+    }
+    nuxt.options.runtimeConfig.public.hero = {
+      hasNuxtImage: hasNuxtModule("@nuxt/image"),
+      defaultVolume: options.defaultVolume ?? 0,
+      features
+    };
+    addComponent({ name: `${prefix}Slider`, filePath: resolve("./runtime/components/slider/index.vue") });
+    addComponent({ name: `${prefix}Slide`, filePath: resolve("./runtime/components/slider/HeroSlide.vue") });
+    if (features.pagination) {
+      addComponent({ name: `${prefix}Pagination`, filePath: resolve("./runtime/components/navigation/HeroPagination.vue") });
+    }
+    if (features.navigation) {
+      addComponent({ name: `${prefix}Navigation`, filePath: resolve("./runtime/components/navigation/HeroNavigation.vue") });
+    }
+    if (features.video) {
+      addComponent({ name: `${prefix}VideoControls`, filePath: resolve("./runtime/components/video/HeroVideoControls.vue") });
+      addComponent({ name: `${prefix}VideoScrubber`, filePath: resolve("./runtime/components/video/HeroVideoScrubber.vue") });
+      addComponent({ name: `${prefix}SlideVideo`, filePath: resolve("./runtime/components/video/HeroSlideVideo.vue") });
+    }
+    addImports({ name: "useHeroSlider", from: resolve("./runtime/composables/useHeroSlider") });
+    nuxt.options.alias["#hero"] = runtimeDir;
+    setupVirtualSwiperModules(nuxt, features);
+    setupVite(nuxt, runtimeDir, features);
+  }
+});
+function setupTailwind(nuxt, runtimeDir) {
+  const hostHasTailwind = hasNuxtModule("@nuxt/ui", nuxt);
+  if (!hostHasTailwind) {
+    const lines = [
+      `@import 'tailwindcss';`,
+      ``,
+      `@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`,
+      ``,
+      `@source "${runtimeDir}/components";`,
+      `@source "${runtimeDir}/assets";`
+    ];
+    const { dst } = addTemplate({
+      filename: "nuxt-hero/tailwind.css",
+      write: true,
+      getContents: () => lines.join("\n")
+    });
+    nuxt.options.css.unshift(dst);
+    nuxt.hook("vite:extend", async ({ config }) => {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      config.plugins ||= [];
+      config.plugins.push(plugin());
+    });
+    if (nuxt.options.builder !== "@nuxt/vite-builder") {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+  } else {
+    const { dst } = addTemplate({
+      filename: "nuxt-hero/tailwind.css",
+      write: true,
+      getContents: () => [
+        `@source "${runtimeDir}/components";`,
+        `@source "${runtimeDir}/assets";`
+      ].join("\n")
+    });
+    nuxt.options.css.push(dst);
+  }
+}
+function setupVirtualSwiperModules(nuxt, features) {
+  const modules = [];
+  for (const [key, mapping] of Object.entries(SWIPER_MODULE_MAP)) {
+    if (features[key]) {
+      modules.push(mapping.module);
+    }
+  }
+  if (features.effects) {
+    for (const effect of features.effects) {
+      modules.push(EFFECT_MAP[effect].module);
+    }
+  }
+  const imports = modules.length > 0 ? `import { ${modules.join(", ")} } from 'swiper/modules'` : "";
+  const exported = modules.length > 0 ? `export const swiperModules = [${modules.join(", ")}]` : "export const swiperModules = []";
+  addTemplate({
+    filename: "nuxt-hero/swiper-modules.mjs",
+    write: true,
+    getContents: () => [imports, exported, ""].join("\n")
+  });
+  nuxt.options.alias["#hero/swiper-modules"] = nuxt.options.buildDir + "/nuxt-hero/swiper-modules.mjs";
+}
+function setupVite(nuxt, runtimeDir, features) {
+  const hostNodeModules = join(nuxt.options.rootDir, "node_modules");
+  const sharedDeps = ["@vueuse/core"];
+  if (features.parallax) sharedDeps.push("gsap");
+  for (const dep of sharedDeps) {
+    const hostPath = join(hostNodeModules, dep);
+    if (existsSync(hostPath)) {
+      nuxt.options.alias[dep] = hostPath;
+    }
+  }
+  nuxt.options.vite.server ??= {};
+  nuxt.options.vite.server.watch ??= {};
+  nuxt.options.vite.server.watch.ignored ??= [];
+  if (Array.isArray(nuxt.options.vite.server.watch.ignored)) {
+    nuxt.options.vite.server.watch.ignored.push(`!${runtimeDir}/**`);
+  }
+  nuxt.options.vite.optimizeDeps ??= {};
+  nuxt.options.vite.optimizeDeps.include ??= [];
+  nuxt.options.vite.optimizeDeps.include.push("swiper/vue", "@vueuse/core");
+  if (features.parallax) {
+    nuxt.options.vite.optimizeDeps.include.push("gsap", "gsap/ScrollTrigger");
+  }
+  const hasAnyModule = Object.keys(SWIPER_MODULE_MAP).some((k) => features[k]) || features.effects && features.effects.length > 0;
+  if (hasAnyModule) {
+    nuxt.options.vite.optimizeDeps.include.push("swiper/modules");
+  }
+  nuxt.options.build.transpile.push("swiper");
+}
+
+export { module$1 as default };

package/dist/runtime/assets/hero.css

@@ -0,0 +1 @@
+@reference "tailwindcss";:root{--hero-primary:#fff;--hero-bg:hsla(0,0%,100%,.55);--hero-border:hsla(0,0%,100%,.2);--hero-progress-bg:hsla(0,0%,100%,.65);--hero-nav-bg:rgba(0,0,0,.3);--hero-nav-text:#fff}.hero-slider .hero-nav{@apply min-h-0}.hero-slider .nav-slit-btn{@apply pointer-events-auto absolute z-10 block cursor-pointer outline-none}.hero-slider .nav-slit-btn>span{@apply relative block bg-white/40 ring ring-white backdrop-blur-sm text-black transition-transform duration-300;@apply dark:bg-black/40 dark:ring-black dark:text-white;@apply group-hover:opacity-100}.hero-slider .nav-slit-preview{@apply absolute ring ring-white transition-transform duration-300 delay-300;@apply bg-white dark:bg-black dark:ring-black}.hero-slider .nav-slit-preview h3{@apply absolute m-0 truncate px-2 py-0.5 text-sm font-light capitalize leading-5 backface-hidden transition-transform duration-300;@apply bg-white/70 ring ring-white backdrop-blur-sm text-black;@apply dark:bg-black/70 dark:ring-black dark:text-white}.hero-slider .nav-slit-prev .nav-slit-preview{@apply left-0 -translate-x-full}.hero-slider .nav-slit-prev:hover .nav-slit-preview{@apply left-0 translate-x-0}.hero-slider .nav-slit-next .nav-slit-preview{@apply right-0 translate-x-full text-right}.hero-slider .nav-slit-next:hover .nav-slit-preview{@apply right-0 translate-x-0}.hero-video-btn{@apply shadow-none border-none transition-all duration-200 relative;@apply bg-white/35 backdrop-blur-sm opacity-0 hover:scale-110;@apply dark:bg-black/35;@apply group-hover/slider:opacity-100}.media-controls{@apply pointer-events-auto absolute z-999 bottom-5 left-4 flex items-center gap-1}.swiper-pagination>button>.tooltip-content{@apply pointer-events-none absolute bottom-full mb-1 left-1/2 z-90 w-30 -ml-[60px] cursor-default opacity-0 transition-opacity duration-300 delay-300}.swiper-pagination>button>.tooltip-content:after{@apply pointer-events-none absolute -bottom-2.5 left-1/2 -ml-1.25 size-0 border-5 border-transparent border-t-inherit!;content:""}.swiper-pagination>button>.tooltip-content .tooltip-text{@apply overflow-hidden border-b-2 origin-left scale-x-0 scale-y-100 transition-transform duration-300 delay-300}.swiper-pagination>button>.tooltip-content .tooltip-text .tooltip-inner{@apply max-w-[inherit] rounded-none p-0 translate-y-full transition-transform duration-300}.swiper-pagination>button>.tooltip-content .tooltip-text .tooltip-inner img{@apply opacity-65}.swiper-pagination>button:hover>.tooltip-content{@apply z-99 opacity-100 delay-0}.swiper-pagination>button:hover>.tooltip-content .tooltip-text{@apply scale-x-100 delay-0}.swiper-pagination>button:hover>.tooltip-content .tooltip-text .tooltip-inner{@apply translate-y-0 delay-300}.swiper-pagination .progress-circle-svg{@apply -rotate-90}.swiper-pagination .progress-circle-bar{stroke:var(--hero-primary)}.swiper-pagination .progress-circle-bg{stroke:var(--hero-progress-bg)}.hero-radial-progress{--hero-progress-value:0;--hero-progress-size:1.25rem;--hero-progress-thickness:2px;background:conic-gradient(currentColor calc(var(--hero-progress-value)*1%),transparent 0);border-radius:9999px;display:inline-grid;height:var(--hero-progress-size);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--hero-progress-thickness)),#000 calc(100% - var(--hero-progress-thickness)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--hero-progress-thickness)),#000 calc(100% - var(--hero-progress-thickness)));place-content:center;width:var(--hero-progress-size)}@keyframes heroSpin{to{transform:rotate(1turn)}}.hero-spinner{animation:heroSpin .6s linear infinite;border-color:currentcolor transparent transparent currentcolor;border-radius:9999px;border-style:solid;border-width:2px;display:inline-block}.hero-spinner-sm{height:1rem;width:1rem}.hero-spinner-md{height:1.25rem;width:1.25rem}.hero-range::-webkit-slider-thumb{@apply appearance-none size-3 rounded-full bg-white cursor-pointer}.hero-range::-moz-range-thumb{@apply size-3 rounded-full bg-white cursor-pointer border-none}.hero-animated{animation-duration:.6s;animation-fill-mode:both}@keyframes heroFadeIn{0%{opacity:0}to{opacity:1}}@keyframes heroFadeOut{0%{opacity:1}to{opacity:0}}@keyframes heroSlideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes heroSlideOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px)}}@keyframes heroSlideInRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes heroSlideInLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes heroZoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes heroZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}.hero-fadeIn{animation-name:heroFadeIn}.hero-fadeOut{animation-name:heroFadeOut}.hero-slideInUp{animation-name:heroSlideInUp}.hero-slideOutDown{animation-name:heroSlideOutDown}.hero-slideInRight{animation-name:heroSlideInRight}.hero-slideInLeft{animation-name:heroSlideInLeft}.hero-zoomIn{animation-name:heroZoomIn}.hero-zoomOut{animation-name:heroZoomOut}

package/dist/runtime/components/navigation/HeroNavigation.d.vue.ts

@@ -0,0 +1,18 @@
+import type { HeroSlide } from '#hero/types';
+interface NavigationProps {
+    slides: HeroSlide[];
+    activeIndex: number;
+    /** When true, prev is on top and next is on bottom */
+    vertical?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<NavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: () => any;
+    prev: () => any;
+}, string, import("vue").PublicProps, Readonly<NavigationProps> & Readonly<{
+    onNext?: (() => any) | undefined;
+    onPrev?: (() => any) | undefined;
+}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navigation/HeroNavigation.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  slides: { type: Array, required: true },
+  activeIndex: { type: Number, required: true },
+  vertical: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["prev", "next"]);
+const prevSlide = computed(() => {
+  const idx = props.activeIndex < 1 ? props.slides.length - 1 : props.activeIndex - 1;
+  return props.slides[idx];
+});
+const nextSlide = computed(() => {
+  const idx = props.activeIndex + 1 >= props.slides.length ? 0 : props.activeIndex + 1;
+  return props.slides[idx];
+});
+const prevHoverClass = computed(
+  () => props.vertical ? "px-10 py-1 group-hover:-translate-y-full" : `py-10 px-1 ${prevSlide.value?.thumbSrc ? "group-hover:-translate-x-full" : "group-hover:-translate-x-1/10"}`
+);
+const nextHoverClass = computed(
+  () => props.vertical ? "px-10 py-1 group-hover:translate-y-full" : `py-10 px-1 ${nextSlide.value?.thumbSrc ? "group-hover:translate-x-full" : "group-hover:translate-x-1/10"}`
+);
+</script>
+
+<template>
+  <nav class="hero-nav nav-slit" :class="{ 'nav-slit--vertical': vertical }">
+    <!--
+      Horizontal: prev=left, next=right
+      Vertical:   prev=top,  next=bottom
+    -->
+
+    <!-- Prev -->
+    <button type="button" aria-label="Previous slide" class="nav-slit-btn nav-slit-prev group"
+      :class="vertical ? 'top-0 left-1/2 -translate-x-1/2' : 'left-0 top-1/2 -translate-y-1/2'" @click="emit('prev')">
+      <span :class="prevHoverClass">
+        <Icon :name="vertical ? 'lucide:chevron-up' : 'lucide:chevron-left'" class="block text-base" />
+      </span>
+      <div v-if="prevSlide?.thumbSrc" class="nav-slit-preview"
+        :class="vertical ? 'top-0 left-0 w-full h-24 -translate-y-full' : 'left-0 top-0 h-full w-36 -translate-x-full'">
+        <h3 :class="vertical ? 'bottom-0 left-0 w-full origin-bottom scale-y-0' : 'top-full w-full origin-top -rotate-x-90'">
+          {{ prevSlide?.title }}
+        </h3>
+        <img :src="prevSlide.thumbSrc" :alt="prevSlide?.title ?? 'Previous'"
+          class="absolute inset-0 size-full object-cover" loading="lazy" />
+      </div>
+    </button>
+
+    <!-- Next -->
+    <button type="button" aria-label="Next slide" class="nav-slit-btn nav-slit-next group"
+      :class="vertical ? 'bottom-0 left-1/2 -translate-x-1/2' : 'right-0 top-1/2 -translate-y-1/2 text-right'" @click="emit('next')">
+      <span :class="nextHoverClass">
+        <Icon :name="vertical ? 'lucide:chevron-down' : 'lucide:chevron-right'" class="block text-base" />
+      </span>
+      <div v-if="nextSlide?.thumbSrc" class="nav-slit-preview"
+        :class="vertical ? 'bottom-0 left-0 w-full h-24 translate-y-full' : 'right-0 top-0 h-full w-36 translate-x-full'">
+        <h3 :class="vertical ? 'top-0 left-0 w-full origin-top scale-y-0' : 'top-full text-left w-full origin-top -rotate-x-90'">
+          {{ nextSlide?.title }}
+        </h3>
+        <img :src="nextSlide.thumbSrc" :alt="nextSlide?.title ?? 'Next'" class="absolute inset-0 size-full object-cover"
+          loading="lazy" />
+      </div>
+    </button>
+  </nav>
+</template>
+
+<style scoped>
+.nav-slit-btn:hover .nav-slit-preview{transform:translate(0)}.nav-slit-btn:hover h3{transform:rotateX(0deg) scaleY(1);transition-delay:.6s}.nav-slit--vertical .nav-slit-prev:hover .hero-icon{transform:translateY(-150%);transition-delay:0s}.nav-slit--vertical .nav-slit-next:hover .hero-icon{transform:translateY(150%);transition-delay:0s}
+</style>