veloria-ui 0.1.2

package/src/components/overlay/index.tsx

@@ -0,0 +1,473 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Command } from "cmdk";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+// ─── Shared overlay styles ─────────────────────────────────────────────────
+
+const overlayBase = cn(
+  "fixed inset-0 z-50 bg-black/50",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+);
+
+// ─── Dialog ────────────────────────────────────────────────────────────────
+
+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(overlayBase, className)} {...props} />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogContentVariants = cva(
+  [
+    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%]",
+    "gap-4 bg-background shadow-xl duration-200",
+    "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+    "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm rounded-xl p-6",
+        md: "max-w-lg rounded-xl p-6",
+        lg: "max-w-2xl rounded-xl p-6",
+        xl: "max-w-4xl rounded-xl p-6",
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)] rounded-xl p-6 overflow-y-auto",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+);
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+    VariantProps<typeof dialogContentVariants> & { showClose?: boolean }
+>(({ className, children, size, showClose = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogContentVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+      {showClose && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none data-[state=open]:bg-accent">
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <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 gap-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 gap-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-tight 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;
+
+// ─── Modal (alias for Dialog with preset layout) ─────────────────────────
+
+export interface ModalProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  children?: React.ReactNode;
+  showClose?: boolean;
+}
+
+const Modal = ({ open, onOpenChange, title, description, footer, size = "md", children, showClose = true }: ModalProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent size={size} showClose={showClose}>
+      {(title || description) && (
+        <DialogHeader>
+          {title && <DialogTitle>{title}</DialogTitle>}
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+      )}
+      {children}
+      {footer && <DialogFooter>{footer}</DialogFooter>}
+    </DialogContent>
+  </Dialog>
+);
+Modal.displayName = "Modal";
+
+// ─── Drawer ────────────────────────────────────────────────────────────────
+
+export interface DrawerProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: "left" | "right" | "top" | "bottom";
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  size?: "sm" | "md" | "lg" | "full";
+}
+
+const drawerSizes = {
+  left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  top: { sm: "h-48", md: "h-64", lg: "h-80", full: "h-screen" },
+  bottom: { sm: "h-48", md: "h-64", lg: "h-80", full: "h-screen" },
+};
+
+const drawerAnimations = {
+  left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+  right: "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+  top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+  bottom: "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+};
+
+const Drawer = ({ open, onOpenChange, side = "right", title, description, footer, children, size = "md" }: DrawerProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "atlas-drawer fixed z-50 gap-4 bg-background shadow-xl p-6",
+          "transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out duration-300",
+          side === "left" && `left-0 top-0 h-full ${drawerSizes.left[size]}`,
+          side === "right" && `right-0 top-0 h-full ${drawerSizes.right[size]}`,
+          side === "top" && `top-0 left-0 w-full ${drawerSizes.top[size]}`,
+          side === "bottom" && `bottom-0 left-0 w-full ${drawerSizes.bottom[size]}`,
+          drawerAnimations[side],
+          "flex flex-col"
+        )}
+      >
+        <div className="flex items-start justify-between">
+          <div>
+            {title && <h2 className="text-lg font-semibold">{title}</h2>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          <DialogPrimitive.Close className="ml-auto rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </div>
+        <div className="flex-1 overflow-y-auto py-4">{children}</div>
+        {footer && <div className="border-t border-border pt-4 mt-auto">{footer}</div>}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  </Dialog>
+);
+Drawer.displayName = "Drawer";
+
+// ─── Sheet (alias for Drawer) ─────────────────────────────────────────────
+
+const Sheet = Drawer;
+
+// ─── Popover ──────────────────────────────────────────────────────────────
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+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(
+        "atlas-popover 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;
+
+// ─── HoverCard ────────────────────────────────────────────────────────────
+
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "atlas-hover-card z-50 w-64 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}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+// ─── ContextMenu ──────────────────────────────────────────────────────────
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "atlas-context-menu z-50 min-w-[8rem] overflow-hidden rounded-md border border-border",
+        "bg-popover p-1 text-popover-foreground shadow-md",
+        "animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { inset?: boolean; destructive?: boolean }
+>(({ className, inset, destructive, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
+      "outline-none focus:bg-accent focus:text-accent-foreground gap-2",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      destructive && "text-destructive focus:text-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+// ─── CommandDialog (Command Palette + Dialog combo) ──────────────────────
+
+export interface CommandDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placeholder?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const CommandDialog = ({ open, onOpenChange, placeholder = "Search commands...", children, className }: CommandDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "atlas-command-dialog fixed left-[50%] top-[20%] z-50 w-full max-w-xl translate-x-[-50%]",
+          "overflow-hidden rounded-xl border border-border bg-popover shadow-2xl",
+          "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-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2",
+          className
+        )}
+      >
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          <div className="flex items-center border-b border-border px-3">
+            <svg className="mr-2 h-4 w-4 shrink-0 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <Command.Input placeholder={placeholder} className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
+          </div>
+          <Command.List className="max-h-80 overflow-y-auto overflow-x-hidden p-1">
+            <Command.Empty className="py-6 text-center text-sm text-muted-foreground">No results found.</Command.Empty>
+            {children}
+          </Command.List>
+        </Command>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  </Dialog>
+);
+CommandDialog.displayName = "CommandDialog";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof Command.Item>,
+  React.ComponentPropsWithoutRef<typeof Command.Item>
+>(({ className, ...props }, ref) => (
+  <Command.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm gap-2",
+      "outline-none aria-selected:bg-accent aria-selected:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = Command.Item.displayName;
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof Command.Group>,
+  React.ComponentPropsWithoutRef<typeof Command.Group>
+>(({ className, ...props }, ref) => (
+  <Command.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = Command.Group.displayName;
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof Command.Separator>,
+  React.ComponentPropsWithoutRef<typeof Command.Separator>
+>(({ className, ...props }, ref) => (
+  <Command.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = Command.Separator.displayName;
+
+// ─── Lightbox / ImageViewer ───────────────────────────────────────────────
+
+export interface LightboxProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  src: string;
+  alt?: string;
+  caption?: string;
+}
+
+const Lightbox = ({ open, onOpenChange, src, alt = "", caption }: LightboxProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "atlas-lightbox fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+          "max-w-[90vw] max-h-[90vh] overflow-hidden rounded-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",
+          "focus:outline-none"
+        )}
+      >
+        <div className="relative">
+          <img
+            src={src}
+            alt={alt}
+            className="max-w-full max-h-[85vh] object-contain rounded-lg"
+          />
+          {caption && (
+            <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-4 py-2 rounded-b-lg">
+              <p className="text-sm text-white text-center">{caption}</p>
+            </div>
+          )}
+          <DialogPrimitive.Close className="absolute top-2 right-2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70 transition-colors">
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  </Dialog>
+);
+Lightbox.displayName = "Lightbox";
+
+const ImageViewer = Lightbox;
+
+export {
+  Modal,
+  Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogClose,
+  DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription,
+  Drawer,
+  Sheet,
+  Popover, PopoverTrigger, PopoverContent,
+  HoverCard, HoverCardTrigger, HoverCardContent,
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup, ContextMenuSub, ContextMenuRadioGroup,
+  CommandDialog,
+  Lightbox,
+  ImageViewer,
+};