@proef/common-ui 2.3.0 → 2.6.0

package/dist/esm/v1/components/lists/ListFinder/ListFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListFinder.js","sources":["../../../../../../src/v1/components/lists/ListFinder/ListFinder.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\r\nimport { ChevronLeftIcon, SearchIcon } from '../../../foundations/icons/icons'\r\nimport ListItem, { LINHA_ESBATIDA, type ListItemContent } from '../../../primitives/lists/ListItem/ListItem'\r\nimport Checkbox from '../../../primitives/forms/Checkbox/Checkbox'\r\nimport { OverlayScrollbar } from '../../tables/Table/OverlayScrollbar'\r\nimport { DEFAULT_LIST_FINDER_LABELS, type ListFinderLabels } from './labels'\r\n\r\nexport interface ListFinderProps<T> {\r\n  /** As linhas: todas, ou só a página atual quando o servidor pagina (com `total`). */\r\n  items: T[]\r\n  /** Uma chave única por linha (ex: o id). */\r\n  itemKey: (item: T) => string\r\n  /** O que cada linha mostra: as partes do [ListItem](?path=/docs/v1-primitives-lists-listitem--docs). */\r\n  itemContent: (item: T) => ListItemContent\r\n  /** A linha aberta (fica realçada). */\r\n  activeKey?: string | null\r\n  /** Ao clicar numa linha: normalmente, abri-la ao lado. */\r\n  onItemClick?: (item: T) => void\r\n  /** As marcadas. Só há caixas de marcar com `onSelectionChange`. */\r\n  selectedKeys?: ReadonlySet<string>\r\n  onSelectionChange?: (keys: Set<string>) => void\r\n  /** Filtros ao lado do voltar, por cima da pesquisa (ex: um ou dois selects, no traço fino da pesquisa). */\r\n  filters?: React.ReactNode\r\n  /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */\r\n  onBack?: () => void\r\n  /** Com a caixa de pesquisa (o normal). Sem ela, a lista mostra tudo o que recebe. */\r\n  searchable?: boolean\r\n  /** O texto da pesquisa. Sem ele, a pesquisa guarda o seu. */\r\n  search?: string\r\n  onSearchChange?: (search: string) => void\r\n  /**\r\n   * O texto onde a pesquisa procura, em cada linha. Com isto, a lista filtra-se\r\n   * sozinha (sem acentos nem maiúsculas); sem isto, quem filtra é a app (ex: o\r\n   * servidor, com `onSearchChange`). Uma lista colada (uma por linha, ou\r\n   * separadas por vírgulas) mostra as que tiverem qualquer uma delas.\r\n   */\r\n  searchText?: (item: T) => string\r\n  /**\r\n   * Como se chega ao resto da lista:\r\n   * - `'pages'` (o normal): páginas numeradas no rodapé;\r\n   * - `'scroll'`: uma lista só, que vai mostrando mais `pageSize` linhas ao\r\n   *   chegar ao fundo. Com o servidor a paginar, `items` são as que já vieram e\r\n   *   pede-se o lote seguinte com `onLoadMore`.\r\n   */\r\n  mode?: 'pages' | 'scroll'\r\n  /** Com `mode=\"scroll\"` e o servidor a paginar: buscar o lote seguinte (junta-o a `items`). */\r\n  onLoadMore?: () => void\r\n  /** O servidor pagina: quantas linhas há lá ao todo. `items` é só a página atual (ou, a rolar, as que já vieram). */\r\n  total?: number\r\n  /** A página atual (1, 2, ...), quando o servidor pagina. */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Quantas linhas por página. Com o servidor a paginar, quantas ele manda. */\r\n  pageSize?: number\r\n  /** A carregar: sem linhas ainda, mostra o esqueleto delas. A rolar, com linhas, é o lote seguinte a chegar. */\r\n  loading?: boolean\r\n  labels?: Partial<ListFinderLabels>\r\n  /** No rodapé, a seguir à contagem: algo pequeno da app (ex: um ícone de ajuda com as regras da lista). */\r\n  footerExtra?: React.ReactNode\r\n  /** Com a moldura à volta (o normal). Sem ela, para ir dentro de um painel que já tem a sua. */\r\n  bordered?: boolean\r\n  className?: string\r\n}\r\n\r\nconst semAcentos = (s: string) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()\r\n\r\n/**\r\n * Parte o texto da pesquisa nos termos a procurar: vírgula, ponto e vírgula,\r\n * tab e mudança de linha. O espaço só separa quando tudo o que lá está são\r\n * números de 6 ou mais dígitos (uma coluna colada de uma folha de cálculo);\r\n * fora disso \"vila real\" é uma coisa só, e não \"vila\" ou \"real\".\r\n */\r\nexport function termosDaPesquisa(texto: string): string[] {\r\n  const porEspacos = texto.trim().split(/\\s+/).filter(Boolean)\r\n  if (porEspacos.length > 1 && porEspacos.every(t => /^\\d{6,}$/.test(t))) return porEspacos\r\n  return texto.split(/[\\n,;\\t]+/).map(t => t.trim()).filter(Boolean)\r\n}\r\n\r\n/** Os números das páginas numa coluna estreita: no máximo cinco lugares. */\r\nfunction numerosPagina(atual: number, total: number): (number | '…')[] {\r\n  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)\r\n  if (atual <= 2) return [1, 2, 3, '…', total]\r\n  if (atual >= total - 1) return [1, '…', total - 2, total - 1, total]\r\n  return [1, '…', atual, '…', total]\r\n}\r\n\r\n/** Uma linha a carregar: a forma das linhas já diz que vem ali a lista. */\r\nfunction LinhaEsqueleto({ marcavel, largura }: { marcavel: boolean; largura: string }) {\r\n  return (\r\n    <div className={`flex items-start gap-1.5 px-3 py-3 animate-pulse motion-reduce:animate-none ${LINHA_ESBATIDA}`}>\r\n      {marcavel && <span className=\"flex w-7 shrink-0 justify-center\"><span className=\"mt-0.5 h-4 w-4 border border-slate-200 bg-slate-100\" /></span>}\r\n      <div className=\"min-w-0 flex-1 space-y-1.5\">\r\n        <div className=\"h-3 w-20 bg-slate-200\" />\r\n        <div className={`h-2.5 ${largura} bg-slate-200`} />\r\n        <div className=\"h-1.5 w-1/3 bg-slate-100\" />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Uma lista para encontrar e escolher: filtros e pesquisa em cima, as linhas\r\n * ([ListItem](?path=/docs/v1-primitives-lists-listitem--docs)) a rolar no meio e\r\n * as páginas (ou a contagem, a rolar) em baixo. Pensada para a coluna ao lado do que se abre (a lista à\r\n * esquerda, o detalhe da linha escolhida à direita).\r\n *\r\n * Enche a altura do pai. O topo, a barra de \"selecionar todos\" e o rodapé\r\n * ficam sempre no sítio: só as linhas rolam.\r\n *\r\n * - **Pesquisa**: com `searchText` filtra sozinha; sem ele, a app filtra\r\n *   (`search`/`onSearchChange`).\r\n * - **Páginas**: pagina sozinha (`pageSize`), ou é o servidor (`total`, `page`,\r\n *   `onPageChange`).\r\n * - **A rolar** (`mode=\"scroll\"`): sem páginas, vai mostrando mais ao descer;\r\n *   com o servidor, `items` são as que já vieram e `onLoadMore` pede mais.\r\n * - **Realce**: o que se procurou realça-se no código e no título das linhas.\r\n * - **Marcar vários**: com `onSelectionChange`. O \"selecionar todos\" só marca\r\n *   as linhas à vista, nunca as que não se veem.\r\n */\r\nexport default function ListFinder<T>({\r\n  items, itemKey, itemContent, activeKey, onItemClick, selectedKeys, onSelectionChange, filters, onBack,\r\n  searchable = true, search: pesquisaDeFora, onSearchChange, searchText, mode = 'pages', onLoadMore, total, page, onPageChange, pageSize = 50, loading = false,\r\n  labels, footerExtra, bordered = true, className = '',\r\n}: ListFinderProps<T>) {\r\n  const L = { ...DEFAULT_LIST_FINDER_LABELS, ...labels }\r\n  const [pesquisaPropria, setPesquisaPropria] = useState('')\r\n  const pesquisa = searchable ? (pesquisaDeFora ?? pesquisaPropria) : ''\r\n  const pesquisar = (s: string) => { setPesquisaPropria(s); onSearchChange?.(s) }\r\n  // Uma caixa de uma linha deita fora as quebras de linha: uma coluna colada\r\n  // de uma folha de cálculo chegava como um número só, colado. Passam a vírgulas.\r\n  const colar = (e: React.ClipboardEvent<HTMLInputElement>) => {\r\n    const texto = e.clipboardData.getData('text')\r\n    if (!/\\r?\\n/.test(texto.trim())) return\r\n    e.preventDefault()\r\n    const lista = texto.split(/\\r?\\n/).map(t => t.trim()).filter(Boolean).join(', ')\r\n    const el = e.currentTarget\r\n    pesquisar(el.value.slice(0, el.selectionStart ?? el.value.length) + lista + el.value.slice(el.selectionEnd ?? el.value.length))\r\n  }\r\n\r\n  // Os mesmos termos filtram (com `searchText`) e realçam-se nas linhas.\r\n  const termos = useMemo(() => termosDaPesquisa(pesquisa).map(semAcentos), [pesquisa])\r\n  const filtradas = useMemo(() => {\r\n    if (!searchText || !termos.length) return items\r\n    return items.filter(it => {\r\n      const texto = semAcentos(searchText(it))\r\n      return termos.some(t => texto.includes(t))\r\n    })\r\n  }, [items, termos, searchText])\r\n\r\n  // Paginação: do servidor (com `total`), ou feita aqui.\r\n  const peloServidor = total !== undefined\r\n  const aRolar = mode === 'scroll'\r\n  const [paginaPropria, setPaginaPropria] = useState(1)\r\n  const totalLinhas = peloServidor ? total : filtradas.length\r\n  const totalPaginas = Math.max(1, Math.ceil(totalLinhas / pageSize))\r\n  const pagina = Math.min(peloServidor ? (page ?? 1) : paginaPropria, totalPaginas)\r\n  // Uma pesquisa nova volta à primeira página: a terceira de antes já não é a mesma lista.\r\n  useEffect(() => { if (!peloServidor) setPaginaPropria(1) }, [pesquisa, peloServidor])\r\n  const irPara = (p: number) => { if (peloServidor) onPageChange?.(p); else setPaginaPropria(p) }\r\n  // A rolar sem servidor: quantos lotes já se mostram.\r\n  const [lotes, setLotes] = useState(1)\r\n  useEffect(() => { setLotes(1) }, [pesquisa])\r\n  const visiveis = peloServidor ? filtradas\r\n    : aRolar ? filtradas.slice(0, lotes * pageSize)\r\n    : filtradas.slice((pagina - 1) * pageSize, pagina * pageSize)\r\n  const haMais = aRolar && (peloServidor ? !!onLoadMore && items.length < totalLinhas : visiveis.length < filtradas.length)\r\n\r\n  // Ao mudar de página, ou de pesquisa a rolar, a lista volta ao topo.\r\n  const [caixa, setCaixa] = useState<HTMLDivElement | null>(null)\r\n  useEffect(() => { caixa?.scrollTo?.({ top: 0 }) }, [pagina, caixa])\r\n  useEffect(() => { if (aRolar) caixa?.scrollTo?.({ top: 0 }) }, [pesquisa, aRolar, caixa])\r\n\r\n  // A rolar: a linha-sentinela no fundo, ao chegar a 300px da vista, pede o\r\n  // lote seguinte. Volta a observar a cada lote que chega: se continuar à\r\n  // vista (uma janela alta), pede logo outro.\r\n  const [fim, setFim] = useState<HTMLDivElement | null>(null)\r\n  useEffect(() => {\r\n    if (!fim || !caixa || !haMais || typeof IntersectionObserver === 'undefined') return\r\n    const io = new IntersectionObserver(([e]) => {\r\n      if (!e?.isIntersecting) return\r\n      if (peloServidor) { if (!loading) onLoadMore?.() } else setLotes(n => n + 1)\r\n    }, { root: caixa, rootMargin: '300px' })\r\n    io.observe(fim)\r\n    return () => io.disconnect()\r\n  }, [fim, caixa, haMais, peloServidor, loading, onLoadMore, visiveis.length])\r\n\r\n  const marcadas = selectedKeys ?? new Set<string>()\r\n  const marcaveis = !!onSelectionChange\r\n  const nMarcadasVisiveis = visiveis.filter(it => marcadas.has(itemKey(it))).length\r\n  const todasMarcadas = visiveis.length > 0 && nMarcadasVisiveis === visiveis.length\r\n  const marcar = (key: string, sim: boolean) => {\r\n    const n = new Set(marcadas)\r\n    if (sim) n.add(key); else n.delete(key)\r\n    onSelectionChange?.(n)\r\n  }\r\n  const marcarVisiveis = () => {\r\n    const n = new Set(marcadas)\r\n    for (const it of visiveis) { if (todasMarcadas) n.delete(itemKey(it)); else n.add(itemKey(it)) }\r\n    onSelectionChange?.(n)\r\n  }\r\n\r\n  const aCarregar = loading && visiveis.length === 0\r\n  const esqueleto = <span className=\"inline-block h-2 w-20 rounded-sm bg-slate-200 animate-pulse motion-reduce:animate-none\" aria-hidden />\r\n\r\n  return (\r\n    <div className={`v1-reset flex h-full min-h-0 flex-col bg-white text-control text-slate-800 ${bordered ? 'border border-slate-200' : ''} ${className}`}>\r\n      {/* Sem pesquisa, filtros nem voltar, não há cabeça: as linhas começam no topo. */}\r\n      {(searchable || onBack || filters) && (\r\n      <div className=\"space-y-2 border-b border-slate-100 px-3 py-2\">\r\n        {(onBack || filters) && (\r\n          <div className=\"flex items-center gap-1.5\">\r\n            {onBack && (\r\n              <button type=\"button\" onClick={onBack} aria-label={L.back} title={L.back}\r\n                className=\"-ml-1 flex h-7 w-6 shrink-0 items-center justify-center rounded text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700\">\r\n                <ChevronLeftIcon size={14} />\r\n              </button>\r\n            )}\r\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">{filters}</div>\r\n          </div>\r\n        )}\r\n        {searchable && (\r\n          <div className=\"relative\">\r\n            {/* Caixa direita e fina, no tamanho do texto das linhas: a lista é\r\n                uma coluna estreita, e a pesquisa não deve pesar mais do que ela. */}\r\n            <SearchIcon size={11} className=\"pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-slate-400\" />\r\n            <input\r\n              type=\"search\"\r\n              value={pesquisa}\r\n              onChange={e => pesquisar(e.target.value)}\r\n              onPaste={colar}\r\n              placeholder={L.searchPlaceholder}\r\n              aria-label={L.search}\r\n              className=\"block w-full min-w-0 border border-slate-200 bg-white py-1.5 pr-2 pl-6 text-micro text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:border-proef-blue\"\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n      )}\r\n\r\n      {/* Fora da área que rola: é a cabeça da lista, e é a descer a lista que\r\n          se decide marcá-la toda. Branca, com a linha esbatida das linhas por\r\n          baixo: uma faixa cinzenta entre o branco da pesquisa e o das linhas\r\n          era um tom quase igual a meio, e lia-se como sujidade. */}\r\n      {marcaveis && visiveis.length > 0 && (\r\n        <div className={`flex items-center gap-1.5 bg-white px-3 py-2 text-[10px] text-slate-600 ${LINHA_ESBATIDA}`}>\r\n          {/* Na coluna de 28px das linhas, para as caixas ficarem umas por baixo das outras. */}\r\n          <span className=\"flex w-7 shrink-0 justify-center\">\r\n            <Checkbox\r\n              checked={todasMarcadas}\r\n              indeterminate={nMarcadasVisiveis > 0 && !todasMarcadas}\r\n              onChange={marcarVisiveis}\r\n              aria-label={L.selectVisible(visiveis.length)}\r\n            />\r\n          </span>\r\n          <span aria-hidden>{nMarcadasVisiveis > 0 ? L.selectedCount(nMarcadasVisiveis, visiveis.length) : L.selectVisible(visiveis.length)}</span>\r\n          {marcadas.size > 0 && (\r\n            <button type=\"button\" onClick={() => onSelectionChange?.(new Set())}\r\n              className=\"ml-auto text-proef-blue hover:underline\">\r\n              {L.clearSelection}\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      <div className=\"relative flex min-h-0 flex-1 flex-col\">\r\n        {/* `relative`: o texto só para leitores de ecrã (`sr-only`, posição\r\n            absoluta) do fundo da lista tem de ficar preso a esta caixa. Sem isso\r\n            ficava no fim das linhas, fora do corte do scroll, e esticava a\r\n            página — dava para rolar até um branco sem nada. */}\r\n        <div ref={setCaixa} className=\"relative min-h-0 flex-1 overflow-y-auto scrollbar-none\">\r\n          {aCarregar ? (\r\n            // A forma das linhas já diz que vem ali a lista. Mais do que cabem,\r\n            // cortadas pela caixa: chega ao fundo em qualquer altura.\r\n            <div role=\"status\" aria-busy=\"true\" className=\"h-full overflow-hidden\">\r\n              <span className=\"sr-only\">{L.loading}</span>\r\n              {['w-11/12', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5', 'w-7/12'].flatMap(l => [l, l, l, l]).map((largura, i) => (\r\n                <LinhaEsqueleto key={i} marcavel={marcaveis} largura={largura} />\r\n              ))}\r\n            </div>\r\n          ) : visiveis.length === 0 ? (\r\n            <p className=\"m-0 px-3 py-4 text-center text-[10px] text-slate-400\">{L.empty}</p>\r\n          ) : (\r\n            <ul className=\"m-0 list-none p-0\">\r\n              {visiveis.map(it => {\r\n                const key = itemKey(it)\r\n                return (\r\n                  <ListItem\r\n                    key={key}\r\n                    {...itemContent(it)}\r\n                    active={activeKey === key}\r\n                    onClick={onItemClick ? () => onItemClick(it) : undefined}\r\n                    checked={marcadas.has(key)}\r\n                    onCheckedChange={marcaveis ? sim => marcar(key, sim) : undefined}\r\n                    checkboxLabel={L.checkItem(key)}\r\n                    highlight={termos}\r\n                  />\r\n                )\r\n              })}\r\n            </ul>\r\n          )}\r\n          {/* A rolar: o lote seguinte a chegar, e a sentinela que o pede. */}\r\n          {!aCarregar && haMais && (\r\n            <div ref={setFim} role=\"status\" aria-busy=\"true\">\r\n              <span className=\"sr-only\">{L.loading}</span>\r\n              {['w-3/4', 'w-5/6', 'w-2/3'].map((largura, i) => <LinhaEsqueleto key={i} marcavel={marcaveis} largura={largura} />)}\r\n            </div>\r\n          )}\r\n        </div>\r\n        <OverlayScrollbar alvo={caixa} borda={0} />\r\n      </div>\r\n\r\n      {/* Sempre à vista e com a mesma altura, carregada ou não: aparecer do\r\n          nada fazia saltar o fundo do painel. */}\r\n      <div className={`flex shrink-0 items-center gap-2 border-t border-slate-100 bg-slate-50 px-3 text-micro text-slate-400 ${aRolar ? 'h-8 justify-center' : 'h-9 justify-between'}`}>\r\n        <span className=\"flex items-center gap-1 whitespace-nowrap\">\r\n          {aCarregar ? esqueleto : aRolar ? (\r\n            // A rolar: quantas já se mostram, de quantas há.\r\n            <><span className=\"font-medium text-slate-500 tabular-nums\">{visiveis.length.toLocaleString('pt-PT')}</span> / <span className=\"font-medium text-slate-500 tabular-nums\">{totalLinhas.toLocaleString('pt-PT')}</span> {L.itemsNoun(totalLinhas)}</>\r\n          ) : <><span className=\"font-medium text-slate-500 tabular-nums\">{totalLinhas.toLocaleString('pt-PT')}</span> {L.itemsNoun(totalLinhas)}</>}\r\n          {footerExtra}\r\n          {/* Com linhas e a pedir outra vez (ex: outra página, ou a atualizar): um \"…\" a pulsar. */}\r\n          {loading && !aCarregar && <span aria-hidden className=\"animate-pulse motion-reduce:animate-none\">…</span>}\r\n        </span>\r\n        {!aRolar && !aCarregar && totalPaginas > 1 && (\r\n          <nav aria-label={L.pagination} className=\"flex items-center gap-0.5\">\r\n            <span className=\"sr-only\">{L.page} {pagina} / {totalPaginas}</span>\r\n            {numerosPagina(pagina, totalPaginas).map((p, i) => p === '…' ? (\r\n              <span key={`r${i}`} aria-hidden className=\"flex h-6 min-w-3 items-center justify-center text-slate-300\">…</span>\r\n            ) : (\r\n              <button\r\n                key={p}\r\n                type=\"button\"\r\n                onClick={() => irPara(p)}\r\n                aria-current={p === pagina ? 'page' : undefined}\r\n                className={`grid h-6 min-w-5 place-items-center px-1 tabular-nums transition-colors ${\r\n                  p === pagina ? 'cursor-default font-semibold text-slate-800' : 'text-slate-400 hover:text-slate-700'}`}\r\n              >\r\n                {/* Sem caixa nem fundo: a página atual é só o número mais forte.\r\n                    A cópia invisível a negrito guarda a largura, para os números\r\n                    não se mexerem ao trocar de página. */}\r\n                <span aria-hidden className=\"invisible col-start-1 row-start-1 font-semibold\">{p.toLocaleString('pt-PT')}</span>\r\n                <span className=\"col-start-1 row-start-1\">{p.toLocaleString('pt-PT')}</span>\r\n              </button>\r\n            ))}\r\n          </nav>\r\n        )}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;;;;;AAgEA,MAAM,aAAa,CAAC,MAAc,EAAE,UAAU,KAAK,EAAE,QAAQ,UAAU,EAAE,EAAE,YAAA;AAQpE,SAAS,iBAAiB,OAAyB;AACxD,QAAM,aAAa,MAAM,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAC3D,MAAI,WAAW,SAAS,KAAK,WAAW,MAAM,CAAA,MAAK,WAAW,KAAK,CAAC,CAAC,EAAG,QAAO;AAC/E,SAAO,MAAM,MAAM,WAAW,EAAE,IAAI,CAAA,MAAK,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO;AACnE;AAGA,SAAS,cAAc,OAAe,OAAiC;AACrE,MAAI,SAAS,EAAG,QAAO,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,CAAC,GAAG,MAAM,IAAI,CAAC;AACpE,MAAI,SAAS,EAAG,QAAO,CAAC,GAAG,GAAG,GAAG,KAAK,KAAK;AAC3C,MAAI,SAAS,QAAQ,EAAG,QAAO,CAAC,GAAG,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK;AACnE,SAAO,CAAC,GAAG,KAAK,OAAO,KAAK,KAAK;AACnC;AAGA,SAAS,eAAe,EAAE,UAAU,WAAmD;AACrF,SACE,qBAAC,OAAA,EAAI,WAAW,+EAA+E,cAAc,IAC1G,UAAA;AAAA,IAAA,YAAY,oBAAC,UAAK,WAAU,oCAAmC,8BAAC,QAAA,EAAK,WAAU,uDAAsD,EAAA,CAAE;AAAA,IACxI,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,wBAAA,CAAwB;AAAA,MACvC,oBAAC,OAAA,EAAI,WAAW,SAAS,OAAO,iBAAiB;AAAA,MACjD,oBAAC,OAAA,EAAI,WAAU,2BAAA,CAA2B;AAAA,IAAA,EAAA,CAC5C;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAwB,WAAc;AAAA,EACpC;AAAA,EAAO;AAAA,EAAS;AAAA,EAAa;AAAA,EAAW;AAAA,EAAa;AAAA,EAAc;AAAA,EAAmB;AAAA,EAAS;AAAA,EAC/F,aAAa;AAAA,EAAM,QAAQ;AAAA,EAAgB;AAAA,EAAgB;AAAA,EAAY,OAAO;AAAA,EAAS;AAAA,EAAY;AAAA,EAAO;AAAA,EAAM;AAAA,EAAc,WAAW;AAAA,EAAI,UAAU;AAAA,EACvJ;AAAA,EAAQ;AAAA,EAAa,WAAW;AAAA,EAAM,YAAY;AACpD,GAAuB;AACrB,QAAM,IAAI,EAAE,GAAG,4BAA4B,GAAG,OAAA;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AACzD,QAAM,WAAW,aAAc,kBAAkB,kBAAmB;AACpE,QAAM,YAAY,CAAC,MAAc;AAAE,uBAAmB,CAAC;AAAG,qBAAiB,CAAC;AAAA,EAAE;AAG9E,QAAM,QAAQ,CAAC,MAA8C;AAC3D,UAAM,QAAQ,EAAE,cAAc,QAAQ,MAAM;AAC5C,QAAI,CAAC,QAAQ,KAAK,MAAM,KAAA,CAAM,EAAG;AACjC,MAAE,eAAA;AACF,UAAM,QAAQ,MAAM,MAAM,OAAO,EAAE,IAAI,CAAA,MAAK,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AAC/E,UAAM,KAAK,EAAE;AACb,cAAU,GAAG,MAAM,MAAM,GAAG,GAAG,kBAAkB,GAAG,MAAM,MAAM,IAAI,QAAQ,GAAG,MAAM,MAAM,GAAG,gBAAgB,GAAG,MAAM,MAAM,CAAC;AAAA,EAChI;AAGA,QAAM,SAAS,QAAQ,MAAM,iBAAiB,QAAQ,EAAE,IAAI,UAAU,GAAG,CAAC,QAAQ,CAAC;AACnF,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,CAAC,cAAc,CAAC,OAAO,OAAQ,QAAO;AAC1C,WAAO,MAAM,OAAO,CAAA,OAAM;AACxB,YAAM,QAAQ,WAAW,WAAW,EAAE,CAAC;AACvC,aAAO,OAAO,KAAK,CAAA,MAAK,MAAM,SAAS,CAAC,CAAC;AAAA,IAC3C,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,QAAQ,UAAU,CAAC;AAG9B,QAAM,eAAe,UAAU;AAC/B,QAAM,SAAS,SAAS;AACxB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,QAAM,cAAc,eAAe,QAAQ,UAAU;AACrD,QAAM,eAAe,KAAK,IAAI,GAAG,KAAK,KAAK,cAAc,QAAQ,CAAC;AAClE,QAAM,SAAS,KAAK,IAAI,eAAgB,QAAQ,IAAK,eAAe,YAAY;AAEhF,YAAU,MAAM;AAAE,QAAI,CAAC,aAAc,kBAAiB,CAAC;AAAA,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AACpF,QAAM,SAAS,CAAC,MAAc;AAAE,QAAI,6BAA6B,CAAC;AAAA,0BAAyB,CAAC;AAAA,EAAE;AAE9F,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,YAAU,MAAM;AAAE,aAAS,CAAC;AAAA,EAAE,GAAG,CAAC,QAAQ,CAAC;AAC3C,QAAM,WAAW,eAAe,YAC5B,SAAS,UAAU,MAAM,GAAG,QAAQ,QAAQ,IAC5C,UAAU,OAAO,SAAS,KAAK,UAAU,SAAS,QAAQ;AAC9D,QAAM,SAAS,WAAW,eAAe,CAAC,CAAC,cAAc,MAAM,SAAS,cAAc,SAAS,SAAS,UAAU;AAGlH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgC,IAAI;AAC9D,YAAU,MAAM;AAAE,WAAO,WAAW,EAAE,KAAK,EAAA,CAAG;AAAA,EAAE,GAAG,CAAC,QAAQ,KAAK,CAAC;AAClE,YAAU,MAAM;AAAE,QAAI,OAAQ,QAAO,WAAW,EAAE,KAAK,GAAG;AAAA,EAAE,GAAG,CAAC,UAAU,QAAQ,KAAK,CAAC;AAKxF,QAAM,CAAC,KAAK,MAAM,IAAI,SAAgC,IAAI;AAC1D,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,CAAC,SAAS,CAAC,UAAU,OAAO,yBAAyB,YAAa;AAC9E,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,CAAC,MAAM;AAC3C,UAAI,CAAC,GAAG,eAAgB;AACxB,UAAI,cAAc;AAAE,YAAI,CAAC,QAAS,cAAA;AAAA,MAAe,MAAO,UAAS,CAAA,MAAK,IAAI,CAAC;AAAA,IAC7E,GAAG,EAAE,MAAM,OAAO,YAAY,SAAS;AACvC,OAAG,QAAQ,GAAG;AACd,WAAO,MAAM,GAAG,WAAA;AAAA,EAClB,GAAG,CAAC,KAAK,OAAO,QAAQ,cAAc,SAAS,YAAY,SAAS,MAAM,CAAC;AAE3E,QAAM,WAAW,gBAAgB,oBAAI,IAAA;AACrC,QAAM,YAAY,CAAC,CAAC;AACpB,QAAM,oBAAoB,SAAS,OAAO,CAAA,OAAM,SAAS,IAAI,QAAQ,EAAE,CAAC,CAAC,EAAE;AAC3E,QAAM,gBAAgB,SAAS,SAAS,KAAK,sBAAsB,SAAS;AAC5E,QAAM,SAAS,CAAC,KAAa,QAAiB;AAC5C,UAAM,IAAI,IAAI,IAAI,QAAQ;AAC1B,QAAI,IAAK,GAAE,IAAI,GAAG;AAAA,QAAQ,GAAE,OAAO,GAAG;AACtC,wBAAoB,CAAC;AAAA,EACvB;AACA,QAAM,iBAAiB,MAAM;AAC3B,UAAM,IAAI,IAAI,IAAI,QAAQ;AAC1B,eAAW,MAAM,UAAU;AAAE,UAAI,cAAe,GAAE,OAAO,QAAQ,EAAE,CAAC;AAAA,UAAQ,GAAE,IAAI,QAAQ,EAAE,CAAC;AAAA,IAAE;AAC/F,wBAAoB,CAAC;AAAA,EACvB;AAEA,QAAM,YAAY,WAAW,SAAS,WAAW;AACjD,QAAM,YAAY,oBAAC,QAAA,EAAK,WAAU,0FAAyF,eAAW,MAAC;AAEvI,SACE,qBAAC,SAAI,WAAW,8EAA8E,WAAW,4BAA4B,EAAE,IAAI,SAAS,IAEhJ,UAAA;AAAA,KAAA,cAAc,UAAU,YAC1B,qBAAC,OAAA,EAAI,WAAU,iDACX,UAAA;AAAA,OAAA,UAAU,YACV,qBAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,QAAA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YAAO,MAAK;AAAA,YAAS,SAAS;AAAA,YAAQ,cAAY,EAAE;AAAA,YAAM,OAAO,EAAE;AAAA,YAClE,WAAU;AAAA,YACV,UAAA,oBAAC,iBAAA,EAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAG/B,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,QAAA,CAAQ;AAAA,MAAA,GACrE;AAAA,MAED,cACC,qBAAC,OAAA,EAAI,WAAU,YAGb,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAM,IAAI,WAAU,+EAA8E;AAAA,QAC9G;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAA,MAAK,UAAU,EAAE,OAAO,KAAK;AAAA,YACvC,SAAS;AAAA,YACT,aAAa,EAAE;AAAA,YACf,cAAY,EAAE;AAAA,YACd,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAOC,aAAa,SAAS,SAAS,0BAC7B,OAAA,EAAI,WAAW,2EAA2E,cAAc,IAEvG,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,eAAe,oBAAoB,KAAK,CAAC;AAAA,UACzC,UAAU;AAAA,UACV,cAAY,EAAE,cAAc,SAAS,MAAM;AAAA,QAAA;AAAA,MAAA,GAE/C;AAAA,0BACC,QAAA,EAAK,eAAW,MAAE,UAAA,oBAAoB,IAAI,EAAE,cAAc,mBAAmB,SAAS,MAAM,IAAI,EAAE,cAAc,SAAS,MAAM,GAAE;AAAA,MACjI,SAAS,OAAO,KACf;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAS,SAAS,MAAM,oBAAoB,oBAAI,KAAK;AAAA,UAChE,WAAU;AAAA,UACT,UAAA,EAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL,GAEJ;AAAA,IAGF,qBAAC,OAAA,EAAI,WAAU,yCAKb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,KAAK,UAAU,WAAU,0DAC3B,UAAA;AAAA,QAAA;AAAA;AAAA;AAAA,+BAGE,OAAA,EAAI,MAAK,UAAS,aAAU,QAAO,WAAU,0BAC5C,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,EAAE,SAAQ;AAAA,YACpC,CAAC,WAAW,SAAS,SAAS,SAAS,SAAS,QAAQ,EAAE,QAAQ,CAAA,MAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,MAClG,oBAAC,gBAAA,EAAuB,UAAU,WAAW,QAAA,GAAxB,CAA0C,CAChE;AAAA,UAAA,EAAA,CACH;AAAA,YACE,SAAS,WAAW,IACtB,oBAAC,KAAA,EAAE,WAAU,wDAAwD,UAAA,EAAE,MAAA,CAAM,wBAE5E,MAAA,EAAG,WAAU,qBACX,UAAA,SAAS,IAAI,CAAA,OAAM;AAClB,gBAAM,MAAM,QAAQ,EAAE;AACtB,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEE,GAAG,YAAY,EAAE;AAAA,cAClB,QAAQ,cAAc;AAAA,cACtB,SAAS,cAAc,MAAM,YAAY,EAAE,IAAI;AAAA,cAC/C,SAAS,SAAS,IAAI,GAAG;AAAA,cACzB,iBAAiB,YAAY,CAAA,QAAO,OAAO,KAAK,GAAG,IAAI;AAAA,cACvD,eAAe,EAAE,UAAU,GAAG;AAAA,cAC9B,WAAW;AAAA,YAAA;AAAA,YAPN;AAAA,UAAA;AAAA,QAUX,CAAC,EAAA,CACH;AAAA,QAGD,CAAC,aAAa,UACb,qBAAC,OAAA,EAAI,KAAK,QAAQ,MAAK,UAAS,aAAU,QACxC,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,EAAE,SAAQ;AAAA,UACpC,CAAC,SAAS,SAAS,OAAO,EAAE,IAAI,CAAC,SAAS,0BAAO,gBAAA,EAAuB,UAAU,WAAW,QAAA,GAAxB,CAA0C,CAAE;AAAA,QAAA,EAAA,CACpH;AAAA,MAAA,GAEJ;AAAA,MACA,oBAAC,kBAAA,EAAiB,MAAM,OAAO,OAAO,EAAA,CAAG;AAAA,IAAA,GAC3C;AAAA,yBAIC,OAAA,EAAI,WAAW,yGAAyG,SAAS,uBAAuB,qBAAqB,IAC5K,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,6CACb,UAAA;AAAA,QAAA,YAAY,YAAY;AAAA;AAAA,UAEvB,qBAAA,UAAA,EAAE,UAAA;AAAA,YAAA,oBAAC,UAAK,WAAU,2CAA2C,mBAAS,OAAO,eAAe,OAAO,GAAE;AAAA,YAAO;AAAA,gCAAI,QAAA,EAAK,WAAU,2CAA2C,UAAA,YAAY,eAAe,OAAO,GAAE;AAAA,YAAO;AAAA,YAAE,EAAE,UAAU,WAAW;AAAA,UAAA,EAAA,CAAE;AAAA,YAC9O,qBAAA,UAAA,EAAE,UAAA;AAAA,UAAA,oBAAC,UAAK,WAAU,2CAA2C,UAAA,YAAY,eAAe,OAAO,GAAE;AAAA,UAAO;AAAA,UAAE,EAAE,UAAU,WAAW;AAAA,QAAA,GAAE;AAAA,QACtI;AAAA,QAEA,WAAW,CAAC,aAAa,oBAAC,UAAK,eAAW,MAAC,WAAU,4CAA2C,UAAA,IAAA,CAAC;AAAA,MAAA,GACpG;AAAA,MACC,CAAC,UAAU,CAAC,aAAa,eAAe,KACvC,qBAAC,OAAA,EAAI,cAAY,EAAE,YAAY,WAAU,6BACvC,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,WAAW,UAAA;AAAA,UAAA,EAAE;AAAA,UAAK;AAAA,UAAE;AAAA,UAAO;AAAA,UAAI;AAAA,QAAA,GAAa;AAAA,QAC3D,cAAc,QAAQ,YAAY,EAAE,IAAI,CAAC,GAAG,MAAM,MAAM,0BACtD,QAAA,EAAmB,eAAW,MAAC,WAAU,+DAA8D,iBAA7F,IAAI,CAAC,EAAyF,IAEzG;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,OAAO,CAAC;AAAA,YACvB,gBAAc,MAAM,SAAS,SAAS;AAAA,YACtC,WAAW,2EACT,MAAM,SAAS,gDAAgD,qCAAqC;AAAA,YAKtG,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,mDAAmD,UAAA,EAAE,eAAe,OAAO,EAAA,CAAE;AAAA,kCACxG,QAAA,EAAK,WAAU,2BAA2B,UAAA,EAAE,eAAe,OAAO,EAAA,CAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAXhE;AAAA,QAAA,CAaR;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ListFinder.js","sources":["../../../../../../src/v1/components/lists/ListFinder/ListFinder.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\r\nimport { ChevronLeftIcon, SearchIcon } from '../../../foundations/icons/icons'\r\nimport ListItem, { LINHA_ESBATIDA, type ListItemContent } from '../../../primitives/lists/ListItem/ListItem'\r\nimport Checkbox from '../../../primitives/forms/Checkbox/Checkbox'\r\nimport { OverlayScrollbar } from '../../tables/Table/OverlayScrollbar'\r\nimport { DEFAULT_LIST_FINDER_LABELS, type ListFinderLabels } from './labels'\r\n\r\nexport interface ListFinderProps<T> {\r\n  /** As linhas: todas, ou só a página atual quando o servidor pagina (com `total`). */\r\n  items: T[]\r\n  /** Uma chave única por linha (ex: o id). */\r\n  itemKey: (item: T) => string\r\n  /** O que cada linha mostra: as partes do [ListItem](?path=/docs/v1-primitives-lists-listitem--docs). */\r\n  itemContent: (item: T) => ListItemContent\r\n  /** A linha aberta (fica realçada). */\r\n  activeKey?: string | null\r\n  /** Ao clicar numa linha: normalmente, abri-la ao lado. */\r\n  onItemClick?: (item: T) => void\r\n  /** As marcadas. Só há caixas de marcar com `onSelectionChange`. */\r\n  selectedKeys?: ReadonlySet<string>\r\n  onSelectionChange?: (keys: Set<string>) => void\r\n  /** Filtros ao lado do voltar, por cima da pesquisa (ex: um ou dois selects, no traço fino da pesquisa). */\r\n  filters?: React.ReactNode\r\n  /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */\r\n  onBack?: () => void\r\n  /** Com a caixa de pesquisa (o normal). Sem ela, a lista mostra tudo o que recebe. */\r\n  searchable?: boolean\r\n  /** O texto da pesquisa. Sem ele, a pesquisa guarda o seu. */\r\n  search?: string\r\n  onSearchChange?: (search: string) => void\r\n  /**\r\n   * O texto onde a pesquisa procura, em cada linha. Com isto, a lista filtra-se\r\n   * sozinha (sem acentos nem maiúsculas); sem isto, quem filtra é a app (ex: o\r\n   * servidor, com `onSearchChange`). Uma lista colada (uma por linha, ou\r\n   * separadas por vírgulas) mostra as que tiverem qualquer uma delas.\r\n   */\r\n  searchText?: (item: T) => string\r\n  /**\r\n   * Como se chega ao resto da lista:\r\n   * - `'pages'` (o normal): páginas numeradas no rodapé;\r\n   * - `'scroll'`: uma lista só, que vai mostrando mais `pageSize` linhas ao\r\n   *   chegar ao fundo. Com o servidor a paginar, `items` são as que já vieram e\r\n   *   pede-se o lote seguinte com `onLoadMore`.\r\n   */\r\n  mode?: 'pages' | 'scroll'\r\n  /** Com `mode=\"scroll\"` e o servidor a paginar: buscar o lote seguinte (junta-o a `items`). */\r\n  onLoadMore?: () => void\r\n  /** O servidor pagina: quantas linhas há lá ao todo. `items` é só a página atual (ou, a rolar, as que já vieram). */\r\n  total?: number\r\n  /** A página atual (1, 2, ...), quando o servidor pagina. */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Quantas linhas por página. Com o servidor a paginar, quantas ele manda. */\r\n  pageSize?: number\r\n  /** A carregar: sem linhas ainda, mostra o esqueleto delas. A rolar, com linhas, é o lote seguinte a chegar. */\r\n  loading?: boolean\r\n  labels?: Partial<ListFinderLabels>\r\n  /** No rodapé, a seguir à contagem: algo pequeno da app (ex: um ícone de ajuda com as regras da lista). */\r\n  footerExtra?: React.ReactNode\r\n  /** Com a moldura à volta (o normal). Sem ela, para ir dentro de um painel que já tem a sua. */\r\n  bordered?: boolean\r\n  className?: string\r\n}\r\n\r\nconst semAcentos = (s: string) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()\r\n\r\n/**\r\n * Parte o texto da pesquisa nos termos a procurar: vírgula, ponto e vírgula,\r\n * tab e mudança de linha. O espaço só separa quando tudo o que lá está são\r\n * números de 6 ou mais dígitos (uma coluna colada de uma folha de cálculo);\r\n * fora disso \"vila real\" é uma coisa só, e não \"vila\" ou \"real\".\r\n */\r\nexport function termosDaPesquisa(texto: string): string[] {\r\n  const porEspacos = texto.trim().split(/\\s+/).filter(Boolean)\r\n  if (porEspacos.length > 1 && porEspacos.every(t => /^\\d{6,}$/.test(t))) return porEspacos\r\n  return texto.split(/[\\n,;\\t]+/).map(t => t.trim()).filter(Boolean)\r\n}\r\n\r\n/** Os números das páginas numa coluna estreita: no máximo cinco lugares. */\r\nfunction numerosPagina(atual: number, total: number): (number | '…')[] {\r\n  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)\r\n  if (atual <= 2) return [1, 2, 3, '…', total]\r\n  if (atual >= total - 1) return [1, '…', total - 2, total - 1, total]\r\n  return [1, '…', atual, '…', total]\r\n}\r\n\r\n/** Uma linha a carregar: a forma das linhas já diz que vem ali a lista. */\r\nfunction LinhaEsqueleto({ marcavel, largura }: { marcavel: boolean; largura: string }) {\r\n  return (\r\n    <div className={`flex items-start gap-1.5 px-3 py-3 animate-pulse motion-reduce:animate-none ${LINHA_ESBATIDA}`}>\r\n      {marcavel && <span className=\"flex w-7 shrink-0 justify-center\"><span className=\"mt-0.5 h-4 w-4 border border-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-800\" /></span>}\r\n      <div className=\"min-w-0 flex-1 space-y-1.5\">\r\n        <div className=\"h-3 w-20 bg-slate-200 dark:bg-slate-700\" />\r\n        <div className={`h-2.5 ${largura} bg-slate-200 dark:bg-slate-700`} />\r\n        <div className=\"h-1.5 w-1/3 bg-slate-100 dark:bg-slate-800\" />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Uma lista para encontrar e escolher: filtros e pesquisa em cima, as linhas\r\n * ([ListItem](?path=/docs/v1-primitives-lists-listitem--docs)) a rolar no meio e\r\n * as páginas (ou a contagem, a rolar) em baixo. Pensada para a coluna ao lado do que se abre (a lista à\r\n * esquerda, o detalhe da linha escolhida à direita).\r\n *\r\n * Enche a altura do pai. O topo, a barra de \"selecionar todos\" e o rodapé\r\n * ficam sempre no sítio: só as linhas rolam.\r\n *\r\n * - **Pesquisa**: com `searchText` filtra sozinha; sem ele, a app filtra\r\n *   (`search`/`onSearchChange`).\r\n * - **Páginas**: pagina sozinha (`pageSize`), ou é o servidor (`total`, `page`,\r\n *   `onPageChange`).\r\n * - **A rolar** (`mode=\"scroll\"`): sem páginas, vai mostrando mais ao descer;\r\n *   com o servidor, `items` são as que já vieram e `onLoadMore` pede mais.\r\n * - **Realce**: o que se procurou realça-se no código e no título das linhas.\r\n * - **Marcar vários**: com `onSelectionChange`. O \"selecionar todos\" só marca\r\n *   as linhas à vista, nunca as que não se veem.\r\n */\r\nexport default function ListFinder<T>({\r\n  items, itemKey, itemContent, activeKey, onItemClick, selectedKeys, onSelectionChange, filters, onBack,\r\n  searchable = true, search: pesquisaDeFora, onSearchChange, searchText, mode = 'pages', onLoadMore, total, page, onPageChange, pageSize = 50, loading = false,\r\n  labels, footerExtra, bordered = true, className = '',\r\n}: ListFinderProps<T>) {\r\n  const L = { ...DEFAULT_LIST_FINDER_LABELS, ...labels }\r\n  const [pesquisaPropria, setPesquisaPropria] = useState('')\r\n  const pesquisa = searchable ? (pesquisaDeFora ?? pesquisaPropria) : ''\r\n  const pesquisar = (s: string) => { setPesquisaPropria(s); onSearchChange?.(s) }\r\n  // Uma caixa de uma linha deita fora as quebras de linha: uma coluna colada\r\n  // de uma folha de cálculo chegava como um número só, colado. Passam a vírgulas.\r\n  const colar = (e: React.ClipboardEvent<HTMLInputElement>) => {\r\n    const texto = e.clipboardData.getData('text')\r\n    if (!/\\r?\\n/.test(texto.trim())) return\r\n    e.preventDefault()\r\n    const lista = texto.split(/\\r?\\n/).map(t => t.trim()).filter(Boolean).join(', ')\r\n    const el = e.currentTarget\r\n    pesquisar(el.value.slice(0, el.selectionStart ?? el.value.length) + lista + el.value.slice(el.selectionEnd ?? el.value.length))\r\n  }\r\n\r\n  // Os mesmos termos filtram (com `searchText`) e realçam-se nas linhas.\r\n  const termos = useMemo(() => termosDaPesquisa(pesquisa).map(semAcentos), [pesquisa])\r\n  const filtradas = useMemo(() => {\r\n    if (!searchText || !termos.length) return items\r\n    return items.filter(it => {\r\n      const texto = semAcentos(searchText(it))\r\n      return termos.some(t => texto.includes(t))\r\n    })\r\n  }, [items, termos, searchText])\r\n\r\n  // Paginação: do servidor (com `total`), ou feita aqui.\r\n  const peloServidor = total !== undefined\r\n  const aRolar = mode === 'scroll'\r\n  const [paginaPropria, setPaginaPropria] = useState(1)\r\n  const totalLinhas = peloServidor ? total : filtradas.length\r\n  const totalPaginas = Math.max(1, Math.ceil(totalLinhas / pageSize))\r\n  const pagina = Math.min(peloServidor ? (page ?? 1) : paginaPropria, totalPaginas)\r\n  // Uma pesquisa nova volta à primeira página: a terceira de antes já não é a mesma lista.\r\n  useEffect(() => { if (!peloServidor) setPaginaPropria(1) }, [pesquisa, peloServidor])\r\n  const irPara = (p: number) => { if (peloServidor) onPageChange?.(p); else setPaginaPropria(p) }\r\n  // A rolar sem servidor: quantos lotes já se mostram.\r\n  const [lotes, setLotes] = useState(1)\r\n  useEffect(() => { setLotes(1) }, [pesquisa])\r\n  const visiveis = peloServidor ? filtradas\r\n    : aRolar ? filtradas.slice(0, lotes * pageSize)\r\n    : filtradas.slice((pagina - 1) * pageSize, pagina * pageSize)\r\n  const haMais = aRolar && (peloServidor ? !!onLoadMore && items.length < totalLinhas : visiveis.length < filtradas.length)\r\n\r\n  // Ao mudar de página, ou de pesquisa a rolar, a lista volta ao topo.\r\n  const [caixa, setCaixa] = useState<HTMLDivElement | null>(null)\r\n  useEffect(() => { caixa?.scrollTo?.({ top: 0 }) }, [pagina, caixa])\r\n  useEffect(() => { if (aRolar) caixa?.scrollTo?.({ top: 0 }) }, [pesquisa, aRolar, caixa])\r\n\r\n  // A rolar: a linha-sentinela no fundo, ao chegar a 300px da vista, pede o\r\n  // lote seguinte. Volta a observar a cada lote que chega: se continuar à\r\n  // vista (uma janela alta), pede logo outro.\r\n  const [fim, setFim] = useState<HTMLDivElement | null>(null)\r\n  useEffect(() => {\r\n    if (!fim || !caixa || !haMais || typeof IntersectionObserver === 'undefined') return\r\n    const io = new IntersectionObserver(([e]) => {\r\n      if (!e?.isIntersecting) return\r\n      if (peloServidor) { if (!loading) onLoadMore?.() } else setLotes(n => n + 1)\r\n    }, { root: caixa, rootMargin: '300px' })\r\n    io.observe(fim)\r\n    return () => io.disconnect()\r\n  }, [fim, caixa, haMais, peloServidor, loading, onLoadMore, visiveis.length])\r\n\r\n  const marcadas = selectedKeys ?? new Set<string>()\r\n  const marcaveis = !!onSelectionChange\r\n  const nMarcadasVisiveis = visiveis.filter(it => marcadas.has(itemKey(it))).length\r\n  const todasMarcadas = visiveis.length > 0 && nMarcadasVisiveis === visiveis.length\r\n  const marcar = (key: string, sim: boolean) => {\r\n    const n = new Set(marcadas)\r\n    if (sim) n.add(key); else n.delete(key)\r\n    onSelectionChange?.(n)\r\n  }\r\n  const marcarVisiveis = () => {\r\n    const n = new Set(marcadas)\r\n    for (const it of visiveis) { if (todasMarcadas) n.delete(itemKey(it)); else n.add(itemKey(it)) }\r\n    onSelectionChange?.(n)\r\n  }\r\n\r\n  const aCarregar = loading && visiveis.length === 0\r\n  const esqueleto = <span className=\"inline-block h-2 w-20 rounded-sm bg-slate-200 dark:bg-slate-700 animate-pulse motion-reduce:animate-none\" aria-hidden />\r\n\r\n  return (\r\n    <div className={`v1-reset flex h-full min-h-0 flex-col bg-white text-control text-slate-800 dark:bg-slate-900 dark:text-slate-100 ${bordered ? 'border border-slate-200 dark:border-slate-700' : ''} ${className}`}>\r\n      {/* Sem pesquisa, filtros nem voltar, não há cabeça: as linhas começam no topo. */}\r\n      {(searchable || onBack || filters) && (\r\n      <div className=\"space-y-2 border-b border-slate-100 px-3 py-2 dark:border-slate-800\">\r\n        {(onBack || filters) && (\r\n          <div className=\"flex items-center gap-1.5\">\r\n            {onBack && (\r\n              <button type=\"button\" onClick={onBack} aria-label={L.back} title={L.back}\r\n                className=\"-ml-1 flex h-7 w-6 shrink-0 items-center justify-center rounded text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200\">\r\n                <ChevronLeftIcon size={14} />\r\n              </button>\r\n            )}\r\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">{filters}</div>\r\n          </div>\r\n        )}\r\n        {searchable && (\r\n          <div className=\"relative\">\r\n            {/* Caixa direita e fina, no tamanho do texto das linhas: a lista é\r\n                uma coluna estreita, e a pesquisa não deve pesar mais do que ela. */}\r\n            <SearchIcon size={11} className=\"pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-slate-400\" />\r\n            <input\r\n              type=\"search\"\r\n              value={pesquisa}\r\n              onChange={e => pesquisar(e.target.value)}\r\n              onPaste={colar}\r\n              placeholder={L.searchPlaceholder}\r\n              aria-label={L.search}\r\n              className=\"block w-full min-w-0 border border-slate-200 bg-white py-1.5 pr-2 pl-6 text-micro text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:border-proef-blue dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100\"\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n      )}\r\n\r\n      {/* Fora da área que rola: é a cabeça da lista, e é a descer a lista que\r\n          se decide marcá-la toda. Branca, com a linha esbatida das linhas por\r\n          baixo: uma faixa cinzenta entre o branco da pesquisa e o das linhas\r\n          era um tom quase igual a meio, e lia-se como sujidade. */}\r\n      {marcaveis && visiveis.length > 0 && (\r\n        <div className={`flex items-center gap-1.5 bg-white px-3 py-2 text-[10px] text-slate-600 dark:bg-slate-900 dark:text-slate-300 ${LINHA_ESBATIDA}`}>\r\n          {/* Na coluna de 28px das linhas, para as caixas ficarem umas por baixo das outras. */}\r\n          <span className=\"flex w-7 shrink-0 justify-center\">\r\n            <Checkbox\r\n              checked={todasMarcadas}\r\n              indeterminate={nMarcadasVisiveis > 0 && !todasMarcadas}\r\n              onChange={marcarVisiveis}\r\n              aria-label={L.selectVisible(visiveis.length)}\r\n            />\r\n          </span>\r\n          <span aria-hidden>{nMarcadasVisiveis > 0 ? L.selectedCount(nMarcadasVisiveis, visiveis.length) : L.selectVisible(visiveis.length)}</span>\r\n          {marcadas.size > 0 && (\r\n            <button type=\"button\" onClick={() => onSelectionChange?.(new Set())}\r\n              className=\"ml-auto text-proef-blue hover:underline\">\r\n              {L.clearSelection}\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      <div className=\"relative flex min-h-0 flex-1 flex-col\">\r\n        {/* `relative`: o texto só para leitores de ecrã (`sr-only`, posição\r\n            absoluta) do fundo da lista tem de ficar preso a esta caixa. Sem isso\r\n            ficava no fim das linhas, fora do corte do scroll, e esticava a\r\n            página — dava para rolar até um branco sem nada. */}\r\n        <div ref={setCaixa} className=\"relative min-h-0 flex-1 overflow-y-auto scrollbar-none\">\r\n          {aCarregar ? (\r\n            // A forma das linhas já diz que vem ali a lista. Mais do que cabem,\r\n            // cortadas pela caixa: chega ao fundo em qualquer altura.\r\n            <div role=\"status\" aria-busy=\"true\" className=\"h-full overflow-hidden\">\r\n              <span className=\"sr-only\">{L.loading}</span>\r\n              {['w-11/12', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5', 'w-7/12'].flatMap(l => [l, l, l, l]).map((largura, i) => (\r\n                <LinhaEsqueleto key={i} marcavel={marcaveis} largura={largura} />\r\n              ))}\r\n            </div>\r\n          ) : visiveis.length === 0 ? (\r\n            <p className=\"m-0 px-3 py-4 text-center text-[10px] text-slate-400\">{L.empty}</p>\r\n          ) : (\r\n            <ul className=\"m-0 list-none p-0\">\r\n              {visiveis.map(it => {\r\n                const key = itemKey(it)\r\n                return (\r\n                  <ListItem\r\n                    key={key}\r\n                    {...itemContent(it)}\r\n                    active={activeKey === key}\r\n                    onClick={onItemClick ? () => onItemClick(it) : undefined}\r\n                    checked={marcadas.has(key)}\r\n                    onCheckedChange={marcaveis ? sim => marcar(key, sim) : undefined}\r\n                    checkboxLabel={L.checkItem(key)}\r\n                    highlight={termos}\r\n                  />\r\n                )\r\n              })}\r\n            </ul>\r\n          )}\r\n          {/* A rolar: o lote seguinte a chegar, e a sentinela que o pede. */}\r\n          {!aCarregar && haMais && (\r\n            <div ref={setFim} role=\"status\" aria-busy=\"true\">\r\n              <span className=\"sr-only\">{L.loading}</span>\r\n              {['w-3/4', 'w-5/6', 'w-2/3'].map((largura, i) => <LinhaEsqueleto key={i} marcavel={marcaveis} largura={largura} />)}\r\n            </div>\r\n          )}\r\n        </div>\r\n        <OverlayScrollbar alvo={caixa} borda={0} />\r\n      </div>\r\n\r\n      {/* Sempre à vista e com a mesma altura, carregada ou não: aparecer do\r\n          nada fazia saltar o fundo do painel. */}\r\n      <div className={`flex shrink-0 items-center gap-2 border-t border-slate-100 bg-slate-50 px-3 text-micro text-slate-400 dark:border-slate-800 dark:bg-slate-800/50 ${aRolar ? 'h-8 justify-center' : 'h-9 justify-between'}`}>\r\n        <span className=\"flex items-center gap-1 whitespace-nowrap\">\r\n          {aCarregar ? esqueleto : aRolar ? (\r\n            // A rolar: quantas já se mostram, de quantas há.\r\n            <><span className=\"font-medium text-slate-500 tabular-nums dark:text-slate-300\">{visiveis.length.toLocaleString('pt-PT')}</span> / <span className=\"font-medium text-slate-500 tabular-nums dark:text-slate-300\">{totalLinhas.toLocaleString('pt-PT')}</span> {L.itemsNoun(totalLinhas)}</>\r\n          ) : <><span className=\"font-medium text-slate-500 tabular-nums dark:text-slate-300\">{totalLinhas.toLocaleString('pt-PT')}</span> {L.itemsNoun(totalLinhas)}</>}\r\n          {footerExtra}\r\n          {/* Com linhas e a pedir outra vez (ex: outra página, ou a atualizar): um \"…\" a pulsar. */}\r\n          {loading && !aCarregar && <span aria-hidden className=\"animate-pulse motion-reduce:animate-none\">…</span>}\r\n        </span>\r\n        {!aRolar && !aCarregar && totalPaginas > 1 && (\r\n          <nav aria-label={L.pagination} className=\"flex items-center gap-0.5\">\r\n            <span className=\"sr-only\">{L.page} {pagina} / {totalPaginas}</span>\r\n            {numerosPagina(pagina, totalPaginas).map((p, i) => p === '…' ? (\r\n              <span key={`r${i}`} aria-hidden className=\"flex h-6 min-w-3 items-center justify-center text-slate-300 dark:text-slate-600\">…</span>\r\n            ) : (\r\n              <button\r\n                key={p}\r\n                type=\"button\"\r\n                onClick={() => irPara(p)}\r\n                aria-current={p === pagina ? 'page' : undefined}\r\n                className={`grid h-6 min-w-5 place-items-center px-1 tabular-nums transition-colors ${\r\n                  p === pagina ? 'cursor-default font-semibold text-slate-800 dark:text-slate-100' : 'text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'}`}\r\n              >\r\n                {/* Sem caixa nem fundo: a página atual é só o número mais forte.\r\n                    A cópia invisível a negrito guarda a largura, para os números\r\n                    não se mexerem ao trocar de página. */}\r\n                <span aria-hidden className=\"invisible col-start-1 row-start-1 font-semibold\">{p.toLocaleString('pt-PT')}</span>\r\n                <span className=\"col-start-1 row-start-1\">{p.toLocaleString('pt-PT')}</span>\r\n              </button>\r\n            ))}\r\n          </nav>\r\n        )}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/components/overlays/Dialog/Dialog.js

@@ -91,7 +91,7 @@ function Dialog({
         onClick: (e) => {
           if (closeOnBackdrop && pressedBackdrop.current && noFundo(e)) onClose();
         },
-        className: `fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${open ? "flex" : "hidden"}`,
+        className: `fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${height === "full" ? "max-sm:p-0" : ""} ${open ? "flex" : "hidden"}`,
         children: [
           /* @__PURE__ */ jsx("div", { ref: fundo, className: "absolute inset-0 bg-black/40 motion-safe:animate-backdrop-in" }),
           /* @__PURE__ */ jsxs(
@@ -104,7 +104,7 @@ function Dialog({
               tabIndex: -1,
               className: (
                 // No escuro a sombra não se vê: a linha (a mesma dos menus) separa a janela do fundo.
-                `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none dark:border dark:border-slate-700 motion-safe:animate-dialog-in ${height === "full" ? "h-full" : ""}`
+                `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none dark:border dark:border-slate-700 motion-safe:animate-dialog-in ${height === "full" ? "h-full max-sm:rounded-none max-sm:border-0" : ""}`
               ),
               children: [
                 /* @__PURE__ */ jsxs("header", { className: "flex flex-none items-center justify-between gap-3 bg-gradient-to-br from-primary to-primary-strong px-5 py-3.5", children: [

package/dist/esm/v1/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../src/v1/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\n\r\nconst DialogContainerContext = createContext<HTMLElement | null>(null)\r\nconst DialogDepthContext = createContext(0)\r\n\r\n/**\r\n * O elemento da janela, para usar como destino de `createPortal` (ex: avisos,\r\n * confirmações, sobreposições) quando o conteúdo deve ficar junto dela. Um\r\n * portal para `document.body` também funciona, desde que fique por cima\r\n * (`z-index` acima de 200). Fora de um Dialog devolve `null`.\r\n *\r\n * `createPortal(conteudo, useDialogContainer() ?? document.body)`\r\n */\r\nexport const useDialogContainer = () => useContext(DialogContainerContext)\r\n\r\nexport interface DialogProps {\r\n  /** Aberta ou fechada. A app guarda este estado. */\r\n  open: boolean\r\n  /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */\r\n  onClose: () => void\r\n  /** Normalmente texto; aceita JSX (ex: um nome em negrito). */\r\n  title: React.ReactNode\r\n  /** Linha por baixo do título (ex: nome · departamento). */\r\n  subtitle?: React.ReactNode\r\n  /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */\r\n  footer?: React.ReactNode\r\n  /**\r\n   * Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px, `xl` até 1600px (95% do ecrã, para janelas com\r\n   * mapa e tabela lado a lado). Nunca passa o ecrã.\r\n   */\r\n  size?: 'sm' | 'md' | 'lg' | 'xl'\r\n  /**\r\n   * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a\r\n   * altura disponível (útil quando o conteúdo muda de tamanho e a janela não\r\n   * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.\r\n   */\r\n  height?: 'auto' | 'full'\r\n  /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */\r\n  closeOnBackdrop?: boolean\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Fechar\". */\r\n  closeLabel?: string\r\n  /**\r\n   * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio\r\n   * scroll (ex: passos que deslizam, rodapé próprio de cada passo).\r\n   */\r\n  flush?: boolean\r\n  children: React.ReactNode\r\n}\r\n\r\nconst WIDTHS = { sm: 'max-w-dialog-sm', md: 'max-w-dialog-md', lg: 'max-w-dialog-lg', xl: 'max-w-dialog-xl' }\r\n\r\ninterface Aberta {\r\n  root: HTMLElement\r\n  janela: HTMLElement | null\r\n  depth: number\r\n}\r\n\r\nconst abertas: Aberta[] = []\r\nconst silenciados = new Set<Element>()\r\n\r\nconst doTopo = () => abertas[abertas.length - 1]\r\n\r\nfunction silenciar() {\r\n  for (const el of silenciados) el.removeAttribute('inert')\r\n  silenciados.clear()\r\n  const topo = doTopo()\r\n  if (!topo) return\r\n  for (const el of Array.from(document.body.children)) {\r\n    if (el === topo.root || el.hasAttribute('inert')) continue\r\n    el.setAttribute('inert', '')\r\n    silenciados.add(el)\r\n  }\r\n}\r\n\r\n// Uma janela aberta dentro de outra fica sempre por cima dela, mesmo que abram juntas.\r\nfunction empilhar(aberta: Aberta) {\r\n  const acima = abertas.findIndex((a) => a.depth > aberta.depth)\r\n  if (acima === -1) abertas.push(aberta)\r\n  else abertas.splice(acima, 0, aberta)\r\n}\r\n\r\n/**\r\n * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e\r\n * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).\r\n *\r\n * É a janela modal da V1 (substitui o `Modal` legacy).\r\n *\r\n * Fundo escurecido, Esc para fechar e, ao fechar, o foco volta ao sítio onde\r\n * estava. Enquanto está aberta, o resto da página fica\r\n * [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert):\r\n * nem rato, nem teclado, nem leitores de ecrã lhe chegam. Os portais abertos\r\n * depois dela (seletores, confirmações) continuam a responder.\r\n *\r\n * O conteúdo fica montado mesmo com a janela fechada, para poder carregar antes\r\n * de ela abrir.\r\n *\r\n * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura\r\n * da janela do browser (com uma margem), e acompanha-a quando é\r\n * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o\r\n * rodapé ficam sempre visíveis.\r\n *\r\n * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).\r\n */\r\nexport default function Dialog({\r\n  open,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  footer,\r\n  size = 'md',\r\n  height = 'auto',\r\n  closeOnBackdrop = true,\r\n  closeLabel = 'Fechar',\r\n  flush = false,\r\n  children,\r\n}: DialogProps) {\r\n  const [root, setRoot] = useState<HTMLDivElement | null>(null)\r\n  const janela = useRef<HTMLDivElement>(null)\r\n  const fundo = useRef<HTMLDivElement>(null)\r\n  const titleId = useId()\r\n  const depth = useContext(DialogDepthContext)\r\n  const fechar = useRef(onClose)\r\n  fechar.current = onClose\r\n  // Clique fora: só conta se começou e acabou no fundo (arrastar a partir de um\r\n  // campo para fora não fecha a janela).\r\n  const pressedBackdrop = useRef(false)\r\n\r\n  useEffect(() => {\r\n    if (!open || !root) return\r\n    const anterior = document.activeElement as HTMLElement | null\r\n    const aberta = { root, janela: janela.current, depth }\r\n    empilhar(aberta)\r\n    silenciar()\r\n    const topo = doTopo()\r\n    const dentro = topo.janela?.contains(document.activeElement)\r\n    if (!dentro) topo.janela?.focus()\r\n\r\n    const onKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Escape' || e.defaultPrevented) return\r\n      if (doTopo() !== aberta) return\r\n      fechar.current()\r\n    }\r\n    document.addEventListener('keydown', onKeyDown)\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', onKeyDown)\r\n      abertas.splice(abertas.indexOf(aberta), 1)\r\n      silenciar()\r\n      const voltar = anterior && !anterior.closest('[inert]')\r\n      if (voltar) anterior.focus()\r\n      else doTopo()?.janela?.focus()\r\n    }\r\n  }, [open, root, depth])\r\n\r\n  // A página por trás não faz scroll enquanto a janela está aberta.\r\n  useEffect(() => {\r\n    if (!open) return\r\n    const html = document.documentElement\r\n    const before = html.style.overflow\r\n    html.style.overflow = 'hidden'\r\n    return () => {\r\n      html.style.overflow = before\r\n    }\r\n  }, [open])\r\n\r\n  const noFundo = (e: React.SyntheticEvent) => e.target === fundo.current || e.target === e.currentTarget\r\n\r\n  return createPortal(\r\n    <div\r\n      ref={setRoot}\r\n      hidden={!open}\r\n      onPointerDown={(e) => {\r\n        pressedBackdrop.current = noFundo(e)\r\n      }}\r\n      onClick={(e) => {\r\n        if (closeOnBackdrop && pressedBackdrop.current && noFundo(e)) onClose()\r\n      }}\r\n      className={`fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${open ? 'flex' : 'hidden'}`}\r\n    >\r\n      <div ref={fundo} className=\"absolute inset-0 bg-black/40 motion-safe:animate-backdrop-in\" />\r\n      <div\r\n        ref={janela}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={titleId}\r\n        tabIndex={-1}\r\n        className={\r\n          // No escuro a sombra não se vê: a linha (a mesma dos menus) separa a janela do fundo.\r\n          `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none dark:border dark:border-slate-700 ` +\r\n          `motion-safe:animate-dialog-in ${height === 'full' ? 'h-full' : ''}`\r\n        }\r\n      >\r\n        <header className=\"flex flex-none items-center justify-between gap-3 bg-gradient-to-br from-primary to-primary-strong px-5 py-3.5\">\r\n          <div className=\"min-w-0\">\r\n            <h2 id={titleId} className=\"m-0 truncate text-title font-bold text-primary-foreground\">\r\n              {title}\r\n            </h2>\r\n            {subtitle && <p className=\"m-0 mt-0.5 truncate text-caption text-primary-foreground/75\">{subtitle}</p>}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            aria-label={closeLabel}\r\n            title={closeLabel}\r\n            onClick={onClose}\r\n            className=\"flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-md border border-primary-foreground/25 bg-primary-foreground/15 text-base leading-none text-primary-foreground transition-colors hover:bg-primary-foreground/25 focus-visible:ring-2 focus-visible:ring-primary-foreground/60 focus-visible:outline-none\"\r\n          >\r\n            ×\r\n          </button>\r\n        </header>\r\n\r\n        <DialogContainerContext.Provider value={root}>\r\n          <DialogDepthContext.Provider value={depth + 1}>\r\n            <div className={flush ? 'flex min-h-0 flex-1 flex-col overflow-hidden bg-canvas' : 'min-h-0 flex-1 overflow-y-auto bg-canvas px-5 py-4'}>{children}</div>\r\n\r\n            {footer && <footer className=\"flex flex-none flex-wrap justify-end gap-2 border-t border-border bg-muted/40 px-5 py-[18px]\">{footer}</footer>}\r\n          </DialogDepthContext.Provider>\r\n        </DialogContainerContext.Provider>\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AAGA,MAAM,yBAAyB,cAAkC,IAAI;AACrE,MAAM,qBAAqB,cAAc,CAAC;AAUnC,MAAM,qBAAqB,MAAM,WAAW,sBAAsB;AAoCzE,MAAM,SAAS,EAAE,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,kBAAA;AAQ1F,MAAM,UAAoB,CAAA;AAC1B,MAAM,kCAAkB,IAAA;AAExB,MAAM,SAAS,MAAM,QAAQ,QAAQ,SAAS,CAAC;AAE/C,SAAS,YAAY;AACnB,aAAW,MAAM,YAAa,IAAG,gBAAgB,OAAO;AACxD,cAAY,MAAA;AACZ,QAAM,OAAO,OAAA;AACb,MAAI,CAAC,KAAM;AACX,aAAW,MAAM,MAAM,KAAK,SAAS,KAAK,QAAQ,GAAG;AACnD,QAAI,OAAO,KAAK,QAAQ,GAAG,aAAa,OAAO,EAAG;AAClD,OAAG,aAAa,SAAS,EAAE;AAC3B,gBAAY,IAAI,EAAE;AAAA,EACpB;AACF;AAGA,SAAS,SAAS,QAAgB;AAChC,QAAM,QAAQ,QAAQ,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO,KAAK;AAC7D,MAAI,UAAU,GAAI,SAAQ,KAAK,MAAM;AAAA,MAChC,SAAQ,OAAO,OAAO,GAAG,MAAM;AACtC;AAwBA,SAAwB,OAAO;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AACF,GAAgB;AACd,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgC,IAAI;AAC5D,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,QAAQ,OAAuB,IAAI;AACzC,QAAM,UAAU,MAAA;AAChB,QAAM,QAAQ,WAAW,kBAAkB;AAC3C,QAAM,SAAS,OAAO,OAAO;AAC7B,SAAO,UAAU;AAGjB,QAAM,kBAAkB,OAAO,KAAK;AAEpC,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,KAAM;AACpB,UAAM,WAAW,SAAS;AAC1B,UAAM,SAAS,EAAE,MAAM,QAAQ,OAAO,SAAS,MAAA;AAC/C,aAAS,MAAM;AACf,cAAA;AACA,UAAM,OAAO,OAAA;AACb,UAAM,SAAS,KAAK,QAAQ,SAAS,SAAS,aAAa;AAC3D,QAAI,CAAC,OAAQ,MAAK,QAAQ,MAAA;AAE1B,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,YAAY,EAAE,iBAAkB;AAC9C,UAAI,OAAA,MAAa,OAAQ;AACzB,aAAO,QAAA;AAAA,IACT;AACA,aAAS,iBAAiB,WAAW,SAAS;AAE9C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,SAAS;AACjD,cAAQ,OAAO,QAAQ,QAAQ,MAAM,GAAG,CAAC;AACzC,gBAAA;AACA,YAAM,SAAS,YAAY,CAAC,SAAS,QAAQ,SAAS;AACtD,UAAI,iBAAiB,MAAA;AAAA,UAChB,QAAA,GAAU,QAAQ,MAAA;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,KAAK,CAAC;AAGtB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS;AACtB,UAAM,SAAS,KAAK,MAAM;AAC1B,SAAK,MAAM,WAAW;AACtB,WAAO,MAAM;AACX,WAAK,MAAM,WAAW;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU,CAAC,MAA4B,EAAE,WAAW,MAAM,WAAW,EAAE,WAAW,EAAE;AAE1F,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAQ,CAAC;AAAA,QACT,eAAe,CAAC,MAAM;AACpB,0BAAgB,UAAU,QAAQ,CAAC;AAAA,QACrC;AAAA,QACA,SAAS,CAAC,MAAM;AACd,cAAI,mBAAmB,gBAAgB,WAAW,QAAQ,CAAC,EAAG,SAAA;AAAA,QAChE;AAAA,QACA,WAAW,qEAAqE,OAAO,SAAS,QAAQ;AAAA,QAExG,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,KAAK,OAAO,WAAU,gEAA+D;AAAA,UAC1F;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,cAAW;AAAA,cACX,mBAAiB;AAAA,cACjB,UAAU;AAAA,cACV;AAAA;AAAA,gBAEE,mCAAmC,OAAO,IAAI,CAAC,2JACd,WAAW,SAAS,WAAW,EAAE;AAAA;AAAA,cAGpE,UAAA;AAAA,gBAAA,qBAAC,UAAA,EAAO,WAAU,kHAChB,UAAA;AAAA,kBAAA,qBAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,oBAAA,oBAAC,MAAA,EAAG,IAAI,SAAS,WAAU,6DACxB,UAAA,OACH;AAAA,oBACC,YAAY,oBAAC,KAAA,EAAE,WAAU,+DAA+D,UAAA,SAAA,CAAS;AAAA,kBAAA,GACpG;AAAA,kBACA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,cAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,SAAS;AAAA,sBACT,WAAU;AAAA,sBACX,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAED,GACF;AAAA,gBAEA,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,MACtC,UAAA,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAAQ,GAC1C,UAAA;AAAA,kBAAA,oBAAC,OAAA,EAAI,WAAW,QAAQ,2DAA2D,sDAAuD,UAAS;AAAA,kBAElJ,UAAU,oBAAC,UAAA,EAAO,WAAU,gGAAgG,UAAA,OAAA,CAAO;AAAA,gBAAA,EAAA,CACtI,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/v1/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\n\r\nconst DialogContainerContext = createContext<HTMLElement | null>(null)\r\nconst DialogDepthContext = createContext(0)\r\n\r\n/**\r\n * O elemento da janela, para usar como destino de `createPortal` (ex: avisos,\r\n * confirmações, sobreposições) quando o conteúdo deve ficar junto dela. Um\r\n * portal para `document.body` também funciona, desde que fique por cima\r\n * (`z-index` acima de 200). Fora de um Dialog devolve `null`.\r\n *\r\n * `createPortal(conteudo, useDialogContainer() ?? document.body)`\r\n */\r\nexport const useDialogContainer = () => useContext(DialogContainerContext)\r\n\r\nexport interface DialogProps {\r\n  /** Aberta ou fechada. A app guarda este estado. */\r\n  open: boolean\r\n  /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */\r\n  onClose: () => void\r\n  /** Normalmente texto; aceita JSX (ex: um nome em negrito). */\r\n  title: React.ReactNode\r\n  /** Linha por baixo do título (ex: nome · departamento). */\r\n  subtitle?: React.ReactNode\r\n  /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */\r\n  footer?: React.ReactNode\r\n  /**\r\n   * Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px, `xl` até 1600px (95% do ecrã, para janelas com\r\n   * mapa e tabela lado a lado). Nunca passa o ecrã.\r\n   */\r\n  size?: 'sm' | 'md' | 'lg' | 'xl'\r\n  /**\r\n   * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a\r\n   * altura disponível (útil quando o conteúdo muda de tamanho e a janela não\r\n   * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.\r\n   */\r\n  height?: 'auto' | 'full'\r\n  /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */\r\n  closeOnBackdrop?: boolean\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Fechar\". */\r\n  closeLabel?: string\r\n  /**\r\n   * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio\r\n   * scroll (ex: passos que deslizam, rodapé próprio de cada passo).\r\n   */\r\n  flush?: boolean\r\n  children: React.ReactNode\r\n}\r\n\r\nconst WIDTHS = { sm: 'max-w-dialog-sm', md: 'max-w-dialog-md', lg: 'max-w-dialog-lg', xl: 'max-w-dialog-xl' }\r\n\r\ninterface Aberta {\r\n  root: HTMLElement\r\n  janela: HTMLElement | null\r\n  depth: number\r\n}\r\n\r\nconst abertas: Aberta[] = []\r\nconst silenciados = new Set<Element>()\r\n\r\nconst doTopo = () => abertas[abertas.length - 1]\r\n\r\nfunction silenciar() {\r\n  for (const el of silenciados) el.removeAttribute('inert')\r\n  silenciados.clear()\r\n  const topo = doTopo()\r\n  if (!topo) return\r\n  for (const el of Array.from(document.body.children)) {\r\n    if (el === topo.root || el.hasAttribute('inert')) continue\r\n    el.setAttribute('inert', '')\r\n    silenciados.add(el)\r\n  }\r\n}\r\n\r\n// Uma janela aberta dentro de outra fica sempre por cima dela, mesmo que abram juntas.\r\nfunction empilhar(aberta: Aberta) {\r\n  const acima = abertas.findIndex((a) => a.depth > aberta.depth)\r\n  if (acima === -1) abertas.push(aberta)\r\n  else abertas.splice(acima, 0, aberta)\r\n}\r\n\r\n/**\r\n * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e\r\n * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).\r\n *\r\n * É a janela modal da V1 (substitui o `Modal` legacy).\r\n *\r\n * Fundo escurecido, Esc para fechar e, ao fechar, o foco volta ao sítio onde\r\n * estava. Enquanto está aberta, o resto da página fica\r\n * [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert):\r\n * nem rato, nem teclado, nem leitores de ecrã lhe chegam. Os portais abertos\r\n * depois dela (seletores, confirmações) continuam a responder.\r\n *\r\n * O conteúdo fica montado mesmo com a janela fechada, para poder carregar antes\r\n * de ela abrir.\r\n *\r\n * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura\r\n * da janela do browser (com uma margem), e acompanha-a quando é\r\n * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o\r\n * rodapé ficam sempre visíveis.\r\n *\r\n * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).\r\n */\r\nexport default function Dialog({\r\n  open,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  footer,\r\n  size = 'md',\r\n  height = 'auto',\r\n  closeOnBackdrop = true,\r\n  closeLabel = 'Fechar',\r\n  flush = false,\r\n  children,\r\n}: DialogProps) {\r\n  const [root, setRoot] = useState<HTMLDivElement | null>(null)\r\n  const janela = useRef<HTMLDivElement>(null)\r\n  const fundo = useRef<HTMLDivElement>(null)\r\n  const titleId = useId()\r\n  const depth = useContext(DialogDepthContext)\r\n  const fechar = useRef(onClose)\r\n  fechar.current = onClose\r\n  // Clique fora: só conta se começou e acabou no fundo (arrastar a partir de um\r\n  // campo para fora não fecha a janela).\r\n  const pressedBackdrop = useRef(false)\r\n\r\n  useEffect(() => {\r\n    if (!open || !root) return\r\n    const anterior = document.activeElement as HTMLElement | null\r\n    const aberta = { root, janela: janela.current, depth }\r\n    empilhar(aberta)\r\n    silenciar()\r\n    const topo = doTopo()\r\n    const dentro = topo.janela?.contains(document.activeElement)\r\n    if (!dentro) topo.janela?.focus()\r\n\r\n    const onKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Escape' || e.defaultPrevented) return\r\n      if (doTopo() !== aberta) return\r\n      fechar.current()\r\n    }\r\n    document.addEventListener('keydown', onKeyDown)\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', onKeyDown)\r\n      abertas.splice(abertas.indexOf(aberta), 1)\r\n      silenciar()\r\n      const voltar = anterior && !anterior.closest('[inert]')\r\n      if (voltar) anterior.focus()\r\n      else doTopo()?.janela?.focus()\r\n    }\r\n  }, [open, root, depth])\r\n\r\n  // A página por trás não faz scroll enquanto a janela está aberta.\r\n  useEffect(() => {\r\n    if (!open) return\r\n    const html = document.documentElement\r\n    const before = html.style.overflow\r\n    html.style.overflow = 'hidden'\r\n    return () => {\r\n      html.style.overflow = before\r\n    }\r\n  }, [open])\r\n\r\n  const noFundo = (e: React.SyntheticEvent) => e.target === fundo.current || e.target === e.currentTarget\r\n\r\n  return createPortal(\r\n    <div\r\n      ref={setRoot}\r\n      hidden={!open}\r\n      onPointerDown={(e) => {\r\n        pressedBackdrop.current = noFundo(e)\r\n      }}\r\n      onClick={(e) => {\r\n        if (closeOnBackdrop && pressedBackdrop.current && noFundo(e)) onClose()\r\n      }}\r\n      // No telemóvel, a janela de altura total ocupa o ecrã todo (sem margem nem cantos): o cabeçalho, com o ×, fica sempre à vista.\r\n      className={`fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${height === 'full' ? 'max-sm:p-0' : ''} ${open ? 'flex' : 'hidden'}`}\r\n    >\r\n      <div ref={fundo} className=\"absolute inset-0 bg-black/40 motion-safe:animate-backdrop-in\" />\r\n      <div\r\n        ref={janela}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={titleId}\r\n        tabIndex={-1}\r\n        className={\r\n          // No escuro a sombra não se vê: a linha (a mesma dos menus) separa a janela do fundo.\r\n          `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none dark:border dark:border-slate-700 ` +\r\n          `motion-safe:animate-dialog-in ${height === 'full' ? 'h-full max-sm:rounded-none max-sm:border-0' : ''}`\r\n        }\r\n      >\r\n        <header className=\"flex flex-none items-center justify-between gap-3 bg-gradient-to-br from-primary to-primary-strong px-5 py-3.5\">\r\n          <div className=\"min-w-0\">\r\n            <h2 id={titleId} className=\"m-0 truncate text-title font-bold text-primary-foreground\">\r\n              {title}\r\n            </h2>\r\n            {subtitle && <p className=\"m-0 mt-0.5 truncate text-caption text-primary-foreground/75\">{subtitle}</p>}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            aria-label={closeLabel}\r\n            title={closeLabel}\r\n            onClick={onClose}\r\n            className=\"flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-md border border-primary-foreground/25 bg-primary-foreground/15 text-base leading-none text-primary-foreground transition-colors hover:bg-primary-foreground/25 focus-visible:ring-2 focus-visible:ring-primary-foreground/60 focus-visible:outline-none\"\r\n          >\r\n            ×\r\n          </button>\r\n        </header>\r\n\r\n        <DialogContainerContext.Provider value={root}>\r\n          <DialogDepthContext.Provider value={depth + 1}>\r\n            <div className={flush ? 'flex min-h-0 flex-1 flex-col overflow-hidden bg-canvas' : 'min-h-0 flex-1 overflow-y-auto bg-canvas px-5 py-4'}>{children}</div>\r\n\r\n            {footer && <footer className=\"flex flex-none flex-wrap justify-end gap-2 border-t border-border bg-muted/40 px-5 py-[18px]\">{footer}</footer>}\r\n          </DialogDepthContext.Provider>\r\n        </DialogContainerContext.Provider>\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/primitives/buttons/SegmentedControl/SegmentedControl.js

@@ -31,9 +31,9 @@ function SegmentedControl({
     0,
     options.findIndex((o) => o.value === value)
   );
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-center gap-3 ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-center gap-3 max-md:w-full ${className}`, children: [
     label && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black tracking-wider whitespace-nowrap text-muted-foreground uppercase", children: label }),
-    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label ?? ariaLabel, className: SEGMENTED.list, children: options.map((o, i) => {
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label ?? ariaLabel, className: `${SEGMENTED.list} max-md:flex max-md:min-w-0 max-md:flex-1 max-md:flex-nowrap max-md:items-stretch`, children: options.map((o, i) => {
       const active = o.value === value;
       return /* @__PURE__ */ jsxs(
         "button",
@@ -48,7 +48,7 @@ function SegmentedControl({
           disabled: o.disabled,
           onClick: () => onChange(o.value),
           onKeyDown: (e) => onKeyDown(e, i),
-          className: `${SEGMENTED.item} ${active ? SEGMENTED.active : SEGMENTED.idle}`,
+          className: `${SEGMENTED.item} max-md:h-auto max-md:min-h-[26px] max-md:min-w-0 max-md:flex-1 max-md:px-1.5 max-md:py-1 max-md:text-center max-md:leading-tight max-md:tracking-wider max-md:whitespace-normal ${active ? SEGMENTED.active : SEGMENTED.idle}`,
           children: [
             o.icon,
             o.label

package/dist/esm/v1/primitives/buttons/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../../src/v1/primitives/buttons/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useRef } from 'react'\r\nimport { SEGMENTED } from './segmentedStyles'\r\n\r\nexport interface SegmentedOption<V extends string = string> {\r\n  value: V\r\n  label: React.ReactNode\r\n  /** Ícone antes do texto (ex: um ícone do lucide com `size={12}`). */\r\n  icon?: React.ReactNode\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SegmentedControlProps<V extends string = string> {\r\n  /** A opção escolhida. A app guarda este estado. */\r\n  value: V\r\n  options: SegmentedOption<V>[]\r\n  onChange: (value: V) => void\r\n  /** Rótulo visível à esquerda (ex: \"Situação\"). Também é o nome do grupo para leitores de ecrã. */\r\n  label?: string\r\n  /** Nome do grupo para leitores de ecrã, quando não há `label` visível. */\r\n  ariaLabel?: string\r\n  className?: string\r\n}\r\n\r\n/**\r\n * Escolha de uma opção entre poucas, em botões lado a lado (ex: Dia · Semana ·\r\n * Mês, ou Todos · Atribuição · Devolução). Para filtros e modos de vista numa\r\n * barra; para trocar de vista com conteúdo próprio, usar `Tabs`.\r\n *\r\n * Mesmo aspeto dos `Tabs` segmentados: botões juntos numa caixa, o escolhido\r\n * a navy. Setas ← → mudam de opção.\r\n */\r\nexport default function SegmentedControl<V extends string = string>({\r\n  value,\r\n  options,\r\n  onChange,\r\n  label,\r\n  ariaLabel,\r\n  className = '',\r\n}: SegmentedControlProps<V>) {\r\n  const refs = useRef<(HTMLButtonElement | null)[]>([])\r\n\r\n  const move = (from: number, step: number) => {\r\n    const n = options.length\r\n    for (let i = 1; i <= n; i++) {\r\n      const next = (((from + step * i) % n) + n) % n\r\n      if (!options[next].disabled) {\r\n        onChange(options[next].value)\r\n        refs.current[next]?.focus()\r\n        return\r\n      }\r\n    }\r\n  }\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\r\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') move(index, 1)\r\n    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') move(index, -1)\r\n    else return\r\n    e.preventDefault()\r\n  }\r\n\r\n  const focusIndex = Math.max(\r\n    0,\r\n    options.findIndex((o) => o.value === value),\r\n  )\r\n\r\n  return (\r\n    <div className={`flex flex-wrap items-center gap-3 ${className}`}>\r\n      {label && <span className=\"text-[10px] font-black tracking-wider whitespace-nowrap text-muted-foreground uppercase\">{label}</span>}\r\n      <div role=\"radiogroup\" aria-label={label ?? ariaLabel} className={SEGMENTED.list}>\r\n        {options.map((o, i) => {\r\n          const active = o.value === value\r\n          return (\r\n            <button\r\n              key={o.value}\r\n              ref={(el) => {\r\n                refs.current[i] = el\r\n              }}\r\n              type=\"button\"\r\n              role=\"radio\"\r\n              aria-checked={active}\r\n              tabIndex={i === focusIndex ? 0 : -1}\r\n              disabled={o.disabled}\r\n              onClick={() => onChange(o.value)}\r\n              onKeyDown={(e) => onKeyDown(e, i)}\r\n              className={`${SEGMENTED.item} ${active ? SEGMENTED.active : SEGMENTED.idle}`}\r\n            >\r\n              {o.icon}\r\n              {o.label}\r\n            </button>\r\n          )\r\n        })}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA+BA,SAAwB,iBAA4C;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAA6B;AAC3B,QAAM,OAAO,OAAqC,EAAE;AAEpD,QAAM,OAAO,CAAC,MAAc,SAAiB;AAC3C,UAAM,IAAI,QAAQ;AAClB,aAAS,IAAI,GAAG,KAAK,GAAG,KAAK;AAC3B,YAAM,SAAU,OAAO,OAAO,KAAK,IAAK,KAAK;AAC7C,UAAI,CAAC,QAAQ,IAAI,EAAE,UAAU;AAC3B,iBAAS,QAAQ,IAAI,EAAE,KAAK;AAC5B,aAAK,QAAQ,IAAI,GAAG,MAAA;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,CAAC,GAAwB,UAAkB;AAC3D,QAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YAAa,MAAK,OAAO,CAAC;AAAA,aACzD,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAAW,MAAK,OAAO,EAAE;AAAA,QAChE;AACL,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,IACA,QAAQ,UAAU,CAAC,MAAM,EAAE,UAAU,KAAK;AAAA,EAAA;AAG5C,SACE,qBAAC,OAAA,EAAI,WAAW,qCAAqC,SAAS,IAC3D,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,2FAA2F,UAAA,OAAM;AAAA,IAC3H,oBAAC,OAAA,EAAI,MAAK,cAAa,cAAY,SAAS,WAAW,WAAW,UAAU,MACzE,UAAA,QAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,YAAM,SAAS,EAAE,UAAU;AAC3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,KAAK,CAAC,OAAO;AACX,iBAAK,QAAQ,CAAC,IAAI;AAAA,UACpB;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,UAAU,MAAM,aAAa,IAAI;AAAA,UACjC,UAAU,EAAE;AAAA,UACZ,SAAS,MAAM,SAAS,EAAE,KAAK;AAAA,UAC/B,WAAW,CAAC,MAAM,UAAU,GAAG,CAAC;AAAA,UAChC,WAAW,GAAG,UAAU,IAAI,IAAI,SAAS,UAAU,SAAS,UAAU,IAAI;AAAA,UAEzE,UAAA;AAAA,YAAA,EAAE;AAAA,YACF,EAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAdE,EAAE;AAAA,MAAA;AAAA,IAiBb,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../../src/v1/primitives/buttons/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useRef } from 'react'\r\nimport { SEGMENTED } from './segmentedStyles'\r\n\r\nexport interface SegmentedOption<V extends string = string> {\r\n  value: V\r\n  label: React.ReactNode\r\n  /** Ícone antes do texto (ex: um ícone do lucide com `size={12}`). */\r\n  icon?: React.ReactNode\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SegmentedControlProps<V extends string = string> {\r\n  /** A opção escolhida. A app guarda este estado. */\r\n  value: V\r\n  options: SegmentedOption<V>[]\r\n  onChange: (value: V) => void\r\n  /** Rótulo visível à esquerda (ex: \"Situação\"). Também é o nome do grupo para leitores de ecrã. */\r\n  label?: string\r\n  /** Nome do grupo para leitores de ecrã, quando não há `label` visível. */\r\n  ariaLabel?: string\r\n  className?: string\r\n}\r\n\r\n/**\r\n * Escolha de uma opção entre poucas, em botões lado a lado (ex: Dia · Semana ·\r\n * Mês, ou Todos · Atribuição · Devolução). Para filtros e modos de vista numa\r\n * barra; para trocar de vista com conteúdo próprio, usar `Tabs`.\r\n *\r\n * Mesmo aspeto dos `Tabs` segmentados: botões juntos numa caixa, o escolhido\r\n * a navy. Setas ← → mudam de opção.\r\n */\r\nexport default function SegmentedControl<V extends string = string>({\r\n  value,\r\n  options,\r\n  onChange,\r\n  label,\r\n  ariaLabel,\r\n  className = '',\r\n}: SegmentedControlProps<V>) {\r\n  const refs = useRef<(HTMLButtonElement | null)[]>([])\r\n\r\n  const move = (from: number, step: number) => {\r\n    const n = options.length\r\n    for (let i = 1; i <= n; i++) {\r\n      const next = (((from + step * i) % n) + n) % n\r\n      if (!options[next].disabled) {\r\n        onChange(options[next].value)\r\n        refs.current[next]?.focus()\r\n        return\r\n      }\r\n    }\r\n  }\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\r\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') move(index, 1)\r\n    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') move(index, -1)\r\n    else return\r\n    e.preventDefault()\r\n  }\r\n\r\n  const focusIndex = Math.max(\r\n    0,\r\n    options.findIndex((o) => o.value === value),\r\n  )\r\n\r\n  return (\r\n    <div className={`flex flex-wrap items-center gap-3 max-md:w-full ${className}`}>\r\n      {label && <span className=\"text-[10px] font-black tracking-wider whitespace-nowrap text-muted-foreground uppercase\">{label}</span>}\r\n      {/* No telemóvel a toda a largura e numa só linha, com as opções em partes iguais: um nome comprido parte-se\r\n          dentro do seu botão. Partido em duas linhas parecia dois controlos; a deslizar, ficava cortado. */}\r\n      <div role=\"radiogroup\" aria-label={label ?? ariaLabel} className={`${SEGMENTED.list} max-md:flex max-md:min-w-0 max-md:flex-1 max-md:flex-nowrap max-md:items-stretch`}>\r\n        {options.map((o, i) => {\r\n          const active = o.value === value\r\n          return (\r\n            <button\r\n              key={o.value}\r\n              ref={(el) => {\r\n                refs.current[i] = el\r\n              }}\r\n              type=\"button\"\r\n              role=\"radio\"\r\n              aria-checked={active}\r\n              tabIndex={i === focusIndex ? 0 : -1}\r\n              disabled={o.disabled}\r\n              onClick={() => onChange(o.value)}\r\n              onKeyDown={(e) => onKeyDown(e, i)}\r\n              className={`${SEGMENTED.item} max-md:h-auto max-md:min-h-[26px] max-md:min-w-0 max-md:flex-1 max-md:px-1.5 max-md:py-1 max-md:text-center max-md:leading-tight max-md:tracking-wider max-md:whitespace-normal ${active ? SEGMENTED.active : SEGMENTED.idle}`}\r\n            >\r\n              {o.icon}\r\n              {o.label}\r\n            </button>\r\n          )\r\n        })}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA+BA,SAAwB,iBAA4C;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAA6B;AAC3B,QAAM,OAAO,OAAqC,EAAE;AAEpD,QAAM,OAAO,CAAC,MAAc,SAAiB;AAC3C,UAAM,IAAI,QAAQ;AAClB,aAAS,IAAI,GAAG,KAAK,GAAG,KAAK;AAC3B,YAAM,SAAU,OAAO,OAAO,KAAK,IAAK,KAAK;AAC7C,UAAI,CAAC,QAAQ,IAAI,EAAE,UAAU;AAC3B,iBAAS,QAAQ,IAAI,EAAE,KAAK;AAC5B,aAAK,QAAQ,IAAI,GAAG,MAAA;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,CAAC,GAAwB,UAAkB;AAC3D,QAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YAAa,MAAK,OAAO,CAAC;AAAA,aACzD,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAAW,MAAK,OAAO,EAAE;AAAA,QAChE;AACL,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,IACA,QAAQ,UAAU,CAAC,MAAM,EAAE,UAAU,KAAK;AAAA,EAAA;AAG5C,SACE,qBAAC,OAAA,EAAI,WAAW,mDAAmD,SAAS,IACzE,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,2FAA2F,UAAA,OAAM;AAAA,wBAG1H,OAAA,EAAI,MAAK,cAAa,cAAY,SAAS,WAAW,WAAW,GAAG,UAAU,IAAI,qFAChF,UAAA,QAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,YAAM,SAAS,EAAE,UAAU;AAC3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,KAAK,CAAC,OAAO;AACX,iBAAK,QAAQ,CAAC,IAAI;AAAA,UACpB;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,UAAU,MAAM,aAAa,IAAI;AAAA,UACjC,UAAU,EAAE;AAAA,UACZ,SAAS,MAAM,SAAS,EAAE,KAAK;AAAA,UAC/B,WAAW,CAAC,MAAM,UAAU,GAAG,CAAC;AAAA,UAChC,WAAW,GAAG,UAAU,IAAI,oLAAoL,SAAS,UAAU,SAAS,UAAU,IAAI;AAAA,UAEzP,UAAA;AAAA,YAAA,EAAE;AAAA,YACF,EAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAdE,EAAE;AAAA,MAAA;AAAA,IAiBb,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/v1/primitives/display/Kpi/Kpi.js

@@ -60,7 +60,10 @@ function Kpi({
   const tinted = tintedProp ?? bgTint ?? false;
   const bar = barProp ?? (Array.isArray(barra) ? barra.map((x) => ({ weight: x.peso, color: x.cor })) : barra);
   const surface = tinted ? TINTS[tone] : TINTS.default;
-  const layout = dense ? "rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5" : "rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5";
+  const layout = dense ? "rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5" : (
+    // No telemóvel mais baixo e estreito: dois ou três lado a lado sem cada um ocupar meio ecrã de altura.
+    "rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5 max-sm:min-h-[64px] max-sm:px-2 max-sm:py-2 max-sm:gap-1"
+  );
   const base = `relative border ${surface} ${layout} ${className}`;
   const totalBar = Array.isArray(bar) ? bar.reduce((s, x) => s + x.weight, 0) : 0;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -69,7 +72,7 @@ function Kpi({
       /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: dense ? "flex items-baseline gap-1.5" : "", children: [
-      /* @__PURE__ */ jsx("span", { className: `${dense ? "text-xl" : "text-2xl"} font-semibold ${VALUE_TONES[tone]}`, children: value }),
+      /* @__PURE__ */ jsx("span", { className: `${dense ? "text-xl" : "text-2xl max-sm:text-xl"} font-semibold ${VALUE_TONES[tone]}`, children: value }),
       detail && dense && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400 truncate", children: detail })
     ] }),
     detail && !dense && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-slate-400", children: detail }),
@@ -89,7 +92,7 @@ function Kpi({
       className: `${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${active ? "ring-2 ring-proef-blue border-proef-blue dark:border-sky-400" : ""}`,
       children: [
         /* @__PURE__ */ (() => {
-          const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? "text-proef-blue dark:text-sky-300" : "text-slate-300 dark:text-slate-600"}`;
+          const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 max-sm:hidden ${active ? "text-proef-blue dark:text-sky-300" : "text-slate-300 dark:text-slate-600"}`;
           return clickAction === "open" ? /* @__PURE__ */ jsx(OpenIcon, { className: cls }) : /* @__PURE__ */ jsx(FunnelIcon, { className: cls });
         })(),
         content

package/dist/esm/v1/primitives/display/Kpi/Kpi.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kpi.js","sources":["../../../../../../src/v1/primitives/display/Kpi/Kpi.tsx"],"sourcesContent":["import React from 'react'\r\n\r\n/**\r\n * Estados com significado: `ok` (verde), `risco` (âmbar), `incumprido` (vermelho).\r\n * Sem estado: `default` (texto normal) e `brand` (azul da marca).\r\n * A cor é a do número — não usar cores só para enfeitar: um indicador sem\r\n * significado bom/mau fica em `default`.\r\n */\r\nexport type KpiTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido'\r\n\r\nexport interface KpiProps {\r\n  label: React.ReactNode\r\n  value: React.ReactNode\r\n  tone?: KpiTone\r\n  /** Linha por baixo do valor (ex: \"de 120\", \"+12% do compromisso\"). */\r\n  detail?: React.ReactNode\r\n  /** Ícone antes do rótulo (ex: `<Inbox size={14} />`). */\r\n  icon?: React.ReactNode\r\n  /** Ponto colorido antes do rótulo — liga o indicador à cor que ele tem no mapa ou na legenda. */\r\n  dot?: string\r\n  /**\r\n   * Barra por baixo do valor. Um número é uma percentagem; uma lista é uma\r\n   * barra repartida, com cada troço proporcional ao seu peso.\r\n   *\r\n   * Serve para o indicador dizer a PROPORÇÃO e não só o valor: \"253 concluídas\"\r\n   * não diz nada sem saber de quantas.\r\n   */\r\n  bar?: number | { weight: number; color: string }[]\r\n  /** Linha pequena no fim, para um dado que acompanha mas não é o indicador. */\r\n  footer?: React.ReactNode\r\n  /**\r\n   * Faixa fina em vez de cartão: alinha à esquerda e corta a altura para metade.\r\n   * Para muitos indicadores que empurrariam o conteúdo para fora do ecrã.\r\n   */\r\n  dense?: boolean\r\n  /** Fundo no tom claro da cor, em vez de só o número colorido. */\r\n  tinted?: boolean\r\n  /** Clicável (ex: filtra a tabela). Mostra o funil no canto (ou a seta, com `clickAction=\"open\"`). */\r\n  onClick?: () => void\r\n  /** O que o clique faz: `filter` (funil, por omissão) ou `open` (seta: abre uma lista ou um detalhe, não filtra). */\r\n  clickAction?: 'filter' | 'open'\r\n  /** Filtro ativo (Kpi clicável selecionado): contorno azul. */\r\n  active?: boolean\r\n  /** Explicação no tooltip (camada `data-tip`), ex: \"Filtrar a tabela\" ou como o valor é calculado. */\r\n  hint?: string\r\n  className?: string\r\n  /** @deprecated Nome antigo (Legacy) de `detail`. */\r\n  delta?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `tinted`. */\r\n  bgTint?: boolean\r\n  /** @deprecated Nome antigo (Legacy) de `bar`. */\r\n  barra?: number | { peso: number; cor: string }[]\r\n  /** @deprecated Nome antigo (Legacy) de `footer`. */\r\n  rodape?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `dense`. */\r\n  denso?: boolean\r\n}\r\n\r\nconst VALUE_TONES: Record<KpiTone, string> = {\r\n  default: 'text-slate-800 dark:text-slate-100',\r\n  brand: 'text-proef-blue dark:text-sky-300',\r\n  ok: 'text-ok',\r\n  risco: 'text-risco',\r\n  incumprido: 'text-incumprido',\r\n}\r\n\r\nconst TINTS: Record<KpiTone, string> = {\r\n  default: 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700',\r\n  brand: 'bg-proef-blue/10 border-transparent dark:bg-sky-500/15',\r\n  ok: 'bg-ok-bg border-transparent',\r\n  risco: 'bg-risco-bg border-transparent',\r\n  incumprido: 'bg-incumprido-bg border-transparent',\r\n}\r\n\r\nfunction OpenIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg aria-hidden viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <path d=\"M7 17 17 7M7 7h10v10\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\nfunction FunnelIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg\r\n      aria-hidden\r\n      viewBox=\"0 0 24 24\"\r\n      className={className}\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth={2}\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    >\r\n      <path d=\"M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/**\r\n * Indicador: um número com o seu rótulo (ex: \"Em progresso 13\"). Quando é\r\n * clicável filtra a vista e mostra-o com o funil; `active` marca o filtro\r\n * aplicado. Dispor vários numa grelha (`grid gap-3`).\r\n */\r\nexport default function Kpi({\r\n  label,\r\n  value,\r\n  tone = 'default',\r\n  detail: detailProp,\r\n  icon,\r\n  dot,\r\n  bar: barProp,\r\n  footer: footerProp,\r\n  dense: denseProp,\r\n  tinted: tintedProp,\r\n  onClick,\r\n  clickAction = 'filter',\r\n  active = false,\r\n  hint,\r\n  className = '',\r\n  delta,\r\n  bgTint,\r\n  barra,\r\n  rodape,\r\n  denso,\r\n}: KpiProps) {\r\n  // A Legacy usa este mesmo Kpi com os nomes antigos.\r\n  const detail = detailProp ?? delta\r\n  const footer = footerProp ?? rodape\r\n  const dense = denseProp ?? denso ?? false\r\n  const tinted = tintedProp ?? bgTint ?? false\r\n  const bar = barProp ?? (Array.isArray(barra) ? barra.map((x) => ({ weight: x.peso, color: x.cor })) : barra)\r\n  const surface = tinted ? TINTS[tone] : TINTS.default\r\n  const layout = dense\r\n    ? 'rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5'\r\n    : 'rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5'\r\n  const base = `relative border ${surface} ${layout} ${className}`\r\n  const totalBar = Array.isArray(bar) ? bar.reduce((s, x) => s + x.weight, 0) : 0\r\n\r\n  const content = (\r\n    <>\r\n      <div className={`${dense ? 'text-[10px] uppercase tracking-wide' : 'text-xs'} text-slate-500 dark:text-slate-400 flex items-center gap-1.5 max-w-full`}>\r\n        {icon ? (\r\n          <span aria-hidden className=\"shrink-0 flex\">{icon}</span>\r\n        ) : (\r\n          dot && <i aria-hidden className=\"w-2 h-2 rounded-full inline-block shrink-0\" style={{ background: dot }} />\r\n        )}\r\n        <span className=\"truncate\">{label}</span>\r\n      </div>\r\n      {/* Em denso o valor e o secundário partilham a linha: é o que poupa altura sem tirar informação. */}\r\n      <div className={dense ? 'flex items-baseline gap-1.5' : ''}>\r\n        <span className={`${dense ? 'text-xl' : 'text-2xl'} font-semibold ${VALUE_TONES[tone]}`}>{value}</span>\r\n        {detail && dense && <span className=\"text-[11px] text-slate-400 truncate\">{detail}</span>}\r\n      </div>\r\n      {detail && !dense && <div className=\"text-[11.5px] text-slate-400\">{detail}</div>}\r\n      {bar != null && (\r\n        <div className=\"w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex\">\r\n          {Array.isArray(bar) ? (\r\n            bar.map((x, i) => (\r\n              <i key={i} style={{ width: totalBar ? `${(x.weight / totalBar) * 100}%` : 0, background: x.color }} />\r\n            ))\r\n          ) : (\r\n            <i style={{ width: `${Math.min(100, Math.max(0, bar))}%`, background: 'currentColor' }} className={VALUE_TONES[tone]} />\r\n          )}\r\n        </div>\r\n      )}\r\n      {footer && <div className=\"text-[11px] text-slate-400\">{footer}</div>}\r\n    </>\r\n  )\r\n\r\n  if (!onClick) {\r\n    return (\r\n      <div data-tip={hint} className={`${base} ${hint ? 'cursor-help' : ''}`}>\r\n        {content}\r\n      </div>\r\n    )\r\n  }\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={onClick}\r\n      data-tip={hint}\r\n      aria-pressed={active}\r\n      className={`${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${\r\n        active ? 'ring-2 ring-proef-blue border-proef-blue dark:border-sky-400' : ''\r\n      }`}\r\n    >\r\n      {(() => {\r\n        const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? 'text-proef-blue dark:text-sky-300' : 'text-slate-300 dark:text-slate-600'}`\r\n        return clickAction === 'open' ? <OpenIcon className={cls} /> : <FunnelIcon className={cls} />\r\n      })()}\r\n      {content}\r\n    </button>\r\n  )\r\n}\r\n\r\nexport { Kpi }\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Kpi.js","sources":["../../../../../../src/v1/primitives/display/Kpi/Kpi.tsx"],"sourcesContent":["import React from 'react'\r\n\r\n/**\r\n * Estados com significado: `ok` (verde), `risco` (âmbar), `incumprido` (vermelho).\r\n * Sem estado: `default` (texto normal) e `brand` (azul da marca).\r\n * A cor é a do número — não usar cores só para enfeitar: um indicador sem\r\n * significado bom/mau fica em `default`.\r\n */\r\nexport type KpiTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido'\r\n\r\nexport interface KpiProps {\r\n  label: React.ReactNode\r\n  value: React.ReactNode\r\n  tone?: KpiTone\r\n  /** Linha por baixo do valor (ex: \"de 120\", \"+12% do compromisso\"). */\r\n  detail?: React.ReactNode\r\n  /** Ícone antes do rótulo (ex: `<Inbox size={14} />`). */\r\n  icon?: React.ReactNode\r\n  /** Ponto colorido antes do rótulo — liga o indicador à cor que ele tem no mapa ou na legenda. */\r\n  dot?: string\r\n  /**\r\n   * Barra por baixo do valor. Um número é uma percentagem; uma lista é uma\r\n   * barra repartida, com cada troço proporcional ao seu peso.\r\n   *\r\n   * Serve para o indicador dizer a PROPORÇÃO e não só o valor: \"253 concluídas\"\r\n   * não diz nada sem saber de quantas.\r\n   */\r\n  bar?: number | { weight: number; color: string }[]\r\n  /** Linha pequena no fim, para um dado que acompanha mas não é o indicador. */\r\n  footer?: React.ReactNode\r\n  /**\r\n   * Faixa fina em vez de cartão: alinha à esquerda e corta a altura para metade.\r\n   * Para muitos indicadores que empurrariam o conteúdo para fora do ecrã.\r\n   */\r\n  dense?: boolean\r\n  /** Fundo no tom claro da cor, em vez de só o número colorido. */\r\n  tinted?: boolean\r\n  /** Clicável (ex: filtra a tabela). Mostra o funil no canto (ou a seta, com `clickAction=\"open\"`). */\r\n  onClick?: () => void\r\n  /** O que o clique faz: `filter` (funil, por omissão) ou `open` (seta: abre uma lista ou um detalhe, não filtra). */\r\n  clickAction?: 'filter' | 'open'\r\n  /** Filtro ativo (Kpi clicável selecionado): contorno azul. */\r\n  active?: boolean\r\n  /** Explicação no tooltip (camada `data-tip`), ex: \"Filtrar a tabela\" ou como o valor é calculado. */\r\n  hint?: string\r\n  className?: string\r\n  /** @deprecated Nome antigo (Legacy) de `detail`. */\r\n  delta?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `tinted`. */\r\n  bgTint?: boolean\r\n  /** @deprecated Nome antigo (Legacy) de `bar`. */\r\n  barra?: number | { peso: number; cor: string }[]\r\n  /** @deprecated Nome antigo (Legacy) de `footer`. */\r\n  rodape?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `dense`. */\r\n  denso?: boolean\r\n}\r\n\r\nconst VALUE_TONES: Record<KpiTone, string> = {\r\n  default: 'text-slate-800 dark:text-slate-100',\r\n  brand: 'text-proef-blue dark:text-sky-300',\r\n  ok: 'text-ok',\r\n  risco: 'text-risco',\r\n  incumprido: 'text-incumprido',\r\n}\r\n\r\nconst TINTS: Record<KpiTone, string> = {\r\n  default: 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700',\r\n  brand: 'bg-proef-blue/10 border-transparent dark:bg-sky-500/15',\r\n  ok: 'bg-ok-bg border-transparent',\r\n  risco: 'bg-risco-bg border-transparent',\r\n  incumprido: 'bg-incumprido-bg border-transparent',\r\n}\r\n\r\nfunction OpenIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg aria-hidden viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <path d=\"M7 17 17 7M7 7h10v10\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\nfunction FunnelIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg\r\n      aria-hidden\r\n      viewBox=\"0 0 24 24\"\r\n      className={className}\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth={2}\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    >\r\n      <path d=\"M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/**\r\n * Indicador: um número com o seu rótulo (ex: \"Em progresso 13\"). Quando é\r\n * clicável filtra a vista e mostra-o com o funil; `active` marca o filtro\r\n * aplicado. Dispor vários numa grelha (`grid gap-3`).\r\n */\r\nexport default function Kpi({\r\n  label,\r\n  value,\r\n  tone = 'default',\r\n  detail: detailProp,\r\n  icon,\r\n  dot,\r\n  bar: barProp,\r\n  footer: footerProp,\r\n  dense: denseProp,\r\n  tinted: tintedProp,\r\n  onClick,\r\n  clickAction = 'filter',\r\n  active = false,\r\n  hint,\r\n  className = '',\r\n  delta,\r\n  bgTint,\r\n  barra,\r\n  rodape,\r\n  denso,\r\n}: KpiProps) {\r\n  // A Legacy usa este mesmo Kpi com os nomes antigos.\r\n  const detail = detailProp ?? delta\r\n  const footer = footerProp ?? rodape\r\n  const dense = denseProp ?? denso ?? false\r\n  const tinted = tintedProp ?? bgTint ?? false\r\n  const bar = barProp ?? (Array.isArray(barra) ? barra.map((x) => ({ weight: x.peso, color: x.cor })) : barra)\r\n  const surface = tinted ? TINTS[tone] : TINTS.default\r\n  const layout = dense\r\n    ? 'rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5'\r\n    : // No telemóvel mais baixo e estreito: dois ou três lado a lado sem cada um ocupar meio ecrã de altura.\r\n      'rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5 max-sm:min-h-[64px] max-sm:px-2 max-sm:py-2 max-sm:gap-1'\r\n  const base = `relative border ${surface} ${layout} ${className}`\r\n  const totalBar = Array.isArray(bar) ? bar.reduce((s, x) => s + x.weight, 0) : 0\r\n\r\n  const content = (\r\n    <>\r\n      <div className={`${dense ? 'text-[10px] uppercase tracking-wide' : 'text-xs'} text-slate-500 dark:text-slate-400 flex items-center gap-1.5 max-w-full`}>\r\n        {icon ? (\r\n          <span aria-hidden className=\"shrink-0 flex\">{icon}</span>\r\n        ) : (\r\n          dot && <i aria-hidden className=\"w-2 h-2 rounded-full inline-block shrink-0\" style={{ background: dot }} />\r\n        )}\r\n        <span className=\"truncate\">{label}</span>\r\n      </div>\r\n      {/* Em denso o valor e o secundário partilham a linha: é o que poupa altura sem tirar informação. */}\r\n      <div className={dense ? 'flex items-baseline gap-1.5' : ''}>\r\n        <span className={`${dense ? 'text-xl' : 'text-2xl max-sm:text-xl'} font-semibold ${VALUE_TONES[tone]}`}>{value}</span>\r\n        {detail && dense && <span className=\"text-[11px] text-slate-400 truncate\">{detail}</span>}\r\n      </div>\r\n      {detail && !dense && <div className=\"text-[11.5px] text-slate-400\">{detail}</div>}\r\n      {bar != null && (\r\n        <div className=\"w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex\">\r\n          {Array.isArray(bar) ? (\r\n            bar.map((x, i) => (\r\n              <i key={i} style={{ width: totalBar ? `${(x.weight / totalBar) * 100}%` : 0, background: x.color }} />\r\n            ))\r\n          ) : (\r\n            <i style={{ width: `${Math.min(100, Math.max(0, bar))}%`, background: 'currentColor' }} className={VALUE_TONES[tone]} />\r\n          )}\r\n        </div>\r\n      )}\r\n      {footer && <div className=\"text-[11px] text-slate-400\">{footer}</div>}\r\n    </>\r\n  )\r\n\r\n  if (!onClick) {\r\n    return (\r\n      <div data-tip={hint} className={`${base} ${hint ? 'cursor-help' : ''}`}>\r\n        {content}\r\n      </div>\r\n    )\r\n  }\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={onClick}\r\n      data-tip={hint}\r\n      aria-pressed={active}\r\n      className={`${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${\r\n        active ? 'ring-2 ring-proef-blue border-proef-blue dark:border-sky-400' : ''\r\n      }`}\r\n    >\r\n      {(() => {\r\n        // No telemóvel sem o ícone do canto: em cartões estreitos ficava por cima do rótulo; o filtro aplicado\r\n        // continua a ver-se pelo contorno azul.\r\n        const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 max-sm:hidden ${active ? 'text-proef-blue dark:text-sky-300' : 'text-slate-300 dark:text-slate-600'}`\r\n        return clickAction === 'open' ? <OpenIcon className={cls} /> : <FunnelIcon className={cls} />\r\n      })()}\r\n      {content}\r\n    </button>\r\n  )\r\n}\r\n\r\nexport { Kpi }\r\n"],"names":[],"mappings":";AA0DA,MAAM,cAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AACd;AAEA,MAAM,QAAiC;AAAA,EACrC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AACd;AAEA,SAAS,SAAS,EAAE,aAAoC;AACtD,SACE,oBAAC,SAAI,eAAW,MAAC,SAAQ,aAAY,WAAsB,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAChJ,UAAA,oBAAC,QAAA,EAAK,GAAE,uBAAA,CAAuB,EAAA,CACjC;AAEJ;AAEA,SAAS,WAAW,EAAE,aAAoC;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,SAAQ;AAAA,MACR;AAAA,MACA,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MAEf,UAAA,oBAAC,QAAA,EAAK,GAAE,mCAAA,CAAmC;AAAA,IAAA;AAAA,EAAA;AAGjD;AAOA,SAAwB,IAAI;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AAEX,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,cAAc;AAC7B,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,SAAS,cAAc,UAAU;AACvC,QAAM,MAAM,YAAY,MAAM,QAAQ,KAAK,IAAI,MAAM,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE,IAAA,EAAM,IAAI;AACtG,QAAM,UAAU,SAAS,MAAM,IAAI,IAAI,MAAM;AAC7C,QAAM,SAAS,QACX;AAAA;AAAA,IAEA;AAAA;AACJ,QAAM,OAAO,mBAAmB,OAAO,IAAI,MAAM,IAAI,SAAS;AAC9D,QAAM,WAAW,MAAM,QAAQ,GAAG,IAAI,IAAI,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,QAAQ,CAAC,IAAI;AAE9E,QAAM,UACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,wCAAwC,SAAS,4EACzE,UAAA;AAAA,MAAA,2BACE,QAAA,EAAK,eAAW,MAAC,WAAU,iBAAiB,gBAAK,IAElD,2BAAQ,KAAA,EAAE,eAAW,MAAC,WAAU,8CAA6C,OAAO,EAAE,YAAY,OAAO;AAAA,MAE3G,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,IAAA,GACpC;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAW,QAAQ,gCAAgC,IACtD,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,QAAQ,YAAY,yBAAyB,kBAAkB,YAAY,IAAI,CAAC,IAAK,UAAA,MAAA,CAAM;AAAA,MAC9G,UAAU,SAAS,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,OAAA,CAAO;AAAA,IAAA,GACpF;AAAA,IACC,UAAU,CAAC,6BAAU,OAAA,EAAI,WAAU,gCAAgC,UAAA,QAAO;AAAA,IAC1E,OAAO,QACN,oBAAC,OAAA,EAAI,WAAU,0EACZ,UAAA,MAAM,QAAQ,GAAG,IAChB,IAAI,IAAI,CAAC,GAAG,MACV,oBAAC,KAAA,EAAU,OAAO,EAAE,OAAO,WAAW,GAAI,EAAE,SAAS,WAAY,GAAG,MAAM,GAAG,YAAY,EAAE,MAAA,EAAM,GAAzF,CAA4F,CACrG,IAED,oBAAC,KAAA,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,GAAG,CAAC,CAAC,KAAK,YAAY,eAAA,GAAkB,WAAW,YAAY,IAAI,EAAA,CAAG,EAAA,CAE1H;AAAA,IAED,UAAU,oBAAC,OAAA,EAAI,WAAU,8BAA8B,UAAA,OAAA,CAAO;AAAA,EAAA,GACjE;AAGF,MAAI,CAAC,SAAS;AACZ,WACE,oBAAC,OAAA,EAAI,YAAU,MAAM,WAAW,GAAG,IAAI,IAAI,OAAO,gBAAgB,EAAE,IACjE,UAAA,SACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,YAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,IAAI,8MAChB,SAAS,iEAAiE,EAC5E;AAAA,MAEE,UAAA;AAAA,QAAA,uBAAM;AAGN,gBAAM,MAAM,wDAAwD,SAAS,sCAAsC,oCAAoC;AACvJ,iBAAO,gBAAgB,SAAS,oBAAC,UAAA,EAAS,WAAW,KAAK,IAAK,oBAAC,YAAA,EAAW,WAAW,IAAA,CAAK;AAAA,QAC7F,GAAA;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js

@@ -45,7 +45,12 @@ const SelectInput = forwardRef(function SelectInput2({
   pillClassName = "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200",
   tall = false,
   labels,
-  className = ""
+  className = "",
+  multiple = false,
+  values: controlledValues,
+  defaultValues = [],
+  onValuesChange,
+  allLabel
 }, ref) {
   const L = { ...DEFAULT_SELECT_LABELS, ...labels };
   const field = useField();
@@ -54,11 +59,14 @@ const SelectInput = forwardRef(function SelectInput2({
   useImperativeHandle(ref, () => p.triggerRef.current);
   const [own, setOwn] = useState(defaultValue);
   const value = controlled ?? own;
+  const [ownValues, setOwnValues] = useState(defaultValues);
+  const picked = controlledValues ?? ownValues;
   const list = useMemo(() => {
     const base = options ? options.map((o) => typeof o === "string" ? { value: o, label: o } : o) : optionsFromChildren(children);
+    if (multiple) return base;
     const empty = emptyOption ?? (placeholder !== void 0 && placeholderOption ? placeholder : void 0);
     return empty !== void 0 && !base.some((o) => o.value === "") ? [{ value: "", label: empty }, ...base] : base;
-  }, [options, children, emptyOption, placeholder, placeholderOption]);
+  }, [options, children, emptyOption, placeholder, placeholderOption, multiple]);
   const [query, setQuery] = useState("");
   const withSearch = searchable ?? list.length > 10;
   const visible = useMemo(() => {
@@ -71,7 +79,7 @@ const SelectInput = forwardRef(function SelectInput2({
   useEffect(() => {
     if (!p.open) return;
     setQuery("");
-    setActive(Math.max(0, list.findIndex((o) => o.value === value)));
+    setActive(Math.max(0, list.findIndex((o) => multiple ? picked.includes(o.value) : o.value === value)));
     if (withSearch) setTimeout(() => searchRef.current?.focus(), 0);
   }, [p.open]);
   useEffect(() => {
@@ -79,6 +87,15 @@ const SelectInput = forwardRef(function SelectInput2({
   }, [active, p.open, p.panelRef]);
   const choose = (o) => {
     if (o.disabled) return;
+    if (multiple) {
+      const set = new Set(picked);
+      if (set.has(o.value)) set.delete(o.value);
+      else set.add(o.value);
+      const next = list.filter((x) => set.has(x.value)).map((x) => x.value);
+      if (controlledValues === void 0) setOwnValues(next);
+      onValuesChange?.(next);
+      return;
+    }
     p.close();
     p.triggerRef.current?.focus();
     if (o.value === value) return;
@@ -126,7 +143,10 @@ const SelectInput = forwardRef(function SelectInput2({
     }
   };
   const pill = variant === "pill";
-  const showsPlaceholder = !chosen || chosen.value === "" && placeholder !== void 0 && emptyOption === void 0;
+  const pickedOptions = list.filter((o) => picked.includes(o.value));
+  const multiText = allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : pickedOptions.map((o) => o.label).join(", ");
+  const showsPlaceholder = multiple ? pickedOptions.length === 0 : !chosen || chosen.value === "" && placeholder !== void 0 && emptyOption === void 0;
+  const buttonText = multiple ? showsPlaceholder ? placeholder ?? "" : multiText : showsPlaceholder ? placeholder ?? chosen?.label ?? "" : chosen?.label;
   return /* @__PURE__ */ jsxs("div", { className: `relative min-w-0 ${className}`, onKeyDown: keys, children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -147,12 +167,12 @@ const SelectInput = forwardRef(function SelectInput2({
         },
         className: pill ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}` : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? "h-[38px]" : "h-control"} ${fieldBoxClasses}`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: `truncate ${showsPlaceholder && !pill ? "text-muted-foreground/70" : ""}`, children: showsPlaceholder ? placeholder ?? chosen?.label ?? "" : chosen?.label }),
+          /* @__PURE__ */ jsx("span", { className: `truncate ${showsPlaceholder && !pill ? "text-muted-foreground/70" : ""}`, children: buttonText }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: `shrink-0 ${pill ? "opacity-60" : "text-muted-foreground"}` })
         ]
       }
     ),
-    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: multiple ? picked.join(",") : value }),
     p.open && createPortal(
       /* @__PURE__ */ jsxs("div", { ref: p.panelRef, style: p.style, className: PANEL_CLASS, onClick: (e) => e.stopPropagation(), onKeyDown: keys, children: [
         withSearch && /* @__PURE__ */ jsx("div", { className: "px-2 pt-0.5 pb-1", children: /* @__PURE__ */ jsx(
@@ -170,10 +190,10 @@ const SelectInput = forwardRef(function SelectInput2({
             className: "h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
           }
         ) }),
-        /* @__PURE__ */ jsxs("ul", { role: "listbox", "aria-label": ariaLabel, children: [
+        /* @__PURE__ */ jsxs("ul", { role: "listbox", "aria-label": ariaLabel, "aria-multiselectable": multiple || void 0, children: [
           visible.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-slate-400", children: L.noResults }),
           visible.map((o, i) => {
-            const selected = o.value === value;
+            const selected = multiple ? picked.includes(o.value) : o.value === value;
             return /* @__PURE__ */ jsxs(
               "li",
               {

package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n  value: string\r\n  label: string\r\n  /** Texto pequeno por baixo do rótulo, na lista. */\r\n  description?: string\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n  /** Texto da caixa de pesquisa. */\r\n  search: string\r\n  /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n  searchIn: string\r\n  noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n  search: 'Search…',\r\n  searchIn: 'Search in {label}',\r\n  noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n  /** A opção escolhida (controlado). `''` = nenhuma. */\r\n  value?: string\r\n  defaultValue?: string\r\n  /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n  options?: readonly (string | SelectOption)[]\r\n  /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n  children?: React.ReactNode\r\n  /** Recebe o valor escolhido. */\r\n  onValueChange?: (value: string) => void\r\n  /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n  /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n  placeholder?: string\r\n  /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n  placeholderOption?: boolean\r\n  /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n  emptyOption?: string\r\n  /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n  searchable?: boolean\r\n  disabled?: boolean\r\n  required?: boolean\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  id?: string\r\n  /** Nome no formulário (vai num campo escondido). */\r\n  name?: string\r\n  'aria-label'?: string\r\n  'aria-labelledby'?: string\r\n  /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n  variant?: 'field' | 'pill'\r\n  /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n  pillClassName?: string\r\n  /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n  tall?: boolean\r\n  labels?: Partial<SelectInputLabels>\r\n  /** Classes da caixa à volta (ex: a largura). */\r\n  className?: string\r\n}\r\n\r\nconst Check = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"M20 6 9 17l-5-5\" />\r\n  </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n  const out: SelectOption[] = []\r\n  React.Children.forEach(children, (child) => {\r\n    if (!React.isValidElement(child)) return\r\n    const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n    if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n    if (child.type !== 'option') return\r\n    const text = React.Children.toArray(props.children).join('')\r\n    out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n  })\r\n  return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n  {\r\n    value: controlled,\r\n    defaultValue = '',\r\n    options,\r\n    children,\r\n    onValueChange,\r\n    onChange,\r\n    placeholder,\r\n    placeholderOption = true,\r\n    emptyOption,\r\n    searchable,\r\n    disabled = false,\r\n    required,\r\n    invalid,\r\n    id,\r\n    name,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    variant = 'field',\r\n    pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n    tall = false,\r\n    labels,\r\n    className = '',\r\n  },\r\n  ref,\r\n) {\r\n  const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n  const field = useField()\r\n  const p = useFloatingPanel('left')\r\n  // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n  // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n  const dialogContainer = useDialogContainer()\r\n  useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n  const [own, setOwn] = useState(defaultValue)\r\n  const value = controlled ?? own\r\n\r\n  const list = useMemo<SelectOption[]>(() => {\r\n    const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n    const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n    return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n  }, [options, children, emptyOption, placeholder, placeholderOption])\r\n\r\n  const [query, setQuery] = useState('')\r\n  const withSearch = searchable ?? list.length > 10\r\n  const visible = useMemo(() => {\r\n    const q = query.trim().toLowerCase()\r\n    return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list\r\n  }, [list, query])\r\n  const [active, setActive] = useState(0)\r\n  const searchRef = useRef<HTMLInputElement>(null)\r\n  const chosen = list.find((o) => o.value === value)\r\n\r\n  // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n  useEffect(() => {\r\n    if (!p.open) return\r\n    setQuery('')\r\n    setActive(Math.max(0, list.findIndex((o) => o.value === value)))\r\n    if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n  }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // O item ativo fica sempre à vista ao navegar com o teclado.\r\n  useEffect(() => {\r\n    if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n  }, [active, p.open, p.panelRef])\r\n\r\n  const choose = (o: SelectOption) => {\r\n    if (o.disabled) return\r\n    p.close()\r\n    p.triggerRef.current?.focus()\r\n    if (o.value === value) return\r\n    if (controlled === undefined) setOwn(o.value)\r\n    onValueChange?.(o.value)\r\n    if (onChange) {\r\n      const target = { value: o.value, name } as HTMLSelectElement\r\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n    }\r\n  }\r\n\r\n  const keys = (e: React.KeyboardEvent) => {\r\n    if (!p.open) {\r\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n        e.preventDefault()\r\n        p.setOpen(true)\r\n      }\r\n      return\r\n    }\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.close()\r\n      p.triggerRef.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.min(visible.length - 1, i + 1))\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.max(0, i - 1))\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault()\r\n      setActive(0)\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault()\r\n      setActive(visible.length - 1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const o = visible[active]\r\n      if (o) choose(o)\r\n    } else if (e.key === 'Tab') {\r\n      p.close()\r\n    } else if (!withSearch && e.key.length === 1) {\r\n      // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n      const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n      if (i >= 0) setActive(i)\r\n    }\r\n  }\r\n\r\n  const pill = variant === 'pill'\r\n  const showsPlaceholder = !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n\r\n  return (\r\n    <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n      <button\r\n        ref={p.triggerRef}\r\n        id={id ?? field.id}\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={p.open}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-invalid={invalid || undefined}\r\n        aria-required={(required ?? field.required) || undefined}\r\n        onClick={(e) => {\r\n          // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n          e.stopPropagation()\r\n          p.setOpen((o) => !o)\r\n        }}\r\n        className={\r\n          pill\r\n            ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n            : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n        }\r\n      >\r\n        <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n          {showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label}\r\n        </span>\r\n        <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n      </button>\r\n      {name && <input type=\"hidden\" name={name} value={value} />}\r\n      {p.open &&\r\n        createPortal(\r\n          <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n            {withSearch && (\r\n              <div className=\"px-2 pt-0.5 pb-1\">\r\n                <input\r\n                  ref={searchRef}\r\n                  type=\"search\"\r\n                  value={query}\r\n                  onChange={(e) => {\r\n                    setQuery(e.target.value)\r\n                    setActive(0)\r\n                  }}\r\n                  placeholder={L.search}\r\n                  aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n                  className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n                />\r\n              </div>\r\n            )}\r\n            <ul role=\"listbox\" aria-label={ariaLabel}>\r\n              {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n              {visible.map((o, i) => {\r\n                const selected = o.value === value\r\n                return (\r\n                  <li\r\n                    key={o.value || '__empty'}\r\n                    role=\"option\"\r\n                    aria-selected={selected}\r\n                    aria-disabled={o.disabled || undefined}\r\n                    data-index={i}\r\n                    onMouseEnter={() => setActive(i)}\r\n                    onClick={() => choose(o)}\r\n                    className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n                  >\r\n                    <span className=\"min-w-0 flex-1\">\r\n                      <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n                      {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n                    </span>\r\n                    <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n                  </li>\r\n                )\r\n              })}\r\n            </ul>\r\n          </div>,\r\n          dialogContainer ?? document.body,\r\n        )}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}
+{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n  value: string\r\n  label: string\r\n  /** Texto pequeno por baixo do rótulo, na lista. */\r\n  description?: string\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n  /** Texto da caixa de pesquisa. */\r\n  search: string\r\n  /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n  searchIn: string\r\n  noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n  search: 'Search…',\r\n  searchIn: 'Search in {label}',\r\n  noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n  /** A opção escolhida (controlado). `''` = nenhuma. */\r\n  value?: string\r\n  defaultValue?: string\r\n  /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n  options?: readonly (string | SelectOption)[]\r\n  /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n  children?: React.ReactNode\r\n  /** Recebe o valor escolhido. */\r\n  onValueChange?: (value: string) => void\r\n  /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n  /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n  placeholder?: string\r\n  /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n  placeholderOption?: boolean\r\n  /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n  emptyOption?: string\r\n  /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n  searchable?: boolean\r\n  disabled?: boolean\r\n  required?: boolean\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  id?: string\r\n  /** Nome no formulário (vai num campo escondido). */\r\n  name?: string\r\n  'aria-label'?: string\r\n  'aria-labelledby'?: string\r\n  /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n  variant?: 'field' | 'pill'\r\n  /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n  pillClassName?: string\r\n  /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n  tall?: boolean\r\n  labels?: Partial<SelectInputLabels>\r\n  /** Classes da caixa à volta (ex: a largura). */\r\n  className?: string\r\n  /**\r\n   * Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.\r\n   * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.\r\n   */\r\n  multiple?: boolean\r\n  /** As escolhidas, com `multiple` (controlado). */\r\n  values?: string[]\r\n  defaultValues?: string[]\r\n  /** Recebe as escolhidas, com `multiple`, pela ordem das opções. */\r\n  onValuesChange?: (values: string[]) => void\r\n  /** Com `multiple`: o texto do botão quando estão todas escolhidas (ex: \"Todos os tipos\"). */\r\n  allLabel?: string\r\n}\r\n\r\nconst Check = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"M20 6 9 17l-5-5\" />\r\n  </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n  const out: SelectOption[] = []\r\n  React.Children.forEach(children, (child) => {\r\n    if (!React.isValidElement(child)) return\r\n    const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n    if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n    if (child.type !== 'option') return\r\n    const text = React.Children.toArray(props.children).join('')\r\n    out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n  })\r\n  return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n  {\r\n    value: controlled,\r\n    defaultValue = '',\r\n    options,\r\n    children,\r\n    onValueChange,\r\n    onChange,\r\n    placeholder,\r\n    placeholderOption = true,\r\n    emptyOption,\r\n    searchable,\r\n    disabled = false,\r\n    required,\r\n    invalid,\r\n    id,\r\n    name,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    variant = 'field',\r\n    pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n    tall = false,\r\n    labels,\r\n    className = '',\r\n    multiple = false,\r\n    values: controlledValues,\r\n    defaultValues = [],\r\n    onValuesChange,\r\n    allLabel,\r\n  },\r\n  ref,\r\n) {\r\n  const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n  const field = useField()\r\n  const p = useFloatingPanel('left')\r\n  // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n  // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n  const dialogContainer = useDialogContainer()\r\n  useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n  const [own, setOwn] = useState(defaultValue)\r\n  const value = controlled ?? own\r\n  const [ownValues, setOwnValues] = useState(defaultValues)\r\n  const picked = controlledValues ?? ownValues\r\n\r\n  const list = useMemo<SelectOption[]>(() => {\r\n    const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n    // Na escolha múltipla não há opção vazia: desfazer é desmarcar.\r\n    if (multiple) return base\r\n    const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n    return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n  }, [options, children, emptyOption, placeholder, placeholderOption, multiple])\r\n\r\n  const [query, setQuery] = useState('')\r\n  const withSearch = searchable ?? list.length > 10\r\n  const visible = useMemo(() => {\r\n    const q = query.trim().toLowerCase()\r\n    return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list\r\n  }, [list, query])\r\n  const [active, setActive] = useState(0)\r\n  const searchRef = useRef<HTMLInputElement>(null)\r\n  const chosen = list.find((o) => o.value === value)\r\n\r\n  // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n  useEffect(() => {\r\n    if (!p.open) return\r\n    setQuery('')\r\n    setActive(Math.max(0, list.findIndex((o) => (multiple ? picked.includes(o.value) : o.value === value))))\r\n    if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n  }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // O item ativo fica sempre à vista ao navegar com o teclado.\r\n  useEffect(() => {\r\n    if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n  }, [active, p.open, p.panelRef])\r\n\r\n  const choose = (o: SelectOption) => {\r\n    if (o.disabled) return\r\n    if (multiple) {\r\n      // Marca ou desmarca, sem fechar; a ordem é a das opções.\r\n      const set = new Set(picked)\r\n      if (set.has(o.value)) set.delete(o.value)\r\n      else set.add(o.value)\r\n      const next = list.filter((x) => set.has(x.value)).map((x) => x.value)\r\n      if (controlledValues === undefined) setOwnValues(next)\r\n      onValuesChange?.(next)\r\n      return\r\n    }\r\n    p.close()\r\n    p.triggerRef.current?.focus()\r\n    if (o.value === value) return\r\n    if (controlled === undefined) setOwn(o.value)\r\n    onValueChange?.(o.value)\r\n    if (onChange) {\r\n      const target = { value: o.value, name } as HTMLSelectElement\r\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n    }\r\n  }\r\n\r\n  const keys = (e: React.KeyboardEvent) => {\r\n    if (!p.open) {\r\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n        e.preventDefault()\r\n        p.setOpen(true)\r\n      }\r\n      return\r\n    }\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.close()\r\n      p.triggerRef.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.min(visible.length - 1, i + 1))\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.max(0, i - 1))\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault()\r\n      setActive(0)\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault()\r\n      setActive(visible.length - 1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const o = visible[active]\r\n      if (o) choose(o)\r\n    } else if (e.key === 'Tab') {\r\n      p.close()\r\n    } else if (!withSearch && e.key.length === 1) {\r\n      // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n      const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n      if (i >= 0) setActive(i)\r\n    }\r\n  }\r\n\r\n  const pill = variant === 'pill'\r\n  const pickedOptions = list.filter((o) => picked.includes(o.value))\r\n  const multiText =\r\n    allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : pickedOptions.map((o) => o.label).join(', ')\r\n  const showsPlaceholder = multiple\r\n    ? pickedOptions.length === 0\r\n    : !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n  const buttonText = multiple\r\n    ? showsPlaceholder ? (placeholder ?? '') : multiText\r\n    : showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label\r\n\r\n  return (\r\n    <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n      <button\r\n        ref={p.triggerRef}\r\n        id={id ?? field.id}\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={p.open}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-invalid={invalid || undefined}\r\n        aria-required={(required ?? field.required) || undefined}\r\n        onClick={(e) => {\r\n          // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n          e.stopPropagation()\r\n          p.setOpen((o) => !o)\r\n        }}\r\n        className={\r\n          pill\r\n            ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n            : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n        }\r\n      >\r\n        <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n          {buttonText}\r\n        </span>\r\n        <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n      </button>\r\n      {name && <input type=\"hidden\" name={name} value={multiple ? picked.join(',') : value} />}\r\n      {p.open &&\r\n        createPortal(\r\n          <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n            {withSearch && (\r\n              <div className=\"px-2 pt-0.5 pb-1\">\r\n                <input\r\n                  ref={searchRef}\r\n                  type=\"search\"\r\n                  value={query}\r\n                  onChange={(e) => {\r\n                    setQuery(e.target.value)\r\n                    setActive(0)\r\n                  }}\r\n                  placeholder={L.search}\r\n                  aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n                  className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n                />\r\n              </div>\r\n            )}\r\n            <ul role=\"listbox\" aria-label={ariaLabel} aria-multiselectable={multiple || undefined}>\r\n              {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n              {visible.map((o, i) => {\r\n                const selected = multiple ? picked.includes(o.value) : o.value === value\r\n                return (\r\n                  <li\r\n                    key={o.value || '__empty'}\r\n                    role=\"option\"\r\n                    aria-selected={selected}\r\n                    aria-disabled={o.disabled || undefined}\r\n                    data-index={i}\r\n                    onMouseEnter={() => setActive(i)}\r\n                    onClick={() => choose(o)}\r\n                    className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n                  >\r\n                    <span className=\"min-w-0 flex-1\">\r\n                      <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n                      {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n                    </span>\r\n                    <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n                  </li>\r\n                )\r\n              })}\r\n            </ul>\r\n          </div>,\r\n          dialogContainer ?? document.body,\r\n        )}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}