@aiaiai-pt/design-system 0.1.0

package/components/Card.svelte

@@ -0,0 +1,108 @@
+<!--
+  @component Card
+
+  Surface container. Three variants: flat, bordered (default), elevated.
+  Content-agnostic. Consumes --card-* tokens from components.css.
+
+  @example Bordered (default)
+  <Card>Content here</Card>
+
+  @example Elevated
+  <Card variant="elevated">Floating content</Card>
+
+  @example Interactive + selectable
+  <Card interactive selected={isSelected} onclick={() => select(id)}>
+    Clickable card
+  </Card>
+-->
+<script>
+  /**
+   * @typedef {'flat' | 'bordered' | 'elevated'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'bordered',
+    /** @type {boolean} */
+    interactive = false,
+    /** @type {boolean} */
+    selected = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  // tag variable unused — rendering uses {#if interactive} branching
+</script>
+
+{#if interactive}
+  <button
+    class="card card-{variant} card-interactive {className}"
+    class:card-selected={selected}
+    {...rest}
+  >
+    {#if children}{@render children()}{/if}
+  </button>
+{:else}
+  <div
+    class="card card-{variant} {className}"
+    class:card-selected={selected}
+    {...rest}
+  >
+    {#if children}{@render children()}{/if}
+  </div>
+{/if}
+
+<style>
+  .card {
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
+    background: var(--card-bg);
+    transition: all var(--card-transition);
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-flat {
+    border: var(--card-flat-border);
+    box-shadow: var(--card-flat-shadow);
+    background: var(--color-surface-secondary);
+  }
+
+  .card-bordered {
+    border: var(--card-bordered-border);
+    box-shadow: var(--card-bordered-shadow);
+  }
+
+  .card-elevated {
+    border: var(--card-elevated-border);
+    box-shadow: var(--card-elevated-shadow);
+  }
+
+  .card-interactive {
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    width: 100%;
+  }
+
+  .card-interactive:hover {
+    border: var(--card-interactive-hover-border);
+  }
+
+  .card-interactive:active {
+    background: var(--card-interactive-active-bg);
+  }
+
+  .card-interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .card-selected {
+    border-color: var(--card-selected-border-color);
+  }
+</style>

package/components/Checkbox.svelte

@@ -0,0 +1,138 @@
+<!--
+  @component Checkbox
+
+  Checkbox with label. Supports checked, indeterminate, and disabled states.
+  Consumes --checkbox-* tokens from components.css.
+
+  @example
+  <Checkbox label="Accept terms" bind:checked />
+
+  @example Indeterminate
+  <Checkbox label="Select all" indeterminate />
+-->
+<script module>
+  let _checkboxUid = 0;
+</script>
+
+<script>
+  let {
+    /** @type {boolean} */
+    checked = $bindable(false),
+    /** @type {boolean} */
+    indeterminate = false,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `checkbox-${_checkboxUid++}`;
+  const checkboxId = $derived(id ?? fallbackId);
+
+  /** @type {HTMLInputElement | undefined} */
+  let inputEl;
+
+  $effect(() => {
+    if (inputEl) {
+      inputEl.indeterminate = indeterminate;
+    }
+  });
+</script>
+
+<label
+  class="checkbox-group {className}"
+  class:checkbox-group-disabled={disabled}
+  for={checkboxId}
+>
+  <span
+    class="checkbox"
+    class:checkbox-checked={checked || indeterminate}
+  >
+    {#if checked}
+      <svg class="checkbox-icon" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M2.5 6l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    {:else if indeterminate}
+      <svg class="checkbox-icon" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M3 6h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    {/if}
+  </span>
+  <input
+    bind:this={inputEl}
+    id={checkboxId}
+    type="checkbox"
+    class="checkbox-input"
+    {disabled}
+    bind:checked
+    {...rest}
+  />
+  {#if label}
+    <span class="checkbox-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    cursor: pointer;
+  }
+
+  .checkbox-group-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .checkbox {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    border-radius: var(--checkbox-radius);
+    border: var(--checkbox-border);
+    background: var(--color-surface);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: all var(--duration-fast) var(--easing-default);
+  }
+
+  .checkbox-group:has(.checkbox-input:focus-visible) .checkbox {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .checkbox-checked {
+    background: var(--checkbox-bg-checked);
+    border-color: var(--checkbox-bg-checked);
+  }
+
+  .checkbox-icon {
+    width: 12px;
+    height: 12px;
+    color: var(--checkbox-check-color);
+  }
+
+  .checkbox-label {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text);
+  }
+
+  .checkbox-group-disabled .checkbox-label {
+    color: var(--color-text-muted);
+  }
+</style>

package/components/CodeBlock.svelte

@@ -0,0 +1,187 @@
+<!--
+  @component CodeBlock
+
+  Formatted code display with optional line numbers.
+  Consumes --code-* tokens from components.css.
+
+  Syntax highlighting is the consumer's responsibility (Prism, Shiki, etc).
+  This component handles layout, line numbers, and copy.
+
+  @example
+  <CodeBlock code="SELECT * FROM users WHERE active = true;" language="sql" />
+
+  @example Without line numbers
+  <CodeBlock code="pip install pandas" lineNumbers={false} />
+
+  @example With highlighted HTML (pre-highlighted by consumer)
+  <CodeBlock language="python" lineNumbers>
+    {#snippet content()}
+      <span class="token keyword">def</span> <span class="token function">main</span>():
+    {/snippet}
+  </CodeBlock>
+-->
+<script>
+  let {
+    /** @type {string | undefined} */
+    code = undefined,
+    /** @type {string | undefined} */
+    language = undefined,
+    /** @type {boolean} */
+    lineNumbers = true,
+    /** @type {boolean} */
+    copyable = true,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    content = undefined,
+    ...rest
+  } = $props();
+
+  let copied = $state(false);
+
+  const lines = $derived(code?.split('\n') ?? []);
+
+  async function handleCopy() {
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      setTimeout(() => { copied = false; }, 2000);
+    } catch {
+      // Clipboard API not available
+    }
+  }
+</script>
+
+<div
+  class="code-block {className}"
+  data-language={language}
+  {...rest}
+>
+  {#if copyable && code}
+    <button
+      class="code-copy"
+      onclick={handleCopy}
+      aria-label={copied ? 'Copied' : 'Copy code'}
+    >
+      <span class="code-copy-label">
+        {copied ? 'COPIED' : 'COPY'}
+      </span>
+    </button>
+  {/if}
+
+  <div class="code-scroll">
+    {#if content}
+      <!-- Pre-highlighted content via snippet -->
+      <pre class="code-pre"><code>{@render content()}</code></pre>
+    {:else if code}
+      <!-- Plain text with optional line numbers -->
+      <table class="code-table" role="presentation">
+        <tbody>
+          {#each lines as line, i}
+            <tr class="code-line">
+              {#if lineNumbers}
+                <td class="code-line-number" aria-hidden="true">{i + 1}</td>
+              {/if}
+              <td class="code-line-content">{line || '\u00A0'}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .code-block {
+    position: relative;
+    background: var(--code-bg);
+    border: var(--code-border);
+    border-radius: var(--code-radius);
+    overflow: hidden;
+  }
+
+  .code-scroll {
+    overflow-x: auto;
+  }
+
+  .code-pre {
+    margin: 0;
+    padding: var(--code-padding);
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
+    line-height: var(--code-line-height);
+    color: var(--code-text);
+  }
+
+  .code-table {
+    border-collapse: collapse;
+    width: 100%;
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
+    line-height: var(--code-line-height);
+    color: var(--code-text);
+  }
+
+  .code-line {
+    display: block;
+  }
+
+  .code-line-number {
+    width: var(--code-line-number-width);
+    padding: 0 var(--space-sm);
+    text-align: right;
+    color: var(--code-line-number-color);
+    background: var(--code-gutter-bg);
+    border-right: var(--code-gutter-border);
+    user-select: none;
+    vertical-align: top;
+  }
+
+  .code-line-content {
+    padding: 0 var(--code-padding);
+    white-space: pre;
+  }
+
+  /* First and last rows get vertical padding */
+  .code-table tbody tr:first-child .code-line-number,
+  .code-table tbody tr:first-child .code-line-content {
+    padding-top: var(--code-padding);
+  }
+
+  .code-table tbody tr:last-child .code-line-number,
+  .code-table tbody tr:last-child .code-line-content {
+    padding-bottom: var(--code-padding);
+  }
+
+  /* ─── Copy button ─── */
+  .code-copy {
+    all: unset;
+    position: absolute;
+    top: var(--space-sm);
+    right: var(--space-sm);
+    cursor: pointer;
+    z-index: 1;
+    padding: var(--space-2xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    background: var(--code-bg);
+    border: var(--code-border);
+    transition: all var(--duration-instant) var(--easing-default);
+  }
+
+  .code-copy:hover {
+    background: var(--color-surface-tertiary);
+  }
+
+  .code-copy:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .code-copy-label {
+    font-family: var(--type-label-font);
+    font-size: var(--type-caption-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-text-secondary);
+  }
+</style>

package/components/CodeEditor.svelte

@@ -0,0 +1,221 @@
+<!--
+  @component CodeEditor
+
+  Editable code editor wrapping CodeMirror 6.
+  Styled from --code-* tokens to match CodeBlock appearance.
+  Requires @codemirror/* peer dependencies installed by the consumer.
+
+  @example SQL editor
+  <CodeEditor bind:value={sql} language="sql" />
+
+  @example Readonly Python
+  <CodeEditor value={code} readonly language="python" minLines={10} />
+
+  @example Empty with placeholder
+  <CodeEditor language="sql" placeholder="Enter your query..." />
+-->
+<script>
+  import { onMount } from 'svelte';
+  import { EditorView, keymap, placeholder as phExtension, lineNumbers as lnExtension } from '@codemirror/view';
+  import { EditorState } from '@codemirror/state';
+  import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+  import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+  import { sql as sqlLang } from '@codemirror/lang-sql';
+  import { python as pythonLang } from '@codemirror/lang-python';
+  import { json as jsonLang } from '@codemirror/lang-json';
+
+  /** @type {{ value?: string, language?: string, readonly?: boolean, placeholder?: string, lineNumbers?: boolean, minLines?: number, maxLines?: number, class?: string }} */
+  let {
+    /** @type {string} */
+    value = $bindable(''),
+    /** @type {string} */
+    language = 'sql',
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {string} */
+    placeholder = '',
+    /** @type {boolean} */
+    lineNumbers = true,
+    /** @type {number} */
+    minLines = 5,
+    /** @type {number} */
+    maxLines = 20,
+    /** @type {string} */
+    class: className = '',
+  } = $props();
+
+  /** @type {HTMLDivElement} */
+  let container;
+  /** @type {EditorView | null} */
+  let view = null;
+  let internalUpdate = false;
+
+  /**
+   * Get the language extension for the given language name.
+   * @param {string} lang
+   */
+  function getLanguageExtension(lang) {
+    switch (lang) {
+      case 'sql': return sqlLang();
+      case 'python': return pythonLang();
+      case 'json': return jsonLang();
+      default: return [];
+    }
+  }
+
+  /**
+   * Build a CM6 theme from CSS custom properties on the container element.
+   * @param {HTMLElement} el
+   * @param {number} minH
+   * @param {number} maxH
+   */
+  function buildThemeFromTokens(el, minH, maxH) {
+    const s = getComputedStyle(el);
+    const get = (/** @type {string} */ prop) => s.getPropertyValue(prop).trim();
+
+    const bg = get('--code-bg') || 'inherit';
+    const text = get('--code-text') || 'inherit';
+    const font = get('--code-font') || 'monospace';
+    const fontSize = get('--code-font-size') || '14px';
+    const lineHeight = get('--code-line-height') || '1.6';
+    const gutterBg = get('--code-gutter-bg') || 'inherit';
+    const gutterBorder = get('--code-gutter-border') || 'var(--elevation-border)';
+    const lineNumColor = get('--code-line-number-color') || 'inherit';
+    const selectionBg = get('--code-selection-bg') || 'rgba(0,0,0,0.1)';
+    const cursorColor = get('--code-cursor-color') || 'currentColor';
+
+    return EditorView.theme({
+      '&': {
+        backgroundColor: bg,
+        color: text,
+        fontFamily: font,
+        fontSize,
+        lineHeight,
+        minHeight: `calc(${lineHeight} * ${fontSize} * ${minH})`,
+        maxHeight: `calc(${lineHeight} * ${fontSize} * ${maxH})`,
+      },
+      '&.cm-focused': {
+        outline: 'none',
+      },
+      '.cm-scroller': {
+        overflow: 'auto',
+        fontFamily: font,
+      },
+      '.cm-content': {
+        caretColor: cursorColor,
+        fontFamily: font,
+        padding: '0',
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: cursorColor,
+        borderLeftWidth: '2px',
+      },
+      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
+        backgroundColor: selectionBg,
+      },
+      '.cm-gutters': {
+        backgroundColor: gutterBg,
+        borderRight: gutterBorder || '1px solid #ddd',
+        color: lineNumColor,
+      },
+      '.cm-lineNumbers .cm-gutterElement': {
+        padding: '0 8px 0 4px',
+        minWidth: '32px',
+      },
+      '.cm-activeLine': {
+        backgroundColor: 'transparent',
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: 'transparent',
+      },
+      '.cm-placeholder': {
+        color: lineNumColor,
+        fontStyle: 'italic',
+      },
+    });
+  }
+
+  onMount(() => {
+    const extensions = [
+      history(),
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+      syntaxHighlighting(defaultHighlightStyle),
+      buildThemeFromTokens(container, minLines, maxLines),
+      EditorView.updateListener.of((/** @type {import('@codemirror/view').ViewUpdate} */ update) => {
+        if (update.docChanged) {
+          internalUpdate = true;
+          value = update.state.doc.toString();
+          internalUpdate = false;
+        }
+      }),
+    ];
+
+    if (lineNumbers) {
+      extensions.push(lnExtension());
+    }
+
+    if (placeholder) {
+      extensions.push(phExtension(placeholder));
+    }
+
+    if (readonly) {
+      extensions.push(EditorState.readOnly.of(true));
+      extensions.push(EditorView.editable.of(false));
+    }
+
+    const langExt = getLanguageExtension(language);
+    if (langExt) {
+      extensions.push(langExt);
+    }
+
+    view = new EditorView({
+      state: EditorState.create({ doc: /** @type {string} */ (value), extensions }),
+      parent: container,
+    });
+
+    return () => {
+      view?.destroy();
+      view = null;
+    };
+  });
+
+  // Sync external value changes into the editor
+  $effect(() => {
+    if (view && !internalUpdate) {
+      const current = view.state.doc.toString();
+      if (value !== current) {
+        view.dispatch({
+          changes: { from: 0, to: current.length, insert: /** @type {string} */ (value) },
+        });
+      }
+    }
+  });
+</script>
+
+<div
+  class="code-editor {className}"
+  class:code-editor--readonly={readonly}
+  bind:this={container}
+  data-language={language}
+></div>
+
+<style>
+  .code-editor {
+    border: var(--code-border);
+    border-radius: var(--code-radius);
+    overflow: hidden;
+    background: var(--code-bg);
+    transition: box-shadow var(--duration-instant) var(--easing-default);
+  }
+
+  .code-editor:focus-within:not(.code-editor--readonly) {
+    box-shadow:
+      0 0 0 var(--focus-ring-offset) var(--color-surface),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+  }
+
+  /* CM6 places its own wrapper — let it fill the container */
+  .code-editor :global(.cm-editor) {
+    border-radius: var(--code-radius);
+  }
+</style>