@modern-admin/ui 0.1.0

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,165 @@
+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.js'
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+export 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(
+      'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+export 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(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export 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(
+      'relative flex cursor-pointer 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+export 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(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+export 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
+
+export 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
+
+export const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): React.ReactElement => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+    {...props}
+  />
+)
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

package/src/components/empty.tsx

@@ -0,0 +1,100 @@
+// shadcn-style Empty — placeholder for empty states.
+// Compose: <Empty><EmptyHeader><EmptyMedia/><EmptyTitle/><EmptyDescription/></EmptyHeader><EmptyContent>…</EmptyContent></Empty>
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils.js'
+
+export const Empty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="empty"
+      className={cn(
+        'flex w-full flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-border bg-card/40 p-8 text-center',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Empty.displayName = 'Empty'
+
+export const EmptyHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="empty-header"
+      className={cn('flex flex-col items-center gap-3 text-center', className)}
+      {...props}
+    />
+  ),
+)
+EmptyHeader.displayName = 'EmptyHeader'
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center [&>svg]:size-6',
+  {
+    variants: {
+      variant: {
+        default: 'text-muted-foreground',
+        icon: 'flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6',
+      },
+    },
+    defaultVariants: { variant: 'icon' },
+  },
+)
+
+export interface EmptyMediaProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyMediaVariants> {}
+
+export const EmptyMedia = React.forwardRef<HTMLDivElement, EmptyMediaProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="empty-media"
+      className={cn(emptyMediaVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+)
+EmptyMedia.displayName = 'EmptyMedia'
+
+export const EmptyTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    data-slot="empty-title"
+    className={cn('text-base font-semibold tracking-tight', className)}
+    {...props}
+  />
+))
+EmptyTitle.displayName = 'EmptyTitle'
+
+export const EmptyDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="empty-description"
+    className={cn('max-w-sm text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+EmptyDescription.displayName = 'EmptyDescription'
+
+export const EmptyContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="empty-content"
+      className={cn('flex flex-wrap items-center justify-center gap-2', className)}
+      {...props}
+    />
+  ),
+)
+EmptyContent.displayName = 'EmptyContent'

package/src/components/field.tsx

