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:T14f4,"use client"; import * as React from "react"; import { cn } from "@/registry/_lib/cn"; export interface SlidingFillSendPillProps extends React.ButtonHTMLAttributes { /** Fill, disc and hairline ring color. */ accent?: string; /** Uppercase label shown beside the disc. */ label?: string; /** Pill height in pixels; the disc matches it. */ height?: number; /** Seconds the fill takes to cross the pill. */ slideSeconds?: number; /** Which end holds the disc. */ capSide?: "right" | "left"; /** Force the fill across the pill, independent of hover or focus. */ heldOpen?: boolean; } /** * A full-width pill whose accent fill is parked under the end disc and pours across the whole * shape on hover or focus. Two label copies swap roles at the moving edge so the text flips * color exactly where the fill passes under it. */ export function SlidingFillSendPill({ accent = "#F5C542", label = "Send message", height = 54, slideSeconds = 0.3, capSide = "right", heldOpen = false, className, style, ...rest }: SlidingFillSendPillProps) { const capLeft = capSide === "left"; const glyph = Math.round(height * 0.34); return ( ); } export default SlidingFillSendPill;1b:T8781,

"use client";

import * as React from "react";
import { cn } from "@/registry/_lib/cn";

export interface SlidingFillSendPillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Fill, disc and hairline ring color. */
  accent?: string;
  /** Uppercase label shown beside the disc. */
  label?: string;
  /** Pill height in pixels; the disc matches it. */
  height?: number;
  /** Seconds the fill takes to cross the pill. */
  slideSeconds?: number;
  /** Which end holds the disc. */
  capSide?: "right" | "left";
  /** Force the fill across the pill, independent of hover or focus. */
  heldOpen?: boolean;
}

/**
 * A full-width pill whose accent fill is parked under the end disc and pours across the whole
 * shape on hover or focus. Two label copies swap roles at the moving edge so the text flips
 * color exactly where the fill passes under it.
 */
export function SlidingFillSendPill({
  accent = "#F5C542",
  label = "Send message",
  height = 54,
  slideSeconds = 0.3,
  capSide = "right",
  heldOpen = false,
  className,
  style,
  ...rest
}: SlidingFillSendPillProps) {
  const capLeft = capSide === "left";
  const glyph = Math.round(height * 0.34);

  return (
    <button
      type="button"
      aria-label={label}
      className={cn(
        "group relative block w-full cursor-pointer appearance-none rounded-full p-0 outline-none",
        "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--sfp-accent)]",
        className,
      )}
      style={
        {
          "--sfp-accent": accent,
          "--sfp-h": `${height}px`,
          "--sfp-slide": `${slideSeconds}s`,
          ...style,
        } as React.CSSProperties
      }
      {...rest}
    >
      <span
        className="relative flex w-full items-center overflow-hidden rounded-full bg-[#14181d]"
        style={{ height: "var(--sfp-h)" }}
      >
        {/* Label under the fill: reads while its stretch is still unfilled. */}
        <span
          aria-hidden
          className={cn(
            "absolute inset-y-0 z-[1] flex items-center text-[16px] font-semibold uppercase tracking-[0.08em] text-[var(--sfp-accent)]",
            capLeft ? "right-5" : "left-5",
          )}
        >
          {label}
        </span>

        {/* The fill: parked under the disc, slides across on hover, focus or hold. Clips its own
            content, so the over-label nested inside only shows where the fill has poured. */}
        <span
          aria-hidden
          className={cn(
            "absolute inset-0 z-[2] overflow-hidden rounded-full",
            "transition-transform duration-[var(--sfp-slide)] ease-[cubic-bezier(0.7,0,0.3,1)]",
            capLeft
              ? "translate-x-[calc(-100%_+_var(--sfp-h))]"
              : "translate-x-[calc(100%_-_var(--sfp-h))]",
            "group-hover:translate-x-0 group-focus:translate-x-0",
            "motion-reduce:translate-x-0 motion-reduce:transition-opacity motion-reduce:opacity-0",
            "motion-reduce:group-hover:opacity-100 motion-reduce:group-focus:opacity-100",
            heldOpen && "translate-x-0 motion-reduce:opacity-100",
          )}
        >
          <span aria-hidden className="absolute inset-0 rounded-full bg-[var(--sfp-accent)]" />

          {/* Label over the fill: counter-slides so it stays put on screen while the fill's own
              overflow-hidden clips it to just the poured region, keeping it readable throughout. */}
          <span
            aria-hidden
            className={cn(
              "absolute inset-0 flex items-center text-[16px] font-semibold uppercase tracking-[0.08em] text-[#14181d]",
              "transition-transform duration-[var(--sfp-slide)] ease-[cubic-bezier(0.7,0,0.3,1)]",
              "motion-reduce:translate-x-0 motion-reduce:transition-none",
              capLeft
                ? "justify-end pr-5 translate-x-[calc(100%_-_var(--sfp-h))]"
                : "justify-start pl-5 translate-x-[calc(-100%_+_var(--sfp-h))]",
              "group-hover:translate-x-0 group-focus:translate-x-0",
              heldOpen && "translate-x-0",
            )}
          >
            {label}
          </span>
        </span>

        {/* Disc: never slides, only nudges inward while pressed. */}
        <span
          aria-hidden
          className={cn(
            "absolute inset-y-0 z-[4] flex items-center justify-center rounded-full bg-[var(--sfp-accent)] text-[#14181d]",
            "transition-transform duration-150 ease-out",
            capLeft ? "left-0 group-active:translate-x-[3px]" : "right-0 group-active:-translate-x-[3px]",
          )}
          style={{ width: "var(--sfp-h)" }}
        >
          <svg
            width={glyph}
            height={glyph}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M4 12h14" />
            <path d="M12 6l6 6-6 6" />
          </svg>
        </span>

        {/* Hairline accent ring just inside the outer edge. */}
        <span
          aria-hidden
          className="pointer-events-none absolute inset-[2px] z-[5] rounded-full border border-[var(--sfp-accent)]"
        />
      </span>
    </button>
  );
}

