@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/primitives/dialog.tsx

@@ -0,0 +1,471 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from '~/components/catalyst-ui';
+import { cva, type VariantProps } from "class-variance-authority";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+const dialogContentVariants = cva(
+  "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed z-50 grid w-full border shadow-lg duration-200",
+  {
+    variants: {
+      variant: {
+        default: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+        topLeft: "top-0 left-0 m-6 max-w-[425px] translate-x-0 translate-y-0 gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        top: "top-0 left-[50%] mt-6 translate-x-[-50%] translate-y-0 max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-[425px]",
+        topRight: "top-0 right-0 left-auto m-6 max-w-[425px] translate-x-0 translate-y-0 gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        middleLeft: "top-[50%] left-0 ml-6 max-w-[425px] translate-x-0 translate-y-[-50%] gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        middleRight: "top-[50%] right-0 left-auto mr-6 max-w-[425px] translate-x-0 translate-y-[-50%] gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        bottomLeft: "top-auto bottom-0 left-0 m-6 max-w-[425px] translate-x-0 translate-y-0 gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        bottom: "top-auto bottom-0 left-[50%] mb-6 translate-x-[-50%] translate-y-0 max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-[425px]",
+        bottomRight: "top-auto right-0 bottom-0 left-auto m-6 max-w-[425px] translate-x-0 translate-y-0 gap-4 rounded-lg p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-sm:max-w-[calc(100%-3rem)]",
+        slideTop: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-20 data-[state=open]:duration-600 sm:max-w-[425px]",
+        slideRight: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-left-20 data-[state=open]:duration-600 sm:max-w-[425px]",
+        zoomIn: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 data-[state=open]:zoom-in-0 data-[state=open]:duration-600 sm:max-w-[425px]",
+        fullscreen: "mb-8 h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 p-0 top-[50%] left-[50%]",
+        scrollable: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] max-h-[min(600px,80vh)] flex-col gap-0 p-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-md",
+        stickyHeader: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] max-h-[min(600px,80vh)] flex-col gap-0 p-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-md",
+        stickyFooter: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] max-h-[min(600px,80vh)] flex-col gap-0 p-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+type DialogContextType = {
+  variant?: VariantProps<typeof dialogContentVariants>["variant"]
+}
+
+const DialogContext = React.createContext<DialogContextType>({
+  variant: "default",
+})
+
+export const useDialogContext = () => {
+  const context = React.useContext(DialogContext)
+  if (!context) {
+    throw new Error("Dialog components must be used within Dialog")
+  }
+  return context
+}
+
+function Dialog({
+  variant,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root> & VariantProps<typeof dialogContentVariants>) {
+  return (
+    <DialogContext.Provider value={{ variant }}>
+      <DialogPrimitive.Root data-slot="dialog" {...props} />
+    </DialogContext.Provider>
+  )
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  const { variant } = useDialogContext()
+  
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(dialogContentVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <X />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  dialogContentVariants,
+}
+
+
+export function DialogDemo555() {
+  return (
+    <div className="flex flex-col gap-4 p-8">
+      <h1 className="text-2xl font-bold mb-6">Simplified Dialog Demo</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Basic Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <Info className="h-4 w-4 mr-2" />
+              Basic Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="md">
+            <DialogHeader>
+              <DialogTitle>Basic Dialog</DialogTitle>
+              <DialogDescription>
+                This is a simple dialog example with basic content.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                <p>This is the dialog content area.</p>
+                <p>You can put any content here - forms, lists, images, etc.</p>
+                <div className="bg-gray-100 p-4 rounded">
+                  <h3 className="font-medium mb-2">Example Content</h3>
+                  <p className="text-sm text-gray-600">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </p>
+                </div>
+              </div>
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <DialogClose asChild>
+                <Button>Got it</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Confirmation Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="destructive" className="w-full">
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete Item
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="sm">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2 text-red-600">
+                <AlertTriangle className="h-5 w-5" />
+                Confirm Deletion
+              </DialogTitle>
+              <DialogDescription>
+                Are you sure you want to delete this item? This action cannot be undone.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <DialogClose asChild>
+                <Button variant="destructive">Delete</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Success Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <CheckCircle className="h-4 w-4 mr-2" />
+              Success Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="sm">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2 text-green-600">
+                <CheckCircle className="h-5 w-5" />
+                Success!
+              </DialogTitle>
+              <DialogDescription>
+                Your action has been completed successfully.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button className="w-full">Continue</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Form Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <User className="h-4 w-4 mr-2" />
+              Edit Profile
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="lg">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <User className="h-5 w-5" />
+                Edit Profile
+              </DialogTitle>
+              <DialogDescription>
+                Update your profile information below.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <form className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="firstName">First Name</Label>
+                    <Input id="firstName" placeholder="John" />
+                  </div>
+                  <div>
+                    <Label htmlFor="lastName">Last Name</Label>
+                    <Input id="lastName" placeholder="Doe" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="email">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="phone">Phone</Label>
+                  <div className="relative">
+                    <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <Input id="phone" placeholder="+1 (555) 000-0000" className="pl-10" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="bio">Bio</Label>
+                  <Textarea id="bio" placeholder="Tell us about yourself..." rows={3} />
+                </div>
+              </form>
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <DialogClose asChild>
+                <Button>Save Changes</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Large Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Large Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="xl">
+            <DialogHeader>
+              <DialogTitle>Large Dialog Example</DialogTitle>
+              <DialogDescription>
+                This is a larger dialog for more complex content.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-medium mb-3">Section 1</h3>
+                  <p className="text-sm text-gray-600 mb-4">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
+                    tempor incididunt ut labore et dolore magna aliqua.
+                  </p>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="bg-blue-50 p-4 rounded">
+                      <h4 className="font-medium mb-2">Feature A</h4>
+                      <p className="text-sm">Description of feature A</p>
+                    </div>
+                    <div className="bg-green-50 p-4 rounded">
+                      <h4 className="font-medium mb-2">Feature B</h4>
+                      <p className="text-sm">Description of feature B</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div>
+                  <h3 className="text-lg font-medium mb-3">Section 2</h3>
+                  <p className="text-sm text-gray-600">
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
+                    nisi ut aliquip ex ea commodo consequat.
+                  </p>
+                </div>
+              </div>
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <DialogClose asChild>
+                <Button>Confirm</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Small Dialog */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Small Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent size="sm">
+            <DialogHeader>
+              <DialogTitle>Quick Action</DialogTitle>
+              <DialogDescription>
+                This is a compact dialog for simple actions.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <p className="text-sm">Are you sure you want to continue?</p>
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline" size="sm">No</Button>
+              </DialogClose>
+              <DialogClose asChild>
+                <Button size="sm">Yes</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Usage Example Code */}
+      <div className="mt-8 p-4 bg-gray-50 rounded-lg">
+        <h2 className="text-lg font-semibold mb-2">Simplified Dialog Usage</h2>
+        <pre className="text-sm overflow-x-auto">
+{`<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent size="md">
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>Dialog description</DialogDescription>
+    </DialogHeader>
+    <DialogBody>
+      {/* Your content here */}
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <DialogClose asChild>
+        <Button>Confirm</Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`}
+        </pre>
+      </div>
+    </div>
+  )
+}