@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/tooltips.html

@@ -0,0 +1,411 @@
+<!-- ================================
+     TOOLTIP & POPOVER SNIPPETS
+     Pure Admin Visual Framework
+
+     Uses Floating UI (@floating-ui/dom) for smart positioning
+     ================================ -->
+
+<!-- TOOLTIPS -->
+
+<!-- Tooltips are automatically positioned using Floating UI
+     - Add class="pa-tooltip" and data-tooltip="text"
+     - No JavaScript initialization needed (handled globally)
+     - Smart collision detection and auto-flipping
+     - Works on any element (buttons, spans, links, etc.)
+-->
+
+<!-- BASIC TOOLTIPS -->
+
+<!-- Tooltip Top (default) -->
+<span class="pa-tooltip" data-tooltip="This is a tooltip">Hover me</span>
+
+<!-- Tooltip Right -->
+<span class="pa-tooltip pa-tooltip--right" data-tooltip="Tooltip on the right">Hover me</span>
+
+<!-- Tooltip Bottom -->
+<span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Tooltip on the bottom">Hover me</span>
+
+<!-- Tooltip Left -->
+<span class="pa-tooltip pa-tooltip--left" data-tooltip="Tooltip on the left">Hover me</span>
+
+
+<!-- TOOLTIP POSITIONS (All 4 directions) -->
+
+<!-- Top Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip" data-tooltip="Top tooltip">
+  Top
+</button>
+
+<!-- Right Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--right" data-tooltip="Right tooltip">
+  Right
+</button>
+
+<!-- Bottom Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--bottom" data-tooltip="Bottom tooltip">
+  Bottom
+</button>
+
+<!-- Left Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--left" data-tooltip="Left tooltip">
+  Left
+</button>
+
+
+<!-- COLORED TOOLTIPS -->
+
+<!-- Primary Tooltip -->
+<span class="pa-tooltip pa-tooltip--primary" data-tooltip="Primary tooltip">
+  Primary
+</span>
+
+<!-- Success Tooltip -->
+<span class="pa-tooltip pa-tooltip--success" data-tooltip="Success tooltip">
+  Success
+</span>
+
+<!-- Warning Tooltip -->
+<span class="pa-tooltip pa-tooltip--warning" data-tooltip="Warning tooltip">
+  Warning
+</span>
+
+<!-- Danger Tooltip -->
+<span class="pa-tooltip pa-tooltip--danger" data-tooltip="Danger tooltip">
+  Danger
+</span>
+
+
+<!-- CURSOR MODIFIERS -->
+
+<!-- Default tooltip (inherits parent cursor - good for clickable elements like buttons, tabs) -->
+<button class="pa-btn pa-btn--primary pa-tooltip" data-tooltip="Click to view">
+  Clickable Item
+</button>
+
+<!-- Help cursor tooltip (question mark cursor - good for informational hints) -->
+<span class="pa-tooltip pa-tooltip--help" data-tooltip="This provides helpful information">
+  What's this?
+</span>
+
+
+<!-- COLORED TOOLTIPS WITH POSITIONS -->
+
+<!-- Primary Bottom Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--primary pa-tooltip--bottom" data-tooltip="Primary info">
+  Primary Bottom
+</button>
+
+<!-- Success Right Tooltip -->
+<button class="pa-btn pa-btn--success pa-tooltip pa-tooltip--success pa-tooltip--right" data-tooltip="Operation successful!">
+  Success Right
+</button>
+
+<!-- Danger Left Tooltip -->
+<button class="pa-btn pa-btn--danger pa-tooltip pa-tooltip--danger pa-tooltip--left" data-tooltip="Critical warning!">
+  Danger Left
+</button>
+
+
+<!-- MULTILINE TOOLTIPS -->
+
+<!-- Multiline Tooltip -->
+<span class="pa-tooltip pa-tooltip--multiline" data-tooltip="This is a longer tooltip that will wrap to multiple lines when the text is too long to fit on a single line.">
+  Hover for multiline
+</span>
+
+<!-- Multiline Bottom -->
+<span class="pa-tooltip pa-tooltip--multiline pa-tooltip--bottom" data-tooltip="Multiline tooltips work with any position. This text will wrap nicely across multiple lines.">
+  Multiline bottom
+</span>
+
+
+<!-- TOOLTIPS IN TABLES -->
+
+<!-- Table with Action Tooltips -->
+<table class="pa-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th class="col-auto">Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td class="col-auto">
+        <div class="pa-btn-group">
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary pa-tooltip pa-tooltip--bottom" data-tooltip="View details">
+            👁️
+          </button>
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary pa-tooltip pa-tooltip--bottom" data-tooltip="Edit user">
+            ✏️
+          </button>
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger pa-tooltip pa-tooltip--bottom" data-tooltip="Delete user">
+            🗑️
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- TOOLTIPS WITH BADGES -->
+
+<!-- Badge with Truncated Text and Tooltip -->
+<span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Very Long Badge Text That Needs Truncation">
+  <span class="pa-badge pa-badge--info pa-badge--w-8x">Very Long Badge Text That Needs Truncation</span>
+</span>
+
+
+<!-- POPOVERS - Basic -->
+
+<!-- Popovers are click-triggered rich content overlays
+     - Use Floating UI for positioning (like tooltips)
+     - Support all 4 positions (top, right, bottom, left) via data-placement attribute
+     - Auto collision detection and flipping
+     - Close with X button or clicking outside
+-->
+
+<!-- Basic Popover (Top) -->
+<div class="pa-popover" data-placement="top">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Help</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>This is a popover with rich content. You can include text, links, and formatting.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Popover Right -->
+<div class="pa-popover" data-placement="right">
+  <button class="pa-popover__trigger">i</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Information</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Popover positioned to the right.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Popover Bottom -->
+<div class="pa-popover" data-placement="bottom">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Details</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Popover positioned below the trigger.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Popover Left -->
+<div class="pa-popover" data-placement="left">
+  <button class="pa-popover__trigger">!</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Warning</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Popover positioned to the left.</p>
+    </div>
+  </div>
+</div>
+
+
+<!-- POPOVER SIZES -->
+
+<!-- Small Popover -->
+<div class="pa-popover pa-popover--sm" data-placement="top">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Tip</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Small popover for brief hints.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Default Popover -->
+<div class="pa-popover" data-placement="top">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Help</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Default size popover for standard content.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Large Popover -->
+<div class="pa-popover pa-popover--lg" data-placement="top">
+  <button class="pa-popover__trigger">i</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Detailed Information</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Large popover for detailed explanations and longer content.</p>
+      <p>Can include multiple paragraphs, lists, and other elements.</p>
+    </div>
+  </div>
+</div>
+
+
+<!-- POPOVER WITH RICH CONTENT -->
+
+<!-- Popover with List -->
+<div class="pa-popover pa-popover--lg" data-placement="bottom">
+  <button class="pa-popover__trigger">i</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Features</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>This version includes:</p>
+      <ul>
+        <li>Performance improvements</li>
+        <li>Bug fixes</li>
+        <li>New dashboard features</li>
+        <li>Enhanced security</li>
+      </ul>
+      <p>Learn more in the <a href="/docs">documentation</a>.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Popover with Code -->
+<div class="pa-popover pa-popover--lg" data-placement="right">
+  <button class="pa-popover__trigger">?</button>
+  <div class="pa-popover__content">
+    <div class="pa-popover__header">
+      <h4>Usage Example</h4>
+      <button class="pa-popover__close">×</button>
+    </div>
+    <div class="pa-popover__body">
+      <p>Use the following code:</p>
+      <code>const value = getData();</code>
+      <p>This will retrieve the current value.</p>
+    </div>
+  </div>
+</div>
+
+
+<!-- JAVASCRIPT API -->
+
+<!-- Tooltips and popovers are initialized automatically by tooltips-popovers.js
+     No manual initialization needed! -->
+
+<script>
+// Optional: Access the public API if needed
+// window.PureAdminTooltips provides:
+// - init(): Initialize all tooltips and popovers
+// - initTooltips(): Initialize tooltips only
+// - initPopovers(): Initialize popovers only
+// - showTooltip(element): Show tooltip for element
+// - hideTooltip(): Hide current tooltip
+
+// Example: Manually initialize after dynamic content load
+document.addEventListener('content-loaded', function() {
+  window.PureAdminTooltips.init();
+});
+</script>
+
+
+<!-- AVAILABLE CLASSES REFERENCE -->
+<!--
+TOOLTIPS:
+- pa-tooltip (base class, top position by default)
+
+POSITIONS:
+- pa-tooltip--right
+- pa-tooltip--bottom
+- pa-tooltip--left
+
+VARIANTS:
+- pa-tooltip--primary (primary colored background)
+- pa-tooltip--success (success colored background)
+- pa-tooltip--warning (warning colored background)
+- pa-tooltip--danger (danger colored background)
+
+MULTILINE:
+- pa-tooltip--multiline (allows text wrapping)
+
+POPOVERS:
+- pa-popover (base container)
+
+POSITIONING (use data-placement attribute):
+- data-placement="top" (default)
+- data-placement="right"
+- data-placement="bottom"
+- data-placement="left"
+
+SIZES:
+- pa-popover--sm (small)
+- pa-popover--lg (large)
+
+COMPONENTS:
+- pa-popover__trigger (button/trigger element)
+- pa-popover__content (popover container)
+- pa-popover__header (header section)
+- pa-popover__body (content section)
+- pa-popover__close (close button)
+
+FLOATING UI FEATURES:
+- Automatic collision detection
+- Auto-flipping when near viewport edges
+- Smart shift to stay visible
+- No manual positioning needed
+- autoUpdate for automatic repositioning on scroll/resize
+-->
+
+<!-- IMPLEMENTATION NOTES -->
+<!--
+REQUIREMENTS:
+- @floating-ui/core and @floating-ui/dom must be loaded
+- tooltips-popovers.js handles all initialization
+- SCSS styles in core-components/_tooltips.scss
+
+FLOATING UI BENEFITS:
+- Tooltips never go off-screen
+- Auto-flip to opposite side if no space
+- Shift horizontally/vertically to stay visible
+- Works with scrolling and resizing
+- Position is calculated dynamically
+
+TOOLTIP BEHAVIOR:
+- Show on mouseenter and focus
+- Hide on mouseleave and blur
+- Single shared tooltip element (performance)
+- Positioned using computePosition() with flip, shift, offset middleware
+
+POPOVER BEHAVIOR:
+- Show on trigger click
+- Hide on close button click or outside click
+- Use data-placement attribute for positioning (not CSS classes)
+- Positioned using computePosition() with flip, shift, offset middleware
+- autoUpdate ensures automatic repositioning on scroll/resize
+- Uses data-show attribute for visibility control
+- Absolute positioning relative to trigger
+- Only one popover open at a time
+- Proper cleanup of autoUpdate on hide
+-->

