Shadcn Clipboard for React and Tailwind

"use client";

import {
  Clipboard as ArkClipboard,
  useClipboard as useArkClipboard,
  useClipboardContext as useArkClipboardContext,
} from "@ark-ui/react/clipboard";
import { CheckIcon, ClipboardIcon } from "lucide-react";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { inputVariants } from "@/components/ui/input";

export const useClipboard = useArkClipboard;
export const useClipboardContext = useArkClipboardContext;
export const ClipboardContext = ArkClipboard.Context;

const clipboardControlClassName = "flex flex-wrap items-center gap-2";

interface ClipboardProps
  extends React.ComponentProps<typeof ArkClipboard.Root> {
  /**
   * Class names on the root. `className` is applied to the baked control.
   */
  rootClassName?: string;
}

export const Clipboard = (props: ClipboardProps) => {
  const { rootClassName, className, children, ...rest } = props;

  return (
    <ArkClipboard.Root
      className={cn(rootClassName)}
      data-slot="clipboard"
      {...rest}
    >
      <ArkClipboard.Control
        className={cn(clipboardControlClassName, className)}
        data-slot="clipboard-control"
      >
        {children}
      </ArkClipboard.Control>
    </ArkClipboard.Root>
  );
};

export const ClipboardRootProvider = (
  props: React.ComponentProps<typeof ArkClipboard.RootProvider> & {
    /**
     * Class names on the root. `className` is applied to the baked control.
     */
    rootClassName?: string;
  }
) => {
  const { rootClassName, className, children, ...rest } = props;

  return (
    <ArkClipboard.RootProvider
      className={cn(rootClassName)}
      data-slot="clipboard"
      {...rest}
    >
      <ArkClipboard.Control
        className={cn(clipboardControlClassName, className)}
        data-slot="clipboard-control"
      >
        {children}
      </ArkClipboard.Control>
    </ArkClipboard.RootProvider>
  );
};

export const ClipboardLabel = (
  props: React.ComponentProps<typeof ArkClipboard.Label>
) => {
  const { className, ...rest } = props;

  return (
    <ArkClipboard.Label
      className={cn("w-full font-medium text-sm", className)}
      data-slot="clipboard-label"
      {...rest}
    />
  );
};

export const ClipboardTrigger = (
  props: React.ComponentProps<typeof ArkClipboard.Trigger>
) => <ArkClipboard.Trigger data-slot="clipboard-trigger" {...props} />;

export const ClipboardInput = (
  props: React.ComponentProps<typeof ArkClipboard.Input>
) => {
  const { className, ...rest } = props;

  return (
    <ArkClipboard.Input
      className={cn(inputVariants(), className)}
      data-slot="clipboard-input"
      {...rest}
    />
  );
};

export const clipboardValueVariants = tv({
  base: [
    "inline-flex items-center",
    "px-3",
    "bg-transparent dark:bg-input/30",
    "text-base md:text-sm",
    "rounded-lg border border-input shadow-sm/5",
  ],
  defaultVariants: {
    size: "md",
  },
  variants: {
    // biome-ignore assist/source/useSortedKeys: Input-matching size scale
    size: {
      xs: "h-6",
      sm: "h-7",
      md: "h-8",
      lg: "h-9",
      xl: "h-10",
    },
  },
});

interface ClipboardValueProps
  extends React.ComponentProps<typeof ArkClipboard.ValueText>,
    VariantProps<typeof clipboardValueVariants> {}

export const ClipboardValue = (props: ClipboardValueProps) => {
  const { size, className, ...rest } = props;

  return (
    <ArkClipboard.ValueText
      className={cn(clipboardValueVariants({ size }), className)}
      data-slot="clipboard-value"
      {...rest}
    />
  );
};

export const ClipboardIndicator = (
  props: React.ComponentProps<typeof ArkClipboard.Indicator>
) => {
  const {
    copied = <CheckIcon aria-hidden="true" />,
    className,
    children,
    ...rest
  } = props;

  return (
    <ArkClipboard.Indicator
      className={cn("pointer-events-none", className)}
      copied={copied}
      data-slot="clipboard-indicator"
      {...rest}
    >
      {children ?? <ClipboardIcon aria-hidden="true" />}
    </ArkClipboard.Indicator>
  );
};