@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,471 +0,0 @@
-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>
-  )
-}