@kinetixui/ui 0.1.0

package/src/components/dialog.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/drawer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../lib/utils";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-foreground/40", className)} {...props} />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background font-sans",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const contentCls =
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+const itemCls =
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn(contentCls, className)} {...props} />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "pl-8", className)} {...props} />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "pl-8", className)} checked={checked} {...props}>
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "pl-8", className)} {...props}>
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="size-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(itemCls, "data-[state=open]:bg-accent", inset && "pl-8", className)}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent ref={ref} className={cn(contentCls, className)} {...props} />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/components/fab.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Fab — a floating action button. Circular by default; pass a text child
+ * alongside the icon to render the extended pill form (`extended`).
+ */
+const fabVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2 rounded-full font-sans font-medium",
+    "shadow-lg outline-none transition-colors",
+    "focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        Primary: "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700]",
+        Secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50]",
+      },
+      size: {
+        default: "size-14 [&_svg]:size-6",
+        sm: "size-11 [&_svg]:size-5",
+      },
+      extended: {
+        true: "w-auto px-5",
+        false: "",
+      },
+    },
+    defaultVariants: { variant: "Primary", size: "default", extended: false },
+  },
+);
+
+export interface FabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof fabVariants> {
+  asChild?: boolean;
+}
+
+const Fab = React.forwardRef<HTMLButtonElement, FabProps>(
+  ({ className, variant, size, extended, asChild = false, ...props }, ref) => {
+    const Comp: React.ElementType = asChild ? Slot : "button";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="fab"
+        className={cn(fabVariants({ variant, size, extended }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Fab.displayName = "Fab";
+
+export { Fab, fabVariants };

package/src/components/field.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+/**
+ * Field — the label + control + description + feedback composition, matching the
+ * KinetixUI design source's input anatomy (label above, helper / feedback below,
+ * label & message colour tracking the invalid state). Framework-agnostic: for
+ * React Hook Form, use `Form` / `FormField` instead.
+ *
+ * <Field invalid={!!error}>
+ *   <FieldLabel>Email</FieldLabel>
+ *   <FieldControl><Input type="email" /></FieldControl>
+ *   <FieldDescription>We'll never share it.</FieldDescription>
+ *   {error && <FieldMessage intent="error">{error}</FieldMessage>}
+ * </Field>
+ */
+
+type FieldContextValue = { id: string; descriptionId: string; messageId: string; invalid: boolean };
+const FieldContext = React.createContext<FieldContextValue | null>(null);
+
+function useField() {
+  const ctx = React.useContext(FieldContext);
+  if (!ctx) throw new Error("Field parts must be used within <Field>");
+  return ctx;
+}
+
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  invalid?: boolean;
+}
+
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, invalid = false, ...props }, ref) => {
+    const id = React.useId();
+    const value = React.useMemo<FieldContextValue>(
+      () => ({ id: `${id}-control`, descriptionId: `${id}-description`, messageId: `${id}-message`, invalid }),
+      [id, invalid],
+    );
+    return (
+      <FieldContext.Provider value={value}>
+        <div ref={ref} data-invalid={invalid || undefined} className={cn("grid gap-1.5", className)} {...props} />
+      </FieldContext.Provider>
+    );
+  },
+);
+Field.displayName = "Field";
+
+const FieldLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ className, ...props }, ref) => {
+  const { id, invalid } = useField();
+  return <Label ref={ref} htmlFor={id} className={cn(invalid && "text-destructive", className)} {...props} />;
+});
+FieldLabel.displayName = "FieldLabel";
+
+/** wraps a single form control (Input, Textarea, Select…) and wires a11y attrs */
+const FieldControl = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { id, descriptionId, messageId, invalid } = useField();
+    return (
+      <Slot
+        ref={ref}
+        id={id}
+        aria-invalid={invalid || undefined}
+        aria-describedby={`${descriptionId} ${messageId}`}
+        {...props}
+      />
+    );
+  },
+);
+FieldControl.displayName = "FieldControl";
+
+const FieldDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { descriptionId } = useField();
+    return <p ref={ref} id={descriptionId} className={cn("text-body-sm text-muted-foreground", className)} {...props} />;
+  },
+);
+FieldDescription.displayName = "FieldDescription";
+
+const messageVariants = cva("flex items-center gap-1.5 text-body-sm [&>svg]:size-3.5 [&>svg]:shrink-0", {
+  variants: {
+    intent: {
+      error: "text-destructive",
+      warning: "text-warning",
+      success: "text-success",
+      info: "text-info",
+    },
+  },
+  defaultVariants: { intent: "error" },
+});
+
+const INTENT_ICON = {
+  error: CircleAlert,
+  warning: TriangleAlert,
+  success: CircleCheck,
+  info: Info,
+} as const;
+
+interface FieldMessageProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof messageVariants> {
+  /** hide the leading intent icon */
+  hideIcon?: boolean;
+}
+
+const FieldMessage = React.forwardRef<HTMLParagraphElement, FieldMessageProps>(
+  ({ className, intent = "error", hideIcon, children, ...props }, ref) => {
+    const { messageId } = useField();
+    const Icon = INTENT_ICON[intent ?? "error"];
+    if (!children) return null;
+    return (
+      <p ref={ref} id={messageId} className={cn(messageVariants({ intent }), className)} {...props}>
+        {!hideIcon && <Icon />}
+        <span>{children}</span>
+      </p>
+    );
+  },
+);
+FieldMessage.displayName = "FieldMessage";
+
+export { Field, FieldLabel, FieldControl, FieldDescription, FieldMessage, messageVariants };