@@ -0,0 +1,168 @@
+// shadcn-style Field — composable form-field layout primitives.
+// Pure layout; no react-hook-form binding here. Pair with FormField from
+// `./form.js` when wiring to RHF, or use standalone for lightweight forms.
+//
+// Conventions match the canonical shadcn `field` recipe:
+//   <Field>
+//     <FieldLabel>…</FieldLabel>
+//     <Input />
+//     <FieldDescription>…</FieldDescription>
+//     <FieldError>…</FieldError>
+//   </Field>
+//
+//   <FieldGroup>…</FieldGroup>
+//   <FieldSet><FieldLegend/><FieldGroup/></FieldSet>
+
+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.js'
+import { Label } from './label.js'
+
+const fieldVariants = cva('group/field flex w-full', {
+  variants: {
+    orientation: {
+      vertical: 'flex-col gap-2',
+      horizontal: 'flex-row items-center gap-3',
+      responsive: 'flex-col gap-2 sm:flex-row sm:items-center sm:gap-3',
+    },
+  },
+  defaultVariants: { orientation: 'vertical' },
+})
+
+export interface FieldProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof fieldVariants> {
+  /** Render with a custom element via Radix Slot. */
+  asChild?: boolean
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, orientation, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+    return (
+      <Comp
+        ref={ref}
+        data-slot="field"
+        data-orientation={orientation ?? 'vertical'}
+        className={cn(fieldVariants({ orientation }), className)}
+        {...props}
+      />
+    )
+  },
+)
+Field.displayName = 'Field'
+
+export const FieldLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ className, ...props }, ref) => (
+  <Label
+    ref={ref}
+    data-slot="field-label"
+    className={cn(
+      'group-data-[invalid=true]/field:text-destructive flex items-center gap-2 text-sm font-medium leading-none',
+      className,
+    )}
+    {...props}
+  />
+))
+FieldLabel.displayName = 'FieldLabel'
+
+export const FieldDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="field-description"
+    className={cn('text-sm text-muted-foreground leading-snug', className)}
+    {...props}
+  />
+))
+FieldDescription.displayName = 'FieldDescription'
+
+export const FieldError = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement> & { errors?: ReadonlyArray<string | undefined> }
+>(({ className, children, errors, ...props }, ref) => {
+  const list = errors?.filter((e): e is string => Boolean(e))
+  const body = list && list.length > 0 ? list.join(', ') : children
+  if (!body) return null
+  return (
+    <p
+      ref={ref}
+      data-slot="field-error"
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FieldError.displayName = 'FieldError'
+
+export const FieldGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="field-group"
+      role="group"
+      className={cn('flex flex-col gap-5', className)}
+      {...props}
+    />
+  ),
+)
+FieldGroup.displayName = 'FieldGroup'
+
+export const FieldSet = React.forwardRef<HTMLFieldSetElement, React.FieldsetHTMLAttributes<HTMLFieldSetElement>>(
+  ({ className, ...props }, ref) => (
+    <fieldset
+      ref={ref}
+      data-slot="field-set"
+      className={cn('flex flex-col gap-4 rounded-lg border border-border p-4', className)}
+      {...props}
+    />
+  ),
+)
+FieldSet.displayName = 'FieldSet'
+
+export const FieldLegend = React.forwardRef<
+  HTMLLegendElement,
+  React.HTMLAttributes<HTMLLegendElement>
+>(({ className, ...props }, ref) => (
+  <legend
+    ref={ref}
+    data-slot="field-legend"
+    className={cn('px-1 text-sm font-medium leading-none', className)}
+    {...props}
+  />
+))
+FieldLegend.displayName = 'FieldLegend'
+
+export const FieldSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="field-separator"
+      role="separator"
+      aria-orientation="horizontal"
+      className={cn('h-px w-full bg-border', className)}
+      {...props}
+    />
+  ),
+)
+FieldSeparator.displayName = 'FieldSeparator'
+
+/** Wrapper for label + description + control + error stacked vertically. */
+export const FieldContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="field-content"
+      className={cn('flex min-w-0 flex-col gap-1.5', className)}
+      {...props}
+    />
+  ),
+)
+FieldContent.displayName = 'FieldContent'

package/src/components/file-input.tsx

