@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/copy/index.tsx

@@ -1,662 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/default/input-copy.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` directive dropped (no RSC here).
- * - `framer-motion` → `motion/react`; `@/lib/{utils,icon-context,shape-context,
- *   size-context,springs}` rewritten to `../../lib/*` (the `@/lib/font-weight`
- *   import went with the inline `fontVariationSettings`, below);
- *   `@/registry/radix/tooltip` → `../overlays/tooltip`.
- * - React 18 types: `useRef<ReturnType<typeof setTimeout>>(null)` →
- *   `useRef<ReturnType<typeof setTimeout> | null>(null)` (React 19 allows the
- *   1-arg null form, React 18's overloads don't).
- * - `CopyProps`: member docs replaced by the FF docs API-table text with the
- *   defaults spelled into the prose (modo reads defaults from the description, not
- *   from the destructuring), and `className` re-declared so it is documented.
- * - The tooltip comment's "Radix closes it on pointer down" reads "Base UI" here —
- *   this port's Tooltip is the Base UI flavor; behaviour is the same.
- * - modo item: TSDoc from the FF "InputCopy" docs page. Renamed `Copy` (item
- *   `copy`, outside the inputs group): `InputCopy*` exports → `Copy*`.
- * - Styling reads DS tokens (AGENTS.md styling): inline
- *   `fontVariationSettings` → `weight-*`; the hex focus-ring fallback →
- *   `ring-focus-ring` / `border-focus-ring`; literal colors → color tokens;
- *   `duration-80|120|160` and tier-length JS durations → `duration-<tier>` /
- *   `spring.*`.
- * - The copied state morphs (local, in the morph layer's language): the copy
- *   glyph's two sheets melt through the shared goo filter (`GooFilter`,
- *   `GOO_BLUR_RATIO`) into a disc tinted like Toast's state chip
- *   (`--status-success`, `--status-error` for a failure), behind the check or
- *   ✕, and split back into the glyph when the state times out. The glyphs
- *   crossfade over one fixed slot instead of `mode="wait"`; the button
- *   variant keeps that one glyph slot and swaps only its word.
- * - `CopyProps` is a union on `variant`: `value` is required except for the chip.
- * - Two more variants (local, additive): `"chip"` (an inline `<span>` chip with
- *   `children`, copying its text or `value`) and `"glyph"` (the bare copy glyph,
- *   no visible value, named by `aria-label`). Both keep a stable accessible name
- *   and announce the result through a `role="status"` live region. `value` is
- *   optional for the chip, the root's ref is typed `HTMLElement`, and the strings
- *   became the `labels` prop with the same English defaults.
- */
-
-import { AnimatePresence, animate, motion, useMotionValue } from 'motion/react'
-import {
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-  type Ref,
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
-import { type IconComponent, useIcon } from '../../lib/icon-context'
-import { GooFilter } from '../../lib/morph-layers'
-import { useReduceMotion } from '../../lib/reduced-motion'
-import { useShape } from '../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../lib/size-context'
-import { spring } from '../../lib/springs'
-import { useSurface } from '../../lib/surface-context'
-import { GOO_BLUR_RATIO } from '../../lib/use-morph'
-import { cn } from '../../lib/utils'
-import { Tooltip } from '../overlays/tooltip'
-
-type CopyVariant = 'icon' | 'button' | 'chip' | 'glyph'
-type CopyAlign = 'right' | 'left'
-type CopyStatus = 'idle' | 'copied' | 'error'
-
-interface Rect {
-  x: number
-  y: number
-  w: number
-  h: number
-  r: number
-}
-
-// The copied state's disc (local): lucide's copy glyph is two sheets on a
-// 24-unit grid; scaled to the 14px glyph, they melt through the goo filter
-// into one disc behind the check, and split back when the state times out.
-const GLYPH = 14
-const DISC = 20
-const UNIT = GLYPH / 24
-const sheet = (at: number): Rect => ({ x: at * UNIT, y: at * UNIT, w: 14 * UNIT, h: 14 * UNIT, r: 2 * UNIT })
-const BACK = sheet(2)
-const FRONT = sheet(8)
-const DISC_RECT: Rect = { x: (GLYPH - DISC) / 2, y: (GLYPH - DISC) / 2, w: DISC, h: DISC, r: DISC / 2 }
-const BLUR = (DISC / 2) * GOO_BLUR_RATIO
-// The goo layer: the disc plus room for the blur on every side, in glyph coordinates.
-const LAYER = { at: DISC_RECT.x - BLUR * 3, size: DISC + BLUR * 6 }
-
-// Literal per state so the class extractor sees each one. The disc's tint is
-// the layer's opacity, applied after the goo filter, which needs opaque shapes.
-const TONE_BG = { copied: 'bg-status-success', error: 'bg-status-error' }
-const TONE_TEXT = { copied: 'text-status-success', error: 'text-status-error' }
-const CHECK_STROKE: Record<'icon' | 'button', string> = {
-  icon: '[&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]',
-  button: '[&_svg]:stroke-[2]',
-}
-
-const { exit: _exit, ...enter } = spring.slow
-
-function placeSheet(el: HTMLElement | null, a: Rect, b: Rect, p: number) {
-  if (!el) return
-  const lerp = (from: number, to: number) => from + (to - from) * p
-  // The slow tier overshoots; a size never goes below zero on the way back.
-  const w = Math.max(0, lerp(a.w, b.w))
-  const h = Math.max(0, lerp(a.h, b.h))
-  el.style.left = `${lerp(a.x, b.x) - LAYER.at}px`
-  el.style.top = `${lerp(a.y, b.y) - LAYER.at}px`
-  el.style.width = `${w}px`
-  el.style.height = `${h}px`
-  el.style.borderRadius = `${Math.min(Math.max(0, lerp(a.r, b.r)), w / 2, h / 2)}px`
-}
-
-/** The goo layer behind the glyph: two sheets on one progress value, idle at 0, copied (or failed) at 1. */
-function CopyDisc({ status }: { status: CopyStatus }) {
-  const layer = useRef<HTMLSpanElement>(null)
-  const back = useRef<HTMLSpanElement>(null)
-  const front = useRef<HTMLSpanElement>(null)
-  const progress = useMotionValue(0)
-  const reduced = useReduceMotion()
-  const gooId = `copy-goo-${useId().replace(/:/g, '')}`
-  const tone = useRef<'copied' | 'error'>('copied')
-  const on = status !== 'idle'
-  if (on) tone.current = status
-
-  useLayoutEffect(() => {
-    if (!on && progress.get() === 0) return
-    const render = (p: number) => {
-      if (layer.current) layer.current.style.visibility = p > 0 ? 'visible' : 'hidden'
-      placeSheet(back.current, BACK, DISC_RECT, p)
-      placeSheet(front.current, FRONT, DISC_RECT, p)
-    }
-    const target = on ? 1 : 0
-    if (reduced) {
-      progress.jump(target)
-      return render(target)
-    }
-    const controls = animate(progress, target, { ...(on ? enter : spring.slow.exit), onUpdate: render })
-    return () => controls.stop()
-  }, [on, reduced])
-
-  return (
-    // Structural geometry: the layer box around the glyph slot, sized for the blur.
-    <span
-      aria-hidden
-      className="pointer-events-none absolute"
-      style={{ left: LAYER.at, top: LAYER.at, width: LAYER.size, height: LAYER.size }}
-    >
-      <GooFilter id={gooId} blur={BLUR} />
-      {/* The filter is the effect itself: it melts the two token-filled sheets into one. */}
-      <span ref={layer} className="invisible absolute inset-0 opacity-16" style={{ filter: `url(#${gooId})` }}>
-        <span ref={back} className={cn('absolute', TONE_BG[tone.current])} />
-        <span ref={front} className={cn('absolute', TONE_BG[tone.current])} />
-      </span>
-    </span>
-  )
-}
-
-const CHECK_PATH = 'M6 12L10 16L18 8'
-const ERROR_PATH = 'M9 9L15 15M15 9L9 15'
-
-/** The action's glyph slot: the copy icon, or the check / ✕ drawing itself over its disc. */
-function CopyGlyph({
-  status,
-  copyCount,
-  variant,
-  CopyIcon,
-}: {
-  status: CopyStatus
-  copyCount: number
-  variant: 'icon' | 'button'
-  CopyIcon: IconComponent
-}) {
-  return (
-    <span className="relative flex size-3.5 shrink-0 items-center justify-center">
-      <CopyDisc status={status} />
-      <AnimatePresence initial={false}>
-        {status === 'idle' ? (
-          <motion.span
-            key="copy"
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8, transition: spring.fast.exit }}
-            transition={spring.fast}
-            className="absolute inset-0 flex items-center justify-center"
-          >
-            <CopyIcon
-              size={14}
-              strokeWidth={1.5}
-              className="transition-[stroke-width] duration-fast group-hover:stroke-[2]"
-            />
-          </motion.span>
-        ) : (
-          <motion.span
-            key={`${status}-${copyCount}`}
-            initial={{ opacity: 0, scale: 0.6 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8, transition: spring.fast.exit }}
-            transition={spring.fast}
-            className={cn(
-              'absolute inset-0 flex items-center justify-center',
-              TONE_TEXT[status],
-              CHECK_STROKE[variant],
-            )}
-          >
-            <svg
-              width={14}
-              height={14}
-              viewBox="2 4 20 16"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <motion.path
-                d={status === 'error' ? ERROR_PATH : CHECK_PATH}
-                initial={{ pathLength: 0 }}
-                animate={{
-                  pathLength: 1,
-                  transition: { duration: spring.fast.duration, ease: 'easeOut' },
-                }}
-              />
-            </svg>
-          </motion.span>
-        )}
-      </AnimatePresence>
-    </span>
-  )
-}
-
-interface CopyLabels {
-  /** The idle tooltip, and the accessible name when there is no `label`. Defaults to `"Copy to clipboard"`. */
-  copy?: string
-  /** The copied state: tooltip, accessible name, the button variant's word and the announcement. Defaults to `"Copied"`. */
-  copied?: string
-  /** The failed state: tooltip, accessible name and the announcement. Defaults to `"Copy failed"`. */
-  failed?: string
-  /** The button variant's word at rest, and the accessible name when a `label` joins it. Defaults to `"Copy"`. */
-  word?: string
-  /** The button variant's word after a failed copy. Defaults to `"Failed"`. */
-  failedWord?: string
-}
-
-interface CopyBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** The text to copy, shown in the field. Required for every variant except `"chip"`, which copies its own text when this is left out. */
-  value?: string
-  /** What the chip shows (`variant="chip"` only): any inline content, copied as its text unless `value` is given. Defaults to `value`. */
-  children?: ReactNode
-  /** Optional label displayed above the input. */
-  label?: string
-  /** Callback fired after the value is successfully copied. */
-  onCopy?: () => void
-  /** Disables the input and copy button. Defaults to `false`. */
-  disabled?: boolean
-  /** `"icon"`: the value with a trailing copy glyph and a tooltip. `"button"`: the value with a visible Copy word. `"chip"`: an inline chip around `children` that copies its text. `"glyph"`: only the copy glyph, no visible value. Defaults to `"icon"`. */
-  variant?: CopyVariant
-  /** Position of the copy action relative to the value. Defaults to `"right"`. */
-  align?: CopyAlign
-  /** Pins the field to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, it follows the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Extra classes for the wrapper around the label and the field. */
-  className?: string
-  /** The accessible name of the `"chip"` and `"glyph"` buttons. A glyph has no visible text, so name it; a chip is named by its content and, without this, adds the copy hint. Defaults to `labels.copy`. */
-  'aria-label'?: string
-  /** The words of the control, for another language. Each key falls back to its English default. */
-  labels?: CopyLabels
-}
-
-// `value` is the one prop whose requirement depends on the variant: the field
-// shows it and the glyph has nothing else to copy, so only the chip may omit it.
-type CopyProps = CopyBaseProps &
-  ({ variant?: Exclude<CopyVariant, 'chip'>; value: string } | { variant: 'chip'; value?: string })
-
-// The chip's fill: `bg-muted` in light (a step darker than any substrate), and in
-// dark three surface steps above the substrate it sits on, so it still reads inside
-// a Card or Dialog. Literal per level for the class extractor, like SURFACE_BG.
-const DARK_CHIP_BG: Record<number, string> = {
-  1: 'dark:bg-surface-1',
-  2: 'dark:bg-surface-2',
-  3: 'dark:bg-surface-3',
-  4: 'dark:bg-surface-4',
-  5: 'dark:bg-surface-5',
-  6: 'dark:bg-surface-6',
-  7: 'dark:bg-surface-7',
-  8: 'dark:bg-surface-8',
-}
-
-const LABELS: Required<CopyLabels> = {
-  copy: 'Copy to clipboard',
-  copied: 'Copied',
-  failed: 'Copy failed',
-  word: 'Copy',
-  failedWord: 'Failed',
-}
-
-/**
- * Read-only input with a copy-to-clipboard button and animated check
- * feedback.
- *
- * The whole row is the button: click anywhere on it and the value goes to
- * the clipboard, the copy glyph's two sheets melt into a tinted disc (the
- * goo of Morph) behind a check that draws itself, and the tooltip flips to
- * "Copied" for 2 seconds; then the disc splits back into the glyph. The value is monospaced and
- * highlights on hover so it reads as one selectable token rather than a
- * text field, and the async Clipboard API falls back to an off-screen
- * textarea + `execCommand` where it is unavailable (insecure context,
- * permissions policy) — a failure animates a ✕ and says so. `variant`
- * switches between the icon-only affordance (with a tooltip) and a labelled
- * Copy button, `align` moves that action to the leading edge, and the field
- * follows the surrounding SizeProvider unless `size` pins it.
- *
- * Two variants have no field. `chip` is an inline `<span>` around `children`
- * (the root is a span, so it sits in a sentence): it copies its own text, or
- * `value`, and shows the same glyph after it. `glyph` is the copy glyph alone,
- * for a place where the value is already on screen; give it an `aria-label`.
- * Both are real buttons, keep a stable accessible name and announce "Copied"
- * (or the failure) through a live region, so a screen reader hears the result
- * of Enter or Space. `labels` translates every word.
- *
- * @example {@include ./examples.mdx}
- */
-const Copy = forwardRef<HTMLElement, CopyProps>(
-  (
-    {
-      value,
-      children,
-      label,
-      onCopy,
-      disabled,
-      variant = 'icon',
-      align = 'right',
-      size,
-      className,
-      labels,
-      'aria-label': ariaLabel,
-      ...props
-    },
-    ref,
-  ) => {
-    const CopyIcon = useIcon('copy')
-    // "copied" and "error" both occupy the same animation slot on the button
-    const [status, setStatus] = useState<CopyStatus>('idle')
-    const [copyCount, setCopyCount] = useState(0)
-    // "idle" = normal tooltip behavior, "copied" = force open, "suppressed" = force closed
-    const [tooltipState, setTooltipState] = useState<'idle' | 'copied' | 'suppressed'>('idle')
-    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    const tooltipVisibleRef = useRef(false)
-    const tooltipWasVisibleRef = useRef(false)
-    const textRef = useRef<HTMLSpanElement>(null)
-    const shape = useShape()
-    const sizeClasses = useSize(size)
-    const chipLevel = Math.min(useSurface() + 3, 8)
-    const words = { ...LABELS, ...labels }
-    const chip = variant === 'chip'
-    const glyph = variant === 'glyph'
-    const compact = sizeClasses.variant === 'compact'
-    // The row's height comes from the padded children, so the paddings step
-    // down with the ladder (py-2 → 36px total, py-1 → 28px).
-    const rowPy = compact ? 'py-1' : 'py-2'
-
-    // Associate the visible label with the button: the button's accessible
-    // name reads "Copy <label>" (its own state label + the field label).
-    const generatedId = useId()
-    const labelId = label ? `${generatedId}-label` : undefined
-    const buttonId = `${generatedId}-button`
-
-    const handlePointerDown = useCallback(() => {
-      // Capture tooltip visibility before Base UI closes it on pointer down
-      tooltipWasVisibleRef.current = tooltipVisibleRef.current
-    }, [])
-
-    // execCommand fallback for when the async Clipboard API is unavailable or
-    // denied (insecure context, permissions policy) — copies via a temporary
-    // off-screen textarea.
-    const copyViaExecCommand = useCallback((text: string) => {
-      const textarea = document.createElement('textarea')
-      textarea.value = text
-      textarea.setAttribute('readonly', '')
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      let ok = false
-      try {
-        ok = document.execCommand('copy')
-      } catch {
-        ok = false
-      }
-      document.body.removeChild(textarea)
-      return ok
-    }, [])
-
-    const handleCopy = useCallback(async () => {
-      if (disabled) return
-      // A chip without `value` copies what it shows.
-      const text = value ?? textRef.current?.textContent ?? ''
-      let ok = true
-      try {
-        await navigator.clipboard.writeText(text)
-      } catch {
-        ok = copyViaExecCommand(text)
-      }
-      setStatus(ok ? 'copied' : 'error')
-      setCopyCount(c => c + 1)
-      setTooltipState(tooltipWasVisibleRef.current ? 'copied' : 'suppressed')
-      if (ok) onCopy?.()
-      if (timeoutRef.current) clearTimeout(timeoutRef.current)
-      timeoutRef.current = setTimeout(() => {
-        setStatus('idle')
-        setTooltipState('suppressed')
-      }, 2000)
-    }, [value, disabled, onCopy, copyViaExecCommand])
-
-    const handleTooltipOpenChange = useCallback((open: boolean) => {
-      tooltipVisibleRef.current = open
-    }, [])
-
-    useEffect(() => {
-      return () => {
-        if (timeoutRef.current) clearTimeout(timeoutRef.current)
-      }
-    }, [])
-
-    const handleMouseEnter = useCallback(() => {
-      setTooltipState(prev => (prev === 'suppressed' ? 'idle' : prev))
-    }, [])
-
-    const handleMouseLeave = useCallback(() => {
-      setTooltipState(prev => (prev === 'copied' ? 'suppressed' : prev))
-    }, [])
-
-    // The chip and the glyph keep one accessible name and say the result
-    // through a live region: a changed aria-label on a focused button is not
-    // reliably read out. A new node per copy, so a second copy is announced too.
-    const announcement = (
-      <span role="status" className="sr-only">
-        {status !== 'idle' && <span key={copyCount}>{status === 'error' ? words.failed : words.copied}</span>}
-      </span>
-    )
-
-    if (chip) {
-      return (
-        <span
-          ref={ref as Ref<HTMLSpanElement>}
-          className={cn(
-            'relative inline-flex rounded-box bg-muted',
-            DARK_CHIP_BG[chipLevel],
-            disabled && 'opacity-50 pointer-events-none',
-            className,
-          )}
-          {...(props as HTMLAttributes<HTMLSpanElement>)}
-        >
-          <button
-            id={buttonId}
-            type="button"
-            onPointerDown={handlePointerDown}
-            onClick={handleCopy}
-            disabled={disabled}
-            aria-label={ariaLabel}
-            className={cn(
-              'group relative inline-flex cursor-pointer select-none items-center gap-1 rounded-box px-1 py-0.5 text-foreground outline-none',
-              'focus-visible:ring-1 focus-visible:ring-focus-ring',
-            )}
-          >
-            <span
-              aria-hidden
-              className="pointer-events-none absolute inset-0 rounded-box bg-hover opacity-0 transition-opacity duration-fast group-hover:opacity-100"
-            />
-            <span ref={textRef} className={cn('relative font-mono', compact ? 'text-caption-compact' : 'text-caption')}>
-              {children ?? value}
-            </span>
-            {!ariaLabel && <span className="sr-only">, {words.copy}</span>}
-            <span className="relative text-muted-foreground transition-colors duration-fast group-hover:text-foreground">
-              <CopyGlyph status={status} copyCount={copyCount} variant="icon" CopyIcon={CopyIcon} />
-            </span>
-          </button>
-          {announcement}
-        </span>
-      )
-    }
-
-    if (glyph) {
-      const name = ariaLabel ?? words.copy
-      return (
-        <span
-          ref={ref as Ref<HTMLSpanElement>}
-          className={cn('inline-flex', disabled && 'opacity-50 pointer-events-none', className)}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          {...(props as HTMLAttributes<HTMLSpanElement>)}
-        >
-          <Tooltip
-            content={tooltipState === 'idle' ? name : status === 'error' ? words.failed : words.copied}
-            delayDuration={500}
-            sideOffset={2}
-            forceOpen={tooltipState === 'copied' ? true : tooltipState === 'suppressed' ? false : undefined}
-            onOpenChange={handleTooltipOpenChange}
-          >
-            <button
-              id={buttonId}
-              type="button"
-              onPointerDown={handlePointerDown}
-              onClick={handleCopy}
-              disabled={disabled}
-              aria-label={name}
-              className={cn(
-                'group inline-flex shrink-0 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-colors duration-fast',
-                'hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring',
-                shape.button,
-                compact ? 'size-7' : 'size-9',
-              )}
-            >
-              <CopyGlyph status={status} copyCount={copyCount} variant="icon" CopyIcon={CopyIcon} />
-            </button>
-          </Tooltip>
-          {announcement}
-        </span>
-      )
-    }
-
-    const actionElement =
-      variant === 'button' ? (
-        <span
-          className={cn(
-            'shrink-0 flex items-center gap-1.5 px-1.5 transition-colors duration-fast',
-            rowPy,
-            sizeClasses.text,
-            'text-muted-foreground group-hover:text-foreground',
-            'weight-normal',
-          )}
-        >
-          <CopyGlyph status={status} copyCount={copyCount} variant="button" CopyIcon={CopyIcon} />
-          <span className="select-none inline-grid text-left">
-            {[words.word, words.copied, words.failedWord].map(word => (
-              <span key={word} className="col-start-1 row-start-1 invisible" aria-hidden="true">
-                {word}
-              </span>
-            ))}
-            <AnimatePresence mode="wait" initial={false}>
-              <motion.span
-                key={status}
-                className={cn('col-start-1 row-start-1', status === 'error' && 'text-destructive')}
-                initial={{ opacity: 0, scale: 0.6 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.8, transition: spring.fast.exit }}
-                transition={spring.fast}
-              >
-                {status === 'copied' ? words.copied : status === 'error' ? words.failedWord : words.word}
-              </motion.span>
-            </AnimatePresence>
-          </span>
-        </span>
-      ) : (
-        <span
-          className={cn(
-            'shrink-0 flex px-1.5 transition-colors duration-fast',
-            rowPy,
-            'text-muted-foreground group-hover:text-foreground',
-          )}
-        >
-          <CopyGlyph status={status} copyCount={copyCount} variant="icon" CopyIcon={CopyIcon} />
-        </span>
-      )
-
-    const valueElement = (
-      <span
-        className={cn(
-          'flex-1 min-w-0 text-left text-foreground font-mono select-none truncate',
-          sizeClasses.text,
-          rowPy,
-          align === 'left' ? 'pl-1' : 'pl-0',
-          'weight-normal',
-        )}
-      >
-        <mark className="bg-transparent text-foreground transition-colors duration-fast group-hover:bg-brand/20 group-hover:text-foreground">
-          {value}
-        </mark>
-      </span>
-    )
-
-    const buttonContent =
-      align === 'left' ? (
-        <>
-          {actionElement}
-          {valueElement}
-        </>
-      ) : (
-        <>
-          {valueElement}
-          {actionElement}
-        </>
-      )
-
-    const button = (
-      <button
-        id={buttonId}
-        type="button"
-        onPointerDown={handlePointerDown}
-        onClick={handleCopy}
-        disabled={disabled}
-        aria-label={
-          status === 'copied' ? words.copied : status === 'error' ? words.failed : label ? words.word : words.copy
-        }
-        aria-labelledby={label ? `${buttonId} ${labelId}` : undefined}
-        className={cn(
-          'group flex items-center w-full cursor-pointer outline-none transition-all duration-fast',
-          'focus-visible:ring-1 focus-visible:ring-focus-ring',
-          shape.input,
-        )}
-      >
-        {buttonContent}
-      </button>
-    )
-
-    return (
-      <div
-        ref={ref as Ref<HTMLDivElement>}
-        className={cn('flex flex-col gap-0.5', disabled && 'opacity-50 pointer-events-none', className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        aria-label={ariaLabel}
-        {...props}
-      >
-        {label && (
-          <span
-            id={labelId}
-            className={cn(
-              'text-muted-foreground',
-              sizeClasses.text,
-              align === 'left' ? 'pl-1' : 'pl-0',
-              'weight-normal',
-            )}
-          >
-            {label}
-          </span>
-        )}
-        {variant === 'icon' ? (
-          <Tooltip
-            content={tooltipState === 'idle' ? words.copy : status === 'error' ? words.failed : words.copied}
-            delayDuration={500}
-            sideOffset={2}
-            forceOpen={tooltipState === 'copied' ? true : tooltipState === 'suppressed' ? false : undefined}
-            onOpenChange={handleTooltipOpenChange}
-          >
-            {button}
-          </Tooltip>
-        ) : (
-          button
-        )}
-      </div>
-    )
-  },
-)
-
-Copy.displayName = 'Copy'
-
-export type { CopyAlign, CopyLabels, CopyProps, CopyVariant }
-export { Copy }
-export default Copy