npm - @elogroup-sereduc/portal-aluno-tour - Versions diffs - 1.0.4 → 1.0.6 - Mend

@elogroup-sereduc/portal-aluno-tour 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +16 -2
package/dist/components/Tour.d.ts.map +1 -1
package/dist/components/Tour.js +66 -39
package/dist/tour.css +566 -0
package/package.json +10 -3
package/postcss.config.js +6 -0
package/src/components/Tour.tsx +86 -57
package/src/styles/tour.css +3 -0
package/tailwind.config.js +4 -1

package/README.md CHANGED Viewed

@@ -10,9 +10,23 @@ npm install @elogroup-sereduc/portal-aluno-tour
 ## Configuração do Tailwind
-Este pacote usa `@elogroup-sereduc/portal-aluno-tailwind-config` com o prefixo `portal-tour:`.
+Este pacote usa `@elogroup-sereduc/portal-aluno-tailwind-config` com o prefixo `tour:`.
-Certifique-se de que o Tailwind está configurado para processar as classes deste pacote. O pacote inclui um `tailwind.config.js` que estende a configuração compartilhada.
+O CSS do Tailwind é gerado automaticamente durante o build e está disponível em `dist/tour.css`.
+### Importar o CSS
+Você precisa importar o CSS do pacote no seu projeto:
+```tsx
+import "@elogroup-sereduc/portal-aluno-tour/dist/tour.css";
+```
+Ou no seu arquivo CSS principal:
+```css
+@import "@elogroup-sereduc/portal-aluno-tour/dist/tour.css";
+```
 ## Uso

