@aiaiai-pt/design-system 0.1.0

package/components/FileUpload.svelte

@@ -0,0 +1,280 @@
+<!--
+  @component FileUpload
+
+  Drag-and-drop file upload zone. Does NOT handle uploads — emits
+  validated File[] to parent via callback. Parent owns upload logic.
+
+  Consumes --fileupload-* tokens from components.css.
+
+  @example
+  <FileUpload accept=".pdf,.docx" maxSize={52_428_800} onfiles={(files) => handleFiles(files)}>
+    {#snippet icon()}<PhCloudArrowUp size={32} />{/snippet}
+  </FileUpload>
+
+  @example Custom content
+  <FileUpload onfiles={handleFiles}>
+    {#snippet children()}
+      <p>Custom drop zone content</p>
+    {/snippet}
+  </FileUpload>
+-->
+<script>
+  let {
+    /** @type {string} Comma-separated MIME types or extensions */
+    accept = '',
+    /** @type {number} Max bytes per file. 0 = no limit */
+    maxSize = 0,
+    /** @type {boolean} */
+    multiple = true,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {((files: File[]) => void) | undefined} */
+    onfiles = undefined,
+    /** @type {((files: File[]) => void) | undefined} Called with files that failed validation */
+    onreject = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  let dragging = $state(false);
+  /** @type {HTMLInputElement | undefined} */
+  let inputEl;
+
+  /**
+   * Format bytes to human-readable size.
+   * @param {number} bytes
+   * @returns {string}
+   */
+  function formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const size = bytes / Math.pow(1024, i);
+    return `${size % 1 === 0 ? size : size.toFixed(1)} ${units[i]}`;
+  }
+
+  /**
+   * Parse accept string into a set of lowercase extensions and MIME types.
+   * @param {string} acceptStr
+   * @returns {{ extensions: Set<string>, mimeTypes: Set<string> }}
+   */
+  function parseAccept(acceptStr) {
+    const extensions = new Set();
+    const mimeTypes = new Set();
+    if (!acceptStr) return { extensions, mimeTypes };
+    for (const part of acceptStr.split(',')) {
+      const trimmed = part.trim().toLowerCase();
+      if (trimmed.startsWith('.')) {
+        extensions.add(trimmed);
+      } else if (trimmed.includes('/')) {
+        mimeTypes.add(trimmed);
+      }
+    }
+    return { extensions, mimeTypes };
+  }
+
+  /**
+   * Check if a file matches the accept constraint.
+   * @param {File} file
+   * @param {{ extensions: Set<string>, mimeTypes: Set<string> }} parsed
+   * @returns {boolean}
+   */
+  function matchesAccept(file, parsed) {
+    if (parsed.extensions.size === 0 && parsed.mimeTypes.size === 0) return true;
+    const name = file.name.toLowerCase();
+    for (const ext of parsed.extensions) {
+      if (name.endsWith(ext)) return true;
+    }
+    const type = file.type.toLowerCase();
+    for (const mime of parsed.mimeTypes) {
+      if (mime.endsWith('/*')) {
+        if (type.startsWith(mime.slice(0, -1))) return true;
+      } else if (type === mime) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Filter files by accept + maxSize + non-empty.
+   * @param {FileList | File[]} fileList
+   * @returns {{ valid: File[], rejected: File[] }}
+   */
+  function validateFiles(fileList) {
+    const parsed = parseAccept(accept);
+    const valid = [];
+    const rejected = [];
+    for (const file of fileList) {
+      if (file.size === 0 || !matchesAccept(file, parsed) || (maxSize > 0 && file.size > maxSize)) {
+        rejected.push(file);
+      } else {
+        valid.push(file);
+      }
+    }
+    if (!multiple && valid.length > 1) {
+      rejected.push(...valid.slice(1));
+      return { valid: [valid[0]], rejected };
+    }
+    return { valid, rejected };
+  }
+
+  /** @param {DragEvent} e */
+  function handleDrop(e) {
+    e.preventDefault();
+    dragging = false;
+    if (disabled) return;
+    const { valid, rejected } = validateFiles(e.dataTransfer?.files ?? []);
+    if (valid.length > 0) onfiles?.(valid);
+    if (rejected.length > 0) onreject?.(rejected);
+  }
+
+  /** @param {DragEvent} e */
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) dragging = true;
+  }
+
+  function handleDragLeave() {
+    dragging = false;
+  }
+
+  function handleClick() {
+    if (!disabled) inputEl?.click();
+  }
+
+  /** @param {Event} e */
+  function handleInputChange(e) {
+    const target = /** @type {HTMLInputElement} */ (e.target);
+    const { valid, rejected } = validateFiles(target.files ?? []);
+    if (valid.length > 0) onfiles?.(valid);
+    if (rejected.length > 0) onreject?.(rejected);
+    target.value = '';
+  }
+</script>
+
+<button
+  type="button"
+  class="fileupload {className}"
+  class:fileupload-dragging={dragging}
+  class:fileupload-disabled={disabled}
+  {disabled}
+  aria-label="Upload files"
+  ondrop={handleDrop}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  {...rest}
+  onclick={handleClick}
+>
+  <input
+    bind:this={inputEl}
+    type="file"
+    {accept}
+    {multiple}
+    class="fileupload-input"
+    onchange={handleInputChange}
+    tabindex={-1}
+    aria-hidden="true"
+  />
+  {#if children}
+    {@render children()}
+  {:else}
+    <div class="fileupload-content">
+      {#if icon}
+        <span class="fileupload-icon">{@render icon()}</span>
+      {/if}
+      <span class="fileupload-text">Drop files here or click to browse</span>
+      {#if accept || maxSize}
+        <span class="fileupload-hint">
+          {#if accept}{accept}{/if}
+          {#if accept && maxSize} &middot; {/if}
+          {#if maxSize}Max {formatSize(maxSize)}{/if}
+        </span>
+      {/if}
+    </div>
+  {/if}
+</button>
+
+<style>
+  .fileupload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: var(--fileupload-padding);
+    border: var(--fileupload-border);
+    border-radius: var(--fileupload-radius);
+    background: var(--fileupload-bg);
+    cursor: pointer;
+    transition: border var(--fileupload-transition), background var(--fileupload-transition);
+    font: inherit;
+    color: inherit;
+    text-align: center;
+    position: relative;
+  }
+
+  .fileupload:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .fileupload-dragging {
+    border: var(--fileupload-border-dragging);
+    background: var(--fileupload-bg-dragging);
+  }
+
+  .fileupload-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .fileupload-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .fileupload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .fileupload-icon {
+    display: flex;
+    width: var(--fileupload-icon-size);
+    height: var(--fileupload-icon-size);
+    color: var(--fileupload-icon-color);
+    transition: color var(--fileupload-transition);
+  }
+
+  .fileupload-dragging .fileupload-icon {
+    color: var(--fileupload-icon-color-dragging);
+  }
+
+  .fileupload-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .fileupload-text {
+    font-family: var(--fileupload-text-font);
+    font-size: var(--fileupload-text-size);
+    color: var(--fileupload-text-color);
+  }
+
+  .fileupload-hint {
+    font-family: var(--fileupload-hint-font);
+    font-size: var(--fileupload-hint-size);
+    color: var(--fileupload-hint-color);
+  }
+</style>

package/components/FileUploadItem.svelte

@@ -0,0 +1,222 @@
+<!--
+  @component FileUploadItem
+
+  Per-file upload/processing status row. Parent controls all state —
+  this is a pure display component. Uses DS Progress internally.
+
+  Consumes --fileupload-item-* tokens from components.css.
+
+  @example Uploading
+  <FileUploadItem name="report.pdf" size={2_400_000} status="uploading" progress={65} />
+
+  @example Error
+  <FileUploadItem name="data.csv" status="error" error="File exceeds 50 MB limit" onremove={() => {}} />
+
+  @example Complete
+  <FileUploadItem name="notes.txt" size={1_200} status="complete" />
+-->
+<script>
+  import Progress from './Progress.svelte';
+
+  let {
+    /** @type {string} */
+    name = '',
+    /** @type {number} File size in bytes */
+    size = 0,
+    /** @type {'pending' | 'uploading' | 'complete' | 'error'} */
+    status = 'pending',
+    /** @type {number} 0-100 */
+    progress = 0,
+    /** @type {string} */
+    error = '',
+    /** @type {(() => void) | undefined} */
+    onremove = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /**
+   * Format bytes to human-readable size.
+   * @param {number} bytes
+   * @returns {string}
+   */
+  function formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const val = bytes / Math.pow(1024, i);
+    return `${val % 1 === 0 ? val : val.toFixed(1)} ${units[i]}`;
+  }
+</script>
+
+<div class="fileupload-item fileupload-item-{status} {className}" {...rest}>
+  <div class="fileupload-item-icon">
+    {#if status === 'complete'}
+      <!-- Checkmark -->
+      <svg viewBox="0 0 20 20" fill="none">
+        <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/>
+        <path d="M7 10l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    {:else if status === 'error'}
+      <!-- X circle -->
+      <svg viewBox="0 0 20 20" fill="none">
+        <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/>
+        <path d="M7.5 7.5l5 5M12.5 7.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    {:else if status === 'uploading'}
+      <!-- Arrow up -->
+      <svg viewBox="0 0 20 20" fill="none">
+        <path d="M10 15V5M10 5l-4 4M10 5l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    {:else}
+      <!-- File -->
+      <svg viewBox="0 0 20 20" fill="none">
+        <path d="M6 3h5l5 5v9a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+        <path d="M11 3v5h5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+      </svg>
+    {/if}
+  </div>
+  <div class="fileupload-item-content">
+    <div class="fileupload-item-header">
+      <span class="fileupload-item-name">{name}</span>
+      {#if size && status !== 'error'}
+        <span class="fileupload-item-size">{formatSize(size)}</span>
+      {/if}
+      {#if onremove}
+        <button class="fileupload-item-remove" onclick={onremove} aria-label="Remove {name}">&times;</button>
+      {/if}
+    </div>
+    {#if status === 'uploading'}
+      <div class="fileupload-item-progress">
+        <Progress value={progress} />
+        <span class="fileupload-item-pct">{progress}%</span>
+      </div>
+    {/if}
+    {#if status === 'error' && error}
+      <span class="fileupload-item-error">{error}</span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .fileupload-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--fileupload-item-gap);
+    padding: var(--fileupload-item-padding);
+    background: var(--fileupload-item-bg);
+    border: var(--fileupload-item-border);
+    border-radius: var(--fileupload-item-radius);
+  }
+
+  .fileupload-item-icon {
+    flex-shrink: 0;
+    width: var(--fileupload-item-icon-size);
+    height: var(--fileupload-item-icon-size);
+    color: var(--color-text-muted);
+    display: flex;
+  }
+
+  .fileupload-item-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .fileupload-item-uploading .fileupload-item-icon {
+    color: var(--color-accent);
+  }
+
+  .fileupload-item-complete .fileupload-item-icon {
+    color: var(--fileupload-item-complete-color);
+  }
+
+  .fileupload-item-error .fileupload-item-icon {
+    color: var(--fileupload-item-error-color);
+  }
+
+  .fileupload-item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+  }
+
+  .fileupload-item-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .fileupload-item-name {
+    font-family: var(--fileupload-item-name-font);
+    font-size: var(--fileupload-item-name-size);
+    color: var(--fileupload-item-name-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fileupload-item-complete .fileupload-item-name {
+    color: var(--fileupload-item-complete-color);
+  }
+
+  .fileupload-item-size {
+    font-family: var(--fileupload-item-size-font);
+    font-size: var(--fileupload-item-size-size);
+    color: var(--fileupload-item-size-color);
+    flex-shrink: 0;
+  }
+
+  .fileupload-item-remove {
+    all: unset;
+    cursor: pointer;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    font-size: 16px;
+    line-height: 1;
+    border-radius: var(--radius-sm);
+  }
+
+  .fileupload-item-remove:hover {
+    color: var(--color-text);
+  }
+
+  .fileupload-item-remove:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .fileupload-item-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .fileupload-item-progress :global(.progress) {
+    flex: 1;
+  }
+
+  .fileupload-item-pct {
+    font-family: var(--fileupload-item-size-font);
+    font-size: var(--fileupload-item-size-size);
+    color: var(--fileupload-item-size-color);
+    flex-shrink: 0;
+    min-width: 3ch;
+    text-align: right;
+  }
+
+  .fileupload-item-error {
+    font-family: var(--fileupload-item-name-font);
+    font-size: var(--fileupload-item-size-size);
+    color: var(--fileupload-item-error-color);
+  }
+</style>

package/components/Input.svelte

@@ -0,0 +1,222 @@
+<!--
+  @component Input
+
+  Text input with label, help text, and error state.
+  Values displayed in Berkeley Mono (data font).
+  Consumes --input-* tokens from components.css.
+
+  @example Basic
+  <Input label="EMAIL" placeholder="you@example.com" />
+
+  @example With help text
+  <Input label="USERNAME" placeholder="Enter username" help="3-20 characters" />
+
+  @example Error
+  <Input label="EMAIL" value="bad" error="Please enter a valid email" />
+
+  @example With leading icon
+  <Input label="SEARCH" placeholder="Search...">
+    {#snippet leadingIcon()}
+      <PhMagnifyingGlass size={16} />
+    {/snippet}
+  </Input>
+-->
+<script module>
+  let _inputUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {'sm' | 'md' | 'lg'} Size
+   */
+
+  let {
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = undefined,
+    /** @type {string} */
+    value = $bindable(''),
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {Size} */
+    size = 'md',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {string} */
+    type = 'text',
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    leadingIcon = undefined,
+    ...rest
+  } = $props();
+
+  const fallbackId = `input-${_inputUid++}`;
+  const inputId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${inputId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+</script>
+
+<div class="input-group {className}">
+  {#if label}
+    <label class="input-label" for={inputId}>{label}</label>
+  {/if}
+
+  {#if leadingIcon}
+    <div class="input-icon-wrapper">
+      <span class="input-leading-icon" aria-hidden="true">
+        {@render leadingIcon()}
+      </span>
+      <input
+        id={inputId}
+        {type}
+        class="input input-{size} input-with-icon"
+        class:input-error={!!error}
+        class:input-readonly={readonly}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={hasHint ? hintId : undefined}
+        {placeholder}
+        {disabled}
+        {readonly}
+        bind:value
+        {...rest}
+      />
+    </div>
+  {:else}
+    <input
+      id={inputId}
+      {type}
+      class="input input-{size}"
+      class:input-error={!!error}
+      class:input-readonly={readonly}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={hasHint ? hintId : undefined}
+      {placeholder}
+      {disabled}
+      {readonly}
+      bind:value
+      {...rest}
+    />
+  {/if}
+
+  {#if error}
+    <span id={hintId} class="input-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="input-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .input-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .input {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-text);
+    transition: border var(--input-transition);
+    width: 100%;
+  }
+
+  .input-sm {
+    height: var(--input-sm-height);
+    padding: 0 var(--input-sm-padding-x);
+  }
+
+  .input-md {
+    height: var(--input-md-height);
+    padding: 0 var(--input-md-padding-x);
+  }
+
+  .input-lg {
+    height: var(--input-lg-height);
+    padding: 0 var(--input-lg-padding-x);
+  }
+
+  .input::placeholder {
+    color: var(--input-placeholder);
+  }
+
+  .input:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-readonly {
+    background: var(--color-surface-secondary);
+    cursor: default;
+  }
+
+  .input-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .input-error:focus {
+    border-color: var(--input-error-border-color);
+  }
+
+  .input-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .input-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+
+  /* ─── Icon ─── */
+  .input-icon-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .input-leading-icon {
+    position: absolute;
+    left: var(--input-md-padding-x);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    width: 16px;
+    height: 16px;
+    color: var(--input-placeholder);
+    pointer-events: none;
+  }
+
+  .input-leading-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .input-with-icon {
+    padding-left: calc(var(--input-md-padding-x) + 16px + var(--space-xs));
+  }
+</style>