rizzo-css 0.0.11 → 0.0.13

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

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

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

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

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

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

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