slider-nav-button 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+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,167 @@
+# Slider Nav Button
+
+Pill-shaped slider navigation button with divider-to-hover animation. Inspired by [adria.studio](https://www.adria.studio).
+
+When you hover over the left or right arrow, a background slides out from the central divider toward the hovered side.
+
+## Installation
+
+```bash
+npm install slider-nav-button
+```
+
+For the React version, also install the peer dependencies:
+
+```bash
+npm install framer-motion @hugeicons/react @hugeicons/core-free-icons
+```
+
+## Usage
+
+### Vanilla JS
+
+```js
+// In your HTML: <div id="slider-container"></div>
+
+import { SliderButton } from 'slider-nav-button';
+import 'slider-nav-button/styles.css';
+
+const button = new SliderButton({
+  onPrev: () => console.log('Previous'),
+  onNext: () => console.log('Next'),
+  size: 'md',  // 'sm' | 'md' | 'lg'
+});
+
+button.mount('#slider-container');
+```
+
+### React
+
+```jsx
+import { useState } from 'react';
+import { SliderButton } from 'slider-nav-button/react';
+
+function Carousel() {
+  const [index, setIndex] = useState(0);
+
+  return (
+    <SliderButton
+      onPrev={() => setIndex(prev => Math.max(0, prev - 1))}
+      onNext={() => setIndex(prev => prev + 1)}
+      size="md"
+    />
+  );
+}
+```
+
+The React version includes styles automatically.
+
+### CDN (no bundler)
+
+```html
+<div id="container"></div>
+<link rel="stylesheet" href="https://unpkg.com/slider-nav-button/dist/slider-button.css">
+<script type="module">
+  import { SliderButton } from 'https://unpkg.com/slider-nav-button/dist/index.js';
+  new SliderButton({ onPrev: () => {}, onNext: () => {} }).mount('#container');
+</script>
+```
+
+### Custom icons (React)
+
+```jsx
+import { ChevronLeftIcon, ChevronRightIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { SliderButton } from 'slider-nav-button/react';
+
+<SliderButton
+  iconLeft={<HugeiconsIcon icon={ChevronLeftIcon} size={18} />}
+  iconRight={<HugeiconsIcon icon={ChevronRightIcon} size={18} />}
+  onPrev={handlePrev}
+  onNext={handleNext}
+/>
+```
+
+## API
+
+### Vanilla JS
+
+**Constructor options**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `onPrev` | `() => void` | - | Callback when left arrow is clicked |
+| `onNext` | `() => void` | - | Callback when right arrow is clicked |
+| `iconLeft` | `string` | Default arrow SVG | Custom SVG HTML string for left icon |
+| `iconRight` | `string` | Default arrow SVG | Custom SVG HTML string for right icon |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `className` | `string` | - | Additional CSS class for the container |
+
+**Methods**
+
+- `getElement()` - Returns the root DOM element
+- `mount(parent)` - Mount into a parent element (selector or HTMLElement)
+- `unmount()` - Remove from the DOM
+- `update(options)` - Update options (iconLeft, iconRight, size, className)
+
+### React
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onPrev` | `() => void` | - | Callback when left arrow is clicked |
+| `onNext` | `() => void` | - | Callback when right arrow is clicked |
+| `iconLeft` | `ReactNode` | Default arrow | Custom left icon |
+| `iconRight` | `ReactNode` | Default arrow | Custom right icon |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `className` | `string` | - | Additional CSS class |
+
+## Customization
+
+Use CSS custom properties to theme the component. Target the `.snb` class or pass a custom `className`:
+
+```css
+.snb {
+  --snb-bg: transparent;
+  --snb-hover-bg: #f7f7f7;
+  --snb-border-color: #f2f2f2;
+  --snb-icon-color: #17181A;
+  --snb-divider-color: var(--snb-border-color);
+  --snb-radius: 9999px;
+  --snb-height: 36px;
+  --snb-width: 90px;
+  --snb-icon-size: 18px;
+  --snb-transition-duration: 0.28s;
+  --snb-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --snb-hover-padding: 2px;
+}
+```
+
+### Dark theme
+
+```css
+.dark-container .snb {
+  --snb-bg: transparent;
+  --snb-hover-bg: #323232;
+  --snb-border-color: rgba(255, 255, 255, 0.05);
+  --snb-divider-color: rgba(255, 255, 255, 0.05);
+  --snb-icon-color: #fff;
+}
+```
+
+## Demo
+
+```bash
+npm run demo
+```
+
+Then open the URL shown (e.g. `http://localhost:3000/demo/`).
+
+## Browser support
+
+Vanilla JS uses `mousemove`/`mouseleave` for hover detection; React uses framer-motion. Supported in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,169 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  SliderButton: () => SliderButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/slider-button.ts
+var LEFT_ARROW_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`;
+var RIGHT_ARROW_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M12 5l7 7-7 7"/></svg>`;
+var SIZE_MAP = {
+  sm: { height: 28, width: 70, iconSize: 14 },
+  md: { height: 36, width: 90, iconSize: 18 },
+  lg: { height: 44, width: 110, iconSize: 22 }
+};
+var SliderButton = class {
+  constructor(options = {}) {
+    this.hoverSide = null;
+    this.prevHoverSide = null;
+    this.handleMouseMove = (e) => {
+      const rect = this.container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const mid = rect.width / 2;
+      const side = x < mid ? "left" : "right";
+      this.prevHoverSide = this.hoverSide;
+      this.hoverSide = side;
+      this.updateSlideState();
+    };
+    this.handleMouseLeave = () => {
+      this.prevHoverSide = this.hoverSide;
+      this.hoverSide = null;
+      this.updateSlideState();
+    };
+    this.options = options;
+    const { size = "md" } = options;
+    const dimensions = SIZE_MAP[size];
+    this.container = document.createElement("div");
+    this.container.className = `snb snb-js ${options.className ?? ""}`.trim();
+    this.container.style.setProperty("--snb-height", `${dimensions.height}px`);
+    this.container.style.setProperty("--snb-width", `${dimensions.width}px`);
+    this.container.style.setProperty("--snb-icon-size", `${dimensions.iconSize}px`);
+    this.slideBg = document.createElement("div");
+    this.slideBg.className = "snb-js-slide-bg";
+    this.slideBg.setAttribute("aria-hidden", "true");
+    this.leftBtn = document.createElement("button");
+    this.leftBtn.className = "snb-left";
+    this.leftBtn.type = "button";
+    this.leftBtn.setAttribute("aria-label", "Previous");
+    this.leftBtn.innerHTML = `<span class="snb-icon">${options.iconLeft ?? LEFT_ARROW_SVG}</span>`;
+    const divider = document.createElement("div");
+    divider.className = "snb-divider";
+    divider.setAttribute("aria-hidden", "true");
+    this.rightBtn = document.createElement("button");
+    this.rightBtn.className = "snb-right";
+    this.rightBtn.type = "button";
+    this.rightBtn.setAttribute("aria-label", "Next");
+    this.rightBtn.innerHTML = `<span class="snb-icon">${options.iconRight ?? RIGHT_ARROW_SVG}</span>`;
+    this.container.append(this.slideBg, this.leftBtn, divider, this.rightBtn);
+    this.leftBtn.addEventListener("click", () => this.options.onPrev?.());
+    this.rightBtn.addEventListener("click", () => this.options.onNext?.());
+    this.container.addEventListener("mousemove", this.handleMouseMove);
+    this.container.addEventListener("mouseleave", this.handleMouseLeave);
+  }
+  updateSlideState() {
+    const isEnter = this.prevHoverSide === null && this.hoverSide !== null;
+    this.container.classList.remove(
+      "snb-hover-left",
+      "snb-hover-right",
+      "snb-exit-from-left",
+      "snb-exit-from-right",
+      "snb-enter-right-prep"
+    );
+    if (this.hoverSide === "left") {
+      this.container.classList.add("snb-hover-left");
+    } else if (this.hoverSide === "right") {
+      if (isEnter) {
+        this.container.classList.add("snb-enter-right-prep");
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.container.classList.remove("snb-enter-right-prep");
+            this.container.classList.add("snb-hover-right");
+          });
+        });
+      } else {
+        this.container.classList.add("snb-hover-right");
+      }
+    } else if (this.prevHoverSide === "left") {
+      this.container.classList.add("snb-exit-from-left");
+      this.slideBg.addEventListener("transitionend", () => {
+        this.container.classList.remove("snb-exit-from-left");
+      }, { once: true });
+    } else if (this.prevHoverSide === "right") {
+      this.container.classList.add("snb-exit-from-right");
+      this.slideBg.addEventListener("transitionend", () => {
+        this.container.classList.remove("snb-exit-from-right");
+      }, { once: true });
+    }
+  }
+  /**
+   * Get the root DOM element
+   */
+  getElement() {
+    return this.container;
+  }
+  /**
+   * Mount the button into a parent element
+   */
+  mount(parent) {
+    const el = typeof parent === "string" ? document.querySelector(parent) : parent;
+    if (!el) throw new Error(`SliderButton: parent element not found`);
+    el.appendChild(this.container);
+    return this;
+  }
+  /**
+   * Remove the button from the DOM
+   */
+  unmount() {
+    this.container.removeEventListener("mousemove", this.handleMouseMove);
+    this.container.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.container.remove();
+    return this;
+  }
+  /**
+   * Update options
+   */
+  update(options) {
+    this.options = { ...this.options, ...options };
+    if (options.iconLeft !== void 0) {
+      this.leftBtn.innerHTML = `<span class="snb-icon">${options.iconLeft}</span>`;
+    }
+    if (options.iconRight !== void 0) {
+      this.rightBtn.innerHTML = `<span class="snb-icon">${options.iconRight}</span>`;
+    }
+    if (options.size !== void 0) {
+      const dimensions = SIZE_MAP[options.size];
+      this.container.style.setProperty("--snb-height", `${dimensions.height}px`);
+      this.container.style.setProperty("--snb-width", `${dimensions.width}px`);
+      this.container.style.setProperty("--snb-icon-size", `${dimensions.iconSize}px`);
+    }
+    if (options.className !== void 0) {
+      this.container.className = `snb snb-js ${options.className ?? ""}`.trim();
+    }
+    return this;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SliderButton
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/core/slider-button.ts"],"sourcesContent":["export { SliderButton } from './core/slider-button';\nexport type { SliderButtonOptions } from './core/slider-button';\n","const LEFT_ARROW_SVG = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 12H5M12 19l-7-7 7-7\"/></svg>`;\nconst RIGHT_ARROW_SVG = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>`;\n\nexport interface SliderButtonOptions {\n  onPrev?: () => void;\n  onNext?: () => void;\n  iconLeft?: string;\n  iconRight?: string;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst SIZE_MAP = {\n  sm: { height: 28, width: 70, iconSize: 14 },\n  md: { height: 36, width: 90, iconSize: 18 },\n  lg: { height: 44, width: 110, iconSize: 22 },\n};\n\ntype HoverSide = 'left' | 'right' | null;\n\nexport class SliderButton {\n  private container: HTMLDivElement;\n  private leftBtn: HTMLButtonElement;\n  private rightBtn: HTMLButtonElement;\n  private options: SliderButtonOptions;\n  private hoverSide: HoverSide = null;\n  private prevHoverSide: HoverSide = null;\n  private slideBg: HTMLDivElement;\n\n  constructor(options: SliderButtonOptions = {}) {\n    this.options = options;\n    const { size = 'md' } = options;\n    const dimensions = SIZE_MAP[size];\n\n    this.container = document.createElement('div');\n    this.container.className = `snb snb-js ${options.className ?? ''}`.trim();\n    this.container.style.setProperty('--snb-height', `${dimensions.height}px`);\n    this.container.style.setProperty('--snb-width', `${dimensions.width}px`);\n    this.container.style.setProperty('--snb-icon-size', `${dimensions.iconSize}px`);\n\n    this.slideBg = document.createElement('div');\n    this.slideBg.className = 'snb-js-slide-bg';\n    this.slideBg.setAttribute('aria-hidden', 'true');\n\n    this.leftBtn = document.createElement('button');\n    this.leftBtn.className = 'snb-left';\n    this.leftBtn.type = 'button';\n    this.leftBtn.setAttribute('aria-label', 'Previous');\n    this.leftBtn.innerHTML = `<span class=\"snb-icon\">${options.iconLeft ?? LEFT_ARROW_SVG}</span>`;\n\n    const divider = document.createElement('div');\n    divider.className = 'snb-divider';\n    divider.setAttribute('aria-hidden', 'true');\n\n    this.rightBtn = document.createElement('button');\n    this.rightBtn.className = 'snb-right';\n    this.rightBtn.type = 'button';\n    this.rightBtn.setAttribute('aria-label', 'Next');\n    this.rightBtn.innerHTML = `<span class=\"snb-icon\">${options.iconRight ?? RIGHT_ARROW_SVG}</span>`;\n\n    this.container.append(this.slideBg, this.leftBtn, divider, this.rightBtn);\n\n    this.leftBtn.addEventListener('click', () => this.options.onPrev?.());\n    this.rightBtn.addEventListener('click', () => this.options.onNext?.());\n\n    this.container.addEventListener('mousemove', this.handleMouseMove);\n    this.container.addEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private handleMouseMove = (e: MouseEvent): void => {\n    const rect = this.container.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const mid = rect.width / 2;\n    const side: HoverSide = x < mid ? 'left' : 'right';\n    this.prevHoverSide = this.hoverSide;\n    this.hoverSide = side;\n    this.updateSlideState();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.prevHoverSide = this.hoverSide;\n    this.hoverSide = null;\n    this.updateSlideState();\n  };\n\n  private updateSlideState(): void {\n    const isEnter = this.prevHoverSide === null && this.hoverSide !== null;\n\n    this.container.classList.remove(\n      'snb-hover-left', 'snb-hover-right', 'snb-exit-from-left', 'snb-exit-from-right', 'snb-enter-right-prep'\n    );\n\n    if (this.hoverSide === 'left') {\n      this.container.classList.add('snb-hover-left');\n    } else if (this.hoverSide === 'right') {\n      if (isEnter) {\n        this.container.classList.add('snb-enter-right-prep');\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            this.container.classList.remove('snb-enter-right-prep');\n            this.container.classList.add('snb-hover-right');\n          });\n        });\n      } else {\n        this.container.classList.add('snb-hover-right');\n      }\n    } else if (this.prevHoverSide === 'left') {\n      this.container.classList.add('snb-exit-from-left');\n      this.slideBg.addEventListener('transitionend', () => {\n        this.container.classList.remove('snb-exit-from-left');\n      }, { once: true });\n    } else if (this.prevHoverSide === 'right') {\n      this.container.classList.add('snb-exit-from-right');\n      this.slideBg.addEventListener('transitionend', () => {\n        this.container.classList.remove('snb-exit-from-right');\n      }, { once: true });\n    }\n  }\n\n  /**\n   * Get the root DOM element\n   */\n  getElement(): HTMLDivElement {\n    return this.container;\n  }\n\n  /**\n   * Mount the button into a parent element\n   */\n  mount(parent: HTMLElement | string): this {\n    const el = typeof parent === 'string' ? document.querySelector(parent) : parent;\n    if (!el) throw new Error(`SliderButton: parent element not found`);\n    el.appendChild(this.container);\n    return this;\n  }\n\n  /**\n   * Remove the button from the DOM\n   */\n  unmount(): this {\n    this.container.removeEventListener('mousemove', this.handleMouseMove);\n    this.container.removeEventListener('mouseleave', this.handleMouseLeave);\n    this.container.remove();\n    return this;\n  }\n\n  /**\n   * Update options\n   */\n  update(options: Partial<SliderButtonOptions>): this {\n    this.options = { ...this.options, ...options };\n    if (options.iconLeft !== undefined) {\n      this.leftBtn.innerHTML = `<span class=\"snb-icon\">${options.iconLeft}</span>`;\n    }\n    if (options.iconRight !== undefined) {\n      this.rightBtn.innerHTML = `<span class=\"snb-icon\">${options.iconRight}</span>`;\n    }\n    if (options.size !== undefined) {\n      const dimensions = SIZE_MAP[options.size];\n      this.container.style.setProperty('--snb-height', `${dimensions.height}px`);\n      this.container.style.setProperty('--snb-width', `${dimensions.width}px`);\n      this.container.style.setProperty('--snb-icon-size', `${dimensions.iconSize}px`);\n    }\n    if (options.className !== undefined) {\n      this.container.className = `snb snb-js ${options.className ?? ''}`.trim();\n    }\n    return this;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+interface SliderButtonOptions {
+    onPrev?: () => void;
+    onNext?: () => void;
+    iconLeft?: string;
+    iconRight?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare class SliderButton {
+    private container;
+    private leftBtn;
+    private rightBtn;
+    private options;
+    private hoverSide;
+    private prevHoverSide;
+    private slideBg;
+    constructor(options?: SliderButtonOptions);
+    private handleMouseMove;
+    private handleMouseLeave;
+    private updateSlideState;
+    /**
+     * Get the root DOM element
+     */
+    getElement(): HTMLDivElement;
+    /**
+     * Mount the button into a parent element
+     */
+    mount(parent: HTMLElement | string): this;
+    /**
+     * Remove the button from the DOM
+     */
+    unmount(): this;
+    /**
+     * Update options
+     */
+    update(options: Partial<SliderButtonOptions>): this;
+}
+
+export { SliderButton, type SliderButtonOptions };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+interface SliderButtonOptions {
+    onPrev?: () => void;
+    onNext?: () => void;
+    iconLeft?: string;
+    iconRight?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare class SliderButton {
+    private container;
+    private leftBtn;
+    private rightBtn;
+    private options;
+    private hoverSide;
+    private prevHoverSide;
+    private slideBg;
+    constructor(options?: SliderButtonOptions);
+    private handleMouseMove;
+    private handleMouseLeave;
+    private updateSlideState;
+    /**
+     * Get the root DOM element
+     */
+    getElement(): HTMLDivElement;
+    /**
+     * Mount the button into a parent element
+     */
+    mount(parent: HTMLElement | string): this;
+    /**
+     * Remove the button from the DOM
+     */
+    unmount(): this;
+    /**
+     * Update options
+     */
+    update(options: Partial<SliderButtonOptions>): this;
+}
+
+export { SliderButton, type SliderButtonOptions };

package/dist/index.js

@@ -0,0 +1,142 @@
+// src/core/slider-button.ts
+var LEFT_ARROW_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`;
+var RIGHT_ARROW_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M12 5l7 7-7 7"/></svg>`;
+var SIZE_MAP = {
+  sm: { height: 28, width: 70, iconSize: 14 },
+  md: { height: 36, width: 90, iconSize: 18 },
+  lg: { height: 44, width: 110, iconSize: 22 }
+};
+var SliderButton = class {
+  constructor(options = {}) {
+    this.hoverSide = null;
+    this.prevHoverSide = null;
+    this.handleMouseMove = (e) => {
+      const rect = this.container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const mid = rect.width / 2;
+      const side = x < mid ? "left" : "right";
+      this.prevHoverSide = this.hoverSide;
+      this.hoverSide = side;
+      this.updateSlideState();
+    };
+    this.handleMouseLeave = () => {
+      this.prevHoverSide = this.hoverSide;
+      this.hoverSide = null;
+      this.updateSlideState();
+    };
+    this.options = options;
+    const { size = "md" } = options;
+    const dimensions = SIZE_MAP[size];
+    this.container = document.createElement("div");
+    this.container.className = `snb snb-js ${options.className ?? ""}`.trim();
+    this.container.style.setProperty("--snb-height", `${dimensions.height}px`);
+    this.container.style.setProperty("--snb-width", `${dimensions.width}px`);
+    this.container.style.setProperty("--snb-icon-size", `${dimensions.iconSize}px`);
+    this.slideBg = document.createElement("div");
+    this.slideBg.className = "snb-js-slide-bg";
+    this.slideBg.setAttribute("aria-hidden", "true");
+    this.leftBtn = document.createElement("button");
+    this.leftBtn.className = "snb-left";
+    this.leftBtn.type = "button";
+    this.leftBtn.setAttribute("aria-label", "Previous");
+    this.leftBtn.innerHTML = `<span class="snb-icon">${options.iconLeft ?? LEFT_ARROW_SVG}</span>`;
+    const divider = document.createElement("div");
+    divider.className = "snb-divider";
+    divider.setAttribute("aria-hidden", "true");
+    this.rightBtn = document.createElement("button");
+    this.rightBtn.className = "snb-right";
+    this.rightBtn.type = "button";
+    this.rightBtn.setAttribute("aria-label", "Next");
+    this.rightBtn.innerHTML = `<span class="snb-icon">${options.iconRight ?? RIGHT_ARROW_SVG}</span>`;
+    this.container.append(this.slideBg, this.leftBtn, divider, this.rightBtn);
+    this.leftBtn.addEventListener("click", () => this.options.onPrev?.());
+    this.rightBtn.addEventListener("click", () => this.options.onNext?.());
+    this.container.addEventListener("mousemove", this.handleMouseMove);
+    this.container.addEventListener("mouseleave", this.handleMouseLeave);
+  }
+  updateSlideState() {
+    const isEnter = this.prevHoverSide === null && this.hoverSide !== null;
+    this.container.classList.remove(
+      "snb-hover-left",
+      "snb-hover-right",
+      "snb-exit-from-left",
+      "snb-exit-from-right",
+      "snb-enter-right-prep"
+    );
+    if (this.hoverSide === "left") {
+      this.container.classList.add("snb-hover-left");
+    } else if (this.hoverSide === "right") {
+      if (isEnter) {
+        this.container.classList.add("snb-enter-right-prep");
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.container.classList.remove("snb-enter-right-prep");
+            this.container.classList.add("snb-hover-right");
+          });
+        });
+      } else {
+        this.container.classList.add("snb-hover-right");
+      }
+    } else if (this.prevHoverSide === "left") {
+      this.container.classList.add("snb-exit-from-left");
+      this.slideBg.addEventListener("transitionend", () => {
+        this.container.classList.remove("snb-exit-from-left");
+      }, { once: true });
+    } else if (this.prevHoverSide === "right") {
+      this.container.classList.add("snb-exit-from-right");
+      this.slideBg.addEventListener("transitionend", () => {
+        this.container.classList.remove("snb-exit-from-right");
+      }, { once: true });
+    }
+  }
+  /**
+   * Get the root DOM element
+   */
+  getElement() {
+    return this.container;
+  }
+  /**
+   * Mount the button into a parent element
+   */
+  mount(parent) {
+    const el = typeof parent === "string" ? document.querySelector(parent) : parent;
+    if (!el) throw new Error(`SliderButton: parent element not found`);
+    el.appendChild(this.container);
+    return this;
+  }
+  /**
+   * Remove the button from the DOM
+   */
+  unmount() {
+    this.container.removeEventListener("mousemove", this.handleMouseMove);
+    this.container.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.container.remove();
+    return this;
+  }
+  /**
+   * Update options
+   */
+  update(options) {
+    this.options = { ...this.options, ...options };
+    if (options.iconLeft !== void 0) {
+      this.leftBtn.innerHTML = `<span class="snb-icon">${options.iconLeft}</span>`;
+    }
+    if (options.iconRight !== void 0) {
+      this.rightBtn.innerHTML = `<span class="snb-icon">${options.iconRight}</span>`;
+    }
+    if (options.size !== void 0) {
+      const dimensions = SIZE_MAP[options.size];
+      this.container.style.setProperty("--snb-height", `${dimensions.height}px`);
+      this.container.style.setProperty("--snb-width", `${dimensions.width}px`);
+      this.container.style.setProperty("--snb-icon-size", `${dimensions.iconSize}px`);
+    }
+    if (options.className !== void 0) {
+      this.container.className = `snb snb-js ${options.className ?? ""}`.trim();
+    }
+    return this;
+  }
+};
+export {
+  SliderButton
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/slider-button.ts"],"sourcesContent":["const LEFT_ARROW_SVG = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 12H5M12 19l-7-7 7-7\"/></svg>`;\nconst RIGHT_ARROW_SVG = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>`;\n\nexport interface SliderButtonOptions {\n  onPrev?: () => void;\n  onNext?: () => void;\n  iconLeft?: string;\n  iconRight?: string;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst SIZE_MAP = {\n  sm: { height: 28, width: 70, iconSize: 14 },\n  md: { height: 36, width: 90, iconSize: 18 },\n  lg: { height: 44, width: 110, iconSize: 22 },\n};\n\ntype HoverSide = 'left' | 'right' | null;\n\nexport class SliderButton {\n  private container: HTMLDivElement;\n  private leftBtn: HTMLButtonElement;\n  private rightBtn: HTMLButtonElement;\n  private options: SliderButtonOptions;\n  private hoverSide: HoverSide = null;\n  private prevHoverSide: HoverSide = null;\n  private slideBg: HTMLDivElement;\n\n  constructor(options: SliderButtonOptions = {}) {\n    this.options = options;\n    const { size = 'md' } = options;\n    const dimensions = SIZE_MAP[size];\n\n    this.container = document.createElement('div');\n    this.container.className = `snb snb-js ${options.className ?? ''}`.trim();\n    this.container.style.setProperty('--snb-height', `${dimensions.height}px`);\n    this.container.style.setProperty('--snb-width', `${dimensions.width}px`);\n    this.container.style.setProperty('--snb-icon-size', `${dimensions.iconSize}px`);\n\n    this.slideBg = document.createElement('div');\n    this.slideBg.className = 'snb-js-slide-bg';\n    this.slideBg.setAttribute('aria-hidden', 'true');\n\n    this.leftBtn = document.createElement('button');\n    this.leftBtn.className = 'snb-left';\n    this.leftBtn.type = 'button';\n    this.leftBtn.setAttribute('aria-label', 'Previous');\n    this.leftBtn.innerHTML = `<span class=\"snb-icon\">${options.iconLeft ?? LEFT_ARROW_SVG}</span>`;\n\n    const divider = document.createElement('div');\n    divider.className = 'snb-divider';\n    divider.setAttribute('aria-hidden', 'true');\n\n    this.rightBtn = document.createElement('button');\n    this.rightBtn.className = 'snb-right';\n    this.rightBtn.type = 'button';\n    this.rightBtn.setAttribute('aria-label', 'Next');\n    this.rightBtn.innerHTML = `<span class=\"snb-icon\">${options.iconRight ?? RIGHT_ARROW_SVG}</span>`;\n\n    this.container.append(this.slideBg, this.leftBtn, divider, this.rightBtn);\n\n    this.leftBtn.addEventListener('click', () => this.options.onPrev?.());\n    this.rightBtn.addEventListener('click', () => this.options.onNext?.());\n\n    this.container.addEventListener('mousemove', this.handleMouseMove);\n    this.container.addEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private handleMouseMove = (e: MouseEvent): void => {\n    const rect = this.container.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const mid = rect.width / 2;\n    const side: HoverSide = x < mid ? 'left' : 'right';\n    this.prevHoverSide = this.hoverSide;\n    this.hoverSide = side;\n    this.updateSlideState();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.prevHoverSide = this.hoverSide;\n    this.hoverSide = null;\n    this.updateSlideState();\n  };\n\n  private updateSlideState(): void {\n    const isEnter = this.prevHoverSide === null && this.hoverSide !== null;\n\n    this.container.classList.remove(\n      'snb-hover-left', 'snb-hover-right', 'snb-exit-from-left', 'snb-exit-from-right', 'snb-enter-right-prep'\n    );\n\n    if (this.hoverSide === 'left') {\n      this.container.classList.add('snb-hover-left');\n    } else if (this.hoverSide === 'right') {\n      if (isEnter) {\n        this.container.classList.add('snb-enter-right-prep');\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            this.container.classList.remove('snb-enter-right-prep');\n            this.container.classList.add('snb-hover-right');\n          });\n        });\n      } else {\n        this.container.classList.add('snb-hover-right');\n      }\n    } else if (this.prevHoverSide === 'left') {\n      this.container.classList.add('snb-exit-from-left');\n      this.slideBg.addEventListener('transitionend', () => {\n        this.container.classList.remove('snb-exit-from-left');\n      }, { once: true });\n    } else if (this.prevHoverSide === 'right') {\n      this.container.classList.add('snb-exit-from-right');\n      this.slideBg.addEventListener('transitionend', () => {\n        this.container.classList.remove('snb-exit-from-right');\n      }, { once: true });\n    }\n  }\n\n  /**\n   * Get the root DOM element\n   */\n  getElement(): HTMLDivElement {\n    return this.container;\n  }\n\n  /**\n   * Mount the button into a parent element\n   */\n  mount(parent: HTMLElement | string): this {\n    const el = typeof parent === 'string' ? document.querySelector(parent) : parent;\n    if (!el) throw new Error(`SliderButton: parent element not found`);\n    el.appendChild(this.container);\n    return this;\n  }\n\n  /**\n   * Remove the button from the DOM\n   */\n  unmount(): this {\n    this.container.removeEventListener('mousemove', this.handleMouseMove);\n    this.container.removeEventListener('mouseleave', this.handleMouseLeave);\n    this.container.remove();\n    return this;\n  }\n\n  /**\n   * Update options\n   */\n  update(options: Partial<SliderButtonOptions>): this {\n    this.options = { ...this.options, ...options };\n    if (options.iconLeft !== undefined) {\n      this.leftBtn.innerHTML = `<span class=\"snb-icon\">${options.iconLeft}</span>`;\n    }\n    if (options.iconRight !== undefined) {\n      this.rightBtn.innerHTML = `<span class=\"snb-icon\">${options.iconRight}</span>`;\n    }\n    if (options.size !== undefined) {\n      const dimensions = SIZE_MAP[options.size];\n      this.container.style.setProperty('--snb-height', `${dimensions.height}px`);\n      this.container.style.setProperty('--snb-width', `${dimensions.width}px`);\n      this.container.style.setProperty('--snb-icon-size', `${dimensions.iconSize}px`);\n    }\n    if (options.className !== undefined) {\n      this.container.className = `snb snb-js ${options.className ?? ''}`.trim();\n    }\n    return this;\n  }\n}\n"],"mappings":"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","names":[]}