@agent-native/toolkit 0.208.0 → 0.209.0-nightly-20261014070126

package/src/app/sharing/ShareDialog.tsx

@@ -3,6 +3,7 @@ import {
   type ResourceShare,
   type ShareDialogController,
   type ShareDialogPerson,
+  type ShareDialogTab,
   type ShareVisibility,
 } from "@agent-native/core/client/sharing/useShareDialogController";
 import { writeClipboardText } from "@agent-native/toolkit/clipboard";
@@ -15,7 +16,8 @@ import {
   Status,
   TextArea,
 } from "@agent-native/toolkit/design-system";
-import { ShareCopyRow } from "@agent-native/toolkit/sharing";
+import { ShareCopyRow, ShareTabList } from "@agent-native/toolkit/sharing";
+import { Tabs, TabsContent } from "@agent-native/toolkit/ui/tabs";
 import { cn } from "@agent-native/toolkit/utils";
 import {
   IconCheck,
@@ -118,81 +120,54 @@ export function ShareDialog({
         </div>
       ) : null}
 
-      {controller.tabsEnabled && showTabList ? (
-        <div
-          role="tablist"
-          aria-label={controller.labels.shareOptions}
-          className="mx-5 mt-10 flex gap-1 rounded-xl bg-muted/70 p-1"
-        >
-          {controller.tabs.map((tab) => {
-            return (
-              <TabTrigger
-                key={tab.value}
-                active={controller.activeTab === tab.value}
-                onClick={() => controller.setActiveTab(tab.value)}
-                label={tab.label}
-              />
-            );
-          })}
-        </div>
-      ) : null}
-
-      <div className="px-5 py-4">
-        {controller.tabsEnabled && controller.activeTab === "link" ? (
-          <LinkTab
-            controller={controller}
-            extras={linkTabExtras}
-            accessRequests={accessRequests}
+      <Tabs
+        value={controller.activeTab}
+        onValueChange={(value) =>
+          controller.setActiveTab(value as ShareDialogTab)
+        }
+      >
+        {controller.tabsEnabled && showTabList ? (
+          <ShareTabList
+            tabs={controller.tabs}
+            aria-label={controller.labels.shareOptions}
+            className="mx-5 mt-10 w-auto"
           />
         ) : null}
-        {!controller.tabsEnabled || controller.activeTab === "invite" ? (
-          <InviteTab
-            controller={controller}
-            showVisibility={!controller.tabsEnabled}
-            accessRequests={accessRequests}
+
+        <div className="px-5 py-4">
+          {controller.tabsEnabled ? (
+            <TabsContent value="link" className="m-0">
+              <LinkTab
+                controller={controller}
+                extras={linkTabExtras}
+                accessRequests={accessRequests}
+              />
+            </TabsContent>
+          ) : null}
+          {!controller.tabsEnabled || controller.activeTab === "invite" ? (
+            <InviteTab
+              controller={controller}
+              showVisibility={!controller.tabsEnabled}
+              accessRequests={accessRequests}
+            />
+          ) : null}
+          {controller.tabsEnabled ? (
+            <TabsContent value="embed" className="m-0">
+              {embedTabContent ?? <DefaultEmbedBody controller={controller} />}
+            </TabsContent>
+          ) : null}
+          <AgentShareSection
+            enabled={controller.agentReadable}
+            resourceType={resourceType}
+            resourceId={resourceId}
+            className="mt-4"
           />
-        ) : null}
-        {controller.tabsEnabled && controller.activeTab === "embed"
-          ? (embedTabContent ?? <DefaultEmbedBody controller={controller} />)
-          : null}
-        <AgentShareSection
-          enabled={controller.agentReadable}
-          resourceType={resourceType}
-          resourceId={resourceId}
-          className="mt-4"
-        />
-      </div>
+        </div>
+      </Tabs>
     </DesignSystemDialog>
   );
 }
 
-function TabTrigger({
-  active,
-  onClick,
-  label,
-}: {
-  active: boolean;
-  onClick: () => void;
-  label: string;
-}) {
-  return (
-    <ActionButton
-      type="button"
-      emphasis="ghost"
-      aria-pressed={active}
-      onPress={onClick}
-      className={cn(
-        "min-w-0 flex-1 !rounded-lg !px-3 !py-2 text-sm font-medium transition-colors hover:!bg-background/70 active:!scale-100 focus-visible:!ring-0 focus-visible:!ring-offset-0",
-        active
-          ? "bg-background text-foreground shadow-sm ring-1 ring-border"
-          : "text-muted-foreground hover:text-foreground",
-      )}
-    >
-      <span className="block truncate">{label}</span>
-    </ActionButton>
-  );
-}
-
 function LinkTab({
   controller,
   extras,
@@ -256,7 +231,7 @@ function InviteTab({
     <div className="space-y-4">
       {showVisibility ? (
         <div>
-          <div className="mb-2 text-sm font-semibold">
+          <div className="mb-2 text-xs font-medium text-muted-foreground">
             {controller.labels.generalAccess}
           </div>
           <div className="flex items-center gap-3">
@@ -279,7 +254,7 @@ function InviteTab({
       {accessRequests}
 
       <div className="space-y-4">
-        <div className="text-sm font-semibold">
+        <div className="text-xs font-medium text-muted-foreground">
           {controller.labels.peopleWithAccess}
         </div>
         {controller.canManage ? (

package/src/sharing/ShareControls.spec.tsx

@@ -5,7 +5,11 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { TooltipProvider } from "../ui/tooltip.js";
-import { JoinedShareControl, ShareModeTabs } from "./ShareControls.js";
+import {
+  JoinedShareControl,
+  ShareModeTabs,
+  ShareTabs,
+} from "./ShareControls.js";
 
 describe("JoinedShareControl", () => {
   const roots: ReturnType<typeof createRoot>[] = [];
@@ -86,6 +90,87 @@ describe("JoinedShareControl", () => {
     );
   });
 
+  it("renders underline tabs and shows only the selected tab's panel", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    containers.push(container);
+    const root = createRoot(container);
+    roots.push(root);
+    const onValueChange = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <ShareTabs
+          value="link"
+          onValueChange={onValueChange}
+          listLabel="Share options"
+          tabs={[
+            { value: "link", label: "Link", content: <div>Link body</div> },
+            { value: "embed", label: "Embed", content: <div>Embed body</div> },
+          ]}
+        />,
+      );
+    });
+
+    const list = container.querySelector('[role="tablist"]');
+    expect(list?.getAttribute("aria-label")).toBe("Share options");
+    expect(list?.className).toContain("bg-transparent");
+    expect(list?.className).not.toContain("bg-muted");
+    const tabs = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="tab"]'),
+    );
+    for (const tab of tabs) {
+      expect(tab.className).toContain("after:bg-foreground");
+      expect(tab.className).toContain("data-[state=active]:bg-transparent");
+    }
+    expect(container.textContent).toContain("Link body");
+    expect(container.textContent).not.toContain("Embed body");
+
+    await act(async () => {
+      tabs[1].dispatchEvent(
+        new MouseEvent("mousedown", { bubbles: true, button: 0 }),
+      );
+    });
+    expect(onValueChange).toHaveBeenCalledWith("embed");
+  });
+
+  it("builds People and Agents on the same underline tabs", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    containers.push(container);
+    const root = createRoot(container);
+    roots.push(root);
+
+    await act(async () => {
+      root.render(
+        <ShareModeTabs
+          value="agents"
+          onValueChange={() => {}}
+          peopleLabel="People"
+          agentsLabel="Agents"
+          people={<div>Access</div>}
+          agents={<div>Prompt</div>}
+          extraTabs={[
+            { value: "context", label: "Context", content: <div>Ctx</div> },
+          ]}
+        />,
+      );
+    });
+
+    const tabs = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="tab"]'),
+    );
+    expect(tabs.map((tab) => tab.textContent)).toEqual([
+      "People",
+      "Agents",
+      "Context",
+    ]);
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    for (const tab of tabs) expect(tab.className).toContain("after:h-0.5");
+    expect(container.textContent).toContain("Prompt");
+    expect(container.textContent).not.toContain("Access");
+  });
+
   it("keeps disabled extra share tabs unavailable", async () => {
     const container = document.createElement("div");
     document.body.append(container);

package/src/sharing/ShareControls.tsx

@@ -105,6 +105,78 @@ export interface ShareModeTab {
   disabled?: boolean;
 }
 
+export interface ShareTabListProps {
+  tabs: Pick<ShareModeTab, "value" | "label" | "disabled">[];
+  className?: string;
+  "aria-label"?: string;
+}
+
+/** The underline tab strip every share surface uses. Render inside `Tabs`. */
+export function ShareTabList({
+  tabs,
+  className,
+  "aria-label": ariaLabel,
+}: ShareTabListProps) {
+  return (
+    <TabsList
+      aria-label={ariaLabel}
+      className={cn(
+        "h-8 w-full justify-start gap-1 overflow-x-auto rounded-none bg-transparent px-0 py-0 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        className,
+      )}
+    >
+      {tabs.map((tab) => (
+        <TabsTrigger
+          key={tab.value}
+          value={tab.value}
+          disabled={tab.disabled}
+          className="relative h-8 min-w-0 flex-none rounded-none bg-transparent px-2 py-0 text-sm font-normal shadow-none after:absolute after:bottom-0 after:inset-x-2 after:h-0.5 after:bg-foreground after:opacity-0 focus-visible:ring-inset focus-visible:ring-offset-0 data-[state=active]:bg-transparent data-[state=active]:font-medium data-[state=active]:shadow-none data-[state=active]:after:opacity-100"
+        >
+          {tab.label}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+  );
+}
+
+export interface ShareTabsProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  tabs: ShareModeTab[];
+  listLabel?: string;
+  className?: string;
+  listClassName?: string;
+}
+
+/** Underline tabs for a share surface; each tab owns its panel. */
+export function ShareTabs({
+  value,
+  onValueChange,
+  tabs,
+  listLabel,
+  className,
+  listClassName,
+}: ShareTabsProps) {
+  return (
+    <Tabs
+      value={value}
+      onValueChange={onValueChange}
+      className={cn("flex flex-col gap-3", className)}
+    >
+      <ShareTabList
+        tabs={tabs}
+        aria-label={listLabel}
+        className={listClassName}
+      />
+      {tabs.map((tab) => (
+        <TabsContent key={tab.value} value={tab.value} className="m-0">
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
 export interface ShareModeTabsProps {
   value: string;
   onValueChange: (value: string) => void;
@@ -113,6 +185,7 @@ export interface ShareModeTabsProps {
   people: ReactNode;
   agents: ReactNode;
   extraTabs?: ShareModeTab[];
+  listLabel?: string;
   className?: string;
 }
 
@@ -125,38 +198,21 @@ export function ShareModeTabs({
   people,
   agents,
   extraTabs = [],
+  listLabel,
   className,
 }: ShareModeTabsProps) {
-  const tabs = [
-    { value: "people", label: peopleLabel, content: people },
-    { value: "agents", label: agentsLabel, content: agents },
-    ...extraTabs,
-  ];
-
   return (
-    <Tabs
+    <ShareTabs
       value={value}
       onValueChange={onValueChange}
-      className={cn("flex flex-col gap-3", className)}
-    >
-      <TabsList className="h-8 w-full justify-start gap-1 rounded-none bg-transparent px-0 py-0">
-        {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.value}
-            value={tab.value}
-            disabled={tab.disabled}
-            className="relative h-8 min-w-0 flex-none rounded-none bg-transparent px-2 py-0 text-sm font-normal shadow-none after:absolute after:bottom-0 after:inset-x-2 after:h-0.5 after:bg-foreground after:opacity-0 data-[state=active]:bg-transparent data-[state=active]:font-medium data-[state=active]:shadow-none data-[state=active]:after:opacity-100"
-          >
-            {tab.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabs.map((tab) => (
-        <TabsContent key={tab.value} value={tab.value} className="m-0">
-          {tab.content}
-        </TabsContent>
-      ))}
-    </Tabs>
+      listLabel={listLabel}
+      className={className}
+      tabs={[
+        { value: "people", label: peopleLabel, content: people },
+        { value: "agents", label: agentsLabel, content: agents },
+        ...extraTabs,
+      ]}
+    />
   );
 }
 

package/src/sharing/SharePrimitives.tsx

@@ -113,7 +113,7 @@ export function ShareCopyRow({
             : accessibleLabel(copyLabel, "Copy")
         }
         onPress={() => void handleCopy()}
-        className="h-9 shrink-0"
+        className="shrink-0"
       >
         {copied ? copiedLabel : copyLabel}
       </ActionButton>

package/src/sharing/index.ts

@@ -14,6 +14,10 @@ export {
   ShareModeTabs,
   type ShareModeTab,
   type ShareModeTabsProps,
+  ShareTabList,
+  type ShareTabListProps,
+  ShareTabs,
+  type ShareTabsProps,
 } from "./ShareControls.js";
 export {
   ShareAgentsSection,