rizzo-css 0.0.12 → 0.0.13

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

@@ -0,0 +1,393 @@
+---
+import Copy from './icons/Copy.astro';
+import Check from './icons/Check.astro';
+import Css3 from './icons/devicons/Css3.astro';
+import Html5 from './icons/devicons/Html5.astro';
+import Javascript from './icons/devicons/Javascript.astro';
+import Nodejs from './icons/devicons/Nodejs.astro';
+import AstroIcon from './icons/devicons/Astro.astro';
+import Plaintext from './icons/devicons/Plaintext.astro';
+import Git from './icons/devicons/Git.astro';
+import Bash from './icons/devicons/Bash.astro';
+import Svelte from './icons/devicons/Svelte.astro';
+import React from './icons/devicons/React.astro';
+import Vue from './icons/devicons/Vue.astro';
+
+interface Props {
+  code: string;
+  language?: string;
+  class?: string;
+}
+
+const {
+  code,
+  language = '',
+  class: className = '',
+} = Astro.props;
+
+const languageLabel = language || '';
+const languageLower = language.toLowerCase();
+
+const codeId = `code-${Math.random().toString(36).substr(2, 9)}`;
+const copyButtonId = `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div class={`code-block ${className}`.trim()}>
+  <div class="code-block__header">
+    {language && (
+      <span class="code-block__language" aria-label={languageLabel}>
+        {languageLower === 'css' && (
+          <>
+            <Css3 width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'html' && (
+          <>
+            <Html5 width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'javascript' && (
+          <>
+            <Javascript width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'nodejs' && (
+          <>
+            <Nodejs width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'astro' && (
+          <>
+            <AstroIcon width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'plaintext' && (
+          <>
+            <Plaintext width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'git' && (
+          <>
+            <Git width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'svelte' && (
+          <>
+            <Svelte width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {(languageLower === 'react' || languageLower === 'jsx' || languageLower === 'tsx') && (
+          <>
+            <React width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {languageLower === 'vue' && (
+          <>
+            <Vue width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {(languageLower === 'bash' || languageLower === 'shell' || languageLower === 'sh') && (
+          <>
+            <Bash width={20} height={20} class="code-block__language-icon" />
+            <span class="code-block__language-text">{languageLabel}</span>
+          </>
+        )}
+        {!['css', 'html', 'javascript', 'nodejs', 'astro', 'plaintext', 'git', 'svelte', 'react', 'jsx', 'tsx', 'vue', 'bash', 'shell', 'sh'].includes(languageLower) && (
+          <span class="code-block__language-text">{language}</span>
+        )}
+        <span class="sr-only">{languageLabel}</span>
+      </span>
+    )}
+    <span class="tooltip-host" data-tooltip="Copy code to clipboard">
+      <button
+        type="button"
+        class="code-block__copy-btn"
+        aria-label="Copy code to clipboard"
+        data-code-id={codeId}
+        id={copyButtonId}
+      >
+        <span class="code-block__copy-icon code-block__copy-icon--copy" aria-hidden="true">
+          <Copy width={20} height={20} />
+        </span>
+        <span class="code-block__copy-icon code-block__copy-icon--check" aria-hidden="true">
+          <Check width={20} height={20} />
+        </span>
+        <span class="sr-only">Copy code</span>
+      </button>
+    </span>
+  </div>
+  <pre><code id={codeId}>{code}</code></pre>
+</div>
+
+<script is:inline>
+  (function initCodeBlockCopy() {
+    const init = () => {
+      const copyButtons = document.querySelectorAll('.code-block__copy-btn');
+      
+      copyButtons.forEach((button) => {
+        if (button.hasAttribute('data-copy-initialized')) return;
+        button.setAttribute('data-copy-initialized', 'true');
+        
+        const codeId = button.getAttribute('data-code-id');
+        if (!codeId) return;
+        
+        const codeElement = document.getElementById(codeId);
+        if (!codeElement) return;
+        
+        const copyIcon = button.querySelector('.code-block__copy-icon--copy');
+        const checkIcon = button.querySelector('.code-block__copy-icon--check');
+        
+        // Remove title elements from SVG icons to prevent tooltip conflicts
+        const copyIconSvg = copyIcon?.querySelector('svg');
+        const checkIconSvg = checkIcon?.querySelector('svg');
+        if (copyIconSvg) {
+          const copyTitle = copyIconSvg.querySelector('title');
+          if (copyTitle) copyTitle.remove();
+        }
+        if (checkIconSvg) {
+          const checkTitle = checkIconSvg.querySelector('title');
+          if (checkTitle) checkTitle.remove();
+        }
+        
+        const copyToClipboard = async () => {
+          const codeText = codeElement.textContent || '';
+          
+          if (!codeText) return;
+          
+          try {
+            await navigator.clipboard.writeText(codeText);
+            
+            // Show success state
+            if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
+            if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
+            button.setAttribute('aria-label', 'Code copied!');
+            const tooltipHost = button.closest('.tooltip-host');
+            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Code copied!');
+            
+            // Reset after 2 seconds
+            setTimeout(() => {
+              if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
+              if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
+              button.setAttribute('aria-label', 'Copy code to clipboard');
+              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Copy code to clipboard');
+            }, 2000);
+          } catch (err) {
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = codeText;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            
+            try {
+              document.execCommand('copy');
+              if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
+              if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
+              button.setAttribute('aria-label', 'Code copied!');
+              const tooltipHostFallback = button.closest('.tooltip-host');
+              if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Code copied!');
+              
+              setTimeout(() => {
+                if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
+                if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
+                button.setAttribute('aria-label', 'Copy code to clipboard');
+                if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Copy code to clipboard');
+              }, 2000);
+            } catch (fallbackErr) {
+              console.error('Failed to copy:', fallbackErr);
+            }
+            
+            document.body.removeChild(textArea);
+          }
+        };
+        
+        button.addEventListener('click', copyToClipboard);
+        
+        // Keyboard support
+        button.addEventListener('keydown', (e) => {
+          if (e && 'key' in e) {
+            const keyEvent = e;
+            if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+              keyEvent.preventDefault();
+              copyToClipboard();
+            }
+          }
+        });
+      });
+    };
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>
+
+<style>
+  .code-block {
+    position: relative;
+    margin: var(--spacing-4) 0;
+    border-radius: var(--radius-lg);
+    overflow: visible;
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+  }
+  
+  .code-block__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-3);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .code-block__language {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    font-size: var(--font-size-xs);
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wider);
+    font-weight: var(--font-weight-medium);
+  }
+  
+  .code-block__language-icon {
+    display: block;
+    flex-shrink: 0;
+    color: var(--text-dim);
+    width: var(--spacing-5); /* 20px - larger for better visibility */
+    height: var(--spacing-5);
+  }
+  
+  .code-block__language-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .code-block__language-text {
+    display: none;
+  }
+  
+  /* Show text next to icon on large screens */
+  @media (width >= 768px) {
+    .code-block__language-text {
+      display: inline;
+    }
+  }
+  
+  .code-block__copy-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-2);
+    min-width: var(--spacing-8);
+    height: var(--spacing-8);
+    margin-left: auto;
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    cursor: pointer;
+    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+    position: relative;
+  }
+  
+  .code-block__copy-btn:hover {
+    background-color: var(--background);
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  
+  .code-block__copy-btn:focus-visible {
+    outline: var(--outline-width) solid var(--accent);
+    outline-offset: var(--outline-offset);
+  }
+  
+  .code-block__copy-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-5); /* 20px - larger for better visibility */
+    height: var(--spacing-5);
+    transition: opacity var(--transition-base), transform var(--transition-base);
+  }
+  
+  .code-block__copy-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .code-block__copy-icon--copy {
+    opacity: 1;
+    transform: scale(1);
+  }
+  
+  .code-block__copy-icon--check {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  
+  .code-block__copy-icon--check:not(.code-block__copy-icon--hidden) {
+    opacity: 1;
+    transform: scale(1);
+  }
+  
+  .code-block__copy-icon--copy.code-block__copy-icon--hidden {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  
+  .code-block pre {
+    margin: 0;
+    padding: var(--spacing-4);
+    overflow-x: auto;
+    background-color: var(--background-alt);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+  
+  .code-block code {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+    color: var(--text);
+    white-space: pre;
+    word-wrap: normal;
+  }
+  
+  @media (width <= 640px) {
+    .code-block__header {
+      flex-direction: row; /* Keep horizontal layout on mobile */
+      align-items: center; /* Vertically center all items */
+      gap: var(--spacing-2);
+    }
+    
+    .code-block__language {
+      align-items: center; /* Ensure language icon is vertically centered */
+    }
+    
+    .code-block__copy-btn {
+      margin-left: auto; /* Push copy button to the right */
+      flex-shrink: 0; /* Prevent copy button from shrinking */
+    }
+  }
+</style>

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

@@ -0,0 +1,219 @@
+---
+import Copy from './icons/Copy.astro';
+import Check from './icons/Check.astro';
+
+interface Props {
+  value: string;
+  label?: string;
+  format?: string;
+  class?: string;
+  id?: string;
+}
+
+const {
+  value,
+  label,
+  format,
+  class: className = '',
+  id,
+} = Astro.props;
+
+const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
+const defaultTooltip = label || 'Copy to clipboard';
+---
+
+<span class="tooltip-host" data-tooltip={defaultTooltip}>
+  <button
+    type="button"
+    class={`copy-to-clipboard ${className}`.trim()}
+    data-copy-value={value}
+    data-copy-format={format}
+    aria-label={label || `Copy ${value} to clipboard`}
+    id={buttonId}
+  >
+    <span class="copy-to-clipboard__text">{value}</span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
+      <Copy width={16} height={16} />
+    </span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" aria-hidden="true">
+      <Check width={16} height={16} />
+    </span>
+    <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
+  </button>
+</span>
+
+<script>
+  (function initCopyToClipboard() {
+    // Wait for DOM to be ready
+    const init = () => {
+      const buttons = document.querySelectorAll('.copy-to-clipboard');
+      
+      buttons.forEach((button) => {
+        // Skip if already initialized
+        if (button.hasAttribute('data-copy-initialized')) return;
+        button.setAttribute('data-copy-initialized', 'true');
+        
+        const tooltipHost = button.closest('.tooltip-host');
+        const defaultTooltip = tooltipHost ? (tooltipHost.getAttribute('data-tooltip') || 'Copy to clipboard') : 'Copy to clipboard';
+        const defaultAriaLabel = button.getAttribute('aria-label') || 'Copy to clipboard';
+        if (tooltipHost) tooltipHost.setAttribute('data-tooltip', defaultTooltip);
+        button.setAttribute('data-copy-aria-label', defaultAriaLabel);
+        if (tooltipHost) tooltipHost.setAttribute('data-copy-default-tooltip', defaultTooltip);
+        
+        const getValue = () => button.getAttribute('data-copy-value') || '';
+        const getFormat = () => button.getAttribute('data-copy-format') || '';
+        const feedback = button.querySelector('.copy-to-clipboard__feedback');
+        const copyIcon = button.querySelector('.copy-to-clipboard__icon--copy');
+        const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
+        const textSpan = button.querySelector('.copy-to-clipboard__text');
+        
+        // Update text span with current value
+        const updateDisplay = () => {
+          const value = getValue();
+          if (textSpan) {
+            textSpan.textContent = value || '';
+          }
+        };
+        
+        // Initial display update
+        updateDisplay();
+        
+        // Watch for attribute changes (for dynamic updates)
+        const observer = new MutationObserver((mutations) => {
+          let shouldUpdate = false;
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes') {
+              if (mutation.attributeName === 'data-copy-value' || mutation.attributeName === 'data-copy-format') {
+                shouldUpdate = true;
+              }
+            }
+          });
+          if (shouldUpdate) {
+            // Use requestAnimationFrame to ensure DOM is ready
+            requestAnimationFrame(() => {
+              updateDisplay();
+            });
+          }
+        });
+        observer.observe(button, {
+          attributes: true,
+          attributeFilter: ['data-copy-value', 'data-copy-format'],
+          attributeOldValue: false
+        });
+        
+        // Listen for custom value-updated event
+        button.addEventListener('value-updated', (event) => {
+          if (event && event.detail && event.detail.value) {
+            updateDisplay();
+          }
+        });
+        
+        // Fallback: Periodically check for value changes (in case MutationObserver misses something)
+        let lastValue = getValue();
+        const intervalId = setInterval(() => {
+          const currentValue = getValue();
+          if (currentValue !== lastValue) {
+            lastValue = currentValue;
+            updateDisplay();
+          }
+        }, 300);
+        
+        // Store interval ID for potential cleanup (though we don't need to clean it up in this case)
+        button.setAttribute('data-copy-interval-id', intervalId.toString());
+        
+        const copyToClipboard = async () => {
+          // Always read fresh value on click (in case it was updated dynamically)
+          let value = getValue();
+          const format = getFormat();
+          
+          // If value is still empty, try reading from text span as fallback
+          if (!value && textSpan) {
+            value = textSpan.textContent || '';
+          }
+          
+          if (!value) {
+            return;
+          }
+          
+          try {
+            await navigator.clipboard.writeText(value);
+            
+            // Show success state
+            if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
+            if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
+            if (feedback) {
+              feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
+            }
+            const tooltipHost = button.closest('.tooltip-host');
+            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
+            button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
+            
+            // Reset after 2 seconds
+            setTimeout(() => {
+              if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
+              if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
+              if (feedback) {
+                feedback.textContent = '';
+              }
+              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', tooltipHost.getAttribute('data-copy-default-tooltip') || defaultTooltip);
+              button.setAttribute('aria-label', defaultAriaLabel);
+            }, 2000);
+          } catch (err) {
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = value;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            
+            try {
+              document.execCommand('copy');
+              if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
+              if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
+              if (feedback) {
+                feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
+              }
+              const tooltipHostFb = button.closest('.tooltip-host');
+              if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
+              button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
+              
+              setTimeout(() => {
+                if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
+                if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
+                if (feedback) {
+                  feedback.textContent = '';
+                }
+                if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', tooltipHostFb.getAttribute('data-copy-default-tooltip') || defaultTooltip);
+                button.setAttribute('aria-label', defaultAriaLabel);
+              }, 2000);
+            } catch (fallbackErr) {
+              if (feedback) {
+                feedback.textContent = 'Failed to copy';
+              }
+            }
+            
+            document.body.removeChild(textArea);
+          }
+        };
+        
+        button.addEventListener('click', copyToClipboard);
+        
+        // Keyboard support
+        button.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            copyToClipboard();
+          }
+        });
+      });
+    };
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>

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

@@ -0,0 +1,37 @@
+---
+interface Props {
+  /** Orientation of the divider line */
+  orientation?: 'horizontal' | 'vertical';
+  /** Optional label (e.g. "OR") shown in the middle; only used for horizontal */
+  label?: string;
+  class?: string;
+}
+
+const {
+  orientation = 'horizontal',
+  label,
+  class: className = '',
+} = Astro.props;
+
+const orientationClass = `divider--${orientation}`;
+const hasLabel = Boolean(label && label.trim());
+const labelClass = hasLabel ? 'divider--labeled' : '';
+const classes = `divider ${orientationClass} ${labelClass} ${className}`.trim();
+---
+
+<div
+  class={classes}
+  role="separator"
+  aria-orientation={orientation}
+  aria-label={label?.trim() || undefined}
+>
+  {hasLabel && orientation === 'horizontal' ? (
+    <>
+      <span class="divider__line" aria-hidden="true" />
+      <span class="divider__label">{label!.trim()}</span>
+      <span class="divider__line" aria-hidden="true" />
+    </>
+  ) : (
+    <span class="divider__line" aria-hidden="true" />
+  )}
+</div>