rizzo-css 0.0.17 → 0.0.18

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

@@ -1,38 +0,0 @@
-<script lang="ts">
-  interface Props {
-    id?: string;
-    name?: string;
-    value?: string;
-    /** Bind the selected value for the radio group. Use the same bound variable for all radios in the group. */
-    group?: string;
-    required?: boolean;
-    disabled?: boolean;
-    class?: string;
-    ariaDescribedby?: string;
-    ariaLabel?: string;
-  }
-  let {
-    id,
-    name,
-    value = '',
-    group = $bindable(undefined as string | undefined),
-    required = false,
-    disabled = false,
-    class: className = '',
-    ariaDescribedby,
-    ariaLabel,
-  }: Props = $props();
-</script>
-
-<input
-  type="radio"
-  {id}
-  {name}
-  {value}
-  bind:group={group}
-  {required}
-  {disabled}
-  class={className}
-  aria-describedby={ariaDescribedby}
-  aria-label={ariaLabel}
-/>

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

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    id?: string;
-    name?: string;
-    value?: string;
-    required?: boolean;
-    disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    error?: boolean;
-    success?: boolean;
-    class?: string;
-    ariaDescribedby?: string;
-    ariaInvalid?: boolean | 'true' | 'false';
-    children?: Snippet;
-  }
-  let {
-    id,
-    name,
-    value = $bindable(''),
-    required = false,
-    disabled = false,
-    size = 'md',
-    error = false,
-    success = false,
-    class: className = '',
-    ariaDescribedby,
-    ariaInvalid,
-    children,
-  }: 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>
-
-<select
-  {id}
-  {name}
-  bind:value
-  {required}
-  {disabled}
-  class={classes}
-  aria-invalid={invalid ? 'true' : 'false'}
-  aria-describedby={ariaDescribedby}
->
-  {@render children?.()}
-</select>

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
-    label?: string;
-    class?: string;
-  }
-  let { size = 'md', variant = 'primary', label = 'Loading', class: className = '' }: Props = $props();
-  const classes = $derived(['spinner', `spinner--${size}`, `spinner--${variant}`, className].filter(Boolean).join(' ').trim());
-</script>
-
-<span class={classes} role="status" aria-label={label}>
-  <span class="spinner__ring" aria-hidden="true"></span>
-</span>

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

