unkeyed · MichaelUnkey · Jun 4, 2025 · May 30, 2025 · Jun 2, 2025 · Jun 2, 2025
@@ -1,5 +1,5 @@
-import type { StepNamesFrom } from "@/components/dialog-container/navigable-dialog";
 import { CalendarClock, ChartPie, Code, Gauge, Key2 } from "@unkey/icons";
+import type { StepNamesFrom } from "@unkey/ui";
 import type { SectionState } from "./types";
 
 import { UsageSetup } from "./components/credits-setup";

@@ -1,20 +1,20 @@
 "use client";
-import {
-  NavigableDialogBody,
-  NavigableDialogContent,
-  NavigableDialogFooter,
-  NavigableDialogHeader,
-  NavigableDialogNav,
-  NavigableDialogRoot,
-} from "@/components/dialog-container/navigable-dialog";
 import { NavbarActionButton } from "@/components/navigation/action-button";
 import { CopyableIDButton } from "@/components/navigation/copyable-id-button";
 import { Navbar } from "@/components/navigation/navbar";
 import { usePersistedForm } from "@/hooks/use-persisted-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Plus } from "@unkey/icons";
 import type { IconProps } from "@unkey/icons/src/props";
-import { Button } from "@unkey/ui";
+import {
+  Button,
+  NavigableDialogBody,
+  NavigableDialogContent,
+  NavigableDialogFooter,
+  NavigableDialogHeader,
+  NavigableDialogNav,
+  NavigableDialogRoot,
+} from "@unkey/ui";
 import { type FC, useEffect, useState } from "react";
 import { FormProvider } from "react-hook-form";
 import { toast } from "sonner";

