@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,320 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Calendar.css';
+import { useState, useRef, useEffect } from "react";
+import { faChevronLeft, faChevronRight, } from "@fortawesome/free-solid-svg-icons";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+import SegmentedControl from "../SegmentedControl/SegmentedControl";
+import { addDays, addMonths, isSameMonth, monthMatrix, normalizeIso, parseIso, startOfWeek, toIso, weekDays, } from "../../utils/calendario";
+function Calendar(props) {
+    const rootRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const [internalDate, setInternalDate] = useState(() => "");
+    const [internalView, setInternalView] = useState(() => props.defaultView === "week" ? "week" : "month");
+    const [focusIso, setFocusIso] = useState(() => "");
+    function todayIso() {
+        return normalizeIso(props.today) || toIso(new Date());
+    }
+    function refIso() {
+        const informada = normalizeIso(props.date) ||
+            normalizeIso(internalDate) ||
+            normalizeIso(props.defaultDate);
+        return informada || todayIso();
+    }
+    function viewValue() {
+        const bruta = props.view !== undefined ? props.view : internalView;
+        return bruta === "week" ? "week" : "month";
+    }
+    function weekStart() {
+        return props.weekStartsOn === 1 ? 1 : 0;
+    }
+    function localeText() {
+        return props.locale || "pt-BR";
+    }
+    function limite() {
+        return props.maxVisible && props.maxVisible > 0 ? props.maxVisible : 3;
+    }
+    function rangeRows() {
+        return viewValue() === "week"
+            ? [weekDays(refIso(), weekStart())]
+            : monthMatrix(refIso(), weekStart());
+    }
+    function formatar(iso, opcoes) {
+        const texto = new Intl.DateTimeFormat(localeText(), opcoes).format(parseIso(iso));
+        const limpo = texto.replace(".", "");
+        return limpo.charAt(0).toUpperCase() + limpo.slice(1);
+    }
+    function titleText() {
+        if (viewValue() === "week") {
+            const dias = weekDays(refIso(), weekStart());
+            const formato = new Intl.DateTimeFormat(localeText(), {
+                day: "numeric",
+                month: "short",
+                year: "numeric",
+            });
+            const inicio = parseIso(dias[0]);
+            const fim = parseIso(dias[6]);
+            const anyFormato = formato;
+            return typeof anyFormato.formatRange === "function"
+                ? anyFormato.formatRange(inicio, fim)
+                : formato.format(inicio) + " – " + formato.format(fim);
+        }
+        return (formatar(refIso(), {
+            month: "long",
+        }) +
+            " " +
+            parseIso(refIso()).getFullYear());
+    }
+    function weekdayHeads() {
+        const base = rangeRows()[0] || [];
+        return base.map((iso) => ({
+            iso,
+            short: formatar(iso, {
+                weekday: "short",
+            }),
+            full: formatar(iso, {
+                weekday: "long",
+            }),
+        }));
+    }
+    function gridLabel() {
+        return props.ariaLabel || titleText();
+    }
+    function monthText() {
+        return props.monthLabel || "Mês";
+    }
+    function weekText() {
+        return props.weekLabel || "Semana";
+    }
+    function viewOptions() {
+        return [
+            {
+                value: "month",
+                label: monthText(),
+            },
+            {
+                value: "week",
+                label: weekText(),
+            },
+        ];
+    }
+    function rootClasses() {
+        return ["umds-calendar", "umds-calendar--" + viewValue(), props.className]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function tabIso() {
+        const todos = rangeRows().reduce((soma, linha) => soma.concat(linha), []);
+        const dentro = (iso) => todos.indexOf(iso) !== -1 &&
+            (viewValue() === "week" || isSameMonth(iso, refIso()));
+        if (focusIso && dentro(focusIso))
+            return focusIso;
+        if (dentro(todayIso()))
+            return todayIso();
+        return viewValue() === "week" ? todos[0] : refIso().slice(0, 8) + "01";
+    }
+    function eventMap() {
+        const mapa = {};
+        const lista = props.events || [];
+        for (let i = 0; i < lista.length; i++) {
+            const dia = normalizeIso(lista[i].date);
+            if (!dia)
+                continue;
+            if (!mapa[dia])
+                mapa[dia] = [];
+            mapa[dia].push(lista[i]);
+        }
+        for (const dia in mapa) {
+            mapa[dia].sort((a, b) => String(a.time || "").localeCompare(String(b.time || "")));
+        }
+        return mapa;
+    }
+    function nomeDoDia(iso, quantidade) {
+        if (props.dayLabel)
+            return props.dayLabel(iso, quantidade);
+        const data = new Intl.DateTimeFormat(localeText(), {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+        }).format(parseIso(iso));
+        const eventos = quantidade === 0
+            ? "sem eventos"
+            : quantidade === 1
+                ? "1 evento"
+                : quantidade + " eventos";
+        return data + ", " + eventos;
+    }
+    function textoDoMais(quantidade) {
+        return (props.moreLabel || "+{count}").replace("{count}", String(quantidade));
+    }
+    function nomeDoMais(iso, quantidade) {
+        const modelo = props.moreAriaLabel || "{count} eventos a mais em {date}";
+        const data = new Intl.DateTimeFormat(localeText(), {
+            day: "numeric",
+            month: "long",
+        }).format(parseIso(iso));
+        return modelo
+            .replace("{count}", String(quantidade))
+            .replace("{date}", data);
+    }
+    function weeks() {
+        const hoje = todayIso();
+        const foco = tabIso();
+        const selecionado = normalizeIso(props.selectedDate);
+        const emSemana = viewValue() === "week";
+        return rangeRows().map((linha) => ({
+            key: linha[0],
+            days: linha.map((iso) => {
+                const doDia = eventMap()[iso] || [];
+                const fora = !emSemana && !isSameMonth(iso, refIso());
+                const visiveis = emSemana ? doDia : doDia.slice(0, limite());
+                const escondidos = doDia.length - visiveis.length;
+                return {
+                    iso,
+                    day: parseIso(iso).getDate(),
+                    outside: fora,
+                    today: iso === hoje,
+                    selected: iso === selecionado,
+                    tabIndex: iso === foco ? 0 : -1,
+                    label: nomeDoDia(iso, doDia.length),
+                    classes: [
+                        "umds-calendar__cell",
+                        fora ? "umds-calendar__cell--outside" : "",
+                        iso === hoje ? "umds-calendar__cell--today" : "",
+                        iso === selecionado ? "umds-calendar__cell--selected" : "",
+                    ]
+                        .filter(Boolean)
+                        .join(" "),
+                    visible: visiveis,
+                    hidden: escondidos,
+                    moreText: textoDoMais(escondidos),
+                    moreAria: nomeDoMais(iso, escondidos),
+                };
+            }),
+        }));
+    }
+    function corCss(cor) {
+        const base = cor || "--umds-semantic-color-primary-pure";
+        return base.indexOf("--") === 0 ? "var(" + base + ")" : base;
+    }
+    function eventStyle(evento) {
+        const cor = corCss(evento.color || "");
+        return {
+            borderLeftColor: cor,
+            backgroundColor: "color-mix(in srgb, " +
+                cor +
+                " 16%, var(--umds-semantic-color-background-white))",
+        };
+    }
+    function mudarData(iso) {
+        setInternalDate(iso);
+        if (props.onDateChange)
+            props.onDateChange(iso);
+    }
+    function mudarVisao(valor) {
+        const visao = valor === "week" ? "week" : "month";
+        if (visao === viewValue())
+            return;
+        setInternalView(visao);
+        if (props.onViewChange)
+            props.onViewChange(visao);
+    }
+    function handlePrevious() {
+        mudarData(viewValue() === "week" ? addDays(refIso(), -7) : addMonths(refIso(), -1));
+    }
+    function handleNext() {
+        mudarData(viewValue() === "week" ? addDays(refIso(), 7) : addMonths(refIso(), 1));
+    }
+    function handleToday() {
+        mudarData(todayIso());
+    }
+    function irParaDia(iso) {
+        const visivel = rangeRows().some((linha) => linha.indexOf(iso) !== -1);
+        const nesteMes = viewValue() === "week" || isSameMonth(iso, refIso());
+        if (!visivel || !nesteMes)
+            mudarData(iso);
+        if (iso === focusIso && visivel && nesteMes) {
+            focarDia(iso);
+            return;
+        }
+        setFocusIso(iso);
+        focoPendenteRef.current = iso;
+    }
+    function focarDia(iso) {
+        if (!rootRef.current)
+            return;
+        const celula = rootRef.current.querySelector('[data-date="' + iso + '"]');
+        if (celula)
+            celula.focus();
+    }
+    function handleCellKeyDown(event, iso) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        // Só o próprio dia navega: a tecla vinda de um evento dentro dele não.
+        if (event.target !== event.currentTarget)
+            return;
+        const tecla = event.key;
+        let alvo = "";
+        if (tecla === "ArrowLeft")
+            alvo = addDays(iso, -1);
+        else if (tecla === "ArrowRight")
+            alvo = addDays(iso, 1);
+        else if (tecla === "ArrowUp")
+            alvo = addDays(iso, -7);
+        else if (tecla === "ArrowDown")
+            alvo = addDays(iso, 7);
+        else if (tecla === "Home")
+            alvo = startOfWeek(iso, weekStart());
+        else if (tecla === "End")
+            alvo = addDays(startOfWeek(iso, weekStart()), 6);
+        else if (tecla === "PageUp")
+            alvo = viewValue() === "week" ? addDays(iso, -7) : addMonths(iso, -1);
+        else if (tecla === "PageDown")
+            alvo = viewValue() === "week" ? addDays(iso, 7) : addMonths(iso, 1);
+        else if (tecla === "Enter" || tecla === " ") {
+            event.preventDefault();
+            handleDayClick(iso);
+            return;
+        }
+        else
+            return;
+        event.preventDefault();
+        irParaDia(alvo);
+    }
+    function handleCellFocus(event, iso) {
+        // Só o foco no próprio dia conta: o foco num evento dentro dele não muda o dia.
+        if (event && event.target !== event.currentTarget)
+            return;
+        if (focusIso !== iso)
+            setFocusIso(iso);
+    }
+    function handleDayClick(iso) {
+        setFocusIso(iso);
+        if (props.onDayClick)
+            props.onDayClick(iso);
+    }
+    function handleEventClick(event, evento) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        if (props.onEventClick)
+            props.onEventClick(evento);
+    }
+    function handleMoreClick(event, iso) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        const todos = eventMap()[iso] || [];
+        if (props.onMoreClick)
+            props.onMoreClick(iso, todos.slice(limite()));
+    }
+    useEffect(() => {
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            focarDia(alvo);
+        }
+    });
+    return (_jsxs("div", { ref: rootRef, className: rootClasses(), children: [_jsxs("div", { className: "umds-calendar__toolbar", children: [_jsx("div", { className: "umds-calendar__toolbar-start", children: props.headerStart ? _jsx(_Fragment, { children: props.headerStart }) : null }), _jsxs("div", { className: "umds-calendar__nav", children: [_jsx(Button, { variant: "icon", size: "sm", ariaLabel: props.previousLabel || "Anterior", onClick: (event) => handlePrevious(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faChevronLeft }) }), _jsx("span", { "aria-live": "polite", className: "umds-calendar__title", children: titleText() }), _jsx(Button, { variant: "icon", size: "sm", ariaLabel: props.nextLabel || "Próximo", onClick: (event) => handleNext(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faChevronRight }) }), _jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => handleToday(), children: props.todayLabel || "Hoje" })] }), _jsxs("div", { className: "umds-calendar__toolbar-end", children: [props.headerEnd ? _jsx(_Fragment, { children: props.headerEnd }) : null, !props.hideViewSwitcher ? (_jsx("div", { role: "group", "aria-label": props.viewLabel || "Visão", children: _jsx(SegmentedControl, { size: "sm", options: viewOptions(), value: viewValue(), onChange: (valor) => mudarVisao(valor) }) })) : null] })] }), _jsxs("div", { role: "grid", className: "umds-calendar__grid", "aria-label": gridLabel(), children: [_jsx("div", { role: "row", className: "umds-calendar__weekdays", children: weekdayHeads()?.map((cabecalho) => (_jsx("div", { role: "columnheader", className: "umds-calendar__weekday", "aria-label": cabecalho.full, children: _jsx("span", { "aria-hidden": "true", children: cabecalho.short }) }, cabecalho.iso))) }), weeks()?.map((semana) => (_jsx("div", { role: "row", className: "umds-calendar__week", children: semana.days?.map((dia) => (_jsxs("div", { role: "gridcell", "data-date": dia.iso, tabIndex: dia.tabIndex, "aria-label": dia.label, "aria-selected": dia.selected ? "true" : undefined, "aria-current": dia.today ? "date" : undefined, onClick: (event) => handleDayClick(dia.iso), onKeyDown: (event) => handleCellKeyDown(event, dia.iso), onFocus: (event) => handleCellFocus(event, dia.iso), className: dia.classes, children: [_jsx("span", { "aria-hidden": "true", className: "umds-calendar__day-number", children: dia.day }), _jsxs("div", { className: "umds-calendar__events", children: [dia.visible?.map((evento, posicao) => (_jsxs("button", { type: "button", className: "umds-calendar__event", style: eventStyle(evento), tabIndex: dia.tabIndex, title: evento.title, onClick: (event) => handleEventClick(event, evento), children: [evento.time ? (_jsx("span", { className: "umds-calendar__event-time", children: evento.time })) : null, _jsx("span", { className: "umds-calendar__event-title", children: evento.title })] }, evento.id || dia.iso + "-" + posicao))), dia.hidden > 0 ? (_jsx("button", { type: "button", className: "umds-calendar__more", tabIndex: dia.tabIndex, "aria-label": dia.moreAria, onClick: (event) => handleMoreClick(event, dia.iso), children: dia.moreText })) : null] })] }, dia.iso))) }, semana.key)))] })] }));
+}
+export default Calendar;

