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

package/README.md

@@ -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.js

@@ -247,7 +247,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 +260,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

@@ -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

@@ -1,11 +1,14 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "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

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

package/src/components/Tour.tsx

@@ -306,7 +306,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 +323,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 +360,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 +377,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 +408,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 +419,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 +430,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 +441,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

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

package/tailwind.config.js

@@ -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}",
+  ],
 };