export default SlidingFillSendPill;

1c:T537,"use client"; import * as React from "react"; import { SlidingFillSendPill } from "./index"; export interface DemoProps { accent?: string; label?: string; height?: number; slideSeconds?: number; capSide?: string; } /** Demo props mirror meta.json controls; defaults must match the control defaults. */ export default function Demo({ accent = "#F5C542", label = "Send message", height = 54, slideSeconds = 0.3, capSide = "right", }: DemoProps) { const side = capSide === "left" ? "left" : "right"; const [autoFill, setAutoFill] = React.useState(false); React.useEffect(() => { const id = window.setInterval(() => setAutoFill((on) => !on), 2600); return () => window.clearInterval(id); }, []); return (

Hover, focus or tap to pour the fill across the pill.

); }1d:T3eb3,

"use client";

import * as React from "react";
import { SlidingFillSendPill } from "./index";

export interface DemoProps {
  accent?: string;
  label?: string;
  height?: number;
  slideSeconds?: number;
  capSide?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  accent = "#F5C542",
  label = "Send message",
  height = 54,
  slideSeconds = 0.3,
  capSide = "right",
}: DemoProps) {
  const side = capSide === "left" ? "left" : "right";
  const [autoFill, setAutoFill] = React.useState(false);

  React.useEffect(() => {
    const id = window.setInterval(() => setAutoFill((on) => !on), 2600);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="flex w-full max-w-[440px] flex-col gap-4 p-6">
      <SlidingFillSendPill
        accent={accent}
        label={label}
        height={height}
        slideSeconds={slideSeconds}
        capSide={side}
      />
      <SlidingFillSendPill
        accent={accent}
        label="Reply now"
        height={Math.max(40, height - 10)}
        slideSeconds={slideSeconds}
        capSide={side}
        heldOpen={autoFill}
      />
      <p className="text-center text-xs opacity-60">
        Hover, focus or tap to pour the fill across the pill.
      </p>
    </div>
  );
}

1e:T11f2, 1f:Tf49c,

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    label?: string;
    height?: number;
    slideSeconds?: number;
    capSide?: "right" | "left";
    heldOpen?: boolean;
  }>(),
  { accent: "#F5C542", label: "Send message", height: 54, slideSeconds: 0.3, capSide: "right", heldOpen: false },
);

