rizzo-css 0.0.17 → 0.0.19

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

@@ -1,315 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import ChevronDown from './icons/ChevronDown.svelte';
-  import { THEMES_DARK, THEMES_LIGHT } from '../../config/themes';
-  import {
-    applyTheme,
-    getStoredTheme,
-    getThemeLabel,
-    resolveSystemTheme,
-    THEME_SYSTEM,
-  } from '../../utils/theme';
-
-  const DEFAULT_THEME_DARK = 'github-dark-classic';
-  const DEFAULT_THEME_LIGHT = 'github-light';
-
-  const THEME_ICON_SVG: Record<string, string> = {
-    system:
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>',
-    'github-dark-classic':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 7h.01" /><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" /><path d="m20 7 2 .5-2 .5" /><path d="M10 18v3" /><path d="M14 17.75V21" /><path d="M7 18a6 6 0 0 0 3.84-10.61" /></svg>',
-    'github-light':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>',
-    'red-velvet-cupcake':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" /><path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" /><path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" /></svg>',
-    'orangy-one-light':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" /><path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" /><path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" /></svg>',
-    sunflower:
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 17a10 10 0 0 0-20 0" /><path d="M6 17a6 6 0 0 1 12 0" /><path d="M10 17a2 2 0 0 1 4 0" /></svg>',
-    'shades-of-purple':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>',
-    'sandstorm-classic':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>',
-    'rocky-blood-orange':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" /><path d="M12 22v-4" /></svg>',
-    'minimal-dark-neon-yellow':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>',
-    'hack-the-box':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>',
-    'green-breeze-light':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg>',
-    'pink-cat-boo':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>',
-    'cute-pink':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M12 8v4M10 10l-2 2M14 10l2 2" /></svg>',
-    'semi-light-purple':
-      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" /><path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" /></svg>',
-  };
-
-  let open = $state(false);
-  let stored = $state(DEFAULT_THEME_DARK);
-  let currentTheme = $state(DEFAULT_THEME_DARK);
-  let previewOption = $state<{ value: string; label: string; bg: string; accent: string } | null>(null);
-  let menuEl: HTMLElement | null = $state(null);
-  let triggerEl: HTMLElement | null = $state(null);
-
-  const menuId = 'theme-switcher-menu';
-  const triggerId = 'theme-switcher-trigger';
-
-  function getStored(): string {
-    if (typeof localStorage === 'undefined') return DEFAULT_THEME_DARK;
-    return localStorage.getItem('theme') || document.documentElement.getAttribute('data-theme') || DEFAULT_THEME_DARK;
-  }
-  function getCurrent(): string {
-    if (typeof document === 'undefined') return DEFAULT_THEME_DARK;
-    return document.documentElement.getAttribute('data-theme') || DEFAULT_THEME_DARK;
-  }
-
-  function syncFromStorage() {
-    stored = getStored();
-    currentTheme = getCurrent();
-  }
-
-  const currentLabel = $derived(
-    stored === THEME_SYSTEM ? 'System' : getThemeLabel(currentTheme)
-  );
-  const currentIconSvg = $derived(
-    THEME_ICON_SVG[stored === THEME_SYSTEM ? THEME_SYSTEM : currentTheme || DEFAULT_THEME_DARK] || THEME_ICON_SVG[DEFAULT_THEME_DARK] || ''
-  );
-  const resolvedThemeInfo = $derived(THEMES_DARK.concat(THEMES_LIGHT).find((t) => t.value === currentTheme));
-  const preview = $derived(
-    previewOption ?? (stored === THEME_SYSTEM ? resolvedThemeInfo ?? { value: THEME_SYSTEM, label: 'System', bg: 'oklch(55% 0.02 270deg)', accent: '' } : resolvedThemeInfo)
-  );
-  const previewBg = $derived(preview?.bg ?? '');
-  const previewAccent = $derived(preview?.accent ?? '');
-  const previewLabel = $derived(preview?.label ?? '');
-  const previewStyle = $derived(previewAccent ? `--preview-accent: ${previewAccent}` : '');
-
-  function isOptionActive(value: string): boolean {
-    if (stored === value) return true;
-    if (stored === THEME_SYSTEM && value === currentTheme) return true;
-    return false;
-  }
-
-  function selectTheme(value: string) {
-    applyTheme(value);
-    syncFromStorage();
-    open = false;
-    triggerEl?.focus();
-  }
-
-  function getVisibleOptions(): HTMLElement[] {
-    if (!menuEl) return [];
-    return Array.from(menuEl.querySelectorAll<HTMLElement>('.theme-switcher__option'));
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.target !== triggerEl && !menuEl?.contains(e.target as Node)) return;
-    const visible = getVisibleOptions();
-    if (e.key === 'Escape') {
-      open = false;
-      triggerEl?.focus();
-      e.preventDefault();
-      return;
-    }
-    if (e.key === 'ArrowDown' && !open) {
-      open = true;
-      e.preventDefault();
-      setTimeout(() => visible[0]?.focus(), 0);
-      return;
-    }
-    if (e.key === 'ArrowUp' && !open) {
-      open = true;
-      e.preventDefault();
-      setTimeout(() => visible[visible.length - 1]?.focus(), 0);
-      return;
-    }
-    if (!open) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        open = true;
-        setTimeout(() => visible[0]?.focus(), 0);
-      }
-      return;
-    }
-    const i = visible.indexOf(e.target as HTMLElement);
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      visible[(i + 1) % visible.length]?.focus();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      visible[i <= 0 ? visible.length - 1 : i - 1]?.focus();
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      visible[0]?.focus();
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      visible[visible.length - 1]?.focus();
-    } else if ((e.key === 'Enter' || e.key === ' ') && i >= 0) {
-      e.preventDefault();
-      const value = visible[i]?.getAttribute('data-theme-value');
-      if (value) selectTheme(value);
-    } else if (e.key === 'Tab') {
-      open = false;
-    }
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (menuEl && triggerEl && !menuEl.contains(e.target as Node) && !triggerEl.contains(e.target as Node)) {
-      open = false;
-    }
-  }
-
-  $effect(() => {
-    if (open) {
-      document.addEventListener('click', handleClickOutside);
-      return () => document.removeEventListener('click', handleClickOutside);
-    }
-  });
-
-  onMount(() => {
-    syncFromStorage();
-    const handler = () => syncFromStorage();
-    window.addEventListener('rizzo-theme-change', handler);
-    return () => window.removeEventListener('rizzo-theme-change', handler);
-  });
-
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    syncFromStorage();
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="theme-switcher" data-theme-switcher>
-  <button
-    id={triggerId}
-    type="button"
-    class="theme-switcher__trigger"
-    aria-expanded={open}
-    aria-haspopup="true"
-    aria-controls={menuId}
-    aria-label="Select theme"
-    bind:this={triggerEl}
-    onclick={() => (open = !open)}
-  >
-    <span class="theme-switcher__label-wrapper" data-theme-label-wrapper>
-      {#if currentIconSvg}
-        <span class="theme-switcher__label-icon" data-theme-label-icon>{@html currentIconSvg}</span>
-      {/if}
-      <span class="theme-switcher__label" data-theme-label>{currentLabel}</span>
-    </span>
-    <ChevronDown width={16} height={16} class="theme-switcher__icon" />
-  </button>
-
-  <div
-    id={menuId}
-    class="theme-switcher__menu"
-    class:theme-switcher__menu--open={open}
-    role="menu"
-    aria-labelledby={triggerId}
-    aria-label="Theme selection menu"
-    aria-hidden={!open}
-    tabindex="-1"
-    bind:this={menuEl}
-    onmouseleave={() => (previewOption = null)}
-    onfocusout={(e) => {
-      const related = e.relatedTarget as Node | null;
-      if (!related || !menuEl?.contains(related)) previewOption = null;
-    }}
-  >
-    <div class="theme-switcher__menu-options">
-      <div class="theme-switcher__group" role="group" aria-label="Preference">
-        <div class="theme-switcher__group-label" role="presentation">Preference</div>
-        <div
-          class="theme-switcher__option"
-          class:theme-switcher__option--active={isOptionActive(THEME_SYSTEM)}
-          role="menuitemradio"
-          aria-checked={stored === THEME_SYSTEM}
-          tabindex={open ? 0 : -1}
-          data-theme-value="system"
-          data-theme-type="system"
-          data-theme-bg="oklch(55% 0.02 270deg)"
-          data-theme-accent=""
-          data-theme-label="System"
-          onclick={() => selectTheme(THEME_SYSTEM)}
-          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectTheme(THEME_SYSTEM); } }}
-          onmouseenter={() => (previewOption = { value: THEME_SYSTEM, label: 'System', bg: 'oklch(55% 0.02 270deg)', accent: '' })}
-          onfocus={() => (previewOption = { value: THEME_SYSTEM, label: 'System', bg: 'oklch(55% 0.02 270deg)', accent: '' })}
-        >
-          <span class="theme-switcher__option-icon">{@html THEME_ICON_SVG['system'] || ''}</span>
-          <span class="sr-only">Preference: </span>
-          System
-        </div>
-      </div>
-      <div class="theme-switcher__group" role="group" aria-label="Dark themes">
-        <div class="theme-switcher__group-label" role="presentation">Dark</div>
-        {#each THEMES_DARK as theme}
-          <div
-            class="theme-switcher__option"
-            class:theme-switcher__option--active={isOptionActive(theme.value)}
-            role="menuitemradio"
-            aria-checked={stored === theme.value}
-            tabindex={open ? 0 : -1}
-            data-theme-value={theme.value}
-            data-theme-type="dark"
-            data-theme-bg={theme.bg}
-            data-theme-accent={theme.accent}
-            data-theme-label={theme.label}
-            onclick={() => selectTheme(theme.value)}
-            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectTheme(theme.value); } }}
-            onmouseenter={() => (previewOption = { value: theme.value, label: theme.label, bg: theme.bg, accent: theme.accent })}
-            onfocus={() => (previewOption = { value: theme.value, label: theme.label, bg: theme.bg, accent: theme.accent })}
-          >
-            <span class="theme-switcher__option-icon">{@html THEME_ICON_SVG[theme.value] || ''}</span>
-            <span class="sr-only">Dark theme: </span>
-            {theme.label}
-          </div>
-        {/each}
-      </div>
-      <div class="theme-switcher__group" role="group" aria-label="Light themes">
-        <div class="theme-switcher__group-label" role="presentation">Light</div>
-        {#each THEMES_LIGHT as theme}
-          <div
-            class="theme-switcher__option"
-            class:theme-switcher__option--active={isOptionActive(theme.value)}
-            role="menuitemradio"
-            aria-checked={stored === theme.value}
-            tabindex={open ? 0 : -1}
-            data-theme-value={theme.value}
-            data-theme-type="light"
-            data-theme-bg={theme.bg}
-            data-theme-accent={theme.accent}
-            data-theme-label={theme.label}
-            onclick={() => selectTheme(theme.value)}
-            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectTheme(theme.value); } }}
-            onmouseenter={() => (previewOption = { value: theme.value, label: theme.label, bg: theme.bg, accent: theme.accent })}
-            onfocus={() => (previewOption = { value: theme.value, label: theme.label, bg: theme.bg, accent: theme.accent })}
-          >
-            <span class="theme-switcher__option-icon">{@html THEME_ICON_SVG[theme.value] || ''}</span>
-            <span class="sr-only">Light theme: </span>
-            {theme.label}
-          </div>
-        {/each}
-      </div>
-    </div>
-    <div
-      class="theme-switcher__preview"
-      data-theme-preview
-      aria-hidden={!open}
-      style={previewStyle}
-    >
-      <div class="theme-switcher__preview-title">Preview</div>
-      <div class="theme-switcher__preview-header" data-theme-preview-label>{previewLabel}</div>
-      <div class="theme-switcher__preview-swatch-wrap">
-        <div
-          class="theme-switcher__preview-swatch"
-          data-theme-preview-swatch
-          style={previewBg ? `background-color: ${previewBg}` : ''}
-        ></div>
-      </div>
-      <div class="theme-switcher__preview-accent" data-theme-preview-accent></div>
-    </div>
-  </div>
-</div>

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

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Alert from './Alert.svelte';
-
-  interface Props {
-    variant?: 'success' | 'error' | 'warning' | 'info';
-    dismissible?: boolean;
-    autoDismiss?: number;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
-    class?: string;
-    id?: string;
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'info',
-    dismissible = true,
-    autoDismiss = 5000,
-    position = 'top-right',
-    class: className = '',
-    id,
-    children,
-  }: Props = $props();
-
-  const positionClass = $derived(`toast--${position}`);
-  const classes = $derived(['toast', positionClass, className].filter(Boolean).join(' ').trim());
-</script>
-
-<div class={classes} data-toast-container>
-  <Alert {variant} {dismissible} {autoDismiss} {id}>
-    {@render children?.()}
-  </Alert>
-</div>

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