@@ -0,0 +1,233 @@
+/**
+ * FileInput — styled file picker with optional drag-and-drop, current-file
+ * display, and a remove button. Purely presentational: upload logic lives in
+ * the `packages/react` property renderer.
+ *
+ * Mobile-first: full-width by default, tap-friendly hit areas.
+ */
+
+import * as React from 'react'
+import { Upload, X, FileText, Loader2 } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+import { Button } from './button.js'
+
+export interface FileInputLabels {
+  /** Dropzone aria-label. Default: "Choose file". */
+  chooseFile?: string
+  /** Drop zone hint before the link. Default: "Drag and drop or". */
+  dragAndDrop?: string
+  /** Link text when no file selected. Default: "choose a file". */
+  chooseAFile?: string
+  /** Upload spinner text (no filename). Default: "Uploading…". */
+  uploading?: string
+  /** Upload spinner text with filename — `{name}` is replaced. Default: "Uploading {name}…". */
+  uploadingFile?: string
+  /** Remove button aria-label. Default: "Remove file". */
+  removeFile?: string
+}
+
+export interface FileInputProps {
+  /** Current stored value (storage key or URL). Shown as the "current file". */
+  value?: string | null
+  /** Human-readable display name for the current file. Falls back to `value`. */
+  displayName?: string | null
+  /** Public URL used for image thumbnail previews. */
+  previewUrl?: string | null
+  /** HTML `accept` attribute (e.g. `'image/*'` or `'.pdf,.docx'`). */
+  accept?: string
+  /** Whether a file is currently being uploaded. Shows a spinner. */
+  uploading?: boolean
+  /** Upload progress 0–100 (overrides the spinner with a determinate bar when set). */
+  uploadProgress?: number
+  /** Local file name shown next to the progress indicator. */
+  uploadingName?: string
+  /** Upload error message. */
+  error?: string
+  disabled?: boolean
+  className?: string
+  /** Translated UI labels. All optional — English strings are the defaults. */
+  labels?: FileInputLabels
+  /** Called when the user picks a new file. */
+  onFileSelect: (file: File) => void
+  /** Called when the user removes the current file. */
+  onRemove?: () => void
+}
+
+export function FileInput({
+  value,
+  displayName,
+  previewUrl,
+  accept,
+  uploading = false,
+  uploadProgress,
+  uploadingName,
+  error,
+  disabled = false,
+  className,
+  labels,
+  onFileSelect,
+  onRemove,
+}: FileInputProps): React.ReactElement {
+  const l = {
+    chooseFile: labels?.chooseFile ?? 'Choose file',
+    dragAndDrop: labels?.dragAndDrop ?? 'Drag and drop or',
+    chooseAFile: labels?.chooseAFile ?? 'choose a file',
+    uploading: labels?.uploading ?? 'Uploading…',
+    uploadingFile: labels?.uploadingFile ?? 'Uploading {name}…',
+    removeFile: labels?.removeFile ?? 'Remove file',
+  }
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = React.useState(false)
+
+  const handleFiles = (files: FileList | null) => {
+    const first = files?.[0]
+    if (!first || disabled || uploading) return
+    onFileSelect(first)
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    handleFiles(e.target.files)
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragging(false)
+    handleFiles(e.dataTransfer.files)
+  }
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    if (!disabled && !uploading) setIsDragging(true)
+  }
+
+  const handleDragLeave = () => setIsDragging(false)
+
+  const label = displayName || (value ? value.split('/').pop() : null)
+
+  // Detect image for thumbnail preview
+  const isImage =
+    previewUrl
+      ? /\.(jpe?g|png|gif|webp|avif|svg|bmp)(\?|$)/i.test(previewUrl)
+      : false
+
+  return (
+    <div className={cn('w-full space-y-2', className)}>
+      {/* Drop zone / trigger */}
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={l.chooseFile}
+        onClick={() => !disabled && !uploading && inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && !disabled && !uploading) {
+            e.preventDefault()
+            inputRef.current?.click()
+          }
+        }}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        className={cn(
+          'flex min-h-[5rem] w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-border bg-muted/30 px-4 py-6 text-center transition-colors',
+          'hover:border-primary/50 hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          isDragging && 'border-primary bg-primary/5',
+          (disabled || uploading) && 'cursor-not-allowed opacity-60',
+        )}
+      >
+        {uploading ? (
+          <div className="flex w-full max-w-sm flex-col items-center gap-2">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-5 animate-spin" />
+              <span className="truncate" title={uploadingName ?? undefined}>
+                {uploadingName
+                  ? l.uploadingFile.replace('{name}', uploadingName)
+                  : l.uploading}
+              </span>
+            </div>
+            {uploadProgress != null && (
+              <div className="flex w-full items-center gap-2">
+                <div
+                  className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted"
+                  role="progressbar"
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={uploadProgress}
+                >
+                  <div
+                    className="h-full rounded-full bg-primary transition-[width] duration-150 ease-out"
+                    style={{ width: `${uploadProgress}%` }}
+                  />
+                </div>
+                <span className="w-10 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
+                  {uploadProgress}%
+                </span>
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <Upload className="size-6 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">
+              <span className="hidden sm:inline">{l.dragAndDrop} </span>
+              <span className="text-primary underline-offset-2 hover:underline">
+                {l.chooseAFile}
+              </span>
+            </span>
+            {accept && (
+              <span className="text-xs text-muted-foreground">{accept}</span>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Current file row */}
+      {value && !uploading && (
+        <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
+          {isImage && previewUrl ? (
+            <img
+              src={previewUrl}
+              alt={label ?? 'preview'}
+              className="size-10 shrink-0 rounded object-cover"
+            />
+          ) : (
+            <FileText className="size-5 shrink-0 text-muted-foreground" />
+          )}
+          <span className="min-w-0 flex-1 truncate text-sm text-foreground" title={label ?? value}>
+            {label ?? value}
+          </span>
+          {onRemove && !disabled && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
+              aria-label={l.removeFile}
+              onClick={(e) => {
+                e.stopPropagation()
+                onRemove()
+              }}
+            >
+              <X className="size-4" />
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      {/* Hidden native input */}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="sr-only"
+        onChange={handleInputChange}
+        disabled={disabled || uploading}
+        tabIndex={-1}
+        aria-hidden
+      />
+    </div>
+  )
+}