const glyph = computed(() => Math.round(props.height * 0.34));
</script>

<template>
  <button
    type="button"
    class="sfp"
    :class="{ 'sfp--left': capSide === 'left', 'sfp--held': heldOpen }"
    :aria-label="label"
    :style="{ '--sfp-accent': accent, '--sfp-h': height + 'px', '--sfp-slide': slideSeconds + 's' }"
  >
    <span class="sfp__shell">
      <span aria-hidden="true" class="sfp__label sfp__label--under">{{ label }}</span>
      <span aria-hidden="true" class="sfp__fill">
        <span aria-hidden="true" class="sfp__fill-color"></span>
        <span aria-hidden="true" class="sfp__label sfp__label--over">{{ label }}</span>
      </span>
      <span aria-hidden="true" class="sfp__disc">
        <svg
          :width="glyph"
          :height="glyph"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M4 12h14" />
          <path d="M12 6l6 6-6 6" />
        </svg>
      </span>
      <span aria-hidden="true" class="sfp__ring"></span>
    </span>
  </button>
</template>

<style scoped>
.sfp {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  border-radius: 9999px;
}
.sfp:focus-visible {
  outline: 2px solid var(--sfp-accent);
  outline-offset: 4px;
}
.sfp__shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--sfp-h);
  overflow: hidden;
  border-radius: 9999px;
  background: #14181d;
}
.sfp__label {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sfp__label--under {
  left: 20px;
  z-index: 1;
  color: var(--sfp-accent);
}
.sfp--left .sfp__label--under {
  left: auto;
  right: 20px;
}
.sfp__label--over {
  /* Full width so its counter-slide uses the same basis as the fill's own translate, then
     clipped by the fill's overflow: hidden to just the region the fill has poured. */
  inset: 0;
  justify-content: flex-start;
  padding-left: 20px;
  color: #14181d;
  transform: translateX(calc(-100% + var(--sfp-h)));
  transition: transform var(--sfp-slide) cubic-bezier(0.7, 0, 0.3, 1);
}
.sfp--left .sfp__label--over {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 20px;
  transform: translateX(calc(100% - var(--sfp-h)));
}
.sfp:hover .sfp__label--over,
.sfp:focus .sfp__label--over,
.sfp--held .sfp__label--over {
  transform: translateX(0);
}
.sfp__fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 9999px;
  transform: translateX(calc(100% - var(--sfp-h)));
  transition: transform var(--sfp-slide) cubic-bezier(0.7, 0, 0.3, 1);
}
.sfp__fill-color {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--sfp-accent);
}
.sfp--left .sfp__fill {
  transform: translateX(calc(-100% + var(--sfp-h)));
}
.sfp:hover .sfp__fill,
.sfp:focus .sfp__fill,
.sfp--held .sfp__fill {
  transform: translateX(0);
}
.sfp__disc {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sfp-h);
  border-radius: 9999px;
  background: var(--sfp-accent);
  color: #14181d;
  transition: transform 150ms ease;
}
.sfp--left .sfp__disc {
  right: auto;
  left: 0;
}
.sfp:active .sfp__disc {
  transform: translateX(-3px);
}
.sfp--left:active .sfp__disc {
  transform: translateX(3px);
}
.sfp__ring {
  position: absolute;
  inset: 2px;
  z-index: 5;
  border-radius: 9999px;
  border: 1px solid var(--sfp-accent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sfp__fill {
    transform: translateX(0) !important;
    transition: opacity var(--sfp-slide) linear;
    opacity: 0;
  }
  .sfp__label--over {
    transform: translateX(0) !important;
    transition: none;
  }
  .sfp:hover .sfp__fill,
  .sfp:focus .sfp__fill,
  .sfp--held .sfp__fill {
    opacity: 1;
  }
  .sfp:active .sfp__disc,
  .sfp--left:active .sfp__disc {
    transform: none;
  }
}
</style>

20:T119e,

Nearby