Inline Edit

"use client";

import { IconCheckFilled, IconCircleCheckFilled, IconLoader2, IconPencilFilled, IconXFilled } from "@tabler/icons-react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  type AnimationPlaybackControls,
} from "motion/react";
import { useEffect, useLayoutEffect, useRef, useState, type FocusEvent, type KeyboardEvent, type PointerEvent } from "react";
import { cn } from "@/lib/utils";

const SPRING = { type: "spring", duration: 0.42, bounce: 0 } as const;

// One type scale for both states, so the text never moves or resizes when the
// label turns into an input.
const SIZES = {
  sm: { text: "text-sm", height: 32, pad: 8, icon: 14, button: 28 },
  md: { text: "text-[15px]", height: 36, pad: 10, icon: 15, button: 32 },
  lg: { text: "text-2xl font-semibold tracking-[-0.02em]", height: 48, pad: 12, icon: 18, button: 36 },
} as const;