Attachment

pnpm install @radix-ui/react-icons

/**
 * @description Displays a button or a component that looks like a button.
 */
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/class-names";
import { Spinner } from "@/components/ui/Spinner";

const buttonVariants = cva("button", {
  variants: {
    variant: {
      default: "button-fill",
      fill: "button-fill",
      pill: "button-pill border border-gray-6 text-gray-11 bg-gray-2 hover:bg-gray-3",
      link: "button-link",
      menu: "button-menu",
    },
    size: {
      default: "h-4",
      xs: "h-2.5",
      sm: "h-3",
      md: "h-4",
      lg: "h-5",
      xl: "h-6",
      icon: "w-3 h-3 p-0",
      "icon-md": "w-4 h-4 p-0",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
});

interface ButtonProps
  extends React.ComponentProps<"button">,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
  isDisabled?: boolean;
  isLoading?: boolean;
  isLoadingText?: string | React.ReactNode;
  mode?: VariantProps<typeof buttonVariants>["variant"];
  label?: string | React.ReactNode;
}


const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (props: ButtonProps, ref) => {
    const {
      className,
      variant,
      mode,
      size,
      asChild = false,
      isDisabled,
      isLoading,
      isLoadingText,
      children,
      label,
      ...rest
    } = props;
    const Comp = asChild ? Slot : "button";
    const disabled = isDisabled || isLoading || props.disabled;
    const effectiveVariant = variant ?? mode;

    return (
      <Comp
        data-slot="button"
        className={cn(
          buttonVariants({ variant: effectiveVariant, size, className }),
          disabled && "opacity-50 cursor-not-allowed"
        )}
        ref={ref}
        disabled={disabled}
        {...rest}
      >
        {asChild ? (
          children
        ) : (
          <>
      
            {isLoading && isLoadingText ? (
              isLoadingText
            ) : (
              <>
                {isLoading ? <Spinner /> : null}
                {label}
                {children}
              </>
            )}
          </>
        )}
      </Comp>
    );
  }
);

Button.displayName = "Button";

export { Button, buttonVariants };
export type { ButtonProps };
export default Button;

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";
/**
 * @description A status spinner. Buttons reuse it while a submit is in flight.
 */
import * as React from "react";
import { SymbolIcon } from "@radix-ui/react-icons";

import { cn } from "@/utils/class-names";

function Spinner({
  className,
  label,
  ...props
}: React.ComponentProps<"span"> & {
  label?: string;
}) {
  return (
    <span
      data-slot="spinner"
      role={label ? "status" : undefined}
      className={cn("inline-flex", className)}
      {...props}
    >
      <SymbolIcon
        className="icon animate-spin motion-reduce:animate-none"
        aria-hidden
      />
      {label ? <span className="sr-only">{label}</span> : null}
    </span>
  );
}

export { Spinner };

"use client";
/**
 * @description A file row with its upload state. Pair it with FileUpload.
 */
import {
  CheckIcon,
  Cross2Icon,
  ExclamationTriangleIcon,
  FileIcon,
} from "@radix-ui/react-icons";

import { Button } from "@/components/ui/Button";
import { Spinner } from "@/components/ui/Spinner";
import { cn } from "@/utils/class-names";

type AttachmentStatus = "idle" | "uploading" | "success" | "error";

function formatBytes(bytes: number) {
  if (bytes === 0) return "0 B";
  const sizes = ["B", "KB", "MB", "GB"];
  const index = Math.min(
    sizes.length - 1,
    Math.floor(Math.log(bytes) / Math.log(1024)),
  );
  const value = bytes / 1024 ** index;
  return `${value.toFixed(index ? 1 : 0)} ${sizes[index]}`;
}

function Attachment({
  name,
  size,
  status = "idle",
  progress,
  error,
  onRemove,
  className,
}: {
  name: string;
  size?: number;
  status?: AttachmentStatus;
  progress?: number;
  error?: string;
  onRemove?: () => void;
  className?: string;
}) {
  const statusText =
    status === "error"
      ? error || "Upload failed"
      : status === "uploading"
        ? `Uploading${typeof progress === "number" ? `, ${progress}%` : ""}`
        : status === "success"
          ? "Uploaded"
          : "Ready";

  return (
    <div
      data-slot="attachment"
      className={cn(
        "grid gap-0.5 rounded-md border border-gray-6 bg-gray-2 p-1",
        className,
      )}
    >
      <div className="flex items-center gap-1">
        <span className="inline-flex size-2.5 items-center justify-center rounded-sm bg-gray-3 text-gray-12">
          {status === "uploading" ? (
            <Spinner label="Uploading" />
          ) : status === "success" ? (
            <CheckIcon className="icon" aria-hidden />
          ) : status === "error" ? (
            <ExclamationTriangleIcon className="icon" aria-hidden />
          ) : (
            <FileIcon className="icon" aria-hidden />
          )}
        </span>
        <div className="grid min-w-0 flex-1 gap-0.5">
          <p className="truncate font-medium text-gray-12">{name}</p>
          <p className="text-sm text-gray-11">
            {typeof size === "number" ? `${formatBytes(size)} · ` : null}
            {statusText}
          </p>
        </div>
        {onRemove ? (
          <Button
            type="button"
            variant="pill"
            size="icon"
            aria-label={`Remove ${name}`}
            onClick={onRemove}
          >
            <Cross2Icon className="icon" />
          </Button>
        ) : null}
      </div>
      {status === "uploading" && typeof progress === "number" ? (
        <div
          role="progressbar"
          aria-valuenow={progress}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label={`Upload progress for ${name}`}
          className="h-0.5 overflow-hidden rounded-sm bg-gray-4"
        >
          <div
            className="h-full bg-accent-9 motion-reduce:transition-none"
            style={{ width: `${Math.max(0, Math.min(100, progress))}%` }}
          />
        </div>
      ) : null}
    </div>
  );
}

export { Attachment };
export type { AttachmentStatus };