package/snippets/typography.html

@@ -0,0 +1,101 @@
+<!-- Typography Component (.pa-text)
+     BEM pattern for paragraph text styling
+     ================================================== -->
+
+<!-- Base Text (default: 14px, primary color) -->
+<p class="pa-text">Default paragraph text with 14px font size and primary color.</p>
+
+<!-- Size Modifiers -->
+<p class="pa-text pa-text--xs">Extra small text (10px)</p>
+<p class="pa-text pa-text--sm">Small text (12px)</p>
+<p class="pa-text">Default text (14px)</p>
+<p class="pa-text pa-text--lg">Large text (16px)</p>
+<p class="pa-text pa-text--xl">Extra large text (18px)</p>
+
+<!-- Color Modifiers -->
+<p class="pa-text pa-text--primary">Primary color text</p>
+<p class="pa-text pa-text--secondary">Secondary/muted color text</p>
+
+<!-- Alignment Modifiers -->
+<p class="pa-text pa-text--left">Left aligned text</p>
+<p class="pa-text pa-text--center">Center aligned text</p>
+<p class="pa-text pa-text--right">Right aligned text</p>
+
+<!-- Semantic Variants -->
+
+<!-- Caption: Small secondary text with bottom margin (for hints/descriptions) -->
+<p class="pa-text pa-text--caption">This is a caption - small, secondary, with margin-bottom</p>
+
+<!-- Lead: Larger intro text with relaxed line height -->
+<p class="pa-text pa-text--lead">This is lead text - larger font with relaxed line height for introductory paragraphs.</p>
+
+<!-- Combined Modifiers -->
+<p class="pa-text pa-text--sm pa-text--secondary">Small secondary text</p>
+<p class="pa-text pa-text--lg pa-text--center">Large centered text</p>
+<p class="pa-text pa-text--xs pa-text--right pa-text--secondary">Extra small, right-aligned, secondary</p>
+
+<!-- With Spacing Utilities -->
+<p class="pa-text pa-text--secondary mt-4">Secondary text with top margin</p>
+<p class="pa-text pa-text--caption mb-6">Caption with larger bottom margin</p>
+
+<!-- Practical Examples -->
+
+<!-- Demo/hint text above a component -->
+<h4>Badge Wrapping Demo</h4>
+<p class="pa-text pa-text--caption">29 badges in narrow container</p>
+<div class="pa-badge-group"><!-- badges here --></div>
+
+<!-- Card header description -->
+<div class="pa-card__header">
+    <h3>Feature Title</h3>
+    <p class="pa-text pa-text--secondary">Brief description of this feature or section.</p>
+</div>
+
+<!-- Form helper text -->
+<div class="pa-card__footer">
+    <p class="pa-text pa-text--sm pa-text--secondary" style="margin: 0;">
+        <strong>Note:</strong> Additional information about the form layout.
+    </p>
+</div>
+
+<!-- Centered tab content -->
+<div class="pa-tabs__panel">
+    <p class="pa-text pa-text--center">Feature highlights and capabilities.</p>
+</div>
+
+<!-- Toast/notification helper -->
+<p class="pa-text pa-text--secondary mt-4">
+    Progress bar shows time remaining before auto-dismiss (5 seconds)
+</p>
+
+<!--
+Available Classes Reference:
+============================
+
+Base:
+  .pa-text                    Default (14px, primary color)
+
+Sizes:
+  .pa-text--xs                10px (extra small)
+  .pa-text--sm                12px (small)
+  .pa-text--lg                16px (large)
+  .pa-text--xl                18px (extra large)
+
+Colors:
+  .pa-text--primary           Primary text color
+  .pa-text--secondary         Secondary/muted text color
+
+Alignment:
+  .pa-text--left              Left align
+  .pa-text--center            Center align
+  .pa-text--right             Right align
+
+Semantic:
+  .pa-text--caption           Small + secondary + margin-bottom (for hints)
+  .pa-text--lead              Large + relaxed line-height (for intros)
+
+Combine with spacing utilities:
+  mt-1 through mt-20          Margin top
+  mb-1 through mb-20          Margin bottom
+  (see utilities.scss for full spacing scale)
+-->