acai-ui 1.65.5

package/src/components/index.ts

@@ -0,0 +1,149 @@
+// === Components ===
+export { default as AcaiUiConfirm, type AlertColor } from './confirm/acai-ui-confirm.vue'
+export { default as AcaiUiFile } from './file/acai-ui-file.vue'
+export { default as AcaiUiModal } from './modal/acai-ui-modal.vue'
+export { default as AcaiUiAsyncSelect } from './async-select/acai-ui-async-select.vue'
+export { default as AcaiUiBadge } from './badge/acai-ui-badge.vue'
+export { default as AcaiUiBanner } from './banner/acai-ui-banner.vue'
+export { default as AcaiUiButton } from './button/acai-ui-button.vue'
+export { default as AcaiUiCard } from './card/acai-ui-card.vue'
+export { default as AcaiUiChart } from './chart/acai-ui-chart.vue'
+export { default as AcaiUiCheckbox } from './checkbox/acai-ui-checkbox.vue'
+export { default as AcaiUiChip } from './chip/acai-ui-chip.vue'
+export { default as AcaiUiContainer } from './container/acai-ui-container.vue'
+export { default as AcaiUiDrawer } from './drawer/acai-ui-drawer.vue'
+export { default as AcaiUiDate } from './date/acai-ui-date.vue'
+export { default as AcaiUiDatetime } from './datetime/acai-ui-datetime.vue'
+export { default as AcaiUiDialog } from './dialog/acai-ui-dialog.vue'
+export { default as AcaiUiDropdown } from './dropdown/acai-ui-dropdown.vue'
+export { default as AcaiUiDropdownItem } from './dropdown/acai-ui-dropdown-item.vue'
+export { default as AcaiUiErrorLog } from './error-log/acai-ui-error-log.vue'
+export { default as AcaiUiErrorLogJsonTree } from './error-log/acai-ui-error-log-json-tree.vue'
+export { default as AcaiUiForm } from './form/acai-ui-form.vue'
+export { default as AcaiUiHelp } from './help/acai-ui-help.vue'
+export { default as AcaiUiTour } from './help/acai-ui-tour.vue'
+export { default as AcaiUiTime } from './time/acai-ui-time.vue'
+export { default as AcaiUiIcon } from './icon/acai-ui-icon.vue'
+export { default as AcaiUiInput } from './input/acai-ui-input.vue'
+export { default as AcaiUiProgress } from './progress/acai-ui-progress.vue'
+export { default as AcaiUiPagination } from './pagination/acai-ui-pagination.vue'
+export { default as AcaiUiDateRange } from './date-range/acai-ui-date-range.vue'
+export { default as AcaiUiRadio } from './radio/acai-ui-radio.vue'
+export { default as AcaiUiSection } from './section/acai-ui-section.vue'
+export { default as AcaiUiPreferences } from './preferences/acai-ui-preferences.vue'
+export { default as AcaiUiSelect } from './select/acai-ui-select.vue'
+export { default as AcaiUiUserMenu } from './user-menu/acai-ui-user-menu.vue'
+export { default as AcaiUiSessionClock } from './session-clock/acai-ui-session-clock.vue'
+export { default as AcaiUiDivider } from './divider/acai-ui-divider.vue'
+export { default as AcaiUiCode } from './code/acai-ui-code.vue'
+export { default as AcaiUiSwagger } from './swagger/acai-ui-swagger.vue'
+export { default as AcaiUiStepper } from './stepper/acai-ui-stepper.vue'
+export { default as AcaiUiStep } from './stepper/acai-ui-step.vue'
+export { default as AcaiUiTable } from './table/acai-ui-table.vue'
+export { default as AcaiUiTabs } from './tabs/acai-ui-tabs.vue'
+export { default as AcaiUiTab } from './tabs/acai-ui-tab.vue'
+export { default as AcaiUiToggle } from './toggle/acai-ui-toggle.vue'
+export { default as AcaiUiTooltip } from './tooltip/acai-ui-tooltip.vue'
+export { default as AcaiUiValidation } from './validation/acai-ui-validation.vue'
+
+// === Interfaces / Types ===
+export type { AsyncSelectProps, OptionAccessor } from './async-select/acai-ui-async-select-interface'
+export type { BadgeProps } from './badge/acai-ui-badge-interface'
+export type { BannerProps, BannerType } from './banner/acai-ui-banner-interface'
+export type { ButtonProps } from './button/acai-ui-button-interface'
+export type {
+  ChartProps,
+  ChartType,
+  ChartSeries,
+  ChartDatum,
+  ChartPoint,
+  ChartValue,
+  ChartThreshold,
+  ChartColorBy,
+  ChartGauge,
+  ChartPointEvent,
+} from './chart/acai-ui-chart-interface'
+export type { FormatoValor } from './chart/chart-formatar'
+export type { MarcadorSerie } from './chart/chart-caminhos'
+// Export de imagem do gráfico (Book/PDF). `chart-headless` monta o componente
+// fora da tela, por isso o import vem DELE e não do `chart-imagem`.
+export { chartParaImagem, svgChartParaImagem, serializarSvgChart } from './chart/chart-headless'
+export type {
+  ImagemChart,
+  OpcoesImagemChart,
+  OpcoesImagemHeadless,
+  SvgSerializado,
+} from './chart/chart-headless'
+export type { IconProps } from './icon/acai-ui-icon-interface'
+export type { InputProps } from './input/acai-ui-input-interface'
+export type { SelectProps } from './select/acai-ui-select-interface'
+export type { PreferencesProps } from './preferences/acai-ui-preferences-interface'
+export type { UserMenuProps } from './user-menu/acai-ui-user-menu-interface'
+export type { DateProps } from './date/acai-ui-date-interface'
+export type { TimeProps } from './time/acai-ui-time-interface'
+export type { DatetimeProps } from './datetime/acai-ui-datetime-interface'
+export type { DateRangeProps, DateRangeValue } from './date-range/acai-ui-date-range-interface'
+export type { FileProps } from './file/acai-ui-file-interface'
+export type { ChipProps } from './chip/acai-ui-chip-interface'
+export type { DialogProps } from './dialog/acai-ui-dialog-interface'
+export type { CardProps } from './card/acai-ui-card-interface'
+export type { ContainerProps, BreadcrumbItem } from './container/acai-ui-container-interface'
+export type {
+  DrawerProps,
+  SidebarConfig,
+  SidebarRouteConfig,
+  SidebarGroup,
+  SidebarLeaf,
+  SidebarBadgeKey,
+} from './drawer/acai-ui-drawer-interface'
+export type { DropdownProps, DropdownItemProps } from './dropdown/acai-ui-dropdown-interface'
+export type { ErrorLogProps, ErroRequisicaoLike } from './error-log/acai-ui-error-log-interface'
+export type { FormProps } from './form/acai-ui-form-interface'
+export type { StepperProps } from './stepper/acai-ui-stepper-interface'
+export type { StepProps } from './stepper/acai-ui-step-interface'
+export type { TooltipProps, TooltipPosition, TooltipAlignment } from './tooltip/acai-ui-tooltip-interface'
+export type { TabsProps, TabPaneProps, TabName } from './tabs/acai-ui-tabs-interface'
+export type { ColumnProps, ColumnShortcut, ColumnName, ExtraColumnName, TableField } from './table/acai-ui-table-interface'
+export type { ColorThreshold } from './progress/acai-ui-progress-interface'
+export type { CodeProps } from './code/acai-ui-code-interface'
+export type { SwaggerProps } from './swagger/acai-ui-swagger-interface'
+export type {
+  ApiNormalizada,
+  DocumentoOpenApi,
+  GrupoNormalizado,
+  MetodoHttp,
+  OperacaoNormalizada,
+} from './swagger/openapi-tipos'
+export { normalizarOpenApi } from './swagger/openapi-normalizar'
+export type { PaginationProps } from './pagination/acai-ui-pagination-interface'
+export type {
+  BalloonPosition,
+  HelpContent,
+  HelpProps,
+  HelpTopic,
+  SpotlightRect,
+  TourActivate,
+  TourAdvanceOn,
+  TourAnchor,
+  TourContent,
+  TourFilter,
+  TourPick,
+  TourPlacement,
+  TourProps,
+  TourSkip,
+  TourSkipReason,
+  TourStep,
+} from './help/acai-ui-help-interface'
+export { dentroDe, obterAlvos, vAcaiTour } from './help/tour-registry'
+export {
+  comTexto,
+  escolhaPadrao,
+  escolher,
+  nEsimo,
+  primeiro,
+  queCasam,
+  queSatisfazem,
+  ultimo,
+  visiveis,
+} from './help/tour-escolha'
+export { useTourVisto } from './help/use-tour-visto'

