@agent-native/toolkit 0.9.0 → 0.10.0

package/src/ui/dialog.tsx

@@ -47,34 +47,59 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<
   hideClose?: boolean;
   // High-frequency keyboard surfaces can opt out without changing ordinary dialogs.
   motion?: DialogMotion;
+  container?: React.ComponentPropsWithoutRef<
+    typeof DialogPrimitive.Portal
+  >["container"];
+  closeLabel?: string;
+  overlayClassName?: string;
+  overlayStyle?: React.CSSProperties;
 }
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, hideClose, motion = "default", ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay motion={motion} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-1/2 top-1/2 z-[280] grid max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-hidden rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none",
-        motion === "default" &&
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {!hideClose && (
-        <DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-          <IconX className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(
+  (
+    {
+      className,
+      children,
+      hideClose,
+      motion = "default",
+      container,
+      closeLabel = "Close",
+      overlayClassName,
+      overlayStyle,
+      ...props
+    },
+    ref,
+  ) => (
+    <DialogPortal container={container}>
+      <DialogOverlay
+        motion={motion}
+        className={overlayClassName}
+        style={overlayStyle}
+      />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[280] grid max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-hidden rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none",
+          motion === "default" &&
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {!hideClose && (
+          <DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+            <IconX className="h-4 w-4" />
+            <span className="sr-only">{closeLabel}</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  ),
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

package/src/ui/popover.tsx

@@ -15,10 +15,20 @@ const PopoverContent = React.forwardRef<
     // When false, renders inline without a portal — useful inside overflow-hidden
     // containers where a portalled overlay would escape the clip boundary.
     portalled?: boolean;
+    container?: React.ComponentPropsWithoutRef<
+      typeof PopoverPrimitive.Portal
+    >["container"];
   }
 >(
   (
-    { className, align = "center", sideOffset = 4, portalled = true, ...props },
+    {
+      className,
+      align = "center",
+      sideOffset = 4,
+      portalled = true,
+      container,
+      ...props
+    },
     ref,
   ) => {
     const content = (
@@ -36,7 +46,11 @@ const PopoverContent = React.forwardRef<
 
     if (!portalled) return content;
 
-    return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>;
+    return (
+      <PopoverPrimitive.Portal container={container}>
+        {content}
+      </PopoverPrimitive.Portal>
+    );
   },
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

package/src/ui/select.tsx

@@ -67,9 +67,13 @@ SelectScrollDownButton.displayName =
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<
+      typeof SelectPrimitive.Portal
+    >["container"];
+  }
+>(({ className, children, position = "popper", container, ...props }, ref) => (
+  <SelectPrimitive.Portal container={container}>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(

package/src/ui/sidebar.tsx

@@ -3,19 +3,22 @@ import { IconLayoutSidebar } from "@tabler/icons-react";
 import { VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
+import {
+  Skeleton as DesignSystemSkeleton,
+  Tooltip as DesignSystemTooltip,
+} from "../design-system/components.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { cn } from "../utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
-import { Skeleton } from "./skeleton.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip.js";
+
+type SidebarTooltip = {
+  children?: React.ReactNode;
+  hidden?: boolean;
+  [key: string]: unknown;
+};
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -137,25 +140,23 @@ const SidebarProvider = React.forwardRef<
 
     return (
       <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className,
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
       </SidebarContext.Provider>
     );
   },
@@ -302,8 +303,8 @@ const SidebarRail = React.forwardRef<
   const { toggleSidebar } = useSidebar();
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
+    <DesignSystemTooltip
+      trigger={
         <button
           ref={ref}
           data-sidebar="rail"
@@ -321,9 +322,10 @@ const SidebarRail = React.forwardRef<
           )}
           {...props}
         />
-      </TooltipTrigger>
-      <TooltipContent>Toggle Sidebar</TooltipContent>
-    </Tooltip>
+      }
+      content="Toggle Sidebar"
+      placement="top"
+    />
   );
 });
 SidebarRail.displayName = "SidebarRail";
@@ -552,7 +554,7 @@ const SidebarMenuButton = React.forwardRef<
   React.ComponentProps<"button"> & {
     asChild?: boolean;
     isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    tooltip?: string | SidebarTooltip;
   } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
   (
@@ -585,22 +587,17 @@ const SidebarMenuButton = React.forwardRef<
       return button;
     }
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
+    const tooltipText =
+      typeof tooltip === "string" ? tooltip : tooltip.children;
+    if (!tooltipText || state !== "collapsed" || isMobile) return button;
 
     return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
+      <DesignSystemTooltip
+        trigger={button}
+        content={tooltipText}
+        placement="right"
+        align="center"
+      />
     );
   },
 );
@@ -677,13 +674,15 @@ const SidebarMenuSkeleton = React.forwardRef<
       {...props}
     >
       {showIcon && (
-        <Skeleton
+        <DesignSystemSkeleton
           className="size-4 rounded-md"
+          shape="rectangle"
           data-sidebar="menu-skeleton-icon"
         />
       )}
-      <Skeleton
+      <DesignSystemSkeleton
         className="h-4 flex-1 max-w-[--skeleton-width]"
+        shape="line"
         data-sidebar="menu-skeleton-text"
         style={
           {

package/src/ui/tooltip.tsx

@@ -21,12 +21,16 @@ function normalizeTooltipText(text: string): string {
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<
+      typeof TooltipPrimitive.Portal
+    >["container"];
+  }
+>(({ className, sideOffset = 6, children, container, ...props }, ref) => {
   const normalizedChildren =
     typeof children === "string" ? normalizeTooltipText(children) : children;
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}