@@ -1,19 +0,0 @@
-<script lang="ts">
-  interface Props {
-    text: string;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    delay?: number;
-    class?: string;
-    id?: string;
-  }
-  let { text, position = 'top', delay = 0, class: className = '', id }: Props = $props();
-
-  const tooltipId = $derived(id ?? `tooltip-${Math.random().toString(36).slice(2, 11)}`);
-  const positionClass = $derived(`tooltip--${position}`);
-  const classes = $derived(['tooltip', positionClass, className].filter(Boolean).join(' ').trim());
-  const delayStyle = $derived(delay > 0 ? `--tooltip-delay: ${delay}ms;` : '');
-</script>
-
-<span class={classes} role="tooltip" id={tooltipId} aria-hidden="true" style={delayStyle}>
-  {text}
-</span>

package/scaffold/svelte-app/src/lib/rizzo/icons/Check.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M20 6 9 17l-5-5" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/ChevronDown.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="m6 9 6 6 6-6" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Circle.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <circle cx="12" cy="12" r="10" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Close.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 20, height = 20, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M18 6 6 18" />
-  <path d="m6 6 12 12" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Cmd.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  fill-rule="evenodd"
-  clip-rule="evenodd"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Copy.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-  <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Eye.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 16, height = 16, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-  <circle cx="12" cy="12" r="3" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Filter.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 20, height = 20, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo/icons/Gear.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  interface Props {
-    width?: number;
-    height?: number;
-    class?: string;
-  }
-  let { width = 20, height = 20, class: className = '' }: Props = $props();
-</script>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  {width}
-  {height}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={`icon rizzo-icon ${className}`.trim()}
-  aria-hidden="true"
->
-  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-  <circle cx="12" cy="12" r="3" />
-</svg>
-
-<style>
-  .rizzo-icon {
-    color: var(--icon);
-  }
-</style>