19:I[695313,["/_next/static/immutable/chunks/422lj974qmlrg.js","/_next/static/immutable/chunks/2__nhv993kwpc.js","/_next/static/immutable/chunks/1ld4m_f9jcwkz.js","/_next/static/immutable/chunks/2h82mq8b3z8_q.js","/_next/static/immutable/chunks/3uooxtxo-riau.js"],"Workbench"] 1a:T14a9,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { cn } from "@/registry/_lib/cn"; export interface IconBadgeSendButtonProps extends React.ButtonHTMLAttributes { /** Text shown beside the badge. */ label?: string; /** Accent hue for the domed face. */ accent?: string; /** How far the button lifts on hover, in pixels. */ lift?: number; /** How far the plane turns on hover, in degrees. */ spin?: number; /** Swap the plane for a check for a moment after each press. */ confirmOnPress?: boolean; } function PlaneGlyph() { return ( ); } function CheckGlyph() { return ( ); } /** * A domed send button holding its glyph in a translucent circular badge. Hover lifts the button, * brightens the badge and turns the plane toward its heading; a press reads as touching down, and * can confirm with a short check before the plane returns. */ export function IconBadgeSendButton({ label = "Send", accent = "#38BDF8", lift = 3, spin = 45, confirmOnPress = true, className, onClick, ...rest }: IconBadgeSendButtonProps) { const reduced = useReducedMotion() ?? false; const [sent, setSent] = React.useState(false); const timer = React.useRef(undefined); React.useEffect(() => () => window.clearTimeout(timer.current), []); const handleClick = (event: React.MouseEvent) => { onClick?.(event); if (event.defaultPrevented || !confirmOnPress) return; window.clearTimeout(timer.current); setSent(true); timer.current = window.setTimeout(() => setSent(false), reduced ? 600 : 1000); }; const move = reduced ? "" : "hover:translate-y-[calc(var(--lift)*-1)] focus-visible:translate-y-[calc(var(--lift)*-1)] active:translate-y-0 active:scale-[0.95]"; const shadow = "shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_5px_12px_-3px_rgb(0_0_0_/_0.38)] " + "hover:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_11px_22px_-6px_rgb(0_0_0_/_0.46)] " + "focus-visible:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_11px_22px_-6px_rgb(0_0_0_/_0.46)] " + "active:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_2px_5px_-2px_rgb(0_0_0_/_0.42)]"; return ( ); } export default IconBadgeSendButton;1b:Tb0be,

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { cn } from "@/registry/_lib/cn";

export interface IconBadgeSendButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Text shown beside the badge. */
  label?: string;
  /** Accent hue for the domed face. */
  accent?: string;
  /** How far the button lifts on hover, in pixels. */
  lift?: number;
  /** How far the plane turns on hover, in degrees. */
  spin?: number;
  /** Swap the plane for a check for a moment after each press. */
  confirmOnPress?: boolean;
}

function PlaneGlyph() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" fill="#fff" stroke="#fff" strokeWidth="1.2" strokeLinejoin="round">
      <path d="M3.3 20.6 21 12 3.3 3.4v6.2L14.2 12 3.3 14.4v6.2Z" />
    </svg>
  );
}

function CheckGlyph() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.6l5 5L19 6.8" />
    </svg>
  );
}

/**
 * A domed send button holding its glyph in a translucent circular badge. Hover lifts the button,
 * brightens the badge and turns the plane toward its heading; a press reads as touching down, and
 * can confirm with a short check before the plane returns.
 */
export function IconBadgeSendButton({
  label = "Send",
  accent = "#38BDF8",
  lift = 3,
  spin = 45,
  confirmOnPress = true,
  className,
  onClick,
  ...rest
}: IconBadgeSendButtonProps) {
  const reduced = useReducedMotion() ?? false;
  const [sent, setSent] = React.useState(false);
  const timer = React.useRef<number | undefined>(undefined);

  React.useEffect(() => () => window.clearTimeout(timer.current), []);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    onClick?.(event);
    if (event.defaultPrevented || !confirmOnPress) return;
    window.clearTimeout(timer.current);
    setSent(true);
    timer.current = window.setTimeout(() => setSent(false), reduced ? 600 : 1000);
  };

  const move = reduced
    ? ""
    : "hover:translate-y-[calc(var(--lift)*-1)] focus-visible:translate-y-[calc(var(--lift)*-1)] active:translate-y-0 active:scale-[0.95]";

  const shadow =
    "shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_5px_12px_-3px_rgb(0_0_0_/_0.38)] " +
    "hover:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_11px_22px_-6px_rgb(0_0_0_/_0.46)] " +
    "focus-visible:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_11px_22px_-6px_rgb(0_0_0_/_0.46)] " +
    "active:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.3),0_2px_5px_-2px_rgb(0_0_0_/_0.42)]";

  return (
    <button
      type="button"
      onClick={handleClick}
      className={cn(
        "group relative inline-flex select-none items-center gap-2.5 rounded-[25px] px-[19px] py-[13px] text-[18px] font-medium leading-none text-white outline-none",
        "transition-[transform,box-shadow] duration-300 ease-[cubic-bezier(0.33,0.7,0.35,1)]",
        shadow,
        move,
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/80",
        className,
      )}
      style={{ "--accent": accent, "--lift": `${lift}px`, "--spin": `${-spin}deg` } as React.CSSProperties}
      {...rest}
    >
      <span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-[inherit]"
        style={{
          background:
            "linear-gradient(to bottom, color-mix(in srgb, var(--accent) 68%, white), color-mix(in srgb, var(--accent) 80%, black))",
        }}
      />
      <span className="relative grid size-[30px] shrink-0 place-items-center rounded-full bg-white/20 transition-colors duration-300 group-hover:bg-white/50 group-focus-visible:bg-white/50">
        <AnimatePresence initial={false}>
          {sent ? (
            <motion.span
              key="check"
              className="absolute"
              initial={{ opacity: 0, scale: reduced ? 1 : 0.45 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: reduced ? 1 : 0.7 }}
              transition={{ duration: reduced ? 0.12 : 0.22, ease: "easeOut" }}
            >
              <CheckGlyph />
            </motion.span>
          ) : (
            <motion.span
              key="plane"
              className="absolute"
              initial={reduced ? { opacity: 0 } : { opacity: 0, x: -12, y: 12 }}
              animate={reduced ? { opacity: 1 } : { opacity: 1, x: 0, y: 0 }}
              exit={reduced ? { opacity: 0 } : { opacity: 0, x: 24, y: -24 }}
              transition={{ duration: reduced ? 0.15 : 0.3, ease: "easeOut" }}
            >
              <span
                className={cn(
                  "block",
                  !reduced &&
                    "transition-transform duration-300 ease-[cubic-bezier(0.33,0.7,0.35,1)] group-hover:rotate-[var(--spin)] group-focus-visible:rotate-[var(--spin)]",
                )}
              >
                <PlaneGlyph />
              </span>
            </motion.span>
          )}
        </AnimatePresence>
      </span>
      <span className="relative">{label}</span>
    </button>
  );
}