@@ -1,158 +0,0 @@
-<script lang="ts">
-  export interface TableColumn {
-    key: string;
-    label: string;
-    sortable?: boolean;
-    type?: 'string' | 'number';
-  }
-
-  interface Props {
-    columns: TableColumn[];
-    data: Record<string, string | number>[];
-    caption?: string;
-    sortable?: boolean;
-    filterable?: boolean;
-    filterPlaceholder?: string;
-    striped?: boolean;
-    class?: string;
-  }
-
-  let {
-    columns,
-    data,
-    caption,
-    sortable = true,
-    filterable = false,
-    filterPlaceholder = 'Filter table…',
-    striped = true,
-    class: className = '',
-  }: Props = $props();
-
-  const tableId = `table-${Math.random().toString(36).slice(2, 11)}`;
-  const classes = $derived(
-    ['table', striped ? 'table--striped' : '', sortable ? 'table--sortable' : '', filterable ? 'table--filterable' : '', className]
-      .filter(Boolean)
-      .join(' ')
-      .trim()
-  );
-
-  let sortColumnIndex = $state<number | null>(null);
-  let sortDirection = $state<'ascending' | 'descending'>('ascending');
-  let filterQuery = $state('');
-
-  const filteredData = $derived.by(() => {
-    if (!filterable || !filterQuery.trim()) return data;
-    const q = filterQuery.trim().toLowerCase();
-    return data.filter((row) =>
-      columns.some((col) => String(row[col.key] ?? '').toLowerCase().includes(q))
-    );
-  });
-
-  const sortedData = $derived.by(() => {
-    if (!sortable || sortColumnIndex === null) return filteredData;
-    const col = columns[sortColumnIndex];
-    const type = col?.type ?? 'string';
-    const dir = sortDirection === 'ascending' ? 1 : -1;
-    return [...filteredData].sort((a, b) => {
-      const aVal = a[col.key];
-      const bVal = b[col.key];
-      if (type === 'number') {
-        const aNum = parseFloat(String(aVal).replace(/[^0-9.-]/g, '')) || 0;
-        const bNum = parseFloat(String(bVal).replace(/[^0-9.-]/g, '')) || 0;
-        return dir * (aNum - bNum);
-      }
-      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
-      return dir * cmp;
-    });
-  });
-
-  function getSortState(colIndex: number): 'none' | 'ascending' | 'descending' {
-    if (sortColumnIndex !== colIndex) return 'none';
-    return sortDirection;
-  }
-
-  function handleSort(colIndex: number) {
-    if (sortColumnIndex === colIndex) {
-      sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
-    } else {
-      sortColumnIndex = colIndex;
-      sortDirection = 'ascending';
-    }
-  }
-</script>
-
-<div class={classes} data-table-id={tableId} data-table-sortable={sortable ? 'true' : undefined} data-table-filterable={filterable ? 'true' : undefined}>
-  {#if filterable}
-    <div class="table__filter-wrap">
-      <label for="{tableId}-filter" class="sr-only">Filter table</label>
-      <span class="table__filter-icon" aria-hidden="true">
-        <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" class="table__filter-icon-svg icon" aria-hidden="true">
-          <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
-        </svg>
-      </span>
-      <input
-        type="search"
-        id="{tableId}-filter"
-        class="table__filter"
-        placeholder={filterPlaceholder}
-        aria-controls={tableId}
-        data-table-filter
-        autocomplete="off"
-        bind:value={filterQuery}
-      />
-    </div>
-  {/if}
-  <div class="table__wrapper">
-    <table class="table__table" id={tableId}>
-      {#if caption}
-        <caption class="table__caption">{caption}</caption>
-      {/if}
-      <thead class="table__head">
-        <tr class="table__row">
-          {#each columns as col, i}
-            {@const canSort = sortable && col.sortable !== false}
-            <th
-              class="table__cell table__cell--head"
-              scope="col"
-              data-column-index={i}
-              data-sortable={canSort ? 'true' : undefined}
-              data-type={col.type ?? 'string'}
-              aria-sort={canSort ? getSortState(i) : undefined}
-            >
-              {#if canSort}
-                <button
-                  type="button"
-                  class="table__sort-trigger"
-                  data-column-index={i}
-                  aria-label="Sort by {col.label}"
-                  onclick={() => handleSort(i)}
-                >
-                  <span class="table__cell-content">{col.label}</span>
-                  <span class="table__sort-icon" aria-hidden="true">
-                    <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" class="table__sort-icon-svg icon" aria-hidden="true">
-                      <path d="m7 15 5 5 5-5" />
-                      <path d="m7 9 5-5 5 5" />
-                    </svg>
-                  </span>
-                </button>
-              {:else}
-                <span class="table__cell-content">{col.label}</span>
-              {/if}
-            </th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody class="table__body">
-        {#each sortedData as row, rowIndex}
-          <tr class="table__row" data-row-index={rowIndex}>
-            {#each columns as col}
-              <td class="table__cell" data-column-key={col.key}>
-                {row[col.key] ?? ''}
-              </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-</div>

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

@@ -1,117 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  export interface Tab {
-    id: string;
-    label: string;
-    content?: string;
-  }
-
-  interface Props {
-    tabs: Tab[];
-    id?: string;
-    defaultTab?: string;
-    variant?: 'default' | 'pills' | 'underline';
-    class?: string;
-    children?: Snippet<[activeTabId: string]>;
-  }
-  let {
-    tabs,
-    id,
-    defaultTab,
-    variant = 'default',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const defaultActiveId = $derived(defaultTab ?? tabs[0]?.id ?? '');
-  let selectedId = $state(null as string | null);
-  const activeTabId = $derived(selectedId ?? defaultActiveId);
-  const tabsId = $derived(id ?? `tabs-${Math.random().toString(36).slice(2, 11)}`);
-  const variantClass = $derived(variant !== 'default' ? `tabs--${variant}` : '');
-  const classes = $derived(['tabs', variantClass, className].filter(Boolean).join(' ').trim());
-
-  let tabListEl: HTMLElement | null = $state(null);
-
-  function activateTab(index: number) {
-    if (index < 0 || index >= tabs.length) return;
-    selectedId = tabs[index].id;
-  }
-
-  function handleKeydown(e: KeyboardEvent, index: number) {
-    let targetIndex = index;
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        e.preventDefault();
-        targetIndex = (index + 1) % tabs.length;
-        break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        e.preventDefault();
-        targetIndex = index === 0 ? tabs.length - 1 : index - 1;
-        break;
-      case 'Home':
-        e.preventDefault();
-        targetIndex = 0;
-        break;
-      case 'End':
-        e.preventDefault();
-        targetIndex = tabs.length - 1;
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        activateTab(index);
-        return;
-      default:
-        return;
-    }
-    activateTab(targetIndex);
-    const buttons = tabListEl?.querySelectorAll('[role="tab"]');
-    if (buttons && buttons[targetIndex]) (buttons[targetIndex] as HTMLElement).focus();
-  }
-</script>
-
-<div class={classes} data-tabs={tabsId}>
-  <div class="tabs__list" role="tablist" aria-label="Tabs" bind:this={tabListEl}>
-    {#each tabs as tab, index}
-      {@const isActive = tab.id === activeTabId}
-      <span
-        class="tabs__tab {isActive ? 'tabs__tab--active' : ''}"
-        id="{tabsId}-tab-{tab.id}"
-        role="tab"
-        tabindex={isActive ? 0 : -1}
-        aria-selected={isActive ? 'true' : 'false'}
-        aria-controls="{tabsId}-panel-{tab.id}"
-        data-tab-id={tab.id}
-        data-tab-index={index}
-        onclick={() => activateTab(index)}
-        onkeydown={(e) => handleKeydown(e, index)}
-      >
-        {tab.label}
-      </span>
-    {/each}
-  </div>
-
-  <div class="tabs__panels-wrapper">
-    {#each tabs as tab, index}
-      {@const isActive = tab.id === activeTabId}
-      <div
-        class="tabs__panel {isActive ? 'tabs__panel--active' : ''}"
-        id="{tabsId}-panel-{tab.id}"
-        role="tabpanel"
-        aria-labelledby="{tabsId}-tab-{tab.id}"
-        aria-hidden={isActive ? 'false' : 'true'}
-        data-panel-id={tab.id}
-        data-panel-index={index}
-      >
-        {#if tab.content}
-          <div class="tabs__panel-content">{@html tab.content}</div>
-        {:else if isActive}
-          {@render children?.(activeTabId)}
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>

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

@@ -1,59 +0,0 @@
-<script lang="ts">
-  interface Props {
-    id?: string;
-    name?: string;
-    value?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    rows?: number;
-    cols?: number;
-    size?: 'sm' | 'md' | 'lg';
-    error?: boolean;
-    success?: boolean;
-    class?: string;
-    ariaDescribedby?: string;
-    ariaInvalid?: boolean | 'true' | 'false';
-  }
-  let {
-    id,
-    name,
-    value = $bindable(''),
-    placeholder,
-    required = false,
-    disabled = false,
-    readonly = false,
-    rows = 4,
-    cols,
-    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>
-
-<textarea
-  {id}
-  {name}
-  bind:value
-  {placeholder}
-  {required}
-  {disabled}
-  {readonly}
-  {rows}
-  cols={cols}
-  class={classes}
-  aria-invalid={invalid ? 'true' : 'false'}
-  aria-describedby={ariaDescribedby}
-></textarea>

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

@@ -1,54 +0,0 @@
-<script lang="ts">
-  interface Props {
-    themeId: string;
-    size?: number;
-    class?: string;
-  }
-
-  let { themeId, size = 24, class: className = '' }: Props = $props();
-
-  /** Same icon SVGs as ThemeSwitcher (one per theme). */
-  const THEME_ICON_SVG: Record<string, string> = {
-    '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>',
-  };
-
-  const iconSvg = $derived(THEME_ICON_SVG[themeId] ?? null);
-  const sizedSvg = $derived(
-    iconSvg
-      ? iconSvg.replace(/width="16"/, `width="${size}"`).replace(/height="16"/, `height="${size}"`)
-      : null
-  );
-</script>
-
-{#if sizedSvg}
-  <span class={className} style="display: inline-flex; vertical-align: middle;">
-    {@html sizedSvg}
-  </span>
-{/if}