@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/data/overlay-data.tsx

@@ -0,0 +1,4136 @@
+// @dev app/components/catalyst-ui/overlays/expandable-screen.tsx:6
+export const OverlayData = [
+    {
+        name: "Animated Modal",
+        value: "animated-modal",
+        importPath: "~/components/catalyst-ui/overlays/animated-modal",
+        multiImport: "AnimatedModal, AnimatedModalBody, AnimatedModalContent, AnimatedModalFooter, AnimatedModalTrigger, AnimatedModalCloseButton, AnimatedModalSuccessButton, useModal",
+        basicusage: `
+<AnimatedModal>
+  <AnimatedModalTrigger>
+    Open Modal
+  </AnimatedModalTrigger>
+  <AnimatedModalBody>
+    <AnimatedModalContent>
+      Modal content here
+    </AnimatedModalContent>
+    <AnimatedModalFooter>
+      <AnimatedModalCloseButton>
+        Cancel
+      </AnimatedModalCloseButton>
+    </AnimatedModalFooter>
+  </AnimatedModalBody>
+</AnimatedModal>
+
+<AnimatedModal>
+  <AnimatedModalTrigger className="custom-class">
+    Open Modal
+  </AnimatedModalTrigger>
+  <AnimatedModalBody className="custom-body-class">
+    <AnimatedModalContent className="custom-content-class">
+      <h3>Modal Title</h3>
+      <p>Modal content goes here.</p>
+    </AnimatedModalContent>
+    <AnimatedModalFooter className="custom-footer-class">
+      <AnimatedModalCloseButton className="custom-close-class">
+        Cancel
+      </AnimatedModalCloseButton>
+      <AnimatedModalSuccessButton 
+        onClick={() => console.log('Success')}
+        className="custom-success-class"
+      >
+        Confirm
+      </AnimatedModalSuccessButton>
+    </AnimatedModalFooter>
+  </AnimatedModalBody>
+</AnimatedModal>`,
+        path: "/components/catalyst-ui/overlays/animated-modal.tsx",
+        source: null,
+        usagePath: null,
+        usage: `
+export function AnimatedModalDemo() {
+    const handleSuccess = () => {
+        console.log("Success action performed!");
+    };
+
+    return (
+        <div className="space-y-8 p-6 max-w-2xl mx-auto">
+            <div>
+                <h2 className="text-2xl font-bold mb-4">Basic Animated Modal</h2>
+                <AnimatedModal>
+                    <AnimatedModalTrigger>
+                        Open Basic Modal
+                    </AnimatedModalTrigger>
+                    <AnimatedModalBody>
+                        <AnimatedModalContent>
+                            <h3 className="text-lg font-semibold mb-2">Basic Modal Title</h3>
+                            <p className="text-muted-foreground">
+                                This is a basic animated modal with smooth transitions.
+                            </p>
+                        </AnimatedModalContent>
+                        <AnimatedModalFooter>
+                            <AnimatedModalCloseButton>
+                                Cancel
+                            </AnimatedModalCloseButton>
+                        </AnimatedModalFooter>
+                    </AnimatedModalBody>
+                </AnimatedModal>
+            </div>
+            
+            <div>
+                <h2 className="text-2xl font-bold mb-4">Modal with Success Action</h2>
+                <AnimatedModal>
+                    <AnimatedModalTrigger>
+                        Open Action Modal
+                    </AnimatedModalTrigger>
+                    <AnimatedModalBody>
+                        <AnimatedModalContent>
+                            <h3 className="text-lg font-semibold mb-2">Confirm Action</h3>
+                            <p className="text-muted-foreground">
+                                Are you sure you want to proceed with this action?
+                            </p>
+                        </AnimatedModalContent>
+                        <AnimatedModalFooter className="gap-2">
+                            <AnimatedModalCloseButton>
+                                Cancel
+                            </AnimatedModalCloseButton>
+                            <AnimatedModalSuccessButton onClick={handleSuccess}>
+                                Confirm
+                            </AnimatedModalSuccessButton>
+                        </AnimatedModalFooter>
+                    </AnimatedModalBody>
+                </AnimatedModal>
+            </div>
+        </div>
+    );
+}
+`,
+        premium: true,
+        category: "Overlay",
+        tags: ["modal", "animated", "dialog", "overlay"],
+        features: ["Animated", "Accessible", "TypeScript", "Smooth Transitions"],
+        dependencies: ["framer-motion", "react", "@catalystsoftware/icons"],
+        props: {
+            "AnimatedModal": [
+                { name: "children", type: "ReactNode", default: "null" },
+            ],
+            "AnimatedModalTrigger": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "AnimatedModalCloseButton": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "AnimatedModalSuccessButton": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "onClick", type: "() => void", default: "null" },
+            ],
+            "AnimatedModalBody": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "AnimatedModalContent": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "AnimatedModalFooter": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dialog Stack",
+        value: "dialog-stack",
+        importPath: "~/components/catalyst-ui/overlays/dialog-stack",
+        multiImport: "DialogStack, DialogStackTrigger, DialogStackOverlay, DialogStackBody, DialogStackContent, DialogStackHeader, DialogStackTitle, DialogStackDescription, DialogStackFooter, DialogStackNext, DialogStackPrevious",
+        basicusage: null,
+        path: "/components/catalyst-ui/overlays/dialog-stack.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/overlays/dialog-stack.tsx",
+        usage: null,
+        premium: true,
+        category: "Overlays",
+        tags: ["dialog", "modal", "stack", "navigation", "interactive"],
+        features: ["Stack Navigation", "Clickable Overlay", "Portal Rendering", "Controllable State"],
+        dependencies: ["@radix-ui/react-use-controllable-state", "@radix-ui/react-portal", "react"],
+        props: {
+            "DialogStack": [
+                { name: "open", type: "boolean", default: "null" },
+                { name: "defaultOpen", type: "boolean", default: "false" },
+                { name: "onOpenChange", type: "(open: boolean) => void", default: "null" },
+                { name: "clickable", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackTrigger": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" },
+                { name: "onClick", type: "MouseEventHandler<HTMLButtonElement>", default: "null" }
+            ],
+            "DialogStackOverlay": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackBody": [
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "ReactElement<DialogStackChildProps>[] | ReactElement<DialogStackChildProps>", default: "null" }
+            ],
+            "DialogStackContent": [
+                { name: "index", type: "number", default: "0" },
+                { name: "offset", type: "number", default: "10" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackHeader": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackTitle": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackDescription": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackFooter": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackNext": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "DialogStackPrevious": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Animated Tooltip",
+        value: "animated-tooltip",
+        importPath: "~/components/catalyst-ui/overlays/animated-tooltip",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/overlays/animated-tooltip.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/overlays/animated-tooltip.tsx",
+        usage: null,
+        premium: true,
+        category: "Overlays",
+        tags: ["tooltip", "hover", "animation", "images", "interactive"],
+        features: ["Motion Tracking", "Spring Animations", "Gradient Effects", "Responsive"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "AnimatedTooltip": [
+                { name: "items", type: "AnimatedTooltipItem[]", default: "null" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dual Sidebar",
+        value: "dual-sidebar",
+        importPath: "~/components/catalyst-ui/overlays/dual-sidebar",
+        multiImport: "useDS, DSLeftRail, DSRightRail, DSHeader, DSContent, DSFooter, DSAvatar, DSAvatarImage, DSAvatarFallback, DSGroup, DSGroupAction, DSGroupContent, DSGroupLabel, DSInput, DSMenu, DSMenuAction, DSMenuBadge, DSMenuButton, DSMenuItem, DSMenuSkeleton, DSMenuSub, DSMenuSubButton, DSMenuSubItem, DSSeparator, DSMenuAnchor, DSMenuLink, DSLoading, useDSTheme, DSThemeSelector, type  DSTheme, DSThemeProvider, DSProvider, DSInset, DSTrigger, DSLeft, DSLeftIcon, DSRight, DSRightIcon, DSD, DSDBottom, DSDTrigger, DSDPortal, DSDClose, DSDOverlay, DSDContent, DSDHeader, DSDFooter, DSDTitle, DSDDescription, DSDM, DSDMPortal, DSDMTrigger, DSDMContent, DSDMGroup, DSDMLabel, DSDMItem, DSDMCheckboxItem, DSDMRadioGroup, DSDMRadioItem, DSDMSeparator, DSDMShortcut, DSDMSub, DSDMSubTrigger, DSDMSubContent, DSDMAnchor, DSC, DSCTrigger, DSCContent",
+        basicusage: `
+<DSProvider defaultOpenLeft={true} defaultOpenRight={false}>
+  <DSLeft variant="sidebar" collapsible="offcanvas">
+    <DSHeader>
+      <DSTrigger side="left" />
+    </DSHeader>
+    <DSContent>
+      <DSMenu>
+        <DSMenuItem>
+          <DSMenuButton side="left">
+            Menu Item 1
+          </DSMenuButton>
+        </DSMenuItem>
+      </DSMenu>
+    </DSContent>
+  </DSLeft>
+
+  <DSInset>
+    <div className="p-4">
+      Main content area
+    </div>
+  </DSInset>
+
+  <DSRight variant="sidebar" collapsible="offcanvas">
+    <DSHeader>
+      <DSTrigger side="right" />
+    </DSHeader>
+    <DSContent>
+      <DSMenu>
+        <DSMenuItem>
+          <DSMenuButton side="right">
+            Menu Item 1
+          </DSMenuButton>
+        </DSMenuItem>
+      </DSMenu>
+    </DSContent>
+  </DSRight>
+</DSProvider>`,
+        path: "/components/catalyst-ui/overlays/dual-sidebar.tsx",
+        source: null,
+        usagePath: null,
+        usage: `
+export default function DSExample() {
+    const [activePage, setActivePage] = React.useState('home');
+    const data = {
+        user: {
+            name: "shadcn",
+            email: "m@example.com",
+            avatar: "/avatars/shadcn.jpg",
+        },
+        navMain: [
+            {
+                title: "Inbox",
+                url: "#",
+                icon: Inbox,
+                isActive: true,
+            },
+            {
+                title: "Drafts",
+                url: "#",
+                icon: File,
+                isActive: false,
+            },
+            {
+                title: "Sent",
+                url: "#",
+                icon: Send,
+                isActive: false,
+            },
+            {
+                title: "Junk",
+                url: "#",
+                icon: ArchiveX,
+                isActive: false,
+            },
+            {
+                title: "Trash",
+                url: "#",
+                icon: Trash2,
+                isActive: false,
+            },
+        ],
+    }
+    const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+    const [mails, setMails] = React.useState(data.mails)
+    return (
+        <div className="bg-[#111827] w-[100vw] h-[100vh] overflow-hidden">
+            {/* Left Sidebar */}
+            <DSProvider>
+                <DSLeft variant="inset">
+                    <DSHeader>
+                        <h2 className="text-xl font-bold">My App</h2>
+                        <p className="text-sm text-gray-400">Navigation</p>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupLabel>Main Menu</DSGroupLabel>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    <DSMenuItem>
+                                        <DSMenuButton
+                                            icon={<Home size={20} />}
+                                            isActive={activePage === 'home'}
+                                            onClick={() => setActivePage('home')}
+                                        >
+                                            Home
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+
+                        <DSGroup>
+                            <DSGroupLabel>Settings</DSGroupLabel>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    <DSMenuItem>
+                                        <DSMenuButton
+                                            icon={<Settings size={20} />}
+                                            isActive={activePage === 'settings'}
+                                            onClick={() => setActivePage('settings')}
+                                        >
+                                            Settings
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+                                JD
+                            </div>
+                            <div className="flex-1">
+                                <p className="text-sm font-medium">John Doe</p>
+                                <p className="text-xs text-gray-400">john@example.com</p>
+                            </div>
+                        </div>
+                    </DSFooter>
+                </DSLeft>
+
+                <DSLeftIcon>
+                    <DSHeader>
+                        <DSMenu>
+                            <DSMenuItem>
+                                <DSMenuButton size="lg" asChild className="md:h-8 md:p-0"   >
+                                    <a href="#">
+                                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                            <Command className="size-4" />
+                                        </div>
+                                    </a>
+                                </DSMenuButton>
+                            </DSMenuItem>
+                        </DSMenu>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    {data.navMain.map((item) => (
+                                        <DSMenuItem key={item.title}>
+                                            <DSMenuButton
+                                                tooltip={{
+                                                    children: item.title,
+                                                    hidden: false,
+                                                }}
+                                                onClick={() => {
+                                                    setActiveItem(item)
+                                                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                                                    setMails(
+                                                        mail.slice(
+                                                            0,
+                                                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                                                        )
+                                                    )
+                                                    setOpen(true)
+                                                }}
+                                                isActive={activeItem?.title === item.title}
+                                                className="px-2.5 md:px-2"
+                                            >
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </DSMenuButton>
+                                        </DSMenuItem>
+                                    ))}
+ <DSMenuItem>
+                                        <DSMenuButton>
+                                            <DSD>
+                                                <DSDTrigger>
+                                                    <Button variant="ghost" size='icon'><Ghost /></Button>
+                                                </DSDTrigger>
+                                                <DSDContent>
+                                                  
+                                                </DSDContent>
+                                            </DSD>
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <NavUser user={data.user} />
+                    </DSFooter>
+                </DSLeftIcon>
+
+                <DSInset>
+                    <div className="items-center justify-center">
+                        <div className="flex items-center justify-between p-4 border-b mx-auto">
+                            <DSTrigger />
+                            <DSThemeSelector >
+                                <Zap className="text-primary" />
+                            </DSThemeSelector>
+                            <DSTrigger side='right' />
+                        </div>
+                        <div className="flex-1 p-4 overflow-y-auto">
+                           <OutletContent />
+                        </div>
+                    </div>
+                </DSInset>
+
+                <DSRightIcon>
+                    <DSHeader>
+                        <DSMenu>
+                            <DSMenuItem>
+                                <DSMenuButton size="lg" asChild className="md:h-8 md:p-0"   >
+                                    <a href="#">
+                                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                            <Command className="size-4" />
+                                        </div>
+                                    </a>
+                                </DSMenuButton>
+                            </DSMenuItem>
+                        </DSMenu>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    {data.navMain.map((item) => (
+                                        <DSMenuItem key={item.title}>
+                                            <DSMenuButton
+                                                tooltip={{
+                                                    children: item.title,
+                                                    hidden: false,
+                                                }}
+                                                onClick={() => {
+                                                    setActiveItem(item)
+                                                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                                                    setMails(
+                                                        mail.slice(
+                                                            0,
+                                                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                                                        )
+                                                    )
+                                                    setOpen(true)
+                                                }}
+                                                isActive={activeItem?.title === item.title}
+                                                className="px-2.5 md:px-2"
+                                            >
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </DSMenuButton>
+                                        </DSMenuItem>
+                                    ))}
+                                    <DSMenuItem>
+                                        <DSMenuButton>
+                                            <DSDBottom>
+                                                <DSDTrigger>
+                                                    <Button variant="ghost" size='icon'><Ghost /></Button>
+                                                </DSDTrigger>
+                                                <DSDContent>
+                                                  
+                                                </DSDContent>
+                                            </DSDBottom>
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <NavUser user={data.user} />
+                    </DSFooter>
+                </DSRightIcon>
+
+                <DSRight variant="inset">
+                    <DSHeader>
+                        <div className="flex items-center gap-2">
+                            <Bell size={20} />
+                            <h2 className="text-lg font-bold">Activity</h2>
+                        </div>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupLabel>Recent Notifications</DSGroupLabel>
+                            <DSGroupContent>
+                                <div className="space-y-3">
+                                    <div className="p-3 bg-gray-800 rounded-lg">
+                                        <p className="text-sm font-medium">New message</p>
+                                        <p className="text-xs text-gray-400">5 minutes ago</p>
+                                    </div>
+                                </div>
+                            </DSGroupContent>
+                        </DSGroup>
+
+                        <DSGroup>
+                            <DSGroupLabel>Quick Actions</DSGroupLabel>
+                            <DSGroupContent>
+                                <div className="space-y-2">
+                                    <Button>New Project</Button>
+                                    <Button>Invite User</Button>
+                                </div>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <Input placeholder="Search..." />
+                    </DSFooter>
+                </DSRight>
+            </DSProvider>
+        </div>
+    );
+}`,
+        premium: false,
+        category: "Overlay",
+        tags: ["layout", "sidebar", "navigation", "dual", "responsive", "collapsible"],
+        features: [
+            "Dual Sidebar Layout",
+            "Left & Right Sidebars",
+            "Responsive Mobile Views",
+            "Collapsible Variants",
+            "Icon Sidebars",
+            "Keyboard Shortcuts (⌘B, ⌘G)",
+            "Theme System",
+            "Floating & Inset Variants",
+            "Top & Bottom Drawers",
+            "TypeScript",
+            "Accessible"
+        ],
+        dependencies: [
+            "lucide-react",
+            "react",
+            "@radix-ui/react-slot",
+            "class-variance-authority",
+            "@remix-run/react",
+            "vaul"
+        ],
+        props: {
+            // PROVIDER & CORE LAYOUT
+            "DSProvider": [
+                { name: "defaultOpenLeft", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultOpenRight", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultWidth", type: "string", default: "275px" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "style", type: "React.CSSProperties", default: "undefined", description: "Can pass through values like '--dual-sidebar-width-icon': DS_WIDTH_ICON, to be used within the style prop" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeft": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas", description: "Collapsible state of the sidebar." },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRight": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas" },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeftIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRightIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSInset": [
+                { name: "variant", type: "default | inset | card | bordered", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // STRUCTURE COMPONENTS
+            "DSHeader": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSFooter": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // MENU SYSTEM
+            "DSMenu": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuItem": [
+                { name: "variant", type: "default | spaced | compact | comfortable", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuButton": [
+                { name: "side", type: "left | right", default: "required" },
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "tooltip", type: "string | TooltipContentProps", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "showOnHover", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuBadge": [
+                { name: "variant", type: "default | primary | secondary | success | warning | danger | outline | ghost | dot", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSkeleton": [
+                { name: "showIcon", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSMenuSub": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubItem": [
+                { name: "variant", type: "default | indented | dotted", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubButton": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "size", type: "default | sm | lg", default: "default" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "variant", type: "default | ghost | minimal | indent", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuLink": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSMenuAnchor": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "newTab", type: "boolean", default: "true" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // GROUP SYSTEM
+            "DSGroup": [
+                { name: "variant", type: "default | separated | card | bordered | subtle", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupLabel": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "variant", type: "default | prominent | subtle | separated", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // UI ELEMENTS
+            "DSTrigger": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" }
+            ],
+            "DSBurger": [
+                { name: "opened", type: "boolean", default: "undefined" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "onClick", type: "() => void", default: "undefined" }
+            ],
+            "DSInput": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "type", type: "string", default: "text" },
+                { name: "placeholder", type: "string", default: "undefined" },
+                { name: "value", type: "string", default: "undefined" },
+                { name: "onChange", type: "React.ChangeEventHandler", default: "undefined" }
+            ],
+            "DSSeparator": [
+                { name: "variant", type: "default | thick | dashed | gradient", default: "default" },
+                { name: "spacing", type: "default | sm | lg | none", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "orientation", type: "horizontal | vertical", default: "horizontal" }
+            ],
+            // RAIL COMPONENTS
+            "DSLeftRail": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSRightRail": [
+                { name: "side", type: "left | right", default: "right" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            // THEME SYSTEM
+            "DSThemeSelector": [
+                { name: "size", type: "number", default: "28" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSThemeProvider": [
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // DRAWER SYSTEM - TOP/BOTTOM (Vaul)
+            // drawer top position
+            "DSD & DSD Bottom": [
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "shouldScaleBackground", "type": "boolean", "default": "false" },
+                { "name": "setBackgroundColorOnScale", "type": "boolean", "default": "true" },
+                { "name": "closeThreshold", "type": "number", "default": "0.5" },
+                { "name": "scrollLockTimeout", "type": "number", "default": "500" },
+                { "name": "snapPoints", "type": "(number | string)[]", "default": "undefined" },
+                { "name": "activeSnapPoint", "type": "number | string | null", "default": "undefined" },
+                { "name": "setActiveSnapPoint", "type": "(snapPoint: number | string | null) => void", "default": "undefined" },
+                { "name": "fadeFromIndex", "type": "number", "default": "snapPoints.length - 1" },
+                { "name": "modal", "type": "boolean", "default": "true" },
+                { "name": "handleOnly", "type": "boolean", "default": "false" },
+                { "name": "dismissible", "type": "boolean", "default": "true" },
+                { "name": "onDrag", "type": "(event: PointerEvent, percentageDragged: number) => void", "default": "undefined" },
+                { "name": "onRelease", "type": "(event: PointerEvent, open: boolean) => void", "default": "undefined" },
+                { "name": "noBodyStyles", "type": "boolean", "default": "false" },
+                { "name": "direction", "type": "'top' | 'bottom' | 'left' | 'right'", "default": "'bottom'" },
+                { "name": "preventScrollRestoration", "type": "boolean", "default": "true" },
+                { "name": "disablePreventScroll", "type": "boolean", "default": "false" },
+                { "name": "snapToSequentialPoint", "type": "boolean", "default": "false" },
+                { "name": "onAnimationEnd", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "nested", "type": "boolean", "default": "false" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDPortal": [
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDClose": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDOverlay": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" }
+            ],
+            "DSDContent": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "required" }
+            ],
+            "DSDTitle": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDDescription": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            // LOADING UI
+            "DSLoading": [
+                { name: "variant", type: "default | minimal | card | centered", default: "default" },
+                { name: "size", type: "default | sm | md | lg | full", default: "default" }
+            ],
+            // AVATAR SYSTEM
+            "DSA": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAImage": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "src", "type": "string", "default": "required" },
+                { "name": "alt", "type": "string", "default": "required" },
+                { "name": "onLoadingStatusChange", "type": "function", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAFallback": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "delayMs", "type": "number", "default": "0" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // DROPDOWN MENU SYSTEM
+            // 
+            "DSDM": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "dir", "type": "'ltr' | 'rtl'", "default": "undefined" },
+                { "name": "modal", "type": "boolean", "default": "true" }
+            ],
+            "DSDMPortal": [
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" }
+            ],
+            "DSDMTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSDMContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'bottom'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'center'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onCloseAutoFocus", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            "DSDMArrow": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "width", "type": "number", "default": "10" },
+                { "name": "height", "type": "number", "default": "5" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMGroup": [
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMLabel": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMCheckboxItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "checked", "type": "boolean | 'indeterminate'", "default": "undefined" },
+                { "name": "onCheckedChange", "type": "(checked: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioGroup": [
+                { "name": "value", "type": "string", "default": "undefined" },
+                { "name": "onValueChange", "type": "(value: string) => void", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "value", "type": "string", "default": "required" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItemIndicator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSeparator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSub": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" }
+            ],
+            "DSDMSubTrigger": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSubContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'right'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'start'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            // COLLAPSIBLE SYSTEM
+            // 
+            "DSC": [
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSCTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSCContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // HOOKS
+            "useDS": [
+                { name: "leftState", type: "expanded | collapsed", default: "readonly", description: "The current state of the sidebar." },
+                { name: "rightState", type: "expanded | collapsed", default: "readonly" },
+                { name: "openLeft", type: "boolean", default: "readonly", description: "Whether the sidebar is open." },
+                { name: "openRight", type: "boolean", default: "readonly" },
+                { name: "setOpenLeft", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar." },
+                { name: "setOpenRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "openMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is open on mobile." },
+                { name: "openMobileRight", type: "boolean", default: "readonly", description: "" },
+                { name: "setOpenMobile", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar on mobile." },
+                { name: "setOpenMobileRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "toggleLeft", type: "() => void", default: "readonly", description: "Toggles the sidebar. Desktop and mobile." },
+                { name: "toggleRight", type: "() => void", default: "readonly", description: "" },
+                { name: "isMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is on mobile." },
+                { name: "sidebarWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "leftVariant", type: "SidebarVariant", default: "readonly", description: "States the current variant type, this is more so used within the source file." },
+                { name: "rightVariant", type: "SidebarVariant", default: "readonly", description: "" },
+                { name: "setLeftVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "Sets the state the current variant type, this is more so used within the source file" },
+                { name: "setRightVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "" },
+                { name: "isIconLeftActive", type: "boolean", default: "readonly", description: "Checks if icon sidebars are actively used." },
+                { name: "isIconRightActive", type: "boolean", default: "readonly", description: "" },
+                { name: "setIsIconLeftActive", type: "(open: boolean) => void", default: "readonly", description: "Sets isIconLeftActive state, used within the source file." },
+                { name: "setIsIconRightActive", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "iconLeftWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "iconRightWidth", type: "number", default: "readonly", description: "" },
+                { name: "setIconLeftWidth", type: "(width: number) => void", default: "readonly", description: "Sets setIconLeftWidth state, used within the source file." },
+                { name: "setIconRightWidth", type: "(width: number) => void", default: "readonly", description: "" },
+                { name: "topHeight", type: "string", default: "readonly", description: "Sets height for inset variant styles." },
+                { name: "setTopHeight", type: "(height: string) => void", default: "readonly", description: "" },
+                { name: "bottomHeight", type: "string", default: "readonly", description: "" },
+                { name: "setBottomHeight", type: "(height: string) => void", default: "readonly", description: "" }
+            ],
+            "useDSTheme": [
+                { name: "theme", type: "DSTheme", default: "readonly" },
+                { name: "setTheme", type: "(theme: DSTheme) => void", default: "readonly" },
+                { name: "themeVars", type: "Record<string, string>", default: "readonly" }
+            ]
+        },
+        desc: "A comprehensive dual sidebar layout system with left and right collapsible sidebars, support for multiple variants including icon sidebars, theme system, responsive mobile views, keyboard shortcuts, and top/bottom drawer support. Perfect for complex application layouts requiring flexible navigation structures.",
+        status: "stable",
+        lastUpdated: "2024-11-03"
+    },
+    {
+        name: "Dual Sidebar Agnostic",
+        value: "dual-sidebar-agnostic",
+        importPath: "~/components/catalyst-ui/overlays/dual-sidebar-agnostic",
+        multiImport: "useDS, DSLeftRail, DSRightRail, DSHeader, DSContent, DSFooter, DSAvatar, DSAvatarImage, DSAvatarFallback, DSGroup, DSGroupAction, DSGroupContent, DSGroupLabel, DSInput, DSMenu, DSMenuAction, DSMenuBadge, DSMenuButton, DSMenuItem, DSMenuSkeleton, DSMenuSub, DSMenuSubButton, DSMenuSubItem, DSSeparator, DSMenuAnchor, DSMenuLink, DSLoading, useDSTheme, DSThemeSelector, type  DSTheme, DSThemeProvider, DSProvider, DSInset, DSTrigger, DSLeft, DSLeftIcon, DSRight, DSRightIcon, DSD, DSDBottom, DSDTrigger, DSDPortal, DSDClose, DSDOverlay, DSDContent, DSDHeader, DSDFooter, DSDTitle, DSDDescription, DSDM, DSDMPortal, DSDMTrigger, DSDMContent, DSDMGroup, DSDMLabel, DSDMItem, DSDMCheckboxItem, DSDMRadioGroup, DSDMRadioItem, DSDMSeparator, DSDMShortcut, DSDMSub, DSDMSubTrigger, DSDMSubContent, DSDMAnchor, DSC, DSCTrigger, DSCContent",
+        basicusage: `
+<DSProvider defaultOpenLeft={true} defaultOpenRight={false}>
+  <DSLeft variant="sidebar" collapsible="offcanvas">
+    <DSHeader>
+      <DSTrigger side="left" />
+    </DSHeader>
+    <DSContent>
+      <DSMenu>
+        <DSMenuItem>
+          <DSMenuButton side="left">
+            Menu Item 1
+          </DSMenuButton>
+        </DSMenuItem>
+      </DSMenu>
+    </DSContent>
+  </DSLeft>
+
+  <DSInset>
+    <div className="p-4">
+      Main content area
+    </div>
+  </DSInset>
+
+  <DSRight variant="sidebar" collapsible="offcanvas">
+    <DSHeader>
+      <DSTrigger side="right" />
+    </DSHeader>
+    <DSContent>
+      <DSMenu>
+        <DSMenuItem>
+          <DSMenuButton side="right">
+            Menu Item 1
+          </DSMenuButton>
+        </DSMenuItem>
+      </DSMenu>
+    </DSContent>
+  </DSRight>
+</DSProvider>`,
+        path: "/components/catalyst-ui/components/overlay/dual-sidebar-agnostic.tsx",
+        source: null,
+        usagePath: null,
+        usage: `
+export default function DSExample() {
+    const [activePage, setActivePage] = React.useState('home');
+    const data = {
+        user: {
+            name: "shadcn",
+            email: "m@example.com",
+            avatar: "/avatars/shadcn.jpg",
+        },
+        navMain: [
+            {
+                title: "Inbox",
+                url: "#",
+                icon: Inbox,
+                isActive: true,
+            },
+            {
+                title: "Drafts",
+                url: "#",
+                icon: File,
+                isActive: false,
+            },
+            {
+                title: "Sent",
+                url: "#",
+                icon: Send,
+                isActive: false,
+            },
+            {
+                title: "Junk",
+                url: "#",
+                icon: ArchiveX,
+                isActive: false,
+            },
+            {
+                title: "Trash",
+                url: "#",
+                icon: Trash2,
+                isActive: false,
+            },
+        ],
+    }
+    const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+    const [mails, setMails] = React.useState(data.mails)
+    return (
+        <div className="bg-[#111827] w-[100vw] h-[100vh] overflow-hidden">
+            {/* Left Sidebar */}
+            <DSProvider>
+                <DSLeft variant="inset">
+                    <DSHeader>
+                        <h2 className="text-xl font-bold">My App</h2>
+                        <p className="text-sm text-gray-400">Navigation</p>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupLabel>Main Menu</DSGroupLabel>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    <DSMenuItem>
+                                        <DSMenuButton
+                                            icon={<Home size={20} />}
+                                            isActive={activePage === 'home'}
+                                            onClick={() => setActivePage('home')}
+                                        >
+                                            Home
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+
+                        <DSGroup>
+                            <DSGroupLabel>Settings</DSGroupLabel>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    <DSMenuItem>
+                                        <DSMenuButton
+                                            icon={<Settings size={20} />}
+                                            isActive={activePage === 'settings'}
+                                            onClick={() => setActivePage('settings')}
+                                        >
+                                            Settings
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+                                JD
+                            </div>
+                            <div className="flex-1">
+                                <p className="text-sm font-medium">John Doe</p>
+                                <p className="text-xs text-gray-400">john@example.com</p>
+                            </div>
+                        </div>
+                    </DSFooter>
+                </DSLeft>
+
+                <DSLeftIcon>
+                    <DSHeader>
+                        <DSMenu>
+                            <DSMenuItem>
+                                <DSMenuButton size="lg" asChild className="md:h-8 md:p-0"   >
+                                    <a href="#">
+                                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                            <Command className="size-4" />
+                                        </div>
+                                    </a>
+                                </DSMenuButton>
+                            </DSMenuItem>
+                        </DSMenu>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    {data.navMain.map((item) => (
+                                        <DSMenuItem key={item.title}>
+                                            <DSMenuButton
+                                                tooltip={{
+                                                    children: item.title,
+                                                    hidden: false,
+                                                }}
+                                                onClick={() => {
+                                                    setActiveItem(item)
+                                                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                                                    setMails(
+                                                        mail.slice(
+                                                            0,
+                                                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                                                        )
+                                                    )
+                                                    setOpen(true)
+                                                }}
+                                                isActive={activeItem?.title === item.title}
+                                                className="px-2.5 md:px-2"
+                                            >
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </DSMenuButton>
+                                        </DSMenuItem>
+                                    ))}
+ <DSMenuItem>
+                                        <DSMenuButton>
+                                            <DSD>
+                                                <DSDTrigger>
+                                                    <Button variant="ghost" size='icon'><Ghost /></Button>
+                                                </DSDTrigger>
+                                                <DSDContent>
+                                                  
+                                                </DSDContent>
+                                            </DSD>
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <NavUser user={data.user} />
+                    </DSFooter>
+                </DSLeftIcon>
+
+                <DSInset>
+                    <div className="items-center justify-center">
+                        <div className="flex items-center justify-between p-4 border-b mx-auto">
+                            <DSTrigger />
+                            <DSThemeSelector >
+                                <Zap className="text-primary" />
+                            </DSThemeSelector>
+                            <DSTrigger side='right' />
+                        </div>
+                        <div className="flex-1 p-4 overflow-y-auto">
+                           <OutletContent />
+                        </div>
+                    </div>
+                </DSInset>
+
+                <DSRightIcon>
+                    <DSHeader>
+                        <DSMenu>
+                            <DSMenuItem>
+                                <DSMenuButton size="lg" asChild className="md:h-8 md:p-0"   >
+                                    <a href="#">
+                                        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                            <Command className="size-4" />
+                                        </div>
+                                    </a>
+                                </DSMenuButton>
+                            </DSMenuItem>
+                        </DSMenu>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupContent>
+                                <DSMenu>
+                                    {data.navMain.map((item) => (
+                                        <DSMenuItem key={item.title}>
+                                            <DSMenuButton
+                                                tooltip={{
+                                                    children: item.title,
+                                                    hidden: false,
+                                                }}
+                                                onClick={() => {
+                                                    setActiveItem(item)
+                                                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                                                    setMails(
+                                                        mail.slice(
+                                                            0,
+                                                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                                                        )
+                                                    )
+                                                    setOpen(true)
+                                                }}
+                                                isActive={activeItem?.title === item.title}
+                                                className="px-2.5 md:px-2"
+                                            >
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </DSMenuButton>
+                                        </DSMenuItem>
+                                    ))}
+                                    <DSMenuItem>
+                                        <DSMenuButton>
+                                            <DSDBottom>
+                                                <DSDTrigger>
+                                                    <Button variant="ghost" size='icon'><Ghost /></Button>
+                                                </DSDTrigger>
+                                                <DSDContent>
+                                                  
+                                                </DSDContent>
+                                            </DSDBottom>
+                                        </DSMenuButton>
+                                    </DSMenuItem>
+
+                                </DSMenu>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <NavUser user={data.user} />
+                    </DSFooter>
+                </DSRightIcon>
+
+                <DSRight variant="inset">
+                    <DSHeader>
+                        <div className="flex items-center gap-2">
+                            <Bell size={20} />
+                            <h2 className="text-lg font-bold">Activity</h2>
+                        </div>
+                    </DSHeader>
+
+                    <DSContent>
+                        <DSGroup>
+                            <DSGroupLabel>Recent Notifications</DSGroupLabel>
+                            <DSGroupContent>
+                                <div className="space-y-3">
+                                    <div className="p-3 bg-gray-800 rounded-lg">
+                                        <p className="text-sm font-medium">New message</p>
+                                        <p className="text-xs text-gray-400">5 minutes ago</p>
+                                    </div>
+                                </div>
+                            </DSGroupContent>
+                        </DSGroup>
+
+                        <DSGroup>
+                            <DSGroupLabel>Quick Actions</DSGroupLabel>
+                            <DSGroupContent>
+                                <div className="space-y-2">
+                                    <Button>New Project</Button>
+                                    <Button>Invite User</Button>
+                                </div>
+                            </DSGroupContent>
+                        </DSGroup>
+                    </DSContent>
+
+                    <DSFooter>
+                        <Input placeholder="Search..." />
+                    </DSFooter>
+                </DSRight>
+            </DSProvider>
+        </div>
+    );
+}`,
+        premium: false,
+        category: "Overlay",
+        tags: ["layout", "sidebar", "navigation", "dual", "responsive", "collapsible"],
+        features: [
+            "Dual Sidebar Layout",
+            "Left & Right Sidebars",
+            "Responsive Mobile Views",
+            "Collapsible Variants",
+            "Icon Sidebars",
+            "Keyboard Shortcuts (⌘B, ⌘G)",
+            "Theme System",
+            "Floating & Inset Variants",
+            "Top & Bottom Drawers",
+            "TypeScript",
+            "Accessible"
+        ],
+        dependencies: [
+            "lucide-react",
+            "react",
+            "@radix-ui/react-slot",
+            "class-variance-authority",
+            "@remix-run/react",
+            "vaul"
+        ],
+        props: {
+            "DSProvider": [
+                { name: "defaultOpenLeft", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultOpenRight", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultWidth", type: "string", default: "275px" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "style", type: "React.CSSProperties", default: "undefined", description: "Can pass through values like '--dual-sidebar-width-icon': DS_WIDTH_ICON, to be used within the style prop" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeft": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas", description: "Collapsible state of the sidebar." },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRight": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas" },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeftIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRightIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSInset": [
+                { name: "variant", type: "default | inset | card | bordered", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // STRUCTURE COMPONENTS
+            "DSHeader": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSFooter": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // MENU SYSTEM
+            "DSMenu": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuItem": [
+                { name: "variant", type: "default | spaced | compact | comfortable", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuButton": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "tooltip", type: "string | TooltipContentProps", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "showOnHover", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuBadge": [
+                { name: "variant", type: "default | primary | secondary | success | warning | danger | outline | ghost | dot", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSkeleton": [
+                { name: "showIcon", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSMenuSub": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubItem": [
+                { name: "variant", type: "default | indented | dotted", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubButton": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "size", type: "default | sm | lg", default: "default" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "variant", type: "default | ghost | minimal | indent", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuLink": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSMenuAnchor": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "newTab", type: "boolean", default: "true" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // GROUP SYSTEM
+            "DSGroup": [
+                { name: "variant", type: "default | separated | card | bordered | subtle", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupLabel": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "variant", type: "default | prominent | subtle | separated", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // UI ELEMENTS
+            "DSTrigger": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" }
+            ],
+            "DSBurger": [
+                { name: "opened", type: "boolean", default: "undefined" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "onClick", type: "() => void", default: "undefined" }
+            ],
+            "DSInput": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "type", type: "string", default: "text" },
+                { name: "placeholder", type: "string", default: "undefined" },
+                { name: "value", type: "string", default: "undefined" },
+                { name: "onChange", type: "React.ChangeEventHandler", default: "undefined" }
+            ],
+            "DSSeparator": [
+                { name: "variant", type: "default | thick | dashed | gradient", default: "default" },
+                { name: "spacing", type: "default | sm | lg | none", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "orientation", type: "horizontal | vertical", default: "horizontal" }
+            ],
+            // RAIL COMPONENTS
+            "DSLeftRail": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSRightRail": [
+                { name: "side", type: "left | right", default: "right" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            // THEME SYSTEM
+            "DSThemeSelector": [
+                { name: "size", type: "number", default: "28" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSThemeProvider": [
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // DRAWER SYSTEM - TOP/BOTTOM (Vaul)
+            // drawer top position
+            "DSD & DSD Bottom": [
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "shouldScaleBackground", "type": "boolean", "default": "false" },
+                { "name": "setBackgroundColorOnScale", "type": "boolean", "default": "true" },
+                { "name": "closeThreshold", "type": "number", "default": "0.5" },
+                { "name": "scrollLockTimeout", "type": "number", "default": "500" },
+                { "name": "snapPoints", "type": "(number | string)[]", "default": "undefined" },
+                { "name": "activeSnapPoint", "type": "number | string | null", "default": "undefined" },
+                { "name": "setActiveSnapPoint", "type": "(snapPoint: number | string | null) => void", "default": "undefined" },
+                { "name": "fadeFromIndex", "type": "number", "default": "snapPoints.length - 1" },
+                { "name": "modal", "type": "boolean", "default": "true" },
+                { "name": "handleOnly", "type": "boolean", "default": "false" },
+                { "name": "dismissible", "type": "boolean", "default": "true" },
+                { "name": "onDrag", "type": "(event: PointerEvent, percentageDragged: number) => void", "default": "undefined" },
+                { "name": "onRelease", "type": "(event: PointerEvent, open: boolean) => void", "default": "undefined" },
+                { "name": "noBodyStyles", "type": "boolean", "default": "false" },
+                { "name": "direction", "type": "'top' | 'bottom' | 'left' | 'right'", "default": "'bottom'" },
+                { "name": "preventScrollRestoration", "type": "boolean", "default": "true" },
+                { "name": "disablePreventScroll", "type": "boolean", "default": "false" },
+                { "name": "snapToSequentialPoint", "type": "boolean", "default": "false" },
+                { "name": "onAnimationEnd", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "nested", "type": "boolean", "default": "false" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDPortal": [
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDClose": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDOverlay": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" }
+            ],
+            "DSDContent": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "required" }
+            ],
+            "DSDTitle": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDDescription": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            // LOADING UI
+            "DSLoading": [
+                { name: "variant", type: "default | minimal | card | centered", default: "default" },
+                { name: "size", type: "default | sm | md | lg | full", default: "default" }
+            ],
+            // AVATAR SYSTEM
+            "DSA": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAImage": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "src", "type": "string", "default": "required" },
+                { "name": "alt", "type": "string", "default": "required" },
+                { "name": "onLoadingStatusChange", "type": "function", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAFallback": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "delayMs", "type": "number", "default": "0" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // DROPDOWN MENU SYSTEM
+            // 
+            "DSDM": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "dir", "type": "'ltr' | 'rtl'", "default": "undefined" },
+                { "name": "modal", "type": "boolean", "default": "true" }
+            ],
+            "DSDMPortal": [
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" }
+            ],
+            "DSDMTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSDMContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'bottom'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'center'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onCloseAutoFocus", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            "DSDMArrow": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "width", "type": "number", "default": "10" },
+                { "name": "height", "type": "number", "default": "5" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMGroup": [
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMLabel": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMCheckboxItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "checked", "type": "boolean | 'indeterminate'", "default": "undefined" },
+                { "name": "onCheckedChange", "type": "(checked: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioGroup": [
+                { "name": "value", "type": "string", "default": "undefined" },
+                { "name": "onValueChange", "type": "(value: string) => void", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "value", "type": "string", "default": "required" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItemIndicator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSeparator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSub": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" }
+            ],
+            "DSDMSubTrigger": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSubContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'right'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'start'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            // COLLAPSIBLE SYSTEM
+            // 
+            "DSC": [
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSCTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSCContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // HOOKS
+            "useDS": [
+                { name: "leftState", type: "expanded | collapsed", default: "readonly", description: "The current state of the sidebar." },
+                { name: "rightState", type: "expanded | collapsed", default: "readonly" },
+                { name: "openLeft", type: "boolean", default: "readonly", description: "Whether the sidebar is open." },
+                { name: "openRight", type: "boolean", default: "readonly" },
+                { name: "setOpenLeft", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar." },
+                { name: "setOpenRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "openMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is open on mobile." },
+                { name: "openMobileRight", type: "boolean", default: "readonly", description: "" },
+                { name: "setOpenMobile", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar on mobile." },
+                { name: "setOpenMobileRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "toggleLeft", type: "() => void", default: "readonly", description: "Toggles the sidebar. Desktop and mobile." },
+                { name: "toggleRight", type: "() => void", default: "readonly", description: "" },
+                { name: "isMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is on mobile." },
+                { name: "sidebarWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "leftVariant", type: "SidebarVariant", default: "readonly", description: "States the current variant type, this is more so used within the source file." },
+                { name: "rightVariant", type: "SidebarVariant", default: "readonly", description: "" },
+                { name: "setLeftVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "Sets the state the current variant type, this is more so used within the source file" },
+                { name: "setRightVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "" },
+                { name: "isIconLeftActive", type: "boolean", default: "readonly", description: "Checks if icon sidebars are actively used." },
+                { name: "isIconRightActive", type: "boolean", default: "readonly", description: "" },
+                { name: "setIsIconLeftActive", type: "(open: boolean) => void", default: "readonly", description: "Sets isIconLeftActive state, used within the source file." },
+                { name: "setIsIconRightActive", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "iconLeftWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "iconRightWidth", type: "number", default: "readonly", description: "" },
+                { name: "setIconLeftWidth", type: "(width: number) => void", default: "readonly", description: "Sets setIconLeftWidth state, used within the source file." },
+                { name: "setIconRightWidth", type: "(width: number) => void", default: "readonly", description: "" },
+                { name: "topHeight", type: "string", default: "readonly", description: "Sets height for inset variant styles." },
+                { name: "setTopHeight", type: "(height: string) => void", default: "readonly", description: "" },
+                { name: "bottomHeight", type: "string", default: "readonly", description: "" },
+                { name: "setBottomHeight", type: "(height: string) => void", default: "readonly", description: "" }
+            ],
+            "useDSTheme": [
+                { name: "theme", type: "DSTheme", default: "readonly" },
+                { name: "setTheme", type: "(theme: DSTheme) => void", default: "readonly" },
+                { name: "themeVars", type: "Record<string, string>", default: "readonly" }
+            ]
+        },
+        desc: "A comprehensive dual sidebar layout system with left and right collapsible sidebars, support for multiple variants including icon sidebars, theme system, responsive mobile views, keyboard shortcuts, and top/bottom drawer support. Perfect for complex application layouts requiring flexible navigation structures.",
+        status: "stable",
+        lastUpdated: "2024-11-03"
+    },
+    {
+        name: "Sidebar",
+        value: "sidebar",
+        importPath: "~/components/catalyst-ui",
+        multiImport: 'Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar',
+        path: "/components/catalyst-ui/overlays/sidebar-original.tsx",
+        premium: false,
+        source: null,
+        usage: null,
+        basicusage: `
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+
+<SidebarProvider
+  style={{
+    "--sidebar-width": "20rem",
+    "--sidebar-width-mobile": "20rem",
+  }}
+>
+  <Sidebar />
+</SidebarProvider>
+
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+
+
+
+ 
+export async function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+ 
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+
+<Sidebar side="left | right" />
+
+<Sidebar variant="sidebar | floating | inset" />
+
+<SidebarProvider>
+  <Sidebar variant="inset" />
+  <SidebarInset>
+    <main>{children}</main>
+  </SidebarInset>
+</SidebarProvider>
+
+<Sidebar collapsible="offcanvas | icon | none" />
+
+const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = useSidebar()
+
+<SidebarMenuLink to='/settings' icon={<Settings />}>
+    Settings
+</SidebarMenuLink>
+<SidebarMenuAnchor to='/settings' icon={<Settings />}>
+    Settings
+</SidebarMenuAnchor>
+`,
+        usagePath: "/components/catalyst-ui/overlays/sidebar-original.tsx",
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+        props: {
+            "DSProvider": [
+                { name: "defaultOpenLeft", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultOpenRight", type: "boolean", default: "false", description: "Default open state of the sidebar." },
+                { name: "defaultWidth", type: "string", default: "275px" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "style", type: "React.CSSProperties", default: "undefined", description: "Can pass through values like '--dual-sidebar-width-icon': DS_WIDTH_ICON, to be used within the style prop" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeft": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas", description: "Collapsible state of the sidebar." },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRight": [
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "collapsible", type: "offcanvas | icon | none", default: "offcanvas" },
+                { name: "loadingUI", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSLeftIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSRightIcon": [
+                { name: "iconWidth", type: "string", default: "48px" },
+                { name: "variant", type: "sidebar | floating | inset | frosted | card | glass | compact-card | bordered | minimal | elevated", default: "sidebar" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSInset": [
+                { name: "variant", type: "default | inset | card | bordered", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // STRUCTURE COMPONENTS
+            "DSHeader": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSFooter": [
+                { name: "variant", type: "default | bordered | elevated | compact", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // MENU SYSTEM
+            "DSMenu": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuItem": [
+                { name: "variant", type: "default | spaced | compact | comfortable", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuButton": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "tooltip", type: "string | TooltipContentProps", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "showOnHover", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuBadge": [
+                { name: "variant", type: "default | primary | secondary | success | warning | danger | outline | ghost | dot", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSkeleton": [
+                { name: "showIcon", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSMenuSub": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubItem": [
+                { name: "variant", type: "default | indented | dotted", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuSubButton": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "size", type: "default | sm | lg", default: "default" },
+                { name: "isActive", type: "boolean", default: "false" },
+                { name: "variant", type: "default | ghost | minimal | indent", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSMenuLink": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSMenuAnchor": [
+                { name: "to", type: "string", default: "required" },
+                { name: "icon", type: "React.ReactNode", default: "undefined" },
+                { name: "tooltip", type: "string", default: "undefined" },
+                { name: "newTab", type: "boolean", default: "true" },
+                { name: "variant", type: "default | ghost | outline | soft | solid | minimal | bordered | pill", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // GROUP SYSTEM
+            "DSGroup": [
+                { name: "variant", type: "default | separated | card | bordered | subtle", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupLabel": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "variant", type: "default | prominent | subtle | separated", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupAction": [
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            "DSGroupContent": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" }
+            ],
+            // UI ELEMENTS
+            "DSTrigger": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "onClick", type: "React.MouseEventHandler", default: "undefined" }
+            ],
+            "DSBurger": [
+                { name: "opened", type: "boolean", default: "undefined" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "onClick", type: "() => void", default: "undefined" }
+            ],
+            "DSInput": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "type", type: "string", default: "text" },
+                { name: "placeholder", type: "string", default: "undefined" },
+                { name: "value", type: "string", default: "undefined" },
+                { name: "onChange", type: "React.ChangeEventHandler", default: "undefined" }
+            ],
+            "DSSeparator": [
+                { name: "variant", type: "default | thick | dashed | gradient", default: "default" },
+                { name: "spacing", type: "default | sm | lg | none", default: "default" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "orientation", type: "horizontal | vertical", default: "horizontal" }
+            ],
+            // RAIL COMPONENTS
+            "DSLeftRail": [
+                { name: "side", type: "left | right", default: "left" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            "DSRightRail": [
+                { name: "side", type: "left | right", default: "right" },
+                { name: "className", type: "string", default: "undefined" }
+            ],
+            // THEME SYSTEM
+            "DSThemeSelector": [
+                { name: "size", type: "number", default: "28" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            "DSThemeProvider": [
+                { name: "children", type: "React.ReactNode", default: "required" }
+            ],
+            // DRAWER SYSTEM - TOP/BOTTOM (Vaul)
+            // drawer top position
+            "DSD & DSD Bottom": [
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "shouldScaleBackground", "type": "boolean", "default": "false" },
+                { "name": "setBackgroundColorOnScale", "type": "boolean", "default": "true" },
+                { "name": "closeThreshold", "type": "number", "default": "0.5" },
+                { "name": "scrollLockTimeout", "type": "number", "default": "500" },
+                { "name": "snapPoints", "type": "(number | string)[]", "default": "undefined" },
+                { "name": "activeSnapPoint", "type": "number | string | null", "default": "undefined" },
+                { "name": "setActiveSnapPoint", "type": "(snapPoint: number | string | null) => void", "default": "undefined" },
+                { "name": "fadeFromIndex", "type": "number", "default": "snapPoints.length - 1" },
+                { "name": "modal", "type": "boolean", "default": "true" },
+                { "name": "handleOnly", "type": "boolean", "default": "false" },
+                { "name": "dismissible", "type": "boolean", "default": "true" },
+                { "name": "onDrag", "type": "(event: PointerEvent, percentageDragged: number) => void", "default": "undefined" },
+                { "name": "onRelease", "type": "(event: PointerEvent, open: boolean) => void", "default": "undefined" },
+                { "name": "noBodyStyles", "type": "boolean", "default": "false" },
+                { "name": "direction", "type": "'top' | 'bottom' | 'left' | 'right'", "default": "'bottom'" },
+                { "name": "preventScrollRestoration", "type": "boolean", "default": "true" },
+                { "name": "disablePreventScroll", "type": "boolean", "default": "false" },
+                { "name": "snapToSequentialPoint", "type": "boolean", "default": "false" },
+                { "name": "onAnimationEnd", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "nested", "type": "boolean", "default": "false" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDPortal": [
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDClose": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDOverlay": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" }
+            ],
+            "DSDContent": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "required" }
+            ],
+            "DSDTitle": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            "DSDDescription": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "children", "type": "React.ReactNode", "default": "undefined" }
+            ],
+            // LOADING UI
+            "DSLoading": [
+                { name: "variant", type: "default | minimal | card | centered", default: "default" },
+                { name: "size", type: "default | sm | md | lg | full", default: "default" }
+            ],
+            // AVATAR SYSTEM
+            "DSA": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAImage": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "src", "type": "string", "default": "required" },
+                { "name": "alt", "type": "string", "default": "required" },
+                { "name": "onLoadingStatusChange", "type": "function", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSAFallback": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "delayMs", "type": "number", "default": "0" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // DROPDOWN MENU SYSTEM
+            // 
+            "DSDM": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "dir", "type": "'ltr' | 'rtl'", "default": "undefined" },
+                { "name": "modal", "type": "boolean", "default": "true" }
+            ],
+            "DSDMPortal": [
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "container", "type": "HTMLElement | null", "default": "document.body" }
+            ],
+            "DSDMTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSDMContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'bottom'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'center'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onCloseAutoFocus", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            "DSDMArrow": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "width", "type": "number", "default": "10" },
+                { "name": "height", "type": "number", "default": "5" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMGroup": [
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMLabel": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMCheckboxItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "checked", "type": "boolean | 'indeterminate'", "default": "undefined" },
+                { "name": "onCheckedChange", "type": "(checked: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioGroup": [
+                { "name": "value", "type": "string", "default": "undefined" },
+                { "name": "onValueChange", "type": "(value: string) => void", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMRadioItem": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "value", "type": "string", "default": "required" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "onSelect", "type": "(event: Event) => void", "default": "undefined" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMItemIndicator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSeparator": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSub": [
+                { "name": "defaultOpen", "type": "boolean", "default": "undefined" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" }
+            ],
+            "DSDMSubTrigger": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "textValue", "type": "string", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSDMSubContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "side", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'right'" },
+                { "name": "sideOffset", "type": "number", "default": "0" },
+                { "name": "align", "type": "'start' | 'center' | 'end'", "default": "'start'" },
+                { "name": "alignOffset", "type": "number", "default": "0" },
+                { "name": "avoidCollisions", "type": "boolean", "default": "true" },
+                { "name": "collisionBoundary", "type": "Element | Element[] | null", "default": "[]" },
+                { "name": "collisionPadding", "type": "number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>", "default": "0" },
+                { "name": "arrowPadding", "type": "number", "default": "0" },
+                { "name": "sticky", "type": "'partial' | 'always'", "default": "'partial'" },
+                { "name": "hideWhenDetached", "type": "boolean", "default": "false" },
+                { "name": "loop", "type": "boolean", "default": "false" },
+                { "name": "onEscapeKeyDown", "type": "(event: KeyboardEvent) => void", "default": "undefined" },
+                { "name": "onPointerDownOutside", "type": "(event: PointerDownOutsideEvent) => void", "default": "undefined" },
+                { "name": "onFocusOutside", "type": "(event: FocusOutsideEvent) => void", "default": "undefined" },
+                { "name": "onInteractOutside", "type": "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", "default": "undefined" }
+            ],
+            // COLLAPSIBLE SYSTEM
+            // 
+            "DSC": [
+                { "name": "defaultOpen", "type": "boolean", "default": "false" },
+                { "name": "open", "type": "boolean", "default": "undefined" },
+                { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+                { "name": "disabled", "type": "boolean", "default": "false" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            "DSCTrigger": [
+                { "name": "asChild", "type": "boolean", "default": "false" },
+                { "name": "disabled", "type": "boolean", "default": "false" }
+            ],
+            "DSCContent": [
+                { "name": "className", "type": "string", "default": "undefined" },
+                { "name": "forceMount", "type": "boolean", "default": "undefined" },
+                { "name": "asChild", "type": "boolean", "default": "false" }
+            ],
+            // HOOKS
+            "useDS": [
+                { name: "leftState", type: "expanded | collapsed", default: "readonly", description: "The current state of the sidebar." },
+                { name: "rightState", type: "expanded | collapsed", default: "readonly" },
+                { name: "openLeft", type: "boolean", default: "readonly", description: "Whether the sidebar is open." },
+                { name: "openRight", type: "boolean", default: "readonly" },
+                { name: "setOpenLeft", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar." },
+                { name: "setOpenRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "openMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is open on mobile." },
+                { name: "openMobileRight", type: "boolean", default: "readonly", description: "" },
+                { name: "setOpenMobile", type: "(open: boolean) => void", default: "readonly", description: "Sets the open state of the sidebar on mobile." },
+                { name: "setOpenMobileRight", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "toggleLeft", type: "() => void", default: "readonly", description: "Toggles the sidebar. Desktop and mobile." },
+                { name: "toggleRight", type: "() => void", default: "readonly", description: "" },
+                { name: "isMobile", type: "boolean", default: "readonly", description: "Whether the sidebar is on mobile." },
+                { name: "sidebarWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "leftVariant", type: "SidebarVariant", default: "readonly", description: "States the current variant type, this is more so used within the source file." },
+                { name: "rightVariant", type: "SidebarVariant", default: "readonly", description: "" },
+                { name: "setLeftVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "Sets the state the current variant type, this is more so used within the source file" },
+                { name: "setRightVariant", type: "(variant: SidebarVariant) => void", default: "readonly", description: "" },
+                { name: "isIconLeftActive", type: "boolean", default: "readonly", description: "Checks if icon sidebars are actively used." },
+                { name: "isIconRightActive", type: "boolean", default: "readonly", description: "" },
+                { name: "setIsIconLeftActive", type: "(open: boolean) => void", default: "readonly", description: "Sets isIconLeftActive state, used within the source file." },
+                { name: "setIsIconRightActive", type: "(open: boolean) => void", default: "readonly", description: "" },
+                { name: "iconLeftWidth", type: "number", default: "readonly", description: "Controls the default width value." },
+                { name: "iconRightWidth", type: "number", default: "readonly", description: "" },
+                { name: "setIconLeftWidth", type: "(width: number) => void", default: "readonly", description: "Sets setIconLeftWidth state, used within the source file." },
+                { name: "setIconRightWidth", type: "(width: number) => void", default: "readonly", description: "" },
+                { name: "topHeight", type: "string", default: "readonly", description: "Sets height for inset variant styles." },
+                { name: "setTopHeight", type: "(height: string) => void", default: "readonly", description: "" },
+                { name: "bottomHeight", type: "string", default: "readonly", description: "" },
+                { name: "setBottomHeight", type: "(height: string) => void", default: "readonly", description: "" }
+            ],
+            "useDSTheme": [
+                { name: "theme", type: "DSTheme", default: "readonly" },
+                { name: "setTheme", type: "(theme: DSTheme) => void", default: "readonly" },
+                { name: "themeVars", type: "Record<string, string>", default: "readonly" }
+            ]
+        },
+        desc: "Shadcn's original sidebar. Reverting it back to its original untouched state. If you would like an upgraded, and largely expanded version, see Dual Sidebar ( remix-run ) and Dual Sidebar Agnostic ( to be used with any platform ).",
+        customize: null
+    },
+    {
+        name: "ModalV1",
+        value: "modal-1",
+        importPath: "~/components/catalyst-ui/overlays/modal-integrations-1",
+        multiImport: null,
+        path: "/components/catlyst-ui/components/overlay/modal-integrations-1.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+// Types
+export type ModalVariant = "default" | "alert" | "confirmation" | "success" | "error";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  variant?: ModalVariant;
+  showCloseButton?: boolean;
+  children?: React.ReactNode;
+  size?: "sm" | "md" | "lg" | "xl";
+  overlayClassName?: string;
+  contentClassName?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  variant = "default",
+  showCloseButton = true,
+  children,
+  size = "md",
+  overlayClassName,
+  contentClassName,
+}: ModalProps) {
+  if (!open) return null;
+
+  // Handle escape key press
+  useState(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  });
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  // Get icon based on variant
+  const getIcon = () => {
+    switch (variant) {
+      case "alert":
+        return <AlertCircle className="h-6 w-6 text-yellow-500" />;
+      case "confirmation":
+        return <Info className="h-6 w-6 text-blue-500" />;
+      case "success":
+        return <CheckCircle2 className="h-6 w-6 text-green-500" />;
+      case "error":
+        return <AlertTriangle className="h-6 w-6 text-red-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+  };
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm",
+        overlayClassName
+      )}
+      onClick={handleOverlayClick}
+    >
+      <div
+        className={cn(
+          "relative w-full rounded-lg bg-background p-6 shadow-lg",
+          sizeClasses[size],
+          contentClassName
+        )}
+      >
+        {showCloseButton && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-4"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        )}
+
+        <div className="flex items-start gap-4">
+          {variant !== "default" && <div className="mt-0.5">{getIcon()}</div>}
+          
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-foreground">
+              {title}
+            </h3>
+            
+            {description && (
+              <p className="mt-2 text-sm text-muted-foreground">
+                {description}
+              </p>
+            )}
+            
+            {children && (
+              <div className="mt-4">
+                {children}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Confirmation Modal Component
+interface ConfirmationModalProps extends Omit<ModalProps, "children" | "variant"> {
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  destructive?: boolean;
+}
+
+export function ConfirmationModal({
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+  ...props
+}: ConfirmationModalProps) {
+  const handleCancel = () => {
+    onCancel?.();
+    props.onClose();
+  };
+
+  const handleConfirm = () => {
+    onConfirm();
+    props.onClose();
+  };
+
+  return (
+    <Modal {...props} variant="confirmation">
+      <div className="mt-6 flex justify-end gap-3">
+        <Button variant="outline" onClick={handleCancel}>
+          {cancelText}
+        </Button>
+        <Button
+          variant={destructive ? "destructive" : "default"}
+          onClick={handleConfirm}
+        >
+          {confirmText}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+// Alert Modal Component
+interface AlertModalProps extends Omit<ModalProps, "children" | "variant"> {
+  buttonText?: string;
+  onButtonClick?: () => void;
+}
+
+export function AlertModal({
+  buttonText = "OK",
+  onButtonClick,
+  ...props
+}: AlertModalProps) {
+  const handleButtonClick = () => {
+    onButtonClick?.();
+    props.onClose();
+  };
+
+  return (
+    <Modal {...props} variant="alert">
+      <div className="mt-6 flex justify-end">
+        <Button onClick={handleButtonClick}>
+          {buttonText}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+// Demo Component
+export function ModalIntegrationsDemo() {
+  const [defaultOpen, setDefaultOpen] = useState(false);
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [successOpen, setSuccessOpen] = useState(false);
+  const [errorOpen, setErrorOpen] = useState(false);
+
+  return (
+    <div className="p-6 space-y-4">
+      <h2 className="text-2xl font-bold">Modal Demonstrations</h2>
+      
+      <div className="flex flex-wrap gap-4">
+        <Button onClick={() => setDefaultOpen(true)}>
+          Open Default Modal
+        </Button>
+        
+        <Button onClick={() => setAlertOpen(true)}>
+          Open Alert Modal
+        </Button>
+        
+        <Button onClick={() => setConfirmOpen(true)}>
+          Open Confirmation Modal
+        </Button>
+        
+        <Button onClick={() => setSuccessOpen(true)}>
+          Open Success Modal
+        </Button>
+        
+        <Button onClick={() => setErrorOpen(true)}>
+          Open Error Modal
+        </Button>
+      </div>
+
+      {/* Default Modal */}
+      <Modal
+        open={defaultOpen}
+        onClose={() => setDefaultOpen(false)}
+        title="Default Modal"
+        description="This is a default modal with some sample content."
+      >
+        <div className="mt-4 p-4 border rounded-md bg-muted/20">
+          <p className="text-sm">Additional content can be placed here.</p>
+        </div>
+      </Modal>
+
+      {/* Alert Modal */}
+      <AlertModal
+        open={alertOpen}
+        onClose={() => setAlertOpen(false)}
+        title="Alert"
+        description="This is an important alert message!"
+        buttonText="Got it"
+      />
+
+      {/* Confirmation Modal */}
+      <ConfirmationModal
+        open={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        title="Confirm Action"
+        description="Are you sure you want to proceed with this action?"
+        confirmText="Yes, proceed"
+        cancelText="No, cancel"
+        onConfirm={() => console.log("Action confirmed")}
+      />
+
+      {/* Success Modal */}
+      <Modal
+        open={successOpen}
+        onClose={() => setSuccessOpen(false)}
+        title="Success!"
+        description="Your action was completed successfully."
+        variant="success"
+      >
+        <div className="mt-4 flex justify-end">
+          <Button onClick={() => setSuccessOpen(false)}>
+            Continue
+          </Button>
+        </div>
+      </Modal>
+
+      {/* Error Modal */}
+      <Modal
+        open={errorOpen}
+        onClose={() => setErrorOpen(false)}
+        title="Error"
+        description="Something went wrong with your request."
+        variant="error"
+      >
+        <div className="mt-4 flex justify-end">
+          <Button variant="destructive" onClick={() => setErrorOpen(false)}>
+            Dismiss
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}`,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react", "lucide-react"],
+        basicusage: `
+<Modal>
+    Content
+</Modal>
+
+<Modal open="" onClose={() => {}} title="" description="" variant="default" showCloseButton=true children="" size="md" overlayClassName="" contentClassName={() => {}}>
+    Content
+</Modal>`,
+        usage: null,
+        usagePath: "/components/catalyst-ui/components/overlay/modal-integrations-1",
+        props: {
+            "Modal": [
+                { name: "open", type: "string", default: null },
+                { name: "onClose", type: "string", default: null },
+                { name: "title", type: "string", default: null },
+                { name: "description", type: "string", default: null },
+                { name: "variant", type: "string", default: "default" },
+                { name: "showCloseButton", type: "boolean", default: true },
+                { name: "children", type: "string", default: null },
+                { name: "size", type: "string", default: "md" },
+                { name: "overlayClassName", type: "string", default: null },
+                { name: "contentClassName", type: "string", default: null }
+            ],
+            "ConfirmationModal": [
+                { name: "confirmText", type: "string", default: "Confirm" },
+                { name: "cancelText", type: "string", default: "Cancel" },
+                { name: "onConfirm", type: "string", default: null },
+                { name: "onCancel", type: "string", default: null },
+                { name: "destructive", type: "boolean", default: false },
+                { name: "props", type: "any", default: null }
+            ],
+            "AlertModal": [
+                { name: "buttonText", type: "string", default: "OK" },
+                { name: "onButtonClick", type: "string", default: null },
+                { name: "props", type: "any", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Transitionable Portal",
+        value: "transitionable-portal",
+        importPath: "~/components/catalyst-ui/overlays/transitionable-portal",
+        multiImport: null,
+        path: "/components/catalyst-ui/components/overlay/transitionable-portal.tsx",
+        premium: true,
+        source: null,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react", "react-dom", "lucide-react"],
+        basicusage: `
+<TransitionablePortal>
+    Content
+</TransitionablePortal>
+
+<TransitionablePortal children="" open="" onOpen={() => {}} onClose={() => {}} closeOnDocumentClick=true closeOnEscape=true trigger="" transition="fade" duration=300 className="" overlayClassName="" contentClassName={() => {}} showCloseButton=false portal="">
+    Content
+</TransitionablePortal>`,
+        usage: null,
+        usagePath: "/components/catalyst-ui/components/overlay/transitionable-portal.tsx",
+        props: {
+            "TransitionablePortal": [
+                { name: "children", type: "string", default: null },
+                { name: "open", type: "string", default: null },
+                { name: "onOpen", type: "string", default: null },
+                { name: "onClose", type: "string", default: null },
+                { name: "closeOnDocumentClick", type: "boolean", default: true },
+                { name: "closeOnEscape", type: "boolean", default: true },
+                { name: "trigger", type: "string", default: null },
+                { name: "transition", type: "string", default: "fade" },
+                { name: "duration", type: "number", default: 300 },
+                { name: "className", type: "string", default: null },
+                { name: "overlayClassName", type: "string", default: null },
+                { name: "contentClassName", type: "string", default: null },
+                { name: "showCloseButton", type: "boolean", default: false },
+                { name: "portal", type: "string", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Modal Integrations",
+        value: "modal-integrations",
+        importPath: "~/components/catalyst-ui/overlays/modal-integrations",
+        multiImport: "Modal, ConfirmationModal, AlertModal",
+        path: "/components/catlyst-ui/components/overlay/modal-integrations.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+// Types
+export type ModalVariant = "default" | "alert" | "confirmation" | "success" | "error";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  variant?: ModalVariant;
+  showCloseButton?: boolean;
+  children?: React.ReactNode;
+  size?: "sm" | "md" | "lg" | "xl";
+  overlayClassName?: string;
+  contentClassName?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  variant = "default",
+  showCloseButton = true,
+  children,
+  size = "md",
+  overlayClassName,
+  contentClassName,
+}: ModalProps) {
+  if (!open) return null;
+
+  // Handle escape key press
+  useState(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  });
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  // Get icon based on variant
+  const getIcon = () => {
+    switch (variant) {
+      case "alert":
+        return <AlertCircle className="h-6 w-6 text-yellow-500" />;
+      case "confirmation":
+        return <Info className="h-6 w-6 text-blue-500" />;
+      case "success":
+        return <CheckCircle2 className="h-6 w-6 text-green-500" />;
+      case "error":
+        return <AlertTriangle className="h-6 w-6 text-red-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+  };
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm",
+        overlayClassName
+      )}
+      onClick={handleOverlayClick}
+    >
+      <div
+        className={cn(
+          "relative w-full rounded-lg bg-background p-6 shadow-lg",
+          sizeClasses[size],
+          contentClassName
+        )}
+      >
+        {showCloseButton && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-4"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        )}
+
+        <div className="flex items-start gap-4">
+          {variant !== "default" && <div className="mt-0.5">{getIcon()}</div>}
+          
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-foreground">
+              {title}
+            </h3>
+            
+            {description && (
+              <p className="mt-2 text-sm text-muted-foreground">
+                {description}
+              </p>
+            )}
+            
+            {children && (
+              <div className="mt-4">
+                {children}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Confirmation Modal Component
+interface ConfirmationModalProps extends Omit<ModalProps, "children" | "variant"> {
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  destructive?: boolean;
+}
+
+export function ConfirmationModal({
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+  ...props
+}: ConfirmationModalProps) {
+  const handleCancel = () => {
+    onCancel?.();
+    props.onClose();
+  };
+
+  const handleConfirm = () => {
+    onConfirm();
+    props.onClose();
+  };
+
+  return (
+    <Modal {...props} variant="confirmation">
+      <div className="mt-6 flex justify-end gap-3">
+        <Button variant="outline" onClick={handleCancel}>
+          {cancelText}
+        </Button>
+        <Button
+          variant={destructive ? "destructive" : "default"}
+          onClick={handleConfirm}
+        >
+          {confirmText}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+// Alert Modal Component
+interface AlertModalProps extends Omit<ModalProps, "children" | "variant"> {
+  buttonText?: string;
+  onButtonClick?: () => void;
+}
+
+export function AlertModal({
+  buttonText = "OK",
+  onButtonClick,
+  ...props
+}: AlertModalProps) {
+  const handleButtonClick = () => {
+    onButtonClick?.();
+    props.onClose();
+  };
+
+  return (
+    <Modal {...props} variant="alert">
+      <div className="mt-6 flex justify-end">
+        <Button onClick={handleButtonClick}>
+          {buttonText}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+// Demo Component
+export function ModalIntegrationsDemo() {
+  const [defaultOpen, setDefaultOpen] = useState(false);
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [successOpen, setSuccessOpen] = useState(false);
+  const [errorOpen, setErrorOpen] = useState(false);
+
+  return (
+    <div className="p-6 space-y-4">
+      <h2 className="text-2xl font-bold">Modal Demonstrations</h2>
+      
+      <div className="flex flex-wrap gap-4">
+        <Button onClick={() => setDefaultOpen(true)}>
+          Open Default Modal
+        </Button>
+        
+        <Button onClick={() => setAlertOpen(true)}>
+          Open Alert Modal
+        </Button>
+        
+        <Button onClick={() => setConfirmOpen(true)}>
+          Open Confirmation Modal
+        </Button>
+        
+        <Button onClick={() => setSuccessOpen(true)}>
+          Open Success Modal
+        </Button>
+        
+        <Button onClick={() => setErrorOpen(true)}>
+          Open Error Modal
+        </Button>
+      </div>
+
+      {/* Default Modal */}
+      <Modal
+        open={defaultOpen}
+        onClose={() => setDefaultOpen(false)}
+        title="Default Modal"
+        description="This is a default modal with some sample content."
+      >
+        <div className="mt-4 p-4 border rounded-md bg-muted/20">
+          <p className="text-sm">Additional content can be placed here.</p>
+        </div>
+      </Modal>
+
+      {/* Alert Modal */}
+      <AlertModal
+        open={alertOpen}
+        onClose={() => setAlertOpen(false)}
+        title="Alert"
+        description="This is an important alert message!"
+        buttonText="Got it"
+      />
+
+      {/* Confirmation Modal */}
+      <ConfirmationModal
+        open={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        title="Confirm Action"
+        description="Are you sure you want to proceed with this action?"
+        confirmText="Yes, proceed"
+        cancelText="No, cancel"
+        onConfirm={() => console.log("Action confirmed")}
+      />
+
+      {/* Success Modal */}
+      <Modal
+        open={successOpen}
+        onClose={() => setSuccessOpen(false)}
+        title="Success!"
+        description="Your action was completed successfully."
+        variant="success"
+      >
+        <div className="mt-4 flex justify-end">
+          <Button onClick={() => setSuccessOpen(false)}>
+            Continue
+          </Button>
+        </div>
+      </Modal>
+
+      {/* Error Modal */}
+      <Modal
+        open={errorOpen}
+        onClose={() => setErrorOpen(false)}
+        title="Error"
+        description="Something went wrong with your request."
+        variant="error"
+      >
+        <div className="mt-4 flex justify-end">
+          <Button variant="destructive" onClick={() => setErrorOpen(false)}>
+            Dismiss
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}`,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react", "lucide-react"],
+        basicusage: `
+<Modal>
+    Content
+</Modal>
+
+<Modal open="" onClose={() => {}} title="" description="" variant="default" showCloseButton=true children="" size="md" overlayClassName="" contentClassName={() => {}}>
+    Content
+</Modal>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "Modal": [
+                { name: "open", type: "string", default: null },
+                { name: "onClose", type: "string", default: null },
+                { name: "title", type: "string", default: null },
+                { name: "description", type: "string", default: null },
+                { name: "variant", type: "string", default: "default" },
+                { name: "showCloseButton", type: "boolean", default: true },
+                { name: "children", type: "string", default: null },
+                { name: "size", type: "string", default: "md" },
+                { name: "overlayClassName", type: "string", default: null },
+                { name: "contentClassName", type: "string", default: null }
+            ],
+            "ConfirmationModal": [
+                { name: "confirmText", type: "string", default: "Confirm" },
+                { name: "cancelText", type: "string", default: "Cancel" },
+                { name: "onConfirm", type: "string", default: null },
+                { name: "onCancel", type: "string", default: null },
+                { name: "destructive", type: "boolean", default: false },
+                { name: "props", type: "any", default: null }
+            ],
+            "AlertModal": [
+                { name: "buttonText", type: "string", default: "OK" },
+                { name: "onButtonClick", type: "string", default: null },
+                { name: "props", type: "any", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Loading Overlay",
+        value: "loading-overlay",
+        importPath: "~/components/catalyst-ui/overlays/loading-overlay",
+        path: "/components/catalyst-ui/components/overlay/loading-overlay.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/components/overlay/loading-overlay.tsx",
+        basicusage: `
+const [visible, setVisible] = useState(false)
+
+<LoadingOverlay visible={visible} />
+        `,
+        usage: null,
+        premium: true,
+        category: "Overlay",
+        tags: ["overlay", "loading", "spinner"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "visible", type: "boolean", default: "false" },
+            { name: "loaderProps", type: "props", default: "null" },
+            { name: "overlayProps", type: "props", default: "null" },
+            { name: "className", type: "string", default: "null" },
+            { name: "zIndex", type: "int", default: 1000 },
+        ],
+        props2: [],
+        desc: "Check source file for usage. Loading overlay component with customizable spinner and backdrop",
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Overlay Panel",
+        value: "overlay-panel",
+        importPath: "~/components/catalyst-ui/overlays/overlay-panel",
+        path: "/components/catalyst-ui/components/overlay/overlay-panel.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+
+export type OverlayPanelProps = {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  className?: string;
+  closeOnClickOutside?: boolean;
+  showCloseButton?: boolean;
+  placement?: "top" | "right" | "bottom" | "left";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export function OverlayPanel({
+  children,
+  content,
+  className,
+  closeOnClickOutside = true,
+  showCloseButton = true,
+  placement = "bottom",
+  open,
+  onOpenChange,
+}: OverlayPanelProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const controlled = open !== undefined;
+  const panelOpen = controlled ? open : isOpen;
+
+  const handleOpenChange = (open: boolean) => {
+    if (!controlled) {
+      setIsOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+
+  const handleClose = () => {
+    handleOpenChange(false);
+  };
+
+  return (
+    <Popover open={panelOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent
+        className={cn("w-80 p-4", className)}
+        align={placement}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <div className="relative">
+          {showCloseButton && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-0 top-0 h-6 w-6"
+              onClick={handleClose}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+          <div className={showCloseButton ? "pr-6" : ""}>
+            {content}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}`,
+        basicusage: `
+
+
+function ExampleComponent() {
+  return (
+    <OverlayPanel
+      content={
+        <div className="space-y-4">
+          <h3 className="font-semibold">Panel Title</h3>
+          <p className="text-sm text-muted-foreground">
+            This is the content of the overlay panel.
+          </p>
+          <Button size="sm">Action</Button>
+        </div>
+      }
+      placement="right"
+      showCloseButton={true}
+    >
+      <Button>Open Panel</Button>
+    </OverlayPanel>
+  );
+}`,
+        usage: `
+
+<OverlayPanel
+    content={
+        <div className="space-y-4">
+            <h3 className="font-semibold">Basic Panel</h3>
+            <p className="text-sm text-muted-foreground">
+                This is a basic overlay panel with some content. You can put any
+                content here including forms, images, or other components.
+            </p>
+            <Button size="sm">Action</Button>
+        </div>
+    }
+>
+
+<OverlayPanel
+  placement="right"
+  content={
+    <div className="space-y-4">
+      <h3 className="font-semibold">Right Aligned</h3>
+      <p className="text-sm text-muted-foreground">
+        This panel appears on the right side of the trigger.
+      </p>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Confirm</Button>
+      </div>
+    </div>
+  }
+>
+  <Button variant="outline">Right Panel</Button>
+</OverlayPanel>
+
+<OverlayPanel
+  showCloseButton={false}
+  content={
+    <div className="space-y-4">
+      <h3 className="font-semibold">No Close Button</h3>
+      <p className="text-sm text-muted-foreground">
+        This panel doesn't have a close button. Click outside to close.
+      </p>
+      <Button variant="outline" size="sm" onClick={() => { }}>
+        Close Programmatically
+      </Button>
+    </div>
+  }
+>
+  <Button variant="outline">No Close Button</Button>
+</OverlayPanel>
+
+<OverlayPanel
+  className="w-96"
+  content={
+    <div className="space-y-4">
+      <h3 className="font-semibold">Wider Panel</h3>
+      <p className="text-sm text-muted-foreground">
+        This panel has custom width and more content area for larger
+        content displays.
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        <Button variant="outline" size="sm">
+          Option 1
+        </Button>
+        <Button variant="outline" size="sm">
+          Option 2
+        </Button>
+        <Button variant="outline" size="sm">
+          Option 3
+        </Button>
+        <Button variant="outline" size="sm">
+          Option 4
+        </Button>
+      </div>
+    </div>
+  }
+>
+  <Button variant="outline">Wider Panel</Button>
+</OverlayPanel>
+
+<OverlayPanel
+  open={customOpen}
+  onOpenChange={setCustomOpen}
+  content={
+    <div className="space-y-4">
+      <h3 className="font-semibold">Controlled Panel</h3>
+      <p className="text-sm text-muted-foreground">
+        This panel is controlled by external state.
+      </p>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setCustomOpen(false)}
+      >
+        Close
+      </Button>
+    </div>
+  }
+>
+  <Button onClick={() => setCustomOpen(true)}>
+    Controlled Panel
+  </Button>
+</OverlayPanel>
+
+<OverlayPanel
+  placement="top"
+  content={
+    <div className="space-y-4">
+      <h3 className="font-semibold">Top Panel</h3>
+      <p className="text-sm text-muted-foreground">
+        This panel appears above the trigger element.
+      </p>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Save</Button>
+      </div>
+    </div>
+  }
+>
+  <Button variant="outline">Top Panel</Button>
+</OverlayPanel>
+          `,
+        usagePath: null,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: [],
+        props: [
+            { "name": "children", "type": "React.ReactNode", "default": "undefined", "required": true },
+            { "name": "content", "type": "React.ReactNode", "default": "undefined", "required": true },
+            { "name": "className", "type": "string", "default": "undefined" },
+            { "name": "closeOnClickOutside", "type": "boolean", "default": "true" },
+            { "name": "showCloseButton", "type": "boolean", "default": "true" },
+            { "name": "placement", "type": "'top' | 'right' | 'bottom' | 'left'", "default": "'bottom'" },
+            { "name": "open", "type": "boolean", "default": "undefined" },
+            { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" }
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "modal integrations",
+        value: "modal-integrations",
+        importPath: "~/components/catalyst-ui/overlays/modal-integrations",
+        path: "/components/catalyst-ui/components/overlay/modal-integrations.tsx",
+        premium: true,
+        source: null,
+        usage: null,
+        usagePath: null,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+            { name: "size", type: "sm | md | lg | xl", default: "md" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "confirm popup",
+        value: "confirm-popup",
+        importPath: "~/components/catalyst-ui/overlays/confirm-popup",
+        path: "/components/catalyst-ui/components/overlay/confirm-popup.tsx",
+        premium: true,
+        source: ``,
+        basicusage: `
+
+
+function ExampleComponent() {
+  return (
+    <ConfirmPopup
+      title="Delete Item"
+      message="Are you sure you want to delete this item?"
+      onConfirm={() => console.log("Item deleted")}
+      acceptLabel="Delete"
+      rejectLabel="Cancel"
+      variant="danger"
+    >
+      <Button variant="destructive">Delete Item</Button>
+    </ConfirmPopup>
+  );
+}
+`,
+        usage: `
+   <ConfirmPopup
+          title="Delete Item"
+          message="Are you sure you want to delete this item? This action cannot be undone."
+          onConfirm={() => console.log("Item deleted")}
+          acceptLabel="Delete"
+          rejectLabel="Cancel"
+          variant="danger"
+        >
+          <Button variant="destructive">Danger Variant</Button>
+        </ConfirmPopup>
+
+        <ConfirmPopup
+          title="Confirm Action"
+          message="Do you want to proceed with this action?"
+          onConfirm={() => console.log("Action confirmed")}
+          variant="default"
+        >
+          <Button>Default Variant</Button>
+        </ConfirmPopup>
+
+        <ConfirmPopup
+          title="Warning"
+          message="This action might have unintended consequences. Are you sure?"
+          onConfirm={() => console.log("Warning action confirmed")}
+          variant="warning"
+        >
+          <Button variant="outline">Warning Variant</Button>
+        </ConfirmPopup>
+
+        <ConfirmPopup
+          title="Information"
+          message="You need to confirm this information before proceeding."
+          onConfirm={() => console.log("Info action confirmed")}
+          variant="info"
+        >
+          <Button variant="outline">Info Variant</Button>
+        </ConfirmPopup>
+
+        <ConfirmPopup
+          title="Success"
+          message="Your action was completed successfully. Would you like to continue?"
+          onConfirm={() => console.log("Success action confirmed")}
+          variant="success"
+        >
+          <Button variant="default">Success Variant</Button>
+        </ConfirmPopup>
+
+        <ConfirmPopup
+          title="Controlled Example"
+          message="This popup is controlled by external state."
+          onConfirm={() => setShowSuccessPopup(false)}
+          onCancel={() => setShowSuccessPopup(false)}
+          open={showSuccessPopup}
+          onOpenChange={setShowSuccessPopup}
+          variant="success"
+        >
+          <Button onClick={() => setShowSuccessPopup(true)}>
+            Controlled Popup
+          </Button>
+        </ConfirmPopup>
+`,
+        usagePath: null,
+        category: "Overlay",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { "name": "children", "type": "React.ReactNode", "default": "undefined", "required": true },
+            { "name": "title", "type": "string", "default": "undefined" },
+            { "name": "message", "type": "string", "default": "undefined", "required": true },
+            { "name": "onConfirm", "type": "() => void", "default": "undefined", "required": true },
+            { "name": "onCancel", "type": "() => void", "default": "undefined" },
+            { "name": "acceptLabel", "type": "string", "default": "\"Yes\"" },
+            { "name": "rejectLabel", "type": "string", "default": "\"No\"" },
+            { "name": "variant", "type": "\"default\" | \"danger\" | \"warning\" | \"info\" | \"success\"", "default": "\"default\"" },
+            { "name": "open", "type": "boolean", "default": "undefined" },
+            { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" }
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Popconfirm",
+        value: "popconfirm",
+        importPath: "~/components/catalyst-ui/overlays/popconfirm",
+        path: "/components/catlyst-ui/components/overlay/popconfirm.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+
+
+
+
+
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const popconfirmVariants = cva(
+  "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      variant: {
+        default: "",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100",
+        danger: "border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100",
+        info: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100",
+        success: "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100",
+      },
+      size: {
+        default: "w-72",
+        sm: "w-64",
+        lg: "w-80",
+        xl: "w-96",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+    VariantProps<typeof popconfirmVariants>
+>(({ className, variant, size, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(popconfirmVariants({ variant, size }), className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+interface PopconfirmProps {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  okText?: string;
+  cancelText?: string;
+  variant?: "default" | "warning" | "danger" | "info" | "success";
+  size?: "default" | "sm" | "lg" | "xl";
+  placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  disabled?: boolean;
+  showIcon?: boolean;
+  icon?: React.ReactNode;
+  okButtonProps?: React.ComponentProps<typeof Button>;
+  cancelButtonProps?: React.ComponentProps<typeof Button>;
+  className?: string;
+  contentClassName?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: "click" | "hover" | "focus";
+}
+
+const getIcon = (variant: PopconfirmProps["variant"]) => {
+  switch (variant) {
+    case "warning":
+      return <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />;
+    case "danger":
+      return <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
+    case "info":
+      return <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />;
+    case "success":
+      return <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />;
+    default:
+      return <AlertTriangle className="h-4 w-4 text-muted-foreground" />;
+  }
+};
+
+export function Popconfirm({
+  children,
+  title = "Are you sure?",
+  description,
+  okText = "Yes",
+  cancelText = "No",
+  variant = "default",
+  size = "default",
+  placement = "top",
+  onConfirm,
+  onCancel,
+  disabled = false,
+  showIcon = true,
+  icon,
+  okButtonProps = {},
+  cancelButtonProps = {},
+  className,
+  contentClassName,
+  open,
+  onOpenChange,
+  trigger = "click",
+  ...props
+}: PopconfirmProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const isControlled = open !== undefined;
+  const openState = isControlled ? open : isOpen;
+  const setOpenState = isControlled ? onOpenChange : setIsOpen;
+
+  const handleConfirm = async () => {
+    if (onConfirm) {
+      try {
+        setLoading(true);
+        await onConfirm();
+        setOpenState?.(false);
+      } catch (error) {
+        console.error("Error in onConfirm:", error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      setOpenState?.(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    setOpenState?.(false);
+  };
+
+  const sideMap = {
+    "top": "top",
+    "bottom": "bottom",
+    "left": "left",
+    "right": "right",
+    "top-start": "top",
+    "top-end": "top",
+    "bottom-start": "bottom",
+    "bottom-end": "bottom",
+    "left-start": "left",
+    "left-end": "left",
+    "right-start": "right",
+    "right-end": "right",
+  } as const;
+
+  const alignMap = {
+    "top": "center",
+    "bottom": "center",
+    "left": "center",
+    "right": "center",
+    "top-start": "start",
+    "top-end": "end",
+    "bottom-start": "start",
+    "bottom-end": "end",
+    "left-start": "start",
+    "left-end": "end",
+    "right-start": "start",
+    "right-end": "end",
+  } as const;
+
+  const triggerProps = React.useMemo(() => {
+    const props: any = {};
+    
+    if (trigger === "hover") {
+      props.onMouseEnter = () => setOpenState?.(true);
+      props.onMouseLeave = () => setOpenState?.(false);
+    } else if (trigger === "focus") {
+      props.onFocus = () => setOpenState?.(true);
+      props.onBlur = () => setOpenState?.(false);
+    }
+    
+    return props;
+  }, [trigger, setOpenState]);
+
+  const displayIcon = icon || (showIcon ? getIcon(variant) : null);
+  const okVariant = variant === "danger" ? "destructive" : "default";
+
+  return (
+    <Popover open={openState} onOpenChange={setOpenState}>
+      <PopoverTrigger asChild disabled={disabled} {...triggerProps}>
+        <span className={cn("cursor-pointer", disabled && "cursor-not-allowed opacity-50", className)}>
+          {children}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent
+        variant={variant}
+        size={size}
+        side={sideMap[placement]}
+        align={alignMap[placement]}
+        className={contentClassName}
+      >
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            {displayIcon && (
+              <div className="flex-shrink-0 mt-0.5">
+                {displayIcon}
+              </div>
+            )}
+            <div className="space-y-1">
+              <div className="font-medium text-sm leading-5">
+                {title}
+              </div>
+              {description && (
+                <div className="text-sm text-muted-foreground leading-5">
+                  {description}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleCancel}
+              disabled={loading}
+              {...cancelButtonProps}
+            >
+              {cancelText}
+            </Button>
+            <Button
+              variant={okVariant}
+              size="sm"
+              onClick={handleConfirm}
+              loading={loading}
+              {...okButtonProps}
+            >
+              {okText}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+Popconfirm.displayName = "Popconfirm";
+`,
+        category: "Overlay",
+        tags: ["utils", "auth", "user auth"],
+        features: ["utils", "auth", "user auth"],
+        dependencies: ["@radix-ui/react-popover", "class-variance-authority", "lucide-react"],
+        usage: `
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const addMessage = (message: string) => {
+    setMessages(prev => [...prev, message]);
+    setTimeout(() => {
+      setMessages(prev => prev.slice(1));
+    }, 3000);
+  };
+
+  const handleDelete = () => {
+    addMessage("Item deleted successfully!");
+  };
+
+  const handleEdit = () => {
+    addMessage("Edit confirmed!");
+  };
+
+  const handleDownload = () => {
+    addMessage("Download started!");
+  };
+
+  const handleLogout = () => {
+    addMessage("Logged out successfully!");
+  };
+
+  const handleAsyncAction = async () => {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    addMessage("Async action completed!");
+  };
+  
+  Basic Examples
+   <Popconfirm
+                  title="Delete this item?"
+                  description="This action cannot be undone."
+                  onConfirm={handleDelete}
+                >
+                  <Button variant="destructive" size="sm">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete Item
+                  </Button>
+                </Popconfirm>
+  <Popconfirm
+                  title="Save changes?"
+                  onConfirm={handleEdit}
+                >
+                  <Button variant="outline" size="sm">
+                    <Edit className="h-4 w-4 mr-2" />
+                    Edit
+                  </Button>
+                </Popconfirm>
+  <Popconfirm
+                  title="Download file?"
+                  description="File will be downloaded to your default location."
+                  okText="Download"
+                  cancelText="Cancel"
+                  onConfirm={handleDownload}
+                >
+                  <Button size="sm">
+                    <Download className="h-4 w-4 mr-2" />
+                    Download
+                  </Button>
+                </Popconfirm>
+  Variants
+   <Popconfirm
+                  variant="warning"
+                  title="Warning Action"
+                  description="This action requires your attention."
+                  onConfirm={() => addMessage("Warning action confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    Warning Style
+                  </Button>
+                </Popconfirm>
+  <Popconfirm
+                  variant="danger"
+                  title="Dangerous Action"
+                  description="This action is irreversible."
+                  okText="Delete"
+                  onConfirm={() => addMessage("Dangerous action confirmed")}
+                >
+                  <Button variant="destructive" size="sm">
+                    Danger Style
+                  </Button>
+                </Popconfirm>
+ <Popconfirm
+                  variant="info"
+                  title="Information"
+                  description="This will update your settings."
+                  okText="Update"
+                  onConfirm={() => addMessage("Info action confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    Info Style
+                  </Button>
+                </Popconfirm>
+  <Popconfirm
+                  variant="success"
+                  title="Success Action"
+                  description="This will complete the process."
+                  okText="Complete"
+                  onConfirm={() => addMessage("Success action confirmed")}
+                >
+                  <Button size="sm">
+                    Success Style
+                  </Button>
+                </Popconfirm>
+  Placements
+  <Popconfirm
+                title="Top placement"
+                placement="top"
+                onConfirm={() => addMessage("Top confirmed")}
+              >
+                <Button variant="outline" size="sm">Top</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Bottom placement"
+                placement="bottom"
+                onConfirm={() => addMessage("Bottom confirmed")}
+              >
+                <Button variant="outline" size="sm">Bottom</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Left placement"
+                placement="left"
+                onConfirm={() => addMessage("Left confirmed")}
+              >
+                <Button variant="outline" size="sm">Left</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Right placement"
+                placement="right"
+                onConfirm={() => addMessage("Right confirmed")}
+              >
+                <Button variant="outline" size="sm">Right</Button>
+              </Popconfirm>
+  <Popconfirm
+                title="Top Start"
+                placement="top-start"
+                onConfirm={() => addMessage("Top start confirmed")}
+              >
+                <Button variant="outline" size="sm">Top Start</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Top End"
+                placement="top-end"
+                onConfirm={() => addMessage("Top end confirmed")}
+              >
+                <Button variant="outline" size="sm">Top End</Button>
+              </Popconfirm>
+   Sizes
+ <Popconfirm
+                  size="sm"
+                  title="Small size"
+                  description="This is a smaller popconfirm."
+                  onConfirm={() => addMessage("Small confirmed")}
+                >
+                  <Button variant="outline" size="sm">Small</Button>
+                </Popconfirm>
+ <Popconfirm
+                  size="default"
+                  title="Default size"
+                  description="This is the default popconfirm size."
+                  onConfirm={() => addMessage("Default confirmed")}
+                >
+                  <Button variant="outline" size="sm">Default</Button>
+                </Popconfirm>
+    <Popconfirm
+                  size="lg"
+                  title="Large size"
+                  description="This is a larger popconfirm with more space for content."
+                  onConfirm={() => addMessage("Large confirmed")}
+                >
+                  <Button variant="outline" size="sm">Large</Button>
+                </Popconfirm>
+ <Popconfirm
+                  size="xl"
+                  title="Extra large size"
+                  description="This is an extra large popconfirm with even more space for longer descriptions and content."
+                  onConfirm={() => addMessage("XL confirmed")}
+                >
+                  <Button variant="outline" size="sm">Extra Large</Button>
+                </Popconfirm>
+  Custom Features
+   <Popconfirm
+                  title="Custom Icon"
+                  description="This uses a custom heart icon."
+                  icon={<Heart className="h-4 w-4 text-red-500" />}
+                  onConfirm={() => addMessage("Custom icon confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    <Heart className="h-4 w-4 mr-2" />
+                    Custom Icon
+                  </Button>
+                </Popconfirm>
+   <Popconfirm
+                  title="No Icon"
+                  description="This popconfirm has no icon."
+                  showIcon={false}
+                  onConfirm={() => addMessage("No icon confirmed")}
+                >
+                  <Button variant="outline" size="sm">No Icon</Button>
+                </Popconfirm>
+ <Popconfirm
+                  title="Async Action"
+                  description="This will take a few seconds to complete."
+                  onConfirm={handleAsyncAction}
+                  okText="Process"
+                >
+                  <Button size="sm">
+                    <Settings className="h-4 w-4 mr-2" />
+                    Async Action
+                  </Button>
+                </Popconfirm>
+   <Popconfirm
+                  title="Custom Button Styles"
+                  description="Custom styled confirm and cancel buttons."
+                  okText="Proceed"
+                  cancelText="Abort"
+                  okButtonProps={{ 
+                    variant: "default",
+                    className: "bg-blue-600 hover:bg-blue-700" 
+                  }}
+                  cancelButtonProps={{ 
+                    variant: "outline",
+                    className: "border-red-200 text-red-600 hover:bg-red-50" 
+                  }}
+                  onConfirm={() => addMessage("Custom buttons confirmed")}
+                >
+                  <Button variant="outline" size="sm">Custom Buttons</Button>
+                </Popconfirm>
+ Interactive Examples
+ <Popconfirm
+                  variant="danger"
+                  title="Sign out of your account?"
+                  description="You will need to sign in again to access your account."
+                  okText="Sign Out"
+                  cancelText="Stay"
+                  onConfirm={handleLogout}
+                >
+                  <Button variant="outline" size="sm" className="w-full">
+                    <LogOut className="h-4 w-4 mr-2" />
+                    Sign Out
+                  </Button>
+                </Popconfirm>
+ <Popconfirm
+                  title="Delete selected items?"
+                  description="3 items will be permanently deleted."
+                  variant="warning"
+                  okText="Delete All"
+                  onConfirm={() => addMessage("3 items deleted")}
+                >
+                  <Button variant="destructive" size="sm" className="w-full">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete Selected (3)
+                  </Button>
+                </Popconfirm>
+  <Popconfirm
+                  title="Archive this conversation?"
+                  description="The conversation will be moved to your archive."
+                  variant="info"
+                  okText="Archive"
+                  onConfirm={() => addMessage("Conversation archived")}
+                >
+                  <Button variant="outline" size="sm" className="w-full">
+                    Archive Chat
+                  </Button>
+                </Popconfirm>
+Usage Examples
+<Popconfirm
+  title="Are you sure?"
+  description="This action cannot be undone."
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+>
+  <Button>Delete</Button>
+</Popconfirm>
+<Popconfirm
+  variant="danger"
+  title="Delete item?"
+  description="This will permanently delete the item."
+  okText="Delete"
+  cancelText="Keep"
+  placement="top-start"
+  size="lg"
+  onConfirm={handleDelete}
+>
+  <Button variant="destructive">Delete</Button>
+</Popconfirm> `,
+        usagePath: null,
+        props: [
+            { "name": "children", "type": "React.ReactNode", "default": "undefined", "required": true },
+            { "name": "title", "type": "string", "default": "\"Are you sure?\"" },
+            { "name": "description", "type": "string", "default": "undefined" },
+            { "name": "okText", "type": "string", "default": "\"Yes\"" },
+            { "name": "cancelText", "type": "string", "default": "\"No\"" },
+            { "name": "variant", "type": "\"default\" | \"warning\" | \"danger\" | \"info\" | \"success\"", "default": "\"default\"" },
+            { "name": "size", "type": "\"default\" | \"sm\" | \"lg\" | \"xl\"", "default": "\"default\"" },
+            { "name": "placement", "type": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"", "default": "\"top\"" },
+            { "name": "onConfirm", "type": "() => void | Promise<void>", "default": "undefined" },
+            { "name": "onCancel", "type": "() => void", "default": "undefined" },
+            { "name": "disabled", "type": "boolean", "default": "false" },
+            { "name": "showIcon", "type": "boolean", "default": "true" },
+            { "name": "icon", "type": "React.ReactNode", "default": "undefined" },
+            { "name": "okButtonProps", "type": "React.ComponentProps<typeof Button>", "default": "{}" },
+            { "name": "cancelButtonProps", "type": "React.ComponentProps<typeof Button>", "default": "{}" },
+            { "name": "className", "type": "string", "default": "undefined" },
+            { "name": "contentClassName", "type": "string", "default": "undefined" },
+            { "name": "open", "type": "boolean", "default": "undefined" },
+            { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+            { "name": "trigger", "type": "\"click\" | \"hover\" | \"focus\"", "default": "\"click\"" }
+        ],
+        desc: null,
+        customize: null
+    },
+];