package/dist/components/Tour.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,~~kDAqcX~~"}
1	+ {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDAkeX"}

package/dist/components/Tour.js CHANGED Viewed

@@ -16,19 +16,20 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
     const { nextLabel = "Próximo", prevLabel = "Anterior", skipLabel = "Pular", doneLabel = "Concluir", showProgress = true, showBullets = true, exitOnOverlayClick = false, exitOnEsc = true, } = options;
     // Calcula a posição da tooltip baseado no elemento destacado
     const calculateTooltipPosition = useCallback((element, position = "bottom") => {
+        // Recalcula o rect após possíveis mudanças de scroll
         const rect = element.getBoundingClientRect();
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        // Tamanho estimado da tooltip (ajuste conforme necessário)
+        // Tamanho estimado da tooltip
         const tooltipWidth = 384; // max-w-sm = 384px
-        const tooltipHeight = 200; // altura estimada
-        const spacing = 16; // espaçamento entre elemento e tooltip
+        const tooltipHeight = 250; // altura estimada com conteúdo
+        const spacing = 8; // espaçamento menor para ficar mais próximo
         let top = 0;
         let left = 0;
         let finalPosition = position;
-        // Calcula posição base
+        // Calcula posição base - sempre próxima ao elemento
         switch (position) {
             case "top":
                 top = rect.top + scrollTop - spacing;
@@ -51,48 +52,69 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                 left = rect.left + scrollLeft + rect.width / 2;
                 finalPosition = "bottom";
         }
-        // Ajusta posição se a tooltip sair da viewport
+        // Ajusta posição apenas se necessário para não sair da viewport
+        // Mas mantém o mais próximo possível do elemento
         if (finalPosition === "bottom" || finalPosition === "top") {
-            // Ajusta horizontalmente
-            if (left - tooltipWidth / 2 < scrollLeft) {
-                left = scrollLeft + tooltipWidth / 2 + 16;
+            // Ajusta horizontalmente apenas se necessário, mantendo próximo ao centro do elemento
+            const elementCenterX = rect.left + scrollLeft + rect.width / 2;
+            const minLeft = scrollLeft + tooltipWidth / 2 + 8;
+            const maxLeft = scrollLeft + viewportWidth - tooltipWidth / 2 - 8;
+            if (elementCenterX < minLeft) {
+                left = minLeft;
             }
-            else if (left + tooltipWidth / 2 > scrollLeft + viewportWidth) {
-                left = scrollLeft + viewportWidth - tooltipWidth / 2 - 16;
+            else if (elementCenterX > maxLeft) {
+                left = maxLeft;
             }
-            // Se não couber embaixo, tenta em cima
-            if (finalPosition === "bottom" && top + tooltipHeight > scrollTop + viewportHeight) {
-                if (rect.top - tooltipHeight > scrollTop) {
-                    top = rect.top + scrollTop - tooltipHeight - spacing;
+            else {
+                left = elementCenterX; // Mantém centralizado no elemento
+            }
+            // Verifica se precisa mudar de posição vertical
+            if (finalPosition === "bottom") {
+                const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
+                const spaceAbove = rect.top - scrollTop;
+                if (spaceBelow < tooltipHeight + spacing && spaceAbove > spaceBelow) {
+                    // Muda para cima se houver mais espaço
+                    top = rect.top + scrollTop - spacing;
                     finalPosition = "top";
                 }
             }
-            // Se não couber em cima, tenta embaixo
-            else if (finalPosition === "top" && top - tooltipHeight < scrollTop) {
-                if (rect.bottom + tooltipHeight < scrollTop + viewportHeight) {
+            else if (finalPosition === "top") {
+                const spaceAbove = rect.top - scrollTop;
+                const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
+                if (spaceAbove < tooltipHeight + spacing && spaceBelow > spaceAbove) {
+                    // Muda para baixo se houver mais espaço
                     top = rect.bottom + scrollTop + spacing;
                     finalPosition = "bottom";
                 }
             }
         }
         else if (finalPosition === "left" || finalPosition === "right") {
-            // Ajusta verticalmente
-            if (top - tooltipHeight / 2 < scrollTop) {
-                top = scrollTop + tooltipHeight / 2 + 16;
+            // Ajusta verticalmente apenas se necessário
+            const elementCenterY = rect.top + scrollTop + rect.height / 2;
+            const minTop = scrollTop + tooltipHeight / 2 + 8;
+            const maxTop = scrollTop + viewportHeight - tooltipHeight / 2 - 8;
+            if (elementCenterY < minTop) {
+                top = minTop;
+            }
+            else if (elementCenterY > maxTop) {
+                top = maxTop;
             }
-            else if (top + tooltipHeight / 2 > scrollTop + viewportHeight) {
-                top = scrollTop + viewportHeight - tooltipHeight / 2 - 16;
+            else {
+                top = elementCenterY; // Mantém centralizado no elemento
             }
-            // Se não couber à esquerda, tenta à direita
-            if (finalPosition === "left" && left - tooltipWidth < scrollLeft) {
-                if (rect.right + tooltipWidth < scrollLeft + viewportWidth) {
+            // Verifica se precisa mudar de posição horizontal
+            if (finalPosition === "left") {
+                const spaceLeft = rect.left - scrollLeft;
+                const spaceRight = viewportWidth - (rect.right - scrollLeft);
+                if (spaceLeft < tooltipWidth + spacing && spaceRight > spaceLeft) {
                     left = rect.right + scrollLeft + spacing;
                     finalPosition = "right";
                 }
             }
-            // Se não couber à direita, tenta à esquerda
-            else if (finalPosition === "right" && left + tooltipWidth > scrollLeft + viewportWidth) {
-                if (rect.left - tooltipWidth > scrollLeft) {
+            else if (finalPosition === "right") {
+                const spaceRight = viewportWidth - (rect.right - scrollLeft);
+                const spaceLeft = rect.left - scrollLeft;
+                if (spaceRight < tooltipWidth + spacing && spaceLeft > spaceRight) {
                     left = rect.left + scrollLeft - spacing;
                     finalPosition = "left";
                 }
@@ -133,11 +155,16 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
         setHighlightedElement(element);
         // Scroll para o elemento
         element.scrollIntoView({ behavior: "smooth", block: "center" });
-        // Calcula posição da tooltip após um pequeno delay para garantir que o scroll terminou
+        // Calcula posição da tooltip após um delay para garantir que o scroll terminou
+        // Usa um delay maior para garantir que o scroll terminou completamente
         setTimeout(() => {
-            const position = calculateTooltipPosition(element, step.position || "bottom");
-            setTooltipPosition(position);
-        }, 300);
+            // Recalcula o rect após o scroll
+            const updatedRect = element.getBoundingClientRect();
+            if (updatedRect.width > 0 && updatedRect.height > 0) {
+                const position = calculateTooltipPosition(element, step.position || "bottom");
+                setTooltipPosition(position);
+            }
+        }, 400);
     }, [isVisible, currentStep, steps, calculateTooltipPosition]);
     // Adiciona overlay e highlight ao elemento
     useEffect(() => {
@@ -247,7 +274,7 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                     backgroundColor: "rgba(0, 0, 0, 0.6)",
                     zIndex: 9998,
                     pointerEvents: exitOnOverlayClick ? "auto" : "none",
-                } }), tooltipPosition && currentStepData && highlightedElement && (_jsxs("div", { ref: tooltipRef, className: "portal-tour:max-w-sm", style: {
+                } }), tooltipPosition && currentStepData && highlightedElement && (_jsxs("div", { ref: tooltipRef, className: "tour:max-w-sm", style: {
                     position: "fixed",
                     top: tooltipPosition.position === "bottom" || tooltipPosition.position === "left" || tooltipPosition.position === "right"
                         ? `${tooltipPosition.top}px`
@@ -260,24 +287,24 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                         ? "translate(0, -50%)"
                         : "translate(-50%, 0)",
                     zIndex: 10001,
-                }, children: [_jsxs("div", { className: "portal-tour:bg-white portal-tour:rounded-lg portal-tour:shadow-xl portal-tour:p-6 portal-tour:relative", children: [_jsx("button", { onClick: handleExit, className: "portal-tour:absolute portal-tour:top-2 portal-tour:right-2 portal-tour:p-1 portal-tour:rounded-full portal-tour:hover:bg-gray-100 portal-tour:transition-colors portal-tour:z-10", "aria-label": "Fechar tour", children: _jsx(HiXMark, { className: "portal-tour:w-5 portal-tour:h-5 portal-tour:text-gray-500" }) }), currentStepData.title && (_jsx("h3", { className: "portal-tour:text-lg portal-tour:font-semibold portal-tour:text-gray-900 portal-tour:mb-2 portal-tour:pr-6", children: currentStepData.title })), _jsx("p", { className: "portal-tour:text-gray-700 portal-tour:mb-4", children: currentStepData.intro }), showProgress && (_jsxs("div", { className: "portal-tour:mb-4", children: [_jsx("div", { className: "portal-tour:w-full portal-tour:bg-gray-200 portal-tour:rounded-full portal-tour:h-2", children: _jsx("div", { className: "portal-tour:bg-brand-primary portal-tour:h-2 portal-tour:rounded-full portal-tour:transition-all portal-tour:duration-300", style: { width: `${progress}%` } }) }), _jsxs("p", { className: "portal-tour:text-xs portal-tour:text-gray-500 portal-tour:mt-1 portal-tour:text-center", children: [currentStep + 1, " de ", steps.length] })] })), showBullets && (_jsx("div", { className: "portal-tour:flex portal-tour:justify-center portal-tour:gap-1 portal-tour:mb-4", children: steps.map((_, index) => (_jsx("button", { onClick: () => setCurrentStep(index), className: `portal-tour:w-2 portal-tour:h-2 portal-tour:rounded-full portal-tour:transition-all ${index === currentStep
-                                        ? "portal-tour:bg-brand-primary portal-tour:w-6"
-                                        : "portal-tour:bg-gray-300 portal-tour:hover:bg-gray-400"}`, "aria-label": `Ir para passo ${index + 1}` }, index))) })), _jsxs("div", { className: "portal-tour:flex portal-tour:justify-between portal-tour:items-center portal-tour:gap-2", children: [_jsx("div", { className: "portal-tour:flex portal-tour:gap-2", children: !isFirstStep && (_jsx(Button, { variant: "bordered", onPress: handlePrev, startContent: _jsx(HiChevronLeft, { className: "portal-tour:w-4 portal-tour:h-4" }), children: prevLabel })) }), _jsxs("div", { className: "portal-tour:flex portal-tour:gap-2", children: [_jsx(Button, { variant: "light", onPress: handleSkip, children: skipLabel }), _jsx(Button, { color: "primary", onPress: isLastStep ? handleComplete : handleNext, endContent: !isLastStep ? _jsx(HiChevronRight, { className: "portal-tour:w-4 portal-tour:h-4" }) : undefined, children: isLastStep ? doneLabel : nextLabel })] })] })] }), tooltipPosition.position === "bottom" && (_jsx("div", { className: "portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent", style: {
+                }, children: [_jsxs("div", { className: "tour:bg-white tour:rounded-lg tour:shadow-xl tour:p-6 tour:relative", children: [_jsx("button", { onClick: handleExit, className: "tour:absolute tour:top-2 tour:right-2 tour:p-1 tour:rounded-full tour:hover:bg-gray-100 tour:transition-colors tour:z-10", "aria-label": "Fechar tour", children: _jsx(HiXMark, { className: "tour:w-5 tour:h-5 tour:text-gray-500" }) }), currentStepData.title && (_jsx("h3", { className: "tour:text-lg tour:font-semibold tour:text-gray-900 tour:mb-2 tour:pr-6", children: currentStepData.title })), _jsx("p", { className: "tour:text-gray-700 tour:mb-4", children: currentStepData.intro }), showProgress && (_jsxs("div", { className: "tour:mb-4", children: [_jsx("div", { className: "tour:w-full tour:bg-gray-200 tour:rounded-full tour:h-2", children: _jsx("div", { className: "tour:bg-brand-primary tour:h-2 tour:rounded-full tour:transition-all tour:duration-300", style: { width: `${progress}%` } }) }), _jsxs("p", { className: "tour:text-xs tour:text-gray-500 tour:mt-1 tour:text-center", children: [currentStep + 1, " de ", steps.length] })] })), showBullets && (_jsx("div", { className: "tour:flex tour:justify-center tour:gap-1 tour:mb-4", children: steps.map((_, index) => (_jsx("button", { onClick: () => setCurrentStep(index), className: `tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${index === currentStep
+                                        ? "tour:bg-brand-primary tour:w-6"
+                                        : "tour:bg-gray-300 tour:hover:bg-gray-400"}`, "aria-label": `Ir para passo ${index + 1}` }, index))) })), _jsxs("div", { className: "tour:flex tour:justify-between tour:items-center tour:gap-2", children: [_jsx("div", { className: "tour:flex tour:gap-2", children: !isFirstStep && (_jsx(Button, { variant: "bordered", onPress: handlePrev, startContent: _jsx(HiChevronLeft, { className: "tour:w-4 tour:h-4" }), children: prevLabel })) }), _jsxs("div", { className: "tour:flex tour:gap-2", children: [_jsx(Button, { variant: "light", onPress: handleSkip, children: skipLabel }), _jsx(Button, { color: "primary", onPress: isLastStep ? handleComplete : handleNext, endContent: !isLastStep ? _jsx(HiChevronRight, { className: "tour:w-4 tour:h-4" }) : undefined, children: isLastStep ? doneLabel : nextLabel })] })] })] }), tooltipPosition.position === "bottom" && (_jsx("div", { className: "tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent", style: {
                             top: "-16px",
                             left: "50%",
                             transform: "translateX(-50%)",
                             borderColor: "transparent transparent white transparent",
-                        } })), tooltipPosition.position === "top" && (_jsx("div", { className: "portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent", style: {
+                        } })), tooltipPosition.position === "top" && (_jsx("div", { className: "tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent", style: {
                             bottom: "-16px",
                             left: "50%",
                             transform: "translateX(-50%)",
                             borderColor: "white transparent transparent transparent",
-                        } })), tooltipPosition.position === "right" && (_jsx("div", { className: "portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent", style: {
+                        } })), tooltipPosition.position === "right" && (_jsx("div", { className: "tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent", style: {
                             left: "-16px",
                             top: "50%",
                             transform: "translateY(-50%)",
                             borderColor: "transparent white transparent transparent",
-                        } })), tooltipPosition.position === "left" && (_jsx("div", { className: "portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent", style: {
+                        } })), tooltipPosition.position === "left" && (_jsx("div", { className: "tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent", style: {
                             right: "-16px",
                             top: "50%",
                             transform: "translateY(-50%)",

package/dist/tour.css ADDED Viewed

@@ -0,0 +1,566 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --tour-color-gray-100: oklch(96.7% 0.003 264.542);
+    --tour-color-gray-200: oklch(92.8% 0.006 264.531);
+    --tour-color-gray-300: oklch(87.2% 0.01 258.338);
+    --tour-color-gray-400: oklch(70.7% 0.022 261.325);
+    --tour-color-gray-500: oklch(55.1% 0.027 264.364);
+    --tour-color-gray-700: oklch(37.3% 0.034 259.733);
+    --tour-color-gray-900: oklch(21% 0.034 264.665);
+    --tour-color-white: #fff;
+    --tour-spacing: 0.25rem;
+    --tour-container-sm: 24rem;
+    --tour-text-xs: 0.75rem;
+    --tour-text-xs--line-height: calc(1 / 0.75);
+    --tour-text-lg: 1.125rem;
+    --tour-text-lg--line-height: calc(1.75 / 1.125);
+    --tour-font-weight-semibold: 600;
+    --tour-radius-lg: 0.5rem;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace), Fira Code, Fira Mono, Courier New, monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .tour\:absolute {
+    position: absolute;
+  }
+  .tour\:relative {
+    position: relative;
+  }
+  .tour\:top-2 {
+    top: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:right-2 {
+    right: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:z-10 {
+    z-index: 10;
+  }
+  .tour\:mt-1 {
+    margin-top: calc(var(--tour-spacing) * 1);
+  }
+  .tour\:mb-2 {
+    margin-bottom: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:mb-4 {
+    margin-bottom: calc(var(--tour-spacing) * 4);
+  }
+  .tour\:flex {
+    display: flex;
+  }
+  .tour\:h-0 {
+    height: calc(var(--tour-spacing) * 0);
+  }
+  .tour\:h-2 {
+    height: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:h-4 {
+    height: calc(var(--tour-spacing) * 4);
+  }
+  .tour\:h-5 {
+    height: calc(var(--tour-spacing) * 5);
+  }
+  .tour\:w-0 {
+    width: calc(var(--tour-spacing) * 0);
+  }
+  .tour\:w-2 {
+    width: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:w-4 {
+    width: calc(var(--tour-spacing) * 4);
+  }
+  .tour\:w-5 {
+    width: calc(var(--tour-spacing) * 5);
+  }
+  .tour\:w-6 {
+    width: calc(var(--tour-spacing) * 6);
+  }
+  .tour\:w-full {
+    width: 100%;
+  }
+  .tour\:max-w-sm {
+    max-width: var(--tour-container-sm);
+  }
+  .tour\:items-center {
+    align-items: center;
+  }
+  .tour\:justify-between {
+    justify-content: space-between;
+  }
+  .tour\:justify-center {
+    justify-content: center;
+  }
+  .tour\:gap-1 {
+    gap: calc(var(--tour-spacing) * 1);
+  }
+  .tour\:gap-2 {
+    gap: calc(var(--tour-spacing) * 2);
+  }
+  .tour\:rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .tour\:rounded-lg {
+    border-radius: var(--tour-radius-lg);
+  }
+  .tour\:border-8 {
+    border-style: var(--tw-border-style);
+    border-width: 8px;
+  }
+  .tour\:border-transparent {
+    border-color: transparent;
+  }
+  .tour\:bg-brand-primary {
+    background-color: var(--brand-primary);
+  }
+  .tour\:bg-gray-200 {
+    background-color: var(--tour-color-gray-200);
+  }
+  .tour\:bg-gray-300 {
+    background-color: var(--tour-color-gray-300);
+  }
+  .tour\:bg-white {
+    background-color: var(--tour-color-white);
+  }
+  .tour\:p-1 {
+    padding: calc(var(--tour-spacing) * 1);
+  }
+  .tour\:p-6 {
+    padding: calc(var(--tour-spacing) * 6);
+  }
+  .tour\:pr-6 {
+    padding-right: calc(var(--tour-spacing) * 6);
+  }
+  .tour\:text-center {
+    text-align: center;
+  }
+  .tour\:text-lg {
+    font-size: var(--tour-text-lg);
+    line-height: var(--tw-leading, var(--tour-text-lg--line-height));
+  }
+  .tour\:text-xs {
+    font-size: var(--tour-text-xs);
+    line-height: var(--tw-leading, var(--tour-text-xs--line-height));
+  }
+  .tour\:font-semibold {
+    --tw-font-weight: var(--tour-font-weight-semibold);
+    font-weight: var(--tour-font-weight-semibold);
+  }
+  .tour\:text-gray-500 {
+    color: var(--tour-color-gray-500);
+  }
+  .tour\:text-gray-700 {
+    color: var(--tour-color-gray-700);
+  }
+  .tour\:text-gray-900 {
+    color: var(--tour-color-gray-900);
+  }
+  .tour\:shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .tour\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .tour\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .tour\:duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .tour\:hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--tour-color-gray-100);
+      }
+    }
+  }
+  .tour\:hover\:bg-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--tour-color-gray-400);
+      }
+    }
+  }
+}
+@layer base {
+  :root, [data-theme] {
+    color: hsl(var(--heroui-foreground));
+    background-color: hsl(var(--heroui-background));
+  }
+}
+@layer base {
+  :root, [data-theme=light] {
+    color-scheme: light;
+    --heroui-background: 0 0% 100%;
+    --heroui-foreground-50: 0 0% 98.04%;
+    --heroui-foreground-100: 240 4.76% 95.88%;
+    --heroui-foreground-200: 240 5.88% 90%;
+    --heroui-foreground-300: 240 4.88% 83.92%;
+    --heroui-foreground-400: 240 5.03% 64.9%;
+    --heroui-foreground-500: 240 3.83% 46.08%;
+    --heroui-foreground-600: 240 5.2% 33.92%;
+    --heroui-foreground-700: 240 5.26% 26.08%;
+    --heroui-foreground-800: 240 3.7% 15.88%;
+    --heroui-foreground-900: 240 5.88% 10%;
+    --heroui-foreground: 201.81999999999994 24.44% 8.82%;
+    --heroui-divider: 0 0% 6.67%;
+    --heroui-focus: 212.01999999999998 100% 46.67%;
+    --heroui-overlay: 0 0% 0%;
+    --heroui-content1: 0 0% 100%;
+    --heroui-content1-foreground: 201.81999999999994 24.44% 8.82%;
+    --heroui-content2: 240 4.76% 95.88%;
+    --heroui-content2-foreground: 240 3.7% 15.88%;
+    --heroui-content3: 240 5.88% 90%;
+    --heroui-content3-foreground: 240 5.26% 26.08%;
+    --heroui-content4: 240 4.88% 83.92%;
+    --heroui-content4-foreground: 240 5.2% 33.92%;
+    --heroui-default-50: 0 0% 98.04%;
+    --heroui-default-100: 240 4.76% 95.88%;
+    --heroui-default-200: 240 5.88% 90%;
+    --heroui-default-300: 240 4.88% 83.92%;
+    --heroui-default-400: 240 5.03% 64.9%;
+    --heroui-default-500: 240 3.83% 46.08%;
+    --heroui-default-600: 240 5.2% 33.92%;
+    --heroui-default-700: 240 5.26% 26.08%;
+    --heroui-default-800: 240 3.7% 15.88%;
+    --heroui-default-900: 240 5.88% 10%;
+    --heroui-default-foreground: 0 0% 0%;
+    --heroui-default: 240 4.88% 83.92%;
+    --heroui-primary-50: 212.5 92.31% 94.9%;
+    --heroui-primary-100: 211.84000000000003 92.45% 89.61%;
+    --heroui-primary-200: 211.84000000000003 92.45% 79.22%;
+    --heroui-primary-300: 212.24 92.45% 68.82%;
+    --heroui-primary-400: 212.14 92.45% 58.43%;
+    --heroui-primary-500: 212.01999999999998 100% 46.67%;
+    --heroui-primary-600: 212.14 100% 38.43%;
+    --heroui-primary-700: 212.24 100% 28.82%;
+    --heroui-primary-800: 211.84000000000003 100% 19.22%;
+    --heroui-primary-900: 211.84000000000003 100% 9.61%;
+    --heroui-primary-foreground: 0 0% 100%;
+    --heroui-primary: 212.01999999999998 100% 46.67%;
+    --heroui-secondary-50: 270 61.54% 94.9%;
+    --heroui-secondary-100: 270 59.26% 89.41%;
+    --heroui-secondary-200: 270 59.26% 78.82%;
+    --heroui-secondary-300: 270 59.26% 68.24%;
+    --heroui-secondary-400: 270 59.26% 57.65%;
+    --heroui-secondary-500: 270 66.67% 47.06%;
+    --heroui-secondary-600: 270 66.67% 37.65%;
+    --heroui-secondary-700: 270 66.67% 28.24%;
+    --heroui-secondary-800: 270 66.67% 18.82%;
+    --heroui-secondary-900: 270 66.67% 9.41%;
+    --heroui-secondary-foreground: 0 0% 100%;
+    --heroui-secondary: 270 66.67% 47.06%;
+    --heroui-success-50: 146.66999999999996 64.29% 94.51%;
+    --heroui-success-100: 145.71000000000004 61.4% 88.82%;
+    --heroui-success-200: 146.2 61.74% 77.45%;
+    --heroui-success-300: 145.78999999999996 62.57% 66.47%;
+    --heroui-success-400: 146.01 62.45% 55.1%;
+    --heroui-success-500: 145.96000000000004 79.46% 43.92%;
+    --heroui-success-600: 146.01 79.89% 35.1%;
+    --heroui-success-700: 145.78999999999996 79.26% 26.47%;
+    --heroui-success-800: 146.2 79.78% 17.45%;
+    --heroui-success-900: 145.71000000000004 77.78% 8.82%;
+    --heroui-success-foreground: 0 0% 0%;
+    --heroui-success: 145.96000000000004 79.46% 43.92%;
+    --heroui-warning-50: 54.55000000000001 91.67% 95.29%;
+    --heroui-warning-100: 37.139999999999986 91.3% 90.98%;
+    --heroui-warning-200: 37.139999999999986 91.3% 81.96%;
+    --heroui-warning-300: 36.95999999999998 91.24% 73.14%;
+    --heroui-warning-400: 37.00999999999999 91.26% 64.12%;
+    --heroui-warning-500: 37.02999999999997 91.27% 55.1%;
+    --heroui-warning-600: 37.00999999999999 74.22% 44.12%;
+    --heroui-warning-700: 36.95999999999998 73.96% 33.14%;
+    --heroui-warning-800: 37.139999999999986 75% 21.96%;
+    --heroui-warning-900: 37.139999999999986 75% 10.98%;
+    --heroui-warning-foreground: 0 0% 0%;
+    --heroui-warning: 37.02999999999997 91.27% 55.1%;
+    --heroui-danger-50: 339.13 92% 95.1%;
+    --heroui-danger-100: 340 91.84% 90.39%;
+    --heroui-danger-200: 339.3299999999999 90% 80.39%;
+    --heroui-danger-300: 339.11 90.6% 70.78%;
+    --heroui-danger-400: 339 90% 60.78%;
+    --heroui-danger-500: 339.20000000000005 90.36% 51.18%;
+    --heroui-danger-600: 339 86.54% 40.78%;
+    --heroui-danger-700: 339.11 85.99% 30.78%;
+    --heroui-danger-800: 339.3299999999999 86.54% 20.39%;
+    --heroui-danger-900: 340 84.91% 10.39%;
+    --heroui-danger-foreground: 0 0% 100%;
+    --heroui-danger: 339.20000000000005 90.36% 51.18%;
+    --heroui-divider-weight: 1px;
+    --heroui-disabled-opacity: .5;
+    --heroui-font-size-tiny: 0.75rem;
+    --heroui-font-size-small: 0.875rem;
+    --heroui-font-size-medium: 1rem;
+    --heroui-font-size-large: 1.125rem;
+    --heroui-line-height-tiny: 1rem;
+    --heroui-line-height-small: 1.25rem;
+    --heroui-line-height-medium: 1.5rem;
+    --heroui-line-height-large: 1.75rem;
+    --heroui-radius-small: 8px;
+    --heroui-radius-medium: 12px;
+    --heroui-radius-large: 14px;
+    --heroui-border-width-small: 1px;
+    --heroui-border-width-medium: 2px;
+    --heroui-border-width-large: 3px;
+    --heroui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+    --heroui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+    --heroui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+    --heroui-hover-opacity: .8;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+    }
+  }
+}

package/package.json CHANGED Viewed

@@ -1,11 +1,14 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "style": "dist/tour.css",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run build:css",
+    "build:css": "postcss src/styles/tour.css -o dist/tour.css",
     "dev": "tsc --watch"
   },
   "peerDependencies": {
@@ -19,7 +22,11 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "postcss": "^8.0.0",
+    "postcss-cli": "^10.0.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "tailwindcss": "^4.1.0"
   },
   "keywords": [
     "tour",

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/src/components/Tour.tsx CHANGED Viewed

@@ -35,22 +35,23 @@ export function Tour({
   // Calcula a posição da tooltip baseado no elemento destacado
   const calculateTooltipPosition = useCallback((element: HTMLElement, position: string = "bottom") => {
+    // Recalcula o rect após possíveis mudanças de scroll
     const rect = element.getBoundingClientRect();
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    // Tamanho estimado da tooltip (ajuste conforme necessário)
+    // Tamanho estimado da tooltip
     const tooltipWidth = 384; // max-w-sm = 384px
-    const tooltipHeight = 200; // altura estimada
-    const spacing = 16; // espaçamento entre elemento e tooltip
+    const tooltipHeight = 250; // altura estimada com conteúdo
+    const spacing = 8; // espaçamento menor para ficar mais próximo
     let top = 0;
     let left = 0;
     let finalPosition = position;
-    // Calcula posição base
+    // Calcula posição base - sempre próxima ao elemento
     switch (position) {
       case "top":
         top = rect.top + scrollTop - spacing;
@@ -74,47 +75,70 @@ export function Tour({
         finalPosition = "bottom";
     }
-    // Ajusta posição se a tooltip sair da viewport
+    // Ajusta posição apenas se necessário para não sair da viewport
+    // Mas mantém o mais próximo possível do elemento
     if (finalPosition === "bottom" || finalPosition === "top") {
-      // Ajusta horizontalmente
-      if (left - tooltipWidth / 2 < scrollLeft) {
-        left = scrollLeft + tooltipWidth / 2 + 16;
-      } else if (left + tooltipWidth / 2 > scrollLeft + viewportWidth) {
-        left = scrollLeft + viewportWidth - tooltipWidth / 2 - 16;
+      // Ajusta horizontalmente apenas se necessário, mantendo próximo ao centro do elemento
+      const elementCenterX = rect.left + scrollLeft + rect.width / 2;
+      const minLeft = scrollLeft + tooltipWidth / 2 + 8;
+      const maxLeft = scrollLeft + viewportWidth - tooltipWidth / 2 - 8;
+      if (elementCenterX < minLeft) {
+        left = minLeft;
+      } else if (elementCenterX > maxLeft) {
+        left = maxLeft;
+      } else {
+        left = elementCenterX; // Mantém centralizado no elemento
       }
-      // Se não couber embaixo, tenta em cima
-      if (finalPosition === "bottom" && top + tooltipHeight > scrollTop + viewportHeight) {
-        if (rect.top - tooltipHeight > scrollTop) {
-          top = rect.top + scrollTop - tooltipHeight - spacing;
+      // Verifica se precisa mudar de posição vertical
+      if (finalPosition === "bottom") {
+        const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
+        const spaceAbove = rect.top - scrollTop;
+        if (spaceBelow < tooltipHeight + spacing && spaceAbove > spaceBelow) {
+          // Muda para cima se houver mais espaço
+          top = rect.top + scrollTop - spacing;
           finalPosition = "top";
         }
-      }
-      // Se não couber em cima, tenta embaixo
-      else if (finalPosition === "top" && top - tooltipHeight < scrollTop) {
-        if (rect.bottom + tooltipHeight < scrollTop + viewportHeight) {
+      } else if (finalPosition === "top") {
+        const spaceAbove = rect.top - scrollTop;
+        const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
+        if (spaceAbove < tooltipHeight + spacing && spaceBelow > spaceAbove) {
+          // Muda para baixo se houver mais espaço
           top = rect.bottom + scrollTop + spacing;
           finalPosition = "bottom";
         }
       }
     } else if (finalPosition === "left" || finalPosition === "right") {
-      // Ajusta verticalmente
-      if (top - tooltipHeight / 2 < scrollTop) {
-        top = scrollTop + tooltipHeight / 2 + 16;
-      } else if (top + tooltipHeight / 2 > scrollTop + viewportHeight) {
-        top = scrollTop + viewportHeight - tooltipHeight / 2 - 16;
+      // Ajusta verticalmente apenas se necessário
+      const elementCenterY = rect.top + scrollTop + rect.height / 2;
+      const minTop = scrollTop + tooltipHeight / 2 + 8;
+      const maxTop = scrollTop + viewportHeight - tooltipHeight / 2 - 8;
+      if (elementCenterY < minTop) {
+        top = minTop;
+      } else if (elementCenterY > maxTop) {
+        top = maxTop;
+      } else {
+        top = elementCenterY; // Mantém centralizado no elemento
       }
-      // Se não couber à esquerda, tenta à direita
-      if (finalPosition === "left" && left - tooltipWidth < scrollLeft) {
-        if (rect.right + tooltipWidth < scrollLeft + viewportWidth) {
+      // Verifica se precisa mudar de posição horizontal
+      if (finalPosition === "left") {
+        const spaceLeft = rect.left - scrollLeft;
+        const spaceRight = viewportWidth - (rect.right - scrollLeft);
+        if (spaceLeft < tooltipWidth + spacing && spaceRight > spaceLeft) {
           left = rect.right + scrollLeft + spacing;
           finalPosition = "right";
         }
-      }
-      // Se não couber à direita, tenta à esquerda
-      else if (finalPosition === "right" && left + tooltipWidth > scrollLeft + viewportWidth) {
-        if (rect.left - tooltipWidth > scrollLeft) {
+      } else if (finalPosition === "right") {
+        const spaceRight = viewportWidth - (rect.right - scrollLeft);
+        const spaceLeft = rect.left - scrollLeft;
+        if (spaceRight < tooltipWidth + spacing && spaceLeft > spaceRight) {
           left = rect.left + scrollLeft - spacing;
           finalPosition = "left";
         }
@@ -163,11 +187,16 @@ export function Tour({
     // Scroll para o elemento
     element.scrollIntoView({ behavior: "smooth", block: "center" });
-    // Calcula posição da tooltip após um pequeno delay para garantir que o scroll terminou
+    // Calcula posição da tooltip após um delay para garantir que o scroll terminou
+    // Usa um delay maior para garantir que o scroll terminou completamente
     setTimeout(() => {
-      const position = calculateTooltipPosition(element, step.position || "bottom");
-      setTooltipPosition(position);
-    }, 300);
+      // Recalcula o rect após o scroll
+      const updatedRect = element.getBoundingClientRect();
+      if (updatedRect.width > 0 && updatedRect.height > 0) {
+        const position = calculateTooltipPosition(element, step.position || "bottom");
+        setTooltipPosition(position);
+      }
+    }, 400);
   }, [isVisible, currentStep, steps, calculateTooltipPosition]);
   // Adiciona overlay e highlight ao elemento
@@ -306,7 +335,7 @@ export function Tour({
       {tooltipPosition && currentStepData && highlightedElement && (
         <div
           ref={tooltipRef}
-          className="portal-tour:max-w-sm"
+          className="tour:max-w-sm"
           style={{
             position: "fixed",
             top: tooltipPosition.position === "bottom" || tooltipPosition.position === "left" || tooltipPosition.position === "right"
@@ -323,36 +352,36 @@ export function Tour({
             zIndex: 10001,
           }}
         >
-          <div className="portal-tour:bg-white portal-tour:rounded-lg portal-tour:shadow-xl portal-tour:p-6 portal-tour:relative">
+          <div className="tour:bg-white tour:rounded-lg tour:shadow-xl tour:p-6 tour:relative">
             {/* Botão fechar */}
             <button
               onClick={handleExit}
-              className="portal-tour:absolute portal-tour:top-2 portal-tour:right-2 portal-tour:p-1 portal-tour:rounded-full portal-tour:hover:bg-gray-100 portal-tour:transition-colors portal-tour:z-10"
+              className="tour:absolute tour:top-2 tour:right-2 tour:p-1 tour:rounded-full tour:hover:bg-gray-100 tour:transition-colors tour:z-10"
               aria-label="Fechar tour"
             >
-              <HiXMark className="portal-tour:w-5 portal-tour:h-5 portal-tour:text-gray-500" />
+              <HiXMark className="tour:w-5 tour:h-5 tour:text-gray-500" />
             </button>
             {/* Título (se fornecido) */}
             {currentStepData.title && (
-              <h3 className="portal-tour:text-lg portal-tour:font-semibold portal-tour:text-gray-900 portal-tour:mb-2 portal-tour:pr-6">
+              <h3 className="tour:text-lg tour:font-semibold tour:text-gray-900 tour:mb-2 tour:pr-6">
                 {currentStepData.title}
               </h3>
             )}
             {/* Conteúdo */}
-            <p className="portal-tour:text-gray-700 portal-tour:mb-4">{currentStepData.intro}</p>
+            <p className="tour:text-gray-700 tour:mb-4">{currentStepData.intro}</p>
             {/* Progresso */}
             {showProgress && (
-              <div className="portal-tour:mb-4">
-                <div className="portal-tour:w-full portal-tour:bg-gray-200 portal-tour:rounded-full portal-tour:h-2">
+              <div className="tour:mb-4">
+                <div className="tour:w-full tour:bg-gray-200 tour:rounded-full tour:h-2">
                   <div
-                    className="portal-tour:bg-brand-primary portal-tour:h-2 portal-tour:rounded-full portal-tour:transition-all portal-tour:duration-300"
+                    className="tour:bg-brand-primary tour:h-2 tour:rounded-full tour:transition-all tour:duration-300"
                     style={{ width: `${progress}%` }}
                   />
                 </div>
-                <p className="portal-tour:text-xs portal-tour:text-gray-500 portal-tour:mt-1 portal-tour:text-center">
+                <p className="tour:text-xs tour:text-gray-500 tour:mt-1 tour:text-center">
                   {currentStep + 1} de {steps.length}
                 </p>
               </div>
@@ -360,15 +389,15 @@ export function Tour({
             {/* Bullets */}
             {showBullets && (
-              <div className="portal-tour:flex portal-tour:justify-center portal-tour:gap-1 portal-tour:mb-4">
+              <div className="tour:flex tour:justify-center tour:gap-1 tour:mb-4">
                 {steps.map((_, index) => (
                   <button
                     key={index}
                     onClick={() => setCurrentStep(index)}
-                    className={`portal-tour:w-2 portal-tour:h-2 portal-tour:rounded-full portal-tour:transition-all ${
+                    className={`tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${
                       index === currentStep
-                        ? "portal-tour:bg-brand-primary portal-tour:w-6"
-                        : "portal-tour:bg-gray-300 portal-tour:hover:bg-gray-400"
+                        ? "tour:bg-brand-primary tour:w-6"
+                        : "tour:bg-gray-300 tour:hover:bg-gray-400"
                     }`}
                     aria-label={`Ir para passo ${index + 1}`}
                   />
@@ -377,27 +406,27 @@ export function Tour({
             )}
             {/* Botões de navegação */}
-            <div className="portal-tour:flex portal-tour:justify-between portal-tour:items-center portal-tour:gap-2">
-              <div className="portal-tour:flex portal-tour:gap-2">
+            <div className="tour:flex tour:justify-between tour:items-center tour:gap-2">
+              <div className="tour:flex tour:gap-2">
                 {!isFirstStep && (
                   <Button
                     variant="bordered"
                     onPress={handlePrev}
-                    startContent={<HiChevronLeft className="portal-tour:w-4 portal-tour:h-4" />}
+                    startContent={<HiChevronLeft className="tour:w-4 tour:h-4" />}
                   >
                     {prevLabel}
                   </Button>
                 )}
               </div>
-              <div className="portal-tour:flex portal-tour:gap-2">
+              <div className="tour:flex tour:gap-2">
                 <Button variant="light" onPress={handleSkip}>
                   {skipLabel}
                 </Button>
                 <Button
                   color="primary"
                   onPress={isLastStep ? handleComplete : handleNext}
-                  endContent={!isLastStep ? <HiChevronRight className="portal-tour:w-4 portal-tour:h-4" /> : undefined}
+                  endContent={!isLastStep ? <HiChevronRight className="tour:w-4 tour:h-4" /> : undefined}
                 >
                   {isLastStep ? doneLabel : nextLabel}
                 </Button>
@@ -408,7 +437,7 @@ export function Tour({
           {/* Seta indicadora */}
           {tooltipPosition.position === "bottom" && (
             <div
-              className="portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent"
+              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
               style={{
                 top: "-16px",
                 left: "50%",
@@ -419,7 +448,7 @@ export function Tour({
           )}
           {tooltipPosition.position === "top" && (
             <div
-              className="portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent"
+              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
               style={{
                 bottom: "-16px",
                 left: "50%",
@@ -430,7 +459,7 @@ export function Tour({
           )}
           {tooltipPosition.position === "right" && (
             <div
-              className="portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent"
+              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
               style={{
                 left: "-16px",
                 top: "50%",
@@ -441,7 +470,7 @@ export function Tour({
           )}
           {tooltipPosition.position === "left" && (
             <div
-              className="portal-tour:absolute portal-tour:w-0 portal-tour:h-0 portal-tour:border-8 portal-tour:border-transparent"
+              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
               style={{
                 right: "-16px",
                 top: "50%",

package/src/styles/tour.css ADDED Viewed

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@config "../../tailwind.config.js";

package/tailwind.config.js CHANGED Viewed

@@ -3,6 +3,9 @@ const shared = require("@elogroup-sereduc/portal-aluno-tailwind-config");
 module.exports = {
   ...shared,
-  prefix: "portal-tour",
+  prefix: "tour",
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
 };