rizzo-css 0.0.12 → 0.0.13

package/scaffold/astro-app/src/components/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-app/src/components/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-app/src/components/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-app/src/components/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-app/src/components/Button.astro

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

package/scaffold/astro-app/src/components/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-app/src/components/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}
+/>