@elogroup-sereduc/portal-aluno-tour 1.0.7 → 1.0.9

package/README.md

@@ -39,12 +39,12 @@ function MyComponent() {
 
   const steps = [
     {
-      element: ".my-element",
+      element: "my-element", // Usa data-onboard="my-element"
       intro: "Este é o primeiro passo do tour",
       position: "bottom",
     },
     {
-      element: ".another-element",
+      element: ".another-element", // Seletor CSS também funciona
       intro: "Este é o segundo passo",
       position: "right",
     },
@@ -82,7 +82,11 @@ function MyComponent() {
 
 ### TourStep
 
-- `element: string` - Seletor CSS do elemento
+- `element: string` - Seletor CSS do elemento ou valor do atributo `data-onboard`
+  - Se começar com `.`, `#`, `[`, `:`, `>`, `+`, `~`, ou espaço: usa como seletor CSS
+  - Caso contrário: busca `[data-onboard="valor"]`
+  - Exemplo: `element: "student-card"` busca `[data-onboard="student-card"]`
+  - Exemplo: `element: ".my-class"` usa o seletor CSS `.my-class`
 - `intro: string` - Texto explicativo
 - `position?: "top" | "bottom" | "left" | "right"` - Posição da tooltip
 - `title?: string` - Título do passo (opcional)

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

@@ -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,kDA0iBX"}
+{"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,kDA8mBX"}

package/dist/components/Tour.js

@@ -17,7 +17,7 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
     // Calcula a posição da tooltip baseado no elemento destacado
     // Usa getBoundingClientRect() que retorna posições relativas à viewport
     // Isso mantém a tooltip sempre visível mesmo durante scroll
-    const calculateTooltipPosition = useCallback((element, position = "bottom") => {
+    const calculateTooltipPosition = useCallback((element, position = "auto") => {
         const rect = element.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -62,8 +62,63 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             }
             return { top, left, position: finalPosition };
         }
-        // Elemento está visível - calcula posição normal próxima ao elemento
-        switch (position) {
+        // Calcula espaço disponível em todas as direções
+        const spaceAbove = rect.top;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceLeft = rect.left;
+        const spaceRight = viewportWidth - rect.right;
+        // Determina a melhor posição baseado no espaço disponível
+        let bestPosition;
+        // Se position for "auto" ou não especificado, calcula automaticamente a melhor posição
+        if (!position || position === "auto") {
+            // Escolhe automaticamente a direção com mais espaço disponível
+            const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
+            if (maxSpace === spaceAbove)
+                bestPosition = "top";
+            else if (maxSpace === spaceBelow)
+                bestPosition = "bottom";
+            else if (maxSpace === spaceLeft)
+                bestPosition = "left";
+            else
+                bestPosition = "right";
+        }
+        else {
+            // Posição específica foi fornecida - tenta usar ela primeiro
+            // Verifica se a posição especificada tem espaço suficiente
+            const hasEnoughSpace = (position === "top" && spaceAbove >= tooltipHeight + spacing + 8) ||
+                (position === "bottom" && spaceBelow >= tooltipHeight + spacing + 8) ||
+                (position === "left" && spaceLeft >= tooltipWidth + spacing + 8) ||
+                (position === "right" && spaceRight >= tooltipWidth + spacing + 8);
+            if (hasEnoughSpace) {
+                // Tem espaço suficiente, usa a posição especificada
+                bestPosition = position;
+            }
+            else {
+                // Não tem espaço suficiente na posição especificada, escolhe a melhor alternativa
+                // Para posições verticais (top/bottom), compara entre elas
+                if (position === "top" || position === "bottom") {
+                    bestPosition = spaceAbove > spaceBelow ? "top" : "bottom";
+                }
+                // Para posições horizontais (left/right), compara entre elas
+                else if (position === "left" || position === "right") {
+                    bestPosition = spaceLeft > spaceRight ? "left" : "right";
+                }
+                // Fallback: escolhe a direção com mais espaço
+                else {
+                    const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
+                    if (maxSpace === spaceAbove)
+                        bestPosition = "top";
+                    else if (maxSpace === spaceBelow)
+                        bestPosition = "bottom";
+                    else if (maxSpace === spaceLeft)
+                        bestPosition = "left";
+                    else
+                        bestPosition = "right";
+                }
+            }
+        }
+        // Calcula posição base na melhor direção escolhida
+        switch (bestPosition) {
             case "top":
                 top = rect.top - spacing;
                 left = rect.left + rect.width / 2;
@@ -74,7 +129,9 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                 break;
             case "left":
                 top = rect.top + rect.height / 2;
-                left = rect.left - spacing;
+                // Para left, a tooltip fica à esquerda do elemento
+                // left é onde a tooltip termina (borda direita), então subtrai a largura
+                left = rect.left - tooltipWidth - spacing;
                 break;
             case "right":
                 top = rect.top + rect.height / 2;
@@ -83,8 +140,9 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             default:
                 top = rect.bottom + spacing;
                 left = rect.left + rect.width / 2;
-                finalPosition = "bottom";
+                bestPosition = "bottom";
         }
+        finalPosition = bestPosition;
         // Ajusta horizontalmente para tooltips top/bottom - mantém próximo ao elemento
         if (finalPosition === "bottom" || finalPosition === "top") {
             // Centraliza no elemento, mas ajusta apenas se necessário para não sair da tela
@@ -153,28 +211,32 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                 if (spaceLeft < tooltipWidth + spacing + 8) {
                     const spaceRight = viewportWidth - rect.right;
                     if (spaceRight > spaceLeft && spaceRight > tooltipWidth + spacing + 8) {
+                        // Muda para direita se houver mais espaço
                         left = rect.right + spacing;
                         finalPosition = "right";
                     }
                     else {
-                        // Mantém próximo ao elemento mesmo se não couber perfeitamente
-                        left = rect.left - spacing;
+                        // Mantém à esquerda, mas ajusta para ficar visível
+                        left = Math.max(8, rect.left - tooltipWidth - spacing);
                     }
                 }
+                // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
             }
             else if (finalPosition === "right") {
                 const spaceRight = viewportWidth - rect.right;
                 if (spaceRight < tooltipWidth + spacing + 8) {
                     const spaceLeft = rect.left;
                     if (spaceLeft > spaceRight && spaceLeft > tooltipWidth + spacing + 8) {
-                        left = rect.left - spacing;
+                        // Muda para esquerda se houver mais espaço
+                        left = rect.left - tooltipWidth - spacing;
                         finalPosition = "left";
                     }
                     else {
-                        // Mantém próximo ao elemento mesmo se não couber perfeitamente
-                        left = rect.right + spacing;
+                        // Mantém à direita, mas ajusta para ficar visível
+                        left = Math.min(viewportWidth - tooltipWidth - 8, rect.right + spacing);
                     }
                 }
+                // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
             }
         }
         return { top, left, position: finalPosition };
@@ -196,6 +258,15 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             setTooltipPosition(null);
         }
     }, [enabled, steps.length, isVisible, initialStep]);
+    // Função auxiliar para buscar elemento por seletor CSS ou data-onboard
+    const findElement = useCallback((selector) => {
+        // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
+        if (/^[.#\[:>+\s~]/.test(selector)) {
+            return document.querySelector(selector);
+        }
+        // Caso contrário, assume que é um valor de data-onboard
+        return document.querySelector(`[data-onboard="${selector}"]`);
+    }, []);
     // Destaca o elemento atual
     useEffect(() => {
         if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
@@ -204,9 +275,9 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             return;
         }
         const step = steps[currentStep];
-        const element = document.querySelector(step.element);
+        const element = findElement(step.element);
         if (!element) {
-            console.warn(`Elemento não encontrado: ${step.element}`);
+            console.warn(`Elemento não encontrado: ${step.element}. Tentando buscar [data-onboard="${step.element}"]`);
             return;
         }
         setHighlightedElement(element);
@@ -216,7 +287,8 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
         const updatePosition = () => {
             const updatedRect = element.getBoundingClientRect();
             if (updatedRect.width > 0 && updatedRect.height > 0) {
-                const position = calculateTooltipPosition(element, step.position || "bottom");
+                // Usa "auto" como default se position não for especificado
+                const position = calculateTooltipPosition(element, step.position || "auto");
                 setTooltipPosition(position);
             }
         };
@@ -239,7 +311,7 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             window.removeEventListener("resize", handleResize);
             document.removeEventListener("scroll", handleScroll, true);
         };
-    }, [isVisible, currentStep, steps, calculateTooltipPosition]);
+    }, [isVisible, currentStep, steps, calculateTooltipPosition, findElement]);
     // Adiciona overlay e highlight ao elemento
     useEffect(() => {
         if (!highlightedElement) {

package/dist/types/index.d.ts

@@ -3,7 +3,9 @@
  */
 export interface TourStep {
     /**
-     * Seletor CSS do elemento a ser destacado
+     * Seletor CSS do elemento a ser destacado ou valor do atributo data-onboard
+     * - Se for um seletor CSS (começa com ., #, [, etc.), será usado diretamente
+     * - Caso contrário, será usado como valor do atributo data-onboard: [data-onboard="valor"]
      */
     element: string;
     /**
@@ -12,9 +14,11 @@ export interface TourStep {
     intro: string;
     /**
      * Posição da tooltip em relação ao elemento
-     * @default "bottom"
+     * - "auto": Calcula automaticamente a melhor posição baseada no espaço disponível
+     * - "top" | "bottom" | "left" | "right": Posição específica (pode ser ajustada se não houver espaço)
+     * @default "auto"
      */
-    position?: "top" | "bottom" | "left" | "right";
+    position?: "auto" | "top" | "bottom" | "left" | "right";
     /**
      * Título do passo (opcional)
      */

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE/C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
   "type": "module",
   "main": "dist/index.js",
@@ -39,5 +39,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
-
+}

package/src/components/Tour.tsx

@@ -36,11 +36,11 @@ export function Tour({
   // Calcula a posição da tooltip baseado no elemento destacado
   // Usa getBoundingClientRect() que retorna posições relativas à viewport
   // Isso mantém a tooltip sempre visível mesmo durante scroll
-  const calculateTooltipPosition = useCallback((element: HTMLElement, position: string = "bottom") => {
+  const calculateTooltipPosition = useCallback((element: HTMLElement, position: string | undefined = "auto") => {
     const rect = element.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    
+
     // Tamanho estimado da tooltip
     const tooltipWidth = 384; // max-w-sm = 384px
     const tooltipHeight = 250; // altura estimada
@@ -51,10 +51,10 @@ export function Tour({
     let finalPosition = position;
 
     // Verifica se o elemento está visível na viewport
-    const isElementVisible = 
-      rect.top < viewportHeight && 
-      rect.bottom > 0 && 
-      rect.left < viewportWidth && 
+    const isElementVisible =
+      rect.top < viewportHeight &&
+      rect.bottom > 0 &&
+      rect.left < viewportWidth &&
       rect.right > 0;
 
     // Se o elemento não estiver visível, tenta posicionar próximo à borda mais próxima
@@ -84,8 +84,58 @@ export function Tour({
       return { top, left, position: finalPosition };
     }
 
-    // Elemento está visível - calcula posição normal próxima ao elemento
-    switch (position) {
+    // Calcula espaço disponível em todas as direções
+    const spaceAbove = rect.top;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceLeft = rect.left;
+    const spaceRight = viewportWidth - rect.right;
+
+    // Determina a melhor posição baseado no espaço disponível
+    let bestPosition: "top" | "bottom" | "left" | "right";
+
+    // Se position for "auto" ou não especificado, calcula automaticamente a melhor posição
+    if (!position || position === "auto") {
+      // Escolhe automaticamente a direção com mais espaço disponível
+      const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
+      if (maxSpace === spaceAbove) bestPosition = "top";
+      else if (maxSpace === spaceBelow) bestPosition = "bottom";
+      else if (maxSpace === spaceLeft) bestPosition = "left";
+      else bestPosition = "right";
+    } else {
+      // Posição específica foi fornecida - tenta usar ela primeiro
+      // Verifica se a posição especificada tem espaço suficiente
+      const hasEnoughSpace =
+        (position === "top" && spaceAbove >= tooltipHeight + spacing + 8) ||
+        (position === "bottom" && spaceBelow >= tooltipHeight + spacing + 8) ||
+        (position === "left" && spaceLeft >= tooltipWidth + spacing + 8) ||
+        (position === "right" && spaceRight >= tooltipWidth + spacing + 8);
+
+      if (hasEnoughSpace) {
+        // Tem espaço suficiente, usa a posição especificada
+        bestPosition = position as "top" | "bottom" | "left" | "right";
+      } else {
+        // Não tem espaço suficiente na posição especificada, escolhe a melhor alternativa
+        // Para posições verticais (top/bottom), compara entre elas
+        if (position === "top" || position === "bottom") {
+          bestPosition = spaceAbove > spaceBelow ? "top" : "bottom";
+        }
+        // Para posições horizontais (left/right), compara entre elas
+        else if (position === "left" || position === "right") {
+          bestPosition = spaceLeft > spaceRight ? "left" : "right";
+        }
+        // Fallback: escolhe a direção com mais espaço
+        else {
+          const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
+          if (maxSpace === spaceAbove) bestPosition = "top";
+          else if (maxSpace === spaceBelow) bestPosition = "bottom";
+          else if (maxSpace === spaceLeft) bestPosition = "left";
+          else bestPosition = "right";
+        }
+      }
+    }
+
+    // Calcula posição base na melhor direção escolhida
+    switch (bestPosition) {
       case "top":
         top = rect.top - spacing;
         left = rect.left + rect.width / 2;
@@ -96,7 +146,9 @@ export function Tour({
         break;
       case "left":
         top = rect.top + rect.height / 2;
-        left = rect.left - spacing;
+        // Para left, a tooltip fica à esquerda do elemento
+        // left é onde a tooltip termina (borda direita), então subtrai a largura
+        left = rect.left - tooltipWidth - spacing;
         break;
       case "right":
         top = rect.top + rect.height / 2;
@@ -105,16 +157,18 @@ export function Tour({
       default:
         top = rect.bottom + spacing;
         left = rect.left + rect.width / 2;
-        finalPosition = "bottom";
+        bestPosition = "bottom";
     }
 
+    finalPosition = bestPosition;
+
     // Ajusta horizontalmente para tooltips top/bottom - mantém próximo ao elemento
     if (finalPosition === "bottom" || finalPosition === "top") {
       // Centraliza no elemento, mas ajusta apenas se necessário para não sair da tela
       const elementCenterX = rect.left + rect.width / 2;
       const minLeft = tooltipWidth / 2 + 8;
       const maxLeft = viewportWidth - tooltipWidth / 2 - 8;
-      
+
       // Mantém o mais próximo possível do centro do elemento
       if (elementCenterX < minLeft) {
         left = minLeft;
@@ -123,7 +177,7 @@ export function Tour({
       } else {
         left = elementCenterX; // Mantém centralizado no elemento
       }
-      
+
       // Verifica espaço vertical e ajusta posição se necessário
       if (finalPosition === "bottom") {
         const spaceBelow = viewportHeight - rect.bottom;
@@ -150,14 +204,14 @@ export function Tour({
           }
         }
       }
-    } 
+    }
     // Ajusta verticalmente para tooltips left/right - mantém próximo ao elemento
     else if (finalPosition === "left" || finalPosition === "right") {
       // Centraliza no elemento verticalmente
       const elementCenterY = rect.top + rect.height / 2;
       const minTop = tooltipHeight / 2 + 8;
       const maxTop = viewportHeight - tooltipHeight / 2 - 8;
-      
+
       // Mantém o mais próximo possível do centro do elemento
       if (elementCenterY < minTop) {
         top = minTop;
@@ -166,32 +220,36 @@ export function Tour({
       } else {
         top = elementCenterY; // Mantém centralizado no elemento
       }
-      
+
       // Verifica espaço horizontal e ajusta posição se necessário
       if (finalPosition === "left") {
         const spaceLeft = rect.left;
         if (spaceLeft < tooltipWidth + spacing + 8) {
           const spaceRight = viewportWidth - rect.right;
           if (spaceRight > spaceLeft && spaceRight > tooltipWidth + spacing + 8) {
+            // Muda para direita se houver mais espaço
             left = rect.right + spacing;
             finalPosition = "right";
           } else {
-            // Mantém próximo ao elemento mesmo se não couber perfeitamente
-            left = rect.left - spacing;
+            // Mantém à esquerda, mas ajusta para ficar visível
+            left = Math.max(8, rect.left - tooltipWidth - spacing);
           }
         }
+        // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
       } else if (finalPosition === "right") {
         const spaceRight = viewportWidth - rect.right;
         if (spaceRight < tooltipWidth + spacing + 8) {
           const spaceLeft = rect.left;
           if (spaceLeft > spaceRight && spaceLeft > tooltipWidth + spacing + 8) {
-            left = rect.left - spacing;
+            // Muda para esquerda se houver mais espaço
+            left = rect.left - tooltipWidth - spacing;
             finalPosition = "left";
           } else {
-            // Mantém próximo ao elemento mesmo se não couber perfeitamente
-            left = rect.right + spacing;
+            // Mantém à direita, mas ajusta para ficar visível
+            left = Math.min(viewportWidth - tooltipWidth - 8, rect.right + spacing);
           }
         }
+        // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
       }
     }
 
@@ -216,6 +274,16 @@ export function Tour({
     }
   }, [enabled, steps.length, isVisible, initialStep]);
 
+  // Função auxiliar para buscar elemento por seletor CSS ou data-onboard
+  const findElement = useCallback((selector: string): HTMLElement | null => {
+    // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
+    if (/^[.#\[:>+\s~]/.test(selector)) {
+      return document.querySelector(selector) as HTMLElement;
+    }
+    // Caso contrário, assume que é um valor de data-onboard
+    return document.querySelector(`[data-onboard="${selector}"]`) as HTMLElement;
+  }, []);
+
   // Destaca o elemento atual
   useEffect(() => {
     if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
@@ -225,10 +293,10 @@ export function Tour({
     }
 
     const step = steps[currentStep];
-    const element = document.querySelector(step.element) as HTMLElement;
+    const element = findElement(step.element);
 
     if (!element) {
-      console.warn(`Elemento não encontrado: ${step.element}`);
+      console.warn(`Elemento não encontrado: ${step.element}. Tentando buscar [data-onboard="${step.element}"]`);
       return;
     }
 
@@ -241,7 +309,8 @@ export function Tour({
     const updatePosition = () => {
       const updatedRect = element.getBoundingClientRect();
       if (updatedRect.width > 0 && updatedRect.height > 0) {
-        const position = calculateTooltipPosition(element, step.position || "bottom");
+        // Usa "auto" como default se position não for especificado
+        const position = calculateTooltipPosition(element, step.position || "auto");
         setTooltipPosition(position);
       }
     };
@@ -269,7 +338,7 @@ export function Tour({
       window.removeEventListener("resize", handleResize);
       document.removeEventListener("scroll", handleScroll, true);
     };
-  }, [isVisible, currentStep, steps, calculateTooltipPosition]);
+  }, [isVisible, currentStep, steps, calculateTooltipPosition, findElement]);
 
   // Adiciona overlay e highlight ao elemento
   useEffect(() => {
@@ -466,11 +535,10 @@ export function Tour({
                   <button
                     key={index}
                     onClick={() => setCurrentStep(index)}
-                    className={`tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${
-                      index === currentStep
+                    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}`}
                   />
                 ))}

package/src/types/index.ts

@@ -4,7 +4,9 @@
 
 export interface TourStep {
   /**
-   * Seletor CSS do elemento a ser destacado
+   * Seletor CSS do elemento a ser destacado ou valor do atributo data-onboard
+   * - Se for um seletor CSS (começa com ., #, [, etc.), será usado diretamente
+   * - Caso contrário, será usado como valor do atributo data-onboard: [data-onboard="valor"]
    */
   element: string;
 
@@ -15,9 +17,11 @@ export interface TourStep {
 
   /**
    * Posição da tooltip em relação ao elemento
-   * @default "bottom"
+   * - "auto": Calcula automaticamente a melhor posição baseada no espaço disponível
+   * - "top" | "bottom" | "left" | "right": Posição específica (pode ser ajustada se não houver espaço)
+   * @default "auto"
    */
-  position?: "top" | "bottom" | "left" | "right";
+  position?: "auto" | "top" | "bottom" | "left" | "right";
 
   /**
    * Título do passo (opcional)

package/dist/tour.css

@@ -1,566 +0,0 @@
-/*! 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;
-    }
-  }
-}
-