acai-ui 1.65.5

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

@@ -0,0 +1,86 @@
+<template>
+  <q-input
+    v-model="model"
+    :rules="regrasCompostas"
+    :label="label"
+    :placeholder="placeholder"
+    :hint="hint"
+    :filled="filled"
+    :outlined="outlined"
+    :readonly="readonly"
+    :disable="disable"
+    :dense="dense"
+    :color="color"
+    :mask="Masks.hora"
+    class="ds-input"
+    bottom-slots
+    no-error-icon
+  >
+    <template v-if="required" #label>
+      {{ label }}
+      <span class="text-red-10 text-weight-bolder"> * </span>
+    </template>
+    <template #append>
+      <acai-ui-icon name="schedule" class="cursor-pointer" :color="color">
+        <q-popup-proxy transition-show="scale" transition-hide="scale">
+          <div class="ds-picker-m3">
+            <div class="ds-picker-m3__header">
+              <span class="ds-picker-m3__title">Selecione uma hora</span>
+              <q-btn
+                v-close-popup
+                class="ds-picker-m3__close"
+                icon="close"
+                flat
+                dense
+                round
+                size="sm"
+              />
+            </div>
+            <q-time v-model="model" mask="HH:mm" format24h flat />
+            <div class="ds-picker-m3__footer">
+              <q-btn v-close-popup label="OK" color="primary" flat no-caps />
+            </div>
+          </div>
+        </q-popup-proxy>
+      </acai-ui-icon>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import type { TimeProps } from "./acai-ui-time-interface";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+import Masks from "../../utils/masks";
+
+const props = withDefaults(defineProps<TimeProps>(), {
+  filled: true,
+  color: "primary",
+  rules: () => [],
+});
+
+const model = defineModel<string | null>();
+
+const emit = defineEmits<{
+  change: [value: string | null];
+}>();
+
+import { computed, watch } from "vue";
+import FormRules from "../../utils/form-rules";
+
+const regrasCompostas = computed(() => {
+  const regras = [...props.rules];
+  if (props.required) regras.unshift(FormRules.campoObrigatorio);
+  // A máscara ##:## aceita 88:77 — só a rule barra hora impossível.
+  regras.push(FormRules.validarHoraValida());
+  return regras;
+});
+
+watch(model, (val) => {
+  emit("change", val ?? null);
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/ds-input-base";
+@import "../../scss/ds-picker-m3";
+</style>

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

@@ -0,0 +1,13 @@
+export type ToggleColor = 'primary' | 'negative' | 'positive'
+
+export type ToggleSize = 'sm' | 'md' | 'lg'
+
+export interface ToggleProps {
+  modelValue: boolean
+  label?: string
+  color?: ToggleColor
+  size?: ToggleSize
+  disable?: boolean
+  /** Marca o campo como obrigatório (eMAG 6.4). Aplica `aria-required="true"`. */
+  required?: boolean
+}

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

@@ -0,0 +1,162 @@
+<template>
+  <span class="ds-toggle" :class="classes" :style="cssVars">
+    <button
+      type="button"
+      role="switch"
+      class="ds-toggle__switch"
+      :class="{ 'ds-toggle__switch--on': model }"
+      :aria-checked="model ? 'true' : 'false'"
+      :aria-required="required ? 'true' : undefined"
+      :aria-label="label || undefined"
+      :disabled="disable"
+      @click="alternar"
+    ></button>
+    <span v-if="label" class="ds-toggle__label" @click="alternar">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import type { ToggleProps } from './acai-ui-toggle-interface'
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+  color: 'primary',
+  size: 'md',
+  disable: false,
+})
+
+const model = defineModel<boolean>()
+
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+
+function alternar(): void {
+  if (props.disable) return
+  model.value = !model.value
+}
+
+watch(model, (val) => emit('change', val ?? false))
+
+// Cor do trilho "ligado": primary usa o token control-on (navy no claro, azul
+// vivo no escuro); os demais usam a brand color do Quasar.
+const cssVars = computed(() => ({
+  '--ds-toggle-on':
+    props.color === 'primary' ? 'var(--acai-control-on, #0e2a50)' : `var(--q-${props.color})`,
+}))
+
+const classes = computed(() => [
+  `ds-toggle--${props.size}`,
+  { 'ds-toggle--disabled': props.disable },
+])
+</script>
+
+<style lang="scss" scoped>
+// Switch estilo "pill" (o mesmo do painel de Preferências, que virou o padrão da
+// lib): trilho arredondado + knob branco que desliza. Trilho cinza quando off,
+// cor do estado ligado quando on.
+.ds-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.ds-toggle__switch {
+  flex: 0 0 auto;
+  border: 0;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--acai-border, #e4e8f1);
+  position: relative;
+  cursor: inherit;
+  transition: background 0.2s ease;
+
+  // knob branco
+  &::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease;
+  }
+
+  &--on {
+    background: var(--ds-toggle-on, #{$primary});
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ds-toggle-on, #{$primary});
+    outline-offset: 2px;
+  }
+}
+
+// Tamanhos — trilho / knob / deslocamento (travel = largura - knob - 2×3).
+.ds-toggle--sm .ds-toggle__switch {
+  width: 38px;
+  height: 22px;
+
+  &::after {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.ds-toggle__switch--on::after {
+    transform: translateX(16px);
+  }
+}
+
+.ds-toggle--md .ds-toggle__switch {
+  width: 46px;
+  height: 26px;
+
+  &::after {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.ds-toggle__switch--on::after {
+    transform: translateX(20px);
+  }
+}
+
+.ds-toggle--lg .ds-toggle__switch {
+  width: 54px;
+  height: 30px;
+
+  &::after {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.ds-toggle__switch--on::after {
+    transform: translateX(24px);
+  }
+}
+
+.ds-toggle__label {
+  color: var(--acai-text, #{$color-gray-700});
+  font-weight: 500;
+}
+
+.ds-toggle--sm .ds-toggle__label {
+  font-size: 0.75rem;
+}
+
+.ds-toggle--md .ds-toggle__label {
+  font-size: 0.875rem;
+}
+
+.ds-toggle--lg .ds-toggle__label {
+  font-size: 1rem;
+}
+</style>

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

@@ -0,0 +1,11 @@
+import type { QTooltipProps } from 'quasar'
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'
+
+export type TooltipAlignment = 'start' | 'center' | 'end'
+
+export interface TooltipProps extends Omit<QTooltipProps, 'anchor' | 'self'> {
+  position?: TooltipPosition
+  alignment?: TooltipAlignment
+  color?: string
+}

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

@@ -0,0 +1,104 @@
+$tooltip-arrow: 8px;
+
+.ds-tooltip {
+  --ds-tooltip-bg: var(--acai-primary, #{$primary});
+
+  background: var(--ds-tooltip-bg) !important;
+  color: $color-white-100;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.4;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  max-width: 280px;
+  overflow: visible !important;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  // ============================
+  // TOP — seta aponta pra baixo
+  // ============================
+  &--top::after {
+    top: 100%;
+    border-left: $tooltip-arrow solid transparent;
+    border-right: $tooltip-arrow solid transparent;
+    border-top: $tooltip-arrow solid var(--ds-tooltip-bg);
+  }
+
+  // ============================
+  // BOTTOM — seta aponta pra cima
+  // ============================
+  &--bottom::after {
+    bottom: 100%;
+    border-left: $tooltip-arrow solid transparent;
+    border-right: $tooltip-arrow solid transparent;
+    border-bottom: $tooltip-arrow solid var(--ds-tooltip-bg);
+  }
+
+  // Alinhamento horizontal (top / bottom)
+  &--top.ds-tooltip--align-start::after,
+  &--bottom.ds-tooltip--align-start::after {
+    left: 12px;
+  }
+
+  &--top.ds-tooltip--align-center::after,
+  &--bottom.ds-tooltip--align-center::after {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--top.ds-tooltip--align-end::after,
+  &--bottom.ds-tooltip--align-end::after {
+    right: 12px;
+  }
+
+  // ============================
+  // LEFT — seta aponta pra direita
+  // ============================
+  &--left::after {
+    left: 100%;
+    border-top: $tooltip-arrow solid transparent;
+    border-bottom: $tooltip-arrow solid transparent;
+    border-left: $tooltip-arrow solid var(--ds-tooltip-bg);
+  }
+
+  // ============================
+  // RIGHT — seta aponta pra esquerda
+  // ============================
+  &--right::after {
+    right: 100%;
+    border-top: $tooltip-arrow solid transparent;
+    border-bottom: $tooltip-arrow solid transparent;
+    border-right: $tooltip-arrow solid var(--ds-tooltip-bg);
+  }
+
+  // Alinhamento vertical (left / right)
+  &--left.ds-tooltip--align-start::after,
+  &--right.ds-tooltip--align-start::after {
+    top: 8px;
+  }
+
+  &--left.ds-tooltip--align-center::after,
+  &--right.ds-tooltip--align-center::after {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &--left.ds-tooltip--align-end::after,
+  &--right.ds-tooltip--align-end::after {
+    bottom: 8px;
+  }
+}
+
+// Tema escuro: a bolha navy ($primary #0e2a50) quase some sobre a página escura
+// (#0e1420). Reaponta só a var local pra surface elevada (slate #2c3a52) — corrige
+// fundo E setas de uma vez (ambos leem --ds-tooltip-bg). Texto branco mantém ótimo
+// contraste. Claro fica intacto (fora do .body--dark).
+.body--dark .ds-tooltip {
+  --ds-tooltip-bg: var(--acai-elevated, #2c3a52);
+}

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

@@ -0,0 +1,90 @@
+<template>
+  <q-tooltip
+    :class="['ds-tooltip', `ds-tooltip--${position}`, `ds-tooltip--align-${alignment}`]"
+    :style="resolvedColor ? { '--ds-tooltip-bg': resolvedColor } : undefined"
+    v-bind="{ ...propsQuasar, ...$attrs }"
+    :anchor="anchorComputed"
+    :self="selfComputed"
+    :transition-show="transitionShow ?? 'scale'"
+    :transition-hide="transitionHide ?? 'scale'"
+    :offset="offset ?? [10, 10]"
+  >
+    <slot />
+  </q-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getCssVar } from 'quasar'
+import type { TooltipProps, TooltipPosition, TooltipAlignment } from './acai-ui-tooltip-interface'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  position: 'top',
+  alignment: 'center',
+  color: 'primary',
+  // Prop booleana declarada e NÃO informada vira `false` no Vue (boolean casting).
+  // Repassado assim pro QTooltip, `target: false` significa "sem elemento âncora" —
+  // o tooltip não recebe os eventos de hover nem é posicionado. `modelValue: false`
+  // (em vez do `null` dele) faria o QTooltip se achar controlado e perder o
+  // "tocar fora fecha" do mobile. Aqui os defaults REAIS do QTooltip são repetidos.
+  target: true,
+  modelValue: null,
+  noParentEvent: undefined,
+  persistent: undefined,
+})
+
+// Cor default sai SEM style inline: o inline vence a regra `.body--dark .ds-tooltip`,
+// e era por isso que no tema escuro toda bolha continuava navy (some no fundo escuro)
+// em vez de virar a superfície elevada. Sem inline, o CSS decide por tema; com `color`
+// explícito, a escolha do consumidor continua ganhando.
+const resolvedColor = computed(() => {
+  if (props.color === 'primary') return undefined
+  return getCssVar(props.color) ?? props.color
+})
+
+// `TooltipProps` estende `QTooltipProps`, então TUDO que o QTooltip aceita
+// (`max-width`, `max-height`, `delay`, `v-model`, `no-parent-event`, ...) vira prop
+// DECLARADA aqui — e prop declarada NÃO cai no `$attrs`. Sem este repasse elas eram
+// silenciosamente engolidas (era por isso que `max-width` na tabela não fazia nada).
+// As tratadas no template (anchor/self/transition/offset) ficam de fora e vencem
+// por virem depois no `v-bind`.
+// Chaves não informadas saem do objeto (em vez de ir como `undefined`): com
+// `exactOptionalPropertyTypes` o QTooltip não aceita `undefined` explícito, e o
+// default dele só vale pra prop AUSENTE.
+const propsQuasar = computed<Record<string, unknown>>(() => {
+  const { position, alignment, color, transitionShow, transitionHide, offset, ...resto } = props
+  return Object.fromEntries(Object.entries(resto).filter(([, valor]) => valor !== undefined))
+})
+
+type QAnchor =
+  | 'top left' | 'top middle' | 'top right' | 'top start' | 'top end'
+  | 'center left' | 'center middle' | 'center right' | 'center start' | 'center end'
+  | 'bottom left' | 'bottom middle' | 'bottom right' | 'bottom start' | 'bottom end'
+
+function resolveAnchor(position: TooltipPosition, alignment: TooltipAlignment): QAnchor {
+  const map: Record<TooltipPosition, Record<TooltipAlignment, QAnchor>> = {
+    top: { start: 'top left', center: 'top middle', end: 'top right' },
+    bottom: { start: 'bottom left', center: 'bottom middle', end: 'bottom right' },
+    left: { start: 'center left', center: 'center left', end: 'center left' },
+    right: { start: 'center right', center: 'center right', end: 'center right' },
+  }
+  return map[position][alignment]
+}
+
+function resolveSelf(position: TooltipPosition, alignment: TooltipAlignment): QAnchor {
+  const map: Record<TooltipPosition, Record<TooltipAlignment, QAnchor>> = {
+    top: { start: 'bottom left', center: 'bottom middle', end: 'bottom right' },
+    bottom: { start: 'top left', center: 'top middle', end: 'top right' },
+    left: { start: 'center right', center: 'center right', end: 'center right' },
+    right: { start: 'center left', center: 'center left', end: 'center left' },
+  }
+  return map[position][alignment]
+}
+
+const anchorComputed = computed(() => resolveAnchor(props.position, props.alignment))
+const selfComputed = computed(() => resolveSelf(props.position, props.alignment))
+</script>
+
+<style lang="scss" src="./acai-ui-tooltip-styles.scss" />

package/src/components/user-menu/acai-ui-user-menu-interface.ts

@@ -0,0 +1,13 @@
+export interface UserMenuProps {
+  /**
+   * Identificação do usuário (linha principal). Adaptativa:
+   * - nome ("Michel Amorim") → iniciais no avatar;
+   * - CPF (11 dígitos) → máscara `000.000.000-00` + ícone de documento;
+   * - CNPJ (14 dígitos) → máscara `00.000.000/0000-00` + ícone de empresa.
+   */
+  name: string
+  /** Papel/perfil exibido na 2ª linha do chip e no cabeçalho do menu. */
+  role?: string
+  /** Cor Quasar do avatar. Default `primary`. */
+  avatarColor?: string
+}

package/src/components/user-menu/acai-ui-user-menu-styles.scss

@@ -0,0 +1,125 @@
+@import '../../scss/breakpoints';
+
+// Bloco de usuário FLAT pra header claro: o <button> inteiro é o gatilho
+// (sem borda/pill), com hover sutil sinalizando que é clicável.
+.acai-ui-user-menu {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: $radius-lg;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  // No header escuro, o hover "preto" some — clareia.
+  .body--dark &:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  // Foco visível (eMAG 4.3) — nunca remover o outline sem substituto.
+  // control-on = navy no claro (idêntico) e azul legível no escuro; o navy cru
+  // sumia sobre o header escuro.
+  &:focus-visible {
+    outline: 2px solid var(--acai-control-on, #{$primary});
+    outline-offset: 2px;
+  }
+
+  &__ini {
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+
+  &__txt {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.25;
+    min-width: 0;
+  }
+
+  &__nome {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--acai-heading, #{$color-gray-900});
+    white-space: nowrap;
+  }
+
+  &__papel {
+    font-size: 0.75rem;
+    color: var(--acai-text-muted, #{$color-gray-600});
+    white-space: nowrap;
+  }
+
+  &__tempo {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 2px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--acai-text-muted, #{$color-gray-600});
+    font-variant-numeric: tabular-nums;
+
+    &--alerta {
+      color: $color-yellow-800;
+    }
+  }
+
+  &__seta {
+    color: var(--acai-text-muted, #{$color-gray-600});
+    transition: transform 0.2s ease;
+
+    &--aberta {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Cabeçalho do menu (nome + papel)
+  &__cab {
+    padding: 8px 14px 10px;
+    border-bottom: 1px solid var(--acai-border, #{$color-gray-300});
+    margin-bottom: 4px;
+  }
+
+  &__cab-nome {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--acai-heading, #{$color-gray-900});
+  }
+
+  &__cab-papel {
+    font-size: 0.75rem;
+    color: var(--acai-text-muted, #{$color-gray-600});
+  }
+
+  // ========================================
+  // Celular — só o avatar
+  // ========================================
+  // `__nome` e `__papel` têm `white-space: nowrap`, então um nome de servidor
+  // por extenso ("MICHEL MARQUES DE SOUSA AMORIM") crescia sem limite e
+  // empurrava o header inteiro pra fora da tela — o toolbar não tem wrap.
+  // Encolher a fonte não resolve (o nome continua sem teto); truncar com
+  // reticências deixa um rótulo inútil. No celular o avatar já identifica quem
+  // está logado, e o nome + papel continuam visíveis no CABEÇALHO DO POPUP
+  // (`__cab`) assim que o menu abre — nenhuma informação se perde.
+  //
+  // O `aria-label` do <button> ("Menu do usuário: {nome}") é o mesmo em
+  // qualquer largura, então pro leitor de tela nada muda.
+  @include ate-mobile {
+    gap: 0;
+
+    &__txt,
+    &__seta {
+      display: none;
+    }
+  }
+}