package/src/components/file-upload.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as React from "react";
+import { File, Loader2, TriangleAlert, Upload, X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+/**
+ * FileUpload — a drag-and-drop zone plus file list, single or multiple.
+ * Upload logic (network, storage) is the consumer's — this component is
+ * presentational: it reports picked files via `onFilesSelected` and renders
+ * whatever `files` list you hand back, each carrying its own status.
+ */
+export interface UploadFile {
+  id: string;
+  name: string;
+  size?: number;
+  status?: "loading" | "uploaded" | "error";
+  progress?: number;
+  error?: string;
+}
+
+function formatBytes(bytes?: number) {
+  if (!bytes) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let v = bytes;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v.toFixed(v < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
+}
+
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop"> {
+  multiple?: boolean;
+  accept?: string;
+  disabled?: boolean;
+  helperText?: React.ReactNode;
+  buttonLabel?: React.ReactNode;
+  files?: UploadFile[];
+  onFilesSelected?: (files: File[]) => void;
+  onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+}
+
+const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    { className, multiple, accept, disabled, helperText, buttonLabel = "Browse files", files = [], onFilesSelected, onRemove, onRetry, ...props },
+    ref,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [dragging, setDragging] = React.useState(false);
+
+    const pick = (list: FileList | null) => {
+      if (!list || !list.length) return;
+      onFilesSelected?.(Array.from(list));
+    };
+
+    return (
+      <div ref={ref} className={cn("flex w-full flex-col gap-3 font-sans", className)} {...props}>
+        <div
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-disabled={disabled}
+          onClick={() => !disabled && inputRef.current?.click()}
+          onKeyDown={(e) => {
+            if (!disabled && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              inputRef.current?.click();
+            }
+          }}
+          onDragOver={(e) => {
+            e.preventDefault();
+            if (!disabled) setDragging(true);
+          }}
+          onDragLeave={() => setDragging(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragging(false);
+            if (!disabled) pick(e.dataTransfer.files);
+          }}
+          className={cn(
+            "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center outline-none transition-colors",
+            !disabled && "cursor-pointer hover:bg-accent/50 focus-visible:shadow-focus",
+            dragging && "border-primary bg-accent",
+            disabled && "pointer-events-none opacity-50",
+          )}
+        >
+          <Upload className="size-6 text-muted-foreground" aria-hidden />
+          <p className="text-body-sm text-muted-foreground">Drag &amp; drop {multiple ? "files" : "a file"} here, or</p>
+          <Button
+            type="button"
+            variant="Outline"
+            size="sm"
+            disabled={disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              inputRef.current?.click();
+            }}
+          >
+            {buttonLabel}
+          </Button>
+          {helperText && <p className="text-body-sm text-muted-foreground">{helperText}</p>}
+          <input
+            ref={inputRef}
+            type="file"
+            multiple={multiple}
+            accept={accept}
+            disabled={disabled}
+            className="sr-only"
+            onChange={(e) => {
+              pick(e.target.files);
+              e.target.value = "";
+            }}
+          />
+        </div>
+
+        {files.length > 0 && (
+          <ul className="flex flex-col gap-2">
+            {files.map((f) => (
+              <FileUploadItem key={f.id} file={f} onRemove={onRemove} onRetry={onRetry} />
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  },
+);
+FileUpload.displayName = "FileUpload";
+
+export interface FileUploadItemProps {
+  file: UploadFile;
+  onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+}
+
+function FileUploadItem({ file, onRemove, onRetry }: FileUploadItemProps) {
+  const isError = file.status === "error";
+  const isLoading = file.status === "loading";
+  return (
+    <li className={cn("flex items-center gap-2.5 rounded-md border p-2.5 text-body-sm", isError ? "border-destructive bg-destructive/5" : "border-input")}>
+      {isLoading ? (
+        <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" aria-hidden />
+      ) : isError ? (
+        <TriangleAlert className="size-4 shrink-0 text-destructive" aria-hidden />
+      ) : (
+        <File className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+      )}
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-foreground">{file.name}</p>
+        {isError && file.error ? <p className="text-destructive">{file.error}</p> : <p className="text-muted-foreground">{formatBytes(file.size)}</p>}
+        {isLoading && typeof file.progress === "number" && (
+          <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
+            <div className="h-full bg-primary transition-[width]" style={{ width: `${Math.max(0, Math.min(100, file.progress))}%` }} />
+          </div>
+        )}
+      </div>
+      {isError && onRetry && (
+        <button
+          type="button"
+          onClick={() => onRetry(file.id)}
+          className="shrink-0 text-label-md font-medium text-primary underline-offset-2 outline-none hover:underline focus-visible:underline"
+        >
+          Retry
+        </button>
+      )}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={() => onRemove(file.id)}
+          aria-label={`Remove ${file.name}`}
+          className="shrink-0 rounded-[2px] p-0.5 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-current"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </li>
+  );
+}
+FileUploadItem.displayName = "FileUploadItem";
+
+export { FileUpload, FileUploadItem, formatBytes };