@truefoundry/agent-ui-sdk 0.0.1 → 0.0.2

package/src/atoms/ToolCallCard.tsx

@@ -1,186 +0,0 @@
-import type { ComponentType, ReactNode } from "react";
-import { BriefcaseIcon, CheckIcon, ChevronDownIcon, LoaderIcon, PlugIcon, WrenchIcon, XCircleIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/Collapsible.js";
-
-export type ToolCallStatus = "running" | "success" | "error";
-
-type ToolCallCardBaseProps = {
-    variant: "tool" | "sub-agent" | "mcp-listing";
-    name: string;
-    status: ToolCallStatus;
-    expanded: boolean;
-    onToggle: () => void;
-    /** Not in the Section 6 screenshot contract; ported from the reference's live per-call timer. */
-    durationText?: string;
-    className?: string;
-};
-
-export type ToolCallCardToolProps = ToolCallCardBaseProps & {
-    variant: "tool";
-    argsText?: string;
-    result?: string;
-    isError?: boolean;
-    /**
-     * Extends the Section 6 contract: renders the pending tool-approval / ask-user
-     * UI when this call requires action. The reference screenshots didn't include
-     * an in-flight approval state, so this slot was inferred rather than observed.
-     */
-    approvalSlot?: ReactNode;
-};
-
-export type ToolCallCardSubAgentProps = ToolCallCardBaseProps & {
-    variant: "sub-agent";
-    agentName: string;
-    instruction: string;
-    stepCount: number;
-    children?: ReactNode;
-};
-
-export type ToolCallCardMcpProps = ToolCallCardBaseProps & {
-    variant: "mcp-listing";
-    serverName: string;
-    description: string;
-    argsText: string;
-    resultText: string;
-};
-
-export type ToolCallCardProps = ToolCallCardToolProps | ToolCallCardSubAgentProps | ToolCallCardMcpProps;
-
-const variantIcon: Record<ToolCallCardProps["variant"], ComponentType<{ className?: string }>> = {
-    tool: WrenchIcon,
-    "sub-agent": BriefcaseIcon,
-    "mcp-listing": PlugIcon,
-};
-
-function StatusIcon({ status }: { status: ToolCallStatus }) {
-    if (status === "running") {
-        return (
-            <LoaderIcon
-                data-slot="tool-call-card-status-icon"
-                className="text-muted-foreground size-4 shrink-0 animate-spin [animation-duration:0.6s]"
-            />
-        );
-    }
-    if (status === "success") {
-        return (
-            <CheckIcon
-                data-slot="tool-call-card-status-icon"
-                className="size-4 shrink-0 text-emerald-600 dark:text-emerald-400"
-            />
-        );
-    }
-    return <XCircleIcon data-slot="tool-call-card-status-icon" className="text-destructive size-4 shrink-0" />;
-}
-
-function IconChip({ Icon }: { Icon: ComponentType<{ className?: string }> }) {
-    return (
-        <span className="bg-muted text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-md">
-            <Icon className="size-3.5" />
-        </span>
-    );
-}
-
-export function ToolCallCard(props: ToolCallCardProps) {
-    const { variant, name, status, expanded, onToggle, durationText, className } = props;
-    const VariantIcon = variantIcon[variant];
-
-    return (
-        <Collapsible
-            data-slot="tool-call-card"
-            data-variant={variant}
-            open={expanded}
-            onOpenChange={onToggle}
-            className={cn("aui-tool-call-card w-full rounded-lg border py-2", className)}
-        >
-            <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 text-left">
-                <IconChip Icon={VariantIcon} />
-                {variant === "tool" && <span className="text-sm">{name}</span>}
-                {variant === "sub-agent" && (
-                    <span className="flex min-w-0 flex-col items-start">
-                        <span className="text-muted-foreground text-[10px] font-semibold tracking-wide uppercase">
-                            Sub-agent
-                        </span>
-                        <span className="truncate text-sm font-medium">{props.agentName}</span>
-                    </span>
-                )}
-                {variant === "mcp-listing" && (
-                    <span className="truncate text-sm">Listing tools · {props.serverName}</span>
-                )}
-                <span className="ml-auto flex shrink-0 items-center gap-2">
-                    {durationText && (
-                        <span className="text-muted-foreground text-xs tabular-nums">{durationText}</span>
-                    )}
-                    <StatusIcon status={status} />
-                    <ChevronDownIcon
-                        className={cn(
-                            "size-4 shrink-0 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
-                            expanded ? "rotate-0" : "-rotate-90",
-                        )}
-                    />
-                </span>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="px-3 pt-2">
-                {variant === "tool" && (
-                    <div className="flex flex-col gap-2">
-                        {props.approvalSlot}
-                        {props.argsText && (
-                            <div>
-                                <p className="text-muted-foreground text-xs font-medium">Request:</p>
-                                <pre className="bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap">
-                                    {props.argsText}
-                                </pre>
-                            </div>
-                        )}
-                        {props.result !== undefined && (
-                            <div>
-                                <p className="text-muted-foreground text-xs font-medium">Result:</p>
-                                <pre
-                                    className={cn(
-                                        "bg-muted/50 mt-1 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap",
-                                        props.isError ? "text-destructive" : "text-foreground/90",
-                                    )}
-                                >
-                                    {props.result}
-                                </pre>
-                            </div>
-                        )}
-                    </div>
-                )}
-                {variant === "sub-agent" && (
-                    <div className="flex flex-col gap-2">
-                        <p className="text-muted-foreground line-clamp-2 text-sm">{props.instruction}</p>
-                        <p className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
-                            Steps · {props.stepCount} steps
-                        </p>
-                        <div className="border-border/60 flex flex-col gap-2 border-l pl-3">{props.children}</div>
-                    </div>
-                )}
-                {variant === "mcp-listing" && (
-                    <div className="flex flex-col gap-2">
-                        <p className="text-muted-foreground text-sm">{props.description}</p>
-                        <div>
-                            <p className="text-muted-foreground text-xs font-medium">Request:</p>
-                            <pre className="bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap">
-                                {props.argsText}
-                            </pre>
-                        </div>
-                        <div>
-                            <p className="text-muted-foreground text-xs font-medium">Result:</p>
-                            <pre className="bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap">
-                                {props.resultText}
-                            </pre>
-                        </div>
-                    </div>
-                )}
-            </CollapsibleContent>
-        </Collapsible>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ToolCallCard: typeof ToolCallCard;
-    }
-}

package/src/atoms/ToolGroupCard.tsx

@@ -1,52 +0,0 @@
-import type { ReactNode } from "react";
-import { ChevronDownIcon, LoaderIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/Collapsible.js";
-
-export type ToolGroupCardProps = {
-    toolCallCount: number;
-    expanded: boolean;
-    active?: boolean;
-    onToggle: () => void;
-    children: ReactNode;
-    className?: string;
-};
-
-export function ToolGroupCard({
-    toolCallCount,
-    expanded,
-    active = false,
-    onToggle,
-    children,
-    className,
-}: ToolGroupCardProps) {
-    const label = `${toolCallCount} tool ${toolCallCount === 1 ? "call" : "calls"}`;
-
-    return (
-        <Collapsible
-            data-slot="tool-group-card"
-            open={expanded}
-            onOpenChange={onToggle}
-            className={cn("aui-tool-group-card group/tool-group w-full", className)}
-        >
-            <CollapsibleTrigger className="text-muted-foreground hover:text-foreground flex origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]">
-                {active && <LoaderIcon className="size-3 shrink-0 animate-spin [animation-duration:0.6s]" />}
-                <span className="text-xs font-medium">{label}</span>
-                <ChevronDownIcon
-                    className={cn(
-                        "size-3 shrink-0 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
-                        expanded ? "rotate-0" : "-rotate-90",
-                    )}
-                />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="mt-1 flex flex-col gap-1">{children}</CollapsibleContent>
-        </Collapsible>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ToolGroupCard: typeof ToolGroupCard;
-    }
-}

package/src/atoms/UserMessageActionBar.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { ActionBarPrimitive, useAui, useAuiState } from "@assistant-ui/react";
-import { useActionBarCopy } from "@assistant-ui/core/react";
-import { CheckIcon, CopyIcon, PencilIcon, RotateCcwIcon } from "lucide-react";
-import { trueFoundryExtras } from "@truefoundry/assistant-ui-runtime";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-import { cn } from "./lib/cn.js";
-
-function parseTurnIdFromMessageId(messageId: string): string {
-    return messageId.replace(/-user$/, "");
-}
-
-export type UserMessageActionBarProps = {
-    className?: string;
-};
-
-export function UserMessageActionBar({ className }: UserMessageActionBarProps) {
-    const IconButton = useSlot("IconButton");
-    const aui = useAui();
-    const messageId = useAuiState((s) => s.message.id);
-    const turnId = parseTurnIdFromMessageId(messageId);
-    const { isCopied } = useActionBarCopy();
-
-    return (
-        <ActionBarPrimitive.Root
-            hideWhenRunning
-            className={cn(
-                "aui-user-action-bar-root text-muted-foreground animate-in fade-in flex gap-1 duration-200",
-                className,
-            )}
-        >    
-            <ActionBarPrimitive.Edit asChild>
-                <IconButton tooltip="Edit">
-                    <PencilIcon />
-                </IconButton>
-            </ActionBarPrimitive.Edit>
-            <IconButton
-                tooltip="Reset"
-                onClick={() => void trueFoundryExtras.get(aui).resetFromTurn(turnId)}
-            >
-                <RotateCcwIcon />
-            </IconButton>
-            <ActionBarPrimitive.Copy asChild>
-                <IconButton tooltip="Copy">
-                    {isCopied ? (
-                        <CheckIcon className="animate-in zoom-in-50 fade-in duration-200 ease-out" />
-                    ) : (
-                        <CopyIcon className="animate-in zoom-in-75 fade-in duration-150" />
-                    )}
-                </IconButton>
-            </ActionBarPrimitive.Copy>
-        </ActionBarPrimitive.Root>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        UserMessageActionBar: typeof UserMessageActionBar;
-    }
-}

package/src/atoms/WelcomeScreen.tsx

@@ -1,22 +0,0 @@
-import { cn } from "./lib/cn.js";
-
-export type WelcomeScreenProps = {
-    heading?: string;
-    className?: string;
-};
-
-export function WelcomeScreen({ heading = "How can I help you today?", className }: WelcomeScreenProps) {
-    return (
-        <div className={cn("aui-thread-welcome-root mb-6 flex flex-col items-center px-4 text-center", className)}>
-            <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200">
-                {heading}
-            </h1>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        WelcomeScreen: typeof WelcomeScreen;
-    }
-}

package/src/atoms/lib/cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}

package/src/atoms/primitives/Avatar.tsx

@@ -1,57 +0,0 @@
-import type { ComponentProps } from "react";
-import { Avatar as AvatarPrimitive } from "radix-ui";
-
-import { cn } from "../lib/cn.js";
-
-export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
-    size?: "default" | "sm" | "lg";
-};
-
-export function Avatar({ className, size = "default", ...props }: AvatarProps) {
-    return (
-        <AvatarPrimitive.Root
-            data-slot="avatar"
-            data-size={size}
-            className={cn(
-                "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-export type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
-
-export function AvatarImage({ className, ...props }: AvatarImageProps) {
-    return (
-        <AvatarPrimitive.Image
-            data-slot="avatar-image"
-            className={cn("aspect-square size-full rounded-full object-cover", className)}
-            {...props}
-        />
-    );
-}
-
-export type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
-
-export function AvatarFallback({ className, ...props }: AvatarFallbackProps) {
-    return (
-        <AvatarPrimitive.Fallback
-            data-slot="avatar-fallback"
-            className={cn(
-                "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-declare module "../../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        Avatar: typeof Avatar;
-        AvatarImage: typeof AvatarImage;
-        AvatarFallback: typeof AvatarFallback;
-    }
-}

package/src/atoms/primitives/Button.tsx

@@ -1,73 +0,0 @@
-import type { ComponentProps } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "../lib/cn.js";
-
-export const buttonVariants = cva(
-    "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    {
-        variants: {
-            variant: {
-                default: "bg-primary text-primary-foreground hover:bg-primary/80",
-                outline:
-                    "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-                secondary:
-                    "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-                ghost:
-                    "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-                destructive:
-                    "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-                link: "text-primary underline-offset-4 hover:underline",
-            },
-            size: {
-                default:
-                    "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-                xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-                sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-                lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-                icon: "size-8",
-                "icon-xs":
-                    "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-                "icon-sm":
-                    "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-                "icon-lg": "size-9",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    },
-);
-
-export type ButtonProps = ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-        asChild?: boolean;
-    };
-
-export function Button({
-    className,
-    variant = "default",
-    size = "default",
-    asChild = false,
-    ...props
-}: ButtonProps) {
-    const Comp = asChild ? Slot.Root : "button";
-
-    return (
-        <Comp
-            data-slot="button"
-            data-variant={variant}
-            data-size={size}
-            className={cn(buttonVariants({ variant, size, className }))}
-            {...props}
-        />
-    );
-}
-
-declare module "../../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        Button: typeof Button;
-    }
-}

package/src/atoms/primitives/Collapsible.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps } from "react";
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-
-export type CollapsibleProps = ComponentProps<typeof CollapsiblePrimitive.Root>;
-
-export function Collapsible(props: CollapsibleProps) {
-    return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
-}
-
-export type CollapsibleTriggerProps = ComponentProps<
-    typeof CollapsiblePrimitive.CollapsibleTrigger
->;
-
-export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
-    return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
-}
-
-export type CollapsibleContentProps = ComponentProps<
-    typeof CollapsiblePrimitive.CollapsibleContent
->;
-
-export function CollapsibleContent(props: CollapsibleContentProps) {
-    return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
-}
-
-declare module "../../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        Collapsible: typeof Collapsible;
-        CollapsibleTrigger: typeof CollapsibleTrigger;
-        CollapsibleContent: typeof CollapsibleContent;
-    }
-}

package/src/atoms/primitives/Dialog.tsx

@@ -1,152 +0,0 @@
-import type { ComponentProps } from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { XIcon } from "lucide-react";
-
-import { cn } from "../lib/cn.js";
-import { Button } from "./Button.js";
-
-export type DialogProps = ComponentProps<typeof DialogPrimitive.Root>;
-
-export function Dialog(props: DialogProps) {
-    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-export type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
-
-export function DialogTrigger(props: DialogTriggerProps) {
-    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-export type DialogPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
-
-export function DialogPortal(props: DialogPortalProps) {
-    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-export type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
-
-export function DialogClose(props: DialogCloseProps) {
-    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-export type DialogOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
-
-export function DialogOverlay({ className, ...props }: DialogOverlayProps) {
-    return (
-        <DialogPrimitive.Overlay
-            data-slot="dialog-overlay"
-            className={cn(
-                "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-export type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
-    showCloseButton?: boolean;
-};
-
-export function DialogContent({
-    className,
-    children,
-    showCloseButton = true,
-    ...props
-}: DialogContentProps) {
-    return (
-        <DialogPortal>
-            <DialogOverlay />
-            <DialogPrimitive.Content
-                data-slot="dialog-content"
-                className={cn(
-                    "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-                    className,
-                )}
-                {...props}
-            >
-                {children}
-                {showCloseButton && (
-                    <DialogPrimitive.Close data-slot="dialog-close" asChild>
-                        <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
-                            <XIcon />
-                            <span className="sr-only">Close</span>
-                        </Button>
-                    </DialogPrimitive.Close>
-                )}
-            </DialogPrimitive.Content>
-        </DialogPortal>
-    );
-}
-
-export type DialogHeaderProps = ComponentProps<"div">;
-
-export function DialogHeader({ className, ...props }: DialogHeaderProps) {
-    return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />;
-}
-
-export type DialogFooterProps = ComponentProps<"div"> & {
-    showCloseButton?: boolean;
-};
-
-export function DialogFooter({ className, showCloseButton = false, children, ...props }: DialogFooterProps) {
-    return (
-        <div
-            data-slot="dialog-footer"
-            className={cn(
-                "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-                className,
-            )}
-            {...props}
-        >
-            {children}
-            {showCloseButton && (
-                <DialogPrimitive.Close asChild>
-                    <Button variant="outline">Close</Button>
-                </DialogPrimitive.Close>
-            )}
-        </div>
-    );
-}
-
-export type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
-
-export function DialogTitle({ className, ...props }: DialogTitleProps) {
-    return (
-        <DialogPrimitive.Title
-            data-slot="dialog-title"
-            className={cn("font-heading text-base leading-none font-medium", className)}
-            {...props}
-        />
-    );
-}
-
-export type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
-
-export function DialogDescription({ className, ...props }: DialogDescriptionProps) {
-    return (
-        <DialogPrimitive.Description
-            data-slot="dialog-description"
-            className={cn(
-                "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-declare module "../../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        Dialog: typeof Dialog;
-        DialogTrigger: typeof DialogTrigger;
-        DialogPortal: typeof DialogPortal;
-        DialogClose: typeof DialogClose;
-        DialogOverlay: typeof DialogOverlay;
-        DialogContent: typeof DialogContent;
-        DialogHeader: typeof DialogHeader;
-        DialogFooter: typeof DialogFooter;
-        DialogTitle: typeof DialogTitle;
-        DialogDescription: typeof DialogDescription;
-    }
-}