export default IconBadgeSendButton;

1c:T24e6,

"use client";

import { IconBadgeSendButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  lift?: number;
  spin?: number;
  confirmOnPress?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Send", accent = "#38BDF8", lift = 3, spin = 45, confirmOnPress = true }: DemoProps) {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-5 p-8">
      <IconBadgeSendButton label={label} accent={accent} lift={lift} spin={spin} confirmOnPress={confirmOnPress} />
      <IconBadgeSendButton label="Reply" accent="#FF6A1F" lift={lift} spin={spin} confirmOnPress={confirmOnPress} />
    </div>
  );
}

1d:Tfb9, 1e:Tec77,

<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    lift?: number;
    spin?: number;
    confirmOnPress?: boolean;
  }>(),
  { label: "Send", accent: "#38BDF8", lift: 3, spin: 45, confirmOnPress: true },
);

const sent = ref(false);
let timer: number | undefined;

function press() {
  if (!props.confirmOnPress) return;
  if (timer !== undefined) window.clearTimeout(timer);
  sent.value = true;
  timer = window.setTimeout(() => {
    sent.value = false;
    timer = undefined;
  }, 1000);
}

onBeforeUnmount(() => {
  if (timer !== undefined) window.clearTimeout(timer);
});
</script>

<template>
  <button
    type="button"
    class="send"
    :class="{ 'send--sent': sent }"
    :style="{ '--accent': accent, '--lift': lift + 'px', '--spin': -spin + 'deg' }"
    @click="press"
  >
    <span class="send__badge">
      <span class="send__plane" aria-hidden="true">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="1.2" stroke-linejoin="round">
          <path d="M3.3 20.6 21 12 3.3 3.4v6.2L14.2 12 3.3 14.4v6.2Z" />
        </svg>
      </span>
      <span class="send__check" aria-hidden="true">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12.6l5 5L19 6.8" />
        </svg>
      </span>
    </span>
    <span class="send__label">{{ label }}</span>
  </button>
</template>

<style scoped>
.send {
  --accent: #38bdf8;
  --lift: 3px;
  --spin: -45deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  border: 0;
  border-radius: 25px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 68%, white),
    color-mix(in srgb, var(--accent) 80%, black)
  );
  color: #fff;
  font: 500 18px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 5px 12px -3px rgb(0 0 0 / 0.38);
  transition:
    transform 300ms cubic-bezier(0.33, 0.7, 0.35, 1),
    box-shadow 300ms cubic-bezier(0.33, 0.7, 0.35, 1);
}
.send:hover,
.send:focus-visible {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 11px 22px -6px rgb(0 0 0 / 0.46);
}
.send:active {
  transform: translateY(0) scale(0.95);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 2px 5px -2px rgb(0 0 0 / 0.42);
}
.send:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.8);
  outline-offset: 2px;
}
.send__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.2);
  transition: background-color 300ms ease;
}
.send:hover .send__badge,
.send:focus-visible .send__badge {
  background: rgb(255 255 255 / 0.5);
}
.send__plane,
.send__check {
  position: absolute;
  display: grid;
  place-items: center;
}
.send__plane {
  transform: rotate(0deg);
  transition:
    transform 300ms cubic-bezier(0.33, 0.7, 0.35, 1),
    opacity 300ms ease;
}
.send:hover .send__plane,
.send:focus-visible .send__plane {
  transform: rotate(var(--spin));
}
.send--sent .send__plane {
  opacity: 0;
  transform: translate(22px, -22px) rotate(var(--spin));
}
.send__check {
  opacity: 0;
  transform: scale(0.45);
  transition:
    transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 180ms ease;
}
.send--sent .send__check {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .send,
  .send:hover,
  .send:focus-visible,
  .send:active {
    transform: none;
    transition-property: box-shadow, background-color;
  }
  .send:hover .send__plane,
  .send:focus-visible .send__plane {
    transform: none;
  }
  .send--sent .send__plane {
    transform: none;
    transition: opacity 200ms ease;
  }
}
</style>

1f:Tf80,

Nearby