package/src/components/input/acai-ui-input-interface.ts

@@ -0,0 +1,20 @@
+import type { QInputProps } from 'quasar'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { MedidasKeys } from '../../constants/medidas-espacos'
+
+export interface InputProps extends Omit<QInputProps, 'size' | 'modelValue'> {
+  modelValue: string | number | null
+  size?: MedidasKeys
+  placeholder?: string
+  hint?: string
+  iconLeft?: MaterialIconValues
+  iconRight?: MaterialIconValues
+  required?: boolean
+  /**
+   * Remove espaços no início/fim do valor ao sair do campo (blur).
+   * Default: `true`. Não se aplica a `type="password"` (evita mutilar senha) nem
+   * a valores não-string. Valores com máscara não têm espaços nas pontas, então
+   * o trim é inócuo neles.
+   */
+  trim?: boolean
+}

package/src/components/input/acai-ui-input.vue

@@ -0,0 +1,146 @@
+<template>
+  <!-- `bottom-slots`: reserva do espaço da mensagem SEMPRE, igual nos seis campos
+       (input, select, date, time, datetime, date-range). Sem ele a altura depende
+       de HAVER regra — os campos de data empilham validação de formato por conta
+       própria e ficam altos, input e select só ficam se o consumidor pedir. O
+       consumidor não tem como prever isso lendo o template dele, e numa grade de
+       duas colunas vira degrau de 20px de uma linha para a outra. Quem quiser a
+       grade compacta continua com o escape de sempre: `hide-bottom-space` vence
+       esta prop, porque o QField só monta `q-field--with-bottom` quando ele é
+       falso. -->
+  <q-input
+    v-bind="qInputPropsFinais"
+    v-model="model"
+    :class="classes"
+    :rules="regrasCompostas"
+    :filled="filled"
+    :outlined="outlined"
+    :aria-required="props.required ? 'true' : undefined"
+    bottom-slots
+    no-error-icon
+    @update:model-value="onChange"
+    @blur="onBlur"
+  >
+    <template v-if="required" #label>
+      {{ label }}
+      <span class="text-red-10 text-weight-bolder"> * </span>
+    </template>
+    <!-- Slots prepend/append repassados: o consumidor pode injetar conteúdo
+         clicável (ex: toggle de senha, botão de busca). Sem slot, cai no ícone
+         padrão de iconLeft/iconRight (comportamento anterior preservado). -->
+    <template v-if="$slots.prepend || iconLeft" #prepend>
+      <slot name="prepend">
+        <acai-ui-icon v-if="iconLeft" :name="iconLeft" />
+      </slot>
+    </template>
+    <template v-if="$slots.append || iconRight" #append>
+      <slot name="append">
+        <acai-ui-icon v-if="iconRight" :name="iconRight" />
+      </slot>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { InputProps } from './acai-ui-input-interface';
+import { useRepasseQuasar } from '../../hooks/use-repasse-quasar';
+import AcaiUiIcon from '../icon/acai-ui-icon.vue';
+
+const props = withDefaults(defineProps<InputProps>(), {
+  filled: true,
+  outlined: false,
+  trim: true,
+  // Máscara devolve valor limpo por padrão (o caso comum: enviar dígitos ao
+  // backend). Quem precisar do valor com máscara usa :unmasked-value="false".
+  unmaskedValue: true,
+  // `undefined` explícito DESLIGA o boolean casting do Vue (prop booleana
+  // ausente vira `false`, não `undefined`). Precisamos dos três estados para
+  // distinguir "não passou" de ":stack-label=\"false\"" — ver qInputProps.
+  stackLabel: undefined,
+  // 🔴 Mesmo motivo, e aqui o estrago é maior: `dark` é `Boolean | null` no
+  // Quasar — `null` herda do tema, `false` FORÇA o claro. Sem isto, o repasse
+  // mandaria `dark: false` em todo campo que não passou a prop e desligaria o
+  // tema escuro do app inteiro. `error` é `Boolean | null` pela mesma razão:
+  // `null` deixa as `rules` decidirem.
+  dark: undefined,
+  error: undefined,
+});
+
+const model = defineModel<string | number | null>();
+
+const emit = defineEmits<{
+  change: [value: string | number | null]
+}>();
+
+function onChange(value: string | number | null): void {
+  emit('change', value);
+}
+
+// Trim no blur (não no input, pra não atrapalhar a digitação de espaços entre
+// palavras). Pula senha e valores não-string. Substitui o `v-model.trim` que os
+// consumidores usavam nos inputs próprios antes de migrar para a lib.
+function onBlur(): void {
+  if (props.trim === false || props.type === 'password') return;
+  if (typeof model.value !== 'string') return;
+  const trimmed = model.value.trim();
+  if (trimmed !== model.value) {
+    model.value = trimmed;
+    emit('change', trimmed);
+  }
+}
+
+import FormRules from '../../utils/form-rules'
+
+const regrasCompostas = computed(() => {
+  const regras = [...(props.rules ?? [])]
+  if (props.required) regras.unshift(FormRules.campoObrigatorio)
+  return regras
+})
+
+const classes = computed(() => [
+  'ds-input',
+  {
+    'ds-input--error': props.error,
+    'ds-input--disabled': props.disable,
+    'ds-input--readonly': props.readonly,
+  },
+]);
+
+// Repasse: tudo o que o consumidor passou vai pro q-input, menos o que a lib
+// consome ou compõe. A lista abaixo é das props da PRÓPRIA lib — pequena e sob
+// nosso controle; prop nova do Quasar passa a funcionar sozinha.
+//
+// Fora dela ficam também `onChange` (emit próprio da lib: repassar entregaria o
+// evento 2x) e `rules`/`filled`/`outlined`, que o template liga com valor
+// composto logo abaixo do `v-bind` — atributo escrito depois vence.
+const qInputProps = useRepasseQuasar(props, [
+  'onChange',
+  'rules',
+  // `size` da lib é `MedidasKeys`, não a escala do Quasar.
+  'size',
+  // Viram ícone nos slots prepend/append; no q-input cairiam como atributo solto.
+  'iconLeft',
+  'iconRight',
+  // `required` no q-input desce pro <input> nativo e liga a validação do
+  // NAVEGADOR por cima da do Quasar. A lib expõe isso por aria-required + regra.
+  'required',
+  'trim',
+  // Composta abaixo: placeholder exige label empilhada.
+  'stackLabel',
+]);
+
+const qInputPropsFinais = computed(() => ({
+  ...qInputProps.value,
+  // Placeholder exige label empilhada. O Quasar calcula
+  // `floatingLabel = stackLabel || focused || hasValue`, e `placeholder` nem é
+  // prop dele: é atributo fallthrough que cai no <input> nativo. Sem stackLabel,
+  // o campo vazio mostra a label NO CORPO e o placeholder nativo por baixo dela,
+  // sobrepostos. Quem quiser o comportamento antigo passa :stack-label="false".
+  stackLabel: props.stackLabel ?? (props.placeholder ? true : undefined),
+}));
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/ds-input-base';
+</style>

