rizzo-css 0.0.12 → 0.0.13

package/scaffold/astro-app/src/components/Pagination.astro

@@ -0,0 +1,240 @@
+---
+interface Props {
+  currentPage: number;
+  totalPages: number;
+  hrefTemplate?: string;
+  showFirstLast?: boolean;
+  maxVisible?: number;
+  /** When true, add data attributes and script so clicking updates hash and current page (for demos) */
+  syncHash?: boolean;
+  class?: string;
+}
+
+const {
+  currentPage,
+  totalPages,
+  hrefTemplate = '?page={page}',
+  showFirstLast = true,
+  maxVisible = 5,
+  syncHash = false,
+  class: className = '',
+} = Astro.props;
+
+const classes = `pagination ${className}`.trim();
+const hashMatch = typeof hrefTemplate === 'string' && hrefTemplate.startsWith('#');
+const dataSync = syncHash && hashMatch ? { 'data-pagination-sync': 'true', 'data-total-pages': String(totalPages), 'data-href-template': hrefTemplate } : {};
+
+function buildHref(page: number): string {
+  return hrefTemplate.replace(/\{page\}/g, String(page));
+}
+
+/** Build array of page numbers and 'ellipsis' for display */
+function getPageItems(total: number, current: number, maxVisible: number): (number | 'ellipsis')[] {
+  if (total <= 1) return [];
+  if (total <= maxVisible) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const items: (number | 'ellipsis')[] = [1];
+  const delta = Math.max(0, Math.floor((maxVisible - 2) / 2));
+  const start = Math.max(2, current - delta);
+  const end = Math.min(total - 1, current + delta);
+  if (start > 2) items.push('ellipsis');
+  for (let p = start; p <= end; p++) {
+    if (p !== 1 && p !== total) items.push(p);
+  }
+  if (end < total - 1) items.push('ellipsis');
+  if (total > 1) items.push(total);
+  return items;
+}
+
+const pageItems = getPageItems(totalPages, currentPage, maxVisible);
+const hasPrev = currentPage > 1;
+const hasNext = currentPage < totalPages;
+---
+
+<nav class={classes} aria-label="Pagination" {...dataSync}>
+  <ul class="pagination__list">
+    {showFirstLast && totalPages > 1 && (
+      <li class="pagination__item">
+        {hasPrev ? (
+          <a class="pagination__link pagination__link--prev" href={buildHref(1)} aria-label="First page" data-pagination-role="first">
+            First
+          </a>
+        ) : (
+          <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true" data-pagination-role="first">
+            First
+          </span>
+        )}
+      </li>
+    )}
+    <li class="pagination__item">
+      {hasPrev ? (
+        <a class="pagination__link pagination__link--prev" href={buildHref(currentPage - 1)} aria-label="Previous page" data-pagination-role="prev">
+          Previous
+        </a>
+      ) : (
+        <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true" data-pagination-role="prev">
+          Previous
+        </span>
+      )}
+    </li>
+    {pageItems.map((item) => (
+      <li class="pagination__item">
+        {item === 'ellipsis' ? (
+          <span class="pagination__ellipsis" aria-hidden="true">
+            …
+          </span>
+        ) : item === currentPage ? (
+          <span class="pagination__link pagination__link--current" aria-current="page" data-page={String(item)}>
+            {item}
+          </span>
+        ) : (
+          <a class="pagination__link" href={buildHref(item)} aria-label={`Page ${item}`} data-page={String(item)}>
+            {item}
+          </a>
+        )}
+      </li>
+    ))}
+    <li class="pagination__item">
+      {hasNext ? (
+        <a class="pagination__link pagination__link--next" href={buildHref(currentPage + 1)} aria-label="Next page" data-pagination-role="next">
+          Next
+        </a>
+      ) : (
+        <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true" data-pagination-role="next">
+          Next
+        </span>
+      )}
+    </li>
+    {showFirstLast && totalPages > 1 && (
+      <li class="pagination__item">
+        {hasNext ? (
+          <a class="pagination__link pagination__link--next" href={buildHref(totalPages)} aria-label="Last page" data-pagination-role="last">
+            Last
+          </a>
+        ) : (
+          <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true" data-pagination-role="last">
+            Last
+          </span>
+        )}
+      </li>
+    )}
+  </ul>
+</nav>
+
+{syncHash && hashMatch && (
+  <script is:inline>
+    (function() {
+      function getHref(nav, page) {
+        var t = nav.getAttribute('data-href-template') || '#page-{page}';
+        return t.replace(/\{page\}/g, String(page));
+      }
+      function getRoleElement(nav, role) {
+        var candidates = nav.querySelectorAll('[data-pagination-role="' + role + '"]');
+        for (var i = 0; i < candidates.length; i++) {
+          if (candidates[i].closest && candidates[i].closest('[data-pagination-sync="true"]') === nav) return candidates[i];
+        }
+        return candidates[0] || null;
+      }
+      function setCurrentPage(nav, pageNum) {
+        var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+        pageNum = Math.max(1, Math.min(pageNum, total));
+
+        Array.from(nav.querySelectorAll('[data-page]')).forEach(function(el) {
+          var page = el.getAttribute('data-page');
+          if (page === 'ellipsis') return;
+          var num = parseInt(page, 10);
+          if (isNaN(num)) return;
+          var isCurrent = num === pageNum;
+          var parent = el.parentNode;
+          if (isCurrent && el.tagName !== 'SPAN') {
+            var span = document.createElement('span');
+            span.className = 'pagination__link pagination__link--current';
+            span.setAttribute('aria-current', 'page');
+            span.setAttribute('data-page', page);
+            span.textContent = el.textContent;
+            parent.replaceChild(span, el);
+          } else if (!isCurrent && el.tagName !== 'A') {
+            var a = document.createElement('a');
+            a.className = 'pagination__link';
+            a.href = getHref(nav, num);
+            a.setAttribute('aria-label', 'Page ' + page);
+            a.setAttribute('data-page', page);
+            a.textContent = el.textContent;
+            parent.replaceChild(a, el);
+          }
+        });
+
+        ['first', 'prev', 'next', 'last'].forEach(function(role) {
+          var el = getRoleElement(nav, role);
+          if (!el) return;
+          var disabled = (role === 'first' || role === 'prev') ? pageNum <= 1 : pageNum >= total;
+          var hrefPage = role === 'first' ? 1 : role === 'last' ? total : role === 'prev' ? pageNum - 1 : pageNum + 1;
+          var parent = el.parentNode;
+          if (disabled) {
+            if (el.tagName !== 'SPAN') {
+              var span = document.createElement('span');
+              span.className = 'pagination__link pagination__link--' + (role === 'first' || role === 'prev' ? 'prev' : 'next') + ' pagination__link--disabled';
+              span.setAttribute('aria-disabled', 'true');
+              span.setAttribute('data-pagination-role', role);
+              span.textContent = el.textContent;
+              parent.replaceChild(span, el);
+            }
+          } else {
+            if (el.tagName !== 'A') {
+              var a = document.createElement('a');
+              a.className = 'pagination__link pagination__link--' + (role === 'first' || role === 'prev' ? 'prev' : 'next');
+              a.href = getHref(nav, hrefPage);
+              a.setAttribute('aria-label', role === 'first' ? 'First page' : role === 'last' ? 'Last page' : role === 'prev' ? 'Previous page' : 'Next page');
+              a.setAttribute('data-pagination-role', role);
+              a.textContent = el.textContent;
+              parent.replaceChild(a, el);
+            } else {
+              el.href = getHref(nav, hrefPage);
+            }
+          }
+        });
+      }
+      function init() {
+        document.querySelectorAll('[data-pagination-sync="true"]').forEach(function(nav) {
+          var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+          var hash = window.location.hash;
+          var m = hash && hash.match(/^#page-(\d+)$/);
+          var page = m ? parseInt(m[1], 10) : null;
+          if (page >= 1 && page <= total) setCurrentPage(nav, page);
+
+          if (nav.hasAttribute('data-pagination-initialized')) return;
+          nav.setAttribute('data-pagination-initialized', 'true');
+          nav.addEventListener('click', function(e) {
+            var a = e.target.closest('a.pagination__link');
+            if (!a || !a.href) return;
+            var href = a.getAttribute('href') || a.href || '';
+            var match = href.match(/#page-(\d+)/);
+            if (!match) return;
+            e.preventDefault();
+            var pageNum = parseInt(match[1], 10);
+            if (pageNum >= 1 && pageNum <= total) {
+              window.location.hash = '#page-' + pageNum;
+              setCurrentPage(nav, pageNum);
+            }
+          });
+        });
+
+        if (window.__paginationSyncHashListener) return;
+        window.__paginationSyncHashListener = true;
+        window.addEventListener('hashchange', function() {
+          var hash = window.location.hash;
+          var m = hash && hash.match(/^#page-(\d+)$/);
+          if (!m) return;
+          var pageNum = parseInt(m[1], 10);
+          document.querySelectorAll('[data-pagination-sync="true"]').forEach(function(nav) {
+            var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+            if (pageNum >= 1 && pageNum <= total) setCurrentPage(nav, pageNum);
+          });
+        });
+      }
+      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+      else init();
+    })();
+  </script>
+)}

package/scaffold/astro-app/src/components/ProgressBar.astro

@@ -0,0 +1,65 @@
+---
+interface Props {
+  /** Current value (0 to max) */
+  value?: number;
+  /** Maximum value (default: 100) */
+  max?: number;
+  /** Visual variant */
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+  /** Bar height size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show percentage or value label */
+  showLabel?: boolean;
+  /** Indeterminate (animated) state - ignores value */
+  indeterminate?: boolean;
+  /** Accessible label for the progress bar */
+  label?: string;
+  class?: string;
+}
+
+const {
+  value = 0,
+  max = 100,
+  variant = 'primary',
+  size = 'md',
+  showLabel = false,
+  indeterminate = false,
+  label,
+  class: className = '',
+} = Astro.props;
+
+const safeMax = max <= 0 ? 100 : max;
+const clampedValue = indeterminate ? 0 : Math.max(0, Math.min(value, safeMax));
+const percentage = indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100);
+
+const variantClass = `progress--${variant}`;
+const sizeClass = `progress--${size}`;
+const indeterminateClass = indeterminate ? 'progress--indeterminate' : '';
+const classes = `progress ${variantClass} ${sizeClass} ${indeterminateClass} ${className}`.trim();
+
+const ariaAttrs = indeterminate
+  ? { 'aria-valuemin': 0, 'aria-valuemax': safeMax, 'aria-label': label ?? 'Loading', 'aria-valuetext': 'Loading' }
+  : {
+      'aria-valuenow': clampedValue,
+      'aria-valuemin': 0,
+      'aria-valuemax': safeMax,
+      'aria-label': label ?? undefined,
+    };
+
+const barStyle = indeterminate ? {} : { width: `${percentage}%` };
+---
+
+<div
+  class={classes}
+  role="progressbar"
+  {...ariaAttrs}
+>
+  <div class="progress__track">
+    <div class="progress__bar" style={barStyle} />
+  </div>
+  {showLabel && !indeterminate && (
+    <span class="progress__label" aria-hidden="true">
+      {percentage}%
+    </span>
+  )}
+</div>

package/scaffold/astro-app/src/components/Radio.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  id?: string;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  class?: string;
+  ariaDescribedby?: string;
+  ariaLabel?: string;
+}
+
+const {
+  id,
+  name,
+  value,
+  checked = false,
+  required = false,
+  disabled = false,
+  class: className = '',
+  ariaDescribedby,
+  ariaLabel,
+} = Astro.props;
+---
+
+<input
+  type="radio"
+  id={id}
+  name={name}
+  value={value}
+  checked={checked}
+  required={required}
+  disabled={disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>