rizzo-css 0.0.17 → 0.0.19

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

@@ -1,178 +0,0 @@
----
-import ChevronDown from './icons/ChevronDown.astro';
-
-interface AccordionItem {
-  id: string;
-  title: string;
-  content?: string;
-}
-
-interface Props {
-  items: AccordionItem[];
-  id?: string;
-  allowMultiple?: boolean;
-  defaultExpanded?: string | string[];
-  class?: string;
-}
-
-const {
-  items,
-  id,
-  allowMultiple = false,
-  defaultExpanded,
-  class: className = '',
-} = Astro.props;
-
-const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
-
-const getDefaultExpanded = (): Set<string> => {
-  if (defaultExpanded === undefined) return new Set(items[0] ? [items[0].id] : []);
-  if (typeof defaultExpanded === 'string') return new Set([defaultExpanded]);
-  return new Set(defaultExpanded);
-};
-
-const defaultOpenIds = getDefaultExpanded();
-const classes = `accordion ${className}`.trim();
-let slotIndex = 0;
----
-
-<div class={classes} data-accordion={accordionId} data-allow-multiple={allowMultiple ? 'true' : 'false'}>
-  {items.map((item) => {
-    const triggerId = `${accordionId}-trigger-${item.id}`;
-    const panelId = `${accordionId}-panel-${item.id}`;
-    const isExpanded = defaultOpenIds.has(item.id);
-    const useSlot = !item.content;
-    const currentSlotIndex = useSlot ? slotIndex++ : -1;
-
-    return (
-      <div class="accordion__item" data-accordion-item data-item-id={item.id}>
-        <h3 class="accordion__heading">
-          <button
-            type="button"
-            class={`accordion__trigger ${isExpanded ? 'accordion__trigger--expanded' : ''}`}
-            id={triggerId}
-            aria-expanded={isExpanded}
-            aria-controls={panelId}
-            data-accordion-trigger
-          >
-            <span class="accordion__title">{item.title}</span>
-            <ChevronDown class="accordion__icon" width={16} height={16} aria-hidden="true" />
-          </button>
-        </h3>
-        <div
-          class={`accordion__panel ${isExpanded ? 'accordion__panel--expanded' : ''}`}
-          id={panelId}
-          role="region"
-          aria-labelledby={triggerId}
-          hidden={!isExpanded}
-          data-accordion-panel
-        >
-          <div class="accordion__panel-inner">
-            {item.content ? (
-              <div class="accordion__panel-content" set:html={item.content} />
-            ) : (
-              <div class="accordion__panel-content accordion__panel-slot" data-accordion-slot-index={currentSlotIndex}>
-                <!-- Slot content distributed by script -->
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  })}
-  <!-- Slot content for distribution (same order as items) -->
-  <div class="accordion__slot-content" style="display: none;">
-    <slot />
-  </div>
-</div>
-
-<script is:inline>
-  (function initAccordions() {
-    function initOne(accordion) {
-      if (accordion.dataset.accordionInit === 'true') return;
-      accordion.dataset.accordionInit = 'true';
-
-      const isMultiple = accordion.getAttribute('data-allow-multiple') === 'true';
-      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
-
-      const setExpanded = (trigger, expanded) => {
-        const panelId = trigger.getAttribute('aria-controls');
-        const panel = panelId ? accordion.querySelector('#' + CSS.escape(panelId)) : null;
-        trigger.setAttribute('aria-expanded', String(expanded));
-        trigger.classList.toggle('accordion__trigger--expanded', expanded);
-        if (panel) {
-          panel.classList.toggle('accordion__panel--expanded', expanded);
-          panel.hidden = !expanded;
-        }
-      };
-
-      const toggle = (trigger) => {
-        const expanded = trigger.getAttribute('aria-expanded') === 'true';
-        if (!isMultiple) {
-          triggers.forEach((t) => setExpanded(t, false));
-        }
-        setExpanded(trigger, !expanded);
-      };
-
-      triggers.forEach((trigger) => {
-        trigger.addEventListener('click', () => toggle(trigger));
-      });
-
-      triggers.forEach((trigger, index) => {
-        trigger.addEventListener('keydown', (e) => {
-          let targetIndex = index;
-          switch (e.key) {
-            case 'ArrowDown':
-              e.preventDefault();
-              targetIndex = Math.min(index + 1, triggers.length - 1);
-              break;
-            case 'ArrowUp':
-              e.preventDefault();
-              targetIndex = Math.max(index - 1, 0);
-              break;
-            case 'Home':
-              e.preventDefault();
-              targetIndex = 0;
-              break;
-            case 'End':
-              e.preventDefault();
-              targetIndex = triggers.length - 1;
-              break;
-            case 'Enter':
-            case ' ':
-              e.preventDefault();
-              toggle(trigger);
-              return;
-            default:
-              return;
-          }
-          if (targetIndex !== index) {
-            triggers[targetIndex].focus();
-          }
-        });
-      });
-
-      const slotContent = accordion.querySelector('.accordion__slot-content');
-      if (slotContent) {
-        const slotChildren = Array.from(slotContent.children);
-        slotChildren.forEach((child, index) => {
-          const slotPlaceholder = accordion.querySelector('[data-accordion-slot-index="' + index + '"]');
-          if (slotPlaceholder) {
-            slotPlaceholder.appendChild(child);
-          }
-        });
-        slotContent.remove();
-      }
-    }
-
-    function init() {
-      document.querySelectorAll('[data-accordion]').forEach(initOne);
-    }
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>

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

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

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

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

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

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

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

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

@@ -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="checkbox"
-  id={id}
-  name={name}
-  value={value}
-  checked={checked}
-  required={required}
-  disabled={disabled}
-  class={className}
-  aria-describedby={ariaDescribedby}
-  aria-label={ariaLabel}
-/>

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

@@ -1,90 +0,0 @@
----
-import Tabs from './Tabs.astro';
-import CodeBlock from './CodeBlock.astro';
-
-interface Props {
-  /** CLI command suffix, e.g. "init", "add", "theme" (will be "rizzo-css <command>") */
-  command: string;
-  /** Optional default tab id (npm, pnpm, yarn, bun) */
-  defaultTab?: string;
-  /** Optional class for the wrapper */
-  class?: string;
-}
-
-const { command, defaultTab = 'npm', class: className = '' } = Astro.props;
-
-const fullCommand = `rizzo-css ${command}`;
-const commands = {
-  npm: `npx ${fullCommand}`,
-  pnpm: `pnpm dlx ${fullCommand}`,
-  yarn: `yarn dlx ${fullCommand}`,
-  bun: `bunx ${fullCommand}`,
-};
-
-const tabs = [
-  { id: 'npm', label: 'npm' },
-  { id: 'pnpm', label: 'pnpm' },
-  { id: 'yarn', label: 'yarn' },
-  { id: 'bun', label: 'bun' },
-];
----
-
-<div class={`cli-command-tabs ${className}`.trim()} data-cli-command={command}>
-  <p class="cli-command-tabs__hint">Choose your package manager — click a tab to select, then copy the command.</p>
-  <Tabs tabs={tabs} defaultTab={defaultTab} id={`cli-tabs-${command.replace(/\s+/g, '-')}`} class="cli-command-tabs__tabs">
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.npm} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.pnpm} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.yarn} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.bun} language="bash" />
-    </div>
-  </Tabs>
-</div>
-
-<style>
-  .cli-command-tabs {
-    margin: var(--spacing-2) 0;
-  }
-  .cli-command-tabs__hint {
-    font-size: var(--font-size-sm);
-    color: var(--text-dim);
-    margin-bottom: var(--spacing-1);
-  }
-  .cli-command-tabs__tabs {
-    margin-top: 0;
-  }
-  /* Tabs list: no scroll, all tabs visible (global so it overrides .tabs__list in components.css) */
-  .cli-command-tabs :global(.tabs__list) {
-    overflow-x: visible;
-    overflow-y: visible;
-    flex-wrap: nowrap;
-    scrollbar-width: none;
-    margin-bottom: var(--spacing-2);
-  }
-  .cli-command-tabs :global(.tabs__list)::-webkit-scrollbar {
-    display: none;
-  }
-  /* Remove default panel padding so code block sits tight */
-  .cli-command-tabs :global(.tabs__panel) {
-    padding: 0;
-    min-height: 0;
-  }
-  .cli-command-tabs__panel {
-    padding-top: var(--spacing-1);
-  }
-  .cli-command-tabs__panel :global(.code-block) {
-    margin: 0;
-  }
-  .cli-command-tabs__panel :global(.code-block__header) {
-    padding: var(--spacing-1) var(--spacing-2);
-  }
-  .cli-command-tabs__panel :global(.code-block pre) {
-    padding: var(--spacing-2);
-  }
-</style>