@traky-app/ui 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.4.0",
+  "version": "1.6.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/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/json/option-combobox.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "option-combobox",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "ui/option-combobox.tsx",
+      "content": "\"use client\"\n\nimport { useState, type ComponentType } from \"react\"\nimport { IconCheck, IconSelector } from \"@tabler/icons-react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn, commandFilterAccentInsensitive } from \"@/lib/utils\"\n\nexport type OptionComboboxOption = {\n  value: string\n  label: string\n  icon?: ComponentType<{ className?: string; stroke?: number }>\n  iconClassName?: string\n  /** Pastilla de color, por ejemplo una etiqueta. */\n  color?: string\n  /** Sangría para una opción hija. */\n  indented?: boolean\n}\n\nfunction OptionGlyph({\n  icon: Icon,\n  className,\n}: {\n  icon?: OptionComboboxOption[\"icon\"]\n  className?: string\n}) {\n  if (!Icon) return null\n  return <Icon className={cn(\"size-4 shrink-0\", className)} stroke={1.75} />\n}\n\nfunction OptionFace({ option }: { option: OptionComboboxOption }) {\n  if (option.color) {\n    return (\n      <span\n        className=\"inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium\"\n        style={{\n          color: option.color,\n          borderColor: option.color,\n          backgroundColor: `${option.color}1A`,\n        }}\n      >\n        {option.label}\n      </span>\n    )\n  }\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <OptionGlyph icon={option.icon} className={option.iconClassName} />\n      <span className=\"truncate\">{option.label}</span>\n    </span>\n  )\n}\n\nexport function OptionCombobox({\n  value = \"\",\n  options,\n  onChange,\n  placeholder = \"Seleccionar…\",\n  searchPlaceholder = \"Buscar…\",\n  emptyLabel = \"No se encontraron resultados.\",\n  groupHeading,\n  allowEmpty = false,\n  emptyValueLabel,\n  emptyValueIcon,\n  clearLabel,\n  clearOption,\n  allOption,\n  groups,\n  multiple = false,\n  values = [],\n  onValuesChange,\n  className,\n  disabled = false,\n  modal = false,\n  title,\n}: {\n  value?: string\n  options: OptionComboboxOption[]\n  onChange?: (value: string) => void\n  /** Varias opciones a la vez. El menú no se cierra al marcar. */\n  multiple?: boolean\n  values?: string[]\n  onValuesChange?: (values: string[]) => void\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyLabel?: string\n  groupHeading?: string\n  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */\n  allowEmpty?: boolean\n  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */\n  emptyValueLabel?: string\n  emptyValueIcon?: OptionComboboxOption[\"icon\"]\n  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */\n  clearLabel?: string\n  /** Opción para vaciar el valor, visible también en el botón. */\n  clearOption?: OptionComboboxOption\n  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */\n  allOption?: OptionComboboxOption\n  /** Varios grupos, por ejemplo persona y empresa. */\n  groups?: { heading?: string; options: OptionComboboxOption[] }[]\n  className?: string\n  disabled?: boolean\n  modal?: boolean\n  title?: string\n}) {\n  const [open, setOpen] = useState(false)\n  const blankLabel = emptyValueLabel || placeholder\n  const realOptions = allowEmpty\n    ? options.filter((option) => option.value !== \"\")\n    : options\n  const grouped = (groups ?? []).filter((group) => group.options.length > 0)\n  const catalog = grouped.length\n    ? grouped.flatMap((group) => group.options)\n    : realOptions\n  const listOptions = allOption ? [allOption, ...catalog] : catalog\n  const emptyChoice: OptionComboboxOption = {\n    value: \"\",\n    label: blankLabel,\n    icon: emptyValueIcon,\n  }\n  const selected = allowEmpty && value === \"\"\n    ? emptyChoice\n    : clearOption && value === \"\"\n      ? clearOption\n      : listOptions.find((option) => option.value === value)\n        ?? (!value ? allOption : undefined)\n  const selectedMany = multiple\n    ? values.flatMap((id) => {\n        const option = listOptions.find((item) => item.value === id)\n        return option ? [option] : []\n      })\n    : []\n\n  const chosen = (optionValue: string) =>\n    multiple ? values.includes(optionValue) : value === optionValue\n\n  const choose = (next: string) => {\n    if (multiple) {\n      onValuesChange?.(\n        values.includes(next)\n          ? values.filter((item) => item !== next)\n          : [...values, next],\n      )\n      return\n    }\n    onChange?.(next)\n    setOpen(false)\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={disabled ? undefined : setOpen}\n      modal={modal}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          title={title}\n          className={cn(\n            \"w-full justify-between font-normal\",\n            multiple && \"h-auto py-2\",\n            className,\n          )}\n        >\n          {multiple ? (\n            <span className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {selectedMany.length ? (\n                selectedMany.map((option) => (\n                  <OptionFace key={option.value} option={option} />\n                ))\n              ) : (\n                <span className=\"truncate text-muted-foreground\">\n                  {placeholder}\n                </span>\n              )}\n            </span>\n          ) : selected ? (\n            <OptionFace option={selected} />\n          ) : (\n            <span className=\"truncate text-muted-foreground\">{placeholder}</span>\n          )}\n          <IconSelector className=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      {disabled ? null : (\n        <PopoverContent\n          align=\"start\"\n          className=\"z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0\"\n        >\n          <Command filter={commandFilterAccentInsensitive}>\n            <CommandInput placeholder={searchPlaceholder} />\n            <CommandList>\n              <CommandEmpty>{emptyLabel}</CommandEmpty>\n              {grouped.length ? (\n                grouped.map((group) => (\n                  <CommandGroup\n                    key={group.heading ?? group.options[0]?.value}\n                    heading={group.heading}\n                  >\n                    {group.options.map((option) => (\n                      <CommandItem\n                        key={option.value || option.label}\n                        value={`${option.label} ${option.value}`}\n                        className={option.indented ? \"pl-6\" : undefined}\n                        onSelect={() => choose(option.value)}\n                      >\n                        <OptionFace option={option} />\n                        <IconCheck\n                          className={cn(\n                            \"ml-auto size-4\",\n                            chosen(option.value) ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                ))\n              ) : (\n                <CommandGroup heading={groupHeading}>\n                  {allowEmpty ? (\n                    <CommandItem\n                      value={`__empty__ ${blankLabel}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      <OptionGlyph icon={emptyValueIcon} />\n                      {blankLabel}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : null}\n                  {clearOption ? (\n                    <CommandItem\n                      value={`__clear__ ${clearOption.label}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      <OptionGlyph\n                        icon={clearOption.icon}\n                        className={clearOption.iconClassName}\n                      />\n                      {clearOption.label}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : clearLabel ? (\n                    <CommandItem\n                      value={`__clear__ ${clearLabel}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      {clearLabel}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : null}\n                  {listOptions.map((option) => (\n                    <CommandItem\n                      key={option.value || option.label}\n                      value={`${option.label} ${option.value}`}\n                      className={option.indented ? \"pl-6\" : undefined}\n                      onSelect={() => choose(option.value)}\n                    >\n                      <OptionFace option={option} />\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          chosen(option.value) ? \"opacity-100\" : \"opacity-0\",\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      )}\n    </Popover>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -453,6 +453,26 @@
         }
       ]
     },
+    {
+      "name": "office-switcher",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/office-switcher.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "option-combobox",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/option-combobox.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "pagination",
       "type": "registry:ui",

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 }