first commit

src/components/ds/Modal.jsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+const WIDTHS = {
+  sm: 'sm:max-w-sm',
+  default: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+};
+
+/**
+ * Modal — the standard dialog shape: header, scrollable body, footer.
+ *
+ * Owning the scroll boundary here is the point. A dialog that lets its whole
+ * body scroll pushes the title and the confirm button off-screen on a laptop;
+ * this keeps both pinned and scrolls only the middle.
+ */
+/** @param {any} props */
+/** @param {any} props */
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon: Icon,
+  size = 'default',
+  /** Footer content. Omit for a dialog whose body carries its own actions. */
+  footer,
+  children,
+  className,
+  /** Blocks closing — use while a submit is in flight. */
+  busy = false,
+}) {
+  return (
+    <Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
+      <DialogContent
+        /* `dvh`, not `vh`: on a phone `100vh` is the *large* viewport, which
+           includes the browser chrome that is currently covering the bottom of
+           the screen — so a `90vh` dialog put its footer, and its confirm
+           button, under the address bar. */
+        className={cn('p-0 gap-0 overflow-hidden max-h-[calc(100dvh-2rem)] flex flex-col', WIDTHS[size], className)}
+        onInteractOutside={busy ? (e) => e.preventDefault() : undefined}
+        onEscapeKeyDown={busy ? (e) => e.preventDefault() : undefined}
+      >
+        <DialogHeader className="px-6 pt-6 pb-4 border-b border-border shrink-0 space-y-0">
+          <div className="flex items-start gap-3">
+            {Icon && (
+              <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
+                <Icon className="w-4.5 h-4.5" aria-hidden="true" />
+              </span>
+            )}
+            <div className="min-w-0 text-left">
+              <DialogTitle className="text-title font-heading text-ink-1">{title}</DialogTitle>
+              {description && (
+                <DialogDescription className="text-body-sm text-ink-3 mt-1">
+                  {description}
+                </DialogDescription>
+              )}
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
+
+        {footer && (
+          <DialogFooter className="px-6 py-4 border-t border-border bg-surface-subtle shrink-0">
+            {footer}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * ConfirmModal — a destructive or irreversible confirmation.
+ *
+ * Defaults to the destructive tone because that is what confirmation is almost
+ * always for, and it labels the action with the verb ("Delete") rather than
+ * "OK", so the button says what will happen.
+ */
+/** @param {any} props */
+export function ConfirmModal({
+  open,
+  onOpenChange,
+  title = 'Are you sure?',
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  tone = 'destructive',
+  icon = null,
+  busy = false,
+}) {
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description}
+      icon={icon}
+      size="sm"
+      busy={busy}
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange?.(false)} disabled={busy}>
+            {cancelLabel}
+          </Button>
+          <Button variant={tone === 'destructive' ? 'destructive' : 'default'} onClick={onConfirm} loading={busy}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      {null}
+    </Modal>
+  );
+}