Add Slide Over component with examples and documentation

apps/web/config/docs.ts

@@ -200,6 +200,11 @@ export const docsConfig: DocsConfig = {
                href: "/docs/components/alert-dialog",
                items: [],
             },
+            {
+               title: "Slide Over",
+               href: "/docs/components/slide-over",
+               items: [],
+            },
             {
                title: "Animated List",
                href: "/docs/components/animated-list",

apps/web/content/docs/components/slide-over.mdx

@@ -0,0 +1,94 @@
+---
+title: Slide Over
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+---
+
+<ComponentPreview
+  name="slide-over-demo"
+  description="A sliding panel for editing or displaying extra details."
+  styleSwitch={true}
+  button="copy"
+  dots={false}
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx nyxb@latest add slide-over
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+ @radix-ui/react-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="slide-over" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  SlideOver,
+  SlideOverContent,
+  SlideOverDescription,
+  SlideOverHeader,
+  SlideOverTitle,
+  SlideOverTrigger,
+} from "~/components/ui/slide-over"
+```
+
+```tsx
+<SlideOver>
+  <SlideOverTrigger>Open</SlideOverTrigger>
+  <SlideOverContent>
+    <SlideOverHeader>
+      <SlideOverTitle>Are you absolutely sure?</SlideOverTitle>
+      <SlideOverDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </SlideOverDescription>
+    </SlideOverHeader>
+  </SlideOverContent>
+</SlideOver>
+```
+
+## Examples
+
+### Custom close button
+
+<ComponentPreview
+   name="slide-over-close-button"
+   styleSwitch={true}
+   button="copy"
+   dots={false}
+ />

apps/web/public/r/index.json

@@ -496,6 +496,19 @@
       }
     ]
   },
+  {
+    "name": "slide-over",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/slide-over.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
   {
     "name": "dock",
     "type": "registry:ui",

apps/web/registry/default/examples/slide-over-close-button.tsx

@@ -0,0 +1,56 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "~/registry/default/ui/button"
+import {
+   SlideOver,
+   SlideOverClose,
+   SlideOverContent,
+   SlideOverDescription,
+   SlideOverFooter,
+   SlideOverHeader,
+   SlideOverTitle,
+   SlideOverTrigger,
+} from "~/registry/default/ui/slide-over"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function SlideOverCloseButton() {
+   return (
+      <SlideOver>
+         <SlideOverTrigger asChild>
+            <Button variant="outline">Share</Button>
+         </SlideOverTrigger>
+         <SlideOverContent className="sm:max-w-md">
+            <SlideOverHeader>
+               <SlideOverTitle>Share link</SlideOverTitle>
+               <SlideOverDescription>
+                  Anyone who has this link will be able to view this.
+               </SlideOverDescription>
+            </SlideOverHeader>
+            <div className="flex items-center space-x-2">
+               <div className="grid flex-1 gap-2">
+                  <Label htmlFor="link" className="sr-only">
+                     Link
+                  </Label>
+                  <Input
+                     id="link"
+                     defaultValue="https://nyxbui.design/docs/installation"
+                     readOnly
+                  />
+               </div>
+               <Button type="submit" size="sm" className="px-3">
+                  <span className="sr-only">Copy</span>
+                  <Copy className="size-4" />
+               </Button>
+            </div>
+            <SlideOverFooter className="sm:justify-start">
+               <SlideOverClose asChild>
+                  <Button type="button" variant="secondary">
+                     Close
+                  </Button>
+               </SlideOverClose>
+            </SlideOverFooter>
+         </SlideOverContent>
+      </SlideOver>
+   )
+}

apps/web/registry/default/examples/slide-over-demo.tsx

@@ -0,0 +1,56 @@
+import { Button } from "~/registry/default/ui/button"
+import {
+   SlideOver,
+   SlideOverContent,
+   SlideOverDescription,
+   SlideOverFooter,
+   SlideOverHeader,
+   SlideOverTitle,
+   SlideOverTrigger,
+} from "~/registry/default/ui/slide-over"
+import { Input } from "~/registry/default/ui/input"
+import { Label } from "~/registry/default/ui/label"
+
+export default function SlideOverDemo() {
+   return (
+      <SlideOver>
+         <SlideOverTrigger asChild>
+            <Button variant="outline">Edit Profile</Button>
+         </SlideOverTrigger>
+         <SlideOverContent className="sm:max-w-[425px]">
+            <SlideOverHeader>
+               <SlideOverTitle>Edit profile</SlideOverTitle>
+               <SlideOverDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+               </SlideOverDescription>
+            </SlideOverHeader>
+            <div className="grid gap-4 py-4">
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                     Name
+                  </Label>
+                  <Input
+                     id="name"
+                     defaultValue="Pedro Duarte"
+                     className="col-span-3"
+                  />
+               </div>
+               <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="username" className="text-right">
+                     Username
+                  </Label>
+                  <Input
+                     id="username"
+                     defaultValue="~peduarte"
+                     className="col-span-3"
+                  />
+               </div>
+            </div>
+            <SlideOverFooter>
+               <Button type="submit">Save changes</Button>
+            </SlideOverFooter>
+         </SlideOverContent>
+      </SlideOver>
+   )
+}

apps/web/registry/default/ui/slide-over.tsx

@@ -0,0 +1,140 @@
+import {ComponentPropsWithoutRef, forwardRef, HTMLAttributes} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {X} from "lucide-react";
+import * as React from "react";
+import {ny} from "~/lib/utils";
+
+const SlideOver = DialogPrimitive.Root;
+
+const SlideOverTrigger = DialogPrimitive.Trigger;
+
+const SlideOverPortal = DialogPrimitive.Portal;
+
+const SlideOverOverlay = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={ny(
+      '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/80',
+      className,
+    )}
+    {...props}
+  />
+));
+SlideOverOverlay.displayName = 'SlideOverOverlay';
+
+const SlideOverContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <SlideOverPortal>
+    <SlideOverOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={ny(
+        'bg-background 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]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 fixed right-0 top-0 bottom-0 z-50 w-full max-w-[98%] lg:max-w-md border border-r-0 shadow-lg duration-200 sm:rounded-l-lg flex',
+        className,
+      )}
+      {...props}
+    >
+      <SlideOverClose/>
+
+      <div className="p-6 flex-1 flex flex-col gap-4 overflow-y-auto">
+        {children}
+      </div>
+    </DialogPrimitive.Content>
+  </SlideOverPortal>
+));
+SlideOverContent.displayName = 'SlideOverContent';
+
+const SlideOverClose = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Close
+    ref={ref}
+    className={ny(
+      'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 lg:right-[unset] lg:-left-8 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none',
+      className,
+    )}
+    {...props}
+  >
+    <X className="size-4" />
+    <span className="sr-only">Close</span>
+  </DialogPrimitive.Close>
+));
+SlideOverClose.displayName = 'SlideOverClose';
+
+function SlideOverHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={ny(
+        'flex flex-col space-y-1.5 text-center sm:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SlideOverHeader.displayName = 'SlideOverHeader';
+
+function SlideOverFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={ny(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+SlideOverFooter.displayName = 'SlideOverFooter';
+
+const SlideOverTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={ny(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+SlideOverTitle.displayName = 'SlideOverTitle';
+
+const SlideOverDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={ny('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+SlideOverDescription.displayName = 'SlideOverDescription';
+
+export {
+  SlideOver,
+  SlideOverTrigger,
+  SlideOverPortal,
+  SlideOverClose,
+  SlideOverOverlay,
+  SlideOverContent,
+  SlideOverHeader,
+  SlideOverFooter,
+  SlideOverTitle,
+  SlideOverDescription,
+}