@modern-admin/ui 0.1.0

package/src/components/media-preview.tsx

@@ -0,0 +1,278 @@
+// MediaPreview — opens a dialog with an image/video preview and a download
+// button. Used by the `previewMedia` property type to render HTTP(S) URLs to
+// remote photos/videos as a "Preview" button instead of raw text.
+
+import * as React from 'react'
+import { Download, Eye, ExternalLink, Loader2, AlertCircle } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+import { Button } from './button.js'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './dialog.js'
+
+export type MediaKind = 'image' | 'video' | 'audio' | 'unknown'
+
+const IMAGE_EXT = /\.(jpe?g|png|gif|webp|avif|bmp|svg|ico|heic|heif)(\?|#|$)/i
+const VIDEO_EXT = /\.(mp4|webm|mov|m4v|ogv|avi|mkv)(\?|#|$)/i
+const AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac|flac)(\?|#|$)/i
+
+export function detectMediaKind(url: string): MediaKind {
+  if (!url) return 'unknown'
+  if (IMAGE_EXT.test(url)) return 'image'
+  if (VIDEO_EXT.test(url)) return 'video'
+  if (AUDIO_EXT.test(url)) return 'audio'
+  return 'unknown'
+}
+
+/**
+ * Probes the Content-Type of `url` when extension-based detection returns
+ * 'unknown'. Runs only when `enabled` is true (dialog has been opened).
+ *
+ * Strategy:
+ *  1. HEAD request — reads Content-Type header (works for same-origin or
+ *     CORS-enabled APIs like public avatar services).
+ *  2. Image constructor fallback — handles servers that block HEAD but allow
+ *     img GET (bypasses CORS for image fetches by design).
+ *
+ * Returns [resolvedKind, isLoading].
+ */
+function useProbeMediaKind(
+  url: string,
+  kindOverride: MediaKind | undefined,
+  enabled: boolean,
+): [MediaKind, boolean] {
+  const byExt = React.useMemo(() => detectMediaKind(url), [url])
+  const [kind, setKind] = React.useState<MediaKind>(kindOverride ?? byExt)
+  const [loading, setLoading] = React.useState(false)
+
+  // Keep kind in sync when url or kindOverride changes (e.g. parent re-renders).
+  React.useEffect(() => {
+    setKind(kindOverride ?? detectMediaKind(url))
+    setLoading(false)
+  }, [url, kindOverride])
+
+  React.useEffect(() => {
+    if (!enabled) return
+    if (kindOverride) return
+    if (byExt !== 'unknown') return
+    if (!url.startsWith('http')) return
+
+    let cancelled = false
+    const controller = new AbortController()
+    setLoading(true)
+
+    const resolve = (k: MediaKind) => {
+      if (cancelled) return
+      setKind(k)
+      setLoading(false)
+    }
+
+    // Image constructor fallback — works even when HEAD is CORS-blocked.
+    const tryImage = () => {
+      const img = new window.Image()
+      img.onload = () => resolve('image')
+      img.onerror = () => resolve('unknown')
+      img.src = url
+    }
+
+    fetch(url, { method: 'HEAD', signal: controller.signal })
+      .then((res) => {
+        const ct = res.headers.get('content-type') ?? ''
+        if (ct.startsWith('image/')) resolve('image')
+        else if (ct.startsWith('video/')) resolve('video')
+        else if (ct.startsWith('audio/')) resolve('audio')
+        else tryImage()
+      })
+      .catch(() => {
+        if (!cancelled) tryImage()
+      })
+
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [url, kindOverride, byExt, enabled])
+
+  return [kind, loading]
+}
+
+export interface MediaPreviewProps {
+  /** Media URL. Should be a fully-qualified HTTP(S) URL. */
+  url: string
+  /** Optional override for the auto-detected media kind. */
+  kind?: MediaKind
+  /** Suggested file name for the download. Falls back to URL pathname. */
+  downloadName?: string
+  /** Strings (already-translated) to render in the UI. */
+  labels?: {
+    preview?: string
+    download?: string
+    downloadError?: string
+    openInNewTab?: string
+    title?: string
+    description?: string
+    cannotPreview?: string
+  }
+  /** Show the URL as secondary text next to the trigger. */
+  showUrl?: boolean
+  /** Variant of the trigger button. Defaults to 'outline'. */
+  triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link'
+  /** Size of the trigger button. Defaults to 'sm'. */
+  triggerSize?: 'default' | 'sm' | 'lg' | 'icon'
+  className?: string
+}
+
+export function MediaPreview({
+  url,
+  kind: kindProp,
+  downloadName,
+  labels,
+  showUrl = false,
+  triggerVariant = 'outline',
+  triggerSize = 'sm',
+  className,
+}: MediaPreviewProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false)
+  const [kind, kindLoading] = useProbeMediaKind(url, kindProp, open)
+  const [downloading, setDownloading] = React.useState(false)
+  const [downloadError, setDownloadError] = React.useState(false)
+
+  const previewLabel = labels?.preview ?? 'Preview'
+  const downloadLabel = labels?.download ?? 'Download'
+  const openLabel = labels?.openInNewTab ?? 'Open in new tab'
+  const titleLabel = labels?.title ?? previewLabel
+  const cannotLabel = labels?.cannotPreview ?? 'Preview is unavailable for this media type.'
+
+  const inferredName = React.useMemo(() => {
+    if (downloadName) return downloadName
+    try {
+      const u = new URL(url)
+      const last = u.pathname.split('/').filter(Boolean).pop()
+      return last || 'download'
+    } catch {
+      return 'download'
+    }
+  }, [downloadName, url])
+
+  // Force a file download via fetch → blob → blob URL. The <a download> attribute
+  // is silently ignored by browsers for cross-origin URLs, so we always use the
+  // blob approach. Falls back to window.open if fetch fails (e.g. no CORS).
+  const handleDownload = async () => {
+    setDownloadError(false)
+    setDownloading(true)
+    try {
+      const res = await fetch(url)
+      const blob = await res.blob()
+      const blobUrl = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = blobUrl
+      a.download = inferredName
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(blobUrl)
+    } catch {
+      setDownloadError(true)
+    } finally {
+      setDownloading(false)
+    }
+  }
+
+  // Stop click propagation so that events from the Dialog portal (which bubble
+  // through the React component tree, not the DOM) do not reach parent row
+  // click handlers and trigger unintended navigation (e.g. list-page TableRow
+  // opening edit on backdrop/dialog click).
+  const stopClick = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <div className={cn('inline-flex items-center gap-2', className)} onClick={stopClick}>
+      <Button
+        type="button"
+        variant={triggerVariant}
+        size={triggerSize}
+        onClick={() => setOpen(true)}
+        disabled={!url}
+      >
+        <Eye className="size-4" />
+        <span>{previewLabel}</span>
+      </Button>
+
+      {showUrl && url ? (
+        <span
+          className="max-w-[24rem] truncate text-xs text-muted-foreground"
+          title={url}
+        >
+          {url}
+        </span>
+      ) : null}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{titleLabel}</DialogTitle>
+            {labels?.description ? (
+              <DialogDescription>{labels.description}</DialogDescription>
+            ) : (
+              <DialogDescription className="break-all text-xs">{url}</DialogDescription>
+            )}
+          </DialogHeader>
+
+          <div className="flex max-h-[70vh] items-center justify-center overflow-auto rounded-md border border-border bg-muted/30 p-2">
+            {kindLoading ? (
+              <Loader2 className="size-8 animate-spin text-muted-foreground" />
+            ) : kind === 'image' ? (
+              <img
+                src={url}
+                alt={inferredName}
+                className="max-h-[68vh] w-auto max-w-full object-contain"
+              />
+            ) : kind === 'video' ? (
+              <video
+                src={url}
+                controls
+                className="max-h-[68vh] w-full max-w-full"
+              />
+            ) : kind === 'audio' ? (
+              <audio src={url} controls className="w-full" />
+            ) : (
+              <div className="p-6 text-center text-sm text-muted-foreground">
+                {cannotLabel}
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            {downloadError && (
+              <span className="flex items-center gap-1.5 text-xs text-destructive">
+                <AlertCircle className="size-3.5" />
+                {labels?.downloadError ?? 'Download failed'}
+              </span>
+            )}
+            <Button asChild variant="ghost" size="sm">
+              <a href={url} target="_blank" rel="noopener noreferrer">
+                <ExternalLink className="size-4" />
+                <span>{openLabel}</span>
+              </a>
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              disabled={downloading}
+              onClick={() => { void handleDownload() }}
+            >
+              {downloading
+                ? <Loader2 className="size-4 animate-spin" />
+                : <Download className="size-4" />}
+              <span>{downloadLabel}</span>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/multi-file-input.tsx

@@ -0,0 +1,315 @@
+/**
+ * MultiFileInput — drag-and-drop file picker that accepts multiple files at
+ * once and renders a list of currently-attached files with per-file remove
+ * controls. Mirrors `FileInput` but works on an array of values.
+ *
+ * Purely presentational — upload + cancel logic lives in the
+ * `packages/react` property renderer.
+ */
+
+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 MultiFileInputItem {
+  /** Storage key (or URL). */
+  value: string
+  /** Optional public URL used for image thumbnails. */
+  previewUrl?: string | null
+  /** Optional display name. Falls back to the last path segment of `value`. */
+  displayName?: string | null
+}
+
+/** In-progress upload — rendered as a separate row with progress / error. */
+export interface MultiFileInputPendingItem {
+  /** Stable identifier for the pending row (e.g. `crypto.randomUUID()`). */
+  id: string
+  /** Display name (typically the local file name). */
+  name: string
+  /** 0–100. `undefined` while the request is queued or finished. */
+  progress?: number
+  /** Status text — when present, replaces the progress bar. */
+  status?: 'queued' | 'uploading' | 'error'
+  /** Error message to render when `status === 'error'`. */
+  error?: string
+}
+
+export interface MultiFileInputLabels {
+  /** Dropzone aria-label. Default: "Choose files". */
+  chooseFiles?: string
+  /** Drop zone hint before the link. Default: "Drag and drop or". */
+  dragAndDrop?: string
+  /** Link text when no files selected. Default: "choose files". */
+  chooseLink?: string
+  /** Link text when files already exist. Default: "add more files". */
+  addMoreLink?: string
+  /** Upload spinner text. Default: "Uploading…". */
+  uploading?: string
+  /** Remove button aria-label. Default: "Remove file". */
+  removeFile?: string
+  /** Fallback error when pending item has no message. Default: "Upload failed". */
+  uploadFailed?: string
+  /** Dismiss error button aria-label. Default: "Dismiss". */
+  dismiss?: string
+}
+
+export interface MultiFileInputProps {
+  /** Currently attached files. */
+  items: ReadonlyArray<MultiFileInputItem>
+  /** Files currently being uploaded — rendered below the persisted list. */
+  pendingItems?: ReadonlyArray<MultiFileInputPendingItem>
+  /** HTML `accept` attribute (e.g. `'image/*'` or `'.pdf,.docx'`). */
+  accept?: string
+  /**
+   * Whether files are currently being uploaded. Shows a spinner in the
+   * dropzone. Ignored when `pendingItems` is non-empty (the per-item
+   * progress rows take over the role of the dropzone spinner).
+   */
+  uploading?: boolean
+  /** Upload error message. */
+  error?: string
+  disabled?: boolean
+  className?: string
+  /** Translated UI labels. All optional — English strings are the defaults. */
+  labels?: MultiFileInputLabels
+  /** Called when the user picks one or more new files. */
+  onFilesSelect: (files: File[]) => void
+  /** Called when the user removes the file at the given index. */
+  onRemove: (index: number) => void
+  /** Called when the user dismisses an errored pending item. */
+  onPendingDismiss?: (id: string) => void
+}
+
+const isImageUrl = (url: string | null | undefined): boolean =>
+  !!url && /\.(jpe?g|png|gif|webp|avif|svg|bmp)(\?|$)/i.test(url)
+
+export function MultiFileInput({
+  items,
+  pendingItems,
+  accept,
+  uploading = false,
+  error,
+  disabled = false,
+  className,
+  labels,
+  onFilesSelect,
+  onRemove,
+  onPendingDismiss,
+}: MultiFileInputProps): React.ReactElement {
+  const l = {
+    chooseFiles: labels?.chooseFiles ?? 'Choose files',
+    dragAndDrop: labels?.dragAndDrop ?? 'Drag and drop or',
+    chooseLink: labels?.chooseLink ?? 'choose files',
+    addMoreLink: labels?.addMoreLink ?? 'add more files',
+    uploading: labels?.uploading ?? 'Uploading…',
+    removeFile: labels?.removeFile ?? 'Remove file',
+    uploadFailed: labels?.uploadFailed ?? 'Upload failed',
+    dismiss: labels?.dismiss ?? 'Dismiss',
+  }
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const hasPending = (pendingItems?.length ?? 0) > 0
+  // The dropzone spinner is redundant when individual progress rows are
+  // already on screen — only show it for batch uploads that don't supply
+  // per-item progress.
+  const showSpinner = uploading && !hasPending
+
+  const handleFiles = (files: FileList | null): void => {
+    if (!files || files.length === 0 || disabled) return
+    onFilesSelect(Array.from(files))
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    handleFiles(e.target.files)
+    // Allow re-selecting the same file again immediately after removing it.
+    e.target.value = ''
+  }
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>): void => {
+    e.preventDefault()
+    setIsDragging(false)
+    handleFiles(e.dataTransfer.files)
+  }
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>): void => {
+    e.preventDefault()
+    if (!disabled) setIsDragging(true)
+  }
+
+  const handleDragLeave = (): void => setIsDragging(false)
+
+  return (
+    <div className={cn('w-full space-y-2', className)}>
+      {/* Drop zone / trigger */}
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={l.chooseFiles}
+        onClick={() => !disabled && inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            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 && 'cursor-not-allowed opacity-60',
+        )}
+      >
+        {showSpinner ? (
+          <>
+            <Loader2 className="size-6 animate-spin text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">{l.uploading}</span>
+          </>
+        ) : (
+          <>
+            <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">
+                {items.length > 0 ? l.addMoreLink : l.chooseLink}
+              </span>
+            </span>
+            {accept && (
+              <span className="text-xs text-muted-foreground">{accept}</span>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Current file list */}
+      {items.length > 0 && (
+        <ul className="space-y-1">
+          {items.map((item, idx) => {
+            const label = item.displayName || (item.value ? item.value.split('/').pop() : null)
+            const showImage = isImageUrl(item.previewUrl)
+            return (
+              <li
+                key={`${item.value}-${idx}`}
+                className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2"
+              >
+                {showImage && item.previewUrl ? (
+                  <img
+                    src={item.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 ?? item.value}
+                >
+                  {label ?? item.value}
+                </span>
+                {!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(idx)
+                    }}
+                  >
+                    <X className="size-4" />
+                  </Button>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      {/* In-progress uploads */}
+      {hasPending && (
+        <ul className="space-y-1">
+          {pendingItems!.map((p) => (
+            <li
+              key={p.id}
+              className={cn(
+                'flex items-center gap-3 rounded-md border bg-background px-3 py-2',
+                p.status === 'error' ? 'border-destructive/50' : 'border-border',
+              )}
+            >
+              {p.status === 'error' ? (
+                <FileText className="size-5 shrink-0 text-destructive" />
+              ) : (
+                <Loader2 className="size-5 shrink-0 animate-spin text-muted-foreground" />
+              )}
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm text-foreground" title={p.name}>
+                  {p.name}
+                </div>
+                {p.status === 'error' ? (
+                  <div className="text-xs text-destructive" role="alert">
+                    {p.error || l.uploadFailed}
+                  </div>
+                ) : (
+                  <div className="mt-1 flex 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={p.progress ?? 0}
+                    >
+                      <div
+                        className="h-full rounded-full bg-primary transition-[width] duration-150 ease-out"
+                        style={{ width: `${p.progress ?? 0}%` }}
+                      />
+                    </div>
+                    <span className="w-10 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
+                      {p.progress != null ? `${p.progress}%` : '…'}
+                    </span>
+                  </div>
+                )}
+              </div>
+              {p.status === 'error' && onPendingDismiss && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
+                  aria-label={l.dismiss}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onPendingDismiss(p.id)
+                  }}
+                >
+                  <X className="size-4" />
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {/* Error message */}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      {/* Hidden native input */}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple
+        className="sr-only"
+        onChange={handleInputChange}
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden
+      />
+    </div>
+  )
+}

package/src/components/password-input.tsx

@@ -0,0 +1,50 @@
+// Password field with a built-in show/hide toggle. Drops in anywhere a
+// regular <Input type="password" /> would — it forwards refs and accepts
+// the same props (the `type` prop is intentionally ignored).
+
+import * as React from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+
+export interface PasswordInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Accessible label for the visibility toggle button. */
+  toggleLabel?: { show: string; hide: string }
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, toggleLabel, disabled, ...props }, ref) => {
+    const [revealed, setRevealed] = React.useState(false)
+    const labels = toggleLabel ?? { show: 'Show password', hide: 'Hide password' }
+    return (
+      <div className="relative">
+        <input
+          ref={ref}
+          type={revealed ? 'text' : 'password'}
+          disabled={disabled}
+          className={cn(
+            'flex h-9 w-full rounded-md border border-input bg-background pl-3 pr-10 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            className,
+          )}
+          {...props}
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setRevealed((v) => !v)}
+          disabled={disabled}
+          aria-label={revealed ? labels.hide : labels.show}
+          aria-pressed={revealed}
+          className="absolute inset-y-0 right-0 flex w-9 cursor-pointer items-center justify-center rounded-r-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {revealed ? (
+            <EyeOff className="size-4" aria-hidden="true" />
+          ) : (
+            <Eye className="size-4" aria-hidden="true" />
+          )}
+        </button>
+      </div>
+    )
+  },
+)
+PasswordInput.displayName = 'PasswordInput'

package/src/components/popover.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '../lib/utils.js'
+
+export const Popover = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverAnchor = PopoverPrimitive.Anchor
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName