@traky-app/ui 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",

package/registry/traky/json/header-page.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "header-page",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "entity-icon"
+  ],
+  "files": [
+    {
+      "path": "ui/header-page.tsx",
+      "content": "\"use client\"\n\nimport type { Icon } from \"@tabler/icons-react\"\nimport type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { EntityIcon } from \"@/components/ui/entity-icon\"\n\ntype HeaderPageProps = {\n  icon: Icon\n  title: string\n  description: string\n  className?: string\n  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */\n  toolbarStart?: ReactNode\n  /** Contenido derecho de la barra (resumen, paginación, acción principal). */\n  toolbarEnd?: ReactNode\n  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */\n  filters?: ReactNode\n  showFilters?: boolean\n  toolbarAriaLabel?: string\n  toolbarId?: string\n  /** Acción principal junto al título (p. ej. crear registro). */\n  action?: ReactNode\n}\n\nfunction HeaderPageMeta({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <p\n      data-header-meta\n      className={cn(\n        \"text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none\",\n        className,\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n\nfunction HeaderPageToolbarAction({\n  children,\n  className,\n  order = \"primary\",\n}: {\n  children: ReactNode\n  className?: string\n  order?: \"primary\" | \"secondary\"\n}) {\n  return (\n    <div\n      className={cn(\n        \"w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto\",\n        order === \"primary\" && \"sm:order-2 sm:ml-auto\",\n        order === \"secondary\" && \"sm:order-3\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction HeaderPageToolbarPagination({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center sm:order-3 xl:order-none\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction HeaderPageRoot({\n  icon: Icon,\n  title,\n  description,\n  className,\n  toolbarStart,\n  toolbarEnd,\n  filters,\n  showFilters = false,\n  toolbarAriaLabel = \"Filtros y acciones\",\n  toolbarId,\n  action,\n}: HeaderPageProps) {\n  const hasToolbar = Boolean(toolbarStart || toolbarEnd)\n  const hasFiltersPanel = Boolean(filters)\n\n  return (\n    <header className={cn(\"space-y-4\", className)}>\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex min-w-0 items-start gap-3\">\n          <EntityIcon icon={Icon} size=\"lg\" />\n          <div className=\"min-w-0\">\n            <h1 className=\"text-xl font-semibold\">{title}</h1>\n            <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p>\n          </div>\n        </div>\n\n        {action ? (\n          <div className=\"flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0\">\n            {action}\n          </div>\n        ) : null}\n      </div>\n\n      {(hasToolbar || hasFiltersPanel) && (\n        <section\n          id={toolbarId}\n          className=\"space-y-4\"\n          aria-label={toolbarAriaLabel}\n        >\n          {hasToolbar && (\n            <div\n              className={cn(\n                \"flex flex-col gap-3\",\n                \"max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2\",\n                \"max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0\",\n                \"max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none\",\n                \"max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0\",\n                \"max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink\",\n                toolbarStart\n                  ? \"xl:flex-row xl:items-center xl:justify-between\"\n                  : \"sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4\",\n              )}\n            >\n              {toolbarStart ? (\n                <div className=\"max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2\">\n                  {toolbarStart}\n                </div>\n              ) : null}\n\n              {toolbarEnd ? (\n                <div className=\"max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4\">\n                  {toolbarEnd}\n                </div>\n              ) : null}\n            </div>\n          )}\n\n          {showFilters && filters}\n        </section>\n      )}\n    </header>\n  )\n}\n\nconst HeaderPage = Object.assign(HeaderPageRoot, {\n  Meta: HeaderPageMeta,\n  ToolbarAction: HeaderPageToolbarAction,\n  ToolbarPagination: HeaderPageToolbarPagination,\n})\n\nexport { HeaderPage }\nexport default HeaderPage\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/office-switcher.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "office-switcher",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "dropdown-menu",
+    "sidebar",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/office-switcher.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconCheck,\n  IconLayoutGrid,\n  IconPlus,\n  IconSelector,\n} from \"@tabler/icons-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\nexport type OfficeSwitcherKind = \"branch\" | \"warehouse\"\n\nexport type OfficeSwitcherItem = {\n  id: string\n  label: string\n  subtitle?: string\n  kind: OfficeSwitcherKind\n  isMain?: boolean\n}\n\nexport type OfficeSwitcherAction = {\n  id: string\n  label: string\n  href?: string\n  onSelect?: () => void\n}\n\nexport type OfficeSwitcherConfirmation = {\n  open: boolean\n  title: string\n  description: React.ReactNode\n  confirmLabel?: string\n  cancelLabel?: string\n  onConfirm: () => void\n  onOpenChange: (open: boolean) => void\n}\n\nexport type OfficeSwitcherLabels = {\n  filter: string\n  all: string\n  allHint: string\n  placeholder: string\n  placeholderHint: string\n  branches: string\n  warehouses: string\n  empty: string\n  main: string\n  change: string\n}\n\nconst DEFAULT_LABELS: OfficeSwitcherLabels = {\n  filter: \"Filtro por oficina\",\n  all: \"Todas las ubicaciones\",\n  allHint: \"Mostrar todo sin filtrar\",\n  placeholder: \"Selecciona una oficina\",\n  placeholderHint: \"Elige una sucursal o bodega\",\n  branches: \"Sucursales\",\n  warehouses: \"Bodegas\",\n  empty: \"No hay sucursales ni bodegas activas.\",\n  main: \"Principal\",\n  change: \"Cambiar oficina\",\n}\n\nexport type OfficeSwitcherProps = {\n  items: OfficeSwitcherItem[]\n  selectedId?: string | null\n  onSelect: (item: OfficeSwitcherItem) => void\n  onClear?: () => void\n  loading?: boolean\n  /** Una sola oficina: se muestra el nombre y no abre el menú. */\n  locked?: boolean\n  /** Dueños pueden ver todo sin filtrar. El personal no. */\n  allowAll?: boolean\n  labels?: Partial<OfficeSwitcherLabels>\n  actions?: OfficeSwitcherAction[]\n  /** Pieza superior, por ejemplo el cambio de cuenta. */\n  header?: React.ReactNode\n  confirmation?: OfficeSwitcherConfirmation | null\n  className?: string\n}\n\nfunction AllLocationsMark() {\n  return (\n    <span className=\"flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground\">\n      <IconLayoutGrid className=\"size-4\" stroke={1.75} />\n    </span>\n  )\n}\n\nfunction OfficeCopy({\n  label,\n  subtitle,\n  isMain,\n  mainLabel,\n  uppercaseSubtitle,\n}: {\n  label: string\n  subtitle?: string\n  isMain?: boolean\n  mainLabel: string\n  uppercaseSubtitle?: boolean\n}) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"flex min-w-0 items-center gap-1.5\">\n        <span className=\"truncate text-sm font-medium\">{label}</span>\n        {isMain ? (\n          <Badge\n            variant=\"outline\"\n            className=\"h-4 px-1.5 text-[10px] font-medium tracking-wide uppercase\"\n          >\n            {mainLabel}\n          </Badge>\n        ) : null}\n      </span>\n      {subtitle ? (\n        <span\n          className={cn(\n            \"mt-0.5 line-clamp-2 block text-xs text-muted-foreground\",\n            uppercaseSubtitle && \"uppercase\",\n          )}\n        >\n          {subtitle}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nfunction OfficeSwitcher({\n  items,\n  selectedId,\n  onSelect,\n  onClear,\n  loading = false,\n  locked = false,\n  allowAll = true,\n  labels: labelsProp,\n  actions = [],\n  header,\n  confirmation,\n  className,\n}: OfficeSwitcherProps) {\n  const { isMobile } = useSidebar()\n  const labels = { ...DEFAULT_LABELS, ...labelsProp }\n  const selected = items.find((item) => item.id === selectedId) ?? null\n  const branches = items.filter((item) => item.kind === \"branch\")\n  const warehouses = items.filter((item) => item.kind === \"warehouse\")\n  const hasActions = actions.length > 0\n\n  const triggerLabel = selected\n    ? selected.label\n    : allowAll\n      ? labels.all\n      : labels.placeholder\n  const triggerSubtitle = selected\n    ? selected.subtitle\n    : allowAll\n      ? labels.allHint\n      : labels.placeholderHint\n\n  const trigger = (\n    <SidebarMenuButton\n      size=\"lg\"\n      aria-label={labels.change}\n      className={cn(\n        \"h-auto min-h-12 gap-2 border\",\n        selected?.isMain\n          ? \"border-primary/25 bg-primary/8\"\n          : \"border-border\",\n        !locked &&\n          \"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\",\n      )}\n    >\n      <OfficeCopy\n        label={triggerLabel}\n        subtitle={triggerSubtitle}\n        isMain={selected?.isMain}\n        mainLabel={labels.main}\n        uppercaseSubtitle={Boolean(selected)}\n      />\n      {locked ? null : <IconSelector className=\"ml-auto size-4 shrink-0\" />}\n    </SidebarMenuButton>\n  )\n\n  return (\n    <div\n      data-slot=\"office-switcher\"\n      className={cn(\"flex w-full flex-col gap-1.5\", className)}\n    >\n      {header}\n      {loading ? (\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <div className=\"flex items-center rounded-md border border-border p-2\">\n              <div className=\"grid flex-1 gap-1\">\n                <Skeleton className=\"h-4 w-28\" />\n                <Skeleton className=\"h-3 w-36\" />\n              </div>\n            </div>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      ) : items.length === 0 ? null : (\n        <SidebarMenu>\n          <SidebarMenuItem>\n            {locked ? (\n              trigger\n            ) : (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-(--radix-dropdown-menu-trigger-width) min-w-72 max-w-80 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    {labels.filter}\n                  </DropdownMenuLabel>\n\n                  {allowAll ? (\n                    <DropdownMenuItem\n                      onClick={onClear}\n                      className={cn(\"gap-2 p-2\", !selected && \"bg-accent\")}\n                    >\n                      <AllLocationsMark />\n                      <OfficeCopy\n                        label={labels.all}\n                        subtitle={labels.allHint}\n                        mainLabel={labels.main}\n                      />\n                      {selected ? null : (\n                        <IconCheck className=\"size-4 shrink-0 text-primary\" />\n                      )}\n                    </DropdownMenuItem>\n                  ) : null}\n\n                  {allowAll && items.length > 0 ? <DropdownMenuSeparator /> : null}\n\n                  <OfficeGroup\n                    label={labels.branches}\n                    items={branches}\n                    selectedId={selected?.id}\n                    mainLabel={labels.main}\n                    onSelect={onSelect}\n                  />\n\n                  {branches.length > 0 && warehouses.length > 0 ? (\n                    <DropdownMenuSeparator />\n                  ) : null}\n\n                  <OfficeGroup\n                    label={labels.warehouses}\n                    items={warehouses}\n                    selectedId={selected?.id}\n                    mainLabel={labels.main}\n                    onSelect={onSelect}\n                  />\n\n                  {items.length === 0 ? (\n                    <p className=\"px-2 py-2 text-xs text-muted-foreground\">\n                      {labels.empty}\n                    </p>\n                  ) : null}\n\n                  {hasActions ? <DropdownMenuSeparator /> : null}\n                  {actions.map((action) => (\n                    <OfficeAction key={action.id} action={action} />\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n          </SidebarMenuItem>\n        </SidebarMenu>\n      )}\n\n      {confirmation ? (\n        <AlertDialog\n          open={confirmation.open}\n          onOpenChange={confirmation.onOpenChange}\n        >\n          <AlertDialogContent>\n            <AlertDialogHeader>\n              <AlertDialogTitle>{confirmation.title}</AlertDialogTitle>\n              <AlertDialogDescription asChild>\n                <div className=\"space-y-2 text-sm text-muted-foreground\">\n                  {confirmation.description}\n                </div>\n              </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n              <AlertDialogCancel>\n                {confirmation.cancelLabel ?? \"Cancelar\"}\n              </AlertDialogCancel>\n              <AlertDialogAction onClick={confirmation.onConfirm}>\n                {confirmation.confirmLabel ?? \"Confirmar\"}\n              </AlertDialogAction>\n            </AlertDialogFooter>\n          </AlertDialogContent>\n        </AlertDialog>\n      ) : null}\n    </div>\n  )\n}\n\nfunction OfficeGroup({\n  label,\n  items,\n  selectedId,\n  mainLabel,\n  onSelect,\n}: {\n  label: string\n  items: OfficeSwitcherItem[]\n  selectedId?: string\n  mainLabel: string\n  onSelect: (item: OfficeSwitcherItem) => void\n}) {\n  if (items.length === 0) return null\n\n  return (\n    <>\n      <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n        {label}\n      </DropdownMenuLabel>\n      {items.map((item) => {\n        const selected = item.id === selectedId\n        return (\n          <DropdownMenuItem\n            key={item.id}\n            onClick={() => onSelect(item)}\n            className={cn(\"gap-2 p-2\", selected && \"bg-accent\")}\n          >\n            <OfficeCopy\n              label={item.label}\n              subtitle={item.subtitle}\n              isMain={item.isMain}\n              mainLabel={mainLabel}\n              uppercaseSubtitle\n            />\n            {selected ? (\n              <IconCheck className=\"size-4 shrink-0 text-primary\" />\n            ) : null}\n          </DropdownMenuItem>\n        )\n      })}\n    </>\n  )\n}\n\nfunction OfficeAction({ action }: { action: OfficeSwitcherAction }) {\n  const body = (\n    <>\n      <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground\">\n        <IconPlus className=\"size-4\" stroke={1.75} />\n      </span>\n      <span className=\"font-medium text-muted-foreground\">{action.label}</span>\n    </>\n  )\n\n  if (action.href) {\n    return (\n      <DropdownMenuItem asChild>\n        <a href={action.href} className=\"flex cursor-pointer items-center gap-2 p-2\">\n          {body}\n        </a>\n      </DropdownMenuItem>\n    )\n  }\n\n  return (\n    <DropdownMenuItem onClick={action.onSelect} className=\"gap-2 p-2\">\n      {body}\n    </DropdownMenuItem>\n  )\n}\n\nexport { OfficeSwitcher }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -293,6 +293,16 @@
         }
       ]
     },
+    {
+      "name": "header-page",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/header-page.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "hover-card",
       "type": "registry:ui",
@@ -443,6 +453,16 @@
         }
       ]
     },
+    {
+      "name": "office-switcher",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/office-switcher.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "pagination",
       "type": "registry:ui",

package/registry/traky/ui/header-page.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import type { Icon } from "@tabler/icons-react"
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { EntityIcon } from "@/components/ui/entity-icon"
+
+type HeaderPageProps = {
+  icon: Icon
+  title: string
+  description: string
+  className?: string
+  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */
+  toolbarStart?: ReactNode
+  /** Contenido derecho de la barra (resumen, paginación, acción principal). */
+  toolbarEnd?: ReactNode
+  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */
+  filters?: ReactNode
+  showFilters?: boolean
+  toolbarAriaLabel?: string
+  toolbarId?: string
+  /** Acción principal junto al título (p. ej. crear registro). */
+  action?: ReactNode
+}
+
+function HeaderPageMeta({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <p
+      data-header-meta
+      className={cn(
+        "text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  )
+}
+
+function HeaderPageToolbarAction({
+  children,
+  className,
+  order = "primary",
+}: {
+  children: ReactNode
+  className?: string
+  order?: "primary" | "secondary"
+}) {
+  return (
+    <div
+      className={cn(
+        "w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto",
+        order === "primary" && "sm:order-2 sm:ml-auto",
+        order === "secondary" && "sm:order-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageToolbarPagination({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center sm:order-3 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageRoot({
+  icon: Icon,
+  title,
+  description,
+  className,
+  toolbarStart,
+  toolbarEnd,
+  filters,
+  showFilters = false,
+  toolbarAriaLabel = "Filtros y acciones",
+  toolbarId,
+  action,
+}: HeaderPageProps) {
+  const hasToolbar = Boolean(toolbarStart || toolbarEnd)
+  const hasFiltersPanel = Boolean(filters)
+
+  return (
+    <header className={cn("space-y-4", className)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <EntityIcon icon={Icon} size="lg" />
+          <div className="min-w-0">
+            <h1 className="text-xl font-semibold">{title}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+
+        {action ? (
+          <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0">
+            {action}
+          </div>
+        ) : null}
+      </div>
+
+      {(hasToolbar || hasFiltersPanel) && (
+        <section
+          id={toolbarId}
+          className="space-y-4"
+          aria-label={toolbarAriaLabel}
+        >
+          {hasToolbar && (
+            <div
+              className={cn(
+                "flex flex-col gap-3",
+                "max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2",
+                "max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0",
+                "max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none",
+                "max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0",
+                "max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink",
+                toolbarStart
+                  ? "xl:flex-row xl:items-center xl:justify-between"
+                  : "sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4",
+              )}
+            >
+              {toolbarStart ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2">
+                  {toolbarStart}
+                </div>
+              ) : null}
+
+              {toolbarEnd ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4">
+                  {toolbarEnd}
+                </div>
+              ) : null}
+            </div>
+          )}
+
+          {showFilters && filters}
+        </section>
+      )}
+    </header>
+  )
+}
+
+const HeaderPage = Object.assign(HeaderPageRoot, {
+  Meta: HeaderPageMeta,
+  ToolbarAction: HeaderPageToolbarAction,
+  ToolbarPagination: HeaderPageToolbarPagination,
+})
+
+export { HeaderPage }
+export default HeaderPage

package/registry/traky/ui/office-switcher.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import {
+  IconCheck,
+  IconLayoutGrid,
+  IconPlus,
+  IconSelector,
+} from "@tabler/icons-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export type OfficeSwitcherKind = "branch" | "warehouse"
+
+export type OfficeSwitcherItem = {
+  id: string
+  label: string
+  subtitle?: string
+  kind: OfficeSwitcherKind
+  isMain?: boolean
+}
+
+export type OfficeSwitcherAction = {
+  id: string
+  label: string
+  href?: string
+  onSelect?: () => void
+}
+
+export type OfficeSwitcherConfirmation = {
+  open: boolean
+  title: string
+  description: React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export type OfficeSwitcherLabels = {
+  filter: string
+  all: string
+  allHint: string
+  placeholder: string
+  placeholderHint: string
+  branches: string
+  warehouses: string
+  empty: string
+  main: string
+  change: string
+}
+
+const DEFAULT_LABELS: OfficeSwitcherLabels = {
+  filter: "Filtro por oficina",
+  all: "Todas las ubicaciones",
+  allHint: "Mostrar todo sin filtrar",
+  placeholder: "Selecciona una oficina",
+  placeholderHint: "Elige una sucursal o bodega",
+  branches: "Sucursales",
+  warehouses: "Bodegas",
+  empty: "No hay sucursales ni bodegas activas.",
+  main: "Principal",
+  change: "Cambiar oficina",
+}
+
+export type OfficeSwitcherProps = {
+  items: OfficeSwitcherItem[]
+  selectedId?: string | null
+  onSelect: (item: OfficeSwitcherItem) => void
+  onClear?: () => void
+  loading?: boolean
+  /** Una sola oficina: se muestra el nombre y no abre el menú. */
+  locked?: boolean
+  /** Dueños pueden ver todo sin filtrar. El personal no. */
+  allowAll?: boolean
+  labels?: Partial<OfficeSwitcherLabels>
+  actions?: OfficeSwitcherAction[]
+  /** Pieza superior, por ejemplo el cambio de cuenta. */
+  header?: React.ReactNode
+  confirmation?: OfficeSwitcherConfirmation | null
+  className?: string
+}
+
+function AllLocationsMark() {
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground">
+      <IconLayoutGrid className="size-4" stroke={1.75} />
+    </span>
+  )
+}
+
+function OfficeCopy({
+  label,
+  subtitle,
+  isMain,
+  mainLabel,
+  uppercaseSubtitle,
+}: {
+  label: string
+  subtitle?: string
+  isMain?: boolean
+  mainLabel: string
+  uppercaseSubtitle?: boolean
+}) {
+  return (
+    <span className="min-w-0 flex-1">
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span className="truncate text-sm font-medium">{label}</span>
+        {isMain ? (
+          <Badge
+            variant="outline"
+            className="h-4 px-1.5 text-[10px] font-medium tracking-wide uppercase"
+          >
+            {mainLabel}
+          </Badge>
+        ) : null}
+      </span>
+      {subtitle ? (
+        <span
+          className={cn(
+            "mt-0.5 line-clamp-2 block text-xs text-muted-foreground",
+            uppercaseSubtitle && "uppercase",
+          )}
+        >
+          {subtitle}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function OfficeSwitcher({
+  items,
+  selectedId,
+  onSelect,
+  onClear,
+  loading = false,
+  locked = false,
+  allowAll = true,
+  labels: labelsProp,
+  actions = [],
+  header,
+  confirmation,
+  className,
+}: OfficeSwitcherProps) {
+  const { isMobile } = useSidebar()
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+  const selected = items.find((item) => item.id === selectedId) ?? null
+  const branches = items.filter((item) => item.kind === "branch")
+  const warehouses = items.filter((item) => item.kind === "warehouse")
+  const hasActions = actions.length > 0
+
+  const triggerLabel = selected
+    ? selected.label
+    : allowAll
+      ? labels.all
+      : labels.placeholder
+  const triggerSubtitle = selected
+    ? selected.subtitle
+    : allowAll
+      ? labels.allHint
+      : labels.placeholderHint
+
+  const trigger = (
+    <SidebarMenuButton
+      size="lg"
+      aria-label={labels.change}
+      className={cn(
+        "h-auto min-h-12 gap-2 border",
+        selected?.isMain
+          ? "border-primary/25 bg-primary/8"
+          : "border-border",
+        !locked &&
+          "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+      )}
+    >
+      <OfficeCopy
+        label={triggerLabel}
+        subtitle={triggerSubtitle}
+        isMain={selected?.isMain}
+        mainLabel={labels.main}
+        uppercaseSubtitle={Boolean(selected)}
+      />
+      {locked ? null : <IconSelector className="ml-auto size-4 shrink-0" />}
+    </SidebarMenuButton>
+  )
+
+  return (
+    <div
+      data-slot="office-switcher"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+    >
+      {header}
+      {loading ? (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex items-center rounded-md border border-border p-2">
+              <div className="grid flex-1 gap-1">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-3 w-36" />
+              </div>
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      ) : items.length === 0 ? null : (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {locked ? (
+              trigger
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-(--radix-dropdown-menu-trigger-width) min-w-72 max-w-80 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    {labels.filter}
+                  </DropdownMenuLabel>
+
+                  {allowAll ? (
+                    <DropdownMenuItem
+                      onClick={onClear}
+                      className={cn("gap-2 p-2", !selected && "bg-accent")}
+                    >
+                      <AllLocationsMark />
+                      <OfficeCopy
+                        label={labels.all}
+                        subtitle={labels.allHint}
+                        mainLabel={labels.main}
+                      />
+                      {selected ? null : (
+                        <IconCheck className="size-4 shrink-0 text-primary" />
+                      )}
+                    </DropdownMenuItem>
+                  ) : null}
+
+                  {allowAll && items.length > 0 ? <DropdownMenuSeparator /> : null}
+
+                  <OfficeGroup
+                    label={labels.branches}
+                    items={branches}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {branches.length > 0 && warehouses.length > 0 ? (
+                    <DropdownMenuSeparator />
+                  ) : null}
+
+                  <OfficeGroup
+                    label={labels.warehouses}
+                    items={warehouses}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {items.length === 0 ? (
+                    <p className="px-2 py-2 text-xs text-muted-foreground">
+                      {labels.empty}
+                    </p>
+                  ) : null}
+
+                  {hasActions ? <DropdownMenuSeparator /> : null}
+                  {actions.map((action) => (
+                    <OfficeAction key={action.id} action={action} />
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </SidebarMenuItem>
+        </SidebarMenu>
+      )}
+
+      {confirmation ? (
+        <AlertDialog
+          open={confirmation.open}
+          onOpenChange={confirmation.onOpenChange}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{confirmation.title}</AlertDialogTitle>
+              <AlertDialogDescription asChild>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  {confirmation.description}
+                </div>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>
+                {confirmation.cancelLabel ?? "Cancelar"}
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={confirmation.onConfirm}>
+                {confirmation.confirmLabel ?? "Confirmar"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ) : null}
+    </div>
+  )
+}
+
+function OfficeGroup({
+  label,
+  items,
+  selectedId,
+  mainLabel,
+  onSelect,
+}: {
+  label: string
+  items: OfficeSwitcherItem[]
+  selectedId?: string
+  mainLabel: string
+  onSelect: (item: OfficeSwitcherItem) => void
+}) {
+  if (items.length === 0) return null
+
+  return (
+    <>
+      <DropdownMenuLabel className="text-xs text-muted-foreground">
+        {label}
+      </DropdownMenuLabel>
+      {items.map((item) => {
+        const selected = item.id === selectedId
+        return (
+          <DropdownMenuItem
+            key={item.id}
+            onClick={() => onSelect(item)}
+            className={cn("gap-2 p-2", selected && "bg-accent")}
+          >
+            <OfficeCopy
+              label={item.label}
+              subtitle={item.subtitle}
+              isMain={item.isMain}
+              mainLabel={mainLabel}
+              uppercaseSubtitle
+            />
+            {selected ? (
+              <IconCheck className="size-4 shrink-0 text-primary" />
+            ) : null}
+          </DropdownMenuItem>
+        )
+      })}
+    </>
+  )
+}
+
+function OfficeAction({ action }: { action: OfficeSwitcherAction }) {
+  const body = (
+    <>
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground">
+        <IconPlus className="size-4" stroke={1.75} />
+      </span>
+      <span className="font-medium text-muted-foreground">{action.label}</span>
+    </>
+  )
+
+  if (action.href) {
+    return (
+      <DropdownMenuItem asChild>
+        <a href={action.href} className="flex cursor-pointer items-center gap-2 p-2">
+          {body}
+        </a>
+      </DropdownMenuItem>
+    )
+  }
+
+  return (
+    <DropdownMenuItem onClick={action.onSelect} className="gap-2 p-2">
+      {body}
+    </DropdownMenuItem>
+  )
+}
+
+export { OfficeSwitcher }

package/src/ui/header-page.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import type { Icon } from "@tabler/icons-react"
+import type { ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+import { EntityIcon } from "./entity-icon"
+
+type HeaderPageProps = {
+  icon: Icon
+  title: string
+  description: string
+  className?: string
+  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */
+  toolbarStart?: ReactNode
+  /** Contenido derecho de la barra (resumen, paginación, acción principal). */
+  toolbarEnd?: ReactNode
+  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */
+  filters?: ReactNode
+  showFilters?: boolean
+  toolbarAriaLabel?: string
+  toolbarId?: string
+  /** Acción principal junto al título (p. ej. crear registro). */
+  action?: ReactNode
+}
+
+function HeaderPageMeta({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <p
+      data-header-meta
+      className={cn(
+        "text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  )
+}
+
+function HeaderPageToolbarAction({
+  children,
+  className,
+  order = "primary",
+}: {
+  children: ReactNode
+  className?: string
+  order?: "primary" | "secondary"
+}) {
+  return (
+    <div
+      className={cn(
+        "w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto",
+        order === "primary" && "sm:order-2 sm:ml-auto",
+        order === "secondary" && "sm:order-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageToolbarPagination({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center sm:order-3 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageRoot({
+  icon: Icon,
+  title,
+  description,
+  className,
+  toolbarStart,
+  toolbarEnd,
+  filters,
+  showFilters = false,
+  toolbarAriaLabel = "Filtros y acciones",
+  toolbarId,
+  action,
+}: HeaderPageProps) {
+  const hasToolbar = Boolean(toolbarStart || toolbarEnd)
+  const hasFiltersPanel = Boolean(filters)
+
+  return (
+    <header className={cn("space-y-4", className)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <EntityIcon icon={Icon} size="lg" />
+          <div className="min-w-0">
+            <h1 className="text-xl font-semibold">{title}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+
+        {action ? (
+          <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0">
+            {action}
+          </div>
+        ) : null}
+      </div>
+
+      {(hasToolbar || hasFiltersPanel) && (
+        <section
+          id={toolbarId}
+          className="space-y-4"
+          aria-label={toolbarAriaLabel}
+        >
+          {hasToolbar && (
+            <div
+              className={cn(
+                "flex flex-col gap-3",
+                "max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2",
+                "max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0",
+                "max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none",
+                "max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0",
+                "max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink",
+                toolbarStart
+                  ? "xl:flex-row xl:items-center xl:justify-between"
+                  : "sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4",
+              )}
+            >
+              {toolbarStart ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2">
+                  {toolbarStart}
+                </div>
+              ) : null}
+
+              {toolbarEnd ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4">
+                  {toolbarEnd}
+                </div>
+              ) : null}
+            </div>
+          )}
+
+          {showFilters && filters}
+        </section>
+      )}
+    </header>
+  )
+}
+
+const HeaderPage = Object.assign(HeaderPageRoot, {
+  Meta: HeaderPageMeta,
+  ToolbarAction: HeaderPageToolbarAction,
+  ToolbarPagination: HeaderPageToolbarPagination,
+})
+
+export { HeaderPage }
+export default HeaderPage

package/src/ui/office-switcher.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import {
+  IconCheck,
+  IconLayoutGrid,
+  IconPlus,
+  IconSelector,
+} from "@tabler/icons-react"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog"
+import { Badge } from "./badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar"
+import { Skeleton } from "./skeleton"
+
+export type OfficeSwitcherKind = "branch" | "warehouse"
+
+export type OfficeSwitcherItem = {
+  id: string
+  label: string
+  subtitle?: string
+  kind: OfficeSwitcherKind
+  isMain?: boolean
+}
+
+export type OfficeSwitcherAction = {
+  id: string
+  label: string
+  href?: string
+  onSelect?: () => void
+}
+
+export type OfficeSwitcherConfirmation = {
+  open: boolean
+  title: string
+  description: React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export type OfficeSwitcherLabels = {
+  filter: string
+  all: string
+  allHint: string
+  placeholder: string
+  placeholderHint: string
+  branches: string
+  warehouses: string
+  empty: string
+  main: string
+  change: string
+}
+
+const DEFAULT_LABELS: OfficeSwitcherLabels = {
+  filter: "Filtro por oficina",
+  all: "Todas las ubicaciones",
+  allHint: "Mostrar todo sin filtrar",
+  placeholder: "Selecciona una oficina",
+  placeholderHint: "Elige una sucursal o bodega",
+  branches: "Sucursales",
+  warehouses: "Bodegas",
+  empty: "No hay sucursales ni bodegas activas.",
+  main: "Principal",
+  change: "Cambiar oficina",
+}
+
+export type OfficeSwitcherProps = {
+  items: OfficeSwitcherItem[]
+  selectedId?: string | null
+  onSelect: (item: OfficeSwitcherItem) => void
+  onClear?: () => void
+  loading?: boolean
+  /** Una sola oficina: se muestra el nombre y no abre el menú. */
+  locked?: boolean
+  /** Dueños pueden ver todo sin filtrar. El personal no. */
+  allowAll?: boolean
+  labels?: Partial<OfficeSwitcherLabels>
+  actions?: OfficeSwitcherAction[]
+  /** Pieza superior, por ejemplo el cambio de cuenta. */
+  header?: React.ReactNode
+  confirmation?: OfficeSwitcherConfirmation | null
+  className?: string
+}
+
+function AllLocationsMark() {
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground">
+      <IconLayoutGrid className="size-4" stroke={1.75} />
+    </span>
+  )
+}
+
+function OfficeCopy({
+  label,
+  subtitle,
+  isMain,
+  mainLabel,
+  uppercaseSubtitle,
+}: {
+  label: string
+  subtitle?: string
+  isMain?: boolean
+  mainLabel: string
+  uppercaseSubtitle?: boolean
+}) {
+  return (
+    <span className="min-w-0 flex-1">
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span className="truncate text-sm font-medium">{label}</span>
+        {isMain ? (
+          <Badge
+            variant="outline"
+            className="h-4 px-1.5 text-[10px] font-medium tracking-wide uppercase"
+          >
+            {mainLabel}
+          </Badge>
+        ) : null}
+      </span>
+      {subtitle ? (
+        <span
+          className={cn(
+            "mt-0.5 line-clamp-2 block text-xs text-muted-foreground",
+            uppercaseSubtitle && "uppercase",
+          )}
+        >
+          {subtitle}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function OfficeSwitcher({
+  items,
+  selectedId,
+  onSelect,
+  onClear,
+  loading = false,
+  locked = false,
+  allowAll = true,
+  labels: labelsProp,
+  actions = [],
+  header,
+  confirmation,
+  className,
+}: OfficeSwitcherProps) {
+  const { isMobile } = useSidebar()
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+  const selected = items.find((item) => item.id === selectedId) ?? null
+  const branches = items.filter((item) => item.kind === "branch")
+  const warehouses = items.filter((item) => item.kind === "warehouse")
+  const hasActions = actions.length > 0
+
+  const triggerLabel = selected
+    ? selected.label
+    : allowAll
+      ? labels.all
+      : labels.placeholder
+  const triggerSubtitle = selected
+    ? selected.subtitle
+    : allowAll
+      ? labels.allHint
+      : labels.placeholderHint
+
+  const trigger = (
+    <SidebarMenuButton
+      size="lg"
+      aria-label={labels.change}
+      className={cn(
+        "h-auto min-h-12 gap-2 border",
+        selected?.isMain
+          ? "border-primary/25 bg-primary/8"
+          : "border-border",
+        !locked &&
+          "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+      )}
+    >
+      <OfficeCopy
+        label={triggerLabel}
+        subtitle={triggerSubtitle}
+        isMain={selected?.isMain}
+        mainLabel={labels.main}
+        uppercaseSubtitle={Boolean(selected)}
+      />
+      {locked ? null : <IconSelector className="ml-auto size-4 shrink-0" />}
+    </SidebarMenuButton>
+  )
+
+  return (
+    <div
+      data-slot="office-switcher"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+    >
+      {header}
+      {loading ? (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex items-center rounded-md border border-border p-2">
+              <div className="grid flex-1 gap-1">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-3 w-36" />
+              </div>
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      ) : items.length === 0 ? null : (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {locked ? (
+              trigger
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-(--radix-dropdown-menu-trigger-width) min-w-72 max-w-80 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    {labels.filter}
+                  </DropdownMenuLabel>
+
+                  {allowAll ? (
+                    <DropdownMenuItem
+                      onClick={onClear}
+                      className={cn("gap-2 p-2", !selected && "bg-accent")}
+                    >
+                      <AllLocationsMark />
+                      <OfficeCopy
+                        label={labels.all}
+                        subtitle={labels.allHint}
+                        mainLabel={labels.main}
+                      />
+                      {selected ? null : (
+                        <IconCheck className="size-4 shrink-0 text-primary" />
+                      )}
+                    </DropdownMenuItem>
+                  ) : null}
+
+                  {allowAll && items.length > 0 ? <DropdownMenuSeparator /> : null}
+
+                  <OfficeGroup
+                    label={labels.branches}
+                    items={branches}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {branches.length > 0 && warehouses.length > 0 ? (
+                    <DropdownMenuSeparator />
+                  ) : null}
+
+                  <OfficeGroup
+                    label={labels.warehouses}
+                    items={warehouses}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {items.length === 0 ? (
+                    <p className="px-2 py-2 text-xs text-muted-foreground">
+                      {labels.empty}
+                    </p>
+                  ) : null}
+
+                  {hasActions ? <DropdownMenuSeparator /> : null}
+                  {actions.map((action) => (
+                    <OfficeAction key={action.id} action={action} />
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </SidebarMenuItem>
+        </SidebarMenu>
+      )}
+
+      {confirmation ? (
+        <AlertDialog
+          open={confirmation.open}
+          onOpenChange={confirmation.onOpenChange}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{confirmation.title}</AlertDialogTitle>
+              <AlertDialogDescription asChild>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  {confirmation.description}
+                </div>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>
+                {confirmation.cancelLabel ?? "Cancelar"}
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={confirmation.onConfirm}>
+                {confirmation.confirmLabel ?? "Confirmar"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ) : null}
+    </div>
+  )
+}
+
+function OfficeGroup({
+  label,
+  items,
+  selectedId,
+  mainLabel,
+  onSelect,
+}: {
+  label: string
+  items: OfficeSwitcherItem[]
+  selectedId?: string
+  mainLabel: string
+  onSelect: (item: OfficeSwitcherItem) => void
+}) {
+  if (items.length === 0) return null
+
+  return (
+    <>
+      <DropdownMenuLabel className="text-xs text-muted-foreground">
+        {label}
+      </DropdownMenuLabel>
+      {items.map((item) => {
+        const selected = item.id === selectedId
+        return (
+          <DropdownMenuItem
+            key={item.id}
+            onClick={() => onSelect(item)}
+            className={cn("gap-2 p-2", selected && "bg-accent")}
+          >
+            <OfficeCopy
+              label={item.label}
+              subtitle={item.subtitle}
+              isMain={item.isMain}
+              mainLabel={mainLabel}
+              uppercaseSubtitle
+            />
+            {selected ? (
+              <IconCheck className="size-4 shrink-0 text-primary" />
+            ) : null}
+          </DropdownMenuItem>
+        )
+      })}
+    </>
+  )
+}
+
+function OfficeAction({ action }: { action: OfficeSwitcherAction }) {
+  const body = (
+    <>
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground">
+        <IconPlus className="size-4" stroke={1.75} />
+      </span>
+      <span className="font-medium text-muted-foreground">{action.label}</span>
+    </>
+  )
+
+  if (action.href) {
+    return (
+      <DropdownMenuItem asChild>
+        <a href={action.href} className="flex cursor-pointer items-center gap-2 p-2">
+          {body}
+        </a>
+      </DropdownMenuItem>
+    )
+  }
+
+  return (
+    <DropdownMenuItem onClick={action.onSelect} className="gap-2 p-2">
+      {body}
+    </DropdownMenuItem>
+  )
+}
+
+export { OfficeSwitcher }