@brightspot/ui 1.4.1 → 1.6.0

package/dist/tailwind-plugin-popover.js

@@ -0,0 +1,177 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Popover plugin using CSS anchor positioning and the native Popover API.
+ *
+ * Uses the HTML popover attribute for top-layer rendering, light dismiss,
+ * and focus management. Animations use @starting-style for entry and
+ * transition-behavior: allow-discrete for exit.
+ *
+ * Class Names:
+ *
+ *  btu-popover            - Base popover styles (hidden by default via popover)
+ *  btu-popover-top        - Position above trigger
+ *  btu-popover-bottom     - Position below trigger (default)
+ *  btu-popover-left       - Position left of trigger
+ *  btu-popover-right      - Position right of trigger
+ *  btu-popover-no-arrow   - Hide the arrow pseudo-element
+ *
+ * Offset Sizes:
+ *
+ *  btu-popover-offset-sm  - 4px offset
+ *  btu-popover-offset-md  - 8px offset (same as default)
+ *  btu-popover-offset-lg  - 12px offset
+ *  btu-popover-offset-xl  - 16px offset
+ *
+ * CSS Custom Properties:
+ *
+ *  --popover-color-background  - Background color (default: var(--btu-theme-white, #fff))
+ *  --popover-color-title       - Title text color (consumer-applied on title elements; not set by plugin)
+ *  --popover-color-content     - Base text color (default: oklch(var(--btu-theme-gray-900)))
+ *  --popover-border-radius     - Border radius (default: theme borderRadius.lg)
+ */
+module.exports = plugin(function ({ addComponents, theme, config }) {
+    addComponents({
+        // Base popover styles — exit state (applied when closing, before display:none)
+        '.btu-popover': {
+            // Structural custom properties — kept as declarations since they're
+            // controlled by component props, not external CSS on parent elements.
+            '--popover-offset': '8px',
+            '--popover-arrow-size': '8px',
+            padding: '12px 16px',
+            backgroundColor: `var(--popover-color-background, var(--btu-theme-white, #fff))`,
+            color: 'var(--popover-color-content, oklch(var(--btu-theme-gray-900)))',
+            borderRadius: `var(--popover-border-radius, ${theme('borderRadius.lg')})`,
+            boxShadow: theme('boxShadow.lg'),
+            // theme('fontSize.sm') returns only the size string; config() gives the raw tuple
+            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+            fontWeight: '400',
+            whiteSpace: 'normal',
+            textAlign: 'left',
+            maxWidth: '20rem',
+            pointerEvents: 'auto',
+            overflow: 'visible',
+            isolation: 'isolate',
+            margin: '0',
+            inset: 'unset',
+            border: 'none',
+            opacity: '0',
+            translate: '0 0',
+            transition: 'opacity 150ms ease, translate 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+            'position-visibility': 'anchors-visible',
+            // Native popover reset — browser defaults override otherwise
+            '&:popover-open': {
+                overflow: 'visible',
+                opacity: '1',
+                translate: '0 0',
+            },
+        },
+        // Position: top
+        '.btu-popover-top': {
+            'position-area': 'top',
+            bottom: 'var(--popover-offset)',
+            marginTop: 'var(--popover-offset)',
+            'position-try-fallbacks': 'flip-block',
+            translate: '0 4px',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: bottom (default)
+        '.btu-popover-bottom': {
+            'position-area': 'bottom',
+            top: 'var(--popover-offset)',
+            marginBottom: 'var(--popover-offset)',
+            'position-try-fallbacks': 'flip-block',
+            translate: '0 -4px',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: left
+        '.btu-popover-left': {
+            'position-area': 'left',
+            right: 'var(--popover-offset)',
+            marginLeft: 'var(--popover-offset)',
+            'position-try-fallbacks': 'flip-inline',
+            translate: '4px 0',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: right
+        '.btu-popover-right': {
+            'position-area': 'right',
+            left: 'var(--popover-offset)',
+            marginRight: 'var(--popover-offset)',
+            'position-try-fallbacks': 'flip-inline',
+            translate: '-4px 0',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Offset sizes
+        '.btu-popover-offset-sm': { '--popover-offset': '4px' },
+        '.btu-popover-offset-md': { '--popover-offset': '8px' },
+        '.btu-popover-offset-lg': { '--popover-offset': '12px' },
+        '.btu-popover-offset-xl': { '--popover-offset': '16px' },
+        // @starting-style for entry animations
+        '@starting-style': {
+            '.btu-popover:popover-open': {
+                opacity: '0',
+            },
+            '.btu-popover-top:popover-open': {
+                translate: '0 4px',
+            },
+            '.btu-popover-bottom:popover-open': {
+                translate: '0 -4px',
+            },
+            '.btu-popover-left:popover-open': {
+                translate: '4px 0',
+            },
+            '.btu-popover-right:popover-open': {
+                translate: '-4px 0',
+            },
+        },
+        // Arrow for vertical popovers (top/bottom)
+        // Centered at 50% of the popover panel. This aligns with the trigger center
+        // because position-area centers the popover on the anchor element.
+        '.btu-popover-top::before, .btu-popover-bottom::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            width: 'var(--popover-arrow-size)',
+            top: 'calc(-1 * var(--popover-offset))',
+            bottom: 'calc(-1 * var(--popover-offset))',
+            left: 'calc(50% - var(--popover-arrow-size) / 2)',
+            clipPath: 'polygon(50% calc(var(--popover-offset) - var(--popover-arrow-size)), 100% var(--popover-offset), 100% calc(100% - var(--popover-offset)), 50% calc(100% - var(--popover-offset) + var(--popover-arrow-size)), 0 calc(100% - var(--popover-offset)), 0 var(--popover-offset))',
+            background: 'inherit',
+            margin: 'inherit',
+        },
+        // Arrow for horizontal popovers (left/right)
+        '.btu-popover-left::before, .btu-popover-right::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            height: 'var(--popover-arrow-size)',
+            left: 'calc(-1 * var(--popover-offset))',
+            right: 'calc(-1 * var(--popover-offset))',
+            top: 'calc(50% - var(--popover-arrow-size) / 2)',
+            clipPath: 'polygon(calc(var(--popover-offset) - var(--popover-arrow-size)) 50%, var(--popover-offset) 0, calc(100% - var(--popover-offset)) 0, calc(100% - var(--popover-offset) + var(--popover-arrow-size)) 50%, calc(100% - var(--popover-offset)) 100%, var(--popover-offset) 100%)',
+            background: 'inherit',
+            margin: 'inherit',
+        },
+        // Hide arrow when opted out
+        '.btu-popover-no-arrow::before': {
+            content: 'none',
+        },
+        // Reduced motion: disable translate animation, keep opacity fade
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-popover': {
+                translate: 'none !important',
+                transition: 'opacity 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+            },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-popover.js.map

package/dist/tailwind-plugin-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-popover.js","sourceRoot":"","sources":["../src/tailwind-plugin-popover.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-popover.ts

@@ -0,0 +1,202 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Popover plugin using CSS anchor positioning and the native Popover API.
+ *
+ * Uses the HTML popover attribute for top-layer rendering, light dismiss,
+ * and focus management. Animations use @starting-style for entry and
+ * transition-behavior: allow-discrete for exit.
+ *
+ * Class Names:
+ *
+ *  btu-popover            - Base popover styles (hidden by default via popover)
+ *  btu-popover-top        - Position above trigger
+ *  btu-popover-bottom     - Position below trigger (default)
+ *  btu-popover-left       - Position left of trigger
+ *  btu-popover-right      - Position right of trigger
+ *  btu-popover-no-arrow   - Hide the arrow pseudo-element
+ *
+ * Offset Sizes:
+ *
+ *  btu-popover-offset-sm  - 4px offset
+ *  btu-popover-offset-md  - 8px offset (same as default)
+ *  btu-popover-offset-lg  - 12px offset
+ *  btu-popover-offset-xl  - 16px offset
+ *
+ * CSS Custom Properties:
+ *
+ *  --popover-color-background  - Background color (default: var(--btu-theme-white, #fff))
+ *  --popover-color-title       - Title text color (consumer-applied on title elements; not set by plugin)
+ *  --popover-color-content     - Base text color (default: oklch(var(--btu-theme-gray-900)))
+ *  --popover-border-radius     - Border radius (default: theme borderRadius.lg)
+ */
+
+module.exports = plugin(function ({ addComponents, theme, config }) {
+  addComponents({
+    // Base popover styles — exit state (applied when closing, before display:none)
+    '.btu-popover': {
+      // Structural custom properties — kept as declarations since they're
+      // controlled by component props, not external CSS on parent elements.
+      '--popover-offset': '8px',
+      '--popover-arrow-size': '8px',
+
+      padding: '12px 16px',
+
+      backgroundColor: `var(--popover-color-background, var(--btu-theme-white, #fff))`,
+      color: 'var(--popover-color-content, oklch(var(--btu-theme-gray-900)))',
+      borderRadius: `var(--popover-border-radius, ${theme('borderRadius.lg')})`,
+      boxShadow: theme('boxShadow.lg'),
+
+      // theme('fontSize.sm') returns only the size string; config() gives the raw tuple
+      fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+      lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+      fontWeight: '400',
+      whiteSpace: 'normal',
+      textAlign: 'left',
+      maxWidth: '20rem',
+
+      pointerEvents: 'auto',
+      overflow: 'visible',
+      isolation: 'isolate',
+      margin: '0',
+      inset: 'unset',
+      border: 'none',
+      opacity: '0',
+      translate: '0 0',
+      transition:
+        'opacity 150ms ease, translate 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+
+      'position-visibility': 'anchors-visible',
+
+      // Native popover reset — browser defaults override otherwise
+      '&:popover-open': {
+        overflow: 'visible',
+        opacity: '1',
+        translate: '0 0',
+      },
+    },
+
+    // Position: top
+    '.btu-popover-top': {
+      'position-area': 'top',
+      bottom: 'var(--popover-offset)',
+      marginTop: 'var(--popover-offset)',
+      'position-try-fallbacks': 'flip-block',
+      translate: '0 4px',
+
+      '&:popover-open': {
+        translate: '0 0',
+      },
+    },
+
+    // Position: bottom (default)
+    '.btu-popover-bottom': {
+      'position-area': 'bottom',
+      top: 'var(--popover-offset)',
+      marginBottom: 'var(--popover-offset)',
+      'position-try-fallbacks': 'flip-block',
+      translate: '0 -4px',
+
+      '&:popover-open': {
+        translate: '0 0',
+      },
+    },
+
+    // Position: left
+    '.btu-popover-left': {
+      'position-area': 'left',
+      right: 'var(--popover-offset)',
+      marginLeft: 'var(--popover-offset)',
+      'position-try-fallbacks': 'flip-inline',
+      translate: '4px 0',
+
+      '&:popover-open': {
+        translate: '0 0',
+      },
+    },
+
+    // Position: right
+    '.btu-popover-right': {
+      'position-area': 'right',
+      left: 'var(--popover-offset)',
+      marginRight: 'var(--popover-offset)',
+      'position-try-fallbacks': 'flip-inline',
+      translate: '-4px 0',
+
+      '&:popover-open': {
+        translate: '0 0',
+      },
+    },
+
+    // Offset sizes
+    '.btu-popover-offset-sm': { '--popover-offset': '4px' },
+    '.btu-popover-offset-md': { '--popover-offset': '8px' },
+    '.btu-popover-offset-lg': { '--popover-offset': '12px' },
+    '.btu-popover-offset-xl': { '--popover-offset': '16px' },
+
+    // @starting-style for entry animations
+    '@starting-style': {
+      '.btu-popover:popover-open': {
+        opacity: '0',
+      },
+      '.btu-popover-top:popover-open': {
+        translate: '0 4px',
+      },
+      '.btu-popover-bottom:popover-open': {
+        translate: '0 -4px',
+      },
+      '.btu-popover-left:popover-open': {
+        translate: '4px 0',
+      },
+      '.btu-popover-right:popover-open': {
+        translate: '-4px 0',
+      },
+    },
+
+    // Arrow for vertical popovers (top/bottom)
+    // Centered at 50% of the popover panel. This aligns with the trigger center
+    // because position-area centers the popover on the anchor element.
+    '.btu-popover-top::before, .btu-popover-bottom::before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: '-1',
+      width: 'var(--popover-arrow-size)',
+      top: 'calc(-1 * var(--popover-offset))',
+      bottom: 'calc(-1 * var(--popover-offset))',
+      left: 'calc(50% - var(--popover-arrow-size) / 2)',
+      clipPath:
+        'polygon(50% calc(var(--popover-offset) - var(--popover-arrow-size)), 100% var(--popover-offset), 100% calc(100% - var(--popover-offset)), 50% calc(100% - var(--popover-offset) + var(--popover-arrow-size)), 0 calc(100% - var(--popover-offset)), 0 var(--popover-offset))',
+      background: 'inherit',
+      margin: 'inherit',
+    },
+
+    // Arrow for horizontal popovers (left/right)
+    '.btu-popover-left::before, .btu-popover-right::before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: '-1',
+      height: 'var(--popover-arrow-size)',
+      left: 'calc(-1 * var(--popover-offset))',
+      right: 'calc(-1 * var(--popover-offset))',
+      top: 'calc(50% - var(--popover-arrow-size) / 2)',
+      clipPath:
+        'polygon(calc(var(--popover-offset) - var(--popover-arrow-size)) 50%, var(--popover-offset) 0, calc(100% - var(--popover-offset)) 0, calc(100% - var(--popover-offset) + var(--popover-arrow-size)) 50%, calc(100% - var(--popover-offset)) 100%, var(--popover-offset) 100%)',
+      background: 'inherit',
+      margin: 'inherit',
+    },
+
+    // Hide arrow when opted out
+    '.btu-popover-no-arrow::before': {
+      content: 'none',
+    },
+
+    // Reduced motion: disable translate animation, keep opacity fade
+    '@media (prefers-reduced-motion: reduce)': {
+      '.btu-popover': {
+        translate: 'none !important',
+        transition: 'opacity 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+      },
+    },
+  })
+})

package/dist/tailwind-plugin-tooltip.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind-plugin-tooltip.d.ts.map

package/dist/tailwind-plugin-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-tooltip.d.ts","sourceRoot":"","sources":["../src/tailwind-plugin-tooltip.ts"],"names":[],"mappings":""}

package/dist/tailwind-plugin-tooltip.js

@@ -0,0 +1,184 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Tooltip plugin using CSS anchor positioning and the native Popover API.
+ *
+ * Uses the HTML popover attribute for top-layer rendering. Animations use
+ * @starting-style for entry and transition-behavior: allow-discrete for exit.
+ *
+ * Class Names:
+ *
+ *  btu-tooltip            - Base tooltip styles (hidden by default via popover)
+ *  btu-tooltip-top        - Position above trigger (default)
+ *  btu-tooltip-bottom     - Position below trigger
+ *  btu-tooltip-left       - Position left of trigger
+ *  btu-tooltip-right      - Position right of trigger
+ *  btu-tooltip-no-arrow   - Hide the arrow pseudo-element
+ *
+ * Offset Sizes:
+ *
+ *  btu-tooltip-offset-sm  - 4px offset
+ *  btu-tooltip-offset-md  - 8px offset (same as default)
+ *  btu-tooltip-offset-lg  - 12px offset
+ *  btu-tooltip-offset-xl  - 16px offset
+ *
+ * CSS Custom Properties:
+ *
+ *  --tooltip-color-background  - Background color (default: var(--btu-theme-white, #fff))
+ *  --tooltip-color-text        - Text color (default: oklch(var(--btu-theme-gray-900)))
+ *  --tooltip-border-radius     - Border radius (default: theme borderRadius.lg)
+ */
+module.exports = plugin(function ({ addComponents, theme, config }) {
+    addComponents({
+        // Base tooltip styles — exit state (applied when closing, before display:none)
+        '.btu-tooltip': {
+            // Structural custom properties — kept as declarations since they're
+            // controlled by component props, not external CSS on parent elements.
+            '--tooltip-offset': '8px',
+            '--tooltip-arrow-size': '8px',
+            padding: '8px 12px',
+            backgroundColor: 'var(--tooltip-color-background, var(--btu-theme-white, #fff))',
+            color: `var(--tooltip-color-text, oklch(var(--btu-theme-gray-900)))`,
+            borderRadius: `var(--tooltip-border-radius, ${theme('borderRadius.lg')})`,
+            boxShadow: theme('boxShadow.lg'),
+            // theme('fontSize.xs') returns only the size string; config() gives the raw tuple
+            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+            fontWeight: '500',
+            whiteSpace: 'nowrap',
+            textAlign: 'left',
+            pointerEvents: 'none',
+            overflow: 'visible',
+            isolation: 'isolate',
+            margin: '0',
+            inset: 'unset',
+            border: 'none',
+            opacity: '0',
+            translate: '0 0',
+            transition: 'opacity 150ms ease, translate 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+            'position-visibility': 'anchors-visible',
+            // Native popover reset — browser defaults override otherwise
+            '&:popover-open': {
+                overflow: 'visible',
+                opacity: '1',
+                translate: '0 0',
+            },
+        },
+        // Position: top (default)
+        // Gap via inset `bottom`; margin-top drives the arrow flip via `margin: inherit`
+        '.btu-tooltip-top': {
+            'position-area': 'top',
+            bottom: 'var(--tooltip-offset)',
+            marginTop: 'var(--tooltip-offset)',
+            'position-try-fallbacks': 'flip-block',
+            translate: '0 4px',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: bottom
+        // Gap via inset `top`; margin-bottom drives the arrow flip
+        '.btu-tooltip-bottom': {
+            'position-area': 'bottom',
+            top: 'var(--tooltip-offset)',
+            marginBottom: 'var(--tooltip-offset)',
+            'position-try-fallbacks': 'flip-block',
+            translate: '0 -4px',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: left
+        // Gap via inset `right`; margin-left drives the arrow flip
+        '.btu-tooltip-left': {
+            'position-area': 'left',
+            right: 'var(--tooltip-offset)',
+            marginLeft: 'var(--tooltip-offset)',
+            'position-try-fallbacks': 'flip-inline',
+            translate: '4px 0',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Position: right
+        // Gap via inset `left`; margin-right drives the arrow flip
+        '.btu-tooltip-right': {
+            'position-area': 'right',
+            left: 'var(--tooltip-offset)',
+            marginRight: 'var(--tooltip-offset)',
+            'position-try-fallbacks': 'flip-inline',
+            translate: '-4px 0',
+            '&:popover-open': {
+                translate: '0 0',
+            },
+        },
+        // Offset sizes
+        '.btu-tooltip-offset-sm': { '--tooltip-offset': '4px' },
+        '.btu-tooltip-offset-md': { '--tooltip-offset': '8px' },
+        '.btu-tooltip-offset-lg': { '--tooltip-offset': '12px' },
+        '.btu-tooltip-offset-xl': { '--tooltip-offset': '16px' },
+        // @starting-style for entry animations
+        '@starting-style': {
+            '.btu-tooltip:popover-open': {
+                opacity: '0',
+            },
+            '.btu-tooltip-top:popover-open': {
+                translate: '0 4px',
+            },
+            '.btu-tooltip-bottom:popover-open': {
+                translate: '0 -4px',
+            },
+            '.btu-tooltip-left:popover-open': {
+                translate: '4px 0',
+            },
+            '.btu-tooltip-right:popover-open': {
+                translate: '-4px 0',
+            },
+        },
+        // Arrow for vertical tooltips (top/bottom).
+        // Extends beyond both tooltip edges via negative inset. A hexagonal
+        // clip-path creates arrow tips on both ends; margin: inherit auto-flips
+        // the visible tip when position-try-fallbacks: flip-block activates.
+        // See: https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/
+        // Arrow for vertical tooltips (top/bottom).
+        // Centered at 50% of the tooltip panel. This aligns with the trigger center
+        // because position-area centers the tooltip on the anchor element.
+        '.btu-tooltip-top::before, .btu-tooltip-bottom::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            width: 'var(--tooltip-arrow-size)',
+            top: 'calc(-1 * var(--tooltip-offset))',
+            bottom: 'calc(-1 * var(--tooltip-offset))',
+            left: 'calc(50% - var(--tooltip-arrow-size) / 2)',
+            clipPath: 'polygon(50% calc(var(--tooltip-offset) - var(--tooltip-arrow-size)), 100% var(--tooltip-offset), 100% calc(100% - var(--tooltip-offset)), 50% calc(100% - var(--tooltip-offset) + var(--tooltip-arrow-size)), 0 calc(100% - var(--tooltip-offset)), 0 var(--tooltip-offset))',
+            background: 'inherit',
+            margin: 'inherit',
+        },
+        // Arrow for horizontal tooltips (left/right).
+        // Same technique rotated 90° for flip-inline.
+        '.btu-tooltip-left::before, .btu-tooltip-right::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            height: 'var(--tooltip-arrow-size)',
+            left: 'calc(-1 * var(--tooltip-offset))',
+            right: 'calc(-1 * var(--tooltip-offset))',
+            top: 'calc(50% - var(--tooltip-arrow-size) / 2)',
+            clipPath: 'polygon(calc(var(--tooltip-offset) - var(--tooltip-arrow-size)) 50%, var(--tooltip-offset) 0, calc(100% - var(--tooltip-offset)) 0, calc(100% - var(--tooltip-offset) + var(--tooltip-arrow-size)) 50%, calc(100% - var(--tooltip-offset)) 100%, var(--tooltip-offset) 100%)',
+            background: 'inherit',
+            margin: 'inherit',
+        },
+        // Hide arrow when opted out
+        '.btu-tooltip-no-arrow::before': {
+            content: 'none',
+        },
+        // Reduced motion: disable translate animation, keep opacity fade
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-tooltip': {
+                translate: 'none !important',
+                transition: 'opacity 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
+            },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-tooltip.js.map

package/dist/tailwind-plugin-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-tooltip.js","sourceRoot":"","sources":["../src/tailwind-plugin-tooltip.ts"],"names":[],"mappings":"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"}