@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/lists.html

@@ -0,0 +1,232 @@
+<!-- ================================
+     LIST COMPONENT SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- ================================
+     BASIC UNORDERED LISTS
+     ================================ -->
+
+<!-- Default spacing -->
+<ul class="pa-list-basic">
+    <li>Dashboard with real-time metrics</li>
+    <li>User management and permissions</li>
+    <li>Advanced reporting tools</li>
+</ul>
+
+<!-- Compact spacing -->
+<ul class="pa-list-basic pa-list-basic--compact">
+    <li>Reduced vertical spacing</li>
+    <li>Perfect for dense content</li>
+    <li>Saves vertical space</li>
+</ul>
+
+<!-- Spacious layout -->
+<ul class="pa-list-basic pa-list-basic--spacious">
+    <li>More breathing room between items</li>
+    <li>Better for longer content blocks</li>
+    <li>Improved readability</li>
+</ul>
+
+<!-- Unstyled (no bullets) -->
+<ul class="pa-list-basic pa-list-basic--unstyled">
+    <li>No bullets or numbers</li>
+    <li>Just plain text items</li>
+    <li>Perfect for custom styling</li>
+</ul>
+
+<!-- Inline list -->
+<ul class="pa-list-basic pa-list-basic--inline">
+    <li><a href="#home">Home</a></li>
+    <li><a href="#about">About</a></li>
+    <li><a href="#services">Services</a></li>
+    <li><a href="#contact">Contact</a></li>
+</ul>
+
+<!-- Bordered list -->
+<ul class="pa-list-basic pa-list-basic--bordered">
+    <li>User Management Module</li>
+    <li>Content Management System</li>
+    <li>Analytics Dashboard</li>
+    <li>Email Campaign Tools</li>
+</ul>
+
+<!-- Striped list -->
+<ul class="pa-list-basic pa-list-basic--striped">
+    <li>Monthly subscription: $99/month</li>
+    <li>Annual subscription: $990/year</li>
+    <li>Enterprise plan: Custom pricing</li>
+    <li>Educational discount: 50% off</li>
+</ul>
+
+
+<!-- ================================
+     ICON LISTS
+     ================================ -->
+
+<!-- Success (checkmarks) -->
+<ul class="pa-list-basic pa-list-basic--icon">
+    <li>SSL/TLS encryption enabled</li>
+    <li>Automatic daily backups</li>
+    <li>99.9% uptime SLA guarantee</li>
+</ul>
+
+<!-- Danger (X marks) -->
+<ul class="pa-list-basic pa-list-basic--icon pa-list-basic--danger">
+    <li>Deprecated API endpoint</li>
+    <li>Unsupported browser version</li>
+    <li>Missing required permissions</li>
+</ul>
+
+<!-- Info (arrows) -->
+<ul class="pa-list-basic pa-list-basic--icon pa-list-basic--info">
+    <li>Navigate to Settings panel</li>
+    <li>Select Integration options</li>
+    <li>Choose your provider</li>
+</ul>
+
+<!-- Warning (exclamation) -->
+<ul class="pa-list-basic pa-list-basic--icon pa-list-basic--warning">
+    <li>Rate limit approaching threshold</li>
+    <li>Certificate expires in 30 days</li>
+    <li>Low disk space warning</li>
+</ul>
+
+
+<!-- ================================
+     ORDERED LISTS
+     ================================ -->
+
+<!-- Numeric (default) -->
+<ol class="pa-list-ordered">
+    <li>Create a new project</li>
+    <li>Configure basic settings</li>
+    <li>Invite team members</li>
+    <li>Set up workflows</li>
+</ol>
+
+<!-- Roman numerals -->
+<ol class="pa-list-ordered pa-list-ordered--roman">
+    <li>Executive summary</li>
+    <li>Market analysis</li>
+    <li>Financial projections</li>
+    <li>Implementation roadmap</li>
+</ol>
+
+<!-- Alphabetical -->
+<ol class="pa-list-ordered pa-list-ordered--alpha">
+    <li>Appendix A: Technical specifications</li>
+    <li>Appendix B: User testimonials</li>
+    <li>Appendix C: Pricing structure</li>
+</ol>
+
+
+<!-- ================================
+     DEFINITION LISTS
+     ================================ -->
+
+<!-- Standard layout -->
+<dl class="pa-list-definition">
+    <dt>API Key</dt>
+    <dd>A unique identifier used to authenticate requests to the API</dd>
+
+    <dt>Webhook</dt>
+    <dd>HTTP callbacks that send real-time data to your application when events occur</dd>
+
+    <dt>OAuth 2.0</dt>
+    <dd>Industry-standard protocol for authorization allowing third-party access</dd>
+</dl>
+
+<!-- Inline layout (key-value pairs) -->
+<dl class="pa-list-definition pa-list-definition--inline">
+    <dt>Status</dt>
+    <dd>Active</dd>
+    <dt>Created</dt>
+    <dd>2025-01-15</dd>
+    <dt>Modified</dt>
+    <dd>2025-10-05</dd>
+    <dt>Author</dt>
+    <dd>John Doe</dd>
+</dl>
+
+
+<!-- ================================
+     COMPLEX LISTS (with avatars)
+     ================================ -->
+
+<div class="pa-list">
+    <div class="pa-list__item">
+        <div class="pa-list__avatar">👤</div>
+        <div class="pa-list__content">
+            <div class="pa-list__title">Sarah Johnson</div>
+            <div class="pa-list__subtitle">Product Manager</div>
+            <div class="pa-list__meta">Last active: 2 hours ago</div>
+        </div>
+    </div>
+    <div class="pa-list__item">
+        <div class="pa-list__avatar">👤</div>
+        <div class="pa-list__content">
+            <div class="pa-list__title">Michael Chen</div>
+            <div class="pa-list__subtitle">Lead Developer</div>
+            <div class="pa-list__meta">Last active: 15 minutes ago</div>
+        </div>
+    </div>
+    <div class="pa-list__item">
+        <div class="pa-list__avatar">👤</div>
+        <div class="pa-list__content">
+            <div class="pa-list__title">Emily Rodriguez</div>
+            <div class="pa-list__subtitle">UX Designer</div>
+            <div class="pa-list__meta">Last active: 1 day ago</div>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     CSS CLASSES REFERENCE
+     ================================ -->
+
+<!--
+UNORDERED LISTS:
+- pa-list-basic                     Base unordered list with bullets
+- pa-list-basic--compact            Reduced spacing between items
+- pa-list-basic--spacious           Increased spacing between items
+- pa-list-basic--unstyled           No bullets, no padding
+- pa-list-basic--inline             Horizontal layout with flex
+- pa-list-basic--bordered           Border between each item
+- pa-list-basic--striped            Zebra striping (even rows)
+- pa-list-basic--icon               Checkmarks (success icons)
+- pa-list-basic--icon pa-list-basic--danger    X marks (danger icons)
+- pa-list-basic--icon pa-list-basic--info      Arrows (info icons)
+- pa-list-basic--icon pa-list-basic--warning   Exclamation marks (warning icons)
+
+ORDERED LISTS:
+- pa-list-ordered                   Base ordered list (1, 2, 3...)
+- pa-list-ordered--roman            Roman numerals (I, II, III...)
+- pa-list-ordered--alpha            Lowercase letters (a, b, c...)
+
+DEFINITION LISTS:
+- pa-list-definition                Standard definition list (dt/dd)
+- pa-list-definition--inline        Horizontal key-value pairs
+
+COMPLEX LISTS:
+- pa-list                           Container for complex list items
+- pa-list__item                     Individual list item with avatar/content
+- pa-list__avatar                   Avatar/icon container (circular)
+- pa-list__content                  Content wrapper
+- pa-list__title                    Primary text (bold)
+- pa-list__subtitle                 Secondary text (gray, smaller)
+- pa-list__meta                     Metadata text (gray, smallest)
+
+USAGE NOTES:
+✅ Use pa-list-basic for simple content lists
+✅ Use pa-list-basic--icon for feature lists or checklists
+✅ Use pa-list-basic--bordered for menu-like lists
+✅ Use pa-list-basic--inline for navigation or tags
+✅ Use pa-list-ordered for step-by-step instructions
+✅ Use pa-list-definition for glossaries or specifications
+✅ Use pa-list (complex) for user lists, activity feeds, notifications
+✅ All lists have proper line-height (1.6) for readability
+✅ Icon lists use semantic colors (success, danger, info, warning)
+✅ Complex lists work great in card bodies with pa-card__body--no-padding
+-->

