Surface

1import { type ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}
7 
8/** Paper/ink floating panel — menus, popovers, select dropdowns. */
9export function floatingSurfaceClasses(...extra: string[]) {
10  return cn(
11    "rounded-md border border-border-strong bg-popover text-popover-foreground shadow-none outline-hidden duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
12    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
13    extra,
14  );
15}
16 
17/** Modal / dialog panel on paper. */
18export function modalSurfaceClasses(...extra: string[]) {
19  return cn(
20    "rounded-md border border-border bg-popover text-popover-foreground shadow-none outline-none duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
21    extra,
22  );
23}
24 
25/** Ink/56 focus ring. Pair with `outline-none` on the control. */
26export const focusRingClasses =
27  "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring";