rizzo-css 0.0.16 → 0.0.18

package/scaffold/svelte-app/src/lib/rizzo/Dropdown.svelte

@@ -1,254 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import ChevronDown from './icons/ChevronDown.svelte';
-
-  export interface MenuItem {
-    label: string;
-    value?: string;
-    href?: string;
-    onClick?: (value: string) => void;
-    disabled?: boolean;
-    separator?: boolean;
-    submenu?: MenuItem[];
-  }
-
-  interface Props {
-    trigger: string;
-    items: MenuItem[];
-    id?: string;
-    class?: string;
-    position?: 'left' | 'right';
-    align?: 'start' | 'end';
-  }
-
-  let {
-    trigger,
-    items,
-    id,
-    class: className = '',
-    position = 'left',
-    align = 'start',
-  }: Props = $props();
-
-  const fallbackId = `dropdown-${Math.random().toString(36).slice(2, 11)}`;
-  const dropdownId = $derived(id ?? fallbackId);
-  const menuId = $derived(`${dropdownId}-menu`);
-  const triggerId = $derived(`${dropdownId}-trigger`);
-
-  let open = $state(false);
-  let openSubmenuIndex = $state<number | null>(null);
-  let menuEl: HTMLDivElement;
-  let triggerEl: HTMLButtonElement;
-
-  const classes = $derived(['dropdown', className].filter(Boolean).join(' ').trim());
-  const menuClasses = $derived(`dropdown__menu dropdown__menu--${position} dropdown__menu--${align}`);
-
-  function closeMenu() {
-    open = false;
-    openSubmenuIndex = null;
-  }
-
-  function toggleMenu() {
-    open = !open;
-    if (!open) openSubmenuIndex = null;
-  }
-
-  function toggleSubmenu(index: number) {
-    openSubmenuIndex = openSubmenuIndex === index ? null : index;
-  }
-
-  function handleItemClick(item: MenuItem, e: MouseEvent) {
-    if (item.separator || item.disabled) return;
-    if (item.submenu?.length) {
-      e.preventDefault();
-      return;
-    }
-    if (item.href) {
-      window.location.href = item.href;
-    }
-    if (item.onClick) {
-      item.onClick(item.value ?? item.label);
-    }
-    closeMenu();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (!open) return;
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeMenu();
-      triggerEl?.focus();
-    }
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (menuEl && triggerEl && !menuEl.contains(e.target as Node) && !triggerEl.contains(e.target as Node)) {
-      closeMenu();
-    }
-  }
-
-  onMount(() => {
-    document.addEventListener('keydown', handleKeydown);
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('keydown', handleKeydown);
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-</script>
-
-<div class={classes} data-dropdown={dropdownId}>
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="dropdown__trigger"
-    id={triggerId}
-    aria-expanded={open}
-    aria-haspopup="true"
-    aria-controls={menuId}
-    aria-label={trigger}
-    onclick={toggleMenu}
-    onkeydown={(e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        toggleMenu();
-      }
-      if (e.key === 'ArrowDown' && !open) {
-        e.preventDefault();
-        open = true;
-      }
-    }}
-  >
-    <span class="dropdown__trigger-text">{trigger}</span>
-    <ChevronDown class="dropdown__icon" width={16} height={16} />
-  </button>
-
-  <div
-    bind:this={menuEl}
-    class="{menuClasses} {open ? 'dropdown__menu--open' : ''}"
-    id={menuId}
-    role="menu"
-    aria-labelledby={triggerId}
-    aria-label="{trigger} menu"
-    aria-orientation="vertical"
-    aria-hidden={!open}
-    tabindex="-1"
-  >
-    {#each items as item, index}
-      {#if item.separator}
-        <div class="dropdown__separator" role="separator"></div>
-      {:else}
-        {@const hasSubmenu = item.submenu && item.submenu.length > 0}
-        {@const isSubmenuOpen = openSubmenuIndex === index}
-        <div class="dropdown__item-wrapper" class:dropdown__item-wrapper--has-submenu={hasSubmenu}>
-          {#if item.href && !hasSubmenu}
-            <a
-              class="dropdown__item"
-              class:dropdown__item--disabled={item.disabled}
-              role="menuitem"
-              href={item.href}
-              aria-label={item.label}
-              aria-disabled={item.disabled ? 'true' : undefined}
-              tabindex={open ? 0 : -1}
-              onclick={(e) => {
-                if (item.disabled) e.preventDefault();
-                else closeMenu();
-              }}
-            >
-              <span>{item.label}</span>
-            </a>
-          {:else}
-            <div
-              class="dropdown__item"
-              class:dropdown__item--disabled={item.disabled}
-              class:dropdown__item--has-submenu={hasSubmenu}
-              role="menuitem"
-              aria-disabled={item.disabled ? 'true' : undefined}
-              aria-expanded={hasSubmenu ? isSubmenuOpen : undefined}
-              aria-haspopup={hasSubmenu ? 'true' : undefined}
-              tabindex={open ? 0 : -1}
-              onclick={(e) => {
-                if (item.disabled) return;
-                if (hasSubmenu) {
-                  e.preventDefault();
-                  toggleSubmenu(index);
-                } else {
-                  handleItemClick(item, e);
-                }
-              }}
-              onkeydown={(e) => {
-                if (item.disabled) return;
-                if (hasSubmenu && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight')) {
-                  e.preventDefault();
-                  toggleSubmenu(index);
-                } else if (!hasSubmenu && (e.key === 'Enter' || e.key === ' ')) {
-                  e.preventDefault();
-                  handleItemClick(item, e as unknown as MouseEvent);
-                }
-              }}
-            >
-              <span>{item.label}</span>
-              {#if hasSubmenu}
-                <ChevronDown class="dropdown__item-arrow" width={12} height={12} />
-              {/if}
-            </div>
-          {/if}
-          {#if hasSubmenu && item.submenu}
-            <div
-              class="dropdown__submenu"
-              class:dropdown__submenu--open={isSubmenuOpen}
-              role="menu"
-              aria-label="{item.label} submenu"
-              aria-hidden={!isSubmenuOpen}
-            >
-              {#each item.submenu as subItem}
-                {#if subItem.separator}
-                  <div class="dropdown__separator" role="separator"></div>
-                {:else if subItem.href}
-                  <a
-                    class="dropdown__item dropdown__submenu-item"
-                    class:dropdown__item--disabled={subItem.disabled}
-                    role="menuitem"
-                    href={subItem.href}
-                    aria-label={subItem.label}
-                    aria-disabled={subItem.disabled ? 'true' : undefined}
-                    onclick={(e) => {
-                      if (subItem.disabled) e.preventDefault();
-                      else closeMenu();
-                    }}
-                  >
-                    <span>{subItem.label}</span>
-                  </a>
-                {:else}
-                  <div
-                    class="dropdown__item dropdown__submenu-item"
-                    class:dropdown__item--disabled={subItem.disabled}
-                    role="menuitem"
-                    aria-disabled={subItem.disabled ? 'true' : undefined}
-                    tabindex={open ? 0 : -1}
-                    onclick={(e) => {
-                      if (!subItem.disabled) {
-                        subItem.onClick?.(subItem.value ?? subItem.label);
-                        closeMenu();
-                      }
-                    }}
-                    onkeydown={(e) => {
-                      if (subItem.disabled) return;
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        subItem.onClick?.(subItem.value ?? subItem.label);
-                        closeMenu();
-                      }
-                    }}
-                  >
-                    <span>{subItem.label}</span>
-                  </div>
-                {/if}
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/if}
-    {/each}
-  </div>
-</div>

package/scaffold/svelte-app/src/lib/rizzo/FormGroup.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    label?: string;
-    labelFor?: string;
-    required?: boolean;
-    help?: string;
-    error?: string;
-    success?: string;
-    class?: string;
-    children?: Snippet;
-  }
-  let {
-    label,
-    labelFor,
-    required = false,
-    help,
-    error,
-    success,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const errorId = $derived(labelFor && error ? `${labelFor}-error` : undefined);
-  const helpId = $derived(labelFor && help ? `${labelFor}-help` : undefined);
-</script>
-
-<div class="form-group {className}">
-  {#if label}
-    {#if labelFor}
-      <label for={labelFor} class="form-group__label {required ? 'required' : ''}">
-        {label}
-      </label>
-    {:else}
-      <span class="form-group__label {required ? 'required' : ''}">
-        {label}
-      </span>
-    {/if}
-  {/if}
-  {@render children?.()}
-  {#if help}
-    <span id={helpId} class="form-group__help">{help}</span>
-  {/if}
-  {#if error}
-    <span id={errorId} class="form-error" role="alert">{error}</span>
-  {/if}
-  {#if success}
-    <span class="form-success" role="status">{success}</span>
-  {/if}
-</div>

package/scaffold/svelte-app/src/lib/rizzo/Input.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  interface Props {
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
-    id?: string;
-    name?: string;
-    value?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    autocomplete?: string;
-    size?: 'sm' | 'md' | 'lg';
-    error?: boolean;
-    success?: boolean;
-    class?: string;
-    ariaDescribedby?: string;
-    ariaInvalid?: boolean | 'true' | 'false';
-  }
-  let {
-    type = 'text',
-    id,
-    name,
-    value = $bindable(''),
-    placeholder,
-    required = false,
-    disabled = false,
-    readonly = false,
-    autocomplete,
-    size = 'md',
-    error = false,
-    success = false,
-    class: className = '',
-    ariaDescribedby,
-    ariaInvalid,
-  }: Props = $props();
-
-  const sizeClass = $derived(size !== 'md' ? `form-input--${size}` : '');
-  const errorClass = $derived(error ? 'form-input--error' : '');
-  const successClass = $derived(success ? 'form-input--success' : '');
-  const classes = $derived(
-    ['form-input', sizeClass, errorClass, successClass, className].filter(Boolean).join(' ').trim()
-  );
-  const invalid = $derived(error || ariaInvalid === true || ariaInvalid === 'true');
-</script>
-
-<input
-  {type}
-  {id}
-  {name}
-  bind:value
-  {placeholder}
-  {required}
-  {disabled}
-  {readonly}
-  autocomplete={autocomplete}
-  class={classes}
-  aria-invalid={invalid ? 'true' : 'false'}
-  aria-describedby={ariaDescribedby}
-/>

package/scaffold/svelte-app/src/lib/rizzo/Modal.svelte

@@ -1,157 +0,0 @@
-<script lang="ts">
-  import { tick } from 'svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    id?: string;
-    title?: string;
-    size?: 'sm' | 'md' | 'lg';
-    open?: boolean;
-    closeOnOverlayClick?: boolean;
-    closeOnEscape?: boolean;
-    class?: string;
-    children?: Snippet;
-    footer?: Snippet;
-  }
-
-  let {
-    id,
-    title = 'Modal',
-    size = 'md',
-    open = $bindable(false),
-    closeOnOverlayClick = true,
-    closeOnEscape = true,
-    class: className = '',
-    children,
-    footer,
-  }: Props = $props();
-
-  const modalId = $derived(id ?? `modal-${Math.random().toString(36).slice(2, 11)}`);
-  const sizeClass = $derived(size !== 'md' ? `modal--${size}` : '');
-  const classes = $derived(['modal', sizeClass, className].filter(Boolean).join(' ').trim());
-
-  let overlayEl: HTMLDivElement;
-  let modalEl: HTMLDivElement;
-  let previousActiveElement: HTMLElement | null = null;
-  let keyHandler: ((e: KeyboardEvent) => void) | null = null;
-
-  const focusableSelectors = [
-    'button:not([disabled])',
-    'a[href]',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-  ].join(', ');
-
-  function getFocusableElements(container: HTMLElement): HTMLElement[] {
-    return Array.from(container.querySelectorAll<HTMLElement>(focusableSelectors));
-  }
-
-  function close() {
-    open = false;
-    if (keyHandler) {
-      document.removeEventListener('keydown', keyHandler);
-      keyHandler = null;
-    }
-    if (previousActiveElement) {
-      previousActiveElement.focus();
-      previousActiveElement = null;
-    }
-  }
-
-  function setupFocusTrap() {
-    if (!modalEl) return;
-    keyHandler = (e: KeyboardEvent) => {
-      if (!open) return;
-      if (e.key === 'Escape' && closeOnEscape) {
-        e.preventDefault();
-        close();
-        return;
-      }
-      if (e.key === 'Tab') {
-        const focusable = getFocusableElements(modalEl);
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        const active = document.activeElement as HTMLElement | null;
-        if (e.shiftKey) {
-          if (active === first || !modalEl.contains(active)) {
-            e.preventDefault();
-            last.focus();
-          }
-        } else {
-          if (active === last || !modalEl.contains(active)) {
-            e.preventDefault();
-            first.focus();
-          }
-        }
-      }
-    };
-    document.addEventListener('keydown', keyHandler);
-  }
-
-  function openModal() {
-    previousActiveElement = document.activeElement as HTMLElement | null;
-    const focusable = modalEl ? getFocusableElements(modalEl) : [];
-    const closeBtn = modalEl?.querySelector<HTMLElement>('[data-modal-close]');
-    const first = focusable[0] ?? closeBtn;
-    tick().then(() => {
-      first?.focus();
-      setupFocusTrap();
-    });
-  }
-
-  $effect(() => {
-    if (open && modalEl) {
-      openModal();
-    } else {
-      if (keyHandler) {
-        document.removeEventListener('keydown', keyHandler);
-        keyHandler = null;
-      }
-    }
-  });
-
-  function handleOverlayClick(e: MouseEvent) {
-    if (closeOnOverlayClick && e.target === overlayEl) close();
-  }
-</script>
-
-<div
-  bind:this={overlayEl}
-  class="modal__overlay"
-  data-modal-overlay
-  aria-hidden={!open}
-  id="{modalId}-overlay"
-  onclick={handleOverlayClick}
-  role="presentation"
-></div>
-
-<div
-  bind:this={modalEl}
-  class={classes}
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="{modalId}-title"
-  aria-hidden={!open}
-  id={modalId}
-  data-modal
-  data-open={open || undefined}
->
-  <div class="modal__header">
-    <h2 id="{modalId}-title" class="modal__title">{title}</h2>
-    <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M18 6L6 18" />
-        <path d="M6 6l12 12" />
-      </svg>
-    </button>
-  </div>
-  <div class="modal__body">
-    {@render children?.()}
-  </div>
-  <div class="modal__footer">
-    {@render footer?.()}
-  </div>
-</div>

package/scaffold/svelte-app/src/lib/rizzo/Pagination.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-  function buildHref(template: string, page: number): string {
-    return template.replace(/\{page\}/g, String(page));
-  }
-
-  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;
-  }
-
-  interface Props {
-    currentPage: number;
-    totalPages: number;
-    hrefTemplate?: string;
-    showFirstLast?: boolean;
-    maxVisible?: number;
-    class?: string;
-  }
-  let {
-    currentPage,
-    totalPages,
-    hrefTemplate = '?page={page}',
-    showFirstLast = true,
-    maxVisible = 5,
-    class: className = '',
-  }: Props = $props();
-
-  const classes = $derived(['pagination', className].filter(Boolean).join(' ').trim());
-  const pageItems = $derived(getPageItems(totalPages, currentPage, maxVisible));
-  const hasPrev = $derived(currentPage > 1);
-  const hasNext = $derived(currentPage < totalPages);
-</script>
-
-<nav class={classes} aria-label="Pagination">
-  <ul class="pagination__list">
-    {#if showFirstLast && totalPages > 1}
-      <li class="pagination__item">
-        {#if hasPrev}
-          <a class="pagination__link pagination__link--prev" href={buildHref(hrefTemplate, 1)} aria-label="First page">First</a>
-        {:else}
-          <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true">First</span>
-        {/if}
-      </li>
-    {/if}
-    <li class="pagination__item">
-      {#if hasPrev}
-        <a class="pagination__link pagination__link--prev" href={buildHref(hrefTemplate, currentPage - 1)} aria-label="Previous page">Previous</a>
-      {:else}
-        <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true">Previous</span>
-      {/if}
-    </li>
-    {#each pageItems as item}
-      <li class="pagination__item">
-        {#if item === 'ellipsis'}
-          <span class="pagination__ellipsis" aria-hidden="true">…</span>
-        {:else if item === currentPage}
-          <span class="pagination__link pagination__link--current" aria-current="page">{item}</span>
-        {:else}
-          <a class="pagination__link" href={buildHref(hrefTemplate, item)} aria-label="Page {item}">{item}</a>
-        {/if}
-      </li>
-    {/each}
-    <li class="pagination__item">
-      {#if hasNext}
-        <a class="pagination__link pagination__link--next" href={buildHref(hrefTemplate, currentPage + 1)} aria-label="Next page">Next</a>
-      {:else}
-        <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true">Next</span>
-      {/if}
-    </li>
-    {#if showFirstLast && totalPages > 1}
-      <li class="pagination__item">
-        {#if hasNext}
-          <a class="pagination__link pagination__link--next" href={buildHref(hrefTemplate, totalPages)} aria-label="Last page">Last</a>
-        {:else}
-          <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true">Last</span>
-        {/if}
-      </li>
-    {/if}
-  </ul>
-</nav>

package/scaffold/svelte-app/src/lib/rizzo/ProgressBar.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  interface Props {
-    value?: number;
-    max?: number;
-    variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'sm' | 'md' | 'lg';
-    showLabel?: boolean;
-    indeterminate?: boolean;
-    label?: string;
-    class?: string;
-  }
-  let {
-    value = 0,
-    max = 100,
-    variant = 'primary',
-    size = 'md',
-    showLabel = false,
-    indeterminate = false,
-    label,
-    class: className = '',
-  }: Props = $props();
-
-  const safeMax = $derived(max <= 0 ? 100 : max);
-  const clampedValue = $derived(indeterminate ? 0 : Math.max(0, Math.min(value, safeMax)));
-  const percentage = $derived(indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100));
-
-  const classes = $derived(
-    [
-      'progress',
-      `progress--${variant}`,
-      `progress--${size}`,
-      indeterminate ? 'progress--indeterminate' : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ')
-      .trim()
-  );
-
-  const barStyle = $derived(indeterminate ? {} : { width: `${percentage}%` });
-</script>
-
-<div
-  class={classes}
-  role="progressbar"
-  aria-valuemin={0}
-  aria-valuemax={safeMax}
-  aria-label={label ?? (indeterminate ? 'Loading' : undefined)}
-  aria-valuetext={indeterminate ? 'Loading' : undefined}
-  aria-valuenow={indeterminate ? undefined : clampedValue}
->
-  <div class="progress__track">
-    <div class="progress__bar" style={barStyle}></div>
-  </div>
-  {#if showLabel && !indeterminate}
-    <span class="progress__label" aria-hidden="true">{percentage}%</span>
-  {/if}
-</div>