@agent-native/dispatch 0.38.15 → 0.38.16-nightly-20260927213438

package/src/components/layout/Layout.tsx

@@ -58,16 +58,22 @@ import {
   type ChatFirstPrimaryTab,
 } from "@agent-native/core/client/chat-first";
 import { writeClipboardText } from "@agent-native/core/client/clipboard";
+import {
+  useFeatureFlagState,
+  type FeatureFlagState,
+} from "@agent-native/core/client/feature-flags";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import { RunsTray } from "@agent-native/core/client/progress";
+import { isSettingsPathname } from "@agent-native/core/client/settings";
 import {
   AppSidebarFooter,
   AppSidebarHeader,
   FeedbackButton,
 } from "@agent-native/core/client/ui";
+import { SETTINGS_REDESIGN_FLAG } from "@agent-native/core/feature-flags/registry";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -335,6 +341,21 @@ export function shouldAutoCollapseDispatchSidebar(pathname: string): boolean {
   return localDispatchPath(pathname).startsWith("/apps/");
 }
 
+/**
+ * The redesigned Settings brings its own navigation, header, and agent
+ * toggle, so it renders full width. While the flag loads it shows the
+ * shell's skeleton, which needs the same frame.
+ */
+export function isRedesignedSettingsPath(
+  pathname: string,
+  settingsRedesign: FeatureFlagState,
+): boolean {
+  return (
+    isSettingsPathname(localDispatchPath(pathname)) &&
+    (settingsRedesign.enabled || settingsRedesign.status === "loading")
+  );
+}
+
 function chatFirstPrimaryTabForPath(
   pathname: string,
 ): ChatFirstPrimaryTab | undefined {
@@ -1358,6 +1379,10 @@ export function Layout({
   );
   const isChatRoute =
     localPathname === "/chat" || localPathname.startsWith("/chat/");
+  const isRedesignedSettingsRoute = isRedesignedSettingsPath(
+    location.pathname,
+    useFeatureFlagState(SETTINGS_REDESIGN_FLAG.key),
+  );
   const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
   const isWorkspaceAppRoute = shouldAutoCollapseDispatchSidebar(
     location.pathname,
@@ -2232,7 +2257,10 @@ export function Layout({
     );
   }
 
-  const showAgentControls = !isChatRoute && !pageOwnsToolbar(localPathname);
+  const showAgentControls =
+    !isChatRoute &&
+    !isRedesignedSettingsRoute &&
+    !pageOwnsToolbar(localPathname);
   function openAskAgentFullscreen() {
     focusAgentChat();
     navigateWithAgentChatViewTransition(
@@ -2301,8 +2329,8 @@ export function Layout({
             <div className="pointer-events-none sticky top-0 z-10 flex justify-end px-4 pt-2 lg:px-6">
               <Button
                 variant="ghost"
-                size="icon"
-                className="pointer-events-auto absolute start-4 top-2 h-8 w-8 lg:hidden"
+                size="icon-sm"
+                className="pointer-events-auto absolute start-4 top-2 lg:hidden"
                 onClick={() => setMobileOpen(true)}
                 aria-label="Open navigation"
               >
@@ -2454,46 +2482,48 @@ export function Layout({
     <DispatchExtensionsContext.Provider value={extensions}>
       <HeaderActionsProvider>
         <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background">
-          <aside
-            data-collapsed={sidebarCollapsed ? "true" : "false"}
-            className={cn(
-              "agent-layout-left-drawer hidden shrink-0 flex-col border-e !border-e-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
-              sidebarCollapsed ? "w-14" : "w-[260px]",
-            )}
-          >
-            <NavContent
-              extensions={extensions}
-              brandName={brandName}
-              brandIcon={brandIcon}
-              chatFirstMode={chatFirstMode}
-              chatFirstEmbedded={chatFirstEmbedded}
-              collapsed={sidebarCollapsed}
-              chatFirstAppLayout={chatFirstAppLayout}
-              onChatFirstAppLayoutChange={persistChatFirstAppLayout}
-              chatFirstApps={chatFirstAppItems}
-              chatFirstAppsLoading={chatFirstAppsQuery.isLoading}
-              chatFirstAppsError={
-                chatFirstAppsQuery.isError
-                  ? chatFirstCopy("appsLoadError")
-                  : null
-              }
-              chatFirstActiveAppId={chatFirstActiveAppId}
-              chatFirstActivePrimaryTab={chatFirstActivePrimaryTab}
-              onChatFirstNewChat={() => {
-                closeChatFirstSessionWatch();
-                chatFirstSurfaceTabsStore.closeAll();
-                setChatFirstSurfacePanelOpen(false);
-              }}
-              onChatFirstAppOpen={(app) => {
-                if (isDispatchWorkspaceAppId(app.id)) return;
-                setSidebarCollapsed(true);
-                openChatFirstApp(app);
-              }}
-              onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
-              collapsible
-              onCollapsedChange={setSidebarCollapsed}
-            />
-          </aside>
+          {isRedesignedSettingsRoute ? null : (
+            <aside
+              data-collapsed={sidebarCollapsed ? "true" : "false"}
+              className={cn(
+                "agent-layout-left-drawer hidden shrink-0 flex-col border-e !border-e-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
+                sidebarCollapsed ? "w-14" : "w-[260px]",
+              )}
+            >
+              <NavContent
+                extensions={extensions}
+                brandName={brandName}
+                brandIcon={brandIcon}
+                chatFirstMode={chatFirstMode}
+                chatFirstEmbedded={chatFirstEmbedded}
+                collapsed={sidebarCollapsed}
+                chatFirstAppLayout={chatFirstAppLayout}
+                onChatFirstAppLayoutChange={persistChatFirstAppLayout}
+                chatFirstApps={chatFirstAppItems}
+                chatFirstAppsLoading={chatFirstAppsQuery.isLoading}
+                chatFirstAppsError={
+                  chatFirstAppsQuery.isError
+                    ? chatFirstCopy("appsLoadError")
+                    : null
+                }
+                chatFirstActiveAppId={chatFirstActiveAppId}
+                chatFirstActivePrimaryTab={chatFirstActivePrimaryTab}
+                onChatFirstNewChat={() => {
+                  closeChatFirstSessionWatch();
+                  chatFirstSurfaceTabsStore.closeAll();
+                  setChatFirstSurfacePanelOpen(false);
+                }}
+                onChatFirstAppOpen={(app) => {
+                  if (isDispatchWorkspaceAppId(app.id)) return;
+                  setSidebarCollapsed(true);
+                  openChatFirstApp(app);
+                }}
+                onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
+                collapsible
+                onCollapsedChange={setSidebarCollapsed}
+              />
+            </aside>
+          )}
 
           <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
             <SheetContent

package/src/components/messaging-setup-panel.spec.tsx

@@ -11,7 +11,11 @@ const clientState = vi.hoisted(() => ({
   envStatuses: [] as any[],
 }));
 
-vi.mock("@agent-native/core/client/integrations", () => ({
+vi.mock("@agent-native/core/client/integrations", async () => ({
+  // The shared channel helpers are real; only the network calls are faked.
+  ...(await vi.importActual<
+    typeof import("@agent-native/core/client/integrations")
+  >("@agent-native/core/client/integrations")),
   disconnectManagedIntegrationInstallation: vi.fn(() => Promise.resolve()),
   listManagedIntegrationBudgets: vi.fn(() => Promise.resolve([])),
   listManagedIntegrationInstallations: vi.fn(() => Promise.resolve([])),

package/src/components/messaging-setup-panel.tsx

@@ -1,6 +1,8 @@
 import { useFormatters, useT } from "@agent-native/core/client/i18n";
 import {
+  channelIcon,
   disconnectManagedIntegrationInstallation,
+  hasMissingRequiredCredentials,
   listManagedIntegrationBudgets,
   listManagedIntegrationInstallations,
   listManagedIntegrationScopes,
@@ -23,14 +25,9 @@ import {
 import {
   listBuiltInChannelIntegrations,
   type IntegrationCatalogEntry,
-  type IntegrationCredentialRequirement,
 } from "@agent-native/core/integrations";
 import {
-  IconBrandDiscord,
   IconBrandSlack,
-  IconBrandTelegram,
-  IconBrandTeams,
-  IconBrandWhatsapp,
   IconCheck,
   IconChevronRight,
   IconCopy,
@@ -38,8 +35,6 @@ import {
   IconFileDescription,
   IconInfoCircle,
   IconLoader2,
-  IconMail,
-  IconPlug,
 } from "@tabler/icons-react";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -61,42 +56,11 @@ import { Skeleton } from "./ui/skeleton";
 import { Switch } from "./ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
-const CHANNELS = listBuiltInChannelIntegrations();
-
-const PLATFORM_ICONS: Partial<Record<string, typeof IconBrandSlack>> = {
-  slack: IconBrandSlack,
-  "microsoft-teams": IconBrandTeams,
-  discord: IconBrandDiscord,
-  telegram: IconBrandTelegram,
-  whatsapp: IconBrandWhatsapp,
-  email: IconMail,
-};
-
-function hasMissingRequiredCredentials(
-  credentials: readonly IntegrationCredentialRequirement[],
-  envStatusByKey: Map<string, IntegrationEnvStatus>,
-) {
-  const alternatives = new Map<
-    string,
-    readonly IntegrationCredentialRequirement[]
-  >();
-
-  for (const credential of credentials) {
-    if (!credential.required) continue;
-    if (!credential.alternativeGroup) {
-      if (!envStatusByKey.get(credential.key)?.configured) return true;
-      continue;
-    }
-    const group = alternatives.get(credential.alternativeGroup) ?? [];
-    alternatives.set(credential.alternativeGroup, [...group, credential]);
-  }
-
-  return [...alternatives.values()].some((group) =>
-    group.every(
-      (credential) => !envStatusByKey.get(credential.key)?.configured,
-    ),
-  );
-}
+// Google Docs reads its service account key from the deployment environment
+// only, so this credential form can't set it up; apps list it in Channels.
+const CHANNELS = listBuiltInChannelIntegrations().filter(
+  (entry) => entry.id !== "google-docs",
+);
 
 function HelpTooltip({ content }: { content: string }) {
   return (
@@ -505,7 +469,7 @@ export function MessagingSetupPanel() {
           );
           const missingRequiredCredentials = hasMissingRequiredCredentials(
             envKeys,
-            envStatusByKey,
+            (key) => Boolean(envStatusByKey.get(key)?.configured),
           );
           const configuredCredentialCount = envKeys.filter(
             (envKey) => envStatusByKey.get(envKey.key)?.configured,
@@ -515,7 +479,7 @@ export function MessagingSetupPanel() {
             : missingRequiredCredentials
               ? "Required credentials are missing"
               : `${configuredCredentialCount} saved`;
-          const Icon = PLATFORM_ICONS[platform.iconKey] ?? IconPlug;
+          const Icon = channelIcon(platform.iconKey);
 
           return (
             <AccordionItem

package/src/components/transactional-email-send-log.tsx

@@ -185,7 +185,7 @@ function AddressFilterControl({
             type="button"
             variant="ghost"
             size="sm"
-            className="h-8 shrink-0 gap-1 px-2"
+            className="shrink-0 gap-1 px-2"
             aria-label={dimensionLabel}
           >
             {dimensionLabel}

package/src/components/ui/alert-dialog.tsx

@@ -1,139 +1 @@
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "./button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className,
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/src/components/ui/button.tsx

@@ -1,56 +1 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "bg-accent text-accent-foreground hover:bg-accent/80",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+export * from "@agent-native/toolkit/ui/button";

package/src/components/ui/input.tsx

@@ -1,22 +1 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
+export * from "@agent-native/toolkit/ui/input";

package/src/components/ui/switch.tsx

@@ -1,27 +1 @@
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
+export * from "@agent-native/toolkit/ui/switch";

package/src/components/ui/tabs.tsx

@@ -1,53 +1 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export * from "@agent-native/toolkit/ui/tabs";

package/src/components/ui/toggle.tsx

@@ -1,43 +1 @@
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+export * from "@agent-native/toolkit/ui/toggle";