SlideToggle

npx shadcn@latest add "https://designpass.dev/r/SlideToggle-TS-TW.json"

/*!
 * SlideToggle, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/slide-toggle
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import React, { useCallback, useEffect, useRef, useState, type ReactNode } from "react";

export interface SlideToggleOption<T extends string> {
  value: T;
  /** Optional, omit labels on all options for a bare switch. */
  label?: ReactNode;
  /**
   * Optional icon shown in the track, alone or beside/above the label.
   * Sized off the control height and inked with the same crossfade as the
   * label.
   */
  icon?: ReactNode;
  /**
   * Optional track tint while this option is selected, e.g. a green "on"
   * side. Crossfades with the live thumb position as it slides.
   */
  accent?: string;
}

export interface SlideToggleProps<T extends string> {
  /** Two or more options; the thumb slides between them. */
  options: readonly SlideToggleOption<T>[];
  /** Controlled value. Omit to let the toggle manage its own state. */
  value?: T;
  defaultValue?: T;
  onChange?: (value: T) => void;
  /** Control height in px; everything else scales from it. */
  size?: number;
  /**
   * How icon + label sit in each slot. `inline` (default) is side by side;
   * `stack` puts the icon above the label for taller, card-like options.
   */
  optionLayout?: "inline" | "stack";
  disabled?: boolean;
  /** Accessible name for the group, e.g. "Language". */
  ariaLabel?: string;
  className?: string;
}

const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);

// Tight spring while the pointer is dragging the thumb, loose spring on
// release so it overshoots its slot and wobbles back, same motion language
// as our Magnet component.
const DRAG_STIFFNESS = 0.4;
const DRAG_DAMPING = 0.6;
const RELEASE_STIFFNESS = 0.14;
const RELEASE_DAMPING = 0.78;

// How far the thumb leans toward a hovered slot (in slot units), a small
// "come here" affordance before any click.
const HOVER_LEAN = 0.08;

const THUMB_INSET = 3; // px padding between thumb and track edge

// Label ink crossfades as the thumb slides underneath: inverted ink on the
// solid thumb, soft foreground ink off it. Colors resolve from the host
// theme tokens (with standalone white-on-dark fallbacks) via color-mix.
const INK_ON_THUMB = "var(--st-thumb-ink)";
const INK_OFF_THUMB = "color-mix(in srgb, var(--st-ink) 65%, transparent)";
// Brighter off-thumb ink while hovering a slot you're about to press.
const INK_HOVER_OFF = "color-mix(in srgb, var(--st-ink) 95%, transparent)";

// The track's solid resting color; accents crossfade against this. Solid on
// purpose: a translucent accent goes dingy over unknown backdrops.
const NEUTRAL_TRACK = "var(--st-track)";

/** An option's track color: its accent at full strength, or the resting color. */
function trackPaint(accent: string | undefined) {
  return accent ?? NEUTRAL_TRACK;
}

/** Everything scales off the control height so any size stays proportioned. */
function sizeStyles(
  size: number,
  slotFactor: number,
  count: number,
  stacked: boolean,
) {
  return {
    container: {
      height: `${size}px`,
      // Preferred track width from size × slots. Keep this a fixed length:
      // `min(100%, …)` as min-width makes the percentage cyclic in shrink-
      // wrapped flex parents (e.g. CodePanel's ts/js + tw/css row) and the
      // control can paint wider than its flex contribution, shoving the
      // trailing toggle past the content edge. Narrow hosts that need to
      // squeeze should pass `className="w-full"` (or similar) with a definite
      // parent width; labels tighten via the grid.
      minWidth: `${Math.round(size * slotFactor * count)}px`,
    },
    option: (hasTextLabel: boolean) => ({
      // Stacked options are taller, so type and padding scale down relative
      // to height; inline options keep the original proportions.
      fontSize: `${Math.max(9, Math.round(size * (stacked ? 0.16 : 0.38)))}px`,
      // Icon-only slots stay snug so the thumb reads nearly circular.
      padding: stacked
        ? `${Math.round(size * 0.1)}px ${Math.round(size * 0.18)}px`
        : `0 ${Math.round(size * (hasTextLabel ? 0.45 : 0.3))}px`,
      gap: `${Math.round(size * (stacked ? 0.08 : 0.18))}px`,
    }),
    icon: {
      fontSize: `${Math.round(size * (stacked ? 0.34 : 0.5))}px`,
    },
  };
}

