@open-mercato/core 0.6.6 → 0.6.7-develop.6552.1.5208a19369

package/dist/modules/customers/components/detail/CompanyDetailTabs.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Button } from "@open-mercato/ui/primitives/button";
+import { Tabs, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
 import {
   Users,
   Handshake,
@@ -12,6 +12,7 @@ import {
   Paperclip,
   Plus
 } from "lucide-react";
+import { useDealsAccess } from "./useDealsAccess.js";
 const LEGACY_TAB_MAP = {
   notes: "people",
   activities: "activity-log",
@@ -26,12 +27,9 @@ function resolveLegacyTab(tab) {
   if (LEGACY_TAB_MAP[tab]) return LEGACY_TAB_MAP[tab];
   return tab;
 }
-function NewBadge() {
-  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background", children: "NEW" });
-}
-function CountBadge({ count }) {
-  if (count <= 0) return null;
-  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground", children: count > 999 ? "999+" : count });
+function formatTabCount(count) {
+  if (count <= 0) return void 0;
+  return count > 999 ? "999+" : count;
 }
 function CompanyDetailTabs({
   activeTab,
@@ -45,40 +43,43 @@ function CompanyDetailTabs({
   children
 }) {
   const t = useT();
+  const { canViewDeals } = useDealsAccess();
   const builtInTabs = React.useMemo(
     () => [
       {
         id: "people",
         label: t("customers.companies.detail.tabs.people", "People"),
         icon: /* @__PURE__ */ jsx(Users, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: peopleCount })
-      },
-      {
-        id: "deals",
-        label: t("customers.companies.detail.tabs.deals", "Deals"),
-        icon: /* @__PURE__ */ jsx(Handshake, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: dealsCount })
+        count: formatTabCount(peopleCount)
       },
+      ...canViewDeals ? [
+        {
+          id: "deals",
+          label: t("customers.companies.detail.tabs.deals", "Deals"),
+          icon: /* @__PURE__ */ jsx(Handshake, { className: "size-4" }),
+          count: formatTabCount(dealsCount)
+        }
+      ] : [],
       {
         id: "activity-log",
         label: t("customers.companies.detail.tabs.activityLog", "Activity log"),
         icon: /* @__PURE__ */ jsx(Clock, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: activitiesCount })
+        count: formatTabCount(activitiesCount)
       },
       {
         id: "changelog",
         label: t("customers.companies.detail.tabs.changelog", "Changelog"),
         icon: /* @__PURE__ */ jsx(History, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(NewBadge, {})
+        count: "NEW"
       },
       {
         id: "files",
         label: t("customers.companies.detail.tabs.files", "Files"),
         icon: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: filesCount })
+        count: formatTabCount(filesCount)
       }
     ],
-    [t, peopleCount, dealsCount, activitiesCount, filesCount]
+    [t, canViewDeals, peopleCount, dealsCount, activitiesCount, filesCount]
   );
   const allTabs = React.useMemo(
     () => [
@@ -91,31 +92,24 @@ function CompanyDetailTabs({
     [builtInTabs, injectedTabs]
   );
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-2 border-b", role: "tablist", "aria-label": t("customers.companies.detail.tabs.label", "Company detail sections"), children: [
-      /* @__PURE__ */ jsx("nav", { className: "-mb-px flex flex-1 gap-1 overflow-x-auto px-1", children: allTabs.map((tab) => {
-        const isActive = activeTab === tab.id;
-        return /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            role: "tab",
-            "aria-selected": isActive,
-            onClick: () => onTabChange(tab.id),
-            className: cn(
-              "h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent",
-              isActive ? "border-foreground text-foreground font-semibold" : "border-transparent text-muted-foreground hover:text-foreground"
-            ),
-            children: [
-              tab.icon && /* @__PURE__ */ jsx("span", { className: "mr-1.5", children: tab.icon }),
-              tab.label,
-              tab.badge
-            ]
-          },
-          tab.id
-        );
-      }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-2 border-b", children: [
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          value: activeTab,
+          onValueChange: (value) => onTabChange(value),
+          variant: "underline",
+          className: "min-w-0 flex-1",
+          children: /* @__PURE__ */ jsx(
+            TabsList,
+            {
+              "aria-label": t("customers.companies.detail.tabs.label", "Company detail sections"),
+              className: "-mb-px w-full overflow-x-auto border-b-0 px-1",
+              children: allTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, leading: tab.icon, count: tab.count, children: tab.label }, tab.id))
+            }
+          )
+        }
+      ),
       sectionAction ? /* @__PURE__ */ jsxs(
         Button,
         {

package/dist/modules/customers/components/detail/CompanyDetailTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/CompanyDetailTabs.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport {\n  Users,\n  Handshake,\n  Clock,\n  History,\n  Paperclip,\n  Plus,\n} from 'lucide-react'\nimport type { SectionAction } from '@open-mercato/ui/backend/detail'\n\nexport type CompanyTabId =\n  | 'people'\n  | 'deals'\n  | 'activity-log'\n  | 'changelog'\n  | 'files'\n  | string\n\ntype TabDef = {\n  id: CompanyTabId\n  label: string\n  icon?: React.ReactNode\n  badge?: React.ReactNode\n}\n\ntype CompanyDetailTabsProps = {\n  activeTab: CompanyTabId\n  onTabChange: (tab: CompanyTabId) => void\n  injectedTabs?: Array<{ id: string; label: string; priority?: number }>\n  peopleCount?: number\n  dealsCount?: number\n  activitiesCount?: number\n  filesCount?: number\n  sectionAction?: SectionAction | null\n  children: React.ReactNode\n}\n\nconst LEGACY_TAB_MAP: Record<string, CompanyTabId> = {\n  notes: 'people',\n  activities: 'activity-log',\n  addresses: 'people',\n  tasks: 'people',\n  dashboard: 'people',\n  'dane-firmy': 'people',\n  analysis: 'people',\n}\n\nexport function resolveLegacyTab(tab: string | null | undefined): CompanyTabId {\n  if (!tab) return 'people'\n  if (LEGACY_TAB_MAP[tab]) return LEGACY_TAB_MAP[tab]\n  return tab as CompanyTabId\n}\n\nfunction NewBadge() {\n  return (\n    <span className=\"ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background\">\n      NEW\n    </span>\n  )\n}\n\nfunction CountBadge({ count }: { count: number }) {\n  if (count <= 0) return null\n  return (\n    <span className=\"ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground\">\n      {count > 999 ? '999+' : count}\n    </span>\n  )\n}\n\nexport function CompanyDetailTabs({\n  activeTab,\n  onTabChange,\n  injectedTabs = [],\n  peopleCount = 0,\n  dealsCount = 0,\n  activitiesCount = 0,\n  filesCount = 0,\n  sectionAction = null,\n  children,\n}: CompanyDetailTabsProps) {\n  const t = useT()\n\n  const builtInTabs: TabDef[] = React.useMemo(\n    () => [\n      {\n        id: 'people',\n        label: t('customers.companies.detail.tabs.people', 'People'),\n        icon: <Users className=\"size-4\" />,\n        badge: <CountBadge count={peopleCount} />,\n      },\n      {\n        id: 'deals',\n        label: t('customers.companies.detail.tabs.deals', 'Deals'),\n        icon: <Handshake className=\"size-4\" />,\n        badge: <CountBadge count={dealsCount} />,\n      },\n      {\n        id: 'activity-log',\n        label: t('customers.companies.detail.tabs.activityLog', 'Activity log'),\n        icon: <Clock className=\"size-4\" />,\n        badge: <CountBadge count={activitiesCount} />,\n      },\n      {\n        id: 'changelog',\n        label: t('customers.companies.detail.tabs.changelog', 'Changelog'),\n        icon: <History className=\"size-4\" />,\n        badge: <NewBadge />,\n      },\n      {\n        id: 'files',\n        label: t('customers.companies.detail.tabs.files', 'Files'),\n        icon: <Paperclip className=\"size-4\" />,\n        badge: <CountBadge count={filesCount} />,\n      },\n    ],\n    [t, peopleCount, dealsCount, activitiesCount, filesCount],\n  )\n\n  const allTabs: TabDef[] = React.useMemo(\n    () => [\n      ...builtInTabs,\n      ...injectedTabs.map((tab) => ({\n        id: tab.id as CompanyTabId,\n        label: tab.label,\n      })),\n    ],\n    [builtInTabs, injectedTabs],\n  )\n\n  return (\n    <div>\n      {/* Tab navigation */}\n      <div className=\"flex items-end justify-between gap-2 border-b\" role=\"tablist\" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>\n        <nav className=\"-mb-px flex flex-1 gap-1 overflow-x-auto px-1\">\n          {allTabs.map((tab) => {\n            const isActive = activeTab === tab.id\n            return (\n              <Button\n                key={tab.id}\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => onTabChange(tab.id)}\n                className={cn(\n                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',\n                  isActive\n                    ? 'border-foreground text-foreground font-semibold'\n                    : 'border-transparent text-muted-foreground hover:text-foreground',\n                )}\n              >\n                {tab.icon && <span className=\"mr-1.5\">{tab.icon}</span>}\n                {tab.label}\n                {tab.badge}\n              </Button>\n            )\n          })}\n        </nav>\n        {sectionAction ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            onClick={sectionAction.onClick}\n            disabled={sectionAction.disabled}\n            className=\"mb-1.5 mr-1 shrink-0\"\n          >\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            {sectionAction.label}\n          </Button>\n        ) : null}\n      </div>\n\n      {/* Tab content */}\n      <div className=\"pt-6\" role=\"tabpanel\">\n        {children}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport {\n  Users,\n  Handshake,\n  Clock,\n  History,\n  Paperclip,\n  Plus,\n} from 'lucide-react'\nimport type { SectionAction } from '@open-mercato/ui/backend/detail'\nimport { useDealsAccess } from './useDealsAccess'\n\nexport type CompanyTabId =\n  | 'people'\n  | 'deals'\n  | 'activity-log'\n  | 'changelog'\n  | 'files'\n  | string\n\ntype TabDef = {\n  id: CompanyTabId\n  label: string\n  icon?: React.ReactNode\n  count?: React.ReactNode\n}\n\ntype CompanyDetailTabsProps = {\n  activeTab: CompanyTabId\n  onTabChange: (tab: CompanyTabId) => void\n  injectedTabs?: Array<{ id: string; label: string; priority?: number }>\n  peopleCount?: number\n  dealsCount?: number\n  activitiesCount?: number\n  filesCount?: number\n  sectionAction?: SectionAction | null\n  children: React.ReactNode\n}\n\nconst LEGACY_TAB_MAP: Record<string, CompanyTabId> = {\n  notes: 'people',\n  activities: 'activity-log',\n  addresses: 'people',\n  tasks: 'people',\n  dashboard: 'people',\n  'dane-firmy': 'people',\n  analysis: 'people',\n}\n\nexport function resolveLegacyTab(tab: string | null | undefined): CompanyTabId {\n  if (!tab) return 'people'\n  if (LEGACY_TAB_MAP[tab]) return LEGACY_TAB_MAP[tab]\n  return tab as CompanyTabId\n}\n\nfunction formatTabCount(count: number): string | number | undefined {\n  if (count <= 0) return undefined\n  return count > 999 ? '999+' : count\n}\n\nexport function CompanyDetailTabs({\n  activeTab,\n  onTabChange,\n  injectedTabs = [],\n  peopleCount = 0,\n  dealsCount = 0,\n  activitiesCount = 0,\n  filesCount = 0,\n  sectionAction = null,\n  children,\n}: CompanyDetailTabsProps) {\n  const t = useT()\n  const { canViewDeals } = useDealsAccess()\n\n  const builtInTabs: TabDef[] = React.useMemo(\n    () => [\n      {\n        id: 'people',\n        label: t('customers.companies.detail.tabs.people', 'People'),\n        icon: <Users className=\"size-4\" />,\n        count: formatTabCount(peopleCount),\n      },\n      ...(canViewDeals\n        ? [\n            {\n              id: 'deals' as CompanyTabId,\n              label: t('customers.companies.detail.tabs.deals', 'Deals'),\n              icon: <Handshake className=\"size-4\" />,\n              count: formatTabCount(dealsCount),\n            },\n          ]\n        : []),\n      {\n        id: 'activity-log',\n        label: t('customers.companies.detail.tabs.activityLog', 'Activity log'),\n        icon: <Clock className=\"size-4\" />,\n        count: formatTabCount(activitiesCount),\n      },\n      {\n        id: 'changelog',\n        label: t('customers.companies.detail.tabs.changelog', 'Changelog'),\n        icon: <History className=\"size-4\" />,\n        count: 'NEW',\n      },\n      {\n        id: 'files',\n        label: t('customers.companies.detail.tabs.files', 'Files'),\n        icon: <Paperclip className=\"size-4\" />,\n        count: formatTabCount(filesCount),\n      },\n    ],\n    [t, canViewDeals, peopleCount, dealsCount, activitiesCount, filesCount],\n  )\n\n  const allTabs: TabDef[] = React.useMemo(\n    () => [\n      ...builtInTabs,\n      ...injectedTabs.map((tab) => ({\n        id: tab.id as CompanyTabId,\n        label: tab.label,\n      })),\n    ],\n    [builtInTabs, injectedTabs],\n  )\n\n  return (\n    <div>\n      {/* Tab navigation */}\n      <div className=\"flex items-end justify-between gap-2 border-b\">\n        <Tabs\n          value={activeTab}\n          onValueChange={(value) => onTabChange(value as CompanyTabId)}\n          variant=\"underline\"\n          className=\"min-w-0 flex-1\"\n        >\n          <TabsList\n            aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}\n            className=\"-mb-px w-full overflow-x-auto border-b-0 px-1\"\n          >\n            {allTabs.map((tab) => (\n              <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        {sectionAction ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            onClick={sectionAction.onClick}\n            disabled={sectionAction.disabled}\n            className=\"mb-1.5 mr-1 shrink-0\"\n          >\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            {sectionAction.label}\n          </Button>\n        ) : null}\n      </div>\n\n      {/* Tab content */}\n      <div className=\"pt-6\" role=\"tabpanel\">\n        {children}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/customers/components/detail/DealDetailTabs.js

@@ -2,20 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Activity, Building2, History, NotebookPen, Paperclip, Users } from "lucide-react";
-import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { Button } from "@open-mercato/ui/primitives/button";
+import { Tabs, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
 const SUPPORTED_TAB_IDS = /* @__PURE__ */ new Set(["activities", "people", "companies", "notes", "files", "changelog"]);
 function resolveLegacyTab(tab) {
   if (!tab) return "activities";
   return SUPPORTED_TAB_IDS.has(tab) ? tab : "activities";
 }
-function CountBadge({ count }) {
-  if (count <= 0) return null;
-  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground", children: count > 999 ? "999+" : count });
-}
-function NewBadge() {
-  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground", children: "NEW" });
+function formatTabCount(count) {
+  if (count <= 0) return void 0;
+  return count > 999 ? "999+" : count;
 }
 function DealDetailTabs({
   activeTab,
@@ -37,13 +33,13 @@ function DealDetailTabs({
         id: "people",
         label: t("customers.deals.detail.tabs.people", "People"),
         icon: /* @__PURE__ */ jsx(Users, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: peopleCount })
+        count: formatTabCount(peopleCount)
       },
       {
         id: "companies",
         label: t("customers.deals.detail.tabs.companies", "Companies"),
         icon: /* @__PURE__ */ jsx(Building2, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(CountBadge, { count: companiesCount })
+        count: formatTabCount(companiesCount)
       },
       {
         id: "notes",
@@ -59,7 +55,7 @@ function DealDetailTabs({
         id: "changelog",
         label: t("customers.deals.detail.tabs.changelog", "Changelog"),
         icon: /* @__PURE__ */ jsx(History, { className: "size-4" }),
-        badge: /* @__PURE__ */ jsx(NewBadge, {})
+        count: "NEW"
       }
     ],
     [companiesCount, peopleCount, t]
@@ -75,30 +71,22 @@ function DealDetailTabs({
     [builtInTabs, injectedTabs]
   );
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border", role: "tablist", "aria-label": t("customers.deals.detail.tabs.label", "Deal detail sections"), children: /* @__PURE__ */ jsx("nav", { className: "-mb-px flex gap-7 overflow-x-auto", role: "presentation", children: allTabs.map((tab) => {
-      const isActive = activeTab === tab.id;
-      return /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          role: "tab",
-          "aria-selected": isActive,
-          onClick: () => onTabChange(tab.id),
-          className: cn(
-            "h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent",
-            isActive ? "border-foreground text-foreground font-semibold" : "border-transparent text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            tab.icon ? /* @__PURE__ */ jsx("span", { className: "mr-1.5", children: tab.icon }) : null,
-            tab.label,
-            tab.badge
-          ]
-        },
-        tab.id
-      );
-    }) }) }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: (value) => onTabChange(value),
+        variant: "underline",
+        children: /* @__PURE__ */ jsx(
+          TabsList,
+          {
+            "aria-label": t("customers.deals.detail.tabs.label", "Deal detail sections"),
+            className: "w-full overflow-x-auto",
+            children: allTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, leading: tab.icon, count: tab.count, children: tab.label }, tab.id))
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "pt-5", role: "tabpanel", children })
   ] });
 }