@@ -16,7 +16,7 @@ import { z } from "zod";
 
 const DynamicDialogContainer = dynamic(
   () =>
-    import("@/components/dialog-container").then((mod) => ({
+    import("@unkey/ui").then((mod) => ({
       default: mod.DialogContainer,
     })),
   { ssr: false },

@@ -0,0 +1,77 @@
+---
+title: DialogContainer
+summary: The Dialog Container is a flexible modal component that provides a consistent way to display content in a modal dialog. It's built on top of Radix UI's Dialog primitive with additional styling and functionality.
+---
+import { DialogContainerExample } from "./dialog/dialog-container.example"
+
+## Features
+
+- Accessible modal implementation
+- Customizable overlay and content styling
+- Close button with warning support
+- Keyboard navigation support
+- Customizable animations
+- Responsive design
+
+## Structure
+
+The DialogContainer is composed of three main parts:
+
+1. **Header** - Contains the title and optional subtitle
+2. **Content Area** - The main content section where children are rendered
+3. **Footer** - Optional section for actions like buttons or additional information
+
+## Styling
+
+The component comes with default styling that includes:
+
+- Responsive width and height constraints
+- Drop shadow and rounded corners
+- Overlay with backdrop blur
+- Dark mode support
+- Customizable through `className` and `contentClassName` props
+
+## Usage
+
+```tsx
+<DialogContainer
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+  title="Example Dialog"
+  subTitle="Optional subtitle text"
+  footer={
+    <Button onClick={handleAction}>
+      Confirm
+    </Button>
+  }
+>
+  <div>Your dialog content here</div>
+</DialogContainer>
+```
+
+### Basic Example
+
+<DialogContainerExample />
+
+## Props
+
+| Prop              | Type                    | Default   | Description                                      |
+|-------------------|-------------------------|-----------|--------------------------------------------------|
+| isOpen           | boolean                 | -         | Controls the open state of the dialog            |
+| onOpenChange     | (value: boolean) => void | -         | Callback when the open state changes             |
+| title            | string                  | -         | The title of the dialog                          |
+| subTitle         | string                  | -         | Optional subtitle for the dialog                 |
+| footer           | ReactNode               | -         | Optional footer content                          |
+| className        | string                  | -         | Additional classes for the dialog container      |
+| contentClassName | string                  | -         | Additional classes for the dialog content        |
+| preventAutoFocus | boolean                 | true      | Whether to prevent auto-focus on open            |
+| children         | ReactNode               | -         | The content to display in the dialog             |
+
+## Accessibility
+
+The DialogContainer implements the following accessibility features:
+
+- Manages focus trap within the dialog
+- Supports keyboard navigation (Esc to close)
+- Proper ARIA attributes for screen readers
+- Focus management can be controlled via `preventAutoFocus`
@@ -0,0 +1,63 @@
+"use client";
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { DialogContainer } from "@unkey/ui";
+import { Button, Input } from "@unkey/ui";
+import { useState } from "react";
+
+export function DialogContainerExample() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [inputResult, setInputResult] = useState("");
+
+  const handleSubmit = () => {
+    setInputResult(inputValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <RenderComponentWithSnippet>
+      <div className="flex flex-row gap-2 justify-center">
+        <div className="flex flex-col gap-2 w-[200px]">
+          <Button className="text-gray-11 text-[13px]" onClick={() => setIsOpen(!isOpen)}>
+            Open Dialog
+          </Button>
+
+          <DialogContainer
+            isOpen={isOpen}
+            onOpenChange={() => setIsOpen(!isOpen)}
+            subTitle="This is an example of a subTitle. Normally used to describe the dialog"
+            title="Example Dialog Title"
+            footer={
+              <div className="flex flex-col w-full gap-2 items-center justify-center">
+                <Button
+                  type="submit"
+                  variant="primary"
+                  size="lg"
+                  className="w-full"
+                  onClick={() => handleSubmit()}
+                >
+                  Submit
+                </Button>
+                <div className="text-error-11 text-xs">
+                  This is an example of a footer with a button for actions needed to be done
+                </div>
+              </div>
+            }
+          >
+            <div className="flex flex-col text-gray-11 text-[13px] gap-2">
+              <p>Dialog Content</p>
+              <Input
+                placeholder="Example Input"
+                type="text"
+                onChange={(e) => setInputValue(e.target.value)}
+              />
+            </div>
+          </DialogContainer>
+          <p>
+            Input Result: <span className="text-success-6">{inputResult}</span>
+          </p>
+        </div>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
@@ -0,0 +1,101 @@
+"use client";
+
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Book2, Key } from "@unkey/icons";
+import type { IconProps } from "@unkey/icons/src/props";
+import {
+  Button,
+  NavigableDialogBody,
+  NavigableDialogContent,
+  NavigableDialogFooter,
+  NavigableDialogHeader,
+  NavigableDialogNav,
+  NavigableDialogRoot,
+} from "@unkey/ui";
+import { memo, useState } from "react";
+import type { FC } from "react";
+
+// Memoize static content to prevent unnecessary re-renders
+const TabContent = memo(({ title, description }: { title: string; description: string }) => (
+  <div className="p-4">
+    <h3 className="text-lg font-medium mb-2">{title}</h3>
+    <p className="text-gray-11">{description}</p>
+  </div>
+));
+TabContent.displayName = "TabContent";
+
+type TabId = "docs" | "security";
+
+// Pre-define navigation items to prevent recreation on each render
+const NAV_ITEMS: Array<{
+  id: TabId;
+  label: string;
+  icon: FC<IconProps>;
+}> = [
+  {
+    id: "docs",
+    label: "Documentation",
+    icon: Book2,
+  },
+  {
+    id: "security",
+    label: "Security",
+    icon: Key,
+  },
+];
+
+// Pre-define content items using the memoized TabContent
+const CONTENT_ITEMS: Array<{
+  id: TabId;
+  content: JSX.Element;
+}> = [
+  {
+    id: "docs",
+    content: (
+      <TabContent
+        title="Documentation"
+        description="Access comprehensive guides and documentation for the NavigableDialog component."
+      />
+    ),
+  },
+  {
+    id: "security",
+    content: (
+      <TabContent
+        title="Security"
+        description="Review security settings and configurations for your application."
+      />
+    ),
+  },
+];
+
+// Main example component
+export const NavigableDialogExample = memo(() => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <RenderComponentWithSnippet>
+      <div className="flex justify-center">
+        <Button onClick={() => setIsOpen(true)}>Open Example Dialog</Button>
+
+        <NavigableDialogRoot isOpen={isOpen} onOpenChange={setIsOpen} preventAutoFocus>
+          <NavigableDialogHeader
+            title="NavigableDialog Example"
+            subTitle="A simple demonstration"
+          />
+
+          <NavigableDialogBody>
+            <NavigableDialogNav items={NAV_ITEMS} />
+            <NavigableDialogContent items={CONTENT_ITEMS} />
+          </NavigableDialogBody>
+
+          <NavigableDialogFooter>
+            <Button onClick={() => setIsOpen(false)}>Close</Button>
+          </NavigableDialogFooter>
+        </NavigableDialogRoot>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+});
+
+NavigableDialogExample.displayName = "NavigableDialogExample";