package/src/components/modal/acai-ui-modal-interface.ts

@@ -0,0 +1,19 @@
+export type DialogBaseProps = {
+  title: string
+  modalClass?: string
+  hideActions?: boolean
+  hideHeader?: boolean
+
+  skeleton?: boolean
+  skeletonCount?: number
+
+  navigationBar?: boolean
+
+  fullWidth?: boolean
+  persistent?: boolean
+
+  labelOnOk?: string
+  colorOnOk?: string
+  disableOnOk?: boolean
+  disableCancel?: boolean
+}

package/src/components/modal/acai-ui-modal-styles.scss

@@ -0,0 +1,131 @@
+// Modal "cadeia de custódia": header e footer FIXOS, só o corpo rola.
+// O card é uma coluna flex com altura máxima; header/footer não encolhem e o
+// corpo pega o espaço do meio com o scroll.
+//
+// ⚠️ Seletor com `.q-dialog__inner >` de propósito: o Quasar tem
+// `.q-dialog__inner--minimized > div { border-radius: 4px; max-height: ... }`
+// (especificidade 0-1-1) que GANHA de uma classe sozinha (0-1-0) — o radius e o
+// max-height daqui nunca chegavam na tela; o modal renderizava quadrado (4px)
+// desde sempre. 0-2-0 resolve sem !important.
+@import '../../scss/breakpoints';
+
+.q-dialog__inner > .container-base-modal {
+  // Era `min-width: 900px` com UM degrau (`@media (max-width: 900px)` → 400px).
+  // Num celular de 360px o modal ficava mais largo que a tela e produzia rolagem
+  // horizontal; entre 400 e 900px não havia nada gradual.
+  //
+  // `min()` faz o mesmo trabalho sem media query nenhuma: 900px quando cabe,
+  // e a largura disponível quando não cabe. O `100%` é medido contra o
+  // `.q-dialog__inner`, que o Quasar já entrega com o padding da margem
+  // descontado — por isso não precisamos repetir aqui o `24px` dele (e não
+  // quebramos se ele mudar esse número).
+  width: min(900px, 100%);
+  max-width: 100%;
+  // `vh` primeiro como fallback: no Chrome/Safari mobile ele mede a viewport
+  // GRANDE (barra de endereço recolhida), então 90vh pode passar da tela real.
+  // `dvh` acompanha a barra aparecendo/sumindo; quem não entende, ignora a linha.
+  max-height: 90vh;
+  max-height: 90dvh;
+  // Mesma linguagem do balão do tour (acai-ui-tour): canto generoso + borda
+  // sutil + elevação. Decisão de 2026-08-02 (user preferiu esse acabamento).
+  border-radius: $radius-2xl; // 16px
+  border: 1px solid var(--acai-border, #{$color-gray-300});
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // o card não rola; quem rola é o .modal-body
+  // Elevação dark-aware (anel de luz no escuro, navy suave no claro).
+  box-shadow: var(--acai-elevation);
+  // O Quasar NÃO escurece q-card sem a prop `dark` (só existe .q-card--dark), então
+  // o modal ficava 100% branco no escuro. Superfície explícita: #fff no claro, navy
+  // no escuro. Texto idem (senão herda o preto do q-card).
+  background: var(--acai-surface, #{$color-white-100});
+  color: var(--acai-text, #{$color-gray-800});
+
+  // ── Header FIXO ──
+  .modal-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: $spacing-md $spacing-lg;
+    border-bottom: 1px solid var(--acai-border-subtle, #{$color-gray-300});
+
+    h1 {
+      text-transform: uppercase;
+      font-size: 1.2rem;
+      font-weight: 700 !important;
+      margin: 0;
+      line-height: 1.2;
+      color: var(--acai-heading, #{$primary});
+    }
+  }
+
+  // ── Corpo: ÚNICA área rolável ──
+  .modal-body {
+    flex: 1 1 auto;
+    min-height: 0; // essencial pro overflow funcionar dentro do flex
+    overflow-y: auto;
+    padding: $spacing-lg;
+
+    // Scrollbar sutil (o navy pesado de antes ficava agressivo).
+    //
+    // Só para ponteiro fino, mesma razão do `scss/_scrollbar.scss`: declarar
+    // `::-webkit-scrollbar` com dimensão desliga a barra overlay do celular e
+    // desenha a clássica, que fica sempre visível e come 8px do corpo do modal
+    // — logo no aparelho onde o modal já é o mais apertado.
+    @media (pointer: fine) {
+      scrollbar-color: var(--acai-border, #{$color-gray-300}) transparent;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--acai-border, #{$color-gray-300});
+        border-radius: $radius-full;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
+  }
+
+  // ── Footer FIXO ──
+  .modal-footer {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: $spacing-sm;
+    padding: $spacing-md $spacing-lg;
+    border-top: 1px solid var(--acai-border-subtle, #{$color-gray-300});
+  }
+
+  // No celular o modal deixa de ser "uma caixa sobre a página" e passa a ser a
+  // tela: canto menor, respiro menor e altura quase cheia — o conteúdo é que
+  // precisa do espaço, não a moldura. O footer ganha wrap porque dois ou três
+  // botões lado a lado não cabem em 360px.
+  @include ate-mobile {
+    max-height: 94dvh;
+    border-radius: $radius-lg;
+
+    .modal-header,
+    .modal-footer {
+      padding: $spacing-sm $spacing-md;
+    }
+
+    .modal-header h1 {
+      font-size: 1rem;
+    }
+
+    .modal-body {
+      padding: $spacing-md;
+    }
+
+    .modal-footer {
+      flex-wrap: wrap;
+    }
+  }
+}

package/src/components/modal/acai-ui-modal.vue

@@ -0,0 +1,83 @@
+<template>
+  <q-dialog v-model="dialogAbrir" :full-width="!!fullWidth" :persistent="!!persistent">
+    <q-card :class="[modalClass || '', 'container-base-modal']">
+      <!-- Header FIXO (não rola). -->
+      <header v-if="!hideHeader" class="modal-header">
+        <h1>{{ title }}</h1>
+        <q-space />
+        <q-btn v-if="navigationBar" icon="close" flat dense round v-close-popup />
+      </header>
+
+      <!-- Conteúdo — a ÚNICA área que rola. -->
+      <div class="modal-body">
+        <template v-if="skeleton">
+          <q-skeleton v-for="n in skeletonCount" :key="n" type="text" class="q-mb-sm" />
+        </template>
+        <slot v-else />
+      </div>
+
+      <!-- Footer FIXO (não rola). O dev pode passar `#footer` pra montar como
+           quiser; sem slot, cai nos botões Cancelar/Confirmar padrão. -->
+      <footer v-if="!hideActions || $slots.footer" class="modal-footer">
+        <slot name="footer">
+          <acai-ui-button :disable="disableCancel" outline label="Cancelar" color="negative" @click="cancelarDialog" />
+          <acai-ui-button :label="labelOnOk || 'Confirmar'" :color="colorOnOk || 'primary'" :disable="disableOnOk" @click="confirmarDialog" />
+        </slot>
+      </footer>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import type { DialogBaseProps } from './acai-ui-modal-interface'
+import AcaiUiButton from '../button/acai-ui-button.vue'
+
+withDefaults(defineProps<DialogBaseProps>(), {
+  modalClass: '',
+  hideActions: false,
+  hideHeader: false,
+  skeleton: false,
+  skeletonCount: 1,
+  navigationBar: true,
+  fullWidth: false,
+  persistent: false,
+  labelOnOk: 'Confirmar',
+  colorOnOk: 'primary',
+  disableOnOk: false,
+  disableCancel: false,
+})
+
+const emits = defineEmits<{
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+  (e: 'open'): void
+  (e: 'close'): void
+}>()
+
+const dialogAbrir = defineModel<boolean | null>({ default: false })
+
+const cancelarDialog = (): void => {
+  dialogAbrir.value = false
+  emits('cancel')
+}
+
+const confirmarDialog = (): void => {
+  emits('confirm')
+}
+
+defineExpose({
+  closeDialog: cancelarDialog,
+  confirmDialog: confirmarDialog,
+})
+
+watch(
+  () => dialogAbrir.value,
+  (v) => {
+    if (v) emits('open')
+    else emits('close')
+  },
+)
+</script>
+
+<style lang="scss" src="./acai-ui-modal-styles.scss" />

package/src/components/pagination/acai-ui-pagination-interface.ts

@@ -0,0 +1,8 @@
+export interface PaginationProps {
+  /** Número TOTAL de páginas. A paginação só aparece quando `max > 1`. */
+  max: number
+  /** Máximo de botões numéricos visíveis de cada vez. Default: 5. */
+  maxPages?: number
+  /** Mostra as setas de primeira/última/anterior/próxima página. Default: true. */
+  directionLinks?: boolean
+}

package/src/components/pagination/acai-ui-pagination.vue

@@ -0,0 +1,36 @@
+<template>
+  <q-pagination
+    v-model="model"
+    :max="max"
+    :max-pages="maxPages"
+    :direction-links="directionLinks"
+    class="ds-pagination"
+    outline
+    active-color="primary text-white"
+    active-design="unelevated"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PaginationProps } from './acai-ui-pagination-interface'
+
+// Paginação padrão do DS. Encapsula o `q-pagination` do Quasar com a config já
+// consolidada na `acai-ui-table` (outline + ativo unelevated primary), para que os
+// apps parem de instanciar `q-pagination` avulso e o visual fique consistente.
+withDefaults(defineProps<PaginationProps>(), {
+  maxPages: 5,
+  directionLinks: true,
+})
+
+const model = defineModel<number>({ default: 1 })
+</script>
+
+<style scoped lang="scss">
+// Dark: os botões inativos herdam a cor primary (navy) e ficam apagados no escuro.
+// Clareia o texto/borda dos inativos; o ativo mantém o preenchimento primary + branco.
+.body--dark .ds-pagination {
+  :deep(.q-btn:not(.q-pagination__middle) .q-btn__content) {
+    color: var(--acai-text);
+  }
+}
+</style>

package/src/components/preferences/acai-ui-preferences-interface.ts

@@ -0,0 +1,4 @@
+export interface PreferencesProps {
+  /** Título do painel. Default "Preferências". */
+  title?: string
+}