package/dist/modules/customers/components/detail/DealDetailTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/DealDetailTabs.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Activity, Building2, History, NotebookPen, Paperclip, Users } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nexport type DealTabId =\n  | 'activities'\n  | 'people'\n  | 'companies'\n  | 'notes'\n  | 'files'\n  | 'changelog'\n  | string\n\ntype TabDef = {\n  id: DealTabId\n  label: string\n  icon?: React.ReactNode\n  badge?: React.ReactNode\n}\n\ntype DealDetailTabsProps = {\n  activeTab: DealTabId\n  onTabChange: (tab: DealTabId) => void\n  injectedTabs?: Array<{ id: string; label: string }>\n  peopleCount?: number\n  companiesCount?: number\n  children: React.ReactNode\n}\n\nconst SUPPORTED_TAB_IDS = new Set<DealTabId>(['activities', 'people', 'companies', 'notes', 'files', 'changelog'])\n\nexport function resolveLegacyTab(tab: string | null | undefined): DealTabId {\n  if (!tab) return 'activities'\n  return SUPPORTED_TAB_IDS.has(tab as DealTabId) ? (tab as DealTabId) : 'activities'\n}\n\nfunction CountBadge({ count }: { count: number }) {\n  if (count <= 0) return null\n  return (\n    <span className=\"ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground\">\n      {count > 999 ? '999+' : count}\n    </span>\n  )\n}\n\nfunction NewBadge() {\n  return (\n    <span className=\"ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground\">\n      NEW\n    </span>\n  )\n}\n\nexport function DealDetailTabs({\n  activeTab,\n  onTabChange,\n  injectedTabs = [],\n  peopleCount = 0,\n  companiesCount = 0,\n  children,\n}: DealDetailTabsProps) {\n  const t = useT()\n\n  const builtInTabs = React.useMemo<TabDef[]>(\n    () => [\n      {\n        id: 'activities',\n        label: t('customers.deals.detail.tabs.activities', 'Activities'),\n        icon: <Activity className=\"size-4\" />,\n      },\n      {\n        id: 'people',\n        label: t('customers.deals.detail.tabs.people', 'People'),\n        icon: <Users className=\"size-4\" />,\n        badge: <CountBadge count={peopleCount} />,\n      },\n      {\n        id: 'companies',\n        label: t('customers.deals.detail.tabs.companies', 'Companies'),\n        icon: <Building2 className=\"size-4\" />,\n        badge: <CountBadge count={companiesCount} />,\n      },\n      {\n        id: 'notes',\n        label: t('customers.deals.detail.tabs.notes', 'Notes'),\n        icon: <NotebookPen className=\"size-4\" />,\n      },\n      {\n        id: 'files',\n        label: t('customers.deals.detail.tabs.files', 'Files'),\n        icon: <Paperclip className=\"size-4\" />,\n      },\n      {\n        id: 'changelog',\n        label: t('customers.deals.detail.tabs.changelog', 'Changelog'),\n        icon: <History className=\"size-4\" />,\n        badge: <NewBadge />,\n      },\n    ],\n    [companiesCount, peopleCount, t],\n  )\n\n  const allTabs = React.useMemo<TabDef[]>(\n    () => [\n      ...builtInTabs,\n      ...injectedTabs.map((tab) => ({\n        id: tab.id as DealTabId,\n        label: tab.label,\n      })),\n    ],\n    [builtInTabs, injectedTabs],\n  )\n\n  return (\n    <div>\n      <div className=\"border-b border-border\" role=\"tablist\" aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}>\n        <nav className=\"-mb-px flex gap-7 overflow-x-auto\" role=\"presentation\">\n          {allTabs.map((tab) => {\n            const isActive = activeTab === tab.id\n            return (\n              <Button\n                key={tab.id}\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => onTabChange(tab.id)}\n                className={cn(\n                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',\n                  isActive\n                    ? 'border-foreground text-foreground font-semibold'\n                    : 'border-transparent text-muted-foreground hover:text-foreground',\n                )}\n              >\n                {tab.icon ? <span className=\"mr-1.5\">{tab.icon}</span> : null}\n                {tab.label}\n                {tab.badge}\n              </Button>\n            )\n          })}\n        </nav>\n      </div>\n\n      <div className=\"pt-5\" role=\"tabpanel\">\n        {children}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Activity, Building2, History, NotebookPen, Paperclip, Users } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\nexport type DealTabId =\n  | 'activities'\n  | 'people'\n  | 'companies'\n  | 'notes'\n  | 'files'\n  | 'changelog'\n  | string\n\ntype TabDef = {\n  id: DealTabId\n  label: string\n  icon?: React.ReactNode\n  count?: React.ReactNode\n}\n\ntype DealDetailTabsProps = {\n  activeTab: DealTabId\n  onTabChange: (tab: DealTabId) => void\n  injectedTabs?: Array<{ id: string; label: string }>\n  peopleCount?: number\n  companiesCount?: number\n  children: React.ReactNode\n}\n\nconst SUPPORTED_TAB_IDS = new Set<DealTabId>(['activities', 'people', 'companies', 'notes', 'files', 'changelog'])\n\nexport function resolveLegacyTab(tab: string | null | undefined): DealTabId {\n  if (!tab) return 'activities'\n  return SUPPORTED_TAB_IDS.has(tab as DealTabId) ? (tab as DealTabId) : 'activities'\n}\n\nfunction formatTabCount(count: number): string | number | undefined {\n  if (count <= 0) return undefined\n  return count > 999 ? '999+' : count\n}\n\nexport function DealDetailTabs({\n  activeTab,\n  onTabChange,\n  injectedTabs = [],\n  peopleCount = 0,\n  companiesCount = 0,\n  children,\n}: DealDetailTabsProps) {\n  const t = useT()\n\n  const builtInTabs = React.useMemo<TabDef[]>(\n    () => [\n      {\n        id: 'activities',\n        label: t('customers.deals.detail.tabs.activities', 'Activities'),\n        icon: <Activity className=\"size-4\" />,\n      },\n      {\n        id: 'people',\n        label: t('customers.deals.detail.tabs.people', 'People'),\n        icon: <Users className=\"size-4\" />,\n        count: formatTabCount(peopleCount),\n      },\n      {\n        id: 'companies',\n        label: t('customers.deals.detail.tabs.companies', 'Companies'),\n        icon: <Building2 className=\"size-4\" />,\n        count: formatTabCount(companiesCount),\n      },\n      {\n        id: 'notes',\n        label: t('customers.deals.detail.tabs.notes', 'Notes'),\n        icon: <NotebookPen className=\"size-4\" />,\n      },\n      {\n        id: 'files',\n        label: t('customers.deals.detail.tabs.files', 'Files'),\n        icon: <Paperclip className=\"size-4\" />,\n      },\n      {\n        id: 'changelog',\n        label: t('customers.deals.detail.tabs.changelog', 'Changelog'),\n        icon: <History className=\"size-4\" />,\n        count: 'NEW',\n      },\n    ],\n    [companiesCount, peopleCount, t],\n  )\n\n  const allTabs = React.useMemo<TabDef[]>(\n    () => [\n      ...builtInTabs,\n      ...injectedTabs.map((tab) => ({\n        id: tab.id as DealTabId,\n        label: tab.label,\n      })),\n    ],\n    [builtInTabs, injectedTabs],\n  )\n\n  return (\n    <div>\n      <Tabs\n        value={activeTab}\n        onValueChange={(value) => onTabChange(value as DealTabId)}\n        variant=\"underline\"\n      >\n        <TabsList\n          aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}\n          className=\"w-full overflow-x-auto\"\n        >\n          {allTabs.map((tab) => (\n            <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>\n              {tab.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n\n      <div className=\"pt-5\" role=\"tabpanel\">\n        {children}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA2Dc,cA8CV,YA9CU;AAzDd,YAAY,WAAW;AACvB,SAAS,UAAU,WAAW,SAAS,aAAa,WAAW,aAAa;AAC5E,SAAS,YAAY;AACrB,SAAS,MAAM,UAAU,mBAAmB;AA2B5C,MAAM,oBAAoB,oBAAI,IAAe,CAAC,cAAc,UAAU,aAAa,SAAS,SAAS,WAAW,CAAC;AAE1G,SAAS,iBAAiB,KAA2C;AAC1E,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,kBAAkB,IAAI,GAAgB,IAAK,MAAoB;AACxE;AAEA,SAAS,eAAe,OAA4C;AAClE,MAAI,SAAS,EAAG,QAAO;AACvB,SAAO,QAAQ,MAAM,SAAS;AAChC;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB;AACF,GAAwB;AACtB,QAAM,IAAI,KAAK;AAEf,QAAM,cAAc,MAAM;AAAA,IACxB,MAAM;AAAA,MACJ;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,0CAA0C,YAAY;AAAA,QAC/D,MAAM,oBAAC,YAAS,WAAU,UAAS;AAAA,MACrC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,sCAAsC,QAAQ;AAAA,QACvD,MAAM,oBAAC,SAAM,WAAU,UAAS;AAAA,QAChC,OAAO,eAAe,WAAW;AAAA,MACnC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,yCAAyC,WAAW;AAAA,QAC7D,MAAM,oBAAC,aAAU,WAAU,UAAS;AAAA,QACpC,OAAO,eAAe,cAAc;AAAA,MACtC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,qCAAqC,OAAO;AAAA,QACrD,MAAM,oBAAC,eAAY,WAAU,UAAS;AAAA,MACxC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,qCAAqC,OAAO;AAAA,QACrD,MAAM,oBAAC,aAAU,WAAU,UAAS;AAAA,MACtC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,EAAE,yCAAyC,WAAW;AAAA,QAC7D,MAAM,oBAAC,WAAQ,WAAU,UAAS;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,CAAC;AAAA,EACjC;AAEA,QAAM,UAAU,MAAM;AAAA,IACpB,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,GAAG,aAAa,IAAI,CAAC,SAAS;AAAA,QAC5B,IAAI,IAAI;AAAA,QACR,OAAO,IAAI;AAAA,MACb,EAAE;AAAA,IACJ;AAAA,IACA,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,eAAe,CAAC,UAAU,YAAY,KAAkB;AAAA,QACxD,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,EAAE,qCAAqC,sBAAsB;AAAA,YACzE,WAAU;AAAA,YAET,kBAAQ,IAAI,CAAC,QACZ,oBAAC,eAAyB,OAAO,IAAI,IAAI,SAAS,IAAI,MAAM,OAAO,IAAI,OACpE,cAAI,SADW,IAAI,EAEtB,CACD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAI,WAAU,QAAO,MAAK,YACxB,UACH;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/modules/customers/components/detail/DetailTabsLayout.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "@open-mercato/ui/primitives/button";
+import { Tabs, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { Plus } from "lucide-react";
 function DetailTabsLayout({
@@ -25,28 +26,12 @@ function DetailTabsLayout({
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-3", headerClassName), children: [
       /* @__PURE__ */ jsx(
-        "nav",
+        Tabs,
         {
-          className: cn("flex flex-wrap items-center gap-3 text-sm", navClassName),
-          role: "tablist",
-          "aria-label": navAriaLabel,
-          children: tabs.map((tab) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              role: "tab",
-              "aria-selected": activeTab === tab.id,
-              onClick: () => handleTabChange(tab.id),
-              className: cn(
-                "h-auto rounded-none border-b-2 px-0 py-1",
-                activeTab === tab.id ? "border-accent-indigo text-foreground hover:bg-transparent" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent"
-              ),
-              children: tab.label
-            },
-            tab.id
-          ))
+          value: activeTab,
+          onValueChange: (value) => handleTabChange(value),
+          variant: "underline",
+          children: /* @__PURE__ */ jsx(TabsList, { className: cn("h-auto flex-wrap border-b-0", navClassName), "aria-label": navAriaLabel, children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, children: tab.label }, tab.id)) })
         }
       ),
       sectionAction ? /* @__PURE__ */ jsxs(

package/dist/modules/customers/components/detail/DetailTabsLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/DetailTabsLayout.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { SectionAction } from '@open-mercato/ui/backend/detail'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Plus } from 'lucide-react'\n\nexport type DetailTabDefinition<TId extends string = string> = {\n  id: TId\n  label: React.ReactNode\n}\n\ntype DetailTabsLayoutProps<TId extends string = string> = {\n  tabs: DetailTabDefinition<TId>[]\n  activeTab: TId\n  onTabChange: (id: TId) => void\n  sectionAction: SectionAction | null\n  onSectionAction: () => void\n  navAriaLabel: string\n  className?: string\n  headerClassName?: string\n  navClassName?: string\n  children: React.ReactNode\n}\n\nexport function DetailTabsLayout<TId extends string = string>({\n  tabs,\n  activeTab,\n  onTabChange,\n  sectionAction,\n  onSectionAction,\n  navAriaLabel,\n  className,\n  headerClassName,\n  navClassName,\n  children,\n}: DetailTabsLayoutProps<TId>) {\n  const handleTabChange = React.useCallback(\n    (id: TId) => {\n      onTabChange(id)\n    },\n    [onTabChange],\n  )\n\n  return (\n    <div className={cn('space-y-4', className)}>\n      <div className={cn('flex flex-wrap items-center justify-between gap-3', headerClassName)}>\n        <nav\n          className={cn('flex flex-wrap items-center gap-3 text-sm', navClassName)}\n          role=\"tablist\"\n          aria-label={navAriaLabel}\n        >\n          {tabs.map((tab) => (\n            <Button\n              key={tab.id}\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              role=\"tab\"\n              aria-selected={activeTab === tab.id}\n              onClick={() => handleTabChange(tab.id)}\n              className={cn(\n                'h-auto rounded-none border-b-2 px-0 py-1',\n                activeTab === tab.id\n                  ? 'border-accent-indigo text-foreground hover:bg-transparent'\n                  : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent'\n              )}\n            >\n              {tab.label}\n            </Button>\n          ))}\n        </nav>\n        {sectionAction ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            onClick={onSectionAction}\n            disabled={sectionAction.disabled}\n          >\n            {sectionAction.icon ?? (typeof sectionAction.label === 'string' || typeof sectionAction.label === 'number' ? (\n              <Plus className=\"mr-2 h-4 w-4\" />\n            ) : null)}\n            {sectionAction.label}\n          </Button>\n        ) : null}\n      </div>\n      <div>{children}</div>\n    </div>\n  )\n}\n"],
-  "mappings": ";AAsDY,cAoBF,YApBE;AApDZ,YAAY,WAAW;AAEvB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AAoBd,SAAS,iBAA8C;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,kBAAkB,MAAM;AAAA,IAC5B,CAAC,OAAY;AACX,kBAAY,EAAE;AAAA,IAChB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC;AAAA,yBAAC,SAAI,WAAW,GAAG,qDAAqD,eAAe,GACrF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,6CAA6C,YAAY;AAAA,UACvE,MAAK;AAAA,UACL,cAAY;AAAA,UAEX,eAAK,IAAI,CAAC,QACT;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,MAAK;AAAA,cACL,iBAAe,cAAc,IAAI;AAAA,cACjC,SAAS,MAAM,gBAAgB,IAAI,EAAE;AAAA,cACrC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,IAAI,KACd,8DACA;AAAA,cACN;AAAA,cAEC,cAAI;AAAA;AAAA,YAdA,IAAI;AAAA,UAeX,CACD;AAAA;AAAA,MACH;AAAA,MACC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,cAAc;AAAA,UAEvB;AAAA,0BAAc,SAAS,OAAO,cAAc,UAAU,YAAY,OAAO,cAAc,UAAU,WAChG,oBAAC,QAAK,WAAU,gBAAe,IAC7B;AAAA,YACH,cAAc;AAAA;AAAA;AAAA,MACjB,IACE;AAAA,OACN;AAAA,IACA,oBAAC,SAAK,UAAS;AAAA,KACjB;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { SectionAction } from '@open-mercato/ui/backend/detail'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Plus } from 'lucide-react'\n\nexport type DetailTabDefinition<TId extends string = string> = {\n  id: TId\n  label: React.ReactNode\n}\n\ntype DetailTabsLayoutProps<TId extends string = string> = {\n  tabs: DetailTabDefinition<TId>[]\n  activeTab: TId\n  onTabChange: (id: TId) => void\n  sectionAction: SectionAction | null\n  onSectionAction: () => void\n  navAriaLabel: string\n  className?: string\n  headerClassName?: string\n  navClassName?: string\n  children: React.ReactNode\n}\n\nexport function DetailTabsLayout<TId extends string = string>({\n  tabs,\n  activeTab,\n  onTabChange,\n  sectionAction,\n  onSectionAction,\n  navAriaLabel,\n  className,\n  headerClassName,\n  navClassName,\n  children,\n}: DetailTabsLayoutProps<TId>) {\n  const handleTabChange = React.useCallback(\n    (id: TId) => {\n      onTabChange(id)\n    },\n    [onTabChange],\n  )\n\n  return (\n    <div className={cn('space-y-4', className)}>\n      <div className={cn('flex flex-wrap items-center justify-between gap-3', headerClassName)}>\n        <Tabs\n          value={activeTab}\n          onValueChange={(value) => handleTabChange(value as TId)}\n          variant=\"underline\"\n        >\n          <TabsList className={cn('h-auto flex-wrap border-b-0', navClassName)} aria-label={navAriaLabel}>\n            {tabs.map((tab) => (\n              <TabsTrigger key={tab.id} value={tab.id}>\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        {sectionAction ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            onClick={onSectionAction}\n            disabled={sectionAction.disabled}\n          >\n            {sectionAction.icon ?? (typeof sectionAction.label === 'string' || typeof sectionAction.label === 'number' ? (\n              <Plus className=\"mr-2 h-4 w-4\" />\n            ) : null)}\n            {sectionAction.label}\n          </Button>\n        ) : null}\n      </div>\n      <div>{children}</div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAwDc,cAOJ,YAPI;AAtDd,YAAY,WAAW;AAEvB,SAAS,cAAc;AACvB,SAAS,MAAM,UAAU,mBAAmB;AAC5C,SAAS,UAAU;AACnB,SAAS,YAAY;AAoBd,SAAS,iBAA8C;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,kBAAkB,MAAM;AAAA,IAC5B,CAAC,OAAY;AACX,kBAAY,EAAE;AAAA,IAChB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC;AAAA,yBAAC,SAAI,WAAW,GAAG,qDAAqD,eAAe,GACrF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,UAAU,gBAAgB,KAAY;AAAA,UACtD,SAAQ;AAAA,UAER,8BAAC,YAAS,WAAW,GAAG,+BAA+B,YAAY,GAAG,cAAY,cAC/E,eAAK,IAAI,CAAC,QACT,oBAAC,eAAyB,OAAO,IAAI,IAClC,cAAI,SADW,IAAI,EAEtB,CACD,GACH;AAAA;AAAA,MACF;AAAA,MACC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,cAAc;AAAA,UAEvB;AAAA,0BAAc,SAAS,OAAO,cAAc,UAAU,YAAY,OAAO,cAAc,UAAU,WAChG,oBAAC,QAAK,WAAU,gBAAe,IAC7B;AAAA,YACH,cAAc;AAAA;AAAA;AAAA,MACjB,IACE;AAAA,OACN;AAAA,IACA,oBAAC,SAAK,UAAS;AAAA,KACjB;AAEJ;",
   "names": []
 }

package/dist/modules/customers/components/detail/MobilePersonDetail.js

@@ -3,8 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { cn } from "@open-mercato/shared/lib/utils";
-import { Button } from "@open-mercato/ui/primitives/button";
+import { Tabs, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
 const ZONES = [
   { id: "details", labelKey: "customers.people.mobile.zoneSwitcher.details", fallback: "Details" },
   { id: "activity", labelKey: "customers.people.mobile.zoneSwitcher.activity", fallback: "Activity" }
@@ -55,38 +54,33 @@ function MobilePersonDetail({
     [handleZoneChange, zone]
   );
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx("div", { onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsx(
+      Tabs,
       {
-        role: "tablist",
-        "aria-label": t(
-          "customers.people.mobile.zoneSwitcher.ariaLabel",
-          "Zone selector"
-        ),
-        className: "grid grid-cols-2 gap-1 rounded-lg border border-border/70 bg-muted/20 p-1",
-        onKeyDown: handleKeyDown,
-        children: ZONES.map((entry) => {
-          const isActive = zone === entry.id;
-          return /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": isActive,
-              "aria-controls": `mobile-person-zone-${entry.id}`,
-              variant: isActive ? "default" : "ghost",
-              className: cn(
-                "h-11 rounded-lg text-sm font-semibold",
-                isActive ? "" : "text-muted-foreground"
-              ),
-              onClick: () => handleZoneChange(entry.id),
-              children: t(entry.labelKey, entry.fallback)
-            },
-            entry.id
-          );
-        })
+        value: zone,
+        onValueChange: (value) => handleZoneChange(value),
+        variant: "underline",
+        children: /* @__PURE__ */ jsx(
+          TabsList,
+          {
+            "aria-label": t(
+              "customers.people.mobile.zoneSwitcher.ariaLabel",
+              "Zone selector"
+            ),
+            className: "w-full",
+            children: ZONES.map((entry) => /* @__PURE__ */ jsx(
+              TabsTrigger,
+              {
+                value: entry.id,
+                className: "flex-1 justify-center",
+                children: t(entry.labelKey, entry.fallback)
+              },
+              entry.id
+            ))
+          }
+        )
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/modules/customers/components/detail/MobilePersonDetail.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/MobilePersonDetail.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useRouter, useSearchParams } from 'next/navigation'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nexport type MobilePersonZone = 'details' | 'activity'\n\nexport type MobilePersonDetailProps = {\n  zone1: React.ReactNode\n  zone2: React.ReactNode\n  defaultZone?: MobilePersonZone\n  /**\n   * Controls whether zone state is synced to the URL `?zone=` query param.\n   * Defaults to true on the page route so deep links round-trip.\n   */\n  syncToUrl?: boolean\n}\n\nconst ZONES: Array<{ id: MobilePersonZone; labelKey: string; fallback: string }> = [\n  { id: 'details', labelKey: 'customers.people.mobile.zoneSwitcher.details', fallback: 'Details' },\n  { id: 'activity', labelKey: 'customers.people.mobile.zoneSwitcher.activity', fallback: 'Activity' },\n]\n\nexport function MobilePersonDetail({\n  zone1,\n  zone2,\n  defaultZone = 'details',\n  syncToUrl = true,\n}: MobilePersonDetailProps) {\n  const t = useT()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n\n  const initialZone = React.useMemo<MobilePersonZone>(() => {\n    if (!syncToUrl) return defaultZone\n    const raw = searchParams?.get('zone')\n    if (raw === 'activity' || raw === 'details') return raw\n    return defaultZone\n    // Intentionally compute only from the initial searchParams snapshot; external URL updates\n    // (browser back, manual edit) are acceptable to be out of sync on mobile \u2014 local clicks\n    // own the zone state thereafter.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const [zone, setZone] = React.useState<MobilePersonZone>(initialZone)\n  const lastWrittenZoneRef = React.useRef<MobilePersonZone | null>(null)\n\n  const handleZoneChange = React.useCallback(\n    (next: MobilePersonZone) => {\n      setZone(next)\n      lastWrittenZoneRef.current = next\n      if (!syncToUrl) return\n      const params = new URLSearchParams(searchParams?.toString() ?? '')\n      if (next === defaultZone) {\n        params.delete('zone')\n      } else {\n        params.set('zone', next)\n      }\n      const query = params.toString()\n      router.replace(query.length ? `?${query}` : '?', { scroll: false })\n    },\n    [defaultZone, router, searchParams, syncToUrl],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return\n      event.preventDefault()\n      const currentIndex = ZONES.findIndex((entry) => entry.id === zone)\n      if (currentIndex < 0) return\n      const offset = event.key === 'ArrowRight' ? 1 : -1\n      const nextIndex = (currentIndex + offset + ZONES.length) % ZONES.length\n      handleZoneChange(ZONES[nextIndex].id)\n    },\n    [handleZoneChange, zone],\n  )\n\n  return (\n    <div className=\"space-y-4\">\n      <div\n        role=\"tablist\"\n        aria-label={t(\n          'customers.people.mobile.zoneSwitcher.ariaLabel',\n          'Zone selector',\n        )}\n        className=\"grid grid-cols-2 gap-1 rounded-lg border border-border/70 bg-muted/20 p-1\"\n        onKeyDown={handleKeyDown}\n      >\n        {ZONES.map((entry) => {\n          const isActive = zone === entry.id\n          return (\n            <Button\n              key={entry.id}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={`mobile-person-zone-${entry.id}`}\n              variant={isActive ? 'default' : 'ghost'}\n              className={cn(\n                'h-11 rounded-lg text-sm font-semibold',\n                isActive ? '' : 'text-muted-foreground',\n              )}\n              onClick={() => handleZoneChange(entry.id)}\n            >\n              {t(entry.labelKey, entry.fallback)}\n            </Button>\n          )\n        })}\n      </div>\n      <div\n        id={`mobile-person-zone-${zone}`}\n        role=\"tabpanel\"\n        aria-labelledby={`mobile-person-zone-${zone}-tab`}\n      >\n        {zone === 'details' ? zone1 : zone2}\n      </div>\n    </div>\n  )\n}\n\nexport default MobilePersonDetail\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useRouter, useSearchParams } from 'next/navigation'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\nexport type MobilePersonZone = 'details' | 'activity'\n\nexport type MobilePersonDetailProps = {\n  zone1: React.ReactNode\n  zone2: React.ReactNode\n  defaultZone?: MobilePersonZone\n  /**\n   * Controls whether zone state is synced to the URL `?zone=` query param.\n   * Defaults to true on the page route so deep links round-trip.\n   */\n  syncToUrl?: boolean\n}\n\nconst ZONES: Array<{ id: MobilePersonZone; labelKey: string; fallback: string }> = [\n  { id: 'details', labelKey: 'customers.people.mobile.zoneSwitcher.details', fallback: 'Details' },\n  { id: 'activity', labelKey: 'customers.people.mobile.zoneSwitcher.activity', fallback: 'Activity' },\n]\n\nexport function MobilePersonDetail({\n  zone1,\n  zone2,\n  defaultZone = 'details',\n  syncToUrl = true,\n}: MobilePersonDetailProps) {\n  const t = useT()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n\n  const initialZone = React.useMemo<MobilePersonZone>(() => {\n    if (!syncToUrl) return defaultZone\n    const raw = searchParams?.get('zone')\n    if (raw === 'activity' || raw === 'details') return raw\n    return defaultZone\n    // Intentionally compute only from the initial searchParams snapshot; external URL updates\n    // (browser back, manual edit) are acceptable to be out of sync on mobile \u2014 local clicks\n    // own the zone state thereafter.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const [zone, setZone] = React.useState<MobilePersonZone>(initialZone)\n  const lastWrittenZoneRef = React.useRef<MobilePersonZone | null>(null)\n\n  const handleZoneChange = React.useCallback(\n    (next: MobilePersonZone) => {\n      setZone(next)\n      lastWrittenZoneRef.current = next\n      if (!syncToUrl) return\n      const params = new URLSearchParams(searchParams?.toString() ?? '')\n      if (next === defaultZone) {\n        params.delete('zone')\n      } else {\n        params.set('zone', next)\n      }\n      const query = params.toString()\n      router.replace(query.length ? `?${query}` : '?', { scroll: false })\n    },\n    [defaultZone, router, searchParams, syncToUrl],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return\n      event.preventDefault()\n      const currentIndex = ZONES.findIndex((entry) => entry.id === zone)\n      if (currentIndex < 0) return\n      const offset = event.key === 'ArrowRight' ? 1 : -1\n      const nextIndex = (currentIndex + offset + ZONES.length) % ZONES.length\n      handleZoneChange(ZONES[nextIndex].id)\n    },\n    [handleZoneChange, zone],\n  )\n\n  return (\n    <div className=\"space-y-4\">\n      <div onKeyDown={handleKeyDown}>\n        <Tabs\n          value={zone}\n          onValueChange={(value) => handleZoneChange(value as MobilePersonZone)}\n          variant=\"underline\"\n        >\n          <TabsList\n            aria-label={t(\n              'customers.people.mobile.zoneSwitcher.ariaLabel',\n              'Zone selector',\n            )}\n            className=\"w-full\"\n          >\n            {ZONES.map((entry) => (\n              <TabsTrigger\n                key={entry.id}\n                value={entry.id}\n                className=\"flex-1 justify-center\"\n              >\n                {t(entry.labelKey, entry.fallback)}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n      </div>\n      <div\n        id={`mobile-person-zone-${zone}`}\n        role=\"tabpanel\"\n        aria-labelledby={`mobile-person-zone-${zone}-tab`}\n      >\n        {zone === 'details' ? zone1 : zone2}\n      </div>\n    </div>\n  )\n}\n\nexport default MobilePersonDetail\n"],
+  "mappings": ";AAgFI,SAeU,KAfV;AA9EJ,YAAY,WAAW;AACvB,SAAS,WAAW,uBAAuB;AAC3C,SAAS,YAAY;AACrB,SAAS,MAAM,UAAU,mBAAmB;AAe5C,MAAM,QAA6E;AAAA,EACjF,EAAE,IAAI,WAAW,UAAU,gDAAgD,UAAU,UAAU;AAAA,EAC/F,EAAE,IAAI,YAAY,UAAU,iDAAiD,UAAU,WAAW;AACpG;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AACd,GAA4B;AAC1B,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,gBAAgB;AAErC,QAAM,cAAc,MAAM,QAA0B,MAAM;AACxD,QAAI,CAAC,UAAW,QAAO;AACvB,UAAM,MAAM,cAAc,IAAI,MAAM;AACpC,QAAI,QAAQ,cAAc,QAAQ,UAAW,QAAO;AACpD,WAAO;AAAA,EAKT,GAAG,CAAC,CAAC;AAEL,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAA2B,WAAW;AACpE,QAAM,qBAAqB,MAAM,OAAgC,IAAI;AAErE,QAAM,mBAAmB,MAAM;AAAA,IAC7B,CAAC,SAA2B;AAC1B,cAAQ,IAAI;AACZ,yBAAmB,UAAU;AAC7B,UAAI,CAAC,UAAW;AAChB,YAAM,SAAS,IAAI,gBAAgB,cAAc,SAAS,KAAK,EAAE;AACjE,UAAI,SAAS,aAAa;AACxB,eAAO,OAAO,MAAM;AAAA,MACtB,OAAO;AACL,eAAO,IAAI,QAAQ,IAAI;AAAA,MACzB;AACA,YAAM,QAAQ,OAAO,SAAS;AAC9B,aAAO,QAAQ,MAAM,SAAS,IAAI,KAAK,KAAK,KAAK,EAAE,QAAQ,MAAM,CAAC;AAAA,IACpE;AAAA,IACA,CAAC,aAAa,QAAQ,cAAc,SAAS;AAAA,EAC/C;AAEA,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,UAA+C;AAC9C,UAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAc;AAC7D,YAAM,eAAe;AACrB,YAAM,eAAe,MAAM,UAAU,CAAC,UAAU,MAAM,OAAO,IAAI;AACjE,UAAI,eAAe,EAAG;AACtB,YAAM,SAAS,MAAM,QAAQ,eAAe,IAAI;AAChD,YAAM,aAAa,eAAe,SAAS,MAAM,UAAU,MAAM;AACjE,uBAAiB,MAAM,SAAS,EAAE,EAAE;AAAA,IACtC;AAAA,IACA,CAAC,kBAAkB,IAAI;AAAA,EACzB;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,SAAI,WAAW,eACd;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,eAAe,CAAC,UAAU,iBAAiB,KAAyB;AAAA,QACpE,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,cACV;AAAA,cACA;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAET,gBAAM,IAAI,CAAC,UACV;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO,MAAM;AAAA,gBACb,WAAU;AAAA,gBAET,YAAE,MAAM,UAAU,MAAM,QAAQ;AAAA;AAAA,cAJ5B,MAAM;AAAA,YAKb,CACD;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,sBAAsB,IAAI;AAAA,QAC9B,MAAK;AAAA,QACL,mBAAiB,sBAAsB,IAAI;AAAA,QAE1C,mBAAS,YAAY,QAAQ;AAAA;AAAA,IAChC;AAAA,KACF;AAEJ;AAEA,IAAO,6BAAQ;",
   "names": []
 }