package/snippets/loaders.html

@@ -0,0 +1,183 @@
+<!-- ================================
+     LOADER SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- SPINNER COMPONENT -->
+
+<!-- Basic Spinner -->
+<div class="pa-spinner"></div>
+
+<!-- Spinner Sizes -->
+<div class="pa-spinner pa-spinner--xs"></div>
+<div class="pa-spinner pa-spinner--sm"></div>
+<div class="pa-spinner"></div>
+<div class="pa-spinner pa-spinner--md"></div>
+<div class="pa-spinner pa-spinner--lg"></div>
+<div class="pa-spinner pa-spinner--xl"></div>
+<div class="pa-spinner pa-spinner--2xl"></div>
+
+<!-- Colored Spinners -->
+<div class="pa-spinner pa-spinner--primary"></div>
+<div class="pa-spinner pa-spinner--secondary"></div>
+<div class="pa-spinner pa-spinner--success"></div>
+<div class="pa-spinner pa-spinner--danger"></div>
+<div class="pa-spinner pa-spinner--warning"></div>
+<div class="pa-spinner pa-spinner--info"></div>
+
+
+<!-- ADVANCED LOADERS -->
+
+<!-- Dots Loader (requires 3 span children) -->
+<div class="pa-loader-dots">
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<!-- Dots Loader - Large -->
+<div class="pa-loader-dots pa-loader-dots--lg">
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<!-- Bars Loader (requires 5 span children) -->
+<div class="pa-loader-bars">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<!-- Bars Loader - Large -->
+<div class="pa-loader-bars pa-loader-bars--lg">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<!-- Pulse Loader (CSS-only, no children needed) -->
+<div class="pa-loader-pulse"></div>
+
+<!-- Pulse Loader - Large -->
+<div class="pa-loader-pulse pa-loader-pulse--lg"></div>
+
+<!-- Ring Loader (CSS-only, no children needed) -->
+<div class="pa-loader-ring"></div>
+
+<!-- Ring Loader - Large -->
+<div class="pa-loader-ring pa-loader-ring--lg"></div>
+
+<!-- Wave Loader (requires 5 span children) -->
+<div class="pa-loader-wave">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<!-- Wave Loader - Large -->
+<div class="pa-loader-wave pa-loader-wave--lg">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+
+<!-- LOADER UTILITIES -->
+
+<!-- Centered Loader -->
+<div class="pa-loader-center">
+  <div class="pa-spinner"></div>
+</div>
+
+<!-- Centered Loader with Text -->
+<div class="pa-loader-center">
+  <div class="pa-spinner pa-spinner--lg pa-spinner--primary"></div>
+  <p>Loading your data...</p>
+</div>
+
+<!-- Overlay Loader (covers entire screen) -->
+<div class="pa-loader-overlay">
+  <div class="pa-spinner pa-spinner--lg"></div>
+</div>
+
+
+<!-- INLINE LOADERS -->
+
+<!-- Inline Loading Text -->
+<p>
+  Loading data <span class="pa-spinner pa-spinner--sm"></span>
+</p>
+
+
+<!-- BUTTON WITH SPINNER -->
+
+<!-- Loading Button -->
+<button class="pa-btn pa-btn--primary pa-btn--loading">
+  <span class="pa-btn__spinner"></span>
+  Loading...
+</button>
+
+
+<!-- CARD WITH LOADER -->
+
+<!-- Card Loading State -->
+<div class="pa-card">
+  <div class="pa-card__body">
+    <div class="pa-loader-center" style="min-height: 200px;">
+      <div class="pa-loader-dots pa-loader-dots--lg" style="color: var(--accent-color);">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <p style="margin-top: 1rem; color: var(--text-secondary);">Loading content...</p>
+    </div>
+  </div>
+</div>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+SPINNERS:
+- .pa-spinner: Basic spinner (CSS animation)
+- .pa-spinner--xs, --sm, --md, --lg, --xl, --2xl: Size variants
+- .pa-spinner--primary, --secondary, --success, --danger, --warning, --info: Color variants
+
+ADVANCED LOADERS:
+- .pa-loader-dots: Bouncing dots (requires 3 <span> children)
+- .pa-loader-bars: Animated bars (requires 5 <span> children)
+- .pa-loader-wave: Wave animation (requires 5 <span> children)
+- .pa-loader-pulse: Pulsing circle (CSS-only, no children)
+- .pa-loader-ring: Spinning ring (CSS-only, no children)
+- All support --lg size variant
+
+UTILITIES:
+- .pa-loader-center: Center loader in container (flex column, centered)
+- .pa-loader-overlay: Full-screen overlay with loader
+
+BUTTON LOADING:
+- .pa-btn--loading: Loading state modifier
+- .pa-btn__spinner: Spinner inside button
+
+STRUCTURE EXAMPLES:
+<div class="pa-loader-dots">       <!-- 3 spans required -->
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<div class="pa-loader-bars">       <!-- 5 spans required -->
+  <span></span><span></span><span></span><span></span><span></span>
+</div>
+-->