export default function SlideToggle<T extends string>({
  options,
  value,
  defaultValue,
  onChange,
  size = 28,
  optionLayout = "inline",
  disabled = false,
  ariaLabel,
  className = "",
}: SlideToggleProps<T>) {
  const [internalValue, setInternalValue] = useState<T>(defaultValue ?? options[0].value);
  const selected = value ?? internalValue;
  const count = options.length;
  const selectedIndex = Math.max(
    0,
    options.findIndex((option) => option.value === selected),
  );
  const hasText = options.some((option) => option.label != null);
  const hasIcons = options.some((option) => option.icon != null);
  const stacked = optionLayout === "stack";
  // Text labels need wide slots, icon-only slots hug an almost-circular
  // thumb, and a bare switch is snugger still. Stacked icon+label options
  // are a bit narrower than inline text since the label sits under the icon.
  const slotFactor = stacked && hasText && hasIcons ? 1.7 : hasText ? 2.3 : hasIcons ? 1.2 : 1;
  const styles = sizeStyles(size, slotFactor, count, stacked);

  const trackRef = useRef<HTMLDivElement>(null);
  const thumbRef = useRef<HTMLDivElement>(null);
  const labelRefs = useRef<(HTMLSpanElement | null)[]>([]);
  // Slot under the pointer (-1 when none). Painted outside React so hover
  // ink updates without re-rendering the spring loop.
  const hoverSlotRef = useRef(-1);

  // Read through a ref inside the paint loop so a new options array from the
  // parent doesn't rebuild the render callback and restart the spring.
  const optionsRef = useRef(options);
  optionsRef.current = options;

  // Spring state lives outside React so drag/animation never re-renders.
  const physics = useRef({
    position: selectedIndex, // 0..count-1, in slot units
    velocity: 0,
    target: selectedIndex,
    dragging: false,
    frame: 0,
    running: false,
    reducedMotion: false,
  });

  const select = useCallback(
    (next: T) => {
      if (next !== (value ?? internalValue)) {
        setInternalValue(next);
        onChange?.(next);
        // A tiny tactile tick on devices that support it.
        if (typeof navigator !== "undefined") navigator.vibrate?.(8);
      }
    },
    [value, internalValue, onChange],
  );

  /** Paint thumb + label ink for a given spring position/velocity. */
  const render = useCallback(
    (position: number, velocity: number) => {
      const track = trackRef.current;
      const thumb = thumbRef.current;
      if (!track || !thumb) return;

      // One slot's pitch in px; the thumb travels (count - 1) slots.
      const pitch = (track.clientWidth - THUMB_INSET * 2) / count;
      // Velocity-based squash & stretch: a fast thumb goes long and flat.
      const stretch = clamp(Math.abs(velocity) * 1.4, 0, 0.22);
      thumb.style.transform =
        `translateX(${position * pitch}px) scaleX(${1 + stretch}) scaleY(${1 - stretch * 0.6})`;

      // Label ink follows the live thumb position, not the committed state,
      // so a drag crossfades the labels in real time. Hovered off-thumb
      // slots lighten so the press target reads clearly.
      const hovered = hoverSlotRef.current;
      for (let i = 0; i < count; i++) {
        const label = labelRefs.current[i];
        if (!label) continue;
        const p = clamp(1 - Math.abs(position - i), 0, 1);
        const offInk = hovered === i ? INK_HOVER_OFF : INK_OFF_THUMB;
        label.style.color =
          `color-mix(in srgb, ${INK_ON_THUMB} ${Math.round(p * 100)}%, ${offInk})`;
      }

      // Track tint follows the thumb between accented slots, so an "on"
      // color washes in as the thumb slides rather than snapping.
      const opts = optionsRef.current;
      if (opts.some((option) => option.accent)) {
        const at = clamp(position, 0, count - 1);
        const lower = Math.floor(at);
        const upper = Math.min(lower + 1, count - 1);
        const blend = Math.round((at - lower) * 100);
        const from = trackPaint(opts[lower]?.accent);
        const to = trackPaint(opts[upper]?.accent);
        track.style.background =
          blend <= 0 ? from : `color-mix(in srgb, ${to} ${blend}%, ${from})`;
      } else {
        track.style.background = "";
      }
    },
    [count],
  );

  /** Single owner of the animation loop; safe to call repeatedly. */
  const wake = useCallback(() => {
    const state = physics.current;

    if (state.reducedMotion) {
      state.position = state.target;
      render(state.position, 0);
      return;
    }
    if (state.running) return;
    state.running = true;

    const tick = () => {
      const k = state.dragging ? DRAG_STIFFNESS : RELEASE_STIFFNESS;
      const d = state.dragging ? DRAG_DAMPING : RELEASE_DAMPING;
      state.velocity = (state.velocity + (state.target - state.position) * k) * d;
      state.position += state.velocity;
      render(state.position, state.velocity);

      const settled =
        !state.dragging &&
        Math.abs(state.velocity) < 0.001 &&
        Math.abs(state.target - state.position) < 0.001;

      if (settled) {
        state.position = state.target;
        render(state.position, 0);
        state.running = false;
        return;
      }
      state.frame = requestAnimationFrame(tick);
    };

    state.frame = requestAnimationFrame(tick);
  }, [render]);

  useEffect(() => {
    const state = physics.current;
    state.reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    state.target = selectedIndex;
    wake();
    return () => {
      cancelAnimationFrame(state.frame);
      state.running = false;
    };
  }, [selectedIndex, wake]);

  // The thumb offset is painted in px from the track width, so repaint
  // whenever the track resizes (size prop change, responsive layout) or the
  // thumb dislodges from its slot.
  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const observer = new ResizeObserver(() => {
      const state = physics.current;
      render(state.position, 0);
    });
    observer.observe(track);
    return () => observer.disconnect();
  }, [render]);

  /** Which slot a clientX falls in (0..count-1). */
  function slotAt(clientX: number, rect: DOMRect) {
    return clamp(Math.floor(((clientX - rect.left) / rect.width) * count), 0, count - 1);
  }

  // Pointer interaction: tap a slot to select it (a bare two-option switch
  // toggles on any tap), or grab the thumb and slide, release commits to
  // whichever slot is nearest.
  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
    if (disabled) return;
    const track = trackRef.current;
    if (!track) return;

    const state = physics.current;
    const rect = track.getBoundingClientRect();
    const startX = event.clientX;
    let moved = false;

    const onMove = (e: PointerEvent) => {
      if (!moved && Math.abs(e.clientX - startX) < 4) return;
      moved = true;
      state.dragging = true;
      // Map the pointer to the thumb-center position along the track.
      const pitch = (rect.width - THUMB_INSET * 2) / count;
      const rel = (e.clientX - rect.left - THUMB_INSET - pitch / 2) / pitch;
      state.target = clamp(rel, 0, count - 1);
      wake();
    };

    const onUp = (e: PointerEvent) => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", onUp);
      if (moved) {
        state.dragging = false;
        const nearest = clamp(Math.round(state.position), 0, count - 1);
        state.target = nearest;
        select(options[nearest].value);
      } else if (count === 2) {
        // A plain tap toggles a two-option switch, like a light switch.
        select(options[selectedIndex === 0 ? 1 : 0].value);
      } else {
        select(options[slotAt(e.clientX, rect)].value);
      }
      wake();
    };

    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", onUp);
  }

  // Hover lean + lighten: while hovering a non-active slot, the thumb tips
  // slightly toward it and that slot's ink brightens, a pre-click hint.
  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
    if (disabled) return;
    const state = physics.current;
    if (state.dragging) return;
    const track = trackRef.current;
    if (!track) return;

    const rect = track.getBoundingClientRect();
    const slot = slotAt(event.clientX, rect);
    hoverSlotRef.current = slot;
    state.target =
      slot === selectedIndex
        ? selectedIndex
        : selectedIndex + Math.sign(slot - selectedIndex) * HOVER_LEAN;
    wake();
  }

  function onPointerLeave() {
    const state = physics.current;
    if (state.dragging) return;
    hoverSlotRef.current = -1;
    state.target = selectedIndex;
    wake();
  }

  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (disabled) return;
    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
      event.preventDefault();
      select(options[Math.min(selectedIndex + 1, count - 1)].value);
    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
      event.preventDefault();
      select(options[Math.max(selectedIndex - 1, 0)].value);
    } else if (event.key === " " || event.key === "Enter") {
      event.preventDefault();
      // Space cycles: toggles a pair, wraps through longer sets.
      select(options[(selectedIndex + 1) % count].value);
    }
  }

  return (
    <div
      ref={trackRef}
      role="radiogroup"
      aria-label={ariaLabel}
      tabIndex={disabled ? -1 : 0}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      onKeyDown={onKeyDown}
      style={
        {
          ...styles.container,
          gridTemplateColumns: `repeat(${count}, 1fr)`,
          "--st-ink": "var(--dp-text, #fff)",
          "--st-thumb-ink": "var(--dp-bg, #14101d)",
          // Solid channel color from the host theme, standalone fallback
          // is a lifted version of the dark fallback background.
          "--st-track": "var(--dp-control-track, #241f2e)",
        } as React.CSSProperties
      }
      className={`relative inline-grid cursor-pointer select-none touch-none rounded-full border border-[color-mix(in_srgb,var(--st-ink)_10%,transparent)] bg-[var(--st-track)] p-[3px] outline-none transition-colors focus-visible:border-[color-mix(in_srgb,var(--st-ink)_30%,transparent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--st-ink)_20%,transparent)] ${
        disabled ? "cursor-not-allowed opacity-40" : ""
      } ${className}`}
    >
      <div
        ref={thumbRef}
        aria-hidden="true"
        style={{ width: `calc((100% - ${THUMB_INSET * 2}px) / ${count})` }}
        className="absolute inset-y-[3px] left-[3px] rounded-full bg-[var(--st-ink)] will-change-transform"
      />
      {options.map((option, index) => (
        <span
          key={option.value}
          role="radio"
          aria-checked={index === selectedIndex}
          aria-label={typeof option.label === "string" ? undefined : option.value}
          ref={(el) => {
            labelRefs.current[index] = el;
          }}
          style={styles.option(option.label != null)}
          className={`relative z-10 flex items-center justify-center text-center font-mono ${
            stacked
              ? "flex-col tracking-wide"
              : "tracking-widest"
          }`}
        >
          {option.icon != null && (
            <span
              aria-hidden="true"
              style={styles.icon}
              className="inline-flex shrink-0 [&_svg]:h-[1em] [&_svg]:w-[1em]"
            >
              {option.icon}
            </span>
          )}
          {option.label}
        </span>
      ))}
    </div>
  );
}