rizzo-css 0.0.1 → 0.0.3

package/scaffold/astro/Alert.astro

@@ -0,0 +1,131 @@
+---
+import Close from './icons/Close.astro';
+
+interface Props {
+  variant?: 'success' | 'error' | 'warning' | 'info';
+  dismissible?: boolean;
+  autoDismiss?: number; // Duration in milliseconds (0 = disabled)
+  class?: string;
+  id?: string;
+}
+
+const {
+  variant = 'info',
+  dismissible = false,
+  autoDismiss = 0, // 0 means disabled
+  class: className = '',
+  id,
+} = Astro.props;
+
+const alertId = id || `alert-${Math.random().toString(36).substr(2, 9)}`;
+const variantClass = `alert--${variant}`;
+const classes = `alert ${variantClass} ${className}`.trim();
+
+// ARIA labels based on variant
+const ariaLabels = {
+  success: 'Success message',
+  error: 'Error message',
+  warning: 'Warning message',
+  info: 'Information message',
+};
+---
+
+<div
+  class={classes}
+  id={alertId}
+  role="alert"
+  aria-live="polite"
+  aria-atomic="true"
+  aria-label={ariaLabels[variant]}
+>
+  <div class="alert__content">
+    <slot />
+  </div>
+  {dismissible && (
+    <button
+      type="button"
+      class="alert__close"
+      aria-label="Dismiss alert"
+      data-alert-close
+      aria-controls={alertId}
+    >
+      <Close width={16} height={16} />
+    </button>
+  )}
+</div>
+
+<script define:vars={{ alertId, autoDismiss }}>
+  (function initAlert() {
+    const init = () => {
+      const alert = document.querySelector(`#${alertId}`);
+      if (!alert) {
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init);
+          return;
+        }
+        return;
+      }
+      
+      // Skip if already initialized
+      if (alert.hasAttribute('data-alert-initialized')) return;
+      alert.setAttribute('data-alert-initialized', 'true');
+      
+      const closeBtn = alert.querySelector('[data-alert-close]');
+      
+      let closeAlert = () => {
+        // Announce dismissal to screen readers
+        const announcement = document.createElement('div');
+        announcement.setAttribute('role', 'status');
+        announcement.setAttribute('aria-live', 'polite');
+        announcement.className = 'sr-only';
+        announcement.textContent = 'Alert dismissed';
+        document.body.appendChild(announcement);
+        
+        // Remove alert with animation
+        alert.style.opacity = '0';
+        alert.style.transform = 'translateY(-10px)';
+        
+        setTimeout(() => {
+          alert.remove();
+          if (document.body.contains(announcement)) {
+            document.body.removeChild(announcement);
+          }
+        }, 200);
+      };
+      
+      // Auto-dismiss functionality
+      if (autoDismiss > 0) {
+        const timeoutId = setTimeout(() => {
+          closeAlert();
+        }, autoDismiss);
+        
+        // Clear timeout if user manually dismisses
+        if (closeBtn) {
+          const originalClose = closeAlert;
+          closeAlert = () => {
+            clearTimeout(timeoutId);
+            originalClose();
+          };
+        }
+      }
+      
+      if (closeBtn) {
+        closeBtn.addEventListener('click', closeAlert);
+        
+        // Keyboard support
+        closeBtn.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            closeAlert();
+          }
+        });
+      }
+    };
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>

package/scaffold/astro/Avatar.astro