package/dist/components/Chips/Chips.css

@@ -28,6 +28,14 @@
 }
 
 /* ── Tamanhos ── */
+/* xs: 20px de altura (16 + 4, dois degraus do DS somados; sem token próprio).
+   Fonte de 12px: a escala do DS não tem o 11px do CrisDoc. */
+.umds-chip--xs {
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck));
+  padding: 0 var(--umds-primitive-spacing-nano); /* 8px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
 .umds-chip--sm {
   height: 24px; /* dimensão do protótipo sem token 1DS */
   padding: 0 8px; /* dimensão do protótipo sem token 1DS */
@@ -124,6 +132,36 @@
 
 /* Ícone do X (Icon FA "xmark") — tamanho via customSize no .lite.tsx (8px sm / 10px md) */
 
+/* ── × em círculo (circularRemove) ──
+   O círculo é um ::before de 14px na cor do texto do chip com 15% de opacidade
+   (tinge cada variante sem cor própria); o glifo fica por cima. */
+.umds-chip--remove-circle .umds-chip__remove {
+  position: relative;
+  opacity: 1;
+}
+
+.umds-chip--remove-circle .umds-chip__remove::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px; /* círculo de 14px, como o CrisDoc */
+  height: 14px;
+  transform: translate(-50%, -50%);
+  border-radius: var(--umds-primitive-border-radius-circular);
+  background-color: currentColor;
+  opacity: 0.15;
+  transition: opacity var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-chip--remove-circle .umds-chip__remove:hover:not(:disabled)::before {
+  opacity: 0.3;
+}
+
+.umds-chip--remove-circle .umds-chip__remove > * {
+  position: relative; /* o glifo fica acima do círculo */
+}
+
 /* ── Filter chip (onClick/selected) ── */
 /* Botão transparente do label: herda tudo do chip — visual em repouso idêntico. */
 .umds-chip__action {

package/dist/components/Chips/Chips.d.ts

@@ -5,7 +5,8 @@ import './Chips.css';
  * @property {string} label - Texto exibido no chip (obrigatório)
  * @property {boolean} removable - Exibe o botão × para remover o chip
  * @property {boolean} disabled - Desabilita o chip (visual esmaecido e sem interação)
- * @property {string} size - Tamanho do chip: 'sm' | 'md'
+ * @property {string} size - Tamanho do chip: 'xs' (20px, para dentro de card e linha de lista) | 'sm' (24px) | 'md' (28px)
+ * @property {boolean} circularRemove - Põe o × do chip removível dentro de um círculo tingido da cor do chip (o marcador do card da inbox). Só vale com `removable`.
  * @property {string} variant - Variante visual: 'default' | 'primary' | 'positive' | 'negative' | 'info'
  * @property {boolean} selected - Estado selecionado (filter chip) — vira aria-pressed
  * @property {function} onClick - Torna o chip acionável (filter chip): o label vira um
@@ -19,7 +20,9 @@ export interface ChipsProps {
     label: string;
     removable?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
+    /** × dentro de um círculo tingido da cor do chip. Só vale com `removable`. @default false */
+    circularRemove?: boolean;
     variant?: "default" | "primary" | "positive" | "negative" | "info";
     /** Estado selecionado do filter chip (comunicado via aria-pressed) */
     selected?: boolean;

package/dist/components/Chips/Chips.js

@@ -11,6 +11,7 @@ function Chips(props) {
             `umds-chip--${props.variant || "default"}`,
             props.disabled ? "umds-chip--disabled" : "",
             props.removable ? "umds-chip--removable" : "",
+            props.removable && props.circularRemove ? "umds-chip--remove-circle" : "",
             props.selected ? "umds-chip--selected" : "",
             props.onClick ? "umds-chip--clickable" : "",
             props.className,
@@ -19,7 +20,7 @@ function Chips(props) {
             .join(" ");
     }
     function iconSize() {
-        return props.size === "sm" ? "8px" : "10px";
+        return props.size === "sm" || props.size === "xs" ? "8px" : "10px";
     }
     function removeLabelText() {
         return (props.removeAriaLabel || "Remover") + " " + props.label;

package/dist/components/Coachmark/Coachmark.css

@@ -0,0 +1,118 @@
+/* ─────────────────────────────────────────────
+   COACHMARK
+   Tour guiado: véu com recorte no alvo e um cartão que o aponta.
+
+   O recorte é uma caixa transparente cuja SOMBRA enorme escurece o resto da
+   página (um buraco no véu sem máscara nem SVG). Quando o passo não tem alvo,
+   o véu é cheio e o cartão vai ao centro.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-coachmark {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--umds-semantic-layer-popover);
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+/* Captura o clique: a página atrás fica inerte durante o tour. */
+.umds-coachmark__veil {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.umds-coachmark--no-target .umds-coachmark__veil {
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.umds-coachmark__cutout {
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  /* 100vmax: maior que qualquer tela, o recorte nunca deixa a borda do véu à mostra. */
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+  transition:
+    top var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    left var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    width var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    height var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard);
+}
+
+/* ── Cartão ── */
+.umds-coachmark__card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  /* 360px: 200px + 160px da escala; nunca passa da tela. */
+  width: calc(var(--umds-primitive-spacing-giant) + var(--umds-primitive-spacing-huge));
+  max-width: calc(100vw - var(--umds-primitive-spacing-xs));
+  padding: var(--umds-primitive-spacing-xxs); /* 24px */
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  border-radius: var(--umds-primitive-border-radius-md); /* 16px */
+  box-shadow: var(--umds-primitive-shadow-level-3);
+  outline: none;
+}
+
+.umds-coachmark__card--centered {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.umds-coachmark__card:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-coachmark__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-top: var(--umds-primitive-spacing-nano);
+}
+
+.umds-coachmark__actions {
+  display: inline-flex;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-left: auto;
+}
+
+/* Só para leitor de tela: "2 de 8: título", a cada passo. */
+.umds-coachmark__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .umds-coachmark__card {
+    border: var(--umds-primitive-border-width-thin) solid CanvasText;
+  }
+
+  .umds-coachmark__cutout {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/Coachmark/Coachmark.d.ts

@@ -0,0 +1,75 @@
+import './Coachmark.css';
+/**
+ * Passo do tour.
+ * @property {string} id - Identidade do passo (opcional)
+ * @property {any} target - O que o passo aponta: seletor CSS (`"#aba-fluxos"`), elemento, ref do React (`{ current }`), ref do Vue (`{ value }`) ou função que devolve um deles. Sem alvo (ou alvo que não existe na tela), o cartão fica no centro e a página inteira escurece.
+ * @property {string} title - Título do passo
+ * @property {string} content - Texto do passo
+ * @property {string} placement - Lado do cartão em relação ao alvo: 'top' | 'bottom' | 'left' | 'right' (padrão 'bottom'; inverte sozinho se não couber)
+ */
+export interface CoachmarkStep {
+    id?: string;
+    target?: any;
+    title: string;
+    content?: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    [key: string]: any;
+}
+/**
+ * Coachmark — tour guiado: uma sequência de passos, cada um apontando um
+ * elemento da tela com um cartão, enquanto o resto da página escurece e o
+ * elemento fica destacado num recorte.
+ *
+ * O cartão é um diálogo modal (`role="dialog"`, `aria-modal`): o foco entra nele
+ * ao abrir, o Tab fica preso nele, Esc sai do tour, as setas esquerda e direita
+ * voltam e avançam, e o foco volta ao elemento de antes ao fechar. A cada passo o
+ * leitor de tela ouve "2 de 8: título" (região `aria-live`).
+ *
+ * O componente é CONTROLADO por `open`: o tour só existe com `open` verdadeiro, e
+ * `onClose(motivo)` avisa quando ele quer fechar (`"finish"` no último
+ * "Concluir", `"skip"` em "Sair do tour", `"escape"` no Esc). O passo atual é
+ * interno (`defaultStep` para começar adiante), ou controlado por `step` com
+ * `onStepChange`. Reabrir recomeça do primeiro passo.
+ *
+ * O alvo é achado por seletor, elemento ou ref e acompanhado: rolagem,
+ * redimensionamento e mudança de tamanho do alvo reposicionam o recorte e o
+ * cartão. Todos os textos do cartão são props (`nextLabel`, `previousLabel`,
+ * `finishLabel`, `skipLabel`, `counterLabel`): em tela em inglês, passe todos.
+ *
+ * Limite: a página atrás fica inerte (o véu captura o clique), então o alvo
+ * não é clicável durante o tour.
+ * @property {boolean} open - Mostra o tour
+ * @property {CoachmarkStep[]} steps - Os passos, em ordem
+ * @property {number} step - Passo atual, a partir de 0 (controlado)
+ * @property {number} defaultStep - Passo inicial (não controlado)
+ * @property {number} padding - Folga do recorte em torno do alvo, em px (padrão 8)
+ * @property {string} nextLabel - Texto de "Próximo" (padrão: "Próximo")
+ * @property {string} previousLabel - Texto de "Anterior" (padrão: "Anterior")
+ * @property {string} finishLabel - Texto do botão do último passo (padrão: "Concluir")
+ * @property {string} skipLabel - Texto de sair do tour (padrão: "Sair do tour")
+ * @property {string} counterLabel - Contador; `{current}` e `{total}` são trocados (padrão: "{current} de {total}")
+ * @property {boolean} hideSkip - Esconde o "Sair do tour" (o Esc continua saindo)
+ * @property {string} className - Classes CSS adicionais no cartão
+ * @property {function} onClose - Chamado com o motivo: 'finish' | 'skip' | 'escape'
+ * @property {function} onStepChange - Chamado com o novo passo (a partir de 0)
+ * @quandoUsar Apresentar uma tela nova ou uma funcionalidade em poucos passos curtos (até uns 8), na primeira visita ou a pedido ("Fazer o tour guiado").
+ * @quandoNaoUsar Para uma dica sobre UM elemento, use `Tooltip` ou `Popover`. Para uma informação que não pode ser perdida, use texto na própria tela: tour se fecha e se esquece. Para um fluxo em etapas que a pessoa preenche, use `Stepper`.
+ */
+export interface CoachmarkProps {
+    open?: boolean;
+    steps?: CoachmarkStep[];
+    step?: number;
+    defaultStep?: number;
+    padding?: number;
+    nextLabel?: string;
+    previousLabel?: string;
+    finishLabel?: string;
+    skipLabel?: string;
+    counterLabel?: string;
+    hideSkip?: boolean;
+    className?: string;
+    onClose?: (reason: "finish" | "skip" | "escape") => void;
+    onStepChange?: (step: number) => void;
+}
+declare function Coachmark(props: CoachmarkProps): import("react/jsx-runtime").JSX.Element;
+export default Coachmark;