IconSwap

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

/*!
 * IconSwap, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/icon-swap
 * 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, { useId, type CSSProperties, type ReactNode } from "react";

export interface IconSwapProps {
  /** When true, show `active` (spring up); when false, show `idle`. */
  active: boolean;
  /** Icon shown in the idle / off state. */
  idle: ReactNode;
  /** Icon shown in the active / on state. */
  activeIcon: ReactNode;
  className?: string;
  style?: CSSProperties;
}

/**
 * Two stacked icons that cross-fade and spring when `active` flips.
 * Same motion language as the site copy → check control: idle shrinks
 * out, active springs up. Zero dependencies. Great for like toggles,
 * copy confirmation, and other binary icon states.
 */
export default function IconSwap({
  active,
  idle,
  activeIcon,
  className = "",
  style,
}: IconSwapProps) {
  const uid = useId().replace(/:/g, "");
  const root = `dp-icon-swap-${uid}`;

  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
.${root} {
  display: grid;
  place-items: center;
}
.${root} > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.${root}-idle {
  transition:
    opacity 0.12s ease-out,
    transform 0.12s ease-out;
}
.${root}-active {
  transition:
    opacity 0.12s ease-out,
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.${root}[data-active="true"] .${root}-idle {
  opacity: 0;
  transform: scale(0.8);
}
.${root}[data-active="false"] .${root}-active {
  opacity: 0;
  transform: scale(0.45);
  transition:
    opacity 0.12s ease-out,
    transform 0.12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .${root}-idle,
  .${root}-active {
    transition: none;
  }
}
`,
        }}
      />
      <span
        className={`${root}${className ? ` ${className}` : ""}`}
        data-active={active ? "true" : "false"}
        style={style}
      >
        <span className={`${root}-idle`}>{idle}</span>
        <span className={`${root}-active`}>{activeIcon}</span>
      </span>
    </>
  );
}