@@ -0,0 +1,59 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  /** Image URL (when provided, shows image; otherwise shows initials or placeholder). For remote URLs, add the domain to image.domains in astro.config. */
+  src?: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Full name used to derive initials when no image (e.g. "Jane Doe" → "JD") */
+  name?: string;
+  /** Override initials when no image (e.g. "JD"); ignored if name is provided */
+  initials?: string;
+  /** Size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Shape */
+  shape?: 'circle' | 'square';
+  class?: string;
+}
+
+const {
+  src,
+  alt = '',
+  name = '',
+  initials: initialsProp = '',
+  size = 'md',
+  shape = 'circle',
+  class: className = '',
+} = Astro.props;
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+const displayInitials = name ? getInitials(name) : initialsProp;
+const sizeClass = `avatar--${size}`;
+const shapeClass = `avatar--${shape}`;
+const classes = `avatar ${sizeClass} ${shapeClass} ${className}`.trim();
+
+const sizePixels = size === 'sm' ? 32 : size === 'lg' ? 48 : 40;
+---
+
+<span class={classes} role="img" aria-label={alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar')}>
+  {src ? (
+    <Image
+      src={src}
+      alt={alt || name || ''}
+      width={sizePixels}
+      height={sizePixels}
+      class="avatar__img"
+    />
+  ) : (
+    <span class="avatar__initials" aria-hidden="true">
+      {displayInitials || '?'}
+    </span>
+  )}
+</span>

package/scaffold/astro/Badge.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  pill?: boolean;
+  class?: string;
+}
+
+const {
+  variant = 'primary',
+  size = 'md',
+  pill = false,
+  class: className = '',
+} = Astro.props;
+
+const variantClass = `badge--${variant}`;
+const sizeClass = `badge--${size}`;
+const pillClass = pill ? 'badge--pill' : '';
+const classes = `badge ${variantClass} ${sizeClass} ${pillClass} ${className}`.trim();
+---
+
+<span class={classes}>
+  <slot />
+</span>

package/scaffold/astro/Breadcrumb.astro

@@ -0,0 +1,61 @@
+---
+import ChevronDown from './icons/ChevronDown.astro';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: 'chevron' | 'slash' | 'arrow' | string;
+  class?: string;
+}
+
+const {
+  items,
+  separator = 'chevron',
+  class: className = '',
+} = Astro.props;
+
+const separatorVariant =
+  separator === 'slash' ? 'breadcrumb--slash' :
+  separator === 'arrow' ? 'breadcrumb--arrow' :
+  'breadcrumb--chevron';
+const classes = `breadcrumb ${separatorVariant} ${className}`.trim();
+
+const separatorChar = separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : null;
+const useIcon = separator === 'chevron';
+---
+
+<nav class={classes} aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    {items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      const isCurrent = isLast || !item.href;
+
+      return (
+        <li class={`breadcrumb__item ${isCurrent ? 'breadcrumb__item--current' : ''}`}>
+          {isCurrent ? (
+            <span class="breadcrumb__current" aria-current="page">
+              {item.label}
+            </span>
+          ) : (
+            <a class="breadcrumb__link" href={item.href}>
+              {item.label}
+            </a>
+          )}
+          {!isLast && (
+            <span class="breadcrumb__separator" aria-hidden="true">
+              {useIcon ? (
+                <ChevronDown class="breadcrumb__separator-icon" width={14} height={14} />
+              ) : (
+                separatorChar ?? '›'
+              )}
+            </span>
+          )}
+        </li>
+      );
+    })}
+  </ol>
+</nav>

package/scaffold/astro/Button.astro

@@ -0,0 +1,3 @@
+<button>
+	Click me
+</button>

package/scaffold/astro/Card.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  variant?: 'default' | 'elevated' | 'outlined' | 'filled';
+  class?: string;
+}
+
+const {
+  variant = 'default',
+  class: className = '',
+} = Astro.props;
+
+const variantClass = variant !== 'default' ? `card--${variant}` : '';
+const classes = `card ${variantClass} ${className}`.trim();
+---
+
+<div class={classes}>
+  <slot />
+</div>

package/scaffold/astro/Checkbox.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="checkbox"
+  id={id}
+  name={name}
+  value={value}
+  checked={checked}
+  required={required}
+  disabled={disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>

package/scaffold/astro/CopyToClipboard.astro

@@ -0,0 +1,199 @@
+---
+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)}`;
+---
+
+<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>
+
+<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 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!';
+            }
+            
+            // 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 = '';
+              }
+            }, 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!';
+              }
+              
+              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 = '';
+                }
+              }, 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/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>