rizzo-css 0.0.17 → 0.0.19

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

@@ -1,87 +0,0 @@
----
-import Tabs from './Tabs.astro';
-import CodeBlock from './CodeBlock.astro';
-
-interface Props {
-  /** Package name to install, e.g. "rizzo-css" */
-  packageName?: string;
-  /** Optional default tab id (npm, pnpm, yarn, bun) */
-  defaultTab?: string;
-  /** Optional class for the wrapper */
-  class?: string;
-}
-
-const { packageName = 'rizzo-css', defaultTab = 'npm', class: className = '' } = Astro.props;
-
-const commands = {
-  npm: `npm install ${packageName}`,
-  pnpm: `pnpm add ${packageName}`,
-  yarn: `yarn add ${packageName}`,
-  bun: `bun add ${packageName}`,
-};
-
-const tabs = [
-  { id: 'npm', label: 'npm' },
-  { id: 'pnpm', label: 'pnpm' },
-  { id: 'yarn', label: 'yarn' },
-  { id: 'bun', label: 'bun' },
-];
----
-
-<div class={`package-install-tabs ${className}`.trim()} data-package={packageName}>
-  <p class="package-install-tabs__hint">Choose your package manager — click a tab to select, then copy the command.</p>
-  <Tabs tabs={tabs} defaultTab={defaultTab} id={`pkg-tabs-${packageName.replace(/\s+/g, '-')}`} class="package-install-tabs__tabs">
-    <div class="package-install-tabs__panel">
-      <CodeBlock code={commands.npm} language="bash" />
-    </div>
-    <div class="package-install-tabs__panel">
-      <CodeBlock code={commands.pnpm} language="bash" />
-    </div>
-    <div class="package-install-tabs__panel">
-      <CodeBlock code={commands.yarn} language="bash" />
-    </div>
-    <div class="package-install-tabs__panel">
-      <CodeBlock code={commands.bun} language="bash" />
-    </div>
-  </Tabs>
-</div>
-
-<style>
-  .package-install-tabs {
-    margin: var(--spacing-2) 0;
-  }
-  .package-install-tabs__hint {
-    font-size: var(--font-size-sm);
-    color: var(--text-dim);
-    margin-bottom: var(--spacing-1);
-  }
-  .package-install-tabs__tabs {
-    margin-top: 0;
-  }
-  .package-install-tabs :global(.tabs__list) {
-    overflow-x: visible;
-    overflow-y: visible;
-    flex-wrap: nowrap;
-    scrollbar-width: none;
-    margin-bottom: var(--spacing-2);
-  }
-  .package-install-tabs :global(.tabs__list)::-webkit-scrollbar {
-    display: none;
-  }
-  .package-install-tabs :global(.tabs__panel) {
-    padding: 0;
-    min-height: 0;
-  }
-  .package-install-tabs__panel {
-    padding-top: var(--spacing-1);
-  }
-  .package-install-tabs__panel :global(.code-block) {
-    margin: 0;
-  }
-  .package-install-tabs__panel :global(.code-block__header) {
-    padding: var(--spacing-1) var(--spacing-2);
-  }
-  .package-install-tabs__panel :global(.code-block pre) {
-    padding: var(--spacing-2);
-  }
-</style>

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

@@ -1,240 +0,0 @@
----
-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

@@ -1,65 +0,0 @@
----
-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

@@ -1,38 +0,0 @@
----
-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}
-/>