@nextelco/common-ui 2.1.106 → 2.1.107

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 } from 'react'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldClasses, useField } from '../field'\r\n\r\nexport interface SelectInputProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  /** Texto da primeira opção, vazia (ex: \"Selecionar\"). */\r\n  placeholder?: string\r\n}\r\n\r\n/**\r\n * Lista de escolha (o `<select>` do browser, com o aspeto dos outros campos).\r\n * As opções são `<option>` como num `<select>` normal.\r\n *\r\n * O `className` aplica-se à caixa à volta (para a largura, por exemplo).\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica\r\n * ligado à etiqueta automaticamente.\r\n *\r\n * **Aceita os atributos HTML do [&lt;select&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select)**, com o mesmo comportamento: `value`/`onChange`, `required`, `disabled`, `name`, `ref`, ...\r\n * Só os próprios do V1 aparecem na tabela abaixo.\r\n * Diferença: `placeholder` acrescenta uma primeira opção vazia (o `<select>` HTML não tem placeholder).\r\n */\r\nconst SelectInput = forwardRef<HTMLSelectElement, SelectInputProps>(function SelectInput(\r\n  { invalid, placeholder, className = '', id, required, children, ...props },\r\n  ref,\r\n) {\r\n  const field = useField()\r\n  return (\r\n    <div className={`relative min-w-0 ${className}`}>\r\n      <select\r\n        ref={ref}\r\n        id={id ?? field.id}\r\n        required={required ?? field.required}\r\n        aria-invalid={invalid || undefined}\r\n        className={`h-control cursor-pointer appearance-none pr-7 ${fieldClasses}`}\r\n        {...props}\r\n      >\r\n        {placeholder !== undefined && <option value=\"\">{placeholder}</option>}\r\n        {children}\r\n      </select>\r\n      <ChevronDownIcon size={14} className=\"pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground\" />\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SelectInput\r\n"],"names":["SelectInput"],"mappings":";;;;AAwBA,MAAM,cAAc,WAAgD,SAASA,aAC3E,EAAE,SAAS,aAAa,YAAY,IAAI,IAAI,UAAU,UAAU,GAAG,MAAA,GACnE,KACA;AACA,QAAM,QAAQ,SAAA;AACd,SACE,qBAAC,OAAA,EAAI,WAAW,oBAAoB,SAAS,IAC3C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM,MAAM;AAAA,QAChB,UAAU,YAAY,MAAM;AAAA,QAC5B,gBAAc,WAAW;AAAA,QACzB,WAAW,iDAAiD,YAAY;AAAA,QACvE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gBAAgB,UAAa,oBAAC,UAAA,EAAO,OAAM,IAAI,UAAA,aAAY;AAAA,UAC3D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,oBAAC,iBAAA,EAAgB,MAAM,IAAI,WAAU,sFAAA,CAAsF;AAAA,EAAA,GAC7H;AAEJ,CAAC;"}
+{"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\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  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          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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"}

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

@@ -1,10 +1,12 @@
-import { createContext, useContext } from "react";
-const fieldClasses = "block w-full min-w-0 rounded-lg border border-border bg-card px-2.5 text-control text-foreground outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 focus:border-primary/40 focus:ring-3 focus:ring-primary/10 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground";
+import { useContext, createContext } from "react";
+const fieldBoxClasses = "rounded-lg border border-border bg-card px-2.5 text-control text-foreground outline-none dark:border-slate-600 dark:bg-slate-900 transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 focus:border-primary/40 focus:ring-3 focus:ring-primary/10 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground";
+const fieldClasses = "block w-full min-w-0 " + fieldBoxClasses;
 const readOnlyClasses = "read-only:cursor-default read-only:bg-muted";
 const FieldContext = createContext({});
 const useField = () => useContext(FieldContext);
 export {
   FieldContext,
+  fieldBoxClasses,
   fieldClasses,
   readOnlyClasses,
   useField

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../../../../src/v1/primitives/forms/field.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\n\r\n/**\r\n * Aspeto comum dos campos (TextInput, SelectInput, TextArea): altura `--spacing-control`, borda\r\n * clara, anel suave no foco, vermelho quando inválido (`aria-invalid`) e cinzento\r\n * quando desativado.\r\n */\r\nexport const fieldClasses =\r\n  'block w-full min-w-0 rounded-lg border border-border bg-card px-2.5 text-control text-foreground outline-none ' +\r\n  'transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 ' +\r\n  'focus:border-primary/40 focus:ring-3 focus:ring-primary/10 ' +\r\n  'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 ' +\r\n  'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground'\r\n\r\n/** Só para campos de texto: um `<select>` também conta como `:read-only` no browser. */\r\nexport const readOnlyClasses = 'read-only:cursor-default read-only:bg-muted'\r\n\r\n/**\r\n * Dado pelo FormField ao campo lá dentro: o `id` que liga a etiqueta ao campo e\r\n * se é obrigatório. Fora de um FormField, os campos funcionam sozinhos.\r\n */\r\nexport const FieldContext = createContext<{ id?: string; required?: boolean }>({})\r\n\r\nexport const useField = () => useContext(FieldContext)\r\n"],"names":[],"mappings":";AAOO,MAAM,eACX;AAOK,MAAM,kBAAkB;AAMxB,MAAM,eAAe,cAAmD,CAAA,CAAE;AAE1E,MAAM,WAAW,MAAM,WAAW,YAAY;"}
+{"version":3,"file":"field.js","sources":["../../../../../src/v1/primitives/forms/field.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\n\r\n/**\r\n * Aspeto comum dos campos (TextInput, SelectInput, TextArea): altura `--spacing-control`, borda\r\n * clara, anel suave no foco, vermelho quando inválido (`aria-invalid`) e cinzento\r\n * quando desativado.\r\n */\r\n// Em escuro: fundo um pouco mais claro do que a página e borda visível (como a CaixaPesquisa dos portais), senão\r\n// o campo desaparece no fundo.\r\n/** O aspeto do campo sem o `display`/largura (para quem é flex, ex: o botão do SelectInput). */\r\nexport const fieldBoxClasses =\r\n  'rounded-lg border border-border bg-card px-2.5 text-control text-foreground outline-none ' +\r\n  'dark:border-slate-600 dark:bg-slate-900 ' +\r\n  'transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 ' +\r\n  'focus:border-primary/40 focus:ring-3 focus:ring-primary/10 ' +\r\n  'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 ' +\r\n  'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground'\r\n\r\nexport const fieldClasses = 'block w-full min-w-0 ' + fieldBoxClasses\r\n\r\n/** Só para campos de texto: um `<select>` também conta como `:read-only` no browser. */\r\nexport const readOnlyClasses = 'read-only:cursor-default read-only:bg-muted'\r\n\r\n/**\r\n * Dado pelo FormField ao campo lá dentro: o `id` que liga a etiqueta ao campo e\r\n * se é obrigatório. Fora de um FormField, os campos funcionam sozinhos.\r\n */\r\nexport const FieldContext = createContext<{ id?: string; required?: boolean }>({})\r\n\r\nexport const useField = () => useContext(FieldContext)\r\n"],"names":[],"mappings":";AAUO,MAAM,kBACX;AAOK,MAAM,eAAe,0BAA0B;AAG/C,MAAM,kBAAkB;AAMxB,MAAM,eAAe,cAAmD,CAAA,CAAE;AAE1E,MAAM,WAAW,MAAM,WAAW,YAAY;"}

package/dist/esm/v1/primitives/navigation/Tabs/Tabs.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { SEGMENTED } from "../../buttons/SegmentedControl/segmentedStyles.js";
+const STYLES = {
+  underline: {
+    list: "flex flex-wrap border-b border-border",
+    tab: "-mb-px h-11 border-0 border-b-[3px] px-4",
+    active: "border-primary text-primary dark:border-foreground dark:text-foreground",
+    idle: "border-transparent bg-transparent text-muted-foreground hover:text-primary dark:hover:text-foreground",
+    countActive: "bg-primary text-primary-foreground dark:bg-proef-blue dark:text-white"
+  },
+  // O mesmo aspeto do SegmentedControl (definido num só sítio).
+  segmented: {
+    list: SEGMENTED.list,
+    tab: "h-[26px] rounded-md border-0",
+    active: SEGMENTED.active,
+    idle: SEGMENTED.idle,
+    countActive: "bg-primary-foreground/20"
+  }
+};
+function Tabs(props) {
+  const { items, label, variant = "underline", iconOnly = false, className = "" } = props;
+  const refs = useRef([]);
+  const s = STYLES[variant];
+  const isActive = (id) => {
+    if (!props.multiple) return id === props.value;
+    if (props.allId !== void 0 && id === props.allId) return props.value.length === 0;
+    return props.value.includes(id);
+  };
+  const select = (id, additive) => {
+    if (!props.multiple) return props.onChange(id);
+    if (props.allId !== void 0 && id === props.allId) return props.onChange([], id);
+    if (!additive) return props.onChange([id], id);
+    props.onChange(props.value.includes(id) ? props.value.filter((v) => v !== id) : [...props.value, id], id);
+  };
+  const move = (from, step) => {
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+      const next = ((from + step * i) % n + n) % n;
+      if (!items[next].disabled) {
+        select(items[next].id, false);
+        refs.current[next]?.focus();
+        return;
+      }
+    }
+  };
+  const onKeyDown = (e, index) => {
+    if (e.key === "ArrowRight") move(index, 1);
+    else if (e.key === "ArrowLeft") move(index, -1);
+    else if (e.key === "Home") move(-1, 1);
+    else if (e.key === "End") move(items.length, -1);
+    else return;
+    e.preventDefault();
+  };
+  const focusIndex = Math.max(0, items.findIndex((it) => isActive(it.id)));
+  const padding = iconOnly ? "w-[26px] justify-center px-0" : "px-3";
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, "aria-multiselectable": props.multiple || void 0, className: `${s.list} ${className}`, children: items.map((item, i) => {
+    const active = isActive(item.id);
+    const text = typeof item.label === "string" ? item.label : void 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        "aria-label": iconOnly ? text : void 0,
+        "data-tip": item.tip ?? (iconOnly ? text : void 0),
+        "data-tip-title": item.tip ? text : void 0,
+        tabIndex: i === focusIndex ? 0 : -1,
+        disabled: item.disabled,
+        onClick: (e) => select(item.id, e.ctrlKey || e.metaKey || e.shiftKey),
+        onKeyDown: (e) => onKeyDown(e, i),
+        className: `inline-flex cursor-pointer items-center gap-2 text-caption font-black tracking-wider whitespace-nowrap uppercase transition-colors ${s.tab} ${variant === "underline" ? "px-4" : padding} focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 ` + (active ? s.active : s.idle),
+        children: [
+          item.icon,
+          !iconOnly && item.label,
+          item.count !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `min-w-[18px] rounded-full px-1.5 py-px text-center text-micro font-extrabold tracking-normal tabular-nums ${active ? s.countActive : "bg-muted text-foreground"}`,
+              children: item.count
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+export {
+  Tabs as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/v1/primitives/navigation/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../../src/v1/primitives/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef } from 'react'\r\nimport { SEGMENTED } from '../../buttons/SegmentedControl/segmentedStyles'\r\n\r\nexport interface TabItem<K extends string = string> {\r\n  id: K\r\n  /** Normalmente texto; aceita JSX. Com `iconOnly`, tem de ser texto (vai para o nome do botão e para o tooltip). */\r\n  label: React.ReactNode\r\n  /** Ícone antes do texto (ex: um ícone do lucide com `size={14}`). */\r\n  icon?: React.ReactNode\r\n  /** Número ao lado do texto (ex: pendentes). Não aparece se for `undefined`. */\r\n  count?: number\r\n  /** Explicação no tooltip (`data-tip`, com o `TooltipLayer`), com o `label` como título. */\r\n  tip?: string\r\n  disabled?: boolean\r\n}\r\n\r\ninterface TabsBase<K extends string> {\r\n  items: TabItem<K>[]\r\n  /** Nome do conjunto, para leitores de ecrã (ex: \"Estado das faturas\"). */\r\n  label?: string\r\n  /**\r\n   * `underline` (por omissão): separadores da página, com a linha por baixo.\r\n   * `segmented`: botões juntos numa caixa, para trocar de vista dentro de uma\r\n   * secção (ex: Lista · Quadro).\r\n   */\r\n  variant?: 'underline' | 'segmented'\r\n  /** Só os ícones; o `label` fica no tooltip e no nome do botão. */\r\n  iconOnly?: boolean\r\n  className?: string\r\n}\r\n\r\nexport interface TabsSingleProps<K extends string = string> extends TabsBase<K> {\r\n  multiple?: false\r\n  /** O separador escolhido. A app guarda este estado. */\r\n  value: K\r\n  onChange: (id: K) => void\r\n}\r\n\r\nexport interface TabsMultipleProps<K extends string = string> extends TabsBase<K> {\r\n  /**\r\n   * Vários escolhidos ao mesmo tempo: um clique escolhe só esse separador;\r\n   * Ctrl/⌘/Shift + clique junta-o ou tira-o dos escolhidos.\r\n   */\r\n  multiple: true\r\n  value: K[]\r\n  /** Os escolhidos depois do clique, e o separador clicado. */\r\n  onChange: (ids: K[], clicked: K) => void\r\n  /** O separador \"Todos\": escolhê-lo limpa a escolha, e fica ativo quando não há nenhum escolhido. */\r\n  allId?: K\r\n}\r\n\r\nexport type TabsProps<K extends string = string> = TabsSingleProps<K> | TabsMultipleProps<K>\r\n\r\nconst STYLES = {\r\n  underline: {\r\n    list: 'flex flex-wrap border-b border-border',\r\n    tab: '-mb-px h-11 border-0 border-b-[3px] px-4',\r\n    active: 'border-primary text-primary dark:border-foreground dark:text-foreground',\r\n    idle: 'border-transparent bg-transparent text-muted-foreground hover:text-primary dark:hover:text-foreground',\r\n    countActive: 'bg-primary text-primary-foreground dark:bg-proef-blue dark:text-white',\r\n  },\r\n  // O mesmo aspeto do SegmentedControl (definido num só sítio).\r\n  segmented: {\r\n    list: SEGMENTED.list,\r\n    tab: 'h-[26px] rounded-md border-0',\r\n    active: SEGMENTED.active,\r\n    idle: SEGMENTED.idle,\r\n    countActive: 'bg-primary-foreground/20',\r\n  },\r\n}\r\n\r\n/**\r\n * Separadores: escolher uma de várias vistas do mesmo ecrã.\r\n *\r\n * Só desenha os botões; o conteúdo de cada vista fica na app, que mostra o\r\n * que corresponde a `value`. Setas ← → (e Home/End) mudam de separador,\r\n * saltando os desativados. O escolhido fica a navy (não turquesa: turquesa\r\n * sobre branco não tem contraste para texto).\r\n *\r\n * Com `multiple`, vários podem estar escolhidos (ex: estados de uma lista).\r\n */\r\nexport default function Tabs<K extends string = string>(props: TabsProps<K>) {\r\n  const { items, label, variant = 'underline', iconOnly = false, className = '' } = props\r\n  const refs = useRef<(HTMLButtonElement | null)[]>([])\r\n  const s = STYLES[variant]\r\n\r\n  const isActive = (id: K) => {\r\n    if (!props.multiple) return id === props.value\r\n    if (props.allId !== undefined && id === props.allId) return props.value.length === 0\r\n    return props.value.includes(id)\r\n  }\r\n\r\n  const select = (id: K, additive: boolean) => {\r\n    if (!props.multiple) return props.onChange(id)\r\n    if (props.allId !== undefined && id === props.allId) return props.onChange([], id)\r\n    if (!additive) return props.onChange([id], id)\r\n    props.onChange(props.value.includes(id) ? props.value.filter((v) => v !== id) : [...props.value, id], id)\r\n  }\r\n\r\n  const move = (from: number, step: number) => {\r\n    const n = items.length\r\n    for (let i = 1; i <= n; i++) {\r\n      const next = (((from + step * i) % n) + n) % n\r\n      if (!items[next].disabled) {\r\n        select(items[next].id, false)\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') move(index, 1)\r\n    else if (e.key === 'ArrowLeft') move(index, -1)\r\n    else if (e.key === 'Home') move(-1, 1)\r\n    else if (e.key === 'End') move(items.length, -1)\r\n    else return\r\n    e.preventDefault()\r\n  }\r\n\r\n  // O primeiro escolhido entra no Tab do teclado (ou o primeiro, se nenhum).\r\n  const focusIndex = Math.max(0, items.findIndex((it) => isActive(it.id)))\r\n  const padding = iconOnly ? 'w-[26px] justify-center px-0' : 'px-3'\r\n\r\n  return (\r\n    <div role=\"tablist\" aria-label={label} aria-multiselectable={props.multiple || undefined} className={`${s.list} ${className}`}>\r\n      {items.map((item, i) => {\r\n        const active = isActive(item.id)\r\n        const text = typeof item.label === 'string' ? item.label : undefined\r\n        return (\r\n          <button\r\n            key={item.id}\r\n            ref={(el) => {\r\n              refs.current[i] = el\r\n            }}\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            aria-selected={active}\r\n            aria-label={iconOnly ? text : undefined}\r\n            data-tip={item.tip ?? (iconOnly ? text : undefined)}\r\n            data-tip-title={item.tip ? text : undefined}\r\n            tabIndex={i === focusIndex ? 0 : -1}\r\n            disabled={item.disabled}\r\n            onClick={(e) => select(item.id, e.ctrlKey || e.metaKey || e.shiftKey)}\r\n            onKeyDown={(e) => onKeyDown(e, i)}\r\n            className={\r\n              `inline-flex cursor-pointer items-center gap-2 text-caption font-black tracking-wider whitespace-nowrap uppercase transition-colors ${s.tab} ${variant === 'underline' ? 'px-4' : padding} ` +\r\n              'focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 ' +\r\n              (active ? s.active : s.idle)\r\n            }\r\n          >\r\n            {item.icon}\r\n            {!iconOnly && item.label}\r\n            {item.count !== undefined && (\r\n              <span\r\n                className={`min-w-[18px] rounded-full px-1.5 py-px text-center text-micro font-extrabold tracking-normal tabular-nums ${\r\n                  active ? s.countActive : 'bg-muted text-foreground'\r\n                }`}\r\n              >\r\n                {item.count}\r\n              </span>\r\n            )}\r\n          </button>\r\n        )\r\n      })}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}