@carlonicora/nextjs-jsonapi 1.112.1 → 1.114.0

package/src/shadcnui/ui/confirm-dialog.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: React.ReactNode;
+  confirmLabel: string;
+  cancelLabel: string;
+  destructive?: boolean;
+  onConfirm: () => void | Promise<void>;
+};
+
+/**
+ * Convenience confirmation dialog. Controlled-only and trigger-less by design:
+ * callers render their own trigger Button and own the open state, which avoids
+ * every trigger-composition pitfall (no asChild, no nested <button>).
+ */
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [pending, setPending] = React.useState(false);
+
+  const handleConfirm = async () => {
+    try {
+      setPending(true);
+      await onConfirm();
+      onOpenChange(false);
+    } catch {
+      // A rejecting onConfirm keeps the dialog open; the caller owns user-facing
+      // error feedback inside onConfirm.
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={(next) => !pending && onOpenChange(next)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && <AlertDialogDescription>{description}</AlertDialogDescription>}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>
+          <Button
+            variant={destructive ? "destructive" : "default"}
+            onClick={() => void handleConfirm()}
+            disabled={pending}
+          >
+            {confirmLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export { ConfirmDialog, type ConfirmDialogProps };

package/src/shadcnui/ui/empty-state.tsx

@@ -0,0 +1,32 @@
+import type { LucideIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type EmptyStateProps = React.ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+};
+
+function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn("flex flex-col items-center justify-center gap-1.5 rounded-md p-6 text-center", className)}
+      {...props}
+    >
+      {Icon && (
+        <div className="bg-muted text-muted-foreground mb-1 inline-flex size-8 items-center justify-center rounded-md">
+          <Icon className="size-4" />
+        </div>
+      )}
+      <div className="text-sm font-medium">{title}</div>
+      {description && <div className="text-muted-foreground text-xs/relaxed">{description}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}
+
+export { EmptyState };

package/src/shadcnui/ui/spinner.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2Icon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const spinnerVariants = cva("animate-spin", {
+  variants: {
+    size: {
+      sm: "size-3.5",
+      default: "size-4",
+      lg: "size-8",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+function Spinner({
+  className,
+  size,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon> & VariantProps<typeof spinnerVariants>) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn(spinnerVariants({ size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Spinner, spinnerVariants };